:root {
  /* Brand Colors */
  --color-primary: #76896B;
  --color-primary-dark: #55664D;
  --color-primary-darker: #3F4C39;
  --color-primary-light: #A8B79F;

  /* Accent / CTA */
  --color-accent: #E67F22;
  --color-accent-dark: #C96512;
  --color-accent-light: #F2A45A;

  /* Backgrounds */
  --color-bg: #FFF8E5;
  --color-bg-secondary: #F7EED5;
  --color-surface: #FFFCF3;

  /* Text */
  --color-text: #2D302A;
  --color-text-secondary: #62685D;
  --color-text-muted: #858A80;
  --color-text-warm: #3a2f24;
  --color-text-warm-muted: #6f6254;

  /* Border */
  --color-border: #E5DDC8;

  /* Hero / header surface (green-tinted, not cream) */
  --color-hero-surface: #f2f6f0;
  --color-hero-surface-2: #e8efe6;
  --site-page-background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .09), rgb(var(--color-primary-rgb) / .03));

  /* Status */
  --color-success: #4F7D4A;
  --color-danger: #C94C4C;
  --color-warning: #D99A28;

  /* RGB channels (for alpha; keep in sync with hex tokens above) */
  --color-primary-rgb: 118 137 107;
  --color-primary-dark-rgb: 85 102 77;
  --color-primary-darker-rgb: 63 76 57;
  --color-accent-rgb: 230 127 34;
  --color-accent-dark-rgb: 201 101 18;
  --color-accent-light-rgb: 242 164 90;
  --color-bg-rgb: 255 248 229;
  --color-surface-rgb: 255 252 243;
  --color-success-rgb: 79 125 74;
  --color-danger-rgb: 201 76 76;
  --color-warning-rgb: 217 154 40;

  /* Legacy aliases */
  --black: var(--color-primary-darker);
  --black-2: var(--color-primary-dark);
  --orange: var(--color-accent);
  --orange-2: var(--color-accent-light);
  --gold: var(--color-warning);
  --cream: var(--color-bg);
  --cream-2: var(--color-bg-secondary);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: rgb(var(--color-accent-rgb) / .42);
  --shadow: 0 12px 28px rgb(var(--color-primary-darker-rgb) / .10);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: auto !important;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--site-page-background);
  font-family: "Peyda";
  color: var(--color-text);
  line-height: 1.8
}

html.chm-slider-dragging,
html.chm-slider-dragging body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.swiper {
  overscroll-behavior-x: none;
  overscroll-behavior-inline: none;
  touch-action: pan-y pinch-zoom;
}

img {
  display: block;
  max-width: 100%
}

a {
  text-decoration: none
}

button,
a {
  transition: .25s ease
}

.container-xxl {
  max-width: 1320px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 45px;
  padding: .72rem 1.45rem;
  border-radius: 8px;
  font-weight: 800
}

.btn-orange {
  color: #fff;
  border: 1px solid var(--color-accent-light);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 8px 24px rgb(var(--color-accent-rgb) / .25), inset 0 1px 0 rgba(255, 255, 255, .32)
}

.btn-orange:hover {
  color: #fff;
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark))
}

.btn-dark-outline {
  color: var(--color-text);
  border: 1px solid rgb(var(--color-primary-rgb) / .55);
  background: var(--color-surface)
}

.btn-dark-outline:hover {
  color: var(--color-accent-dark);
  background: rgb(var(--color-accent-rgb) / .08);
  border-color: var(--color-accent)
}

/* ============================================
   SITE HEADER & NAVIGATION
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--color-primary);
  border-bottom: 1px solid rgb(var(--color-primary-darker-rgb) / .22);
  box-shadow: none;
  transition: background .35s ease, border-color .35s ease
}

.site-header.is-scrolled {
  background: var(--color-primary-dark);
  border-bottom-color: rgb(var(--color-primary-darker-rgb) / .28);
  box-shadow: none
}

.site-header__inner {
  display: flex;
  flex-direction: column
}

.site-header__toolbar {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 68px;
  padding: .55rem 0
}

.site-header__brand {
  flex-shrink: 0;
  width: 108px;
  margin: 0;
  padding: 0;
  text-decoration: none
}

.site-header__brand img {
  width: 100%;
  height: 38px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .15))
}

.site-header__search {
  flex: 0 0 auto;
  width: 480px;
  max-width: 480px;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .45rem
}

.site-header__search-field {
  position: relative;
  display: block;
  width: 100%;
  margin: 0
}

.site-header__search-icon {
  position: absolute;
  top: 50%;
  right: .95rem;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 1rem;
  pointer-events: none
}

.site-header__search-input {
  width: 100%;
  height: 44px;
  padding: .65rem 2.65rem .65rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease
}

.site-header__search-input::placeholder {
  color: #9ca3af;
  font-weight: 400
}

.site-header__search-input:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .22)
}

/* ===== Site nav (mega + drawer) ===== */
.site-nav__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.site-nav {
  position: relative;
  flex-shrink: 0;
  z-index: 20
}

.site-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 .9rem 0 .7rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .2), rgb(255 255 255 / .08));
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgb(0 0 0 / .12),
    inset 0 1px 0 rgb(255 255 255 / .25);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease
}

.site-nav__btn:hover,
.site-nav__desktop:focus-within .site-nav__btn--mega,
.site-nav__desktop:hover .site-nav__btn--mega {
  transform: translateY(-1px);
  border-color: rgb(255 255 255 / .48);
  background: linear-gradient(145deg, rgb(255 255 255 / .28), rgb(255 255 255 / .12));
  box-shadow:
    0 12px 24px rgb(0 0 0 / .16),
    inset 0 1px 0 rgb(255 255 255 / .3)
}

.site-nav__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  background: rgb(255 255 255 / .16);
  font-size: .95rem;
  line-height: 1
}

.site-nav__btn-icon i {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 1em;
  height: 1em;
  text-align: center
}

.site-nav__btn-caret {
  font-size: .72rem;
  opacity: .8;
  transition: transform .25s ease
}

.site-nav__desktop:hover .site-nav__btn-caret,
.site-nav__desktop:focus-within .site-nav__btn-caret {
  transform: rotate(180deg)
}

.site-nav__desktop {
  display: none;
  position: relative
}

.site-nav__btn--drawer {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  padding: 0;
  gap: 0
}

.site-nav__mega {
  position: absolute;
  top: 100%;
  right: 0;
  width: min(420px, calc(100vw - 2rem));
  padding: .75rem 1rem 1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  box-shadow:
    0 24px 56px rgb(var(--color-primary-darker-rgb) / .18),
    0 8px 18px rgb(var(--color-primary-darker-rgb) / .08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transform-origin: top right;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease
}

/* Bridge so mouse can move from button to panel without closing */
.site-nav__mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: .85rem
}

.site-nav__desktop:hover .site-nav__mega,
.site-nav__desktop:focus-within .site-nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(.55rem) scale(1)
}

.site-nav__mega-head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .85rem;
  padding: .15rem .35rem .85rem;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .1)
}

.site-nav__mega-head strong {
  color: var(--color-primary-darker);
  font-size: 1rem;
  font-weight: 900
}

.site-nav__mega-head span {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 600;
  margin-top:12px;
}

.site-nav__mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem
}

.site-nav__mega-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .55rem .7rem;
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, transform .18s ease
}

.site-nav__mega-link i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-dark);
  font-size: 1rem;
  transition: background .18s ease, color .18s ease
}

.site-nav__mega-link:hover {
  background: linear-gradient(90deg, rgb(var(--color-primary-rgb) / .14), rgb(var(--color-primary-rgb) / .04));
  color: var(--color-primary-darker);
  transform: translateX(-2px)
}

.site-nav__mega-link:hover i {
  background: var(--color-primary-dark);
  color: #fff
}

/* Telegram-style drawer from the right */
.site-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  width: min(330px, 88vw);
  background:
    linear-gradient(180deg, #fbfaf6 0%, #f4f1e8 100%);
  border-left: 1px solid rgb(var(--color-primary-rgb) / .12);
  box-shadow: -18px 0 48px rgb(0 0 0 / .18);
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

.site-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgb(20 24 18 / .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  cursor: pointer
}

.site-nav__toggle:checked ~ .site-drawer {
  transform: translateX(0)
}

.site-nav__toggle:checked ~ .site-drawer__backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

body:has(.site-nav__toggle:checked) {
  overflow: hidden
}

.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .12);
  background: rgb(255 255 255 / .72);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 1
}

.site-drawer__brand img {
  width: 110px;
  height: auto;
  max-height: 40px;
  object-fit: contain
}

.site-drawer__close {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-darker);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease
}

.site-drawer__close:hover {
  background: rgb(var(--color-primary-rgb) / .2);
  transform: rotate(90deg)
}

.site-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem .9rem
}

.site-drawer__link {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 52px;
  padding: .75rem .9rem;
  border-radius: 14px;
  color: var(--color-text);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 800;
  transition: background .18s ease, transform .18s ease
}

.site-drawer__link i {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  box-shadow: 0 4px 12px rgb(var(--color-primary-darker-rgb) / .06)
}

.site-drawer__link:hover,
.site-drawer__link:active {
  background: rgb(var(--color-primary-rgb) / .1);
  transform: translateX(-3px)
}

.site-drawer__link--accent {
  background: linear-gradient(90deg, rgb(var(--color-primary-rgb) / .16), transparent);
  border: 1px solid rgb(var(--color-primary-rgb) / .14)
}

.site-drawer__foot {
  margin-top: auto;
  padding: 1rem .9rem 1.35rem;
  border-top: 1px solid rgb(var(--color-primary-rgb) / .12)
}

.site-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgb(var(--color-primary-rgb) / .28)
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  margin-inline-start: auto
}

.site-header__nav {
  border-top: 1px solid rgb(255 255 255 / .12);
  background: rgb(var(--color-primary-darker-rgb) / .12);
  padding: .35rem 0 .55rem
}

.site-header__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .2rem .35rem;
  margin: 0;
  padding: 0;
  list-style: none
}

.site-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .88);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .45rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease, background .2s ease
}

.site-header__link:hover {
  color: #fff;
  background: rgb(255 255 255 / .1)
}

.site-header__link.active {
  color: #fff
}

.site-header__link.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent-light);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(242, 164, 90, .45)
}

.site-header__dropdown .dropdown-toggle::after {
  margin-right: .35rem;
  vertical-align: .15em;
  border-top-color: rgba(255, 255, 255, .7);
  transition: transform .25s ease
}

.site-header__dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg)
}

.chm-nav {
  padding: 0
}

.chm-nav__dropdown-menu {
  margin-top: .65rem !important;
  padding: .5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow), 0 24px 60px rgb(var(--color-primary-darker-rgb) / .12);
  backdrop-filter: blur(16px);
  min-width: 240px;
  animation: chmDropdownIn .22s ease
}

@keyframes chmDropdownIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.chm-nav__dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 10px;
  padding: .65rem .75rem
}

.chm-nav__dropdown-menu .dropdown-item i {
  width: 1.1rem;
  color: var(--color-primary);
  font-size: 1rem;
  opacity: .9
}

.chm-nav__dropdown-menu .dropdown-item:hover,
.chm-nav__dropdown-menu .dropdown-item:focus {
  color: var(--color-text);
  background: linear-gradient(90deg, rgb(var(--color-primary-rgb) / .14), rgb(var(--color-primary-rgb) / .05))
}

.chm-nav__actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0
}

.chm-nav__leading {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  margin-inline-start: auto
}

.chm-nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease
}

.chm-nav__cart i {
  font-size: 1.05rem
}

.chm-nav__cart:hover,
.chm-nav__cart.active {
  color: #fff;
  border-color: rgb(var(--color-accent-rgb) / .55);
  background: linear-gradient(135deg, rgba(242, 164, 90, .85), rgb(var(--color-accent-dark-rgb) / .75));
  box-shadow: 0 8px 22px rgb(var(--color-accent-rgb) / .24);
  transform: translateY(-1px)
}

.chm-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 36px;
  padding: .38rem .72rem;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease
}

.chm-nav__btn i {
  font-size: .92rem;
  line-height: 1
}

.chm-nav__btn-sep {
  opacity: .72;
  font-weight: 500;
  padding-inline: .12rem;
}

.chm-nav__btn--primary {
  color: #fff;
  border-color: rgb(var(--color-accent-rgb) / .5);
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%);
  box-shadow: 0 4px 14px rgb(var(--color-accent-rgb) / .22), inset 0 1px 0 rgba(255, 255, 255, .2)
}

.chm-nav__btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(var(--color-accent-rgb) / .28)
}

.chm-nav__btn--dashboard {
  color: var(--color-primary-dark);
  border-color: rgb(var(--color-surface-rgb) / .55);
  background: linear-gradient(135deg, rgb(var(--color-surface-rgb) / .96), rgba(247, 238, 213, .9));
  box-shadow: 0 4px 14px rgb(var(--color-primary-darker-rgb) / .1), inset 0 1px 0 rgba(255, 255, 255, .65)
}

.chm-nav__btn--dashboard:hover {
  color: var(--color-primary-darker);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(135deg, #fff, rgb(var(--color-bg-rgb) / .98));
  box-shadow: 0 6px 18px rgb(var(--color-primary-darker-rgb) / .14)
}

.chm-nav__btn--calendar {
  color: #fff;
  border-color: rgb(var(--color-primary-rgb) / .45);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 4px 14px rgb(var(--color-primary-rgb) / .24), inset 0 1px 0 rgba(255, 255, 255, .18)
}

.chm-nav__btn--calendar:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(var(--color-primary-rgb) / .32)
}

.chm-nav__btn--ghost {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06)
}

.chm-nav__btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .12)
}

.chm-nav__toggle {
  border: 0 !important;
  box-shadow: none !important;
  padding: .35rem;
  margin: 0
}

.chm-nav__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px
}

.chm-nav__toggle-box span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  transition: transform .28s ease, opacity .28s ease, width .28s ease
}

.chm-nav__toggle-box span:nth-child(2) {
  width: 78%
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(2) {
  opacity: 0;
  width: 0
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* Mobile menu drawer */
.chm-mobile-menu {
  --bs-offcanvas-width: min(360px, 92vw);
  background: linear-gradient(165deg, var(--color-surface) 0%, var(--color-bg) 48%, var(--color-bg-secondary) 100%);
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
  transform: translateX(0) !important;
  transition: opacity .28s ease, visibility .28s ease !important
}

.chm-mobile-menu.offcanvas:not(.show) {
  opacity: 0;
  pointer-events: none
}

.chm-mobile-menu.offcanvas.show,
.chm-mobile-menu.offcanvas.showing {
  opacity: 1;
  pointer-events: auto
}

.offcanvas-backdrop {
  transition: opacity .28s ease !important
}

.chm-mobile-menu__header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: rgb(var(--color-surface-rgb) / .75)
}

.chm-mobile-menu__brand img {
  width: 128px;
  height: auto;
  max-height: 46px;
  object-fit: contain
}

.chm-mobile-menu__close {
  opacity: .75;
  box-shadow: none !important
}

.chm-mobile-menu__body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
  gap: 1rem
}

.chm-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1
}

.chm-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  color: var(--color-text-secondary);
  font-size: .95rem;
  font-weight: 700;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: .85rem 1rem;
  text-align: right
}

.chm-mobile-menu__link i {
  width: 1.15rem;
  color: var(--color-accent);
  font-size: 1.05rem
}

.chm-mobile-menu__link:hover,
.chm-mobile-menu__link.is-active {
  color: var(--color-text);
  background: rgb(var(--color-accent-rgb) / .1)
}

.chm-mobile-menu__link.is-active {
  box-shadow: inset 3px 0 0 var(--color-accent)
}

.chm-mobile-menu__accordion {
  justify-content: space-between
}

.chm-mobile-menu__link-main {
  display: inline-flex;
  align-items: center;
  gap: .75rem
}

.chm-mobile-menu__chevron {
  color: var(--color-text-muted);
  font-size: .85rem;
  transition: transform .25s ease
}

.chm-mobile-menu__accordion[aria-expanded="true"] .chm-mobile-menu__chevron {
  transform: rotate(180deg);
  color: var(--color-accent)
}

.chm-mobile-menu__sub {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: .15rem .5rem .35rem 0;
  padding: .35rem .75rem .35rem 0;
  border-right: 2px solid rgb(var(--color-accent-rgb) / .25)
}

.chm-mobile-menu__sub a {
  color: var(--color-text-muted);
  font-size: .86rem;
  font-weight: 600;
  border-radius: 10px;
  padding: .55rem .85rem
}

.chm-mobile-menu__sub a:hover {
  color: var(--color-text);
  background: rgb(var(--color-primary-rgb) / .08)
}

.chm-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border)
}

.chm-mobile-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 800;
  border: 1px solid transparent
}

.chm-mobile-menu__btn--primary {
  color: #fff;
  border-color: rgb(var(--color-accent-rgb) / .45);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / .22)
}

.chm-mobile-menu__btn--dashboard {
  color: var(--color-primary-dark);
  border-color: rgb(var(--color-primary-rgb) / .22);
  background: linear-gradient(135deg, rgb(var(--color-surface-rgb) / .98), rgba(247, 238, 213, .92));
  box-shadow: 0 8px 20px rgb(var(--color-primary-darker-rgb) / .1)
}

.chm-mobile-menu__btn--ghost {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface)
}

@media (max-width:991.98px) {
  .site-header__toolbar {
    min-height: 58px;
    gap: .55rem;
    padding: .45rem 0
  }

  .site-header__brand {
    width: 70px;
    order: 1
  }

  .site-header__brand img {
    height: 28px
  }

  .site-header__search {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    order: 2
  }

  .site-nav {
    order: 3
  }

  .site-header__search-input {
    height: 42px;
    font-size: .88rem;
    padding: .55rem 2.45rem .55rem .85rem
  }

  .site-nav__btn--drawer {
    min-height: 42px;
    width: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 11px
  }

  .site-nav__btn--drawer .site-nav__btn-icon {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .88rem
  }
}

@media (min-width:992px) {
  .site-nav__desktop {
    display: block
  }

  .site-nav__btn--drawer {
    display: none
  }

  .site-drawer,
  .site-drawer__backdrop {
    display: none !important
  }
}

/* ============================================
   PAGE TRANSITIONS — disabled (instant navigation)
   ============================================ */

.page-transition {
  animation: none;
}

.page-transition--leaving {
  animation: none;
  pointer-events: none;
}

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root),
  ::view-transition-image-pair(root) {
    animation: none !important;
  }
}

@media (max-width:1199.98px) and (min-width:992px) {
  .site-header__link {
    padding-inline: .7rem;
    font-size: .86rem
  }

  .chm-nav__btn {
    padding-inline: .62rem;
    font-size: .76rem
  }

  .site-header__search {
    width: 440px;
    max-width: 440px
  }

  .site-header__search-input {
    font-size: .86rem
  }
}

/* hero */
.hero {
  --hero-bg: #f6f2e8;
  --hero-green: #3d462c;
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  min-height: clamp(500px, 60vh, 640px);
  align-items: stretch;
}

.hero__content {
  grid-column: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.85rem;
  min-height: inherit;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.1rem, 3.5vw, 2.5rem) clamp(1.2rem, 2.5vw, 1.6rem);
  background: var(--hero-bg);
}

.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.hero__inner {
  width: 100%;
  max-width: 100%;
  margin-inline-end: auto;
  text-align: start;
}

.hero__heading {
  margin: 0 0 1rem;
}

.hero__heading > * {
  margin: 0;
  line-height: 1.25;
}

.hero__subheading {
  margin: 0 0 .55rem;
  max-width: 100%;
}

.hero__subheading > * {
  margin: 0;
  line-height: 1.7;
}

.hero__search {
  margin-top: 1.55rem;
  max-width: 100%;
}

.hero__search-field {
  position: relative;
  display: block;
  margin: 0;
}

.hero__search-icon {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  pointer-events: none;
  opacity: .72;
}

.hero__search-input {
  width: 100%;
  min-height: 60px;
  padding: .95rem 3.2rem .95rem 1.35rem;
  border: 1px solid rgb(63 79 60 / .1);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: .96rem;
  font-weight: 600;
  box-shadow:
    0 16px 36px rgb(63 79 60 / .12),
    0 2px 0 rgb(255 255 255 / .8) inset;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.hero__search-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 500;
}

.hero__search-input:focus {
  outline: none;
  border-color: rgb(63 79 60 / .22);
  box-shadow:
    0 18px 42px rgb(63 79 60 / .16),
    0 0 0 3px rgb(201 146 58 / .2);
}

.hero__highlights {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  background: linear-gradient(145deg, #364534 0%, #465843 52%, #3b4a38 100%);
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 14px 32px rgb(40 52 38 / .28),
    0 1px 0 rgb(255 255 255 / .12) inset;
}

.hero__highlights li {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .75rem .5rem;
  transition: background .2s ease;
}

.hero__highlights li:hover {
  background: rgb(255 255 255 / .06);
}

.hero__highlights li + li {
  border-inline-start: 1px solid rgb(255 255 255 / .16);
}

.hero__highlight-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.15rem;
  color: #e8c27a;
  font-size: .95rem;
  line-height: 1;
}

.hero__highlight-icon i {
  display: block;
  line-height: 1;
}

.hero__highlight-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  min-width: 0;
}

.hero__highlight-title {
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
}

.hero__highlight-desc {
  margin: 0;
  font-size: .64rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(255 255 255 / .74);
  white-space: nowrap;
}

.hero__media {
  grid-column: 2;
  position: relative;
  z-index: 1;
  min-height: clamp(500px, 60vh, 640px);
  overflow: hidden;
  background: var(--hero-green);
}

.hero__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48%, 420px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right,
      transparent 0%,
      rgb(246 242 232 / .04) 12%,
      rgb(246 242 232 / .12) 28%,
      rgb(246 242 232 / .28) 45%,
      rgb(246 242 232 / .5) 62%,
      rgb(246 242 232 / .72) 78%,
      rgb(246 242 232 / .9) 90%,
      var(--hero-bg) 100%);
}

.hero__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.hero__slider--single .hero__image,
.hero__slider--dual .hero__image--a {
  opacity: 1;
}

.hero__slider--dual .hero__image--a {
  animation: heroSlideA 10s ease-in-out infinite;
}

.hero__slider--dual .hero__image--b {
  opacity: 0;
  animation: heroSlideB 10s ease-in-out infinite;
}

@keyframes heroSlideA {
  0%, 46% { opacity: 1; }
  50%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes heroSlideB {
  0%, 46% { opacity: 0; }
  50%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slider--dual .hero__image--a,
  .hero__slider--dual .hero__image--b {
    animation: none;
  }

  .hero__slider--dual .hero__image--a { opacity: 1; }
  .hero__slider--dual .hero__image--b { opacity: 0; }
}

/* cream page */
.light-page {
  position: relative;
  background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .09), rgb(var(--color-primary-rgb) / .03));
  padding-top: 1px;
  overflow: hidden
}

.light-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--color-primary-rgb) / .16) .6px, transparent .6px);
  background-size: 10px 10px
}

.light-page>section {
  position: relative;
  z-index: 1
}

.features {
  padding: 30px 0;
  background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .07), rgb(var(--color-primary-rgb) / .02));
  position: relative;
  overflow: hidden;
}

.features::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--color-primary);
  opacity: .06;
  border-radius: 50%;
  right: -150px;
  top: -150px;
}

.feature-header {
  text-align: center;
  margin-bottom: 30px;
}

.feature-header__badge {
  margin: 0 0 .35rem;
}

.feature-header__badge > * {
  margin: 0;
}

.feature-header__title {
  margin: 15px 0;
}

.feature-header__title > * {
  margin: 0;
  line-height: 1.35;
}

.feature-header__desc {
  max-width: 600px;
  margin-inline: auto;
}

.feature-header__desc > * {
  margin: 0;
  line-height: 1.7;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 25px;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(15px);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 30px;
  overflow: hidden;
  transition: .45s cubic-bezier(.4, 0, .2, 1);
}

.feature-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--color-primary);
  opacity: .08;
  border-radius: 50%;
  left: -40px;
  bottom: -40px;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgb(var(--color-primary-rgb) / .14);
}

.feature-card__icon {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  margin-bottom: 25px;
  box-shadow: 0 15px 30px rgb(var(--color-primary-rgb) / .22);
  flex-shrink: 0;
}

.feature-card__icon i {
  color: white;
  font-size: 30px;
}

.feature-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.feature-card h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-warm);
  margin: 0 0 12px;
}

.feature-card p {
  color: var(--color-text-warm-muted);
  line-height: 2;
  min-height: 70px;
  margin: 0;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-weight: 700;
  margin-top: 20px;
  text-decoration: none;
}

.feature-link:hover {
  color: var(--color-accent-dark);
}

.feature-link i {
  transition: .3s;
}

.feature-card:hover .feature-link i {
  transform: translateX(-5px);
}

@media (max-width: 768px) {
  .features {
    padding: 28px 0 36px;
  }

  .features::before {
    width: 260px;
    height: 260px;
    right: -90px;
    top: -90px;
  }

  .feature-header {
    margin-bottom: 22px;
    padding-inline: 2px;
  }

  .feature-header__title {
    margin: 10px 0;
  }

  .feature-header__desc {
    padding-inline: .5rem;
  }

  .features__grid {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .75rem;
  }

  .features__grid > [class*="col-"] {
    display: flex;
  }

  .feature-card {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 14px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgb(var(--color-primary-rgb) / .1);
    box-shadow:
      0 1px 2px rgb(var(--color-primary-darker-rgb) / .04),
      0 10px 28px rgb(var(--color-primary-darker-rgb) / .07);
    backdrop-filter: none;
  }

  .feature-card::before {
    display: none;
  }

  .feature-card:hover {
    transform: none;
    box-shadow:
      0 1px 2px rgb(var(--color-primary-darker-rgb) / .04),
      0 10px 28px rgb(var(--color-primary-darker-rgb) / .07);
  }

  .feature-card:active {
    transform: scale(.985);
  }

  .feature-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin: 0 auto 12px;
    box-shadow: 0 8px 18px rgb(var(--color-primary-rgb) / .18);
  }

  .feature-card__icon i {
    font-size: 20px;
  }

  .feature-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .feature-card h4 {
    font-size: .88rem;
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .feature-card p {
    font-size: .76rem;
    line-height: 1.6;
    min-height: calc(2 * 1.6 * .76rem);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-link {
    justify-content: center;
    font-size: .74rem;
    margin-top: auto;
    padding-top: 10px;
    gap: 5px;
  }

  .feature-card:hover .feature-link i {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .features__grid {
    --bs-gutter-x: .5rem;
  }

  .feature-card {
    padding: 12px 10px;
  }

  .feature-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .feature-card__icon i {
    font-size: 18px;
  }

  .feature-card h4 {
    font-size: .82rem;
  }

  .feature-card p {
    font-size: .72rem;
    min-height: calc(2 * 1.6 * .72rem);
  }

  .feature-link {
    font-size: .7rem;
    padding-top: 8px;
  }
}

/* titles */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 10px 0 18px
}

.section-title h2 {
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0;
  color: #211d19
}

.section-title span {
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange))
}

.section-title span:last-child {
  background: linear-gradient(90deg, var(--orange), transparent)
}

.section-title-small {
  margin-top: 0
}

.align-title-end {
  justify-content: flex-start;
  margin-bottom: 12px
}

.align-title-end span {
  width: 75px
}

/* site toast */
.site-toast-host {
  position: fixed;
  top: 88px;
  left: 24px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.site-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 18px 40px rgba(20, 24, 35, .14), 0 2px 8px rgba(20, 23, 35, .06);
  backdrop-filter: blur(12px);
  overflow: hidden;
  pointer-events: auto;
  animation: site-toast-in .38s cubic-bezier(.22, 1, .36, 1);
}

.site-toast__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.site-toast__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.site-toast__close {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-inline-start: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a8f98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.site-toast__close:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--color-text);
}

.site-toast__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  transform-origin: right center;
  animation: site-toast-progress 4.8s linear forwards;
}

.site-toast--info .site-toast__icon {
  color: var(--color-accent);
}

.site-toast--info .site-toast__progress {
  background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));
}

.site-toast--success .site-toast__icon {
  color: #2e7d32;
}

.site-toast--success .site-toast__progress {
  background: linear-gradient(90deg, #66bb6a, #2e7d32);
}

.site-toast--warning .site-toast__icon {
  color: #ef6c00;
}

.site-toast--warning .site-toast__progress {
  background: linear-gradient(90deg, #ffb74d, #ef6c00);
}

.site-toast--error .site-toast__icon {
  color: #c62828;
}

.site-toast--error .site-toast__progress {
  background: linear-gradient(90deg, #ef5350, #c62828);
}

@keyframes site-toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes site-toast-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* courses */
.courses-section {
  padding: 0 0 24px;
  margin-top: 30px;
}

.courses-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .06) 100%);
  box-shadow: 0 8px 24px rgb(var(--color-primary-darker-rgb) / .06);
}

.courses-section__heading {
  margin: 0;
  min-width: fit-content;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.4;
}

.courses-section__divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 28px;
  background: rgb(var(--color-primary-rgb) / .18);
}

.courses-section__tabs-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.coursesCategorySwiper {
  width: 100%;
  overflow: hidden;
}

.courses-section__tab-slide {
  width: auto !important;
}

.courses-section__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.courses-section__tab:hover:not(:disabled) {
  color: var(--color-text);
  background: rgb(var(--color-primary-rgb) / .08);
}

.courses-section__tab--active {
  color: var(--color-text);
  background: rgb(var(--color-primary-rgb) / .14);
  box-shadow: inset 0 0 0 1px rgb(var(--color-primary-rgb) / .16);
}

.courses-section__tab:disabled {
  opacity: .65;
  cursor: wait;
}

.courses-section__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: fit-content;
  height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}

.courses-section__view-all:hover {
  color: var(--color-primary-dark);
}

.courses-section__view-all svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.courses-section__content {
  width: 100%;
}

.courses-section__slider-area {
  display: grid;
  grid-template-columns: minmax(210px, 245px) minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  min-width: 0;
}

.masterchef-promo {
  --mc-ink: #fbf5e6;
  --mc-muted: #ccd2c1;
  --mc-gold: #e7c67c;
  --mc-notch-w: 88px;
  --mc-notch-h: 48px;
  --mc-notch-r: 22px;
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: 58px 20px 20px;
  border-radius: 26px;
  background:
    radial-gradient(125% 85% at 88% 4%, rgb(231 198 124 / .18), transparent 58%),
    radial-gradient(120% 90% at 4% 104%, rgb(231 198 124 / .14), transparent 62%),
    linear-gradient(158deg, #4a5942 0%, #3a4834 48%, #29341f 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
  color: var(--mc-ink);
  filter: drop-shadow(0 14px 28px rgb(41 52 31 / .26));
  -webkit-mask:
    radial-gradient(var(--mc-notch-r) at 100% 0, #0000 98%, #000 100%)
      right calc(var(--mc-notch-w) - var(--mc-notch-r)) top calc(var(--mc-notch-h) - var(--mc-notch-r)) / var(--mc-notch-r) var(--mc-notch-r) no-repeat,
    conic-gradient(from 0deg at calc(100% - var(--mc-notch-w)) var(--mc-notch-h), #0000 0 25%, #000 25%);
  mask:
    radial-gradient(var(--mc-notch-r) at 100% 0, #0000 98%, #000 100%)
      right calc(var(--mc-notch-w) - var(--mc-notch-r)) top calc(var(--mc-notch-h) - var(--mc-notch-r)) / var(--mc-notch-r) var(--mc-notch-r) no-repeat,
    conic-gradient(from 0deg at calc(100% - var(--mc-notch-w)) var(--mc-notch-h), #0000 0 25%, #000 25%);
  transition: transform .25s ease, filter .25s ease;
}

.masterchef-promo:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 18px 34px rgb(41 52 31 / .32));
}

.masterchef-promo::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(231 198 124 / .18) .75px, transparent .75px);
  background-size: 13px 13px;
  opacity: .55;
  content: "";
  pointer-events: none;
}

.masterchef-promo__orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(231 198 124 / .22);
  border-radius: 50%;
  pointer-events: none;
}

.masterchef-promo__orbit--one {
  bottom: -104px;
  left: -76px;
  width: 236px;
  height: 236px;
  box-shadow: 0 0 0 14px rgb(231 198 124 / .05);
}

.masterchef-promo__orbit--two {
  top: 30px;
  right: -68px;
  width: 152px;
  height: 152px;
  border-color: rgb(251 245 230 / .12);
}

.masterchef-promo__glow {
  position: absolute;
  z-index: -1;
  right: -44px;
  bottom: -72px;
  width: 214px;
  height: 162px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(231 198 124 / .26), transparent);
  pointer-events: none;
}

.masterchef-promo__art {
  position: absolute;
  z-index: -1;
  top: 6px;
  left: -18px;
  width: 110px;
  height: 110px;
  color: var(--mc-gold);
  opacity: .16;
  pointer-events: none;
}

.masterchef-promo__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  min-height: 28px;
  padding: 3px 11px;
  border: 1px solid rgb(231 198 124 / .4);
  border-radius: 999px;
  background: linear-gradient(140deg, rgb(231 198 124 / .22), rgb(231 198 124 / .08));
  color: var(--mc-gold);
  font-size: 11px;
  font-weight: 800;
}

.masterchef-promo__badge i {
  font-size: 12px;
}

.masterchef-promo__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  padding: 12px 0 10px;
}

.masterchef-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--mc-gold);
  font-size: 11px;
  font-weight: 800;
}

.masterchef-promo__eyebrow::before {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgb(231 198 124 / .75);
  content: "";
}

.masterchef-promo h2 {
  max-width: 13rem;
  margin: 0 0 9px;
  color: var(--mc-ink);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  font-weight: 900;
  line-height: 1.6;
}

.masterchef-promo p {
  max-width: 13rem;
  margin: 0;
  color: var(--mc-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.85;
}

.masterchef-promo__button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #d8ad57 0%, #b98736 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 22px rgb(21 27 19 / .26), inset 0 1px 0 rgb(255 255 255 / .32);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.masterchef-promo__button:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgb(21 27 19 / .32), inset 0 1px 0 rgb(255 255 255 / .38);
}

.masterchef-promo__button i {
  font-size: 15px;
  transition: transform .22s ease;
}

.masterchef-promo__button:hover i {
  transform: translateX(-3px);
}

.courses-section__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  border-radius: 21px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .05) 100%);
  color: var(--color-text-secondary);
  font-size: 15px;
}

.courses-slider-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 14px;
  border-radius: 21px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .05) 100%);
  box-shadow: 0 16px 35px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.courses-slider-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--color-primary-rgb) / .09) .6px, transparent .6px);
  background-size: 12px 12px;
  opacity: .32;
  z-index: 0;
}

.courses-slider-wrapper > * {
  position: relative;
  z-index: 1;
}

.courses-section,
.courses-section__tabs-wrap,
.coursesCategorySwiper,
.courses-slider-wrapper,
.coursesSwiper {
  overscroll-behavior-x: none;
  overscroll-behavior-inline: none;
}

.coursesSwiper {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.coursesSwiper.is-dragging,
body.courses-swiper-dragging .coursesSwiper {
  cursor: grabbing;
}

.coursesSwiper.is-dragging *,
body.courses-swiper-dragging .coursesSwiper * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none;
}

body.courses-swiper-dragging,
body.courses-swiper-dragging .courses-section {
  overscroll-behavior-x: none;
}

.coursesSwiper .swiper-slide {
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

.courses-nav__btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(var(--color-primary-rgb) / .24);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgb(var(--color-primary-rgb) / .10));
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 4px 14px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .65);
  z-index: 3;
}

.courses-nav__btn:hover {
  color: var(--color-primary-darker);
  border-color: rgb(var(--color-primary-rgb) / .42);
  background: linear-gradient(135deg, #fff, rgb(var(--color-primary-rgb) / .14));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(var(--color-primary-darker-rgb) / .12);
}

.courses-nav__btn:active {
  transform: translateY(0);
}

.courses-nav__btn.swiper-button-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.courses-section .courses-section__title {
  margin-top: 32px;
  margin-bottom: 22px;
}

.courses-section__title h2 {
  color: var(--color-text);
}

.courses-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
  margin-inline: auto;
  padding: 24px;
  border-radius: 21px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .05) 100%);
  box-shadow: 0 16px 35px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.courses-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--color-primary-rgb) / .09) .6px, transparent .6px);
  background-size: 12px 12px;
  opacity: .32;
}

.courses-grid > * {
  position: relative;
  z-index: 1;
}

.course-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcf8 100%);
  box-shadow:
    0 10px 24px rgb(var(--color-primary-darker-rgb) / .07),
    0 2px 0 rgb(255 255 255 / .95) inset;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.course-card-v2__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.course-card-v2__link:hover .course-card-v2__title {
  color: var(--color-accent);
}

.course-card-v2:hover {
  transform: translateY(-7px);
  border-color: rgb(var(--color-primary-rgb) / .34);
  box-shadow:
    0 18px 36px rgb(var(--color-primary-darker-rgb) / .13),
    0 2px 0 rgb(255 255 255 / .95) inset;
}

.course-card-v2__media {
  position: relative;
  display: block;
  height: 188px;
  margin: 10px 10px 0;
  border-radius: 16px;
  background: #eceff3;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}

.course-card-v2__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(31 48 35 / .04) 35%, rgb(31 48 35 / .62) 100%);
  content: "";
  pointer-events: none;
}

.course-card-v2__media img,
.course-card-v2__media video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.course-card-v2:hover .course-card-v2__media img,
.course-card-v2:hover .course-card-v2__media video {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.course-card-v2__discount {
  position: absolute;
  top: 12px;
  left: 12px;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(229, 57, 53, .35);
  z-index: 3;
}

.course-card-v2__status {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 30px;
  padding: 0 10px;
  gap: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 5px 14px rgb(31 48 35 / .22);
}

.course-card-v2__status i {
  font-size: 13px;
}

.course-card-v2__status--soon {
  background: var(--color-accent);
  box-shadow: 0 4px 12px rgb(var(--color-accent-rgb) / .35);
}

.course-card-v2__status--published {
  background: linear-gradient(135deg, #5f8956, #3f6946);
}

.course-card-v2__status--completed {
  background: linear-gradient(135deg, #687783, #4c5964);
  box-shadow: 0 4px 12px rgba(95, 107, 115, .35);
}

.course-card-v2__status--cancelled {
  background: #a94b45;
}

.course-card-v2__category {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .28);
  background: rgb(45 68 49 / .86);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
}

.course-card-v2__body {
  flex: 1;
  padding: 16px 16px 12px;
  text-align: right;
}

.course-card-v2__title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.65;
  min-height: 3.3em;
  height: 3.3em;
  color: var(--color-text);
  transition: color .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-v2__facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 13px;
}

.course-card-v2__fact {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 7px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px dashed rgb(var(--color-primary-rgb) / .18);
  border-radius: 0;
  background: transparent;
}

.course-card-v2__fact:last-child {
  border-bottom: 0;
}

.course-card-v2__fact > i {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary-dark);
  font-size: 13px;
}

.course-card-v2__fact > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.35;
}

.course-card-v2__fact small {
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
}

.course-card-v2__fact strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-card-v2__fact--type {
  border-color: rgb(var(--color-accent-rgb) / .2);
}

.course-card-v2__fact--type > i {
  color: var(--color-accent-dark);
}

.course-card-v2__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 12px;
  min-height: 30px;
  color: #6b7280;
  font-size: 12px;
}

.course-card-v2__meta span {
  display: inline-flex;
  align-items: center;
}

.course-card-v2__meta i {
  margin-left: 4px;
  color: var(--color-primary);
}

.course-card-v2__footer {
  margin-top: 0;
  padding: 12px 16px 15px;
  border-top: 1px solid rgb(var(--color-primary-rgb) / .1);
  background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .025), rgb(var(--color-primary-rgb) / .07));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-card-v2__cart-spacer {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.course-card-v2__cart-wrap {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
}

.course-card-v2__cart {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}

.course-card-v2__cart:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.course-card-v2__cart:disabled {
  opacity: .65;
  cursor: wait;
}

.course-card-v2__cart--done {
  border-color: #2e7d32;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  color: #2e7d32;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(46, 125, 50, .12);
}

.course-card-v2__cart--done i {
  font-size: 22px;
  font-weight: 900;
}

.course-card-v2__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: right;
}

.course-card-v2__price-original {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  text-decoration: line-through;
  line-height: 1.3;
}

.course-card-v2__price-current {
  color: var(--color-primary-darker);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.3;
}

.courses-section__empty {
  margin: 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 15px;
}

.course-frame {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .34);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .28)
}

.courses-wrapper {
  border: 1px solid rgb(var(--color-primary-rgb) / .35);
  border-radius: 35px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(250, 240, 220, .4));
}

.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(var(--color-primary-rgb) / .45);
  border-radius: 15px;
  background: var(--color-surface);
  box-shadow: 0 8px 20px rgba(69, 44, 15, .10)
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(100, 60, 10, .15);
}

.course-image {
  height: 155px;
  position: relative;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-image span {
  position: absolute;
  top: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  line-height: 1.2;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: white;
  padding: 8px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(255, 150, 0, .3);
}

.course-category-badge {
  z-index: 1;
  margin-right:8px;
}

.course-discount-badge {
  top: auto;
  bottom: 12px;
  left: 12px;
  right: auto;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  background: linear-gradient(135deg, #e53935, #c62828) !important;
  box-shadow: 0 5px 15px rgba(229, 57, 53, .35);
  z-index: 1;
}

.course-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 12px 12px;
  text-align: center;
}

.course-body h3 {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 6px;
  min-height: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.course-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
  min-height: unset;
  margin-top:18px;
}

.course-price__regular {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
}

.course-price__original {
  font-size: 13px;
  font-weight: 700;
  color: #d32f2f;
  text-decoration: line-through;
  line-height: 1.3;
}

.course-price__discounted {
  font-size: 15px;
  font-weight: 900;
  color: #2e7d32;
  line-height: 1.3;
}

.course-description-box {
  margin-top:6px;
  overflow: hidden;
}

.course-description-line {
  margin: 0;
  min-height: unset;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-body .course-description {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 2;
  text-align: center;
}

.course-body .course-description p,
.course-body .course-description ul,
.course-body .course-description ol {
  margin: 0 0 .5rem;
}

.course-body .course-description p:last-child,
.course-body .course-description ul:last-child,
.course-body .course-description ol:last-child {
  margin-bottom: 0;
}

.course-body p {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 2;
  min-height: 55px;
}

.course-body .course-description-line {
  min-height: unset;
  line-height: 1.5;
  font-size: 13px;
}

.course-body .course-description p:last-child {
  margin-bottom: 0;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.4;
  margin-top:30px;
}

.course-meta i {
  color: #e99022;
  margin-left: 5px;
}

.course-btn {
  margin-top: 18px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #e8b36b;
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.course-btn:hover {
  background: var(--color-accent);
  color: white;
}

.all-courses-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-bottom: 4px;
}

.all-courses-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 20px 13px 14px;
  border-radius: 999px;
  border: 1.5px solid rgb(var(--color-primary-rgb) / .28);
  background: linear-gradient(180deg, #fff 0%, rgb(var(--color-primary-rgb) / .07) 100%);
  color: var(--color-primary-darker);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    0 10px 28px rgb(var(--color-primary-rgb) / .11),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  overflow: hidden;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    color .24s ease,
    background .24s ease;
}

.all-courses-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 50%, rgb(var(--color-primary-rgb) / .14), transparent 58%);
  opacity: 0;
  transition: opacity .24s ease;
}

.all-courses-btn span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  font-size: .82rem;
  line-height: 1;
  box-shadow: 0 5px 14px rgb(var(--color-primary-rgb) / .24);
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.all-courses-btn span i {
  display: block;
  line-height: 1;
}

.all-courses-btn:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgb(var(--color-primary-rgb) / .24);
}

.all-courses-btn:hover::before {
  opacity: 1;
}

.all-courses-btn:hover span {
  background: rgba(255, 255, 255, .18);
  box-shadow: none;
  transform: translateX(-4px);
}

.all-courses-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgb(var(--color-primary-rgb) / .18),
    0 10px 28px rgb(var(--color-primary-rgb) / .11);
}

@media (max-width: 575.98px) {
  .all-courses-btn {
    width: min(100%, 320px);
    padding-inline: 16px 12px;
    font-size: .88rem;
  }
}

/* about — home intro card (copy from DB + static points/CTA + video) */
.about-section {
  padding: 30px 0 8px;
  background: transparent;
}

.about-box {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  background:
    radial-gradient(ellipse 90% 70% at 12% 18%, rgb(var(--color-accent-rgb) / .14) 0%, transparent 52%),
    radial-gradient(ellipse 80% 60% at 88% 82%, rgb(var(--color-primary-rgb) / .22) 0%, transparent 55%),
    radial-gradient(circle at 70% 22%, rgb(255 255 255 / .55) 0%, transparent 40%),
    linear-gradient(145deg, #f3f6f0 0%, #eef3ea 38%, #f6f1e6 72%, #e8efe4 100%);
  box-shadow:
    0 20px 48px rgb(61 70 44 / .1),
    0 1px 0 rgb(255 255 255 / .8) inset,
    inset 0 -1px 0 rgb(var(--color-primary-rgb) / .06);
}

.about-box__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-box__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%, rgb(var(--color-primary-dark-rgb) / .35), transparent),
    radial-gradient(1px 1px at 18% 42%, rgb(var(--color-accent-rgb) / .45), transparent),
    radial-gradient(1.4px 1.4px at 28% 12%, rgb(var(--color-primary-rgb) / .4), transparent),
    radial-gradient(1px 1px at 42% 28%, rgb(255 255 255 / .9), transparent),
    radial-gradient(1.2px 1.2px at 55% 8%, rgb(var(--color-accent-rgb) / .4), transparent),
    radial-gradient(1px 1px at 68% 36%, rgb(var(--color-primary-dark-rgb) / .3), transparent),
    radial-gradient(1.3px 1.3px at 78% 14%, rgb(255 255 255 / .85), transparent),
    radial-gradient(1px 1px at 88% 48%, rgb(var(--color-primary-rgb) / .35), transparent),
    radial-gradient(1.2px 1.2px at 14% 72%, rgb(var(--color-accent-rgb) / .35), transparent),
    radial-gradient(1px 1px at 36% 84%, rgb(255 255 255 / .8), transparent),
    radial-gradient(1.4px 1.4px at 62% 76%, rgb(var(--color-primary-rgb) / .32), transparent),
    radial-gradient(1px 1px at 92% 68%, rgb(var(--color-accent-rgb) / .3), transparent);
}

.about-box__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.about-box__orb--1 {
  width: 180px;
  height: 180px;
  top: -48px;
  right: -36px;
  background: radial-gradient(circle, rgb(var(--color-primary-rgb) / .28) 0%, transparent 70%);
}

.about-box__orb--2 {
  width: 220px;
  height: 220px;
  bottom: -70px;
  left: -50px;
  background: radial-gradient(circle, rgb(var(--color-accent-rgb) / .16) 0%, transparent 72%);
}

.about-box__orb--3 {
  width: 120px;
  height: 120px;
  top: 42%;
  left: 38%;
  background: radial-gradient(circle, rgb(255 255 255 / .45) 0%, transparent 68%);
}

.about-meteor {
  position: absolute;
  width: 72px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / .15) 20%, rgb(var(--color-accent-light-rgb) / .85) 55%, #fff 100%);
  box-shadow:
    0 0 6px rgb(var(--color-accent-rgb) / .45),
    0 0 12px rgb(255 255 255 / .25);
  transform: rotate(-38deg);
  opacity: 0;
  animation: aboutMeteorFly 7.5s linear infinite;
}

.about-meteor::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px 2px rgb(var(--color-accent-light-rgb) / .9),
    0 0 14px 4px rgb(var(--color-accent-rgb) / .35);
  transform: translate(-30%, -50%);
}

.about-meteor--1 {
  top: 14%;
  right: 8%;
  animation-delay: 0s;
  animation-duration: 6.8s;
}

.about-meteor--2 {
  top: 32%;
  right: 28%;
  width: 54px;
  animation-delay: 2.1s;
  animation-duration: 8.2s;
}

.about-meteor--3 {
  top: 58%;
  right: 12%;
  width: 64px;
  animation-delay: 4.4s;
  animation-duration: 7.1s;
}

.about-meteor--4 {
  top: 22%;
  right: 48%;
  width: 46px;
  animation-delay: 1.2s;
  animation-duration: 9s;
}

@keyframes aboutMeteorFly {
  0% {
    opacity: 0;
    transform: rotate(-38deg) translate3d(0, 0, 0) scaleX(.6);
  }
  8% {
    opacity: 1;
  }
  55% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: rotate(-38deg) translate3d(-220px, 170px, 0) scaleX(1);
  }
}

.about-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgb(var(--color-accent-light-rgb) / .7);
  animation: aboutSparkPulse 3.6s ease-in-out infinite;
}

.about-spark--1 { top: 12%; left: 18%; animation-delay: 0s; }
.about-spark--2 { top: 28%; left: 8%; width: 2px; height: 2px; animation-delay: .7s; }
.about-spark--3 { top: 48%; left: 22%; animation-delay: 1.4s; }
.about-spark--4 { top: 16%; left: 52%; width: 2px; height: 2px; animation-delay: .3s; }
.about-spark--5 { top: 66%; left: 12%; animation-delay: 2s; }
.about-spark--6 { top: 38%; left: 62%; width: 2.5px; height: 2.5px; animation-delay: 1.1s; }

@keyframes aboutSparkPulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .about-meteor,
  .about-spark {
    animation: none;
  }

  .about-meteor {
    opacity: .45;
  }

  .about-spark {
    opacity: .55;
  }
}

.about-box__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.8vw, 1.85rem);
}

.about-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  text-align: right;
}

.about-copy-inner {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* Do not restyle richtext from DB — only light spacing */
.about-copy-inner > *:first-child {
  margin-top: 0;
}

.about-copy-inner > *:last-child {
  margin-bottom: 0;
}

.about-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.35rem 0 0;
}

.about-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  min-width: 0;
}

.about-point__icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: rgb(var(--color-primary-rgb) / .22);
  color: var(--color-primary-darker);
  font-size: 1.15rem;
  line-height: 1;
}

.about-point__icon i {
  display: block;
  line-height: 1;
}

.about-point b {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-text);
}

.about-point small {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 1.45rem;
  min-height: 48px;
  padding: .7rem 1.45rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 12px 28px rgb(var(--color-primary-darker-rgb) / .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.about-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 16px 32px rgb(var(--color-primary-darker-rgb) / .22);
}

.about-media {
  position: relative;
  min-width: 0;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: #2f3a2c;
  box-shadow: 0 12px 28px rgb(0 0 0 / .12);
}

.about-media img,
.about-media__preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

.about-media__video {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.about-media .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 72px;
  height: 72px;
  border: 2px solid rgb(255 255 255 / .55);
  border-radius: 50%;
  color: #fff;
  background: rgb(63 79 60 / .5);
  font-size: 1.8rem;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  line-height: 0;
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 28px rgb(0 0 0 / .28),
    0 0 0 8px rgb(255 255 255 / .08);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.about-media .play-button i {
  display: block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
  transform: translateX(.06em);
}

.about-media .play-button:hover {
  background: rgb(63 79 60 / .7);
  border-color: rgb(255 255 255 / .75);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 16px 34px rgb(0 0 0 / .34),
    0 0 0 10px rgb(255 255 255 / .1);
}

.about-media__preview--playing {
  pointer-events: auto;
}

.about-media__video.is-playing .play-button {
  display: none;
}

.video-label {
  position: absolute;
  top: 26px;
  right: 28px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(0, 0, 0, .72);
  padding: .38rem .85rem;
  border-radius: 999px
}

.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px rgb(var(--color-accent-rgb) / .38), 0 0 0 6px rgb(255 255 255 / .12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.play-button i {
  display: block;
  line-height: 1;
  transform: translate(2px, 2px);
}

.play-button:hover {
  background: linear-gradient(145deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  border-color: rgba(255, 255, 255, .42);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 14px 32px rgb(var(--color-accent-rgb) / .45), 0 0 0 8px rgb(255 255 255 / .16);
}

.about-page {
  position: relative;
}

.about-page__state {
  background: #fff;
  border: 1px solid #ece7dc;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgb(61 42 31 / .06);
  padding: 48px 24px;
  text-align: center;
}

.about-page__state i {
  font-size: 2rem;
  color: var(--color-primary);
}

.about-page__state p {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
}

.about-page__intro-card {
  margin-bottom: 28px;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #ece7dc;
  box-shadow: 0 14px 36px rgb(61 42 31 / .07);
}

.about-page__copy-col,
.about-page__media-col {
  display: flex;
  flex-direction: column;
}

.about-page__copy {
  height: 100%;
}

.about-page__copy .about-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: .88rem;
  font-weight: 800;
}

.about-page__copy h2 {
  margin: 0 0 12px;
  color: #3d2a1f;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
}

.about-page__copy h2 strong {
  color: var(--gold);
  font-family: "Peyda", Tahoma, Arial, sans-serif;
  font-weight: 700;
}

.about-page__copy p {
  margin: 0 0 14px;
  color: #6f6254;
  font-size: .92rem;
  line-height: 2;
}

.about-page__copy .about-points > div > div {
  height: 100%;
  padding: 12px 10px;
  border-radius: 14px;
  background: #faf8f3;
  border: 1px solid #ece7dc;
}

.about-page__copy .about-points i {
  color: var(--orange);
}

.about-page__copy .about-points b {
  color: #3d2a1f;
}

.about-page__copy .about-points small {
  color: #8a7d70;
}

.about-page__copy .about-button {
  display: none;
}

.about-page__media-col .about-media__video,
.about-page__media-col img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #ece7dc;
  box-shadow: 0 10px 28px rgb(61 42 31 / .08);
}

.about-page__media-col .about-media__video {
  position: relative;
  overflow: hidden;
}

.about-page__advantages {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-page__advantages-head {
  padding: 0 4px;
}

.about-page__advantages-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: .92rem;
  font-weight: 800;
}

.about-page__advantages-title {
  margin: 0;
  color: #3d2a1f;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 900;
  line-height: 1.5;
}

.about-page__advantages-divider {
  width: 72px;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #f3b340);
}

.about-page__advantages-empty {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid #ece7dc;
  border-radius: 18px;
}

.about-advantages-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-advantage-card {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ece7dc;
  box-shadow: 0 8px 24px rgb(61 42 31 / .06);
}

.about-advantage-card__trigger,
.about-advantage-item__trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: #fff;
  color: #3d2a1f;
  text-align: right;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.about-advantage-card.is-open .about-advantage-item__trigger,
.about-advantage-card__trigger[aria-expanded="true"],
.about-advantage-item.is-open .about-advantage-item__trigger,
.about-advantage-item__trigger[aria-expanded="true"] {
  background: linear-gradient(90deg, #f3b340, var(--gold));
  color: #fff;
}

.about-advantage-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgb(61 42 31 / .08);
  font-size: 1rem;
}

.about-advantage-card.is-open .about-advantage-item__icon,
.about-advantage-item__trigger[aria-expanded="true"] .about-advantage-item__icon {
  background: rgb(255 255 255 / .18);
}

.about-advantage-item__icon--minus,
.about-advantage-card.is-open .about-advantage-item__icon--plus,
.about-advantage-item.is-open .about-advantage-item__icon--plus,
.about-advantage-item__trigger[aria-expanded="true"] .about-advantage-item__icon--plus {
  display: none;
}

.about-advantage-card.is-open .about-advantage-item__icon--minus,
.about-advantage-item.is-open .about-advantage-item__icon--minus,
.about-advantage-item__trigger[aria-expanded="true"] .about-advantage-item__icon--minus {
  display: inline-flex;
}

.about-advantage-item__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
}

.about-advantage-item__panel {
  display: none;
  overflow: hidden;
  border-top: 1px solid #ece7dc;
  background: #fff;
}

.about-advantage-item__panel.is-open {
  display: block;
}

.about-advantage-item__content {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 20px 24px;
  background: #fff;
}

.about-advantage-item__media {
  flex: 0 0 340px;
  max-width: 340px;
}

.about-advantage-item__media img {
  width: 100%;
  height: auto;
  min-height: 210px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #ece7dc;
  box-shadow: 0 8px 20px rgb(61 42 31 / .06);
}

.about-advantage-item__text {
  flex: 1;
  min-width: 0;
  color: #6f6254;
  line-height: 1.95;
  font-size: .92rem;
}

.about-advantage-item__text p {
  margin: 0 0 .85rem;
}

.about-advantage-item__text p:last-child {
  margin-bottom: 0;
}

.about-advantage-item__text ul {
  margin: 0;
  padding-right: 1.1rem;
}

.about-advantage-item__text li {
  margin-bottom: .45rem;
}

@media (max-width: 991.98px) {
  .about-page__intro-card {
    padding: 20px 18px;
  }

  .about-advantage-item__content {
    flex-direction: column;
  }

  .about-advantage-item__media {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .about-page__intro-card {
    padding: 18px 14px;
  }

  .about-advantage-item__trigger {
    padding: 14px 14px;
    gap: 10px;
  }

  .about-advantage-item__title {
    font-size: .92rem;
  }

  .about-advantage-item__content {
    padding: 16px 14px 18px;
    gap: 14px;
  }

  .about-page__media-col .about-media__video,
  .about-page__media-col img {
    min-height: 220px;
    max-height: 300px;
  }
}

/* ====== Video Modal ====== */
#videoModal,
#galleryModal {
  z-index: 1065;
}

#galleryModal .modal-dialog,
.gallery-modal-dialog {
  position: relative;
  z-index: 1;
  width: calc(100% - 48px);
  max-width: none;
  height: calc(100% - 48px);
  margin: 24px auto;
}

.gallery-modal.show .modal-backdrop,
body > .modal-backdrop.show {
  z-index: 1060;
}

.modal-close-btn {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  opacity: 0.9;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-close-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.video-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  background: #000;
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  aspect-ratio: 16/9;
  background: #000;
}

.modal-backdrop.show {
  opacity: 0.85;
  backdrop-filter: blur(8px);
}

/* Responsive */
@media (max-width: 991.98px) {
  .about-box__grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    padding: 1.15rem;
  }

  .about-media {
    order: -1;
    min-height: 280px;
  }

  .about-media img,
  .about-media__preview,
  .about-media__video {
    min-height: 280px;
  }

  .about-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem;
  }

  .about-cta {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .about-section {
    padding: 18px 0 4px;
  }

  .about-box {
    border-radius: 18px;
  }

  .about-media {
    min-height: 240px;
    border-radius: 16px;
  }

  .about-media img,
  .about-media__preview,
  .about-media__video {
    min-height: 240px;
  }

  .about-media .play-button {
    width: 62px;
    height: 62px;
    font-size: 1.5rem;
  }

  .about-point__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.05rem;
  }

  .about-point b {
    font-size: .78rem;
  }

  .about-point small {
    font-size: .66rem;
  }

  .modal-close-btn {
    top: -40px;
    width: 34px;
    height: 34px;
  }

  .video-wrapper {
    border-radius: 12px;
  }
}

/* ============================================
   VIDEO MODAL - با دکمه Close در بالا
   ============================================ */

.modal-content.bg-transparent {
  background: transparent !important;
}

.modal-body {
  position: relative;
  padding: 0;
}

/* ===== دکمه Close ===== */
.btn-close-modal {
  position: absolute;
  top: -55px;
  left: 0;
  z-index: 1050;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;

  color: #fff;
  font-size: 20px;

  cursor: pointer;
  transition: all 0.3s ease;

  backdrop-filter: blur(8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-close-modal:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 106, 0, 0.4);
}

.btn-close-modal i {
  line-height: 1;
  pointer-events: none;
}

/* ===== ویدیو ===== */
.video-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #0a0a0a;
}

/* ===== کپشن پایین ویدیو ===== */
.video-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;

  margin-top: 16px;
  padding: 12px 20px;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 14px;

  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-caption .video-channel {
  color: var(--color-accent);
  font-weight: 700;
}

.video-caption .video-duration {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: monospace;
  direction: ltr;
}

/* ===== بک‌دراپ ===== */
.modal-backdrop.show {
  opacity: 0.85;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.8);
}

/* ===== ریسپانسیو ===== */
@media (max-width: 767.98px) {
  .btn-close-modal {
    top: -48px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .video-wrapper {
    border-radius: 14px;
  }

  .video-caption {
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
  }

  .video-caption .video-duration {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .btn-close-modal {
    top: -42px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
  }
}

/* ===== تایمر ویدیو ===== */
.video-timer {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  direction: ltr;
  min-width: 100px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ===== کپشن ===== */
.video-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;

  margin-top: 16px;
  padding: 12px 20px;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 14px;

  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-title {
  flex: 1;
  min-width: 120px;
}

.video-channel {
  color: var(--color-accent);
  font-weight: 700;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 576px) {
  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 10px 14px;
  }

  .video-timer {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 10px;
    align-self: flex-start;
  }

  .video-title {
    font-size: 12px;
    min-width: auto;
  }
}

/* ============================================
   TEACHERS SECTION - Swiper
   ============================================ */

.teachers-section {
  padding: 0 0 28px;
  margin-top: 30px;
}

.teachers-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .06) 100%);
  box-shadow: 0 8px 24px rgb(var(--color-primary-darker-rgb) / .06);
}

.teachers-section__heading {
  margin: 0;
  min-width: fit-content;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.4;
}

.teachers-section__divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 28px;
  background: rgb(var(--color-primary-rgb) / .18);
}

.teachers-section__intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teachers-section__subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.teachers-section__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teachers-section__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
  background: rgb(var(--color-primary-rgb) / .08);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.teachers-section__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: fit-content;
  height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}

.teachers-section__view-all:hover {
  color: var(--color-primary-dark);
}

.teachers-section__view-all svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.teachers-section__empty {
  margin: 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 15px;
}

.teachers-slider-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 14px;
  border-radius: 21px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgb(var(--color-primary-rgb) / .05) 100%);
  box-shadow: 0 16px 35px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.teachers-slider-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--color-primary-rgb) / .09) .6px, transparent .6px);
  background-size: 12px 12px;
  opacity: .32;
  z-index: 0;
}

.teachers-slider-wrapper > * {
  position: relative;
  z-index: 1;
}

.teachersSwiper {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.teachersSwiper.is-dragging,
body.teachers-swiper-dragging .teachersSwiper {
  cursor: grabbing;
}

.teachersSwiper.is-dragging *,
body.teachers-swiper-dragging .teachersSwiper * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none;
}

.teachersSwiper .swiper-slide {
  user-select: none;
  -webkit-user-select: none;
}

.teacher-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  min-height: 330px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color .25s ease;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
}

.teacher-card-v2:hover {
  border-color: #cfcfcf;
}

.teacher-card-v2__image {
  height: 168px;
  margin: 10px 10px 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .12), rgb(var(--color-primary-rgb) / .04));
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.teacher-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.teacher-card-v2__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 12px 0;
  text-align: right;
  align-items: flex-start;
}

.teacher-card-v2__body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teacher-card-v2__role {
  display: inline-block;
  align-self: flex-start;
  margin-top: 8px;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgb(var(--color-primary-rgb) / .12);
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  line-height: 1.45;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-card-v2__skills {
  margin: 0;
  margin-top: auto;
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(12px * 1.65 * 2);
  max-height: calc(12px * 1.65 * 2);
}

.teacher-card-v2__footer {
  margin-top: auto;
  padding: 0 12px 12px;
}

.teacher-card-v2__profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  background: linear-gradient(180deg, #fff 0%, rgb(var(--color-primary-rgb) / .08) 100%);
  color: var(--color-primary-darker);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.teacher-card-v2__profile-btn i {
  font-size: 15px;
  line-height: 1;
  opacity: .88;
  transition: transform .22s ease, opacity .22s ease;
}

.teacher-card-v2__profile-btn:hover {
  color: #fff;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 8px 20px rgb(var(--color-primary-rgb) / .22);
  transform: translateY(-1px);
}

.teacher-card-v2__profile-btn:hover i {
  opacity: 1;
  transform: translateX(-3px);
}

.teachers-nav__btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(var(--color-primary-rgb) / .24);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgb(var(--color-primary-rgb) / .10));
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 4px 14px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .65);
  z-index: 3;
}

.teachers-nav__btn:hover {
  color: var(--color-primary-darker);
  border-color: rgb(var(--color-primary-rgb) / .42);
  background: linear-gradient(135deg, #fff, rgb(var(--color-primary-rgb) / .14));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(var(--color-primary-darker-rgb) / .12);
}

.teachers-nav__btn:active {
  transform: translateY(0);
}

.teachers-nav__btn.swiper-button-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.teachers-view-all-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  padding: 4px;
}

.teachers-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  background: linear-gradient(135deg, #fff 0%, rgb(var(--color-primary-rgb) / .08) 100%);
  color: var(--color-primary-darker);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgb(var(--color-primary-rgb) / .12), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}

.teachers-view-all-btn i {
  font-size: 15px;
  line-height: 1;
  transition: transform .22s ease;
}

.teachers-view-all-btn:hover {
  color: #fff;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(var(--color-primary-rgb) / .26);
}

.teachers-view-all-btn:hover i {
  transform: translateX(-4px);
}

body.teachers-swiper-dragging {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.teachers-swiper-dragging img {
  pointer-events: none;
}

/* ============================================
   STATS SECTION
   ============================================ */

.stats-section {
  margin-top: 30px;
  padding: 0 0 28px;
}

.stats-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 28px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .16) 0%, rgb(var(--color-primary-rgb) / .09) 100%);
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  box-shadow: 0 12px 32px rgb(var(--color-primary-darker-rgb) / .06);
}

.stats-bar__item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 4px 8px;
}

.stats-bar__value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.stats-bar__prefix,
.stats-bar__unit {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.stats-bar__unit {
  color: var(--color-text-secondary);
}

.stat-number,
.stats-bar__preview-value {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}

.stats-bar__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq-section {
  margin-top: 30px;
  padding: 0 0 40px;
}

.faq-section__panel {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 56px clamp(14px, 2vw, 28px) 48px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 18%, rgb(var(--color-primary-rgb) / .18) 0%, transparent 42%),
    linear-gradient(135deg, rgb(var(--color-primary-rgb) / .16) 0%, rgb(var(--color-primary-rgb) / .07) 48%, #fff 100%);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  box-shadow:
    0 22px 48px rgb(var(--color-primary-darker-rgb) / .1),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.faq-section__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}

.faq-section__glow--a {
  width: 280px;
  height: 280px;
  top: -90px;
  left: -60px;
  background: radial-gradient(circle, rgb(var(--color-primary-rgb) / .28), transparent 68%);
  animation: faqGlowDrift 12s ease-in-out infinite alternate;
}

.faq-section__glow--b {
  width: 220px;
  height: 220px;
  bottom: -70px;
  right: 8%;
  background: radial-gradient(circle, rgb(var(--color-accent-rgb) / .2), transparent 70%);
  animation: faqGlowDrift 14s ease-in-out infinite alternate-reverse;
}

.faq-section__glow--c {
  width: 160px;
  height: 160px;
  top: 42%;
  right: -40px;
  background: radial-gradient(circle, rgb(var(--color-primary-light) / .45), transparent 70%);
  opacity: .7;
}

.faq-section__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(rgb(var(--color-primary-dark-rgb) / .1) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 88%);
}

.faq-section__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
}

.faq-section__ring--lg {
  width: 340px;
  height: 340px;
  top: -120px;
  right: -80px;
  border-color: rgb(var(--color-accent-rgb) / .16);
}

.faq-section__ring--sm {
  width: 160px;
  height: 160px;
  bottom: 40px;
  left: 6%;
  border-style: dashed;
  opacity: .7;
}

.faq-section__inner {
  position: relative;
  z-index: 1;
}

.faq-section__header {
  text-align: center;
  margin-bottom: 32px;
}

.faq-section__header-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    linear-gradient(145deg, var(--color-primary), var(--color-primary-darker));
  color: #fff;
  font-size: 1.35rem;
  box-shadow:
    0 12px 28px rgb(var(--color-primary-rgb) / .28),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.faq-section__header h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 900;
  color: var(--color-text);
}

.faq-section__header p {
  margin: 0 auto;
  max-width: 640px;
  color: var(--color-text-secondary);
  font-size: 14.5px;
  line-height: 1.95;
}

.faq-section__header-line {
  width: 64px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary), transparent);
}

.faq-section__empty {
  margin: 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 15px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.faq-item {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 252, 243, .9) 100%);
  box-shadow:
    0 10px 28px rgb(var(--color-primary-darker-rgb) / .07),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
  contain: layout paint;
  transition: border-color .2s ease;
}

.faq-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  opacity: 0;
  transition: opacity .2s ease;
}

.faq-item:hover {
  border-color: rgb(var(--color-primary-rgb) / .28);
}

.faq-item:has(.faq-item__trigger[aria-expanded="true"]) {
  border-color: rgb(var(--color-primary-rgb) / .34);
}

.faq-item:has(.faq-item__trigger[aria-expanded="true"])::before {
  opacity: 1;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: right;
  line-height: 1;
}

.faq-item__index {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgb(var(--color-primary-rgb) / .12);
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
  color: var(--color-primary-dark);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__index {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgb(var(--color-accent-rgb) / .28);
}

.faq-item__question {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--color-text);
  align-self: center;
}

.faq-item__arrow {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: 50%;
  background: rgb(var(--color-primary-rgb) / .12);
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
  color: var(--color-primary-dark);
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), background .25s ease, color .25s ease, border-color .25s ease;
}

.faq-item__arrow i {
  display: block;
  font-size: 16px;
  line-height: 1;
  transform: translateY(1px);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__arrow {
  transform: rotate(180deg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  color: #fff;
}

.faq-item__panel {
  height: 0;
  overflow: hidden;
  will-change: height;
  transition: height .14s cubic-bezier(.4, 0, .2, 1);
}

.faq-item__panel.is-open {
  height: auto;
}

.faq-item__panel-inner {
  padding-block: 0 16px;
  padding-inline: 70px 18px;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity .12s ease, transform .14s ease;
  will-change: opacity, transform;
}

.faq-item__panel.is-open .faq-item__panel-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.faq-item__answer {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgb(var(--color-primary-rgb) / .1), rgb(var(--color-accent-rgb) / .06));
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.9;
}

.faq-item__answer:last-child {
  margin-bottom: 0;
}

@keyframes faqGlowDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18px, 12px) scale(1.08); }
}

@media (max-width: 767.98px) {
  .faq-section {
    margin-top: 48px;
    padding-bottom: 28px;
  }

  .faq-section__panel {
    width: 100%;
    padding: 40px 14px 34px;
    border-radius: 22px;
  }

  .faq-section__header {
    margin-bottom: 24px;
  }

  .faq-section__header-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.2rem;
  }

  .faq-item__trigger {
    padding: 14px 14px;
    gap: 10px;
  }

  .faq-item__index {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 11px;
  }

  .faq-item__question {
    font-size: 14px;
  }

  .faq-item__arrow {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .faq-item__panel-inner {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__arrow,
  .faq-item__panel,
  .faq-item__panel-inner,
  .faq-section__glow {
    transition: none !important;
    animation: none !important;
  }

  .faq-item:hover {
    transform: none;
  }
}

/* ============================================
   CERTIFICATE CTA SECTION
   ============================================ */

.certificate-cta-section {
  padding: 8px 0 52px;
}

.certificate-cta-banner {
  --cert-gold: #d4a24a;
  --cert-gold-light: #f0d089;
  --cert-ink: #141210;
  --cert-ink-2: #221c18;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .92fr);
  align-items: center;
  gap: clamp(22px, 3.5vw, 48px);
  min-height: 340px;
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3.2vw, 44px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 80% at 12% 50%, rgb(212 162 74 / .18), transparent 58%),
    radial-gradient(ellipse 45% 70% at 92% 18%, rgb(var(--color-primary-rgb) / .22), transparent 55%),
    linear-gradient(118deg, var(--cert-ink) 0%, var(--cert-ink-2) 46%, #2a3228 100%);
  border: 1px solid rgb(212 162 74 / .28);
  box-shadow:
    0 28px 60px rgb(20 18 16 / .28),
    inset 0 1px 0 rgb(255 255 255 / .06);
}

.certificate-cta-banner__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

.certificate-cta-banner__glow--a {
  width: 280px;
  height: 280px;
  top: -80px;
  left: 18%;
  background: radial-gradient(circle, rgb(212 162 74 / .28), transparent 70%);
}

.certificate-cta-banner__glow--b {
  width: 240px;
  height: 240px;
  bottom: -90px;
  right: -40px;
  background: radial-gradient(circle, rgb(var(--color-primary-rgb) / .35), transparent 70%);
}

.certificate-cta-banner__dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(240 208 137 / .55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 20%, rgb(240 208 137 / .4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 75%, rgb(240 208 137 / .35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 85% 60%, rgb(240 208 137 / .45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 55% 45%, rgb(255 255 255 / .2) 0 1px, transparent 1.5px);
  background-size: 180px 160px, 220px 200px, 160px 180px, 200px 140px, 140px 120px;
  animation: certificateDustDrift 18s linear infinite;
}

.certificate-cta-banner__frame {
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  border: 1px solid rgb(212 162 74 / .18);
}

.certificate-cta-banner__media,
.certificate-cta-banner__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.certificate-cta-banner__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificate-cta-banner__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 380px);
  margin-left: 0;
  margin-right: auto;
  background: #0d0c0b;
  box-shadow:
    0 24px 48px rgb(0 0 0 / .45),
    0 0 0 1px rgb(212 162 74 / .35),
    0 0 0 6px rgb(212 162 74 / .08);
  animation: certificateFloat 5.5s ease-in-out infinite;
}

.certificate-cta-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.certificate-cta-banner__media-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgb(255 255 255 / .18) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: certificateShine 7s ease-in-out infinite;
}

.certificate-cta-banner__content {
  text-align: right;
  color: #f6f1e6;
}

.certificate-cta-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(212 162 74 / .14);
  border: 1px solid rgb(212 162 74 / .35);
  color: var(--cert-gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.certificate-cta-banner__eyebrow i {
  font-size: 14px;
  color: var(--cert-gold);
}

.certificate-cta-banner__title {
  margin: 0 0 14px;
  max-width: 18ch;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 900;
  line-height: 1.45;
  color: #fffaf0;
  text-shadow: 0 8px 24px rgb(0 0 0 / .35);
}

.certificate-cta-banner__lead {
  margin: 0 0 20px;
  max-width: 38rem;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 1.95;
  color: rgb(246 241 230 / .78);
}

.certificate-cta-banner__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.certificate-cta-banner__points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(212 162 74 / .22);
  color: rgb(246 241 230 / .92);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.certificate-cta-banner__points i {
  color: var(--cert-gold);
  font-size: 15px;
}

.certificate-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  color: #1a140e;
  background: linear-gradient(135deg, var(--cert-gold-light) 0%, var(--cert-gold) 48%, #b8862f 100%);
  box-shadow:
    0 14px 34px rgb(212 162 74 / .32),
    inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.certificate-cta-banner__btn:hover {
  color: #1a140e;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgb(212 162 74 / .42);
  filter: brightness(1.04);
}

.certificate-cta-banner__btn i {
  font-size: 1.05rem;
  transition: transform .22s ease;
}

.certificate-cta-banner__btn:hover i {
  transform: translateX(-3px);
}

@keyframes certificateFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes certificateShine {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

@keyframes certificateDustDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 40px -30px, -30px 20px, 20px 40px, -20px -25px, 15px 10px; }
}

@media (max-width: 991.98px) {
  .certificate-cta-banner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px 28px;
    min-height: 0;
  }

  .certificate-cta-banner__content {
    text-align: center;
  }

  .certificate-cta-banner__title {
    max-width: none;
    margin-inline: auto;
  }

  .certificate-cta-banner__lead {
    margin-inline: auto;
  }

  .certificate-cta-banner__points {
    justify-content: center;
  }

  .certificate-cta-banner__media {
    order: -1;
    max-width: 300px;
    margin-inline: auto;
    animation: none;
  }

  .certificate-cta-banner__btn {
    width: 100%;
    max-width: 360px;
  }
}

@media (max-width: 575.98px) {
  .certificate-cta-section {
    padding: 4px 0 40px;
  }

  .certificate-cta-banner {
    border-radius: 20px;
    padding: 18px 14px 22px;
  }

  .certificate-cta-banner__frame {
    inset: 8px;
    border-radius: 14px;
  }

  .certificate-cta-banner__media {
    max-width: 240px;
    border-radius: 14px;
  }

  .certificate-cta-banner__title {
    font-size: 1.35rem;
  }

  .certificate-cta-banner__lead {
    font-size: 13.5px;
    margin-bottom: 16px;
  }

  .certificate-cta-banner__points {
    gap: 8px;
    margin-bottom: 20px;
  }

  .certificate-cta-banner__points li {
    width: 100%;
    justify-content: center;
    font-size: 12.5px;
    padding: 8px 12px;
  }

  .certificate-cta-banner__btn {
    min-height: 46px;
    font-size: 14px;
    padding: 11px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certificate-cta-banner__media,
  .certificate-cta-banner__media-shine,
  .certificate-cta-banner__dust {
    animation: none !important;
  }
}


/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials-section {
  position: relative;
  padding: 60px 0 70px;
  background: linear-gradient(160deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 30%, var(--color-primary-darker) 60%, var(--color-primary-darker) 100%);
  overflow: hidden;
}

/* ستاره‌ها */
.testimonials-section::before {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 18px;
  letter-spacing: 40px;
  color: rgba(255, 180, 50, 0.03);
  line-height: 80px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-5deg) scale(1.2);
}

.testimonials-section::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 180, 50, 0.06), transparent 70%);
  pointer-events: none;
  animation: testimonialsGlow 6s ease-in-out infinite alternate;
}

@keyframes testimonialsGlow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }

  100% {
    transform: translate(-10%, 5%) scale(1.2);
    opacity: 1;
  }
}

/* هدر */
.testimonials-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

.testimonials-eyebrow {
  display: inline-block;
  color: var(--color-accent-light);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
  background: rgba(242, 164, 90, 0.08);
  padding: 4px 20px;
  border-radius: 20px;
  border: 1px solid rgba(242, 164, 90, 0.1);
}

.testimonials-header h2 {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px 0;
}

.testimonials-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  margin: 10px auto 0;
  border-radius: 2px;
}

.testimonials-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ===== WRAPPER ===== */
.testimonials-slider-wrapper {
  position: relative;
  z-index: 2;
  padding: 0 70px;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonialsSwiper {
  padding: 10px 0 20px;
  overflow: hidden;
}

/* ============================================
   دکمه‌های ناوبری (چپ و راست اسلایدر)
   ============================================ */

.testimonial-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 52px;
  height: 52px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(242, 164, 90, 0.2);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-accent-light);
  cursor: pointer;

  transition: all 0.4s ease;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
}

.testimonial-btn:hover {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 35px rgb(var(--color-accent-rgb) / 0.4);
  transform: translateY(-50%) scale(1.08);
}

.testimonial-prev {
  left: 0;
}

.testimonial-next {
  right: 0;
}

/* ============================================
   کارت نظرات
   ============================================ */

.testimonial-card {
  position: relative;
  padding: 28px 24px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border-radius: 20px;
  border: 1px solid rgba(242, 164, 90, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 220px;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 164, 90, 0.2);
  box-shadow: 0 20px 60px rgb(var(--color-accent-rgb) / 0.06);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.testimonial-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(242, 164, 90, 0.2);
  transition: border-color 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
  border-color: rgba(242, 164, 90, 0.4);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-author-info {
  flex: 1;
}

.testimonial-author-info strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.testimonial-author-info span {
  display: block;
  font-size: 13px;
  color: rgba(242, 164, 90, 0.5);
  font-weight: 500;
}

.testimonial-body {
  position: relative;
  padding-top: 6px;
}

.testimonial-body i {
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 28px;
  color: rgba(242, 164, 90, 0.08);
  line-height: 1;
}

.testimonial-body p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-right: 10px;
}

.testimonial-play-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgb(var(--color-accent-rgb) / 0.25);
  opacity: 0.6;
}

.testimonial-play-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgb(var(--color-accent-rgb) / 0.4);
}

/* ============================================
   ریسپانسیو
   ============================================ */

@media (max-width: 992px) {
  .testimonials-slider-wrapper {
    padding: 0 50px;
  }

  .testimonial-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 40px 0 50px;
  }

  .testimonials-slider-wrapper {
    padding: 0 40px;
  }

  .testimonial-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .testimonial-card {
    padding: 20px 18px 18px;
    min-height: 190px;
  }

  .testimonial-avatar {
    width: 48px;
    height: 48px;
  }

  .testimonial-author-info strong {
    font-size: 16px;
  }

  .testimonial-body p {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .testimonials-slider-wrapper {
    padding: 0 20px;
  }

  .testimonial-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .testimonial-card {
    padding: 16px 14px 14px;
    min-height: 170px;
    border-radius: 16px;
  }

  .testimonial-avatar {
    width: 40px;
    height: 40px;
  }

  .testimonial-author-info strong {
    font-size: 14px;
  }

  .testimonial-body p {
    font-size: 13px;
  }

  .testimonials-header h2 {
    font-size: 22px;
  }

  .testimonial-play-btn {
    width: 30px;
    height: 30px;
    font-size: 13px;
    top: 12px;
    left: 12px;
  }
}

/* footer */
.site-footer {
  --footer-ink: #2f3a2c;
  --footer-ink-soft: #5f6b5a;
  --footer-line: rgb(118 137 107 / .22);
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgb(var(--color-primary-rgb) / .18), transparent 55%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgb(var(--color-accent-rgb) / .1), transparent 52%),
    linear-gradient(165deg, #e8efe4 0%, #f4f1ea 42%, #e7ebe2 100%);
  color: var(--footer-ink);
  border-top: 1px solid var(--footer-line);
}

.site-footer__topline {
  height: 3px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-primary-light) 16%,
      var(--color-primary) 48%,
      var(--color-accent) 78%,
      transparent 100%);
}

.site-footer__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
}

.site-footer__glow--a {
  width: 280px;
  height: 280px;
  top: -120px;
  left: 10%;
  background: radial-gradient(circle, rgb(var(--color-primary-rgb) / .22), transparent 70%);
}

.site-footer__glow--b {
  width: 220px;
  height: 220px;
  bottom: -90px;
  right: 8%;
  background: radial-gradient(circle, rgb(var(--color-accent-rgb) / .14), transparent 70%);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  padding: 48px clamp(18px, 4vw, 32px) 0;
  box-sizing: border-box;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1.15fr) minmax(120px, .65fr);
  gap: 28px 34px;
  align-items: start;
  padding-bottom: 34px;
}

.site-footer__brand,
.site-footer__links,
.site-footer__contact,
.site-footer__trust {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__brand {
  gap: 1rem;
  padding-inline-end: 8px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.site-footer__logo:hover {
  transform: none;
  box-shadow: none;
  opacity: .88;
}

.site-footer__logo img {
  width: auto;
  height: 48px;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(32%);
  opacity: .92;
}

.site-footer__about {
  margin: 0;
  max-width: 34ch;
  color: var(--footer-ink-soft);
  font-size: .9rem;
  line-height: 1.95;
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .2rem;
}

.site-footer__socials a {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--footer-line);
  background: rgb(255 255 255 / .35);
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  transition: color .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}

.site-footer__socials a:hover {
  color: #fff;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.site-footer__title {
  margin: 0 0 1.05rem;
  font-size: .92rem;
  font-weight: 900;
  color: var(--color-primary-darker);
  position: relative;
  padding-bottom: .65rem;
}

.site-footer__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 0;
  color: var(--footer-ink-soft);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: color .2s ease, transform .2s ease;
}

.site-footer__nav a i {
  color: var(--color-primary);
  font-size: .95rem;
  transition: color .2s ease;
}

.site-footer__nav a:hover {
  color: var(--color-primary-darker);
  transform: translateX(-3px);
}

.site-footer__nav a:hover i {
  color: var(--color-accent-dark);
}

.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

.site-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.site-footer__contact-icon {
  flex: 0 0 2.1rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
  border-radius: 50%;
  background: rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-dark);
  font-size: .9rem;
}

.site-footer__contact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--footer-ink);
  font-size: .86rem;
  line-height: 1.7;
}

.site-footer__contact-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--footer-ink-soft);
  letter-spacing: .02em;
}

.site-footer__contact-list a {
  color: var(--color-primary-darker);
  text-decoration: none;
  font-weight: 800;
  transition: color .2s ease;
  word-break: break-word;
}

.site-footer__contact-list a:hover {
  color: var(--color-accent-dark);
}

.site-footer__trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__enamad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem;
  border-radius: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform .2s ease, opacity .2s ease;
}

.site-footer__enamad:hover {
  transform: translateY(-2px);
  box-shadow: none;
  opacity: .92;
}

.site-footer__enamad img {
  display: block;
  width: 108px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 8px 16px rgb(var(--color-primary-darker-rgb) / .12));
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem clamp(18px, 4vw, 32px) 1.35rem;
  border-top: 1px solid var(--footer-line);
  background: rgb(47 58 44 / .04);
}

.site-footer__copy {
  margin: 0;
  color: var(--footer-ink-soft);
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width:1199.98px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(120px, .7fr);
    gap: 24px 22px;
  }
}

@media (max-width:991.98px) {
  .site-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__media {
    grid-column: auto;
    order: 1;
    min-height: clamp(280px, 72vw, 420px);
  }

  .hero__media::after {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: min(42%, 130px);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgb(246 242 232 / .2) 35%,
        rgb(246 242 232 / .65) 70%,
        var(--hero-bg) 100%);
  }

  .hero__content {
    order: 2;
    grid-column: auto;
    justify-content: flex-start;
    padding: 1.15rem 1.1rem 1.35rem;
    background: var(--hero-bg);
  }

  .hero__highlights {
    display: none;
  }

  .hero__inner,
  .hero__search {
    max-width: none;
    margin-inline: 0;
  }

  .hero__search {
    margin-top: 1.1rem;
  }

  .light-page {
    margin-top: -18px
  }

  /* Teachers responsive */
  .teacher-card-v2__image {
    height: 160px;
  }

  .teacher-card-v2__body h3 {
    font-size: 14px;
  }

  /* Stats responsive */
  .stats-bar {
    padding: 22px 14px;
    gap: 6px;
  }

  .stats-bar__label {
    font-size: 12px;
    margin-top: 8px;
  }

  .stat-number,
  .stats-bar__preview-value {
    font-size: 1.35rem;
  }

  .stats-bar__prefix,
  .stats-bar__unit {
    font-size: .95rem;
  }

  /* Testimonials responsive */
  @media (max-width: 992px) {
    .testimonials-slider-wrapper {
      padding: 0 40px;
    }

    .swiper-button-prev.testimonial-prev {
      left: -5px;
    }

    .swiper-button-next.testimonial-next {
      right: -5px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 42px;
      height: 42px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 19px;
    }

    .testimonials-header h2 {
      font-size: 30px;
    }
  }

  @media (max-width: 768px) {
    .testimonials-section {
      padding: 40px 0 50px;
    }

    .testimonials-slider-wrapper {
      padding: 0 30px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 36px;
      height: 36px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 16px;
    }

    .testimonial-card {
      padding: 24px 20px 20px;
      min-height: 240px;
    }

    .testimonial-text {
      font-size: 14px;
    }

    .testimonials-header h2 {
      font-size: 26px;
    }

    .testimonial-play-btn {
      width: 34px;
      height: 34px;
      font-size: 15px;
      top: 16px;
      left: 16px;
    }
  }

  @media (max-width: 576px) {
    .testimonials-slider-wrapper {
      padding: 0 10px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 30px;
      height: 30px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 14px;
    }

    .testimonial-card {
      padding: 20px 16px 18px;
      min-height: 200px;
      border-radius: 18px;
    }

    .testimonial-text {
      font-size: 13px;
      line-height: 1.8;
    }

    .testimonial-author img {
      width: 40px;
      height: 40px;
    }

    .testimonial-author strong {
      font-size: 14px;
    }

    .testimonial-author span {
      font-size: 11px;
    }

    .testimonials-header h2 {
      font-size: 22px;
    }

    .testimonials-header p {
      font-size: 14px;
    }
  }

  .courses-wrapper,
  .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 16px;
    gap: 16px;
  }

  .courses-section__header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  .courses-section__divider {
    display: none;
  }

  .courses-section__tabs-wrap {
    order: 3;
    flex: 1 1 100%;
  }

  .courses-section__slider-area {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .masterchef-promo {
    min-height: 0;
    padding: 20px 22px;
    -webkit-mask: none;
    mask: none;
  }

  .masterchef-promo__art {
    top: auto;
    bottom: -14px;
    left: -20px;
    width: 122px;
    height: 122px;
  }

  .masterchef-promo h2 {
    max-width: 22rem;
  }

  .masterchef-promo p {
    max-width: 34rem;
  }

  .masterchef-promo__button {
    align-self: flex-start;
    min-width: 180px;
    padding: 0 22px;
  }

  .courses-slider-wrapper {
    padding: 16px 10px;
    gap: 8px;
  }

  .courses-nav__btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .teachers-section__header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  .teachers-section__divider {
    display: none;
  }

  .teachers-section__intro {
    order: 3;
    flex: 1 1 100%;
  }

  .teachers-slider-wrapper {
    padding: 16px 10px;
    gap: 8px;
  }
}

@media (max-width:767.98px) {
  .courses-section > .container-xxl {
    display: flex;
    flex-direction: column;
  }

  .courses-section__content,
  .courses-section__slider-area {
    display: contents;
  }

  .courses-section__header {
    order: -1;
  }

  .masterchef-promo {
    order: -2;
    margin-bottom: 12px;
  }

  body {
    line-height: 1.7
  }

  .container-xxl {
    padding-inline: 14px
  }

  .hero__media {
    min-height: 240px;
  }

  .hero-actions .btn {
    flex: 1;
    min-width: 145px
  }

  .section-title {
    gap: .65rem;
    margin-bottom: 13px
  }

  .section-title h2 {
    font-size: 1.05rem
  }

  .section-title span {
    width: 42px
  }

  .about-section {
    padding-top: 2px
  }

  .modal-close-btn {
    top: -40px;
    width: 34px;
    height: 34px;
  }

  .video-wrapper {
    border-radius: 12px;
  }

  .video-caption {
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
  }

  .video-caption .video-timer {
    font-size: 11px;
  }
  .site-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
    text-align: right;
  }

  .site-footer__brand,
  .site-footer__trust {
    grid-column: 1 / -1;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .site-footer__links,
  .site-footer__contact {
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    text-align: right;
  }

  .site-footer__about {
    max-width: 40ch;
    margin-inline: auto;
  }

  .site-footer__socials {
    justify-content: center;
  }

  .site-footer__nav {
    align-items: flex-start;
    width: 100%;
  }

  .site-footer__nav a {
    font-size: .84rem;
    justify-content: flex-start;
    width: 100%;
  }

  .site-footer__nav a:hover {
    transform: none;
  }

  .site-footer__contact-list {
    width: 100%;
    margin-inline: 0;
    gap: .75rem;
  }

  .site-footer__contact-list li {
    text-align: right;
    justify-content: flex-start;
    gap: .55rem;
  }

  .site-footer__contact-body {
    font-size: .8rem;
    text-align: right;
    align-items: flex-start;
  }

  .site-footer__title {
    width: 100%;
    text-align: right;
    font-size: .86rem;
  }

  .site-footer__title::after {
    inset-inline-start: 0;
    transform: none;
  }

  .site-footer__brand .site-footer__title,
  .site-footer__trust .site-footer__title {
    text-align: center;
  }

  .site-footer__brand .site-footer__title::after,
  .site-footer__trust .site-footer__title::after {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .site-footer__enamad {
    margin-inline: auto;
  }

  /* Teachers responsive */
  .teachers-slider-wrapper {
    padding: 14px 6px;
    gap: 6px;
  }

  .teacher-card-v2 {
    max-width: none;
    min-height: 315px;
  }

  .teacher-card-v2__image {
    height: 155px;
  }

  .teacher-card-v2__body {
    padding: 10px 8px 0;
  }

  .teacher-card-v2__body h3 {
    font-size: 14px;
  }

  .teacher-card-v2__role {
    margin-top: 8px;
    font-size: 10px;
    padding: 3px 8px;
  }

  .teacher-card-v2__skills {
    font-size: 11px;
    min-height: calc(11px * 1.65 * 2);
    max-height: calc(11px * 1.65 * 2);
  }

  .teachers-nav__btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  /* Stats responsive */
  .stats-section {
    margin-top: 48px;
    padding-bottom: 20px;
  }

  .stats-bar {
    flex-wrap: nowrap;
    padding: 16px 8px;
    gap: 4px;
  }

  .stats-bar__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 3px;
  }

  .stats-bar__label {
    font-size: 10px;
    line-height: 1.35;
    margin-top: 6px;
  }

  .stat-number,
  .stats-bar__preview-value {
    font-size: 1.05rem;
  }

  .stats-bar__prefix,
  .stats-bar__unit {
    font-size: .8rem;
  }

  /* Testimonials responsive */
  .testimonials-section {
    padding: 40px 0 50px;
  }

  .testimonials-slider-wrapper {
    padding: 0 30px;
  }

  .swiper-button-prev.testimonial-prev,
  .swiper-button-next.testimonial-next {
    width: 38px;
    height: 38px;
  }

  .swiper-button-prev.testimonial-prev i,
  .swiper-button-next.testimonial-next i {
    font-size: 17px;
  }

  .testimonial-card {
    padding: 24px 20px 20px;
    min-height: 240px;
  }

  .testimonial-text {
    font-size: 14px;
  }

  .testimonials-header h2 {
    font-size: 26px;
  }

  .testimonial-play-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
    top: 16px;
    left: 16px;
  }

  .courses-wrapper,
  .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 10px;
    gap: 10px;
  }

  .courses-section__heading {
    font-size: 16px;
  }

  .courses-section__tab {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
  }

  .courses-section__view-all {
    height: 36px;
    font-size: 13px;
  }

  .courses-section__view-all svg {
    width: 20px;
    height: 20px;
  }

  .masterchef-promo {
    min-height: 0;
    padding: 16px 18px 18px;
    border-radius: 20px;
  }

  .masterchef-promo__orbit--one {
    bottom: -128px;
    left: -70px;
    width: 210px;
    height: 210px;
  }

  .masterchef-promo__orbit--two {
    top: auto;
    right: -74px;
    bottom: -74px;
    width: 150px;
    height: 150px;
  }

  .masterchef-promo__art {
    bottom: -22px;
    left: -24px;
    width: 108px;
    height: 108px;
    opacity: .13;
  }

  .masterchef-promo__badge {
    min-height: 24px;
    padding: 2px 9px;
    font-size: 10px;
  }

  .masterchef-promo__content {
    padding: 10px 0 4px;
  }

  .masterchef-promo__eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .masterchef-promo h2 {
    max-width: none;
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.5;
  }

  .masterchef-promo p {
    max-width: 25rem;
    font-size: 11px;
    line-height: 1.7;
  }

  .masterchef-promo__button {
    min-width: 160px;
    min-height: 38px;
    margin-top: 12px;
    padding: 0 16px;
    border-radius: 11px;
    font-size: 12px;
  }

  .masterchef-promo__button i {
    font-size: 13px;
  }

  .teachers-section__heading {
    font-size: 16px;
  }

  .teachers-section__subtitle {
    font-size: 13px;
  }

  .teachers-section__badge {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .teachers-section__view-all {
    height: 36px;
    font-size: 13px;
  }

  .teachers-section__view-all svg {
    width: 20px;
    height: 20px;
  }

  .courses-slider-wrapper {
    padding: 12px 8px;
    gap: 6px;
  }

  .courses-nav__btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .course-card-v2 {
    max-width: none;
    width: 100%;
  }

  .course-card-v2__media {
    height: 118px;
    margin: 8px 8px 0;
    border-radius: 10px;
  }

  .course-card-v2__discount {
    top: 8px;
    left: 8px;
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
  }

  .course-card-v2__status {
    top: 8px;
    right: 8px;
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .course-card-v2__category {
    bottom: 8px;
    padding: 4px 10px;
    font-size: 10px;
    max-width: calc(100% - 16px);
  }

  .course-card-v2__body {
    padding: 10px 8px 6px;
  }

  .course-card-v2__title {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.55;
    min-height: 3.1em;
    height: 3.1em;
  }

  .course-card-v2__facts {
    gap: 0;
    margin-bottom: 8px;
  }

  .course-card-v2__fact {
    gap: 4px;
    padding: 5px 0;
    border-radius: 0;
  }

  .course-card-v2__fact > i {
    flex-basis: 21px;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    font-size: 10px;
  }

  .course-card-v2__fact small {
    font-size: 7px;
  }

  .course-card-v2__fact strong {
    font-size: 9px;
  }

  .course-card-v2__meta {
    gap: 4px;
    font-size: 10px;
  }

  .course-card-v2__footer {
    padding: 8px 8px 10px;
    gap: 6px;
  }

  .course-card-v2__cart-spacer {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .course-card-v2__cart-wrap {
    bottom: 10px;
    left: 8px;
  }

  .course-card-v2__cart {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 10px;
  }

  .course-card-v2__cart--done i {
    font-size: 18px;
  }

  .course-card-v2__price-original {
    font-size: 10px;
  }

  .course-card-v2__price-current {
    font-size: 12px;
  }

  .site-toast-host {
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(380px, calc(100vw - 24px));
  }

  .course-image {
    height: 210px;
  }

  .section-title h2:before,
  .section-title h2:after {
    width: 40px;
    margin: 0 10px;
  }
}

@media (max-width:576px) {
  .stats-bar__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 1px 2px;
  }

  .stats-bar {
    flex-wrap: nowrap;
    padding: 14px 6px;
    gap: 2px;
  }

  .stats-bar__label {
    font-size: 9px;
    line-height: 1.3;
    margin-top: 4px;
  }

  .stat-number,
  .stats-bar__preview-value {
    font-size: .95rem;
  }

  .stats-bar__prefix,
  .stats-bar__unit {
    font-size: .72rem;
  }

  .teachers-slider-wrapper {
    padding: 12px 4px;
    gap: 4px;
  }

  .teacher-card-v2 {
    min-height: 300px;
  }

  .teacher-card-v2__footer {
    padding: 0 10px 10px;
  }

  .teacher-card-v2__profile-btn {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .teacher-card-v2__image {
    height: 145px;
    margin: 8px 8px 0;
  }

  .teacher-card-v2__role {
    margin-top: 6px;
  }

  .teachers-view-all-slide {
    min-height: 270px;
    padding: 2px;
  }

  .teachers-view-all-btn {
    padding: 9px 12px;
    font-size: 12px;
    min-height: 40px;
  }

  .teachers-nav__btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  /* Testimonials responsive */
  .testimonials-slider-wrapper {
    padding: 0 10px;
  }

  .swiper-button-prev.testimonial-prev,
  .swiper-button-next.testimonial-next {
    width: 32px;
    height: 32px;
  }

  .swiper-button-prev.testimonial-prev i,
  .swiper-button-next.testimonial-next i {
    font-size: 14px;
  }

  .testimonial-card {
    padding: 20px 16px 18px;
    min-height: 200px;
    border-radius: 18px;
  }

  .testimonial-text {
    font-size: 13px;
    line-height: 1.8;
  }

  .testimonial-author img {
    width: 40px;
    height: 40px;
  }

  .testimonial-author strong {
    font-size: 14px;
  }

  .testimonial-author span {
    font-size: 11px;
  }

  .testimonials-header h2 {
    font-size: 22px;
  }

  .testimonials-header p {
    font-size: 14px;
  }

  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 10px 14px;
  }

  .video-timer {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 10px;
    align-self: flex-start;
  }

  .video-title {
    font-size: 12px;
    min-width: auto;
  }
}

@media (max-width:420px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%
  }

  .hero-actions .btn {
    min-width: 0;
    padding: .65rem .5rem;
    font-size: .78rem
  }

  .course-scroll>div {
    width: 84%
  }

  .course-image {
    height: 150px
  }

  .gallery-grid img {
    height: 100px
  }
}

@media (max-width: 400px) {
  .stats-bar {
    padding: 12px 4px;
    gap: 1px;
  }

  .stats-bar__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 1px 1px;
  }

  .stats-bar__label {
    font-size: 8px;
    line-height: 1.25;
    margin-top: 3px;
  }

  .stat-number,
  .stats-bar__preview-value {
    font-size: .85rem;
  }

  .stats-bar__prefix,
  .stats-bar__unit {
    font-size: .65rem;
  }
}

/* ===== دکمه‌ها همیشه فعال ===== */
.swiper-button-prev.testimonial-prev,
.swiper-button-next.testimonial-next {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.swiper-button-prev.testimonial-prev.swiper-button-disabled,
.swiper-button-next.testimonial-next.swiper-button-disabled {
  opacity: 0.4 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.swiper-button-prev.testimonial-prev.swiper-button-disabled:hover,
.swiper-button-next.testimonial-next.swiper-button-disabled:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(242, 164, 90, 0.2) !important;
  color: var(--color-accent-light) !important;
  transform: translateY(-50%) scale(1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   GALLERY SECTION - لوکس با افکت شهاب سنگ
   ============================================ */

.gallery-section {
  position: relative;
  margin-top: 30px;
  overflow: hidden;
}

.gallery-section__panel {
  position: relative;
  width: calc(100% - 16px);
  max-width: none;
  margin: 0 auto;
  padding: 56px clamp(14px, 2vw, 24px) 48px;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 32%, var(--color-primary) 58%, var(--color-primary-darker) 100%);
  box-shadow: 0 22px 48px rgb(var(--color-primary-rgb) / .16);
}

/* ===== شهاب سنگ‌ها ===== */
.shooting-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.28);
  animation: shoot linear infinite;
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.35), transparent);
}

/* ===== موقعیت و زمان هر شهاب ===== */
.shooting-star:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-duration: 4s;
  animation-delay: 0s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(2) {
  top: 30%;
  left: 70%;
  animation-duration: 5s;
  animation-delay: 1.5s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(3) {
  top: 50%;
  left: 10%;
  animation-duration: 3.5s;
  animation-delay: 0.8s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(4) {
  top: 70%;
  left: 50%;
  animation-duration: 4.5s;
  animation-delay: 2.5s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(5) {
  top: 15%;
  left: 85%;
  animation-duration: 3.8s;
  animation-delay: 1.2s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(6) {
  top: 60%;
  left: 30%;
  animation-duration: 5.5s;
  animation-delay: 0.5s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(7) {
  top: 40%;
  left: 60%;
  animation-duration: 4.2s;
  animation-delay: 3s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(8) {
  top: 80%;
  left: 80%;
  animation-duration: 3.2s;
  animation-delay: 1.8s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(9) {
  top: 25%;
  left: 40%;
  animation-duration: 4.8s;
  animation-delay: 2.2s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(10) {
  top: 55%;
  left: 90%;
  animation-duration: 3.6s;
  animation-delay: 0.3s;
  width: 2px;
  height: 2px;
}

/* ===== انیمیشن شهاب ===== */
@keyframes shoot {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  100% {
    transform: translate(-300px, 200px) scale(0);
    opacity: 0;
  }
}

/* ===== ستاره‌های پس‌زمینه ===== */
.stars-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5% 10%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 15% 30%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 25% 70%, rgba(255, 255, 255, 0.10), transparent),
    radial-gradient(1px 1px at 35% 15%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 45% 55%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 65% 25%, rgba(255, 255, 255, 0.10), transparent),
    radial-gradient(1px 1px at 75% 45%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 95% 35%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.07), transparent),
    radial-gradient(1px 1px at 50% 20%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 255, 0.04), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ===== محتوای اصلی بالای افکت‌ها ===== */
.gallery-section .container-xxl {
  position: relative;
  z-index: 2;
}

/* ===== هدر ===== */
.gallery-header {
  position: relative;
  z-index: 2;
  margin-bottom: 35px;
  text-align: start;
}

.gallery-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin-bottom: 6px;
}

.gallery-eyebrow {
  display: inline-block;
  color: var(--color-accent-light);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gallery-header h2 {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.gallery-header h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  margin: 10px 0 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 2px;
}

.gallery-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

/* ============================================
   GRID
   ============================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* ===== هر آیتم ===== */
.gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
  background: var(--color-primary-darker);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== هاور ===== */
.gallery-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28), 0 0 36px rgb(var(--color-primary-rgb) / .22);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* ===== اوورلی ===== */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(var(--color-primary-darker-rgb) / 0.82), rgb(var(--color-primary-rgb) / 0.28));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  font-size: 28px;
  color: var(--color-accent-light);
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.gallery-item:hover .gallery-overlay i {
  transform: scale(1);
}

.gallery-overlay span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease 0.1s;
}

.gallery-item:hover .gallery-overlay span {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   دکمه نمایش همه
   ============================================ */

.gallery-section__empty {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.gallery-show-all {
  flex-shrink: 0;
  min-height: 42px;
  padding: .5rem 1.25rem;
  font-size: .88rem;
  gap: .45rem;
}

.gallery-show-all i {
  font-size: .95rem;
  transition: transform .2s ease;
}

.gallery-show-all:hover i {
  transform: translateX(-3px);
}

/* ============================================
   مودال گالری
   ============================================ */

.gallery-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(0, 0, 0, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.gallery-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 56px 32px 28px;
}

.gallery-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.gallery-modal-close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: rotate(90deg);
}

.gallery-modal-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 8px;
}

.gallery-modal-image img {
  width: auto;
  height: auto;
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 220px);
  object-fit: contain;
  display: block;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.gallery-modal-caption {
  width: min(100%, 920px);
  margin-top: 18px;
  padding: 14px 22px;
  text-align: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.gallery-modal-caption span {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.modal-backdrop.gallery-modal-backdrop {
  background: rgba(0, 0, 0, 0.88);
}

/* ============================================
   ریسپانسیو
   ============================================ */

@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .gallery-header h2 {
    font-size: 28px;
  }

  .gallery-item {
    aspect-ratio: 1/1;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 36px 0;
  }

  .gallery-section__panel {
    width: calc(100% - 12px);
    padding: 40px 14px 34px;
    border-radius: 22px;
  }

  .gallery-grid {
    gap: 8px;
  }

  .gallery-header__top {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .gallery-header h2 {
    font-size: 24px;
  }

  .gallery-header p {
    font-size: 14px;
  }

  .gallery-overlay i {
    font-size: 22px;
  }

  .gallery-overlay span {
    font-size: 11px;
  }

  .gallery-show-all {
    min-height: 38px;
    padding: .45rem 1rem;
    font-size: .82rem;
  }

  .gallery-modal-dialog {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    margin: 12px auto;
  }

  .gallery-modal-body {
    padding: 52px 16px 18px;
  }

  .gallery-modal-close {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .gallery-modal-image img {
    max-height: calc(100vh - 240px);
    border-radius: 12px;
  }

  .gallery-modal-caption span {
    font-size: 15px;
  }

  .gallery-modal-caption {
    margin-top: 14px;
    padding: 12px 16px;
  }
}

@media (max-width: 576px) {
  .gallery-section {
    padding: 28px 0;
  }

  .gallery-section__panel {
    width: calc(100% - 8px);
    padding: 32px 10px 28px;
    border-radius: 18px;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .gallery-item {
    border-radius: 10px;
    aspect-ratio: 1/1;
  }

  .gallery-header h2 {
    font-size: 20px;
  }

  .gallery-header p {
    font-size: 13px;
  }

  .gallery-eyebrow {
    font-size: 12px;
    padding: 3px 14px;
  }

  .gallery-overlay i {
    font-size: 18px;
  }

  .gallery-overlay span {
    font-size: 10px;
  }

  .gallery-show-all {
    min-height: 36px;
    padding: .4rem .85rem;
    font-size: .78rem;
    gap: .35rem;
  }

  .gallery-show-all i {
    font-size: .88rem;
  }

  .gallery-modal-dialog {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    margin: 8px auto;
  }

  .gallery-modal-body {
    padding: 48px 12px 14px;
  }

  .gallery-modal-close {
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .gallery-modal-image img {
    max-height: calc(100vh - 210px);
  }

  .gallery-modal-caption span {
    font-size: 13px;
  }

  .gallery-modal-caption {
    margin-top: 12px;
    padding: 10px 14px;
  }

  /* ===== شهاب‌ها رو در موبایل کم‌تر می‌کنیم ===== */
  .shooting-star:nth-child(5),
  .shooting-star:nth-child(6),
  .shooting-star:nth-child(7),
  .shooting-star:nth-child(8) {
    display: none;
  }
}

@media (max-width: 400px) {
  .gallery-grid {
    gap: 4px;
  }

  .gallery-item {
    border-radius: 8px;
  }

  .gallery-header h2 {
    font-size: 18px;
  }

  .gallery-show-all {
    min-height: 36px;
    padding: .4rem .85rem;
    font-size: .78rem;
    gap: .35rem;
  }

  .gallery-show-all i {
    font-size: .88rem;
  }
}

/* ===== ثبت‌نام / اکانت ===== */
.register-page {
    min-height: calc(100vh - 200px);
    padding: 50px 0 70px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(var(--color-primary-rgb) / .09), rgb(var(--color-primary-rgb) / .03));
}

.register-page::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image: radial-gradient(rgb(var(--color-primary-rgb) / .16) .6px, transparent .6px);
    background-size: 10px 10px;
}

.register-wrapper {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 auto;
}

.register-card {
    background: var(--color-surface);
    border-radius: 24px;
    border: 1px solid rgb(var(--color-primary-rgb) / .35);
    box-shadow: 0 20px 50px rgba(69, 44, 15, .12);
    overflow: hidden;
}

.register-header {
    background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 100%);
    padding: 32px 30px 28px;
    text-align: center;
    position: relative;
}

    .register-header::after {
        content: "✦";
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 4rem;
        color: rgba(229, 159, 47, .12);
        line-height: 1;
    }

    .register-header h1 {
        font-size: 1.75rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 8px;
    }

    .register-header p {
        color: rgba(255, 255, 255, .65);
        font-size: .9rem;
        margin: 0;
    }

.register-body {
    padding: 32px 28px 28px;
}

.form-group {
    margin-bottom: 1.25rem;
}

    .form-group label {
        display: block;
        font-weight: 700;
        font-size: .9rem;
        color: #211d19;
        margin-bottom: .45rem;
    }

        .form-group label .required {
            color: var(--color-accent-dark);
            margin-right: 2px;
        }

        .form-group label .optional {
            color: var(--color-text-muted);
            font-weight: 500;
            font-size: .8rem;
        }

.form-control-custom {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid rgb(var(--color-primary-rgb) / .35);
    border-radius: 12px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: .95rem;
    color: #211d19;
    transition: all .25s ease;
    direction: rtl;
}

    .form-control-custom:focus {
        outline: none;
        border-color: var(--color-accent);
        background: var(--color-surface);
        box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / .12);
    }

    .form-control-custom::placeholder {
        color: #aaa;
    }

    .form-control-custom.is-invalid {
        border-color: #dc3545;
        background: #f5f5f5;
    }

    .form-control-custom.is-valid {
        border-color: #28a745;
    }

.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: .8rem;
    margin-top: .35rem;
    font-weight: 500;
}

.form-control-custom.is-invalid + .invalid-feedback {
    display: block;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

    .password-toggle:hover {
        color: var(--color-accent);
    }

.password-wrapper .form-control-custom {
    padding-left: 44px;
}

.register-submit {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
    box-shadow: 0 8px 24px rgb(var(--color-accent-rgb) / .28);
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .register-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
        box-shadow: 0 12px 30px rgb(var(--color-accent-rgb) / .35);
    }

    .register-submit:disabled {
        opacity: .7;
        cursor: not-allowed;
        transform: none;
    }

.register-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgb(var(--color-primary-rgb) / .2);
    font-size: .9rem;
    color: var(--color-text-muted);
}

    .register-footer a {
        color: var(--color-accent-dark);
        font-weight: 700;
    }

        .register-footer a:hover {
            color: #c96500;
        }

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 576px) {
    .register-page {
        padding: 30px 0 50px;
    }

    .register-body {
        padding: 24px 18px 22px;
    }

    .register-header {
        padding: 26px 20px 22px;
    }

        .register-header h1 {
            font-size: 1.45rem;
        }

    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.otp-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 8px;
    direction: ltr;
}

.otp-input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    border: 1.5px solid rgb(var(--color-primary-rgb) / .4);
    border-radius: 14px;
    background: var(--color-surface);
    color: #211d19;
    transition: all .25s ease;
    font-family: inherit;
    caret-color: var(--color-accent);
}

    .otp-input:focus {
        outline: none;
        border-color: var(--color-accent);
        background: var(--color-surface);
        box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / .15);
        transform: translateY(-2px);
    }

    .otp-input.is-invalid {
        border-color: #dc3545;
        background: #f5f5f5;
    }

.otp-error {
    text-align: center;
    color: #dc3545;
    font-size: .9rem;
    font-weight: 600;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.resend-btn {
    background: none;
    border: none;
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    padding: 0;
    margin-right: 4px;
}

    .resend-btn:hover:not(:disabled) {
        color: #c96500;
        text-decoration: underline;
    }

    .resend-btn:disabled {
        color: var(--color-text-muted);
        cursor: not-allowed;
    }

@@media (max-width: 480px) {
    .otp-container {
        gap: 8px;
    }

    .otp-input {
        width: 44px;
        height: 52px;
        font-size: 1.35rem;
        border-radius: 12px;
    }
}

/* ============================================
   COURSE DETAIL PAGE
   ============================================ */



.cd-state {
  text-align: center;
  padding: 100px 20px;
  color: var(--color-text-secondary);
}

.cd-state i {
  font-size: 42px;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.cd-state--inline {
  padding: 32px 20px;
}

.cd-state--inline i {
  font-size: 28px;
  margin-bottom: 10px;
}

.cd-state--inline p {
  margin: 0;
  font-size: 14px;
}

.cd-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  padding: 18px 0 48px;
}

.cd-page-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cd-page-side {
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.cd-hero-card {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .3);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(69, 44, 15, .06);
  overflow: hidden;
}

.cd-hero-card--visual {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: auto;
  flex-shrink: 0;
  width: 100%;
  background: linear-gradient(180deg, #fff 0%, #fdf9f2 100%);
  border: 1px solid rgb(var(--color-primary-rgb) / .38);
  box-shadow: 0 12px 30px rgba(69, 44, 15, .08);
}

.cd-hero-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light), var(--color-accent), var(--color-accent-dark));
}

.cd-hero-card__top {
  padding: 13px 18px 11px;
}

.cd-hero-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 9px;
}

.cd-hero-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .35);
  font-size: 11px;
  font-weight: 700;
  color: #555;
}

.cd-hero-card__tag i {
  color: var(--color-accent);
  font-size: 11px;
}

.cd-hero-card__lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-secondary);
}

.cd-hero-card__lead.cd-rich {
  color: #555;
}

.cd-hero-card__lead.cd-rich p:last-child {
  margin-bottom: 0;
}

.cd-hero-card__divider {
  height: 1px;
  margin: 12px 0 14px;
  background: rgb(var(--color-primary-rgb) / .22);
}

.cd-hero-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.cd-hero-card__title {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.5;
  color: #222;
}

.cd-hero-card__media {
  position: relative;
  margin: 0 auto;
  width: min(calc(100% - 28px), 460px);
  aspect-ratio: 1 / 1;
  height: auto;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-primary-dark);
  border: 3px solid rgba(232, 179, 107, .62);
  box-shadow: 0 20px 44px rgba(69, 44, 15, .2), 0 0 0 8px rgba(255, 255, 255, .72), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.cd-hero-card__media img,
.cd-hero-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: none;
}

.cd-hero-card__media--video video {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.cd-hero-card__media img {
  transition: transform .6s ease;
}

.cd-hero-card--visual:hover .cd-hero-card__media img {
  transform: scale(1.04);
}

.cd-hero-card__media-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .18) 0%, transparent 42%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.cd-hero-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 8, 5, .55) 100%);
  pointer-events: none;
  z-index: 1;
}

.cd-hero-card__media-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cd-hero-card__ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(229, 57, 53, .45);
}

.cd-hero-card__float-chip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.cd-hero-card__float-chip i {
  color: var(--color-accent);
}

.cd-hero-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 14px;
}

.cd-hero-card__chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  font-size: 12px;
  font-weight: 700;
  color: #444;
}

.cd-hero-card__chips i {
  color: var(--color-accent);
}

.cd-hero-card__chip--price {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.cd-hero-card__chip--price i {
  color: #ffcc80 !important;
}

.cd-hero-card--info {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
}

.cd-hero-card__facts {
  margin: 0;
  width: 100%;
  display: grid;
  gap: 0;
}

.cd-hero-card__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed rgb(var(--color-primary-rgb) / .22);
  font-size: 14px;
}

.cd-hero-card__fact:last-child {
  border-bottom: none;
}

.cd-hero-card__fact dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 600;
}

.cd-hero-card__fact dt i {
  color: var(--color-accent);
  width: 16px;
  text-align: center;
}

.cd-page-side .cd-hero-card__fact dt i {
  color: var(--color-primary);
}

.cd-hero-card__fact dd {
  margin: 0;
  color: #222;
  font-weight: 800;
  text-align: left;
  line-height: 1.6;
}

.cd-hero-card__fact--price dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cd-hero-card__discount {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.cd-hero-card__price-old {
  display: block;
  font-size: 12px;
  color: #d32f2f;
  text-decoration: line-through;
  font-weight: 700;
}

.cd-hero-card__price-new {
  display: block;
  font-size: 15px;
  color: #2e7d32;
  font-weight: 900;
}

.cd-page-aside {
  position: static;
  width: 100%;
}

.cd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.cd-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.cd-breadcrumb a:hover {
  color: var(--color-accent);
}

.cd-hero__discount {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(229, 57, 53, .35);
  z-index: 1;
}

.cd-affix {
  flex-shrink: 0;
  width: 100%;
}

.cd-affix__rows {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .2);
}

.cd-affix__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}

.cd-affix__row dt {
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0;
  flex-shrink: 0;
}

.cd-affix__row dd {
  margin: 0;
  color: #222;
  font-weight: 700;
  text-align: left;
  line-height: 1.6;
}

.cd-body {
  padding-bottom: 0;
}

.cd-buy__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.cd-panel {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
}

.cd-panel__head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin-bottom: 20px;
}

.cd-panel__head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #222;
  line-height: 1.4;
}

.cd-panel__head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.cd-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 173, 36, .18), rgba(223, 124, 0, .12));
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.cd-rich {
  color: #555;
  font-size: 15px;
  line-height: 2;
}

.cd-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.cd-class-card {
  text-align: right;
  border: 1.5px solid rgb(var(--color-primary-rgb) / .35);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fdf9f2 100%);
  padding: 18px;
  cursor: pointer;
  transition: .25s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-class-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 24px rgba(233, 146, 34, .12);
}

.cd-class-card.is-active {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, #fff8eb 0%, #fff 100%);
  box-shadow: 0 0 0 3px rgba(233, 146, 34, .15);
}

.cd-class-card__title {
  font-size: 16px;
  font-weight: 900;
  color: #222;
}

.cd-class-card__date,
.cd-class-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.cd-class-card__date i,
.cd-class-card__meta i {
  color: var(--color-accent);
  width: 16px;
}

.cd-sessions {
  display: grid;
  gap: 8px;
  max-height: 680px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.cd-session-acc {
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .22);
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.cd-session-acc.is-open {
  border-color: rgba(233, 146, 34, .45);
  box-shadow: 0 10px 28px rgba(233, 146, 34, .1);
}

.cd-session-acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  transition: background .2s ease;
}

.cd-session-acc__head:hover {
  background: rgba(233, 146, 34, .06);
}

.cd-session-acc__num {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / .24), rgb(var(--color-primary-rgb) / .14));
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  color: var(--color-primary-dark);
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
}

.cd-session-acc.is-open .cd-session-acc__num {
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / .34), rgb(var(--color-primary-rgb) / .22));
  border-color: rgb(var(--color-primary-rgb) / .38);
  color: var(--color-primary-darker);
}

.cd-session-acc__summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cd-session-acc__title {
  font-size: 14px;
  font-weight: 900;
  color: #222;
  line-height: 1.5;
}

.cd-session-acc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.cd-session-acc__meta i {
  color: var(--color-accent);
}

.cd-session-acc__chevron {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 146, 34, .1);
  color: var(--color-accent);
  transition: transform .3s ease, background .2s ease;
}

.cd-session-acc.is-open .cd-session-acc__chevron {
  transform: rotate(180deg);
  background: rgba(233, 146, 34, .18);
}

.cd-session-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.cd-session-acc__body.is-open {
  grid-template-rows: 1fr;
}

.cd-session-acc__body-inner {
  overflow: hidden;
}

.cd-session-acc__details {
  padding: 0 12px 12px;
  margin-right: 50px;
  border-top: 1px dashed rgb(var(--color-primary-rgb) / .25);
  padding-top: 10px;
}

.cd-session-acc__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.cd-session-acc__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .15);
}

.cd-session-acc__fact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.cd-session-acc__fact-label i {
  color: var(--color-accent);
}

.cd-session-acc__fact span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.cd-session-acc__desc {
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  font-size: 13px;
  line-height: 1.9;
  color: #444;
}

.cd-session-acc__desc.cd-rich p:last-child {
  margin-bottom: 0;
}

.cd-session-acc__empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(233, 146, 34, .06);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

.cd-session {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: #fdfbf7;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
}

.cd-session__num {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  color: #fff;
  font-weight: 900;
  font-size: 18px;
}

.cd-session__body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.cd-session__body p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.cd-session__body i {
  color: var(--color-accent);
  margin-left: 4px;
}

.cd-session__sep {
  margin: 0 6px;
  color: #bbb;
}

.cd-instructors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cd-instructors--homepage-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  direction: rtl;
  gap: 14px;
}

.cd-instructors--homepage-cards .teacher-card-v2 {
  width: min(100%, 270px);
  max-width: 270px;
  margin-inline: 0;
  min-height: 310px;
}

@media (max-width: 576px) {
  .cd-instructors--homepage-cards {
    gap: 10px;
  }

  .cd-instructors--homepage-cards .teacher-card-v2 {
    width: calc(50% - 5px);
    max-width: none;
    min-height: 300px;
  }
}

.cd-instructor {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  border: 1px solid rgb(var(--color-primary-rgb) / .25);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(69, 44, 15, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cd-instructor:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 146, 34, .4);
  box-shadow: 0 14px 32px rgba(233, 146, 34, .12);
}

.cd-instructor__body {
  display: flex;
  gap: 16px;
  padding: 18px 18px 16px;
}

.cd-instructor__avatar {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid #e8b36b;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(233, 146, 34, .18);
}

.cd-instructor__content {
  flex: 1;
  min-width: 0;
}

.cd-instructor__content h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
  color: #222;
  line-height: 1.45;
}

.cd-instructor__exp {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 700;
}

.cd-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cd-skill-tags span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .35);
  font-size: 12px;
  color: #555;
}

.cd-instructor__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid rgb(var(--color-primary-rgb) / .22);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}

.cd-instructor__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
  transform: translateX(120%);
  transition: transform .55s ease;
}

.cd-instructor__cta:hover::before {
  transform: translateX(-120%);
}

.cd-instructor__cta i:first-child {
  color: var(--color-accent-light);
  font-size: 15px;
}

.cd-instructor__cta span {
  letter-spacing: .2px;
}

.cd-instructor__cta i:last-child {
  font-size: 12px;
  opacity: .85;
  transition: transform .25s ease;
}

.cd-instructor__cta:hover {
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.cd-instructor__cta:hover i:first-child {
  color: #fff;
}

.cd-instructor__cta:hover i:last-child {
  transform: translateX(-4px);
}

.cd-payment-plans {
  display: grid;
  gap: 14px;
}

.cd-payment-plan {
  border-radius: 18px;
  border: 1px solid rgb(var(--color-primary-rgb) / .22);
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(69, 44, 15, .05);
}

.cd-payment-plan--installment {
  border-color: rgba(233, 146, 34, .28);
}

.cd-payment-plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.cd-payment-plan__info h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
  color: #222;
}

.cd-payment-plan__type {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(233, 146, 34, .1);
  border: 1px solid rgba(233, 146, 34, .25);
  color: #c56f00;
  font-size: 12px;
  font-weight: 800;
}

.cd-payment-plan--full .cd-payment-plan__type {
  background: rgba(24, 24, 24, .06);
  border-color: rgba(24, 24, 24, .12);
  color: #444;
}

.cd-payment-plan__amount {
  text-align: left;
  flex-shrink: 0;
}

.cd-payment-plan__amount span {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.cd-payment-plan__amount strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-accent);
  white-space: nowrap;
}

.cd-payment-plan__installments {
  border-top: 1px dashed rgb(var(--color-primary-rgb) / .25);
  padding: 14px 20px 18px;
  background: rgba(255, 255, 255, .65);
}

.cd-payment-plan__installments-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
}

.cd-payment-plan__installments-head i {
  color: var(--color-accent);
}

.cd-payment-plan__installments-head small {
  margin-right: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.cd-payment-plan__installments-list {
  display: grid;
  gap: 10px;
}

.cd-payment-plan__installment {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
}

.cd-payment-plan__installment-num {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

.cd-payment-plan__installment-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.cd-payment-plan__installment-body strong {
  font-size: 15px;
  font-weight: 900;
  color: #222;
}

.cd-payment-plan__installment-body span {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 700;
}

.cd-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cd-media-grid__item {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}

.cd-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cd-video-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  border-radius: 16px;
  background: #fdfbf7;
  box-shadow: 0 10px 24px rgb(37 31 24 / .06);
}

.cd-video-card__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1d1a17;
}

.cd-video-card figcaption {
  padding: 10px 14px 13px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.cd-placeholder {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed rgb(var(--color-primary-rgb) / .4);
  border-radius: 14px;
  background: #fdfbf7;
}

.cd-placeholder i {
  font-size: 30px;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.cd-placeholder p {
  margin: 0;
  color: var(--color-text-secondary);
}

.cd-placeholder small {
  display: block;
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.cd-comments {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cd-comments-card {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(69, 44, 15, .05);
}

.cd-comments-card--composer {
  background: linear-gradient(180deg, #fffdf9 0%, #fff 100%);
  border-color: rgb(var(--color-primary-rgb) / .24);
}

.cd-comments-card--state {
  text-align: center;
  padding: 28px 20px;
  background: #fdfbf7;
}

.cd-comments-card--state h3 {
  margin: 10px 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.cd-comments-card--state p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.8;
}

.cd-comments-card--state > i {
  font-size: 24px;
  color: var(--color-accent);
}

.cd-comments-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.cd-comments-card__head h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.cd-comments-card__head p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.cd-comments-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 173, 36, .2), rgba(223, 124, 0, .12));
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.cd-comments-card__icon--large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto;
  font-size: 20px;
}

.cd-comments__login-btn {
  margin-top: 16px;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cd-comments__login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgb(var(--color-primary-rgb) / .25);
}

.cd-comment__reply-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgb(var(--color-primary-rgb) / .18);
}

.cd-comments__input {
  width: 100%;
  border: 1px solid rgb(var(--color-primary-rgb) / .22);
  border-radius: 14px;
  padding: 14px 16px;
  resize: vertical;
  min-height: 96px;
  font: inherit;
  background: #fff;
  color: var(--color-text-primary);
  line-height: 1.8;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cd-comments__input--reply {
  min-height: 72px;
}

.cd-comments__input:focus {
  outline: none;
  border-color: rgb(var(--color-primary-rgb) / .55);
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .12);
}

.cd-comments__composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.cd-comments__composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cd-comments__counter {
  font-size: 12px;
  color: var(--color-text-muted);
}

.cd-comments__submit,
.cd-comments__cancel {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.cd-comments__submit {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgb(var(--color-primary-rgb) / .22);
}

.cd-comments__submit:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgb(var(--color-primary-rgb) / .28);
}

.cd-comments__submit:disabled,
.cd-comments__cancel:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.cd-comments__cancel {
  background: #f1ebe3;
  color: var(--color-text-secondary);
}

.cd-comments__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cd-comment-card {
  padding: 16px;
}

.cd-comment-card--reply {
  background: #faf7f2;
  border-style: ridge;
  box-shadow: none;
}

.cd-comment__main {
  display: flex;
  gap: 14px;
}

.cd-comment__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3ece4;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(69, 44, 15, .08);
}

.cd-comment-card--reply .cd-comment__avatar {
  width: 38px;
  height: 38px;
}

.cd-comment__content {
  flex: 1;
  min-width: 0;
}

.cd-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cd-comment__author {
  color: var(--color-text-primary);
  font-size: 15px;
}

.cd-comment__date {
  color: var(--color-text-muted);
  font-size: 12px;
}

.cd-comment__date::before {
  content: "•";
  margin-left: 8px;
  color: rgb(var(--color-primary-rgb) / .35);
}

.cd-comment__body {
  margin: 10px 0 0;
  line-height: 1.9;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.cd-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.cd-comment__action,
.cd-comment__replies-toggle {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cd-comment__replies-toggle {
  color: var(--color-primary);
}

.cd-comment__replies {
  margin-top: 14px;
  padding-right: 12px;
  border-right: 2px solid rgb(var(--color-primary-rgb) / .15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 640px) {
  .cd-comments-card {
    padding: 14px;
  }

  .cd-comments__composer-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .cd-comments__composer-actions,
  .cd-comments__submit {
    width: 100%;
    justify-content: center;
  }

  .cd-comment__avatar {
    width: 42px;
    height: 42px;
  }
}

.cd-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1199px) {
  .cd-related {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cd-buy {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .4);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(69, 44, 15, .1);
  width: 100%;
  box-sizing: border-box;
}

.cd-buy__old {
  display: block;
  font-size: 14px;
  color: #d32f2f;
  text-decoration: line-through;
  font-weight: 700;
}

.cd-buy__new {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #2e7d32;
  margin: 2px 0 14px;
}

.cd-buy__new--solo {
  color: #222;
}

.cd-buy__selected {
  padding: 14px;
  border-radius: 14px;
  background: #fdf9f2;
  border: 1px solid rgb(var(--color-primary-rgb) / .25);
  margin-bottom: 16px;
}

.cd-buy__selected-label,
.cd-buy__plans-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.cd-buy__selected strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.cd-buy__selected small {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.cd-buy__plans {
  margin-bottom: 16px;
}

.cd-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cd-plan-chip {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid #e8b36b;
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 700;
  color: #444;
}

.cd-buy__btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}

.cd-buy__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cd-buy__btn--primary {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  color: #fff;
  margin-bottom: 10px;
}

.cd-buy__btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid #e8b36b;
  margin-bottom: 14px;
}

.cd-buy__btn--cart {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cd-buy__btn--cart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 179, 107, .18), rgba(233, 146, 34, .1));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.cd-buy__btn--cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(233, 146, 34, .28);
  border-color: var(--color-accent);
  color: #b86a0a;
  background: var(--color-surface);
}

.cd-buy__btn--cart:hover::before {
  opacity: 1;
}

.cd-buy__btn--cart:hover i {
  animation: cd-cart-bounce .55s ease;
}

.cd-buy__btn--cart:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(233, 146, 34, .22);
}

@keyframes cd-cart-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px) scale(1.12); }
  70% { transform: translateY(-1px) scale(1.05); }
}

.cd-buy__btn--in-cart,
.cd-buy__btn--in-cart:disabled {
  background: #f0faf4;
  color: #4F7D4A;
  border-color: #4F7D4A;
  opacity: 1;
  cursor: default;
}

.cd-buy__btn--enrolled {
  background: #eef6ff;
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, .35);
  margin-bottom: 14px;
  cursor: default;
}

.cd-buy__btn--register:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(24, 24, 24, .28);
}

.cd-buy__alert {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .84rem;
  font-weight: 700;
}

.cd-buy__notice {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
}

.cd-buy__notice--soon {
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary);
}

.cd-buy__notice--completed {
  background: rgba(24, 24, 24, .06);
  color: #555;
}

.cd-share {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0e6d6;
}

.cd-share a,
.cd-share button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e8b36b;
  background: var(--color-surface);
  color: #555;
  cursor: pointer;
  transition: .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-decoration: none;
}

.cd-share a i,
.cd-share button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.cd-share a:hover,
.cd-share button:hover,
.cd-share button.is-copied {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

@media (max-width: 991px) {
  .cd-page-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 10px 34px;
  }

  .cd-page-content,
  .cd-page-side {
    display: contents;
  }

  .cd-page-side {
    position: static;
  }

  .cd-hero-card--visual {
    order: 1;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(69, 44, 15, .12);
  }

  .cd-hero-card__top {
    padding: 12px 15px 10px;
  }

  .cd-hero-card__media {
    margin: 0 auto;
    width: min(calc(100% - 24px), 340px);
    height: auto;
    border-radius: 15px;
  }

  .cd-hero-card__title {
    font-size: 1.42rem;
    line-height: 1.4;
  }

  .cd-hero-card__chips {
    padding: 10px 15px 12px;
  }

  .cd-hero-card--info {
    order: 2;
    width: 100%;
  }

  .cd-main {
    order: 3;
  }

  .cd-page-aside {
    order: 4;
    width: 100%;
  }

  .cd-panel {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .cd-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-video-grid {
    grid-template-columns: 1fr;
  }

  .cd-related {
    grid-template-columns: 1fr;
  }

  .cd-session-acc__head {
    grid-template-columns: 44px 1fr 32px;
    gap: 10px;
    padding: 14px;
  }

  .cd-session-acc__num {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .cd-session-acc__details {
    margin-right: 0;
    padding: 14px 14px 16px;
  }

  .cd-session-acc__facts {
    grid-template-columns: 1fr;
  }

  .cd-payment-plan__head {
    flex-direction: column;
    align-items: stretch;
  }

  .cd-payment-plan__amount {
    text-align: right;
    padding-top: 10px;
    border-top: 1px dashed rgb(var(--color-primary-rgb) / .2);
  }

  .cd-payment-plan__installment-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   SITE COURSES LISTING PAGE
   ============================================ */

.courses-page {
  --courses-brown: #3d2a1f;
  --courses-brown-soft: #6f6254;
  --courses-accent-gold: #f3b340;
  --courses-count-red: #d64545;
  padding: 28px 0 64px;
  min-height: calc(100vh - 76px);
}

.courses-page__title-bar {
  margin-bottom: 18px;
}

.courses-page__title-bar h1 {
  margin: 0;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  box-shadow: 0 10px 28px rgb(var(--color-primary-darker-rgb) / .08);
  text-align: right;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
  color: var(--courses-brown);
}

.courses-page__layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.courses-page__layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.courses-page__mobile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.courses-page__count {
  font-size: .95rem;
  font-weight: 800;
  color: var(--courses-brown);
}

.courses-page__mobile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.courses-page__filter-btn {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--courses-brown);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
}

.courses-page__mobile-search {
  margin-bottom: 18px;
}

.courses-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  box-shadow: 0 8px 22px rgb(var(--color-primary-darker-rgb) / .06);
}

.courses-sort-bar__count {
  margin-inline-start: auto;
  font-size: .95rem;
  font-weight: 800;
  color: var(--courses-brown);
  white-space: nowrap;
}

.courses-sort-bar__group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.courses-sort-bar__label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--courses-brown-soft);
  white-space: nowrap;
}

.courses-sort-bar__options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.courses-sort-bar__option {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--courses-brown-soft);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease;
}

.courses-sort-bar__option.is-active,
.courses-sort-bar__option:hover {
  color: var(--courses-brown);
}

.courses-sort-bar__option.is-active {
  font-weight: 900;
}

.courses-sort-dropdown {
  position: relative;
}

.courses-sort-dropdown__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  background: #fff;
  color: var(--courses-brown);
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
}

.courses-sort-dropdown__trigger::-webkit-details-marker {
  display: none;
}

.courses-sort-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  box-shadow: 0 14px 34px rgb(var(--color-primary-darker-rgb) / .14);
}

.courses-sort-dropdown__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--courses-brown-soft);
  text-align: right;
  font-size: .86rem;
  font-weight: 700;
}

.courses-sort-dropdown__item.is-active,
.courses-sort-dropdown__item:hover {
  background: rgb(var(--color-primary-rgb) / .08);
  color: var(--courses-brown);
}

.courses-filter-panel {
  padding: 18px 16px 20px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  box-shadow: 0 12px 30px rgb(var(--color-primary-darker-rgb) / .08);
}

.courses-filter-panel__title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--courses-brown);
}

.courses-filter-panel__search-wrap {
  margin-bottom: 14px;
}

.courses-filter-panel__search {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #ddd4c7;
  background: #fff;
  color: var(--courses-brown);
  font-size: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.courses-filter-panel__search:focus {
  outline: none;
  border-color: #cfc4b6;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / .08);
}

.courses-filter-panel__search:focus-visible {
  outline: none;
  border-color: #cfc4b6;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / .08);
}

.courses-filter-panel__search::placeholder {
  color: #a79a8d;
}

.courses-filter-accordion {
  border-top: 1px solid #ece4d8;
}

.courses-filter-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 800;
  color: var(--courses-brown);
}

.courses-filter-accordion__summary::-webkit-details-marker {
  display: none;
}

.courses-filter-accordion__icon {
  color: var(--courses-brown-soft);
  transition: transform .2s ease;
}

.courses-filter-accordion[open] .courses-filter-accordion__icon {
  transform: rotate(-90deg);
}

.courses-filter-checklist {
  display: grid;
  gap: 10px;
  padding: 0 2px 14px;
}

.courses-filter-checklist--nested {
  padding-inline: 18px;
}

.courses-filter-checklist__empty {
  margin: 0;
  font-size: .84rem;
  color: var(--courses-brown-soft);
}

.courses-filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--courses-brown);
}

.courses-filter-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
  cursor: pointer;
}

.courses-filter-check__label {
  flex: 1;
  font-weight: 700;
}

.courses-filter-check__count {
  color: var(--courses-count-red);
  font-weight: 800;
  white-space: nowrap;
}

.courses-filter-panel__divider {
  margin: 8px 0 16px;
  border-top: 2px dashed #ddd4c7;
}

.courses-filter-toggle-list {
  display: grid;
  gap: 14px;
}

.courses-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--courses-brown);
  cursor: pointer;
}

.courses-filter-toggle__switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.courses-filter-toggle__switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.courses-filter-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ddd4c7;
  transition: background .2s ease;
}

.courses-filter-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .12);
  transition: transform .2s ease;
}

.courses-filter-toggle__switch input:checked + .courses-filter-toggle__track {
  background: var(--color-primary);
}

.courses-filter-toggle__switch input:checked + .courses-filter-toggle__track::after {
  transform: translateX(-20px);
}

.courses-filter-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 18px;
}

.courses-filter-panel__clear,
.courses-filter-panel__apply {
  min-height: 48px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 800;
  border: 0;
}

.courses-filter-panel__clear {
  background: #ece7df;
  color: var(--courses-brown-soft);
}

.courses-filter-panel__apply {
  background: linear-gradient(135deg, #f7c552, var(--courses-accent-gold));
  color: var(--courses-brown);
  box-shadow: 0 8px 18px rgb(243 179 64 / .28);
}

.courses-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: grid;
  place-items: end center;
  padding: 0;
}

.courses-filter-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(var(--color-primary-darker-rgb) / .42);
  backdrop-filter: blur(2px);
}

.courses-filter-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 0 16px 18px;
}

.courses-filter-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 18px 2px 12px;
  border-bottom: 1px solid #ece4d8;
}

.courses-filter-modal__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--courses-brown);
}

.courses-filter-modal__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent);
  font-size: 1.1rem;
}

.courses-filter-panel--modal {
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}

.courses-page__grid {
  margin-bottom: 24px;
}

.courses-page__state {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgb(var(--color-primary-darker-rgb) / .06);
  padding: 48px 24px;
  text-align: center;
}

.courses-page__state i {
  font-size: 2rem;
  color: var(--color-primary);
}

.courses-page__state--error i {
  color: var(--color-danger);
}

.courses-page__state p {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
}

.courses-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--color-primary-rgb) / .1);
}

.courses-pagination__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.courses-pagination__page,
.courses-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  background: #fff;
  color: var(--courses-brown);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.courses-pagination__nav {
  color: var(--courses-brown-soft);
}

.courses-pagination__page:not(.is-active):hover,
.courses-pagination__nav:not(:disabled):hover {
  border-color: rgb(var(--color-primary-rgb) / .28);
  background: var(--color-hero-surface);
  color: var(--courses-brown);
  transform: translateY(-1px);
}

.courses-pagination__page.is-active {
  border-color: var(--color-primary);
  background: linear-gradient(145deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  box-shadow: 0 8px 18px rgb(var(--color-primary-darker-rgb) / .18);
  cursor: default;
}

.courses-pagination__nav:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.courses-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 42px;
  color: var(--courses-brown-soft);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
  user-select: none;
}

@media (max-width: 991.98px) {
  .courses-page__layout {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .courses-page {
    padding: 20px 0 48px;
  }

  .courses-page__title-bar h1 {
    padding-inline: 18px;
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .courses-pagination__page,
  .courses-pagination__nav {
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: .86rem;
  }
}

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

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

/* ============================================
   SITE INSTRUCTORS LISTING PAGE
   ============================================ */

.courses-page .courses-grid.instructors-page__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
  margin-bottom: 24px;
}

.instructor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3e3e3;
  box-shadow: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.instructor-card:hover {
  transform: translateY(-3px);
  border-color: #cfcfcf;
  box-shadow: 0 10px 24px rgb(var(--color-primary-darker-rgb) / .08);
}

.instructor-card__visual {
  position: relative;
  padding: 10px 10px 0;
}

.instructor-card__photo-wrap {
  position: relative;
  height: 158px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .12), rgb(var(--color-primary-rgb) / .04));
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
}

.instructor-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .35s ease;
}

.instructor-card:hover .instructor-card__photo {
  transform: scale(1.03);
}

.instructor-card__accent {
  display: none;
}

.instructor-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  text-align: center;
  padding: 12px 12px 8px;
}

.instructor-card__ornament {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  color: rgb(var(--color-primary-rgb) / .35);
}

.instructor-card__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--color-primary-rgb) / .18), transparent);
}

.instructor-card__ornament i {
  font-size: .45rem;
  color: rgb(var(--color-primary-rgb) / .55);
}

.instructor-card__name {
  margin: 0;
  width: 100%;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.instructor-card__title {
  margin: 8px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary-dark);
  background: rgb(var(--color-primary-rgb) / .1);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.instructor-card__skills {
  margin: 8px 0 0;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.instructor-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: auto;
  padding: 11px 10px;
  border-top: 1px solid #efefef;
  background: #fafafa;
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.instructor-card__cta i {
  font-size: .95rem;
  line-height: 1;
}

.instructor-card:hover .instructor-card__cta {
  background: rgb(var(--color-primary-rgb) / .08);
  color: var(--color-primary-darker);
}

@media (max-width: 1399.98px) {
  .courses-page .courses-grid.instructors-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .instructor-card__photo-wrap {
    height: 148px;
  }
}

@media (max-width: 1199.98px) {
  .courses-page .courses-grid.instructors-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 991.98px) {
  .courses-page .courses-grid.instructors-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .instructor-card__photo-wrap {
    height: auto;
    aspect-ratio: 5 / 6;
  }
}

@media (max-width: 767.98px) {
  .courses-page .courses-grid.instructors-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
  }

  .instructor-card {
    border-radius: 14px;
  }

  .instructor-card__visual {
    padding: 8px 8px 0;
  }

  .instructor-card__photo-wrap {
    height: auto;
    aspect-ratio: 6 / 7;
    border-radius: 10px;
  }

  .instructor-card__body {
    padding: 10px 10px 6px;
  }

  .instructor-card__name {
    font-size: .84rem;
  }

  .instructor-card__title {
    font-size: .68rem;
  }

  .instructor-card__skills {
    font-size: .72rem;
  }

  .instructor-card__cta {
    padding: 9px 8px;
    font-size: .72rem;
  }
}

/* ============================================
   SITE STUDENT GALLERY PAGE
   ============================================ */

.gallery-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 18px;
  margin-bottom: 18px;
}

.gallery-page__hero-main,
.gallery-page__hero-stats {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgb(var(--color-primary-darker-rgb) / .07);
}

.gallery-page__hero-main {
  padding: 24px 26px;
}

.gallery-page__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .08);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-darker);
  font-size: .82rem;
  font-weight: 800;
}

.gallery-page__hero-main h2 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 900;
  color: var(--courses-brown, #3d2a1f);
}

.gallery-page__hero-main p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.9;
  font-size: .95rem;
}

.gallery-page__hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
  align-content: center;
}

.gallery-page__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 108px;
  padding: 14px 10px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .06), rgb(var(--color-primary-rgb) / .02));
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  text-align: center;
}

.gallery-page__stat i {
  font-size: 1.35rem;
  color: var(--color-primary);
}

.gallery-page__stat strong {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--courses-brown, #3d2a1f);
}

.gallery-page__stat span {
  font-size: .78rem;
  color: var(--color-text-secondary);
}

.gallery-page__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.gallery-page__feature {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 8px 24px rgb(var(--color-primary-darker-rgb) / .05);
}

.gallery-page__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary-darker);
  font-size: 1.15rem;
}

.gallery-page__feature h3 {
  margin: 0 0 6px;
  font-size: .98rem;
  font-weight: 900;
  color: var(--courses-brown, #3d2a1f);
}

.gallery-page__feature p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.gallery-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
}

.gallery-page__toolbar-label,
.gallery-page__toolbar-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--courses-brown, #3d2a1f);
}

.gallery-page__toolbar-hint {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.courses-page .courses-grid.gallery-page__panel {
  display: block;
  padding: 20px;
}

.courses-page .courses-grid.gallery-page__panel::before {
  display: none;
}

.gallery-page__panel .gallery-page__grid {
  width: 100%;
}

@media (max-width: 991.98px) {
  .gallery-page__hero {
    grid-template-columns: 1fr;
  }

  .gallery-page__features {
    grid-template-columns: 1fr;
  }

  .gallery-page__toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .gallery-page__hero-stats {
    grid-template-columns: 1fr;
  }

  .gallery-page__panel .gallery-page__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 575.98px) {
  .gallery-page__panel .gallery-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ============================================
   SITE INSTRUCTOR DETAIL PAGE
   ============================================ */

.id-page {
  padding-bottom: 64px;
}

.id-page__state {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgb(var(--color-primary-darker-rgb) / .06);
  padding: 56px 24px;
  margin-top: 24px;
  text-align: center;
}

.id-page__state i {
  font-size: 2.2rem;
  color: var(--color-primary);
}

.id-page__state h1 {
  margin: 16px 0 8px;
  font-size: 1.35rem;
  color: var(--color-text);
}

.id-page__state p {
  margin: 0;
  color: var(--color-text-secondary);
}

.id-page__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.id-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 20px;
  font-size: .86rem;
  color: var(--color-text-muted);
}

.id-page__breadcrumb a {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 700;
}

.id-page__breadcrumb a:hover {
  color: var(--color-primary-darker);
}

.id-hero {
  position: relative;
  display: grid;
  grid-template-columns: min(42%, 380px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  min-height: 380px;
  border-radius: 22px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: #fff;
  box-shadow: 0 16px 35px rgb(var(--color-primary-darker-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .85);
  margin-bottom: 22px;
}

.id-hero__media {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .12), rgb(var(--color-primary-rgb) / .04));
  border-inline-end: 1px solid rgb(var(--color-primary-rgb) / .12);
}

.id-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center top;
}

.id-hero__media-accent {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--color-primary-rgb) / .15), rgb(var(--color-primary-rgb) / .75), rgb(var(--color-primary-rgb) / .15));
}

.id-hero__content {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 28px 32px;
  background:
    radial-gradient(circle at 12% 18%, rgb(var(--color-primary-rgb) / .08), transparent 34%),
    linear-gradient(180deg, #fff 0%, rgb(var(--color-primary-rgb) / .03) 100%);
}

.id-hero__content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--color-primary-rgb) / .08) .6px, transparent .6px);
  background-size: 12px 12px;
  opacity: .35;
}

.id-hero__content-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  text-align: right;
}

.id-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .1);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  font-size: .76rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.id-hero__name {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-primary-darker);
}

.id-hero__title {
  margin: 10px 0 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.id-hero__excerpt {
  margin: 14px 0 0;
  font-size: .88rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.id-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.id-hero__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  box-shadow: 0 6px 18px rgb(var(--color-primary-darker-rgb) / .05);
}

.id-hero__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary);
  flex-shrink: 0;
}

.id-hero__stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.id-hero__stat-text strong {
  font-size: 1rem;
  font-weight: 900;
  color: var(--color-primary-darker);
  line-height: 1.2;
}

.id-hero__stat-text small {
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.id-hero__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.id-hero__skill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .1);
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 700;
}

.id-panel {
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgb(var(--color-primary-darker-rgb) / .06);
  overflow: hidden;
  margin-bottom: 22px;
}

.id-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .1);
  background: linear-gradient(180deg, #fff 0%, rgb(var(--color-primary-rgb) / .04) 100%);
}

.id-panel__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--color-primary-darker);
}

.id-panel__head p {
  margin: 4px 0 0;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.id-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.id-panel__body {
  padding: 20px 22px 24px;
}

.id-courses {
  margin-bottom: 22px;
}

.id-courses__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.id-courses__head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-primary-darker);
}

.id-courses__head p {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--color-text-muted);
}

.id-courses__count {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-dark);
  font-size: .8rem;
  font-weight: 800;
}

.id-courses__grid {
  margin-bottom: 0;
}

.id-courses--past .id-courses__head h2,
.id-courses--past .id-courses__count {
  color: var(--color-text-secondary);
}

@media (max-width: 991.98px) {
  .id-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .id-hero__media,
  .id-hero__content {
    grid-column: 1;
  }

  .id-hero__media {
    grid-row: 1;
    min-height: 300px;
    border-inline-end: 0;
    border-bottom: 1px solid rgb(var(--color-primary-rgb) / .12);
  }

  .id-hero__media img {
    min-height: 300px;
  }

  .id-hero__content {
    grid-row: 2;
    padding: 20px 18px 22px;
  }

  .id-hero__stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .id-page {
    padding-bottom: 48px;
  }

  .id-hero {
    border-radius: 18px;
  }

  .id-hero__media,
  .id-hero__media img {
    min-height: 260px;
  }

  .id-hero__content {
    padding: 18px 16px 20px;
  }

  .id-hero__stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .id-courses__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .courses-page .id-courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }
}

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

/* Instructor profile refresh */
.id-page {
  --id-ink: #24372b;
  --id-ink-soft: #607064;
  --id-cream: #fbf7ee;
  padding-bottom: 72px;
}

.id-page__breadcrumb {
  margin: 14px 0 16px;
  padding-inline: 4px;
  font-size: .8rem;
}

.id-hero {
  grid-template-columns: minmax(300px, 40%) minmax(0, 1fr);
  min-height: 430px;
  margin-bottom: 30px;
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 8%, rgb(233 198 124 / .2), transparent 28%),
    linear-gradient(135deg, #314936 0%, #24372b 58%, #1d2d24 100%);
  box-shadow:
    0 24px 55px rgb(30 49 38 / .2),
    inset 0 1px 0 rgb(255 255 255 / .14);
}

.id-hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(251 247 238 / .12) .7px, transparent .7px);
  background-size: 14px 14px;
  content: "";
  opacity: .45;
  pointer-events: none;
}

.id-hero__media {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  padding: 24px;
  border: 0;
  background:
    radial-gradient(circle at 35% 22%, rgb(233 198 124 / .22), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / .06), transparent);
}

.id-hero__media img {
  min-height: 0;
  height: min(380px, 100%);
  border: 8px solid rgb(251 247 238 / .92);
  border-radius: 26px;
  object-fit: cover;
  object-position: center top;
  box-shadow:
    0 20px 35px rgb(15 27 20 / .3),
    0 0 0 1px rgb(233 198 124 / .55);
  transform: rotate(-2deg);
  transition: transform .35s ease;
}

.id-hero__media:hover img {
  transform: rotate(0) scale(1.025);
}

.id-hero__media-badge {
  position: absolute;
  right: 34px;
  bottom: 38px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgb(251 247 238 / .45);
  border-radius: 999px;
  background: rgb(36 55 43 / .86);
  color: #fbf7ee;
  font-size: .75rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgb(15 27 20 / .25);
}

.id-hero__media-badge i {
  color: #e9c67c;
}

.id-hero__media-accent {
  right: 24px;
  left: 24px;
  bottom: 20px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #e9c67c, transparent);
}

.id-hero__content {
  z-index: 1;
  padding: 38px clamp(26px, 4vw, 58px);
  background:
    radial-gradient(circle at 92% 10%, rgb(233 198 124 / .16), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, var(--id-cream) 100%);
}

.id-hero__content::before {
  background-image: radial-gradient(rgb(36 55 43 / .08) .7px, transparent .7px);
  opacity: .28;
}

.id-hero__content-inner {
  max-width: 700px;
}

.id-hero__eyebrow {
  margin-bottom: 14px;
  background: rgb(36 55 43 / .1);
  border-color: rgb(36 55 43 / .18);
  color: var(--id-ink);
}

.id-hero__name {
  color: var(--id-ink);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  letter-spacing: -.04em;
}

.id-hero__title {
  color: #a4732d;
  font-size: 1rem;
}

.id-hero__excerpt {
  max-width: 610px;
  color: var(--id-ink-soft);
  font-size: .95rem;
}

.id-hero__stats {
  gap: 10px;
  margin-top: 24px;
}

.id-hero__stat {
  padding: 11px 12px;
  border-color: rgb(36 55 43 / .14);
  border-radius: 15px;
  background: rgb(255 255 255 / .76);
  box-shadow: 0 8px 20px rgb(36 55 43 / .06);
}

.id-hero__stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgb(36 55 43 / .1);
  color: var(--id-ink);
}

.id-hero__stat-text strong {
  color: var(--id-ink);
}

.id-hero__skill {
  padding: 6px 11px;
  background: rgb(36 55 43 / .08);
  border-color: rgb(36 55 43 / .14);
  color: var(--id-ink);
}

.id-panel {
  margin-bottom: 26px;
  border-color: rgb(36 55 43 / .13);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgb(36 55 43 / .07);
}

.id-panel__head {
  padding: 18px 22px;
  background: linear-gradient(180deg, #fff 0%, rgb(36 55 43 / .045) 100%);
}

.id-panel__icon {
  background: rgb(36 55 43 / .1);
  color: var(--id-ink);
}

.id-courses {
  margin-bottom: 30px;
}

.id-courses__head {
  margin-bottom: 14px;
  padding-inline: 4px;
}

.id-courses__head h2 {
  color: var(--id-ink);
  font-size: 1.3rem;
}

.id-courses__count {
  background: rgb(36 55 43 / .08);
  border-color: rgb(36 55 43 / .14);
  color: var(--id-ink);
}

.courses-page .id-courses__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
}

@media (max-width: 1399.98px) and (min-width: 992px) {
  .courses-page .id-courses__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .id-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .id-hero__media {
    min-height: 340px;
    padding: 20px;
  }

  .id-hero__media img {
    height: 300px;
  }

  .id-hero__media-badge {
    right: 28px;
    bottom: 30px;
  }

  .id-hero__content {
    padding: 28px 24px 30px;
  }
}

@media (max-width: 767.98px) {
  .id-page {
    padding-bottom: 48px;
  }

  .id-page__breadcrumb {
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .id-hero {
    border-radius: 22px;
    margin-bottom: 20px;
  }

  .id-hero__media {
    min-height: 280px;
    padding: 16px;
  }

  .id-hero__media img {
    width: min(100%, 270px);
    height: 245px;
    border-width: 6px;
    border-radius: 20px;
  }

  .id-hero__media-badge {
    right: 22px;
    bottom: 22px;
    padding: 7px 10px;
    font-size: .68rem;
  }

  .id-hero__content {
    padding: 22px 17px 24px;
  }

  .id-hero__name {
    font-size: 1.7rem;
  }

  .id-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .id-hero__stat {
    flex-direction: column;
    gap: 5px;
    padding: 9px 5px;
    text-align: center;
  }

  .id-hero__stat-text strong {
    font-size: .9rem;
  }

  .id-hero__stat-text small {
    font-size: .62rem;
  }

  .id-panel {
    margin-bottom: 18px;
    border-radius: 18px;
  }

  .id-panel__head {
    padding: 15px 16px;
  }

  .id-panel__body {
    padding: 16px;
  }

  .id-courses__head {
    align-items: center;
  }

  .courses-page .id-courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }
}

/* ============================================
   SITE CART PAGE
   ============================================ */

.cart-page {
  padding: 36px 0 64px;
  background:
    radial-gradient(circle at top right, rgba(242, 164, 90, .08), transparent 28%),
    linear-gradient(180deg, var(--color-surface) 0%, #fff 42%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.cart-page__header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.cart-page__header-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgb(var(--color-accent-rgb) / .28);
  font-size: 1.6rem;
}

.cart-page__header h1 {
  margin: 0 0 6px;
  font-size: 1.9rem;
  font-weight: 900;
  color: #181818;
}

.cart-page__header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .95rem;
}

.cart-page__state,
.cart-page__empty {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.cart-page__state i,
.cart-page__empty-icon i {
  font-size: 2rem;
  color: var(--color-accent);
}

.cart-page__state p,
.cart-page__empty p {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
}

.cart-page__state--error i {
  color: #dc3545;
}

.cart-page__empty-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 164, 90, .1);
}

.cart-page__empty h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
}

.cart-page__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / .24);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cart-page__empty-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgb(var(--color-accent-rgb) / .3);
}

.cart-table-wrap {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(69, 44, 15, .07);
  overflow: hidden;
}

.cart-table-scroll {
  overflow-x: auto;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.cart-table thead {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
}

.cart-table th {
  padding: 16px 18px;
  color: rgba(255, 255, 255, .92);
  font-size: .86rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.cart-table td {
  padding: 18px;
  border-bottom: 1px solid #f3eadb;
  vertical-align: middle;
  color: var(--color-text);
  font-size: .92rem;
}

.cart-table tbody tr {
  transition: background .2s ease;
}

.cart-table tbody tr:hover {
  background: var(--color-surface);
}

.cart-table tbody tr:last-child td {
  border-bottom: none;
}

.cart-table__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(242, 164, 90, .12);
  color: #D99A28;
  font-weight: 900;
}

.cart-table__course {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.cart-table__course img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .25);
  flex-shrink: 0;
}

.cart-table__course strong {
  font-size: .95rem;
  line-height: 1.6;
}

.cart-table__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(242, 164, 90, .1);
  color: #a86408;
  font-size: .82rem;
  font-weight: 800;
}

.cart-table__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-table__price-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: .82rem;
}

.cart-table__price-new {
  color: #4F7D4A;
  font-weight: 900;
}

.cart-table__discount {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 53, 69, .1);
  color: #c62828;
  font-size: .74rem;
  font-weight: 800;
}

.cart-table__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-primary-rgb) / .45);
  color: var(--color-text);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.cart-table__action:hover {
  color: #fff;
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  transform: translateY(-1px);
}

.cart-table__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cart-table__action--primary {
  color: #fff;
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 6px 16px rgb(var(--color-accent-rgb) / .22);
}

.cart-table__action--primary:hover {
  box-shadow: 0 10px 22px rgb(var(--color-accent-rgb) / .3);
}

.cart-table__notice {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.5;
}

.cart-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface);
  border-top: 1px solid #f0e6d6;
  color: var(--color-text-secondary);
  font-size: .86rem;
  font-weight: 700;
}

.cart-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid #f0e6d6;
  background: var(--color-surface);
}

.cart-pagination__btn,
.cart-pagination__page {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-primary-rgb) / .35);
  background: var(--color-surface);
  color: #444;
  font-size: .86rem;
  font-weight: 800;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cart-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}

.cart-pagination__btn:not(:disabled):hover,
.cart-pagination__page:not(.is-active):hover {
  border-color: var(--color-accent);
  color: #D99A28;
  background: var(--color-surface);
}

.cart-pagination__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.cart-pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.cart-pagination__page {
  width: 40px;
  padding: 0;
}

.cart-pagination__page.is-active {
  color: #fff;
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 8px 18px rgb(var(--color-accent-rgb) / .24);
}

@media (max-width: 991.98px) {
  .cart-page {
    padding-top: 24px;
    min-height: calc(100vh - 68px);
  }

  .cart-page__header {
    align-items: flex-start;
  }

  .cart-table {
    min-width: 100%;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table tbody tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #f3eadb;
  }

  .cart-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
  }

  .cart-table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
  }

  .cart-table__course {
    flex-direction: column;
    align-items: flex-end;
    text-align: left;
  }

  .cart-table__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-table__actions {
    align-items: flex-end;
    width: 100%;
  }
}

/* ============================================
   SITE ENROLL CHECKOUT PAGE
   ============================================ */

.enroll-page {
  padding: 32px 0 72px;
  background:
    radial-gradient(circle at top right, rgba(242, 164, 90, .08), transparent 28%),
    linear-gradient(180deg, var(--color-surface) 0%, #fff 40%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.enroll-page__state {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.enroll-page__state i {
  font-size: 2rem;
  color: var(--color-accent);
}

.enroll-page__state--error i {
  color: #dc3545;
}

.enroll-page__state p {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
}

.enroll-page__back-link,
.enroll-summary__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
}

.enroll-page__back-link:hover,
.enroll-summary__back:hover {
  color: var(--color-accent);
}

.enroll-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--color-text-muted);
  font-size: .88rem;
  font-weight: 700;
}

.enroll-page__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.enroll-page__breadcrumb a:hover {
  color: var(--color-accent);
}

.enroll-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.enroll-page__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.enroll-course-card {
  display: flex;
  gap: 20px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(69, 44, 15, .07);
}

.enroll-course-card__image {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgb(var(--color-primary-rgb) / .25);
  flex-shrink: 0;
}

.enroll-course-card__body h1 {
  margin: 8px 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-muted);
}

.enroll-course-card__body h2 {
  margin: 0 0 10px;
  font-size: 1.55rem;
  font-weight: 900;
  color: #181818;
  line-height: 1.5;
}

.enroll-course-card__badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(242, 164, 90, .12);
  color: #a86408;
  font-size: .78rem;
  font-weight: 800;
}

.enroll-course-card__discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .82rem;
  font-weight: 800;
}

.enroll-panel {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  overflow: hidden;
}

.enroll-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid #f3eadb;
  background: linear-gradient(180deg, var(--color-surface), #fff);
}

.enroll-panel__step {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgb(var(--color-accent-rgb) / .24);
}

.enroll-panel__head h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 900;
}

.enroll-panel__head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .88rem;
}

.enroll-panel__empty {
  padding: 36px 22px;
  text-align: center;
  color: var(--color-text-secondary);
}

.enroll-panel__empty i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.enroll-class-list,
.enroll-plan-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
}

.enroll-class-card,
.enroll-plan-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.enroll-class-card input,
.enroll-plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.enroll-class-card__content,
.enroll-plan-card__content {
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 18px;
  padding: 18px;
  background: var(--color-surface);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.enroll-class-card:hover .enroll-class-card__content,
.enroll-plan-card:hover .enroll-plan-card__content {
  border-color: rgba(233, 146, 34, .55);
  box-shadow: 0 10px 24px rgba(69, 44, 15, .07);
}

.enroll-class-card.is-selected .enroll-class-card__content,
.enroll-plan-card.is-selected .enroll-plan-card__content {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 12px 28px rgb(var(--color-accent-rgb) / .14);
}

.enroll-class-card.is-disabled .enroll-class-card__content {
  opacity: .82;
}

.enroll-class-card__radio,
.enroll-plan-card__radio {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgb(var(--color-primary-rgb) / .55);
  background: var(--color-surface);
}

.enroll-class-card.is-selected .enroll-class-card__radio,
.enroll-plan-card.is-selected .enroll-plan-card__radio {
  border-color: var(--color-accent);
  background: radial-gradient(circle at center, var(--color-accent) 0 6px, #fff 6px 100%);
}

.enroll-class-card__content,
.enroll-plan-card__content {
  padding-right: 18px;
  padding-left: 52px;
}

.enroll-class-card__top,
.enroll-plan-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.enroll-class-card__top strong,
.enroll-plan-card__top strong {
  font-size: 1rem;
  font-weight: 900;
  color: #222;
}

.enroll-class-card__selected-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(25, 135, 84, .12);
  color: #4F7D4A;
  font-size: .74rem;
  font-weight: 800;
}

.enroll-class-card__meta,
.enroll-class-card__register {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--color-text-secondary);
  font-size: .84rem;
  margin-bottom: 10px;
}

.enroll-class-card__meta span,
.enroll-class-card__register span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.enroll-class-card__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 800;
}

.enroll-class-card__status.is-open {
  background: rgba(25, 135, 84, .08);
  color: #4F7D4A;
}

.enroll-class-card__status.is-closed {
  background: rgba(220, 53, 69, .08);
  color: #c62828;
}

.enroll-plan-card__type {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.enroll-plan-card__price {
  text-align: left;
}

.enroll-plan-card__old {
  display: block;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: .82rem;
}

.enroll-plan-card__new {
  display: block;
  color: #4F7D4A;
  font-size: 1.05rem;
  font-weight: 900;
}

.enroll-installments {
  margin-top: 14px;
  border-top: 1px dashed rgb(var(--color-primary-rgb) / .25);
  padding-top: 14px;
}

.enroll-installments__head {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: .82rem;
  font-weight: 800;
}

.enroll-installments__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enroll-installment {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid #f0e6d6;
  font-size: .84rem;
}

.enroll-installment__order {
  font-weight: 900;
  color: #444;
}

.enroll-installment__due {
  color: var(--color-text-secondary);
}

.enroll-installment__amount {
  font-weight: 900;
  color: #4F7D4A;
  white-space: nowrap;
}

.enroll-installment__amount s {
  color: #aaa;
  margin-left: 6px;
  font-weight: 700;
}

.enroll-summary {
  position: sticky;
  top: 92px;
}

.enroll-summary__card {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(69, 44, 15, .08);
  padding: 22px;
}

.enroll-summary__card h3 {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 900;
}

.enroll-summary__rows {
  margin: 0;
}

.enroll-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0e6d6;
}

.enroll-summary__row dt {
  color: var(--color-text-muted);
  font-size: .84rem;
  font-weight: 700;
}

.enroll-summary__row dd {
  margin: 0;
  text-align: left;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 800;
}

.enroll-summary__row--total dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.enroll-summary__old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: .82rem;
  font-weight: 700;
}

.enroll-summary__total {
  color: #4F7D4A;
  font-size: 1.1rem;
  font-weight: 900;
}

.enroll-summary__divider {
  height: 1px;
  background: #f0e6d6;
  margin: 8px 0;
}

.enroll-summary__installments {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid #f0e6d6;
}

.enroll-summary__installments strong {
  display: block;
  margin-bottom: 10px;
  font-size: .88rem;
}

.enroll-summary__installment {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: .84rem;
  color: #555;
  font-weight: 700;
}

.enroll-summary__alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .84rem;
  font-weight: 700;
}

.enroll-summary__pay {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / .28);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.enroll-summary__pay:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgb(var(--color-accent-rgb) / .34);
}

.enroll-summary__pay:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.enroll-summary__back {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 991.98px) {
  .enroll-page {
    padding-top: 22px;
    min-height: calc(100vh - 68px);
  }

  .enroll-page__layout {
    grid-template-columns: 1fr;
  }

  .enroll-summary {
    position: static;
  }

  .enroll-course-card {
    flex-direction: column;
  }

  .enroll-course-card__image {
    width: 100%;
    height: 200px;
  }

  .enroll-class-card__top,
  .enroll-plan-card__top {
    flex-direction: column;
  }

  .enroll-installment {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================
   SITE INVOICE PAGES
   ============================================ */

.invoice-page,
.invoice-payments-page {
  padding: 32px 0 72px;
  background:
    radial-gradient(circle at top right, rgba(242, 164, 90, .08), transparent 28%),
    linear-gradient(180deg, var(--color-surface) 0%, #fff 40%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.invoice-page__state {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.invoice-page__state i {
  font-size: 2rem;
  color: var(--color-accent);
}

.invoice-page__state--error i {
  color: #dc3545;
}

.invoice-page__state p {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
}

.invoice-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 22px;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  box-shadow: 0 12px 32px rgba(69, 44, 15, .07);
}

.invoice-page__header-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-page__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  color: #fff;
  font-size: 1.6rem;
}

.invoice-page__label {
  display: block;
  color: var(--color-text-muted);
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.invoice-page__header h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 900;
}

.invoice-page__header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .9rem;
}

.invoice-page__status {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  white-space: nowrap;
}

.invoice-page__status.is-paid {
  background: rgba(25, 135, 84, .12);
  color: #4F7D4A;
}

.invoice-page__status.is-partial {
  background: rgba(242, 164, 90, .14);
  color: #D99A28;
}

.invoice-page__status.is-pending {
  background: rgba(220, 53, 69, .1);
  color: #c62828;
}

.invoice-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.invoice-page__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.invoice-card {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  padding: 22px;
}

.invoice-card h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 900;
}

.invoice-card__rows {
  margin: 0;
}

.invoice-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed #f0e6d6;
}

.invoice-card__row:last-child {
  border-bottom: none;
}

.invoice-card__row dt {
  color: var(--color-text-muted);
  font-size: .86rem;
  font-weight: 700;
}

.invoice-card__row dd {
  margin: 0;
  text-align: left;
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 800;
}

.invoice-card__row--discount dd {
  color: #c62828;
}

.invoice-card__row--total {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid #f0e6d6;
}

.invoice-card__row--total dd {
  color: #4F7D4A;
  font-size: 1.05rem;
  font-weight: 900;
}

.invoice-card__row dd.is-paid {
  color: #4F7D4A;
}

.invoice-card__row dd.is-remaining {
  color: #D99A28;
}

.invoice-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: .86rem;
  font-weight: 700;
}

.invoice-aside-card {
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  padding: 20px;
  margin-bottom: 16px;
}

.invoice-aside-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 900;
}

.invoice-aside-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / .24);
  transition: transform .25s ease, box-shadow .25s ease;
}

.invoice-aside-card__btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgb(var(--color-accent-rgb) / .3);
}

.invoice-aside-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
}

.invoice-aside-card__link:hover {
  color: var(--color-accent);
}

.invoice-aside-card--success {
  text-align: center;
  background: rgba(25, 135, 84, .06);
  border-color: rgba(25, 135, 84, .22);
}

.invoice-aside-card--success i {
  font-size: 2rem;
  color: #4F7D4A;
  margin-bottom: 8px;
}

.invoice-aside-card--success strong {
  display: block;
  margin-bottom: 8px;
  color: #4F7D4A;
}

.invoice-aside-card--success p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .86rem;
  line-height: 1.7;
}

.invoice-payments-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--color-text-muted);
  font-size: .88rem;
  font-weight: 700;
}

.invoice-payments-page__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.invoice-payments-page__breadcrumb a:hover {
  color: var(--color-accent);
}

.invoice-payments-page__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.invoice-payments-page__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / .24);
}

.invoice-payments-page__header h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 900;
}

.invoice-payments-page__header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .9rem;
}

.invoice-payment-status {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}

.invoice-payment-status.is-paid {
  background: rgba(25, 135, 84, .12);
  color: #4F7D4A;
}

.invoice-payment-status.is-pending {
  background: rgba(242, 164, 90, .14);
  color: #D99A28;
}

@media (max-width: 991.98px) {
  .invoice-page,
  .invoice-payments-page {
    padding-top: 22px;
    min-height: calc(100vh - 68px);
  }

  .invoice-page__header {
    flex-direction: column;
  }

  .invoice-page__layout {
    grid-template-columns: 1fr;
  }

  .invoice-payments-table {
    min-width: 100%;
  }
}

/* ============================================
   ENROLL PROFILE MODAL
   ============================================ */

.enroll-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.enroll-profile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 6, .48);
  backdrop-filter: blur(2px);
}

.enroll-profile-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid rgb(var(--color-primary-rgb) / .28);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(45, 48, 42, .18);
}

.enroll-profile-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.35rem 1rem;
  border-bottom: 1px solid #f0e6d6;
}

.enroll-profile-modal__head h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-text);
}

.enroll-profile-modal__head p {
  margin: 0;
  font-size: .86rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.enroll-profile-modal__close {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e8dcc8;
  border-radius: 50%;
  background: #fff;
  color: #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.enroll-profile-modal__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 2.5rem 1.35rem;
  color: var(--color-text-muted);
  font-weight: 700;
}

.enroll-profile-modal__body {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1.25rem;
}

.enroll-profile-modal__field label {
  display: block;
  margin-bottom: .45rem;
  font-size: .86rem;
  font-weight: 800;
  color: var(--color-text);
}

.enroll-profile-modal__required {
  color: #c62828;
}

.enroll-profile-modal__input,
.enroll-profile-modal__textarea {
  width: 100%;
  border: 1px solid #e8dcc8;
  border-radius: 12px;
  background: #fff;
  padding: .72rem .85rem;
  font-size: .92rem;
  color: var(--color-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.enroll-profile-modal__textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.8;
}

.enroll-profile-modal__input:focus,
.enroll-profile-modal__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .16);
}

.enroll-profile-modal__error,
.enroll-profile-modal__field .validation-message {
  display: block;
  margin-top: .35rem;
  color: #c62828;
  font-size: .78rem;
  font-weight: 700;
}

.enroll-profile-modal__alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .84rem;
  font-weight: 700;
}

.enroll-profile-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  padding: 0 1.35rem 1.35rem;
}

.enroll-profile-modal__btn {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 12px;
  border: none;
  font-size: .9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  cursor: pointer;
}

.enroll-profile-modal__btn--ghost {
  background: #fff;
  border: 1px solid #e8dcc8;
  color: #555;
}

.enroll-profile-modal__btn--primary {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  color: #fff;
}

.enroll-profile-modal__btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* ============================================
   Contact page
   ============================================ */
.contact-page {
  padding: 32px 0 56px;
}

.contact-page__stack {
  display: grid;
  gap: 24px;
}

.contact-page__header {
  margin-bottom: 24px;
}

.contact-page__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  color: var(--color-primary-dark);
}

.contact-page__state i {
  font-size: 1.6rem;
  color: var(--color-primary);
}

.contact-page__card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgb(var(--color-primary-darker-rgb) / .08);
  overflow: hidden;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
}

.contact-page__info-col {
  padding: 28px 32px;
  display: flex;
  align-items: center;
}

.contact-page__form-wrap {
  padding: 32px 36px 36px;
}

.contact-page__title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--color-primary-darker);
  line-height: 1.5;
}

.contact-page__form-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.contact-page__form-subtitle {
  margin: 0 0 24px;
  color: rgb(var(--color-primary-darker-rgb) / .68);
  line-height: 1.8;
}

.contact-page__title-line {
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0c040, #f5d76e);
}

.contact-page__info {
  display: grid;
  gap: 20px;
  width: 100%;
}

.contact-page__info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-page__info-item > div {
  flex: 1;
  min-width: 0;
}

.contact-page__info-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary-dark);
  border: 1px solid rgb(var(--color-primary-rgb) / .16);
  box-shadow: 0 6px 16px rgb(var(--color-primary-darker-rgb) / .06);
  flex-shrink: 0;
}

.contact-page__info-icon i {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.contact-page__info-label {
  display: block;
  font-size: .78rem;
  color: rgb(var(--color-primary-darker-rgb) / .62);
  margin-bottom: 4px;
}

.contact-page__info-item p {
  margin: 0;
  color: var(--color-primary-darker);
  line-height: 1.8;
}

.contact-page__info-item a {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 600;
}

.contact-page__info-item a:hover {
  color: var(--color-primary-darker);
  text-decoration: underline;
}

.contact-page__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.contact-page__form {
  display: block;
}

.contact-page__field {
  display: grid;
  gap: 8px;
}

.contact-page__field label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-primary-darker);
}

.contact-page__required {
  color: #c0392b;
}

.contact-page__input,
.contact-page__textarea {
  width: 100%;
  border: 1px solid rgb(var(--color-primary-rgb) / .22);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--color-primary-darker);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-page__input:focus,
.contact-page__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .14);
}

.contact-page__textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-page__field .validation-message {
  color: #c0392b;
  font-size: .82rem;
}

.contact-page__submit {
  width: 100%;
  max-width: 280px;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary-darker);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.contact-page__submit:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.contact-page__submit:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.contact-page__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: .92rem;
  line-height: 1.7;
}

.contact-page__alert p {
  margin: 0;
}

.contact-page__alert--success {
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-darker);
  border: 1px solid rgb(var(--color-primary-rgb) / .24);
}

.contact-page__alert--error {
  background: #fdecea;
  color: #922b21;
  border: 1px solid #f5c6cb;
}

.contact-page__map-col {
  min-height: 320px;
}

.contact-page__map {
  width: 100%;
  height: 100%;
  min-height: 320px;
  z-index: 1;
}

.contact-page__map .leaflet-control-zoom a {
  color: var(--color-primary-darker);
}

@media (min-width: 992px) {
  .contact-page__info-map-layout {
    min-height: 360px;
  }

  .contact-page__map-col,
  .contact-page__map {
    min-height: 360px;
    height: 360px;
  }
}

@media (max-width: 991.98px) {
  .contact-page {
    padding: 20px 0 40px;
  }

  .contact-page__info-col,
  .contact-page__form-wrap {
    padding: 24px 20px;
  }

  .contact-page__map-col,
  .contact-page__map {
    min-height: 280px;
    height: 280px;
  }

  .contact-page__submit {
    max-width: none;
  }
}

/* ============================================
   TRAINING CALENDAR PAGE
   ============================================ */

.training-calendar-page {
  padding-block: 2.5rem 4rem;
}

.training-calendar-page__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 320px;
  color: var(--color-text-secondary);
  text-align: center;
}

.training-calendar-page__state i {
  font-size: 2rem;
  color: var(--color-primary);
}

.training-calendar-page__state--error i {
  color: var(--color-danger);
}

.training-calendar-page__hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.training-calendar-page__hero-copy {
  flex: 1 1 auto;
}

.training-calendar-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 700;
}

.training-calendar-page__title {
  margin: .85rem 0 .45rem;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 800;
  color: var(--color-text);
}

.training-calendar-page__subtitle {
  margin: 0;
  max-width: 38rem;
  color: var(--color-text-secondary);
  line-height: 1.85;
}

.training-calendar-page__now-card {
  flex: 0 0 auto;
  min-width: min(100%, 17rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: 1rem 1.15rem;
  border-radius: 18px;
  border: 1px solid rgb(var(--color-primary-rgb) / .18);
  background:
    linear-gradient(145deg, rgb(var(--color-surface-rgb) / .98), rgb(var(--color-primary-rgb) / .08));
  box-shadow: 0 12px 32px rgb(var(--color-primary-darker-rgb) / .1);
}

.training-calendar-page__now-label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.training-calendar-page__now-card strong {
  font-size: .92rem;
  font-weight: 800;
  color: var(--color-primary-darker);
  line-height: 1.6;
}

.training-calendar-page__calendar-card,
.training-calendar-page__table-card {
  border-radius: 22px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background: rgb(var(--color-surface-rgb) / .94);
  box-shadow: 0 18px 48px rgb(var(--color-primary-darker-rgb) / .08);
}

.training-calendar-page__calendar-card {
  padding: 1.35rem 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
}

.training-calendar-page__calendar-toolbar {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.training-calendar-page__month-title {
  margin: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.training-calendar-page__nav-btn,
.training-calendar-page__nav-spacer {
  width: 2.5rem;
  height: 2.5rem;
}

.training-calendar-page__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-primary-rgb) / .2);
  border-radius: 12px;
  background: var(--color-hero-surface);
  color: var(--color-primary-dark);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.training-calendar-page__nav-btn:hover {
  transform: translateY(-1px);
  background: rgb(var(--color-primary-rgb) / .12);
  box-shadow: 0 8px 18px rgb(var(--color-primary-darker-rgb) / .12);
}

.training-calendar-page__nav-btn--disabled {
  opacity: .35;
  pointer-events: none;
  box-shadow: none;
}

.training-calendar-page__mobile-toolbar {
  padding: 1rem 1rem .25rem;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .08);
}

.training-calendar-page__mobile-toolbar .training-calendar-page__calendar-toolbar {
  margin-bottom: 0;
}

.training-calendar-page__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.training-calendar-page__legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.training-calendar-page__dot {
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  display: inline-block;
}

.training-calendar-page__dot--enrollable {
  background: linear-gradient(135deg, #5f9a58, var(--color-success));
}

.training-calendar-page__dot--full {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
}

.training-calendar-page__dot--past {
  background: linear-gradient(135deg, #b8bfb3, #8a9285);
}

.training-calendar-page__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: .45rem;
}

.training-calendar-page__weekdays span {
  text-align: center;
  font-size: .76rem;
  font-weight: 800;
  color: var(--color-text-muted);
  padding-block: .35rem;
}

.training-calendar-page__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
}

.training-calendar-page__cell {
  min-height: calc(3.2rem + (var(--tc-max-lanes, 1) * 1.55rem));
  padding: .45rem .4rem .5rem;
  border-radius: 14px;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  background: linear-gradient(180deg, #fff, var(--color-hero-surface));
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.training-calendar-page__cell--blank {
  opacity: .35;
  background: transparent;
  border-style: dashed;
  min-height: auto;
}

.training-calendar-page__cell--today {
  border-color: rgb(var(--color-primary-rgb) / .45);
  box-shadow: inset 0 0 0 1px rgb(var(--color-primary-rgb) / .18);
}

.training-calendar-page__cell--today .training-calendar-page__day-num {
  background: var(--color-primary-dark);
  color: #fff;
}

.training-calendar-page__day-num {
  align-self: flex-start;
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--color-primary-darker);
  background: rgb(var(--color-primary-rgb) / .1);
}

.training-calendar-page__bars {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--tc-max-lanes, 1) * 1.55rem);
}

.training-calendar-page__bar {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(var(--tc-lane, 0) * 1.55rem);
  display: block;
  padding: .18rem .42rem;
  border-radius: 8px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.training-calendar-page__bar:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  color: #fff;
}

.training-calendar-page__bar--enrollable {
  background: linear-gradient(135deg, #689f62, var(--color-success));
  box-shadow: 0 4px 12px rgb(var(--color-success-rgb) / .28);
}

.training-calendar-page__bar--full {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  box-shadow: 0 4px 12px rgb(var(--color-accent-rgb) / .24);
}

.training-calendar-page__bar--past {
  background: linear-gradient(135deg, #adb5a8, #868f82);
  box-shadow: none;
}

.training-calendar-page__table-card {
  overflow: hidden;
}

.training-calendar-page__table-head {
  padding: 1.35rem 1.35rem .85rem;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .1);
}

.training-calendar-page__table-head h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
}

.training-calendar-page__table-head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .86rem;
}

.training-calendar-page__table-wrap {
  overflow-x: auto;
}

.training-calendar-page__table {
  width: 100%;
  border-collapse: collapse;
}

.training-calendar-page__table th,
.training-calendar-page__table td {
  padding: .95rem 1.15rem;
  text-align: right;
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / .08);
}

.training-calendar-page__table th {
  font-size: .78rem;
  font-weight: 800;
  color: var(--color-text-muted);
  background: rgb(var(--color-primary-rgb) / .05);
}

.training-calendar-page__table tbody tr:hover {
  background: rgb(var(--color-primary-rgb) / .04);
}

.training-calendar-page__course-link {
  color: var(--color-primary-darker);
  font-weight: 800;
  text-decoration: none;
}

.training-calendar-page__course-link:hover {
  color: var(--color-accent-dark);
}

.training-calendar-page__register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 6.5rem;
  min-height: 2.2rem;
  padding: .4rem .85rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgb(var(--color-accent-rgb) / .24);
  transition: transform .2s ease, box-shadow .2s ease;
}

.training-calendar-page__register-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgb(var(--color-accent-rgb) / .3);
}

.training-calendar-page__register-btn:disabled {
  opacity: .75;
  cursor: wait;
}

.training-calendar-page__status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.2rem;
  padding: .35rem .75rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 800;
}

.training-calendar-page__status-badge--full {
  background: rgb(var(--color-accent-rgb) / .14);
  color: var(--color-accent-dark);
}

.training-calendar-page__status-badge--past {
  background: rgb(var(--color-primary-rgb) / .12);
  color: var(--color-text-muted);
}

.training-calendar-page__empty-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: 2.5rem 1rem;
  color: var(--color-text-secondary);
}

.training-calendar-page__empty-table i {
  font-size: 2rem;
  color: var(--color-primary);
}

.training-calendar-page__course-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: .85rem 1rem 1.15rem;
}

.training-calendar-page__course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1rem .95rem;
  border-radius: 18px;
  border: 1px solid rgb(var(--color-primary-rgb) / .14);
  background:
    linear-gradient(145deg, rgb(var(--color-surface-rgb) / .98), rgb(var(--color-primary-rgb) / .05));
  box-shadow: 0 10px 28px rgb(var(--color-primary-darker-rgb) / .08);
  overflow: hidden;
}

.training-calendar-page__course-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: var(--color-primary-light);
}

.training-calendar-page__course-card--enrollable::before {
  background: linear-gradient(180deg, #7cb075, var(--color-success));
}

.training-calendar-page__course-card--full::before {
  background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent-dark));
}

.training-calendar-page__course-card--past::before {
  background: linear-gradient(180deg, #b5bdb0, #8a9285);
}

.training-calendar-page__course-card-top {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}

.training-calendar-page__course-card-status-dot {
  flex: 0 0 auto;
  width: .72rem;
  height: .72rem;
  margin-top: .45rem;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .08);
}

.training-calendar-page__course-card-status-dot--enrollable {
  background: linear-gradient(135deg, #689f62, var(--color-success));
}

.training-calendar-page__course-card-status-dot--full {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
}

.training-calendar-page__course-card-status-dot--past {
  background: linear-gradient(135deg, #adb5a8, #868f82);
}

.training-calendar-page__course-card-title {
  flex: 1 1 auto;
  color: var(--color-text);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.7;
  text-decoration: none;
}

.training-calendar-page__course-card-title:hover {
  color: var(--color-primary-darker);
}

.training-calendar-page__course-card-date {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  padding: .38rem .72rem;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .08);
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 700;
}

.training-calendar-page__course-card-date i {
  color: var(--color-primary-dark);
  font-size: .88rem;
}

.training-calendar-page__course-card-action {
  display: flex;
  justify-content: flex-end;
  padding-top: .15rem;
}

.training-calendar-page__course-card-action .training-calendar-page__register-btn,
.training-calendar-page__course-card-action .training-calendar-page__status-badge {
  width: 100%;
  min-height: 2.55rem;
}

@media (max-width: 991.98px) {
  .training-calendar-page__hero {
    flex-direction: column;
  }

  .training-calendar-page__now-card {
    width: 100%;
  }

  .training-calendar-page__bar {
    font-size: .62rem;
  }
}

@media (max-width: 767.98px) {
  .training-calendar-page {
    padding-block: 1.25rem 5.75rem;
  }

  .training-calendar-page__hero {
    margin-bottom: 1rem;
  }

  .training-calendar-page__title {
    font-size: 1.45rem;
  }

  .training-calendar-page__subtitle {
    font-size: .88rem;
    line-height: 1.75;
  }

  .training-calendar-page__table-head {
    padding: 1rem 1rem .75rem;
  }

  .training-calendar-page__table-head h2 {
    font-size: 1.02rem;
  }

  .training-calendar-page__table-head p {
    font-size: .8rem;
    line-height: 1.7;
  }

  .training-calendar-page__mobile-toolbar .training-calendar-page__nav-btn,
  .training-calendar-page__mobile-toolbar .training-calendar-page__nav-btn--disabled {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 14px;
  }

  .training-calendar-page__mobile-toolbar .training-calendar-page__month-title {
    font-size: 1.08rem;
  }
}

/* Blog archive (WordPress layout) */
.blog-page {
  padding: 2rem 0 3rem;
}

.blog-page__header {
  margin-bottom: 1.5rem;
}

.blog-page__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.blog-page__state {
  display: grid;
  place-items: center;
  gap: .75rem;
  min-height: 240px;
  color: #777;
}

.blog-page__empty {
  color: #777;
  margin: 0;
}

.blog-archive.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 2rem;
  align-items: start;
}

.blog-main-loop {
  min-width: 0;
}

.blog-loop-view-grid.two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

.blog-post-card .post-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

.blog-post-card .post-thumbnail {
  margin: 0;
  overflow: hidden;
}

.blog-post-card .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-post-card .post-content {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.15rem 1.25rem 1.2rem;
  flex: 1;
}

.blog-post-card .post-meta {
  color: #8a8a8a;
  font-size: .84rem;
  line-height: 1.7;
}

.blog-post-card .post-meta i {
  color: var(--color-accent, #e67f22);
}

.blog-post-card .post-meta.post-category {
  margin: 0;
}

.blog-post-card .post-meta.post-category a {
  color: #999;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
}

.blog-post-card .post-meta.post-category a:hover {
  color: var(--color-accent, #e67f22);
}

.blog-post-card .entry-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.75;
}

.blog-post-card .entry-title a {
  color: #333;
  text-decoration: none;
}

.blog-post-card .entry-title a:hover {
  color: var(--color-accent, #e67f22);
}

.blog-post-card .the-excerpt {
  color: #666;
  font-size: .92rem;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-post-card .post-meta-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .85rem 1.15rem;
  margin-top: auto;
  padding-top: .35rem;
}

.blog-post-card .post-meta.author,
.blog-post-card .post-meta.date {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.blog-post-card .post-meta.date {
  color: var(--color-accent, #e67f22);
}

.blog-post-card .post-meta.author .author-name {
  color: #555;
  font-weight: 600;
}

ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

ul.page-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .65rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  color: #555;
  text-decoration: none;
  font-size: .92rem;
}

ul.page-numbers .page-numbers.current {
  background: var(--color-accent, #e67f22);
  border-color: var(--color-accent, #e67f22);
  color: #fff;
}

ul.page-numbers .page-numbers.next {
  min-width: 2.35rem;
}

.main-sidebar-holder {
  position: sticky;
  top: 1rem;
}

.sidebar-widgets-wrapper {
  display: grid;
  gap: 1.5rem;
}

.widget_search .sas_form {
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.widget_search .search-field {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: .75rem .85rem;
  font: inherit;
  color: #444;
  background: transparent;
}

.widget_search .search-field::placeholder {
  color: #999;
}

.widget_search .search-submit {
  width: 44px;
  border: 0;
  background: var(--color-accent, #e67f22);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.widget_categories {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1.1rem 1rem;
}

.widget_categories .widget-title {
  position: relative;
  margin: 0 0 .85rem;
  padding-right: .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
}

.widget_categories .widget-title:before {
  content: "";
  position: absolute;
  right: 0;
  top: .15rem;
  bottom: .15rem;
  width: 3px;
  border-radius: 2px;
  background: var(--color-primary, #78886E);
}

.widget_categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.widget_categories a {
  color: #555;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.7;
}

.widget_categories a:hover {
  color: var(--color-accent, #e67f22);
}

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

@media (max-width: 991px) {
  .blog-archive.has-sidebar {
    grid-template-columns: 1fr;
  }

  .main-sidebar-holder {
    position: static;
    order: 2;
  }

  .blog-main-loop {
    order: 1;
  }
}

@media (max-width: 767px) {
  .blog-loop-view-grid.two-columns {
    grid-template-columns: 1fr;
  }

  .blog-post-card .post-meta-footer {
    flex-wrap: wrap;
  }
}

.blog-loop-inner.post-single {
  min-width: 0;
}

.blog-loop-inner.post-single .post-inner {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
  padding: 2rem 2.1rem 2.35rem;
  overflow: hidden;
  min-width: 0;
}

.blog-loop-inner.post-single .entry-header {
  margin-bottom: 1.35rem;
}

.blog-loop-inner.post-single .entry-title {
  margin: 0 0 .85rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.7;
  color: #110c2d;
}

.blog-loop-inner.post-single .post-meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .55rem 1.15rem;
  color: #8a8a8a;
  font-size: .84rem;
  line-height: 1.7;
}

.blog-loop-inner.post-single .post-meta i {
  color: var(--color-accent, #e67f22);
}

.blog-loop-inner.post-single .post-meta.author .author-name,
.blog-loop-inner.post-single .post-meta.category a {
  color: #555;
  text-decoration: none;
}

.blog-loop-inner.post-single .post-meta.category a:hover {
  color: var(--color-accent, #e67f22);
}

.blog-loop-inner.post-single .post-meta.share_box {
  margin-left: 0;
  vertical-align: middle;
}

.blog-loop-inner.post-single .sharebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(230 127 34 / .12);
  color: var(--color-accent, #e67f22);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.blog-loop-inner.post-single .sharebtn i {
  font-size: 1.35rem;
  line-height: 1;
  pointer-events: none;
}

.blog-loop-inner.post-single .sharebtn:hover,
.blog-loop-inner.post-single .sharebtn:focus-visible {
  background: var(--color-accent, #e67f22);
  color: #fff;
  transform: scale(1.06);
}

.blog-loop-inner.post-single .sharebtn:hover i,
.blog-loop-inner.post-single .sharebtn:focus-visible i,
.blog-loop-inner.post-single .sharebtn.is-copied i {
  color: #fff;
}

.blog-loop-inner.post-single .sharebtn.is-copied {
  background: #2e7d32;
  color: #fff;
}

.blog-loop-inner.post-single .post-thumbnail {
  margin: 0 0 1.5rem;
  overflow: hidden;
}

.blog-loop-inner.post-single .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-loop-inner.post-single .entry-content {
  font-family: inherit;
  min-width: 0;
  overflow: hidden;
}

.blog-loop-inner.post-single .entry-content :where(*:not(script):not(style)) {
  font-family: inherit;
}

.blog-loop-inner.post-single .entry-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure, figcaption, a) {
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  text-align: revert;
  text-decoration: revert;
  text-transform: revert;
  margin-block: revert;
}

.blog-loop-inner.post-single .entry-content img,
.blog-loop-inner.post-single .entry-content video,
.blog-loop-inner.post-single .entry-content iframe,
.blog-loop-inner.post-single .entry-content figure,
.blog-loop-inner.post-single .entry-content table {
  max-width: 100% !important;
  height: auto;
}

.blog-loop-inner.post-single .entry-content figure {
  margin-inline: 0;
}

.blog-loop-inner.post-single .entry-content a {
  transition: none;
}

.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0;
  padding: 30px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px #12131214;
}

.post-nav-btn {
  max-width: 50%;
  min-width: 0;
}

.post-nav-btn.next-btn {
  text-align: left;
}

.post-nav-link {
  display: block;
  position: relative;
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 10px;
  color: inherit;
  text-decoration: none;
}

.post-nav-link span {
  display: block;
  color: #adb5bd;
  font-size: .82rem;
}

.post-nav-link strong {
  display: block;
  font-weight: 400;
  color: #333;
  font-size: .95rem;
  line-height: 1.6;
}

.post-nav-link:hover strong {
  color: var(--color-accent, #e67f22);
}

.post-nav-link svg {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 20px;
  fill: #adb5bd;
  transform: translateY(-50%) rotate(180deg);
}

.post-nav-link.prev {
  padding-right: 32px;
}

.post-nav-link.prev svg {
  right: 0;
  left: auto;
}

.post-nav-link.next {
  padding-left: 32px;
  padding-right: 0;
}

.post-nav-link.next svg {
  left: 0;
  right: auto;
}

@media (max-width: 767px) {
  .blog-loop-inner.post-single .post-inner {
    padding: 1.25rem 1.1rem 1.5rem;
  }

  .blog-loop-inner.post-single .entry-title {
    font-size: 1.2rem;
  }

  .post-nav {
    padding: 10px;
  }

  .post-nav-link strong {
    display: none;
  }
}

.invoice-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  margin-left: 12px;
  color: var(--color-accent);
  font-weight: 700;
}

.cheque-guide-card,
.cheque-guide-page__card,
.cheque-installment-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}

.cheque-guide-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cheque-installment-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.cheque-installment-card__note,
.cheque-installment-card__uploaded {
  color: #4b5563;
  font-size: 13px;
}

.cheque-installment-card__upload {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px dashed var(--color-accent);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.cheque-installment-card__upload input {
  display: none;
}

.cheque-review-image {
  max-width: 100%;
  max-height: 420px;
  border-radius: 12px;
}

.admin-installment-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-installment-filter__select {
  min-width: 220px;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
}

/* ── MasterChef course archive ── */
.courses-page--masterchef {
  --masterchef-ink: #23362c;
  --masterchef-deep: #314b3b;
  --masterchef-gold: #b99a63;
  --masterchef-gold-soft: #d8c7a5;
  --masterchef-cream: #fcfaf4;
  background:
    radial-gradient(circle at 8% 8%, rgb(201 149 61 / .16), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgb(49 75 59 / .13), transparent 32rem),
    linear-gradient(180deg, #f8f6ef 0%, #eef2eb 58%, #f8f7f2 100%);
}

.courses-page--masterchef .container-xxl {
  max-width: 1440px;
}

.masterchef-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 180px;
  margin: 4px 0 22px;
  padding: 27px 38px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(201 149 61 / .24);
  border-radius: 24px;
  background:
    linear-gradient(110deg, rgb(35 54 44 / .98), rgb(49 75 59 / .94)),
    url("/images/defaultCourse.png") center / cover;
  box-shadow: 0 22px 54px rgb(35 54 44 / .18);
  color: #fff;
}

.masterchef-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .18;
  background-image: radial-gradient(rgb(255 255 255 / .35) 1px, transparent 1px);
  background-size: 18px 18px;
}

.masterchef-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.masterchef-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 5px 11px;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 999px;
  color: #f5d99d;
  font-size: .74rem;
  font-weight: 800;
}

.masterchef-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  font-weight: 950;
  letter-spacing: -.04em;
}

.masterchef-hero p {
  max-width: 620px;
  margin: 7px 0 0;
  color: rgb(255 255 255 / .78);
  font-size: .88rem;
  line-height: 1.8;
}

.masterchef-hero__seal {
  display: grid;
  flex: 0 0 112px;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 14px;
  border: 1px solid rgb(245 217 157 / .48);
  border-radius: 50%;
  outline: 7px solid rgb(201 149 61 / .16);
  background: rgb(255 255 255 / .08);
  color: #f5d99d;
  text-align: center;
}

.masterchef-hero__seal i {
  font-size: 1.55rem;
}

.masterchef-hero__seal strong {
  margin-top: -8px;
  font-size: 1.05rem;
}

.masterchef-hero__seal span {
  margin-top: -10px;
  font-size: .64rem;
  font-weight: 700;
}

.masterchef-hero__glow {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgb(201 149 61 / .16);
  filter: blur(5px);
}

.masterchef-hero__glow--one {
  top: -130px;
  left: 28%;
}

.masterchef-hero__glow--two {
  right: -90px;
  bottom: -150px;
}

.courses-page--masterchef .courses-page__layout {
  display: block;
}

.courses-page--masterchef .courses-page__content {
  width: 100%;
}

.courses-page--masterchef .courses-sort-bar {
  border-color: rgb(201 149 61 / .28);
  background: rgb(255 255 255 / .8);
}

.courses-page--masterchef .courses-sort-bar__label,
.courses-page--masterchef .courses-sort-bar__option,
.courses-page--masterchef .courses-sort-bar__count {
  color: var(--masterchef-ink);
}

.courses-page--masterchef .masterchef-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 26px;
  border-color: rgb(185 154 99 / .18);
  background:
    linear-gradient(145deg, rgb(255 255 255 / .94), rgb(251 247 237 / .88)),
    radial-gradient(rgb(201 149 61 / .2) .7px, transparent .7px);
  background-size: auto, 14px 14px;
  box-shadow: 0 16px 38px rgb(49 75 59 / .08);
}

.courses-page--masterchef .masterchef-grid::before {
  background-image: radial-gradient(rgb(199 157 79 / .18) .7px, transparent .7px);
}

.courses-page--masterchef .course-card-v2 {
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / .78) !important;
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(255 255 255 / .76), rgb(255 255 255 / .28));
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow:
    0 12px 30px rgb(49 75 59 / .1),
    0 0 0 1px rgb(254 238 177 / .46),
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 -1px 0 rgb(254 238 177 / .2);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.courses-page--masterchef .course-card-v2::before {
  position: absolute;
  z-index: 2;
  inset: 0 14px auto;
  height: 3px;
  content: "";
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, transparent, #FEEEB1, transparent);
  pointer-events: none;
}

.courses-page--masterchef .course-card-v2:hover {
  transform: translateY(-9px);
  border-color: rgb(255 255 255 / .95) !important;
  box-shadow:
    0 18px 36px rgb(49 75 59 / .16),
    0 0 0 3px rgb(254 238 177 / .3),
    inset 0 1px 0 rgb(255 255 255 / .98),
    inset 0 -1px 0 rgb(254 238 177 / .35);
}

.courses-page--masterchef .course-card-v2__media {
  height: 205px;
  margin: 12px 12px 0;
  border-radius: 16px;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgb(254 238 177 / .55);
}

.courses-page--masterchef .course-card-v2__media::before {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  content: "♛";
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: 50%;
  background: linear-gradient(145deg, #fffef5, #FEEEB1);
  box-shadow:
    0 4px 12px rgb(91 65 20 / .2),
    inset 0 0 0 2px rgb(255 255 255 / .5);
  color: #b28a32;
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1;
}

.courses-page--masterchef .course-card-v2__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgb(35 54 44 / .3));
}

.courses-page--masterchef .course-card-v2__category {
  z-index: 3;
  border: 1px solid rgb(216 199 165 / .58);
  background: rgb(49 75 59 / .88);
  color: #f5e8c9;
}

.courses-page--masterchef .course-card-v2__status {
  z-index: 3;
}

.courses-page--masterchef .course-card-v2__status--soon {
  background: #b78635;
  box-shadow: 0 4px 12px rgb(183 134 53 / .3);
}

.courses-page--masterchef .course-card-v2__cart:hover:not(:disabled) {
  border-color: #b78635;
  color: #9b702d;
}

.courses-page--masterchef .course-card-v2__title {
  color: #38230d;
  font-size: 1rem;
  font-weight: 950;
}

.courses-page--masterchef .course-card-v2__link:hover .course-card-v2__title {
  color: #9b702d;
}

.courses-page--masterchef .course-card-v2__meta {
  color: #5a401d;
}

.courses-page--masterchef .course-card-v2__footer {
  border-color: rgb(190 165 61 / .2);
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .34));
}

.courses-page--masterchef .course-card-v2__price-current {
  color: #3d260d;
}

@media (max-width: 1199px) and (min-width: 769px) {
  .courses-page--masterchef .masterchef-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
  }

  .courses-page--masterchef .course-card-v2__media {
    height: 175px;
    margin: 9px 9px 0;
  }
}

@media (max-width: 767.98px) {
  .masterchef-hero {
    min-height: 220px;
    align-items: flex-start;
    padding: 24px 22px;
  }

  .masterchef-hero__seal {
    position: absolute;
    left: 22px;
    bottom: 22px;
    transform: scale(.78);
    transform-origin: bottom left;
  }

  .masterchef-hero h1 {
    max-width: 70%;
    font-size: 2rem;
  }

  .masterchef-hero p {
    max-width: 75%;
    font-size: .9rem;
  }

  .courses-page--masterchef .masterchef-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
  }

  .courses-page--masterchef .course-card-v2__media {
    height: 180px;
  }

  .courses-page--masterchef .course-card-v2__title {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.55;
  }
}

@media (max-width: 520px) {
  .masterchef-hero {
    min-height: 245px;
    margin-top: 0;
    border-radius: 24px;
  }

  .masterchef-hero h1 {
    max-width: 100%;
    font-size: 1.8rem;
  }

  .masterchef-hero p {
    max-width: 100%;
  }

  .courses-page--masterchef .masterchef-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ============================================
   WARM CULINARY HEADER + HERO REFRESH
   ============================================ */

.site-header {
  top: .75rem;
  width: calc(100% - clamp(1rem, 4vw, 3rem));
  margin: .75rem auto 0;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  border-radius: 24px;
  background: rgb(255 252 243 / .94);
  box-shadow:
    0 14px 34px rgb(var(--color-primary-darker-rgb) / .08),
    0 2px 0 rgb(255 255 255 / .9) inset;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.site-header.is-scrolled {
  background: rgb(255 252 243 / .98);
  border-bottom-color: rgb(var(--color-primary-rgb) / .18);
  box-shadow:
    0 16px 36px rgb(var(--color-primary-darker-rgb) / .12),
    0 2px 0 rgb(255 255 255 / .95) inset;
}

.site-header__inner {
  width: 100%;
  max-width: 1320px;
  padding-inline: clamp(.35rem, 1.4vw, 1rem);
}

.site-header__toolbar {
  min-height: 70px;
  padding: .55rem .25rem;
  gap: .7rem;
}

.site-header__brand {
  width: 132px;
}

.site-header__brand img {
  height: 42px;
  object-position: center;
  filter: brightness(0) saturate(100%) invert(25%) sepia(13%) saturate(875%) hue-rotate(46deg) brightness(86%) contrast(90%);
}

.site-header__search {
  flex: 0 1 clamp(220px, 29vw, 380px);
  width: clamp(220px, 29vw, 380px);
  max-width: 380px;
}

.site-header__search-input {
  height: 44px;
  padding: .6rem 2.65rem .6rem 1.15rem;
  border-color: rgb(var(--color-primary-rgb) / .14);
  border-radius: 999px;
  background: rgb(255 255 255 / .82);
  color: var(--color-text);
  box-shadow:
    0 5px 16px rgb(var(--color-primary-darker-rgb) / .05),
    0 1px 0 rgb(255 255 255 / .9) inset;
}

.site-header__search-input::placeholder {
  color: var(--color-text-muted);
}

.site-header__search-input:focus {
  border-color: rgb(var(--color-primary-rgb) / .35);
  box-shadow:
    0 7px 20px rgb(var(--color-primary-darker-rgb) / .08),
    0 0 0 3px rgb(var(--color-primary-rgb) / .16);
}

.site-header__search-icon {
  color: var(--color-primary-dark);
}

.site-nav__btn {
  min-height: 44px;
  border-color: rgb(var(--color-primary-rgb) / .2);
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .1), rgb(var(--color-primary-rgb) / .04));
  color: var(--color-primary-darker);
  box-shadow:
    0 6px 16px rgb(var(--color-primary-darker-rgb) / .08),
    0 1px 0 rgb(255 255 255 / .9) inset;
}

.site-nav__btn:hover,
.site-nav__desktop:focus-within .site-nav__btn--mega,
.site-nav__desktop:hover .site-nav__btn--mega {
  border-color: rgb(var(--color-primary-rgb) / .36);
  background: linear-gradient(145deg, rgb(var(--color-primary-rgb) / .17), rgb(var(--color-primary-rgb) / .07));
  color: var(--color-primary-darker);
  box-shadow:
    0 9px 20px rgb(var(--color-primary-darker-rgb) / .12),
    0 1px 0 rgb(255 255 255 / .95) inset;
}

.site-nav__btn-icon {
  background: rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-dark);
}

.site-nav__btn-caret {
  color: var(--color-primary-dark);
}

.site-nav__mega {
  top: calc(100% + .3rem);
  background: rgb(255 252 243 / .98);
  border-color: rgb(var(--color-primary-rgb) / .16);
  box-shadow:
    0 24px 56px rgb(var(--color-primary-darker-rgb) / .14),
    0 8px 18px rgb(var(--color-primary-darker-rgb) / .07);
}

.site-nav__desktop:hover .site-nav__mega,
.site-nav__desktop:focus-within .site-nav__mega {
  transform: translateY(0) scale(1);
}

.site-nav__mega-head {
  border-bottom-color: rgb(var(--color-primary-rgb) / .12);
}

.site-nav__mega-head strong {
  color: var(--color-primary-darker);
}

.site-nav__mega-link:hover {
  background: linear-gradient(90deg, rgb(var(--color-primary-rgb) / .13), rgb(var(--color-primary-rgb) / .04));
}

.site-drawer__brand img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(13%) saturate(875%) hue-rotate(46deg) brightness(86%) contrast(90%);
}

.chm-nav__cart {
  width: 40px;
  height: 40px;
  border-color: rgb(var(--color-primary-rgb) / .18);
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .07);
  color: var(--color-primary-dark);
}

.chm-nav__cart:hover,
.chm-nav__cart.active {
  border-color: rgb(var(--color-accent-rgb) / .5);
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  color: #fff;
}

.chm-nav__btn--ghost {
  border-color: rgb(var(--color-primary-rgb) / .2);
  background: rgb(var(--color-primary-rgb) / .04);
  color: var(--color-primary-dark);
}

.chm-nav__btn--ghost:hover {
  border-color: rgb(var(--color-primary-rgb) / .35);
  background: rgb(var(--color-primary-rgb) / .1);
  color: var(--color-primary-darker);
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .site-header__brand {
    width: 116px;
  }

  .site-header__search {
    flex-basis: clamp(205px, 28vw, 300px);
    width: clamp(205px, 28vw, 300px);
    max-width: 300px;
  }
}

@media (max-width: 991.98px) {
  .site-header {
    top: .5rem;
    width: calc(100% - 1rem);
    margin-top: .5rem;
    border-radius: 18px;
  }

  .site-header__inner {
    padding-inline: .45rem;
  }

  .site-header__toolbar {
    min-height: 58px;
    padding: .45rem .15rem;
    gap: .55rem;
  }

  .site-header__brand {
    width: 88px;
    order: 1;
  }

  .site-header__brand img {
    height: 31px;
  }

  .site-header__search {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    order: 2;
  }

  .site-header__search-input {
    height: 42px;
    font-size: .86rem;
  }

  .site-nav {
    order: 3;
  }

  .site-nav__btn--drawer {
    min-height: 42px;
    width: 42px;
    min-width: 42px;
    border-radius: 12px;
  }
}

/* Homepage hero: image-led, warm, and intentionally free of hardcoded CMS copy. */
.hero {
  --hero-bg: #f2f6f0;
  --hero-bg-rgb: 242 246 240;
  --hero-ink: #35402d;
  --hero-green: #3d4b35;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 16%, rgb(255 255 255 / .8), transparent 30%),
    radial-gradient(circle at 92% 84%, rgb(var(--color-primary-rgb) / .09), transparent 26%),
    linear-gradient(180deg, #f6f9f5 0%, var(--hero-bg) 58%, #e8efe6 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgb(var(--color-primary-rgb) / .12) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgb(var(--color-primary-rgb) / .035) 48.2% 48.5%, transparent 48.7%);
  background-size: 23px 23px, 180px 180px;
  mask-image: linear-gradient(90deg, transparent, #000 52%, transparent);
}

.hero__grid {
  position: relative;
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  min-height: clamp(460px, 68vh, 680px);
  align-items: stretch;
}

.hero__content {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding: clamp(2.4rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  direction: rtl;
  background: transparent;
}

.hero__body {
  width: min(100%, 580px);
  display: flex;
  align-items: center;
}

.hero__inner {
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
  text-align: center;
}

.hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0 auto 1.15rem;
  color: var(--color-accent);
}

.hero__ornament span {
  display: block;
  width: clamp(22px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
}

.hero__ornament span:last-child {
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.hero__ornament i {
  color: var(--color-primary);
  font-size: 1.18rem;
  transform: rotate(-18deg);
}

.hero__heading {
  margin: 0 0 1.15rem;
}

.hero__heading > * {
  margin: 0;
  color: var(--hero-ink);
  font-size: clamp(2.15rem, 4.35vw, 4.15rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.28;
}

.hero__heading em {
  position: relative;
  display: inline-block;
  padding-inline: .08em;
  color: var(--color-accent);
  font-style: normal;
  white-space: nowrap;
}

.hero__heading em::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -.03em;
  left: 7%;
  height: .12em;
  border-radius: 999px;
  background: rgb(var(--color-accent-rgb) / .38);
  transform: rotate(-2deg);
}

.hero__subheading {
  max-width: 35rem;
  margin: 0 auto .3rem;
}

.hero__subheading > * {
  margin: 0;
  color: var(--color-text-warm-muted);
  font-size: clamp(.88rem, 1.15vw, 1.05rem);
  font-weight: 500;
  line-height: 2;
}

.hero__subheading + .hero__subheading {
  margin-top: -.1rem;
}

.hero__search {
  width: min(100%, 510px);
  margin: 1.9rem auto 0;
}

.hero__search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 64px;
  padding: .35rem;
  border: 1px solid rgb(var(--color-primary-rgb) / .12);
  border-radius: 999px;
  background: rgb(255 255 255 / .86);
  box-shadow:
    0 18px 38px rgb(var(--color-primary-darker-rgb) / .11),
    0 2px 0 rgb(255 255 255 / .95) inset;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.hero__search-field:focus-within {
  border-color: rgb(var(--color-primary-rgb) / .3);
  box-shadow:
    0 20px 42px rgb(var(--color-primary-darker-rgb) / .14),
    0 0 0 4px rgb(var(--color-primary-rgb) / .14);
}

.hero__search-icon {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  pointer-events: none;
  opacity: .78;
}

.hero__search-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: .7rem 3.15rem .7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  box-shadow: none;
}

.hero__search-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 500;
}

.hero__search-input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.hero__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: .35rem;
  min-width: 88px;
  height: 50px;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  color: #fff;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  box-shadow:
    0 8px 18px rgb(var(--color-primary-darker-rgb) / .2),
    0 1px 0 rgb(255 255 255 / .28) inset;
  cursor: pointer;
}

.hero__search-submit:hover,
.hero__search-submit:focus-visible {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
  box-shadow:
    0 10px 22px rgb(var(--color-primary-darker-rgb) / .26),
    0 1px 0 rgb(255 255 255 / .3) inset;
  transform: translateY(-1px);
}

.hero__search-submit:focus-visible {
  outline: 3px solid rgb(var(--color-accent-rgb) / .28);
  outline-offset: 2px;
}

.hero__search-submit i {
  font-size: .8rem;
  transition: transform .2s ease;
}

.hero__search-submit:hover i {
  transform: translateX(-2px);
}

.hero__media {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-height: inherit;
  overflow: hidden;
  background: var(--hero-green);
}

.hero__media::before {
  content: "";
  position: absolute;
  left: -16%;
  bottom: -33%;
  z-index: 2;
  width: clamp(250px, 36vw, 540px);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgb(255 255 255 / .035);
  pointer-events: none;
}

.hero__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(46%, 440px);
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgb(var(--hero-bg-rgb) / .08) 18%,
    rgb(var(--hero-bg-rgb) / .3) 45%,
    rgb(var(--hero-bg-rgb) / .72) 76%,
    var(--hero-bg) 100%
  );
}

.hero__media-mark {
  position: absolute;
  left: clamp(1.15rem, 3vw, 3rem);
  bottom: clamp(1.15rem, 3vw, 2.5rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(255 255 255 / .34);
  border-radius: 50%;
  background: rgb(36 49 34 / .28);
  color: #fff;
  box-shadow: 0 8px 22px rgb(0 0 0 / .14);
  backdrop-filter: blur(5px);
  transform: rotate(-10deg);
}

.hero__media-mark i {
  font-size: 1rem;
}

.hero__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__image {
  object-position: 16% center;
  filter: saturate(1.06) contrast(1.02);
}

@media (max-width: 991.98px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__media {
    grid-column: 1;
    grid-row: 1;
    min-height: clamp(270px, 72vw, 440px);
  }

  .hero__media::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(44%, 150px);
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgb(var(--hero-bg-rgb) / .18) 35%,
      rgb(var(--hero-bg-rgb) / .7) 75%,
      var(--hero-bg) 100%
    );
  }

  .hero__content {
    grid-column: 1;
    grid-row: 2;
    min-height: auto;
    padding: 2.8rem 1.15rem 3rem;
    background: var(--hero-bg);
  }

  .hero__body,
  .hero__inner {
    max-width: 650px;
  }

  .hero__heading > * {
    font-size: clamp(2rem, 7vw, 3.3rem);
  }

  .hero__subheading > * {
    font-size: .92rem;
  }

  .hero__search {
    margin-top: 1.55rem;
  }
}

@media (max-width: 575.98px) {
  .hero__media {
    min-height: clamp(240px, 78vw, 350px);
  }

  .hero__content {
    padding: 2.35rem .9rem 2.5rem;
  }

  .hero__ornament {
    margin-bottom: .85rem;
  }

  .hero__heading {
    margin-bottom: .9rem;
  }

  .hero__heading > * {
    font-size: clamp(1.85rem, 9vw, 2.7rem);
  }

  .hero__subheading > * {
    font-size: .84rem;
    line-height: 1.85;
  }

  .hero__search-field {
    min-height: 58px;
  }

  .hero__search-input {
    height: 46px;
    min-height: 46px;
    padding-inline-start: .65rem;
    font-size: .82rem;
  }

  .hero__search-submit {
    min-width: 74px;
    height: 44px;
    padding-inline: .75rem;
    font-size: .78rem;
  }

  .hero__search-submit i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__search-submit,
  .hero__search-submit i {
    transition: none;
  }
}

/* Final composition tuning: overlay header, compact copy, restored search, and proof row. */
.site-header {
  transition:
    transform .32s cubic-bezier(.22, 1, .36, 1),
    opacity .25s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.site-header--overlay {
  position: fixed;
  top: .75rem;
}

.site-header.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 1.25rem));
}

.hero__content {
  justify-content: space-between;
}

.hero__body {
  flex: 1 1 auto;
}

.hero__heading > * {
  font-size: clamp(1.6rem, 3.4vw, 3.15rem);
  line-height: 1.35;
  white-space: nowrap;
}

.hero__subheading {
  max-width: 100%;
  overflow: hidden;
}

.hero__subheading > * {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(.64rem, 1.35vw, .98rem);
  line-height: 1.8;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero__search {
  width: min(100%, 510px);
  margin-top: 1.55rem;
}

.hero__search-field {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero__search-field:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.hero__search-input {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 60px;
  padding: .95rem 3.2rem .95rem 1.35rem;
  border: 1px solid rgb(63 79 60 / .1);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 16px 36px rgb(63 79 60 / .12),
    0 2px 0 rgb(255 255 255 / .8) inset;
}

.hero__search-input:focus {
  border-color: rgb(63 79 60 / .22);
  box-shadow:
    0 18px 42px rgb(63 79 60 / .16),
    0 0 0 3px rgb(var(--color-primary-rgb) / .28);
}

.hero__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  max-width: 620px;
  margin: 1.2rem auto 0;
  padding: .75rem 0 0;
  border-top: 1px solid rgb(var(--color-primary-rgb) / .14);
  border-radius: 0;
  background: transparent;
  color: var(--hero-ink);
  box-shadow: none;
  overflow: visible;
}

.hero__highlights li {
  justify-content: center;
  gap: .55rem;
  padding: .25rem .55rem .15rem;
  color: var(--hero-ink);
}

.hero__highlights li:hover {
  background: rgb(var(--color-primary-rgb) / .035);
}

.hero__highlights li + li {
  border-inline-start: 1px solid rgb(var(--color-primary-rgb) / .14);
}

.hero__highlight-icon {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(var(--color-primary-rgb) / .22);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 1.02rem;
}

/* The middle chip keeps a warm glyph, but on white so no peach wash appears. */
.hero__highlights li:nth-child(even) .hero__highlight-icon {
  border-color: rgb(var(--color-accent-rgb) / .3);
  background: #fff;
  color: var(--color-accent-dark);
}

.hero__highlight-text {
  min-width: 0;
  overflow: hidden;
}

.hero__highlight-title {
  color: var(--hero-ink);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}

.hero__highlight-desc {
  color: var(--color-text-warm-muted);
  font-size: .64rem;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .site-header--overlay {
    top: .5rem;
  }

  .hero__heading > * {
    font-size: clamp(1.1rem, 7vw, 2.45rem);
  }

  .hero__search {
    margin-top: 1.25rem;
  }

  .hero__highlights {
    margin-top: 1rem;
    padding-top: .6rem;
  }

  .hero__highlights li {
    gap: .3rem;
    padding-inline: .2rem;
  }

  .hero__highlight-icon {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .82rem;
  }

  .hero__highlight-title {
    font-size: .62rem;
  }

  .hero__highlight-desc {
    font-size: .52rem;
  }
}

@media (max-width: 575.98px) {
  .hero__heading > * {
    font-size: clamp(1.05rem, 7vw, 1.75rem);
  }

  .hero__subheading > * {
    font-size: .64rem;
  }

  .hero__search-input {
    min-height: 54px;
    padding: .8rem 2.8rem .8rem 1rem;
  }

  .hero__highlight-title {
    font-size: .57rem;
  }

  .hero__highlight-desc {
    font-size: .47rem;
  }
}

/* Overlay header — crisp white editorial bar floating over the hero imagery. */
.site-header--overlay {
  top: clamp(.25rem, .7vw, .5rem);
  right: clamp(.55rem, 2.2vw, 1.6rem);
  left: clamp(.55rem, 2.2vw, 1.6rem);
  width: auto;
  margin: 0;
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(45 48 42 / .05),
    0 10px 24px rgb(45 48 42 / .08),
    0 26px 50px -20px rgb(45 48 42 / .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header--overlay::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgb(var(--color-primary-rgb) / .34) 50%,
      transparent 100%);
}

.site-header--overlay .site-header__inner {
  position: relative;
  z-index: 1;
}

.site-header--overlay.is-scrolled {
  border-color: rgb(255 255 255 / .95);
  background: #fff;
  box-shadow:
    0 1px 2px rgb(45 48 42 / .06),
    0 12px 28px rgb(45 48 42 / .1),
    0 30px 56px -22px rgb(45 48 42 / .2);
}

.site-header--overlay .site-header__toolbar {
  min-height: 64px;
  padding: .45rem .65rem;
  gap: .75rem;
}

.site-header--overlay .site-header__brand {
  width: 132px;
  padding-inline: .25rem;
}

/* Inputs sit as pale-sage recessed wells so they read against the white bar. */
.site-header--overlay .site-header__search-input {
  border-color: rgb(var(--color-primary-rgb) / .18);
  background: var(--color-hero-surface);
  box-shadow: none;
}

.site-header--overlay .site-header__search-input:focus {
  border-color: rgb(var(--color-primary-rgb) / .38);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .16);
}

/* Menu trigger: quiet white pill that deepens into sage on interaction. */
.site-header--overlay .site-nav__btn {
  border-color: rgb(var(--color-primary-rgb) / .2);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-darker);
  box-shadow: none;
}

.site-header--overlay .site-nav__btn:hover,
.site-header--overlay .site-nav__desktop:focus-within .site-nav__btn--mega,
.site-header--overlay .site-nav__desktop:hover .site-nav__btn--mega {
  border-color: rgb(var(--color-primary-rgb) / .34);
  background: var(--color-hero-surface);
  color: var(--color-primary-darker);
  box-shadow: 0 6px 16px rgb(var(--color-primary-darker-rgb) / .12);
}

.site-header--overlay .site-nav__btn-icon {
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / .14);
  color: var(--color-primary-dark);
  transition: background .25s ease, color .25s ease;
}

.site-header--overlay .site-nav__btn:hover .site-nav__btn-icon,
.site-header--overlay .site-nav__desktop:hover .site-nav__btn--mega .site-nav__btn-icon {
  background: var(--color-primary-dark);
  color: #fff;
}

.site-header--overlay .site-nav__btn-caret {
  color: rgb(var(--color-primary-darker-rgb) / .5);
}

/* The compact drawer trigger is already a circle — keep its glyph unchipped. */
.site-header--overlay .site-nav__btn--drawer .site-nav__btn-icon {
  background: transparent;
  color: var(--color-primary-dark);
}

.site-header--overlay .site-nav__mega {
  background: #fff;
  border-color: rgb(var(--color-primary-rgb) / .16);
  box-shadow:
    0 1px 2px rgb(45 48 42 / .05),
    0 24px 56px rgb(45 48 42 / .16);
}

.site-header--overlay .chm-nav__cart {
  border-color: rgb(var(--color-primary-rgb) / .2);
  border-radius: 999px;
  background: var(--color-hero-surface);
  color: var(--color-primary-dark);
}

.site-header--overlay .chm-nav__cart:hover,
.site-header--overlay .chm-nav__cart.active {
  border-color: rgb(var(--color-primary-rgb) / .36);
  background: var(--color-hero-surface-2);
  color: var(--color-primary-darker);
}

@media (max-width: 991.98px) {
  .site-header--overlay {
    right: .65rem;
    left: .65rem;
    border-radius: 18px;
  }

  .site-header--overlay::after {
    right: 16px;
    left: 16px;
  }

  .site-header--overlay .site-header__toolbar {
    min-height: 56px;
    padding: .35rem .5rem;
    gap: .5rem;
  }

  .site-header--overlay .site-header__brand {
    width: 88px;
  }
}

/* Action hierarchy on white: one deep-sage CTA, everything else outlined. */
.site-header--overlay .chm-nav__btn {
  border-radius: 999px;
}

.site-header--overlay .chm-nav__btn--primary {
  border-color: transparent;
  background: linear-gradient(140deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgb(var(--color-primary-darker-rgb) / .26);
}

.site-header--overlay .chm-nav__btn--primary:hover {
  background: linear-gradient(140deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 8px 20px rgb(var(--color-primary-darker-rgb) / .3);
}

.site-header--overlay .chm-nav__btn--dashboard {
  border-color: rgb(var(--color-primary-rgb) / .2);
  background: #fff;
  color: var(--color-primary-darker);
  box-shadow: none;
}

.site-header--overlay .chm-nav__btn--dashboard:hover {
  border-color: rgb(var(--color-primary-rgb) / .34);
  background: var(--color-hero-surface);
  box-shadow: 0 6px 16px rgb(var(--color-primary-darker-rgb) / .12);
}

.site-header--overlay .chm-nav__btn--ghost {
  border-color: rgb(var(--color-primary-rgb) / .18);
  background: #fff;
  color: rgb(var(--color-primary-darker-rgb) / .72);
}

.site-header--overlay .chm-nav__btn--ghost:hover {
  border-color: rgb(var(--color-primary-rgb) / .32);
  background: var(--color-hero-surface);
  color: var(--color-primary-darker);
}

@media (max-width: 991.98px) {
  .site-header--overlay {
    top: .3rem;
  }
}

/* The shared header is fixed on every route; keep inner pages below it. */
.page-transition:not(.page-transition--home):not(.admin-page-transition) {
  padding-top: clamp(4.75rem, 6vw, 5.75rem);
  background: var(--site-page-background);
}

/* Course details sit closer to the fixed navigation without changing other pages. */
.page-transition.page-transition:has(.cd-page) {
  padding-top: clamp(4rem, 5vw, 4.75rem);
}

/* Center the desktop menu glyph independently from its left-side caret. */
.site-header--overlay .site-nav__btn--mega {
  position: relative;
  min-width: 74px;
  padding-inline: 2.15rem;
}

.site-header--overlay .site-nav__btn--mega .site-nav__btn-icon {
  position: absolute;
  top: 50%;
  left: calc(50% + .3rem);
  margin: 0;
  transform: translate(-50%, -50%);
}

.site-header--overlay .site-nav__btn--mega .site-nav__btn-caret {
  position: absolute;
  top: 50%;
  left: .65rem;
  margin: 0;
  transform: translateY(-50%);
}

.site-header--overlay .site-nav__desktop:hover .site-nav__btn--mega .site-nav__btn-caret,
.site-header--overlay .site-nav__desktop:focus-within .site-nav__btn--mega .site-nav__btn-caret {
  transform: translateY(-50%) rotate(180deg);
}

/* Keep the hero ornament clear of the fixed overlay header. */
.hero__ornament {
  width: fit-content;
  margin-inline: 0 auto 1.15rem;
  transform: translateY(12px);
}

@media (max-width: 575.98px) {
  .hero__search-input {
    height: 48px;
    min-height: 48px;
    padding: .65rem 2.75rem .65rem .9rem;
    font-size: .68rem;
  }

  .hero__search-icon {
    right: 1rem;
    font-size: .92rem;
  }

  .hero__ornament {
    margin-bottom: .85rem;
    transform: translateY(9px);
  }
}

/* Keep header controls on one baseline at every viewport width. */
.site-header--overlay .site-header__toolbar {
  align-items: center;
  flex-wrap: nowrap;
}

@media (max-width: 991.98px) {
  .site-header--overlay .site-header__search {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .site-header--overlay .site-header__search-field {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .hero__heading,
  .hero__search {
    width: min(100%, 320px);
    margin-inline: auto;
  }
}

/* Align the menu control itself, not its inline line box, with the search. */
.site-header--overlay .site-nav {
  display: flex;
  align-items: center;
  align-self: center;
  height: 44px;
  line-height: 1;
}

.site-header--overlay .site-header__search {
  align-self: center;
  margin-block: 0;
  line-height: 1;
}

@media (min-width: 992px) {
  .site-header--overlay .site-nav__desktop {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

@media (max-width: 991.98px) {
  .site-header--overlay .site-nav {
    height: 42px;
  }
}

/* The photo itself fades out with a mask, so it reaches zero opacity while it
   is still under the copy column — a colour overlay always left a visible seam
   because it never became fully opaque before the image ended. */
@media (min-width: 992px) {
  .hero__media {
    grid-column: 1 / -1;
    width: 66%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 0 52%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0 52%, transparent 100%);
  }

  .hero__media::after {
    content: none;
  }

  .hero__image {
    object-position: 20% center;
  }

  .hero__content > .hero__body,
  .hero__content > .hero__highlights {
    position: relative;
    z-index: 1;
  }
}

/* Same masked blend stacked vertically for narrow screens. The copy column is
   pulled up by its own top padding, so the faded tail of the photo sits behind
   empty space rather than behind the text. */
@media (max-width: 991.98px) {
  .hero__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
  }

  .hero__media::after {
    content: none;
  }

  .hero__content {
    margin-top: -2.5rem;
    background: transparent;
  }
}

@media (max-width: 575.98px) {
  .hero__content {
    margin-top: -2rem;
  }
}

/* Drawer close: the icon font's baseline offset pushed the glyph off centre, so
   rotating the button swung it around a point it never sat on. Centre the glyph
   and spin the glyph itself, leaving the button box untransformed. */
.site-drawer__close {
  transition: background .2s ease;
}

.site-drawer__close i {
  display: block;
  width: 1em;
  height: 1em;
  font-size: .95rem;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform .25s ease;
}

.site-drawer__close i::before {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: 0;
  text-align: center;
}

.site-drawer__close:hover {
  background: rgb(var(--color-primary-rgb) / .2);
  transform: none;
}

.site-drawer__close:hover i {
  transform: rotate(90deg);
}