:root {
  --z-local-underlay: -1;
  --z-local-base: 0;
  --z-local-content: 1;
  --z-local-raised: 2;
  --z-local-control: 3;
  --z-local-caption: 4;
  --z-local-navigation: 5;
  --z-editor-canvas: 100;
  --z-side-panel: 500;
  --z-header: 1000;
  --z-dropdown: 2000;
  --z-modal: 3000;
  --z-tooltip: 4000;
}

html[data-jewdiy-route="checkout"],
html[data-jewdiy-route="checkout"] body {
  max-width: 100%;
  overflow-x: clip;
}

html[data-jewdiy-route="checkout"] .topbar {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: center;
  z-index: var(--z-header) !important;
}

html[data-jewdiy-route="checkout"] .topbar > .brand {
  grid-column: 1 / span 4;
  min-width: 0;
}

html[data-jewdiy-route="checkout"] .topbar > .step-indicator {
  grid-column: 5 / span 4;
  justify-self: center;
}

html[data-jewdiy-route="checkout"] .topbar > .back-link {
  grid-column: 9 / -1;
  justify-self: end;
}

html[data-jewdiy-route="checkout"] :is(.checkout-loading-screen, .payment-modal) {
  z-index: var(--z-modal) !important;
}

html[data-jewdiy-route="checkout"] .mobile-checkout-cta {
  z-index: var(--z-side-panel) !important;
}

html[data-jewdiy-route="checkout"] .checkout-layout,
html[data-jewdiy-route="checkout"] body.checkout-empty .checkout-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

html[data-jewdiy-route="checkout"] .checkout-layout > .form-col {
  grid-column: 1 / span 7;
  min-width: 0;
}

html[data-jewdiy-route="checkout"] .checkout-layout > .summary-col {
  grid-column: 8 / -1;
  min-width: 0;
}

html[data-jewdiy-route="checkout"] .checkout-layout > .checkout-empty-state {
  grid-column: 1 / -1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  html[data-jewdiy-route="checkout"] .topbar,
  html[data-jewdiy-route="checkout"] .checkout-layout,
  html[data-jewdiy-route="checkout"] body.checkout-empty .checkout-layout {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  html[data-jewdiy-route="checkout"] .topbar > .brand { grid-column: 1 / span 3; }
  html[data-jewdiy-route="checkout"] .topbar > .step-indicator { grid-column: 4 / span 3; }
  html[data-jewdiy-route="checkout"] .topbar > .back-link { grid-column: 7 / -1; }
  html[data-jewdiy-route="checkout"] .checkout-layout > .form-col { grid-column: 1 / span 5; }
  html[data-jewdiy-route="checkout"] .checkout-layout > .summary-col { grid-column: 6 / -1; }
}

@media (min-width: 768px) and (max-width: 860px) {
  html[data-jewdiy-route="checkout"] .checkout-layout > :is(.form-col, .summary-col) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  html[data-jewdiy-route="checkout"] .topbar,
  html[data-jewdiy-route="checkout"] .checkout-layout,
  html[data-jewdiy-route="checkout"] body.checkout-empty .checkout-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html[data-jewdiy-route="checkout"] .topbar > .brand {
    grid-column: 1 / span 3;
  }

  html[data-jewdiy-route="checkout"] .topbar > .step-indicator {
    display: none !important;
  }

  html[data-jewdiy-route="checkout"] .topbar > .back-link {
    grid-column: 4;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    justify-content: center;
    justify-self: end;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
  }

  html[data-jewdiy-route="checkout"] .topbar > .back-link::before {
    content: "\2190";
    font-size: 22px;
    line-height: 1;
  }

  html[dir="rtl"][data-jewdiy-route="checkout"] .topbar > .back-link::before {
    content: "\2192";
  }

  html[data-jewdiy-route="checkout"] .summary-card-heading {
    gap: 8px;
  }

  html[data-jewdiy-route="checkout"] .summary-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.15;
  }

  html[data-jewdiy-route="checkout"] .summary-toggle-label {
    display: none !important;
  }

  html[data-jewdiy-route="checkout"] .summary-card-heading::after {
    content: "\2303";
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
  }

  html[data-jewdiy-route="checkout"] .summary-details:not([open]) .summary-card-heading::after {
    content: "\2304";
  }

  html[data-jewdiy-route="checkout"] .checkout-layout > :is(.form-col, .summary-col, .checkout-empty-state) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  html[data-jewdiy-route="checkout"] .summary-card-heading {
    gap: 6px;
    padding-inline: 10px;
    font-size: 14px;
  }

  html[data-jewdiy-route="checkout"] .summary-heading-total {
    font-size: 14px;
  }
}