.sales-back { display: inline-flex; margin-bottom: 26px; color: var(--mk-blue); font-size: 14px; font-weight: 600; }
.landing-header { display: grid; place-items: center; min-height: 96px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.landing-header a { display: block; background: transparent; }
.landing-header img { display: block; width: 64px; height: auto; background: transparent; border: 0; box-shadow: none; }
.sales-page:not(.lesson-page) .sales-hero { padding-bottom: 32px; }
.sales-page:not(.lesson-page) .sales-hero-grid { gap: 24px; }
.sales-page:not(.lesson-page) .sales-tags { margin-top: 16px; }
.sales-page:not(.lesson-page) .sales-hero-art .asset-slot { aspect-ratio: auto; overflow: visible; }
.sales-page:not(.lesson-page) .sales-hero-art .asset-slot img { width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; }
.sales-page:not(.lesson-page) .kit-sales-hero { padding: 24px 0 58px; text-align: center; }
.kit-sales-hero .kit-hero-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 820px); margin-inline: auto; gap: 24px; text-align: center; }
.sales-page .kit-hero-grid .sales-hero-copy { display: grid; justify-items: center; text-align: center; }
.kit-hero-grid .sales-lead { max-width: 650px; margin-inline: auto; text-align: center; }
.kit-hero-grid .kit-hero-art { order: 0; width: 100%; max-width: 390px; margin-inline: auto; }
.kit-hero-grid .kit-hero-art img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; margin-inline: auto; border-radius: var(--radius-md); }
.kit-hero-art .lesson-vsl-stage { display: grid; place-items: center; width: 100%; aspect-ratio: 9/16; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-md); background: radial-gradient(circle at 50% 36%, rgb(17 87 135 / 45%), transparent 42%), linear-gradient(160deg, #0c3f62 0%, #061c2b 52%, #020a0f 100%); box-shadow: 0 18px 44px rgb(1 8 13 / 20%); }
.kit-hero-art .lesson-vsl-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #020a0f; object-fit: contain; }
.kit-hero-offer { display: grid; justify-items: center; width: 100%; }
.kit-hero-offer .sales-price { margin-top: 0; }
.kit-hero-offer .sales-tags { margin-top: 16px; }
.kit-hero-offer .cta-group .btn { width: min(100%, 320px); }
.sales-ribbon { padding: 16px 0; background: var(--mk-blue); color: #fff; }
.sales-ribbon .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.sales-product-gallery { max-width: 900px; margin: 36px auto 0; }
.sales-product-gallery .gallery-slide { align-items: center; }
.sales-product-gallery .gallery-slide .asset-slot { display: grid; place-items: center; overflow: visible; border: 0; border-radius: 0; }
.sales-product-gallery .gallery-slide img { width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border: 0; }
.kit-detail-gallery .gallery-slide img { width: min(100%, 620px); }
.touca-detail-gallery .gallery-slide img { width: min(100%, 720px); }
.sales-product-gallery .gallery-slide figcaption { width: 100%; overflow: hidden; padding-inline: 4px; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.variant-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.variant-card .asset-slot { aspect-ratio: 1/1; border: 0; border-radius: 0; }
.variant-card figcaption { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; color: var(--mk-blue); font-size: 13px; font-weight: 600; text-align: center; }
.variant-swatch { width: 15px; height: 15px; border: 1px solid #01080d20; border-radius: 50%; background: var(--swatch); }
.variant-carousel { width: min(100%, 760px); margin: 22px auto 0; }
.variant-carousel .gallery-slide { padding-inline: 6px; background: transparent; }
.variant-carousel .variant-card { height: 100%; }
.variant-carousel .variant-card .asset-slot { aspect-ratio: 1; border: 0; border-radius: 0; }
.variant-carousel .variant-card img { width: 100%; height: 100%; object-fit: contain; }
.variant-carousel .gallery-bottom { justify-content: center; }
.variant-carousel .gallery-bottom > p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sales-order { max-width: 760px; margin: 24px auto 0; padding: 16px; border: 1px solid var(--mk-blue); border-radius: var(--radius-md); background: #fff; }
.sales-order > h3 { color: var(--mk-blue); font-size: 22px; text-align: center; }
.order-variants { display: grid; gap: 7px; margin-top: 15px; }
.order-variant { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 5px 7px 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.order-option { display: flex; align-items: center; gap: 8px; min-width: 0; }
.order-option strong { min-width: 0; color: var(--mk-blue); font-size: 13px; line-height: 1.25; text-transform: uppercase; }
.order-swatches { display: inline-flex; flex: 0 0 auto; gap: 3px; }
.order-swatch { display: block; width: 14px; height: 14px; border: 1px solid #01080d24; border-radius: 50%; background: var(--swatch); }
.quantity-control { display: inline-flex; align-items: stretch; min-height: 44px; overflow: hidden; border: 1px solid var(--mk-blue); border-radius: var(--radius-sm); background: #fff; }
.quantity-control button { width: 44px; min-height: 44px; border: 0; color: var(--mk-blue); background: var(--surface); font-size: 22px; cursor: pointer; }
.quantity-control button:disabled { opacity: .38; cursor: default; }
.quantity-control input { appearance: textfield; width: 42px; min-height: 44px; border: 0; border-inline: 1px solid var(--line); text-align: center; color: var(--mk-blue); background: #fff; font: 600 15px/1 Inter, sans-serif; }
.quantity-control input::-webkit-inner-spin-button { appearance: none; }
.order-summary { display: grid; gap: 6px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.order-total { display: flex; justify-content: space-between; gap: 12px; color: var(--mk-blue); }
.order-total strong { font-size: 18px; }
.sales-order > .btn { display: flex; width: 100%; margin-top: 14px; }
.sales-order > .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.order-status:focus { outline: none; }

@media (min-width: 680px) {
  .variant-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sales-order { padding: 20px; }
}

@media (max-width: 430px) {
  .sales-page:not(.lesson-page) .sales-hero { padding-bottom: 28px; }
  .sales-page:not(.lesson-page) .kit-sales-hero { padding: 18px 0 44px; }
  .kit-sales-hero .container { width: calc(100% - 28px); }
  .sales-page:not(.lesson-page) .sales-hero-grid { gap: 20px; }
  .sales-page:not(.lesson-page) .kit-hero-grid { gap: 18px; }
  .touca-hero-art .asset-slot { height: auto; max-height: none; aspect-ratio: auto; overflow: visible; }
  .touca-hero-art .asset-slot img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-md); }
  .variant-grid { gap: 10px; }
  .variant-carousel { margin-top: 18px; }
  .variant-carousel .gallery-slide { padding-inline: 4px; }
  .variant-card figcaption { gap: 6px; padding: 9px 5px; font-size: 12px; }
  .sales-product-gallery .gallery-slide figcaption { font-size: 12px; }
  .sales-order { padding: 12px; }
  .order-option { gap: 6px; }
  .order-option strong { font-size: 12px; }
  .order-swatch { width: 12px; height: 12px; }
  .sales-ribbon { padding: 12px 0; }
  .sales-ribbon .container { gap: 8px 18px; line-height: 1.45; }
}