/*
 * The ordering guide's steps (DESIGN.md §3.10; Modules\Legal\GuideScenes, guide.js): a
 * wireframe scene per step that plays once when the step comes up. From 1024 px the steps
 * sit beside a stage that stays in view and plays the step in the middle of the screen;
 * below that every step shows its own scene on top. Without the script, or with reduced
 * motion, every scene rests on its last frame.
 *
 * A scene is a 4:3 box measured in its own width (cqw): 100 wide, 75 high. The browser
 * window sits 6 in from the sides and the top; its screen, under the 7 high bar, is 88 × 62
 * and every part is placed on that screen. An animated part (.hs-gs-a) names its keyframes
 * (--a), length (--len) and start (--at) in custom properties; its own style is its last
 * frame.
 */

/* ─── The steps around the stage ─────────────────────────────────────────── */

.hs-lpage-step:has(> .hs-gscene) {
  flex-wrap: wrap;
  overflow: hidden;
}

/* The scene tops its step, edge to edge. */
.hs-lpage-step > .hs-gscene {
  flex: 0 0 calc(100% + 32px);
  margin: -16px -16px 2px;
  border-radius: 0;
}

.hs-lpage-step:has(> .hs-gscene) .hs-lpage-step__body {
  flex: 1 1 0;
}

/* The dashed path joined the icons; the scenes now stand between them. */
.hs-lpage-step:has(> .hs-gscene)::before {
  content: none;
}

.hs-guide-stage {
  display: none;
}

@media (min-width: 1024px) {
  .hs-guide-tour.is-ready {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: start;
    margin-top: 20px;
  }

  .hs-lpage .hs-guide-tour.is-ready .hs-lpage-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
  }

  .hs-guide-tour.is-ready .hs-lpage-step > .hs-gscene {
    display: none;
  }

  .hs-guide-tour.is-ready .hs-lpage-step {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
  }

  .hs-guide-tour.is-ready .hs-lpage-step:hover {
    box-shadow:
      0 0 0 1px #f1c4a3,
      0 10px 22px -18px rgb(31 37 71 / 40%);
  }

  .hs-guide-tour.is-ready .hs-lpage-step.is-active {
    box-shadow:
      0 0 0 2px #f2711c,
      0 16px 30px -20px rgb(194 65 12 / 55%);
  }

  .hs-guide-tour.is-ready .hs-lpage-step__icon {
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .hs-guide-tour.is-ready .hs-lpage-step.is-active .hs-lpage-step__icon {
    background: #c2410c;
    color: #fff;
  }

  .hs-guide-tour.is-ready .hs-lpage-step.is-active .hs-lpage-step__icon::after {
    background: var(--hs-ink, #1f2547);
  }

  /* The stage: the step's scene, a bar per step, "3 / 9" and the title, the buttons. */
  .hs-guide-tour.is-ready .hs-guide-stage {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
    display: block;
    padding: 14px;
    border-radius: calc(24px * var(--hs-corner-scale, 1));
    corner-shape: var(--hs-corner-shape, round);
    background: var(--hs-surface, #fff);
    box-shadow:
      0 0 0 1px rgb(31 37 71 / 6%),
      0 24px 48px -30px rgb(194 65 12 / 45%);
  }
}

.hs-guide-stage__view .hs-gscene {
  border-radius: var(--hs-lpage-inner-r, 16px);
}

.hs-guide-stage__progress {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

.hs-guide-stage__progress > i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #f3e3d6;
  transition: background-color 0.3s ease;
}

.hs-guide-stage__progress > i.is-done {
  background: #f2711c;
}

.hs-guide-stage__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.hs-lpage .hs-guide-stage__caption {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.hs-guide-stage__count {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--hs-r-pill, 999px);
  background: #fff0e3;
  color: #c2410c;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.hs-guide-stage__title {
  overflow: hidden;
  color: var(--hs-ink, #1f2547);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-guide-stage__nav {
  display: flex;
  flex: none;
  gap: 6px;
}

.hs-lpage .hs-guide-stage__btn {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hs-surface, #fff);
  box-shadow: 0 0 0 1px rgb(31 37 71 / 14%);
  color: var(--hs-ink, #1f2547);
  line-height: 1;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.hs-lpage .hs-guide-stage__btn:hover {
  background: var(--hs-surface, #fff);
  box-shadow: 0 0 0 1.5px #c2410c;
  color: #c2410c;
}

.hs-lpage .hs-guide-stage__btn:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

.hs-lpage .hs-guide-stage__btn:disabled {
  box-shadow: 0 0 0 1px rgb(31 37 71 / 14%);
  color: var(--hs-ink, #1f2547);
  opacity: 0.35;
  cursor: default;
}

/* ─── A scene ────────────────────────────────────────────────────────────── */

.hs-gscene {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  border-radius: var(--hs-lpage-inner-r, 16px);
  background:
    radial-gradient(120% 90% at 88% 0%, #ffe0c7 0%, transparent 60%), linear-gradient(160deg, #fff7f0, #ffeadb);
  color: var(--hs-ink, #1f2547);
  line-height: 1.2;
  text-align: left;
  pointer-events: none;
  user-select: none;
}

.hs-gscene svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hs-gscene__win {
  position: absolute;
  inset: 6cqw 6cqw 0;
  overflow: hidden;
  border-radius: 3cqw 3cqw 0 0;
  background: #fff;
  box-shadow:
    0 0 0 0.3cqw rgb(31 37 71 / 6%),
    0 3cqw 8cqw -3cqw rgb(194 65 12 / 35%);
}

.hs-gscene__bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  gap: 1.2cqw;
  align-items: center;
  height: 7cqw;
  padding: 0 2.6cqw;
  border-bottom: 0.25cqw solid #eef0f5;
}

.hs-gscene__bar > i {
  flex: none;
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: #ffc9b0;
}

.hs-gscene__bar > i:nth-child(2) {
  background: #ffe0a3;
}

.hs-gscene__bar > i:nth-child(3) {
  background: #c6e9cf;
}

.hs-gscene__url {
  display: flex;
  gap: 0.8cqw;
  align-items: center;
  height: 4cqw;
  margin: 0 auto;
  padding: 0 3cqw;
  border-radius: 2cqw;
  background: #f3f5f9;
  color: #5b6180;
  font-size: 2.1cqw;
  font-weight: 700;
  transform: translateX(-3cqw);
}

.hs-gscene__url svg {
  width: 2.2cqw;
  height: 2.2cqw;
}

.hs-gscene__screen {
  position: absolute;
  inset: 7cqw 0 0;
}

.hs-gscene__screen > * {
  position: absolute;
}

/* The parts. */
.hs-gs-h {
  font-size: 3.6cqw;
  font-weight: 900;
  white-space: nowrap;
}

.hs-gs-sk {
  height: 1.4cqw;
  border-radius: 1cqw;
  background: #eceff5;
}

.hs-gs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3cqw;
  background: #c2410c;
  color: #fff;
  font-size: 2.5cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gs-btn--line {
  background: #fff;
  box-shadow: inset 0 0 0 0.3cqw var(--hs-ink, #1f2547);
  color: var(--hs-ink, #1f2547);
}

.hs-gs-field {
  display: flex;
  align-items: center;
  padding: 0 1.8cqw;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: inset 0 0 0 0.3cqw #dfe3ec;
  font-size: 2.5cqw;
  font-weight: 700;
  white-space: pre;
}

.hs-gs-label {
  color: #5b6180;
  font-size: 2.2cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gs-typed {
  white-space: pre;
}

.hs-gs-stepper {
  display: flex;
  border-radius: 3cqw;
  box-shadow: inset 0 0 0 0.3cqw #dfe3ec;
  font-size: 2.6cqw;
  font-weight: 800;
}

.hs-gs-stepper > span {
  display: grid;
  flex: 1;
  place-items: center;
}

.hs-gs-stepper__num {
  position: relative;
  overflow: hidden;
}

.hs-gs-stepper__num > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.hs-gs-swap > span {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}

.hs-gs-tap {
  width: 7cqw;
  height: 7cqw;
  margin: -3.5cqw 0 0 -3.5cqw;
  border-radius: 50%;
  background: rgb(242 113 28 / 30%);
  opacity: 0;
}

.hs-gs-cursor {
  top: 0;
  left: 0;
  z-index: 2;
  width: 4.6cqw;
  height: 4.6cqw;
  margin: -0.48cqw 0 0 -0.58cqw;
  filter: drop-shadow(0 0.4cqw 0.6cqw rgb(31 37 71 / 30%));
}

.hs-gs-cursor path {
  fill: var(--hs-ink, #1f2547);
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* ─── Playing ────────────────────────────────────────────────────────────── */

.hs-gs-a {
  --a: none;
  --len: 0.35s;
  --at: 0s;
  --fill: both;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Held at the first frame until the scene plays; replaying drops and restarts them. */
.hs-guide-tour.is-ready .hs-gs-a {
  animation: var(--a) var(--len) var(--ease) var(--at) 1 var(--fill) paused;
}

.hs-guide-tour.is-ready .hs-gscene.is-playing .hs-gs-a {
  animation-play-state: running;
}

.hs-gscene.is-reset .hs-gs-a {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hs-gscene .hs-gs-a {
    animation: none !important;
  }
}

.hs-gscene .hs-gs-tap {
  --a: hs-gs-ripple;
  --len: 0.55s;
  --ease: ease-out;
}

.hs-gscene .hs-gs-cursor {
  --ease: cubic-bezier(0.45, 0, 0.25, 1);
}

.hs-gscene .hs-gs-was {
  opacity: 0;
  --a: hs-gs-out;
  --len: 0.3s;
}

.hs-gscene .hs-gs-now {
  --a: hs-gs-in;
  --len: 0.3s;
}

.hs-gscene .hs-gs-typed > .hs-gs-a {
  --a: hs-gs-show;
  --len: 0.01s;
  --ease: linear;
  --at: calc(var(--t, 0s) + var(--i, 0) * var(--step, 0.06s));
}

.hs-gscene .hs-gs-btn.hs-gs-a {
  --a: hs-gs-press;
  --len: 0.3s;
}

.hs-gscene .hs-gs-field.hs-gs-a {
  --a: hs-gs-focus;
  --fill: forwards;
  --ease: linear;
}

@keyframes hs-gs-show {
  from {
    opacity: 0;
  }
}

@keyframes hs-gs-in {
  from {
    opacity: 0;
    translate: 0 1.4cqw;
  }
}

@keyframes hs-gs-out {
  from {
    opacity: 1;
    translate: 0 0;
  }

  to {
    opacity: 0;
    translate: 0 -1.4cqw;
  }
}

@keyframes hs-gs-hold {
  0% {
    opacity: 0;
    translate: 0 1.4cqw;
  }

  8%,
  92% {
    opacity: 1;
    translate: 0 0;
  }

  100% {
    opacity: 0;
    translate: 0 -1.4cqw;
  }
}

@keyframes hs-gs-hide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes hs-gs-pop {
  0% {
    opacity: 0;
    scale: 0;
  }

  60% {
    opacity: 1;
    scale: 1.25;
  }
}

@keyframes hs-gs-press {
  45% {
    scale: 0.92;
  }
}

@keyframes hs-gs-ripple {
  0% {
    opacity: 0;
    scale: 0.3;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    scale: 1.6;
  }
}

@keyframes hs-gs-grow {
  from {
    scale: 0 1;
  }
}

@keyframes hs-gs-drop {
  0% {
    opacity: 0;
    translate: 0 -3cqw;
  }

  70% {
    opacity: 1;
    translate: 0 0.4cqw;
  }
}

@keyframes hs-gs-focus {
  0%,
  94% {
    box-shadow:
      inset 0 0 0 0.3cqw #f2711c,
      0 0 0 0.9cqw rgb(242 113 28 / 18%);
  }
}

/* ─── 1. Choosing products ───────────────────────────────────────────────── */

.hs-gs-top {
  top: 0;
  left: 0;
  width: 88cqw;
  height: 7cqw;
  border-bottom: 0.25cqw solid #eef0f5;
}

.hs-gs-top > * {
  position: absolute;
}

.hs-gs-logo {
  top: 1.8cqw;
  left: 3cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 1cqw;
  background: linear-gradient(135deg, #ff9a2e, #f2711c);
}

.hs-gs-top__sk {
  top: 2.8cqw;
  left: 7.8cqw;
  width: 12cqw;
}

.hs-gs-cart {
  top: 1.5cqw;
  left: 79cqw;
  width: 4cqw;
  height: 4cqw;
}

.hs-gs-badge {
  position: absolute;
  top: -1.1cqw;
  left: 2.4cqw;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 3.4cqw;
  height: 3.4cqw;
  padding: 0 0.6cqw;
  border: 0.35cqw solid #fff;
  border-radius: 1.7cqw;
  background: #c2410c;
  color: #fff;
  font-size: 1.9cqw;
  font-weight: 900;
}

.hs-gs-photo {
  top: 11cqw;
  left: 4cqw;
  display: grid;
  place-items: center;
  width: 34cqw;
  height: 34cqw;
  border-radius: 2.6cqw;
  background: linear-gradient(145deg, #ffeedf, #ffd3ad);
  color: #c2410c;
}

.hs-gscene .hs-gs-photo svg {
  width: 15cqw;
  height: 15cqw;
}

.hs-gs-thumbs {
  top: 47.5cqw;
  left: 4cqw;
  display: flex;
  gap: 1.6cqw;
}

.hs-gs-thumbs > i {
  width: 7cqw;
  height: 7cqw;
  border-radius: 1.4cqw;
  background: #f4f5f9;
}

.hs-gs-thumbs > i:first-child {
  background: #ffe6d1;
  box-shadow: inset 0 0 0 0.3cqw #f2711c;
}

.hs-gs-name {
  top: 11.5cqw;
  left: 43cqw;
  max-width: 41cqw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-gs-sk--a {
  top: 17.6cqw;
  left: 43cqw;
  width: 36cqw;
}

.hs-gs-sk--b {
  top: 20.8cqw;
  left: 43cqw;
  width: 26cqw;
}

.hs-gs-price {
  top: 24.5cqw;
  left: 43cqw;
  font-size: 4.4cqw;
  font-weight: 900;
  white-space: nowrap;
}

.hs-gs-vat {
  top: 30.4cqw;
  left: 43cqw;
  color: #5b6180;
  font-size: 2.1cqw;
  font-weight: 700;
}

.hs-gs-qty {
  top: 35cqw;
  left: 43cqw;
  width: 17cqw;
  height: 6cqw;
}

.hs-gs-add {
  top: 35cqw;
  left: 62cqw;
  width: 22cqw;
  height: 6cqw;
}

.hs-gs-warn {
  top: 44.5cqw;
  left: 43cqw;
  display: flex;
  gap: 0.8cqw;
  align-items: center;
  padding: 0.9cqw 1.6cqw;
  border-radius: 2cqw;
  background: #fff4d6;
  color: #8a5a00;
  font-size: 2.1cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gscene .hs-gs-warn svg {
  width: 2.6cqw;
  height: 2.6cqw;
}

.hs-gs-fly {
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 5cqw;
  height: 5cqw;
  margin: -2.5cqw 0 0 -2.5cqw;
  border-radius: 1.2cqw;
  background: #ffd3ad;
  color: #c2410c;
  opacity: 0;
}

.hs-gscene .hs-gs-fly svg {
  width: 3.4cqw;
  height: 3.4cqw;
}

.hs-gscene--product .hs-gs-cursor {
  translate: 80cqw 39.5cqw;
  --a: hs-gs-cursor-product;
  --len: 2.1s;
  --at: 0.1s;
}

.hs-gscene--product .hs-gs-tap--1 {
  top: 39.6cqw;
  left: 58cqw;
  --at: 0.95s;
}

.hs-gscene--product .hs-gs-tap--2 {
  top: 39.5cqw;
  left: 80cqw;
  --at: 2.1s;
}

.hs-gscene--product .hs-gs-qty .hs-gs-a {
  --at: 1s;
}

.hs-gscene--product .hs-gs-add {
  --at: 2.1s;
}

.hs-gscene--product .hs-gs-fly {
  --a: hs-gs-fly;
  --len: 0.75s;
  --at: 2.25s;
  --ease: ease-in-out;
}

.hs-gscene--product .hs-gs-badge {
  --a: hs-gs-pop;
  --len: 0.45s;
  --at: 3s;
}

@keyframes hs-gs-cursor-product {
  0% {
    opacity: 0;
    translate: 70cqw 64cqw;
  }

  12% {
    opacity: 1;
  }

  40%,
  55% {
    translate: 58cqw 39.6cqw;
  }

  95%,
  100% {
    translate: 80cqw 39.5cqw;
  }
}

@keyframes hs-gs-fly {
  0% {
    opacity: 0;
    scale: 1;
    translate: 73cqw 38cqw;
  }

  12% {
    opacity: 1;
  }

  55% {
    scale: 0.8;
    translate: 79cqw 14cqw;
  }

  100% {
    opacity: 0;
    scale: 0.35;
    translate: 81cqw 3.5cqw;
  }
}

/* ─── 2. Cart ────────────────────────────────────────────────────────────── */

.hs-gs-title {
  top: 2.6cqw;
  left: 4cqw;
}

.hs-gs-row {
  left: 4cqw;
  width: 80cqw;
  height: 9cqw;
}

.hs-gs-row > * {
  position: absolute;
}

.hs-gs-row--1 {
  top: 9.5cqw;
}

.hs-gs-row--2 {
  top: 23.5cqw;
}

.hs-gs-row__thumb {
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 9cqw;
  height: 9cqw;
  border-radius: 1.8cqw;
  background: linear-gradient(145deg, #ffeedf, #ffd3ad);
  color: #c2410c;
}

.hs-gs-row--2 .hs-gs-row__thumb {
  background: linear-gradient(145deg, #eef4ff, #d7e5ff);
  color: #2563d9;
}

.hs-gscene .hs-gs-row__thumb svg {
  width: 5cqw;
  height: 5cqw;
}

.hs-gs-row__name {
  top: 1cqw;
  left: 11.5cqw;
  max-width: 28cqw;
  overflow: hidden;
  font-size: 2.6cqw;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-gs-row__sk {
  top: 5.4cqw;
  left: 11.5cqw;
  width: 16cqw;
}

.hs-gs-row__qty {
  top: 2cqw;
  left: 41cqw;
  width: 14cqw;
  height: 5cqw;
}

.hs-gs-row__price {
  top: 2.6cqw;
  right: 0;
  font-size: 2.8cqw;
  font-weight: 900;
  white-space: nowrap;
}

.hs-gs-rule {
  left: 4cqw;
  width: 80cqw;
  height: 0.25cqw;
  background: #eef0f5;
}

.hs-gs-rule--1 {
  top: 20.5cqw;
}

.hs-gs-rule--2 {
  top: 34.5cqw;
}

.hs-gs-coupon {
  top: 38.5cqw;
  left: 4cqw;
  width: 33cqw;
  height: 6cqw;
}

.hs-gs-field__hint {
  position: absolute;
  left: 1.8cqw;
  color: #5f6585;
  font-weight: 600;
  opacity: 0;
}

.hs-gs-apply {
  top: 38.5cqw;
  left: 39cqw;
  width: 14cqw;
  height: 6cqw;
}

.hs-gs-sum {
  left: 57cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 27cqw;
  height: 4cqw;
  font-size: 2.2cqw;
  white-space: nowrap;
}

.hs-gs-discount {
  top: 36.6cqw;
  color: #15803d;
  font-weight: 700;
}

.hs-gs-discount b {
  font-weight: 900;
}

.hs-gs-total {
  top: 40.8cqw;
  font-size: 2.6cqw;
  font-weight: 800;
}

.hs-gs-total__value {
  position: relative;
  height: 4cqw;
  font-size: 3.2cqw;
  font-weight: 900;
  line-height: 4cqw;
}

.hs-gs-checkout {
  top: 48.5cqw;
  left: 57cqw;
  width: 27cqw;
  height: 6.5cqw;
}

.hs-gscene--cart .hs-gs-cursor {
  translate: 79cqw 53.2cqw;
  --a: hs-gs-cursor-cart;
  --len: 4.1s;
  --at: 0.1s;
}

.hs-gscene--cart .hs-gs-tap--1 {
  top: 15.4cqw;
  left: 57.5cqw;
  --at: 0.95s;
}

.hs-gscene--cart .hs-gs-tap--2 {
  top: 42.5cqw;
  left: 30cqw;
  --at: 1.9s;
}

.hs-gscene--cart .hs-gs-tap--3 {
  top: 43cqw;
  left: 50.5cqw;
  --at: 3.15s;
}

.hs-gscene--cart .hs-gs-tap--4 {
  top: 53.2cqw;
  left: 79cqw;
  --at: 4.1s;
}

.hs-gscene--cart .hs-gs-row--1 .hs-gs-a {
  --at: 1s;
}

.hs-gscene--cart .hs-gs-swap__1 {
  opacity: 0;
  --a: hs-gs-out;
  --len: 0.3s;
}

.hs-gscene--cart .hs-gs-row__price .hs-gs-swap__2,
.hs-gscene--cart .hs-gs-total__value .hs-gs-swap__3 {
  --a: hs-gs-in;
  --len: 0.3s;
}

.hs-gscene--cart .hs-gs-total__value .hs-gs-swap__1 {
  --at: 1s;
}

.hs-gscene--cart .hs-gs-total__value .hs-gs-swap__2 {
  opacity: 0;
  --a: hs-gs-hold;
  --len: 2.35s;
  --at: 1s;
  --ease: linear;
}

.hs-gscene--cart .hs-gs-total__value .hs-gs-swap__3 {
  --at: 3.35s;
}

.hs-gscene--cart .hs-gs-coupon {
  --len: 1.3s;
  --at: 1.95s;
  --t: 2.05s;
  --step: 0.08s;
}

.hs-gscene--cart .hs-gs-field__hint {
  --a: hs-gs-hide;
  --len: 0.15s;
  --at: 2s;
}

.hs-gscene--cart .hs-gs-apply {
  --at: 3.15s;
}

.hs-gscene--cart .hs-gs-discount {
  --a: hs-gs-in;
  --at: 3.3s;
}

.hs-gscene--cart .hs-gs-checkout {
  --at: 4.1s;
}

@keyframes hs-gs-cursor-cart {
  0% {
    opacity: 0;
    translate: 66cqw 62cqw;
  }

  8% {
    opacity: 1;
  }

  19.5%,
  26.8% {
    translate: 57.5cqw 15.4cqw;
  }

  42.7%,
  64.6% {
    translate: 30cqw 42.5cqw;
  }

  73.2%,
  80.5% {
    translate: 50.5cqw 43cqw;
  }

  96.3%,
  100% {
    translate: 79cqw 53.2cqw;
  }
}

/* ─── 3. Delivery and contact details ────────────────────────────────────── */

.hs-gs-label--email {
  top: 8.4cqw;
  left: 4cqw;
}

.hs-gs-email,
.hs-gs-to,
.hs-gs-address {
  left: 4cqw;
  width: 80cqw;
  height: 5.6cqw;
}

.hs-gs-email {
  top: 11.2cqw;
}

.hs-gs-switch {
  top: 19cqw;
  left: 4cqw;
  width: 8cqw;
  height: 4.4cqw;
  border-radius: 2.2cqw;
  background: #f2711c;
}

.hs-gs-switch > i {
  position: absolute;
  top: 0.5cqw;
  left: 0.5cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.3cqw 0.6cqw rgb(31 37 71 / 25%);
  translate: 3.6cqw 0;
}

.hs-gs-switch-label {
  top: 19cqw;
  left: 14cqw;
  display: flex;
  gap: 0.8cqw;
  align-items: center;
  height: 4.4cqw;
  font-size: 2.5cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gscene .hs-gs-switch-label svg {
  width: 3cqw;
  height: 3cqw;
  color: #c2410c;
}

.hs-gs-label--to {
  top: 26cqw;
  left: 4cqw;
  width: 60cqw;
  height: 3cqw;
}

.hs-gs-label--to > span {
  position: absolute;
  top: 0;
  left: 0;
}

.hs-gs-to-now {
  color: #c2410c;
}

.hs-gs-to {
  top: 28.7cqw;
}

.hs-gs-chip {
  position: absolute;
  top: 0.9cqw;
  right: 1.2cqw;
  display: flex;
  gap: 0.6cqw;
  align-items: center;
  height: 3.8cqw;
  padding: 0 1.4cqw;
  border-radius: 1.9cqw;
  background: #fff0e3;
  color: #c2410c;
  font-size: 1.9cqw;
  font-weight: 800;
}

.hs-gscene .hs-gs-chip svg {
  width: 2.4cqw;
  height: 2.4cqw;
}

.hs-gs-label--address {
  top: 37cqw;
  left: 4cqw;
}

.hs-gs-address {
  top: 39.7cqw;
  height: 9cqw;
}

.hs-gs-address > .hs-gs-sk {
  position: absolute;
  left: 1.8cqw;
  height: 1.5cqw;
  background: #d9dde8;
  transform-origin: left center;
}

.hs-gs-address > .hs-gs-sk:first-child {
  top: 2.4cqw;
  width: 50cqw;
}

.hs-gs-address > .hs-gs-sk:nth-child(2) {
  top: 5.2cqw;
  width: 32cqw;
}

.hs-gs-pin {
  position: absolute;
  top: 2cqw;
  right: 2cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  color: #c2410c;
}

.hs-gs-next {
  top: 51.5cqw;
  left: 58cqw;
  width: 26cqw;
  height: 5.6cqw;
}

.hs-gscene--delivery .hs-gs-cursor {
  translate: 79cqw 55.6cqw;
  --a: hs-gs-cursor-delivery;
  --len: 4.3s;
  --at: 0.1s;
}

.hs-gscene--delivery .hs-gs-tap--1 {
  top: 14cqw;
  left: 44cqw;
  --at: 0.75s;
}

.hs-gscene--delivery .hs-gs-tap--2 {
  top: 21.2cqw;
  left: 8cqw;
  --at: 2.15s;
}

.hs-gscene--delivery .hs-gs-tap--3 {
  top: 31.5cqw;
  left: 44cqw;
  --at: 2.85s;
}

.hs-gscene--delivery .hs-gs-tap--4 {
  top: 55.6cqw;
  left: 79cqw;
  --at: 4.35s;
}

.hs-gscene--delivery .hs-gs-email {
  --len: 2.05s;
  --at: 0.8s;
  --t: 0.85s;
  --step: 0.045s;
}

.hs-gscene--delivery .hs-gs-switch {
  --a: hs-gs-switch-track;
  --len: 0.25s;
  --at: 2.2s;
}

.hs-gscene--delivery .hs-gs-switch > i {
  --a: hs-gs-switch-knob;
  --len: 0.25s;
  --at: 2.2s;
}

.hs-gscene--delivery .hs-gs-to-was,
.hs-gscene--delivery .hs-gs-to-now {
  --at: 2.3s;
}

.hs-gscene--delivery .hs-gs-to-was {
  opacity: 0;
  --a: hs-gs-out;
  --len: 0.3s;
}

.hs-gscene--delivery .hs-gs-to-now {
  --a: hs-gs-in;
  --len: 0.3s;
}

.hs-gscene--delivery .hs-gs-chip {
  --a: hs-gs-pop;
  --len: 0.4s;
  --at: 2.4s;
}

.hs-gscene--delivery .hs-gs-to {
  --len: 1s;
  --at: 2.9s;
  --t: 2.95s;
  --step: 0.05s;
}

.hs-gscene--delivery .hs-gs-address > .hs-gs-sk {
  --a: hs-gs-grow;
  --len: 0.4s;
  --at: 3.5s;
}

.hs-gscene--delivery .hs-gs-address > .hs-gs-sk:nth-child(2) {
  --at: 3.7s;
}

.hs-gscene--delivery .hs-gs-pin {
  --a: hs-gs-drop;
  --len: 0.4s;
  --at: 3.95s;
}

.hs-gscene--delivery .hs-gs-next {
  --at: 4.35s;
}

@keyframes hs-gs-switch-track {
  from {
    background-color: #dfe3ec;
  }
}

@keyframes hs-gs-switch-knob {
  from {
    translate: 0 0;
  }
}

@keyframes hs-gs-cursor-delivery {
  0% {
    opacity: 0;
    translate: 60cqw 62cqw;
  }

  8% {
    opacity: 1;
  }

  14%,
  37.2% {
    translate: 44cqw 14cqw;
  }

  46.5%,
  54.7% {
    translate: 8cqw 21.2cqw;
  }

  62.8%,
  81.4% {
    translate: 44cqw 31.5cqw;
  }

  97.7%,
  100% {
    translate: 79cqw 55.6cqw;
  }
}

/* ─── Parts of the later scenes ──────────────────────────────────────────── */

/* A layer over the whole screen, its parts on the screen's grid. */
.hs-gs-layer {
  inset: 0;
}

.hs-gs-layer > *,
.hs-gs-mini > *,
.hs-gs-dialog > *,
.hs-gs-3ds > *,
.hs-gs-toast > * {
  position: absolute;
}

.hs-gs-title--small {
  font-size: 3cqw;
}

.hs-gs-check {
  display: grid;
  place-items: center;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 1.1cqw;
  background: #c2410c;
  color: #fff;
}

.hs-gs-check > i {
  width: 3.2cqw;
  height: 3.2cqw;
}

.hs-gs-check-label {
  display: flex;
  gap: 0.8cqw;
  align-items: center;
  min-height: 4.4cqw;
  font-size: 2.4cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gs-check-label em,
.hs-gs-label em {
  color: #5b6180;
  font-style: normal;
  font-weight: 600;
}

.hs-gs-link {
  color: #0059b3;
  text-decoration: underline;
  text-underline-offset: 0.4cqw;
}

.hs-gs-veil {
  inset: 0;
  z-index: 1;
  background: rgb(31 37 71 / 38%);
  opacity: 0;
}

.hs-gscene .hs-gs-check.hs-gs-a {
  --a: hs-gs-tick;
  --len: 0.25s;
}

.hs-gscene .hs-gs-check > .hs-gs-a {
  --a: hs-gs-pop;
  --len: 0.35s;
}

.hs-gscene .hs-gs-veil {
  --a: hs-gs-fade-hold;
  --ease: linear;
}

@keyframes hs-gs-tick {
  from {
    background-color: #fff;
    box-shadow: inset 0 0 0 0.3cqw #c3c9d6;
  }
}

@keyframes hs-gs-fade-hold {
  0%,
  100% {
    opacity: 0;
  }

  8%,
  92% {
    opacity: 1;
  }
}

/* ─── 4. Invoice details ─────────────────────────────────────────────────── */

.hs-gs-switch--off {
  top: 9.5cqw;
  background: #dfe3ec;
}

.hs-gs-switch--off > i {
  translate: 0 0;
}

.hs-gs-switch-label--bill {
  top: 9.5cqw;
  font-size: 2.4cqw;
}

.hs-gs-bill__type {
  top: 16.6cqw;
  left: 4cqw;
}

.hs-gs-segment {
  top: 19.3cqw;
  left: 4cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 40cqw;
  height: 5.6cqw;
  border-radius: 2.8cqw;
  background: #f1f3f8;
  font-size: 2.4cqw;
  font-weight: 800;
}

.hs-gs-segment > span {
  position: relative;
  display: grid;
  place-items: center;
}

.hs-gs-segment > i {
  position: absolute;
  top: 0.5cqw;
  left: 0.5cqw;
  width: 19.5cqw;
  height: 4.6cqw;
  border-radius: 2.3cqw;
  background: #fff;
  box-shadow: 0 0.3cqw 0.8cqw rgb(31 37 71 / 18%);
  translate: 19.5cqw 0;
}

.hs-gs-row-label--1,
.hs-gs-row-label--2 {
  left: 4cqw;
}

.hs-gs-row-label--1 {
  top: 27.5cqw;
}

.hs-gs-row-label--2,
.hs-gs-row-label--3 {
  top: 38.4cqw;
}

.hs-gs-row-label--3 {
  left: 46cqw;
}

.hs-gs-row-field--1 {
  top: 30.2cqw;
  left: 4cqw;
  width: 80cqw;
  height: 5.6cqw;
}

.hs-gs-row-field--2,
.hs-gs-row-field--3 {
  top: 41.1cqw;
  width: 38cqw;
  height: 5.6cqw;
}

.hs-gs-row-field--2 {
  left: 4cqw;
}

.hs-gs-row-field--3 {
  left: 46cqw;
}

.hs-gs-tckn {
  opacity: 0;
}

.hs-gscene--invoice .hs-gs-switch {
  --a: hs-gs-switch-off-track;
  --len: 0.25s;
  --at: 0.8s;
}

.hs-gscene--invoice .hs-gs-switch > i {
  --a: hs-gs-switch-off-knob;
  --len: 0.25s;
  --at: 0.8s;
}

.hs-gscene--invoice .hs-gs-bill {
  --a: hs-gs-in;
  --at: 1.05s;
}

.hs-gscene--invoice .hs-gs-segment > i {
  --a: hs-gs-slide-right;
  --len: 0.3s;
  --at: 2s;
}

.hs-gscene--invoice .hs-gs-tckn {
  --a: hs-gs-hide;
  --len: 0.2s;
  --at: 2.05s;
}

.hs-gscene--invoice .hs-gs-corp {
  --a: hs-gs-in;
  --at: 2.3s;
}

.hs-gscene--invoice .hs-gs-corp__name {
  --len: 0.8s;
  --at: 2.8s;
  --t: 2.85s;
  --step: 0.04s;
}

.hs-gscene--invoice .hs-gs-corp__office {
  --len: 0.65s;
  --at: 3.6s;
  --t: 3.65s;
  --step: 0.05s;
}

.hs-gscene--invoice .hs-gs-corp__number {
  --len: 0.6s;
  --at: 4.3s;
  --t: 4.35s;
  --step: 0.045s;
}

.hs-gscene--invoice .hs-gs-cursor {
  translate: 78cqw 43.9cqw;
  --a: hs-gs-cursor-invoice;
  --len: 4.3s;
  --at: 0.1s;
}

.hs-gscene--invoice .hs-gs-tap--1 {
  top: 11.7cqw;
  left: 8cqw;
  --at: 0.75s;
}

.hs-gscene--invoice .hs-gs-tap--2 {
  top: 22.1cqw;
  left: 34cqw;
  --at: 1.95s;
}

.hs-gscene--invoice .hs-gs-tap--3 {
  top: 33cqw;
  left: 70cqw;
  --at: 2.8s;
}

.hs-gscene--invoice .hs-gs-tap--4 {
  top: 43.9cqw;
  left: 34cqw;
  --at: 3.6s;
}

.hs-gscene--invoice .hs-gs-tap--5 {
  top: 43.9cqw;
  left: 78cqw;
  --at: 4.3s;
}

@keyframes hs-gs-switch-off-track {
  from {
    background-color: #f2711c;
  }
}

@keyframes hs-gs-switch-off-knob {
  from {
    translate: 3.6cqw 0;
  }
}

@keyframes hs-gs-slide-right {
  from {
    translate: 0 0;
  }
}

@keyframes hs-gs-cursor-invoice {
  0% {
    opacity: 0;
    translate: 60cqw 60cqw;
  }

  8% {
    opacity: 1;
  }

  14%,
  30.2% {
    translate: 8cqw 11.7cqw;
  }

  41.9%,
  51.2% {
    translate: 34cqw 22.1cqw;
  }

  61.6%,
  72.1% {
    translate: 70cqw 33cqw;
  }

  80.2%,
  87.2% {
    translate: 34cqw 43.9cqw;
  }

  96.5%,
  100% {
    translate: 78cqw 43.9cqw;
  }
}

/* ─── 5. Gift options ────────────────────────────────────────────────────── */

.hs-gs-wrapbox {
  top: 9cqw;
  left: 68cqw;
  width: 16cqw;
  height: 16cqw;
  border-radius: 2.4cqw;
  background: linear-gradient(145deg, #fff2e6, #ffd9b8);
  color: #c2410c;
}

.hs-gs-wrapbox > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.hs-gscene .hs-gs-wrapbox svg {
  width: 9cqw;
  height: 9cqw;
}

.hs-gs-check--wrap,
.hs-gs-check--receipt {
  left: 4cqw;
}

.hs-gs-check--wrap,
.hs-gs-check-label--wrap {
  top: 10.4cqw;
}

.hs-gs-check-label--wrap,
.hs-gs-check-label--receipt {
  left: 10.5cqw;
}

.hs-gs-note-label {
  top: 18.4cqw;
  left: 4cqw;
}

.hs-gs-note {
  top: 21.1cqw;
  left: 4cqw;
  align-items: flex-start;
  width: 58cqw;
  height: 10.5cqw;
  padding-top: 1.4cqw;
}

.hs-gs-check--receipt,
.hs-gs-check-label--receipt {
  top: 35cqw;
}

.hs-gs-mini {
  top: 43cqw;
  left: 4cqw;
  width: 80cqw;
  height: 15cqw;
  border-radius: 2cqw;
  background: #f8fafc;
}

.hs-gs-mini__row {
  left: 2.4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 75.2cqw;
  height: 3.6cqw;
  font-size: 2.3cqw;
  white-space: nowrap;
}

.hs-gs-mini__row--1 {
  top: 1.4cqw;
}

.hs-gs-mini__row--2 {
  top: 5.4cqw;
  color: #c2410c;
  font-weight: 800;
}

.hs-gs-mini__row--3 {
  top: 9.8cqw;
  font-size: 2.7cqw;
  font-weight: 900;
}

/* A free gift wrap adds no line: the total comes right under the subtotal. */
.hs-gs-mini--free {
  height: 11cqw;
}

.hs-gs-mini--free .hs-gs-mini__row--3 {
  top: 5.8cqw;
}

.hs-gs-mini__value {
  position: relative;
  height: 3.6cqw;
  line-height: 3.6cqw;
}

.hs-gscene--gift .hs-gs-check--wrap {
  --at: 0.8s;
}

.hs-gscene--gift .hs-gs-check--wrap > i {
  --at: 0.82s;
}

.hs-gscene--gift .hs-gs-wrapbox .hs-gs-a {
  --at: 0.85s;
}

.hs-gscene--gift .hs-gs-options {
  --a: hs-gs-in;
  --at: 1s;
}

.hs-gscene--gift .hs-gs-mini__fee {
  --a: hs-gs-in;
  --at: 1.15s;
}

.hs-gscene--gift .hs-gs-mini__value .hs-gs-swap__1 {
  opacity: 0;
  --a: hs-gs-out;
  --len: 0.3s;
  --at: 1.15s;
}

.hs-gscene--gift .hs-gs-mini__value .hs-gs-swap__2 {
  --a: hs-gs-in;
  --len: 0.3s;
  --at: 1.15s;
}

.hs-gscene--gift .hs-gs-note {
  --len: 1.2s;
  --at: 1.65s;
  --t: 1.7s;
  --step: 0.06s;
}

.hs-gscene--gift .hs-gs-check--receipt {
  --at: 3.2s;
}

.hs-gscene--gift .hs-gs-check--receipt > i {
  --at: 3.22s;
}

.hs-gscene--gift .hs-gs-cursor {
  translate: 6.2cqw 37.2cqw;
  --a: hs-gs-cursor-gift;
  --len: 3.1s;
  --at: 0.1s;
}

.hs-gscene--gift .hs-gs-tap--1 {
  top: 12.6cqw;
  left: 6.2cqw;
  --at: 0.75s;
}

.hs-gscene--gift .hs-gs-tap--2 {
  top: 26cqw;
  left: 44cqw;
  --at: 1.65s;
}

.hs-gscene--gift .hs-gs-tap--3 {
  top: 37.2cqw;
  left: 6.2cqw;
  --at: 3.15s;
}

@keyframes hs-gs-cursor-gift {
  0% {
    opacity: 0;
    translate: 60cqw 60cqw;
  }

  8% {
    opacity: 1;
  }

  19.4%,
  33.9% {
    translate: 6.2cqw 12.6cqw;
  }

  48.4%,
  83.9% {
    translate: 44cqw 26cqw;
  }

  96.8%,
  100% {
    translate: 6.2cqw 37.2cqw;
  }
}

/* ─── 6. Payment method ──────────────────────────────────────────────────── */

/* The methods one under another, the chosen one's description under it, the total last. */
.hs-gs-pays {
  top: 10cqw;
  left: 4cqw;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  width: 80cqw;
}

.hs-gs-pays > * {
  position: relative;
  flex: none;
}

.hs-gs-pay {
  height: 8cqw;
  border-radius: 1.8cqw;
  background: #fff;
  box-shadow: inset 0 0 0 0.3cqw #dfe3ec;
}

.hs-gs-pay > * {
  position: absolute;
}

.hs-gs-pay__radio {
  top: 2.3cqw;
  left: 2.4cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.3cqw #c3c9d6;
}

.hs-gs-pay__radio > i {
  position: absolute;
  inset: 0.8cqw;
  border-radius: 50%;
  background: #f2711c;
}

.hs-gs-pay__icon {
  top: 1.8cqw;
  left: 8cqw;
  width: 4.4cqw;
  height: 4.4cqw;
  color: #4a5072;
}

.hs-gs-pay__title {
  top: 2.4cqw;
  left: 14.5cqw;
  font-size: 2.6cqw;
  font-weight: 800;
  white-space: nowrap;
}

.hs-gs-pay--on {
  background: #fff8f3;
  box-shadow: inset 0 0 0 0.35cqw #f2711c;
}

.hs-gs-pay--on .hs-gs-pay__radio {
  box-shadow: inset 0 0 0 0.35cqw #f2711c;
}

.hs-gs-pay--on .hs-gs-pay__icon {
  color: #c2410c;
}

.hs-gs-pay__about {
  display: -webkit-box;
  margin-top: -0.6cqw;
  overflow: hidden;
  padding: 1.4cqw 2cqw;
  border-radius: 1.6cqw;
  background: #f8fafc;
  color: #4a5072;
  font-size: 2.1cqw;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  box-sizing: border-box;
}

.hs-gs-pays .hs-gs-pay-total {
  left: auto;
  width: auto;
  margin-top: 1.4cqw;
  font-size: 2.6cqw;
  font-weight: 800;
}

.hs-gscene--payment .hs-gs-pay--on {
  --a: hs-gs-pick;
  --len: 0.3s;
  --at: 0.9s;
}

.hs-gscene--payment .hs-gs-pay__radio > i {
  --a: hs-gs-pop;
  --len: 0.35s;
  --at: 0.9s;
}

.hs-gscene--payment .hs-gs-pay__about {
  --a: hs-gs-in;
  --at: 1.1s;
}

.hs-gscene--payment .hs-gs-cursor {
  translate: 72cqw 14cqw;
  --a: hs-gs-cursor-payment;
  --len: 0.8s;
  --at: 0.1s;
}

.hs-gscene--payment .hs-gs-tap--1 {
  top: 14cqw;
  left: 72cqw;
  --at: 0.9s;
}

@keyframes hs-gs-pick {
  from {
    background-color: #fff;
    box-shadow: inset 0 0 0 0.3cqw #dfe3ec;
  }
}

@keyframes hs-gs-cursor-payment {
  0% {
    opacity: 0;
    translate: 60cqw 60cqw;
  }

  10% {
    opacity: 1;
  }

  95%,
  100% {
    translate: 72cqw 14cqw;
  }
}

/* ─── 7. Pre-contract information and acceptance ─────────────────────────── */

.hs-gs-terms {
  top: 8cqw;
  left: 4cqw;
  display: grid;
  align-content: start;
  gap: 1.6cqw;
  box-sizing: border-box;
  width: 80cqw;
  height: 16cqw;
  padding: 2cqw 2.4cqw;
  border-radius: 1.6cqw;
  background: #f8fafc;
}

.hs-gs-terms__row {
  display: flex;
  gap: 3cqw;
}

.hs-gs-terms__row > i:first-child {
  flex: 0 0 16cqw;
  background: #e1e5ee;
}

.hs-gs-terms__row > i:last-child {
  flex: 0 0 36cqw;
}

.hs-gs-check--terms {
  top: 28cqw;
  left: 4cqw;
}

.hs-gs-check-label--terms {
  top: 27.6cqw;
  display: block;
  left: 10.5cqw;
  width: 73cqw;
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
}

.hs-gs-order {
  top: 40cqw;
  left: 4cqw;
  width: 80cqw;
  height: 6.5cqw;
}

.hs-gs-dialog {
  top: 4cqw;
  left: 10cqw;
  z-index: 1;
  width: 68cqw;
  height: 54cqw;
  border-radius: 2.4cqw;
  background: #fff;
  box-shadow: 0 2cqw 6cqw -1cqw rgb(31 37 71 / 40%);
  opacity: 0;
}

.hs-gs-dialog__title {
  top: 2.6cqw;
  left: 3cqw;
  font-size: 2.8cqw;
  font-weight: 900;
  white-space: nowrap;
}

.hs-gs-dialog__x {
  top: 2.4cqw;
  right: 3cqw;
  width: 3.2cqw;
  height: 3.2cqw;
  color: #5b6180;
}

.hs-gs-dialog__body {
  top: 8.4cqw;
  left: 3cqw;
  width: 62cqw;
  height: 34cqw;
  overflow: hidden;
}

.hs-gs-dialog__scroll {
  display: grid;
  gap: 1.5cqw;
}

.hs-gs-dialog__doc {
  margin-top: 1cqw;
  font-size: 2.3cqw;
  font-weight: 900;
}

.hs-gs-dialog__scroll > i:nth-of-type(4n + 2) {
  width: 80%;
}

.hs-gs-dialog__scroll > i:nth-of-type(4n) {
  width: 60%;
}

.hs-gs-dialog__cancel,
.hs-gs-dialog__accept {
  top: 45.5cqw;
  height: 5.6cqw;
  font-size: 2.1cqw;
}

.hs-gs-dialog__cancel {
  left: 19cqw;
  width: 20cqw;
}

.hs-gs-dialog__accept {
  left: 41cqw;
  width: 24cqw;
}

.hs-gscene--consent .hs-gs-veil {
  --len: 2.1s;
  --at: 0.85s;
}

.hs-gscene--consent .hs-gs-dialog {
  --a: hs-gs-hold;
  --len: 2.1s;
  --at: 0.85s;
  --ease: linear;
}

.hs-gscene--consent .hs-gs-dialog__scroll {
  --a: hs-gs-read;
  --len: 1.2s;
  --at: 1.3s;
  --ease: ease-in-out;
}

.hs-gscene--consent .hs-gs-dialog__accept {
  --at: 2.65s;
}

.hs-gscene--consent .hs-gs-check--terms {
  --at: 3s;
}

.hs-gscene--consent .hs-gs-check--terms > i {
  --at: 3.02s;
}

.hs-gscene--consent .hs-gs-cursor {
  translate: 69cqw 53.2cqw;
  --a: hs-gs-cursor-consent;
  --len: 2.6s;
  --at: 0.1s;
}

.hs-gscene--consent .hs-gs-tap--1 {
  top: 30.2cqw;
  left: 6.2cqw;
  --at: 0.75s;
}

.hs-gscene--consent .hs-gs-tap--2 {
  top: 53.2cqw;
  left: 69cqw;
  z-index: 1;
  --at: 2.65s;
}

@keyframes hs-gs-read {
  to {
    translate: 0 -9cqw;
  }
}

@keyframes hs-gs-cursor-consent {
  0% {
    opacity: 0;
    translate: 60cqw 62cqw;
  }

  8% {
    opacity: 1;
  }

  23%,
  50% {
    translate: 6.2cqw 30.2cqw;
  }

  96%,
  100% {
    translate: 69cqw 53.2cqw;
  }
}

/* ─── 8. Confirming the order ────────────────────────────────────────────── */

.hs-gs-line {
  left: 4cqw;
  width: 80cqw;
  font-size: 2.5cqw;
}

.hs-gs-line--1 {
  top: 10cqw;
}

.hs-gs-line--2 {
  top: 15cqw;
}

.hs-gs-rule--confirm {
  top: 20.6cqw;
}

.hs-gs-line--total {
  top: 22.8cqw;
  font-size: 3cqw;
  font-weight: 900;
}

.hs-gs-free {
  color: #15803d;
}

.hs-gs-warn--pay {
  top: 30.6cqw;
  left: 4cqw;
  font-size: 2.2cqw;
}

.hs-gs-place {
  top: 38.5cqw;
  left: 4cqw;
  width: 80cqw;
  height: 7cqw;
  border-radius: 3.5cqw;
  background: #15803d;
  font-size: 2.6cqw;
}

.hs-gs-place > span {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 1cqw;
  align-items: center;
  justify-content: center;
}

.hs-gs-place__label,
.hs-gs-place__spin {
  opacity: 0;
}

.hs-gs-place__spin > i {
  width: 3.6cqw;
  height: 3.6cqw;
  border: 0.55cqw solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

.hs-gscene .hs-gs-place__done svg {
  width: 3.2cqw;
  height: 3.2cqw;
}

.hs-gs-3ds {
  top: 5cqw;
  left: 16cqw;
  z-index: 1;
  width: 56cqw;
  height: 46cqw;
  border-radius: 2.4cqw;
  background: #fff;
  box-shadow: 0 2cqw 6cqw -1cqw rgb(31 37 71 / 40%);
  opacity: 0;
}

.hs-gs-3ds > * {
  right: 0;
  left: 0;
  margin-inline: auto;
}

.hs-gs-3ds__icon {
  top: 4cqw;
  display: grid;
  place-items: center;
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  background: #fff0e3;
  color: #c2410c;
}

.hs-gscene .hs-gs-3ds__icon svg {
  width: 5.6cqw;
  height: 5.6cqw;
}

.hs-gs-3ds__title {
  top: 16.5cqw;
  font-size: 3cqw;
  font-weight: 900;
  text-align: center;
}

.hs-gs-3ds__sk {
  top: 22.5cqw;
  width: 32cqw;
}

.hs-gs-3ds__code {
  top: 27cqw;
  justify-content: center;
  width: 30cqw;
  height: 6cqw;
  font-size: 3cqw;
  letter-spacing: 1cqw;
}

.hs-gscene--confirm .hs-gs-place.hs-gs-a {
  --a: hs-gs-turn-green;
  --len: 0.3s;
  --at: 2.4s;
}

.hs-gscene--confirm .hs-gs-place__label {
  --a: hs-gs-hide;
  --len: 0.15s;
  --at: 0.95s;
}

.hs-gscene--confirm .hs-gs-place__spin {
  --a: hs-gs-fade-hold;
  --len: 1.4s;
  --at: 1s;
  --ease: linear;
}

.hs-gscene--confirm .hs-gs-place__spin > i {
  --a: hs-gs-spin;
  --len: 1.4s;
  --at: 1s;
  --ease: linear;
}

.hs-gscene--confirm .hs-gs-place__done {
  --a: hs-gs-in;
  --at: 2.45s;
}

.hs-gscene--confirm .hs-gs-3ds-veil {
  --len: 1.6s;
  --at: 2s;
}

.hs-gscene--confirm .hs-gs-3ds {
  --a: hs-gs-hold;
  --len: 1.6s;
  --at: 2s;
  --ease: linear;
}

.hs-gscene--confirm .hs-gs-3ds__code {
  --t: 2.4s;
  --step: 0.12s;
}

/* With card payment, 3D Secure between the spinner and done. */
.hs-gscene--confirm .hs-gs-confirm--card .hs-gs-place__spin,
.hs-gscene--confirm .hs-gs-confirm--card .hs-gs-place__spin > i {
  --len: 1s;
}

.hs-gscene--confirm .hs-gs-confirm--card .hs-gs-place.hs-gs-a {
  --at: 3.6s;
}

.hs-gscene--confirm .hs-gs-confirm--card .hs-gs-place__done {
  --at: 3.65s;
}

.hs-gscene--confirm .hs-gs-cursor {
  translate: 78cqw 42cqw;
  --a: hs-gs-cursor-confirm;
  --len: 0.8s;
  --at: 0.1s;
}

.hs-gscene--confirm .hs-gs-tap--1 {
  top: 42cqw;
  left: 78cqw;
  --at: 0.85s;
}

@keyframes hs-gs-turn-green {
  from {
    background-color: #c2410c;
  }
}

@keyframes hs-gs-spin {
  to {
    rotate: 2turn;
  }
}

@keyframes hs-gs-cursor-confirm {
  0% {
    opacity: 0;
    translate: 60cqw 62cqw;
  }

  10% {
    opacity: 1;
  }

  95%,
  100% {
    translate: 78cqw 42cqw;
  }
}

/* ─── 9. Order confirmation ──────────────────────────────────────────────── */

.hs-gs-done {
  top: 4cqw;
  left: 38cqw;
  display: grid;
  place-items: center;
  width: 12cqw;
  height: 12cqw;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
}

.hs-gscene .hs-gs-done svg {
  width: 7cqw;
  height: 7cqw;
}

.hs-gs-thanks,
.hs-gs-thanks-lead {
  left: 0;
  width: 88cqw;
  text-align: center;
}

.hs-gs-thanks {
  top: 18.5cqw;
  font-size: 4.6cqw;
  font-weight: 900;
}

.hs-gs-thanks-lead {
  top: 25.4cqw;
  color: #5b6180;
  font-size: 2.6cqw;
}

.hs-gs-number {
  top: 30.8cqw;
  right: 0;
  left: 0;
  display: flex;
  gap: 1.2cqw;
  align-items: center;
  width: max-content;
  margin-inline: auto;
  padding: 0.9cqw 2cqw;
  border-radius: 3cqw;
  background: #f3f5f9;
  color: #5b6180;
  font-size: 2.2cqw;
}

.hs-gs-number b {
  color: var(--hs-ink, #1f2547);
  font-size: 2.4cqw;
  font-weight: 900;
}

.hs-gs-card {
  top: 40cqw;
  display: grid;
  align-content: start;
  gap: 1.6cqw;
  box-sizing: border-box;
  width: 38.5cqw;
  height: 17cqw;
  padding: 2.2cqw;
  border-radius: 2cqw;
  box-shadow: inset 0 0 0 0.3cqw #eef0f5;
}

.hs-gs-card--1 {
  left: 4cqw;
}

.hs-gs-card--2 {
  left: 45.5cqw;
}

.hs-gs-card > i:nth-child(1) {
  width: 70%;
}

.hs-gs-card > i:nth-child(3) {
  width: 55%;
}

.hs-gs-envelope {
  top: 34cqw;
  left: 44cqw;
  width: 5cqw;
  height: 5cqw;
  margin: -2.5cqw 0 0 -2.5cqw;
  color: #c2410c;
  opacity: 0;
}

.hs-gs-toast {
  top: 44.5cqw;
  left: 41cqw;
  z-index: 1;
  width: 43cqw;
  height: 11.5cqw;
  border-radius: 2cqw;
  background: #fff;
  box-shadow:
    0 0 0 0.3cqw rgb(31 37 71 / 6%),
    0 1.5cqw 4cqw -1cqw rgb(31 37 71 / 35%);
}

.hs-gs-toast__icon {
  top: 2.35cqw;
  left: 2cqw;
  display: grid;
  place-items: center;
  width: 6.8cqw;
  height: 6.8cqw;
  border-radius: 50%;
  background: #fff0e3;
  color: #c2410c;
}

.hs-gscene .hs-gs-toast__icon svg {
  width: 3.8cqw;
  height: 3.8cqw;
}

.hs-gs-toast__from {
  top: 2.4cqw;
  left: 10.6cqw;
  color: #5b6180;
  font-size: 1.9cqw;
  font-weight: 800;
}

.hs-gs-toast__subject {
  top: 5.4cqw;
  left: 10.6cqw;
  max-width: 31cqw;
  overflow: hidden;
  font-size: 2.2cqw;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-gscene--email .hs-gs-done {
  --a: hs-gs-pop;
  --len: 0.45s;
  --at: 0.3s;
}

.hs-gscene--email .hs-gs-thanks {
  --a: hs-gs-in;
  --at: 0.5s;
}

.hs-gscene--email .hs-gs-thanks-lead {
  --a: hs-gs-in;
  --at: 0.65s;
}

.hs-gscene--email .hs-gs-number {
  --a: hs-gs-in;
  --at: 0.8s;
}

.hs-gscene--email .hs-gs-envelope {
  --a: hs-gs-mail;
  --len: 0.55s;
  --at: 1.15s;
  --ease: ease-in-out;
}

.hs-gscene--email .hs-gs-toast {
  --a: hs-gs-toast;
  --len: 0.45s;
  --at: 1.6s;
}

@keyframes hs-gs-mail {
  0% {
    opacity: 0;
    scale: 1;
    translate: 0 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    scale: 0.6;
    translate: 11cqw 16cqw;
  }
}

@keyframes hs-gs-toast {
  from {
    opacity: 0;
    translate: 8cqw 0;
  }
}