@font-face{
  font-family: 'Bebas Neue Cyrillic';
  src: url('assets/fonts/BebasNeueCyrillic.woff2') format('woff2'),
       url('assets/fonts/BebasNeueCyrillic.woff') format('woff'),
       url('assets/fonts/BebasNeueCyrillic.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html,body{
  margin: 0;
  background: #00020b;
  overflow-x: hidden;
}
body{ font-family: 'Alumni Sans SC', sans-serif; }
img{
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
}

#header-fixed-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  overflow: visible;
}
#header-fixed-inner{
  position: relative;
  width: 1905px;
  height: 195px;
  transform-origin: top left;
}
#header-fixed-inner .hit,
#header-fixed-inner .courses-dropdown{
  pointer-events: auto;
}

#canvas-wrapper{
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* only when the min-scale floor below actually kicks in (narrow screens) —
   at the normal fit-to-width scale this stays overflow:hidden exactly like
   before, so nothing changes on desktop/wide tablets. */
#canvas-wrapper.is-clamped{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#canvas-wrapper.is-clamped::-webkit-scrollbar{ display: none; }
#canvas{
  position: relative;
  transform-origin: top left;
  background: #00020b;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
}
#canvas *{ -webkit-user-drag: none; }
.el{ position: absolute; }
.el-text{ white-space: pre; margin: 0; }
.el-img{ display: block; }

/* real form controls stay selectable/editable */
.form-field, .form-checkbox{
  -webkit-user-select: text;
  user-select: text;
}

/* interactive overlay controls: invisible hit-areas + real form fields */
.hit{
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 40;
  display: block;
}

.courses-dropdown{
  position: absolute;
  background: #1f1f20;
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 340px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .2s ease;
  z-index: 60;
}
.courses-dropdown.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.courses-dropdown a,
.courses-dropdown .dd-item{
  color: #fff;
  text-decoration: none;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 28px;
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  white-space: nowrap;
  cursor: default;
}
.courses-dropdown a{ cursor: pointer; }
.courses-dropdown a:hover,
.courses-dropdown .dd-item:hover{ background: #2a2a2b; color: #9e61ff; }
.courses-dropdown .dd-item{ position: relative; }
.courses-dropdown .dd-item .chevron{ opacity: .5; font-size: 24px; }
.courses-dropdown .dd-item:hover .chevron{ opacity: 1; }

.courses-dropdown .submenu{
  position: absolute;
  left: 100%;
  top: -18px;
  margin-left: 10px;
  background: #1f1f20;
  border-radius: 26px;
  padding: 18px;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: .15s ease;
}
.courses-dropdown .dd-item:hover .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.exam-indicator{
  position: absolute;
  background: #9e61ff;
  border-radius: 60px;
  z-index: 20;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}

.form-field{
  position: absolute;
  z-index: 40;
  background: #e2e2e2;
  border: none;
  border-radius: 60px;
  padding: 0 24px;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #000;
  outline: none;
}
.form-field::placeholder{ color: #8e8e8e; }
select.form-field{ appearance: none; }
select.form-field:invalid,
select.form-field.is-empty{ color: #8e8e8e; }

.form-submit{
  position: absolute;
  z-index: 40;
  background: linear-gradient(90deg, #9c06e0 0%, #9e61ff 50%, #9c06e0 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -0.28px;
  cursor: pointer;
}
.form-submit:active{ transform: scale(.98); }

.form-checkbox{
  position: absolute;
  z-index: 40;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
  accent-color: #9e61ff;
}

.score-range{
  position: absolute;
  z-index: 50;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.score-range::-webkit-slider-runnable-track{ background: transparent; height: 100%; }
.score-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 56px; height: 56px;
  margin-top: -18px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.score-range::-moz-range-track{ background: transparent; height: 100%; }
.score-range::-moz-range-thumb{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* score slider: reproduces the "шкала баллов" reference states —
   thin fill bar growing to the active tick, small ticks filled once
   passed, a big dot on the current tick. */
.score-fill{
  position: absolute;
  background: #4e065d;
  border-radius: 50px;
  z-index: 30;
  pointer-events: none;
  transition: width .2s ease;
}
.score-tick{
  position: absolute;
  background: #ffffff;
  border-radius: 50px;
  z-index: 31;
  pointer-events: none;
  transition: background .2s ease;
}
.score-tick.is-passed{ background: #4e065d; }
.calc-tooltip{
  position: absolute;
  z-index: 45;
  background: #d1d1d1;
  color: #4a4a4a;
  border-radius: 24px;
  padding: 16px 24px;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.calc-tooltip.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown{
  position: absolute;
  background: #1d1d1d;
  color: #fff;
  border-radius: 28px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .2s ease;
  z-index: 55;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.filter-dropdown.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.filter-dropdown a{
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.5px;
  padding: 14px 20px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-dropdown a:hover, .filter-dropdown a.is-active{ background: #9e61ff; color: #fff; }

.tutor-bar-anim{
  transition: top .4s ease, height .4s ease;
}
.cart-item{ transition: transform .3s ease, opacity .2s ease; }
.cart-remove-btn{ transition: background .15s ease; }
.cart-remove-btn:hover{ background: rgba(220,220,220,1.0) !important; }
.score-dot{
  position: absolute;
  background: #4e065d;
  border-radius: 50%;
  z-index: 40;
  pointer-events: none;
  transition: left .2s ease, top .2s ease;
}

/* ---- cookie consent banner ---- */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: #131314;
  border-top: 1px solid rgba(158,97,255,.35);
  box-shadow: 0 -16px 44px rgba(0,0,0,.5);
  padding: 22px 40px;
  transform: translateY(120%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner-inner{
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cookie-banner-text{
  flex: 1;
  min-width: 260px;
  margin: 0;
  color: #cfcfd2;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.45;
}
.cookie-banner-link{
  color: #b98bff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-link:hover{ color: #9e61ff; }
.cookie-banner-accept{
  flex-shrink: 0;
  background: linear-gradient(90deg, #9c06e0 0%, #9e61ff 50%, #9c06e0 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .3px;
  padding: 15px 46px;
  cursor: pointer;
}
.cookie-banner-accept:active{ transform: scale(.98); }
@media (max-width: 720px){
  .cookie-banner{ padding: 12px 14px; }
  .cookie-banner-inner{ flex-wrap: nowrap; align-items: center; gap: 12px; }
  .cookie-banner-text{ font-size: 11px; line-height: 1.35; min-width: 0; }
  .cookie-banner-accept{ width: auto; flex-shrink: 0; padding: 9px 18px; font-size: 13px; }
}

/* ---- mobile canvas: a second, independently-scaled copy of the Figma page
   built at its own 390px reference width (see script.js rescaleMobile()),
   swapped in for the 1905px desktop canvas below the breakpoint instead of
   letting the desktop canvas shrink/horizontal-scroll. ---- */
#canvas-mobile-wrapper{
  display: none;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#canvas-mobile{
  position: relative;
  width: 390px;
  transform-origin: top left;
  background: #00020b;
  -webkit-user-select: none;
  user-select: none;
}
#canvas-mobile *{ -webkit-user-drag: none; }
@media (max-width: 767px){
  #header-fixed-wrapper, #canvas-wrapper{ display: none; }
  #canvas-mobile-wrapper{ display: block; }
}

/* hamburger icon (Figma's own vector is a simple 2-line glyph; drawn here as
   plain CSS bars instead of an exported asset, so it can share the button's
   hit area exactly and needs no extra image request) */
.mob-burger{
  position: absolute;
  width: 20px; height: 14px;
  z-index: 41;
  pointer-events: none;
}
.mob-burger span{
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: #f5f5f5;
}
.mob-burger span:nth-child(1){ top: 0; }
.mob-burger span:nth-child(2){ top: 6px; }
.mob-burger span:nth-child(3){ top: 12px; }

/* "популярные курсы": native horizontal swipe between the two course cards */
.mob-scroll-x{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mob-scroll-x::-webkit-scrollbar{ display: none; }
.mob-scroll-x-track > .el{ scroll-snap-align: start; }

/* "популярные курсы" mobile cards: real course data (see mobPopularCardHTML
   in script.js) — small pill tags sized for this compact 200px-wide card,
   distinct from the larger .mob-catalog-tag used on /ege, /oge */
.mob-popular-tags{ position: absolute; display: flex; gap: 4px; flex-wrap: wrap; }
.mob-popular-tag{
  display: inline-block; padding: 1.5px 6px; background: rgba(158,97,255,1.0);
  border-radius: 50px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 7px; line-height: 8.4px; color: #fff; white-space: nowrap;
}

/* decorative blurred glow orbs behind the "начни готовиться" free-lesson
   banner — approximates the Figma layer's stacked drop-shadow glow without
   exporting it as a raster image */
.mob-glow-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* mobile menu overlay ("три точки меню") */
#mobileMenuOverlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #00020b;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#mobileMenuOverlay.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#mobileMenuOverlay .el, #mobileMenuOverlay .hit{ position: absolute; }
#mobileMenuOverlay-inner{
  position: relative;
  width: 390px;
  min-height: 100%;
  margin: 0 auto;
  transform-origin: top center;
}
@media (min-width: 768px){
  #mobileMenuOverlay{ display: none; }
}

/* ---- /ege, /oge mobile: one real course card per row (same data as the
   desktop 3-column grid, just laid out in normal document flow instead of
   pixel-positioned columns, since the list length is unknown ahead of time) ---- */
/* /results mobile: real testimonial screenshots, single column like the
   course catalog above, instead of desktop's 2-column masonry grid ---- */
#reviewsGridMobile{
  position: absolute;
  left: 17px;
  top: 220px;
  width: 356px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mob-review-card{
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
}
.mob-review-card img{ display: block; width: 100%; height: auto; border-radius: 14px; }

#coursesGridMobile{
  position: absolute;
  left: 17px;
  top: 200px;
  width: 356px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mob-catalog-card{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.mob-catalog-photo{
  height: 150px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.mob-catalog-badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(158,97,255,1.0);
  color: #fff;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 50px;
}
.mob-catalog-body{ padding: 14px 16px 16px; }
.mob-catalog-desc{
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #8e8e8e;
  margin-bottom: 4px;
}
.mob-catalog-title{
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  color: #000;
  margin-bottom: 8px;
}
.mob-catalog-subtitle{ color: #8e8e8e; }
.mob-catalog-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mob-catalog-tag{
  background: rgba(158,97,255,1.0);
  color: #fff;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}
.mob-catalog-meta{
  display: flex;
  justify-content: space-between;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #8e8e8e;
  margin-bottom: 4px;
}
.mob-catalog-price{
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  font-size: 22px;
  color: #000;
  margin: 10px 0;
}
.mob-catalog-price b{ font-size: 26px; }
.mob-catalog-actions{ display: flex; gap: 8px; }
.mob-catalog-buy, .mob-catalog-info{
  flex: 1;
  padding: 12px 0;
  border-radius: 50px;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
.mob-catalog-buy{ background: rgba(158,97,255,1.0); color: #fff; }
.mob-catalog-info{ background: transparent; color: #000; border: 1px solid rgba(0,0,0,.4); }

/* ---- mobile cart (/cart) ---- */
#cartItemsMobile{ position: absolute; left: 17px; top: 200px; width: 356px; display: flex; flex-direction: column; gap: 16px; }
.mob-cart-card{ position: relative; background: #fff; border-radius: 20px; padding: 14px; }
.mob-cart-card.is-unchecked{ opacity: .5; }
.mob-cart-top-row{ display: flex; gap: 12px; }
.mob-cart-checkbox{ width: 22px; height: 22px; accent-color: #9e61ff; cursor: pointer; margin-top: 4px; flex-shrink: 0; }
.mob-cart-photo{ width: 72px; height: 72px; border-radius: 14px; background-size: cover; background-position: center; flex-shrink: 0; }
.mob-cart-info{ flex: 1; min-width: 0; padding-right: 30px; }
.mob-cart-badge{ display: inline-block; padding: 3px 9px; background: rgba(158,97,255,.95); border-radius: 6px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .3px; color: #fff; text-transform: uppercase; margin-bottom: 4px; }
.mob-cart-title{ font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 17px; line-height: 1.15; color: #000; text-transform: uppercase; }
.mob-cart-remove-btn{ position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(240,240,240,1.0); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mob-cart-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.mob-cart-tag{ background: rgba(158,97,255,1.0); color: #fff; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; padding: 3px 10px; border-radius: 50px; white-space: nowrap; }
.mob-cart-curator-btn{ display: inline-block; padding: 3px 10px; border-radius: 50px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; white-space: nowrap; cursor: pointer; }
.mob-cart-meta{ display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; color: rgba(142,142,142,1.0); margin-top: 8px; }
.mob-cart-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.mob-cart-bottom-row{ display: flex; align-items: flex-end; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); gap: 10px; }
.mob-cart-price{ font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 26px; color: #000; }
.mob-cart-price-unit{ font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; color: rgba(142,142,142,1.0); display: block; }
.mob-cart-format-row{ display: flex; gap: 6px; }
.mob-cart-format-btn{ padding: 8px 12px; border-radius: 20px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 12px; border: none; cursor: pointer; white-space: nowrap; }
.mob-cart-format-btn:disabled{ cursor: not-allowed; }

#cartEmptyMobile{ position: absolute; left: 17px; top: 200px; width: 356px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 16px; color: rgba(180,180,180,1.0); }
#cartEmptyBtnMobile{ position: absolute; left: 17px; top: 250px; display: inline-block; padding: 14px 28px; background: linear-gradient(90deg, rgba(156,6,224,1.0) 0%, rgba(158,97,255,1.0) 50%, rgba(156,6,224,1.0) 100%); border-radius: 50px; font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 18px; color: #fff; text-decoration: none; white-space: nowrap; }

#promoBannerMobile{ position: absolute; left: 17px; top: 200px; width: 356px; border-radius: 24px; background: linear-gradient(90deg, rgba(156,6,224,1.0) 0%, rgba(158,97,255,1.0) 50%, rgba(156,6,224,1.0) 100%); padding: 16px; box-sizing: border-box; overflow: hidden; }
.pbm-texture{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('assets/img/texture-b.jpg'); background-size: cover; background-position: center; mix-blend-mode: soft-light; opacity: .35; pointer-events: none; }
.pbm-row{ position: relative; display: flex; align-items: center; gap: 12px; }
.pbm-badge{ width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pbm-badge span{ font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 16px; color: rgba(156,6,224,1.0); }
.pbm-text{ flex: 1; min-width: 0; }
.pbm-title{ font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 15px; line-height: 1.2; color: #fff; }
.pbm-sub{ font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.85); margin-top: 2px; }
.pbm-link{ position: relative; display: block; margin-top: 12px; text-align: center; background: #fff; border-radius: 50px; padding: 10px; font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 14px; color: rgba(53,29,91,1.0); text-decoration: none; }

#cartSummaryMobile{ position: absolute; left: 17px; top: 200px; width: 356px; border-radius: 24px; background: linear-gradient(180deg, rgba(53,29,91,1.0) 0%, rgba(158,97,255,1.0) 50.5%, rgba(53,29,91,1.0) 100%); padding: 20px; box-sizing: border-box; overflow: hidden; }
.csm-texture{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('assets/img/texture-b.jpg'); background-size: cover; background-position: center; mix-blend-mode: soft-light; opacity: .35; pointer-events: none; }
.csm-title{ position: relative; font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 24px; color: #fff; }
.csm-subtitle{ position: relative; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,.65); margin-top: 4px; }
.csm-divider{ position: relative; height: 1px; background: rgba(255,255,255,.18); margin: 14px 0; }
#summaryLinesMobile{ position: relative; }
.csm-total-bar{ position: relative; margin-top: 16px; background: #fff; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.csm-total-label{ font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 14px; color: rgba(120,90,150,1.0); }
.csm-total-value{ font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 24px; color: rgba(78,6,93,1.0); }
.csm-promo-row{ position: relative; margin-top: 14px; background: #fff; border-radius: 50px; display: flex; align-items: center; padding: 4px 4px 4px 16px; }
.csm-promo-input{ flex: 1; min-width: 0; height: 40px; border: none; background: transparent; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 14px; color: #000; outline: none; }
.csm-promo-btn{ width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(156,6,224,1.0); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.csm-guest-fields{ position: relative; margin-top: 14px; }
.csm-guest-label{ font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.75); margin-bottom: 8px; }
.csm-guest-input{ display: block; width: 100%; height: 44px; border: none; border-radius: 50px; background: #fff; padding: 0 18px; box-sizing: border-box; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 14px; color: #000; outline: none; margin-bottom: 8px; }
.csm-guest-error{ position: relative; margin-top: 8px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 12px; line-height: 1.4; color: rgba(255,205,205,1.0); }
.csm-checkout-btn{ position: relative; display: block; width: 100%; margin-top: 14px; background: #fff; border-radius: 50px; padding: 14px; font-family: 'Bebas Neue Cyrillic', sans-serif; font-size: 18px; color: rgba(53,29,91,1.0); border: none; cursor: pointer; text-align: center; }
.csm-disclaimer{ position: relative; margin-top: 12px; font-family: 'Alumni Sans SC', sans-serif; font-weight: 600; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.6); }

#cartRecHeadingMobile{ position: absolute; left: 17px; top: 200px; width: 356px; height: 34px; }
#cartRecommendedMobile{ position: absolute; left: 17px; top: 200px; width: 356px; display: flex; flex-direction: column; gap: 16px; }