/*
 * Krepling Pay drawer shell + panel restyle.
 *
 * The slide-in panel (footer-mounted, scrim) hosts the native Krepling checkout
 * markup, restyled to the Krepling Pay checkout design (reference: hifi.css).
 * Everything visual is scoped to .kp-drawer so the standalone checkout page is
 * unaffected. Design tokens below mirror hifi.css :root.
 */

/* ============================ Shell ============================ */
.kp-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(16, 15, 25, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

.kp-drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.kp-drawer {
  position: fixed;
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  max-width: 460px;
  /* width: clamp(420px, 33vw, 480px);
  max-width: 100vw; */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 22px 0 0 22px;
  box-shadow: 0 1px 2px 0 rgba(20, 19, 29, 0.06), 0 16px 48px -12px rgba(20, 19, 29, 0.32);
  transform: translateX(106%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.34, 1.05);

  /* ---- Design tokens (hifi.css :root) ---- */
  --kp-d-ink: oklch(0.18 0.01 285);
  --kp-d-ink-2: oklch(0.36 0.01 285);
  --kp-d-muted: oklch(0.55 0.012 285);
  --kp-d-hair: oklch(0.92 0.006 285);
  --kp-d-hair-2: oklch(0.96 0.006 285);
  --kp-d-surface-2: oklch(0.985 0.005 285);
  --kp-d-good: oklch(0.62 0.15 155);
  --kp-d-warn: oklch(0.58 0.21 25);
  --kp-d-brand-tint-2: oklch(0.92 0.07 305);
  --kp-d-divider: color-mix(in srgb, oklch(0.18 0.01 285) 20%, transparent);
  --kp-d-raise: 0 1px 1px rgba(20, 19, 29, 0.05), 0 3px 6px rgba(20, 19, 29, 0.08), 0 8px 18px -6px rgba(20, 19, 29, 0.16);
  --kp-d-raise-sm: 0 1px 1px rgba(20, 19, 29, 0.04), 0 2px 6px -2px rgba(20, 19, 29, 0.1);
  --kp-d-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --kp-d-bevel-on: inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
}

.kp-drawer.is-open {
  transform: translateX(0);
}

/* Layout feedback item 1 + 13: the bar previously reserved a 44px solid strip at
 * the top of the drawer (a "white area" above the header, and extra top spacing).
 * Float the close button in the top-right corner instead so it no longer reserves
 * vertical space; the shell's own top padding (now equal to the side padding)
 * becomes the only spacing above the header. */
.kp-drawer__bar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: auto;
  padding: 0;
  background: transparent;
}

.kp-drawer__handle {
  display: none;
}

.kp-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--kp-d-ink) 12%, transparent);
  border-radius: 999px;
  background: rgba(16, 15, 25, 0.05);
  color: var(--kp-d-ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease;
}

.kp-drawer__close:hover {
  background: rgba(16, 15, 25, 0.12);
}

.kp-drawer__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.kp-drawer__mount {
  width: 100%;
  height: 100%;
}

/* Gently fade the freshly rendered panel in. This runs on every in-place
 * render, so the login (→ logged-in state) and logout (→ Sign in tab)
 * re-renders cross-fade rather than snapping. Opacity-only — no transform — so
 * no containing block is created for the hosted-field iframes. */
@keyframes kp-drawer-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kp-drawer__mount > * {
  animation: kp-drawer-content-in 0.3s ease;
}

.kp-drawer__error {
  margin: 0;
  padding: 32px 24px;
  text-align: center;
  color: var(--kp-d-ink);
}

/* The Krepling panel is normally a position:fixed overlay — sit static here. */
.kp-drawer .kp-legacy-checkout {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  box-shadow: none !important;
  z-index: auto !important;
  --kp-input-color: #ffffff;
  --kp-hair: var(--kp-d-hair);
}

body.admin-bar .kp-drawer .kp-legacy-checkout {
  top: auto !important;
  height: 100% !important;
}

.kp-drawer .kp-legacy-checkout__shell {
  height: 100%;
  /* Layout feedback item 13: equal padding on all sides (top now matches the
   * 22px sides). The floating close button no longer adds a top strip. */
  padding: 22px 22px 24px;
}

/* Fill the full drawer width (no right gap) and keep the scroll area's
 * scrollbar hidden inside the drawer (a reserved scrollbar shows as a right gap). */
.kp-drawer .kp-legacy-checkout,
.kp-drawer .kp-legacy-checkout__view,
.kp-drawer .kp-legacy-checkout__view--checkout {
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}

.kp-drawer__body,
.kp-drawer__mount,
.kp-drawer .kp-legacy-checkout__shell {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.kp-drawer__body::-webkit-scrollbar,
.kp-drawer__mount::-webkit-scrollbar,
.kp-drawer .kp-legacy-checkout__shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* ============================ Header ============================ */
.kp-drawer .kp-legacy-checkout__title,
.kp-drawer .kp-legacy-checkout__currency-control {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__header {
  align-items: center;
  gap: 11px;
  margin-bottom: 0;
  padding-bottom: 4px;
  /* Keep the header row clear of the floating close button (top-right). */
  padding-right: 40px;
  border-bottom: 0;
}

.kp-drawer .kp-legacy-checkout__brand-monogram {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
}

.kp-drawer .kp-legacy-checkout__merchant-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kp-d-ink);
}

.kp-drawer .kp-legacy-checkout__secured-chip {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--kp-d-muted);
}

/* Authenticated header → a single row like the design: [logo · merchant name]
 * on the left, the "Secured by Krepling Pay" chip on the right. Drops the
 * stacked logo row, the email + Settings line, and the bottom divider. */
.kp-drawer .kp-legacy-checkout__header--authenticated {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.kp-drawer .kp-legacy-checkout__header--authenticated .kp-legacy-checkout__logo-row {
  margin: 0;
}

.kp-drawer .kp-legacy-checkout__header--authenticated .kp-legacy-checkout__header-main {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.kp-drawer .kp-legacy-checkout__header--authenticated .kp-legacy-checkout__header-copy {
  gap: 0;
}

/* The signed-in email + Settings link aren't part of the drawer header design.
 * (Account actions live in the welcome bar's "Log out"; saved cards/addresses
 * are managed inline via their "Change" lists.) */
.kp-drawer .kp-legacy-checkout__header--authenticated .kp-legacy-checkout__signed-in-group {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__header--authenticated .kp-legacy-checkout__header-side {
  width: auto;
  flex-direction: row;
  align-items: center;
  padding-bottom: 0;
}

/* ============================ Amount hero ============================ */
.kp-drawer .kp-legacy-checkout__amount-hero {
  display: block;
  margin: 14px 0 18px;
}

.kp-drawer .kp-legacy-checkout__amount-big {
  font-size: 42px;
  /* Layout feedback item 14: the price + currency symbol stay bold. Pin the bold
   * brand face explicitly (matches the reference's --font-display weight 800). In
   * the drawer the hero sits inside .kp-legacy-checkout, whose base font is the
   * single-weight PPRadioGrotesk-Regular, so font-weight:800 alone rendered thin;
   * on the full page the hero is relocated out of that scope and looked bold. This
   * makes both render the same bold brand face. Cascades to the symbol/whole/frac
   * spans, which inherit their family from here. */
  font-family: "PPRadioGrotesk-Ultrabold", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--kp-d-ink);
}

/* Layout feedback item 14: the decimals (".00") render in a smaller size than
 * the whole-number amount + currency symbol. */
.kp-drawer .kp-legacy-checkout__amount-frac {
  font-size: 0.58em;
  font-weight: 800;
  letter-spacing: 0;
}

.kp-drawer .kp-legacy-checkout__amount-cap {
  margin-top: 2px;
  font-size: 14px;
  color: var(--kp-d-muted);
}

/* ============================ Apple Pay express ============================ */
/* Express button + "or" divider at the top of the drawer. The block is hidden
 * until the drawer JS confirms this device can use Apple Pay. */
.kp-drawer .kp-legacy-checkout__express {
  margin-top: 16px;
}

.kp-drawer .kp-legacy-checkout__express[hidden] {
  display: none;
}

/* Full-width black Apple Pay button (native <apple-pay-button> element). */
.kp-drawer .kp-legacy-checkout__express .krepling-apple-pay {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--kp-d-raise);
}

.kp-drawer .kp-legacy-checkout__express .krepling-apple-pay__element {
  --apple-pay-button-height: 54px;
  --apple-pay-button-border-radius: 16px;
}

/* "or" divider: dotted line — or — dotted line. */
.kp-drawer .kp-legacy-checkout__express-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
  color: var(--kp-d-muted);
  font-size: 13px;
  font-weight: 500;
}

.kp-drawer .kp-legacy-checkout__express-or::before,
.kp-drawer .kp-legacy-checkout__express-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 2px dotted var(--kp-d-divider);
}

/* ============================ Sign in / Guest tabs ============================ */
.kp-drawer .kp-legacy-checkout__authtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 2px 0 16px;
  padding: 4px;
  background: var(--kp-d-surface-2);
  border: 1px solid var(--kp-d-hair);
  border-radius: 16px;
  box-shadow: var(--kp-d-bevel);
}

.kp-drawer .kp-legacy-checkout__authtab {
  height: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kp-d-ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kp-drawer .kp-legacy-checkout__authtab:hover {
  color: var(--kp-d-ink);
}

.kp-drawer .kp-legacy-checkout__authtab.is-active {
  background: #ffffff;
  color: var(--kp-d-ink);
  border-color: var(--kp-d-hair);
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel);
}

/* Sign-in tab: hide the guest-only form sections; keep the summary. */
.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--contact,
.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--address,
.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--payment {
  display: none !important;
}

/* Guest tab: hide the password sign-in entry, the verify "Continue" actions,
 * and any OTP / verification / signup UI — guest checkout never triggers OTP;
 * the email/phone is just collected for the order. */
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-login-root],
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-auth-show-login],
.kp-drawer [data-kp-checkout-tab="guest"] .kp-legacy-checkout__section--auth > .kp-legacy-checkout__actions,
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-otp-panel],
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-verified-panel],
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-signup-root],
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-auth-foot],
/* The create-account "Full name" field belongs to the Sign in tab's create
 * mode only; the guest tab uses the contact-section Full Name (which loads +
 * submits the name). Hide it here so there is a single name field. */
.kp-drawer [data-kp-checkout-tab="guest"] [data-kp-signup-name-field] {
  display: none !important;
}

/* Guest tab: show the Full Name (contact) field ABOVE the Email (auth) field.
 * The main column is a grid; reorder the sections via `order`. The create
 * banner (also a main child) stays pinned at the very top. */
.kp-drawer [data-kp-checkout-tab="guest"] .kp-legacy-checkout__create-banner {
  order: -2;
}

.kp-drawer [data-kp-checkout-tab="guest"] .kp-legacy-checkout__section--contact {
  order: -1;
}

/* Contact is now the first form section. It still carries the dotted divider
 * above it (from the section + section rule); give it the same breathing room as
 * the other dividers so the dots don't sit tight against the contact card. */
.kp-drawer [data-kp-checkout-tab="guest"] .kp-legacy-checkout__main > .kp-legacy-checkout__section--contact {
  margin-top: 0;
  padding-top: 22px;
  border-top: 0;
}

/* Sign in tab: the verify "Continue" / "Create account & continue" button is
 * the explicit submit (identifier auto-submit is disabled in the drawer).
 * index.css hides [data-kp-identifier-submit] for every guest-mode checkout
 * (.kp-legacy-checkout--guest); re-show + style it here for the Sign in tab,
 * except while the OTP / verified panel is up (the controller sets [hidden]
 * on the button then). Higher specificity + !important beats the index rule. */
.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--auth [data-kp-identifier-submit]:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin: 4px 0 0;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--kp-button-color, #8e00e9) !important;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--kp-d-raise), var(--kp-d-bevel-on) !important;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--auth [data-kp-identifier-submit]:not([hidden]):active {
  transform: translateY(1px);
}

.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__section--auth [data-kp-identifier-submit]:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
}

/* Create-account state (Sign in tab): the auth panel is display:block, so the
 * Full name and Email fields sit flush with no gap. Restore the form's 16px
 * field rhythm (matches the guest contact fields). Scoped to create mode so the
 * Sign in state — where the Full name field is hidden — doesn't get a stray gap
 * above the Email field. */
.kp-drawer .kp-legacy-checkout__auth-panel[data-kp-auth-mode="create"] > .kp-legacy-checkout__field + .kp-legacy-checkout__field {
  margin-top: 16px;
}

/* "Account created" banner shown at the top of the Guest tab after the create-
 * account step. Light tint derived from the merchant brand colour. Never shown
 * in the Sign in tab. */
.kp-drawer .kp-legacy-checkout__create-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--kp-button-color, #8e00e9) 24%, #ffffff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kp-button-color, #8e00e9) 9%, #ffffff);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--kp-d-ink);
  /* Layout feedback item 12: a soft raised shadow on top of the banner. */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -10px rgba(20, 19, 29, 0.4);
}

/* Layout feedback item 12: the confirmation tick is a thin stroked check
 * (rendered inline as an SVG by auth-mode.js) rather than a heavy glyph. */
.kp-drawer .kp-legacy-checkout__create-banner-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--kp-button-color, #8e00e9);
}

.kp-drawer .kp-legacy-checkout__create-banner-tick svg {
  display: block;
}

.kp-drawer .kp-legacy-checkout__create-banner[hidden] {
  display: none;
}

.kp-drawer [data-kp-checkout-tab="signin"] .kp-legacy-checkout__create-banner {
  display: none !important;
}

/* Authenticated "👋 Welcome back, {name}" bar under the amount (design). */
.kp-drawer .kp-legacy-checkout__welcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--kp-button-color, #8e00e9) 9%, #ffffff);
  font-size: 14.5px;
  color: var(--kp-d-ink);
}

.kp-drawer .kp-legacy-checkout__welcome-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kp-drawer .kp-legacy-checkout__welcome-logout {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--kp-button-color, #8e00e9);
}

.kp-drawer .kp-legacy-checkout__welcome-logout:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shared "Country / region" selector pulled to the top of the address section
 * (above the autocomplete + manual forms), matching the handoff. */
.kp-drawer .kp-legacy-checkout__guest-country-field {
  margin-bottom: 16px;
}

/* Postcode + Find row (manual address): postcode field beside a Find button
 * that looks up the address by postcode via the maps service. */
.kp-drawer .kp-legacy-checkout__postcode-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.kp-drawer .kp-legacy-checkout__postcode-row > .kp-legacy-checkout__input,
.kp-drawer .kp-legacy-checkout__postcode-row > .kp-autocomplete-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.kp-drawer .kp-legacy-checkout__postcode-row .kp-autocomplete-wrap .kp-legacy-checkout__input {
  width: 100%;
}

.kp-drawer .kp-legacy-checkout__postcode-find-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--kp-d-hair) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--kp-d-ink) !important;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel) !important;
}

.kp-drawer .kp-legacy-checkout__postcode-find-btn.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.kp-drawer .kp-legacy-checkout__postcode-hint {
  margin-top: 6px;
}

/* ===================== Verification code (OTP) ===================== */
/* Match the handoff: a surface-2 card with white rounded code boxes, a
 * right-aligned "Continue as guest" link, a dotted divider, then the resend /
 * SMS options. All IDs/hooks are preserved — this is style + reorder only. */
.kp-drawer #smartOtpEntryPanel {
  margin: 14px 0;
  padding: 16px;
  background: var(--kp-d-surface-2);
  border: 1px solid var(--kp-d-hair);
  border-radius: 16px;
}

.kp-drawer .kp-legacy-checkout__otp-heading {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
}

.kp-drawer .kp-legacy-checkout__otp-copy {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--kp-d-ink-2);
}

.kp-drawer .kp-legacy-checkout__otp-shell {
  max-width: none;
  margin-bottom: 0;
}

.kp-drawer .kp-legacy-checkout__otp-input {
  height: 56px;
}

.kp-drawer .kp-legacy-checkout__otp-box {
  min-height: 56px;
  background: #ffffff;
  border: 1.5px solid var(--kp-d-hair);
  border-radius: 12px;
  font-size: 22px;
  box-shadow: none;
}

.kp-drawer .kp-legacy-checkout__otp-box.is-active {
  border-color: var(--kp-button-color);
  box-shadow: 0 0 0 3px var(--kp-d-brand-tint-2);
  background: #ffffff;
  transform: none;
}

/* Foot row: "Continue as guest" as a right-aligned brand link. */
.kp-drawer .kp-legacy-checkout__otp-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
}

.kp-drawer .kp-legacy-checkout__otp-foot .kp-legacy-checkout__otp-guest-continue {
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--kp-button-color) !important;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Recovery group: dotted divider, then resend / SMS, centered. */
.kp-drawer .kp-legacy-checkout__otp-support {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px dotted var(--kp-d-divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.kp-drawer .kp-legacy-checkout__otp-resend,
.kp-drawer .kp-legacy-checkout__otp-countdown {
  font-size: 13px;
  color: var(--kp-d-muted);
}

.kp-drawer .kp-legacy-checkout__otp-link {
  color: var(--kp-button-color);
  font-weight: 600;
  text-decoration: none;
}

.kp-drawer .kp-legacy-checkout__otp-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================ Sections ============================ */
/* Label-driven look: drop section headings (the address accordion keeps its
 * toggle). Dotted-dot dividers separate the stacked groups. */
.kp-drawer .kp-legacy-checkout__main .kp-legacy-checkout__section-head:not([data-kp-address-toggle]) {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section + .kp-legacy-checkout__section {
  margin-top: 0;
  padding-top: 18px;
  border-top: 2px dotted var(--kp-d-divider);
}

/* The authenticated saved-address block is a self-contained card, so it needs
 * no dotted dividers: drop the line above it (under the welcome banner) and the
 * line of the section directly after it. Spacing (padding-top) is preserved. */
.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section--address-accordion,
.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section--address-accordion + .kp-legacy-checkout__section {
  border-top: 0;
}

/* When authenticated, the auth + contact sections are hidden but stay in the
 * DOM, so the divider above would fire on the first VISIBLE section — drawing a
 * stray dotted line right under the welcome bar / Apple Pay "or". Drop the
 * divider on any section that immediately follows a hidden section. */
.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section[hidden] + .kp-legacy-checkout__section {
  border-top: 0;
}

/* --- Authenticated layout (per design): "Pay with" (payment) sits ABOVE
 * "Deliver to" (address), as a tight stack of standalone cards — no dotted
 * dividers, even 14px spacing above each. Guest checkout keeps its own order. */
.kp-drawer .kp-legacy-checkout__view--checkout:not(.kp-legacy-checkout__view--guest) .kp-legacy-checkout__main > .kp-legacy-checkout__section--payment {
  order: -1;
}

.kp-drawer .kp-legacy-checkout__view--checkout:not(.kp-legacy-checkout__view--guest) .kp-legacy-checkout__main > .kp-legacy-checkout__section--payment,
.kp-drawer .kp-legacy-checkout__view--checkout:not(.kp-legacy-checkout__view--guest) .kp-legacy-checkout__main > .kp-legacy-checkout__section--address {
  padding-top: 0;
  border-top: 0;
}

/* The hidden "use a new card" panel uses display:grid, which overrides the
 * [hidden] attribute and leaves empty hosted-field iframes reserving a big
 * vertical gap before the order summary. Force it hidden in the drawer. */
.kp-drawer .kp-legacy-checkout__payment-card[hidden] {
  display: none;
}

/* The new-card form replaces the saved-card list when opened; ease it in. */
.kp-drawer .kp-legacy-checkout__payment-card:not([hidden]) {
  animation: kp-drawer-content-in 0.3s ease;
}

/* Drop the new-card panel header ("Use a new card" + "Back to saved cards"):
 * the design shows just the fields; the back action moves to the Cancel link
 * below the cardholder name. */
.kp-drawer .kp-legacy-checkout__payment-card .kp-legacy-checkout__saved-cards-head {
  display: none;
}

/* Bold field labels, matching the rest of the drawer's labels + the design. */
.kp-drawer .kp-legacy-checkout .krepling-hosted-field__label,
.kp-drawer .kp-legacy-checkout .card_details_heading,
.kp-drawer .kp-legacy-checkout .card_label-1 .card_number {
  font-size: 13.5px !important;
  /* Layout feedback item 10: bold field labels across the forms. */
  font-weight: 700 !important;
  color: var(--kp-d-ink) !important;
  line-height: 1.25 !important;
  margin-bottom: 7px !important;
  letter-spacing: 0 !important;
}

/* Card-brand badge + CVV-hint icon, overlaid at the right edge of their fields.
 * The icon is a PARENT element sitting over the cross-origin field iframe, so:
 * pointer-events:none (never block typing/focus), and the mount gets right
 * padding so the icon sits in a reserved gap rather than on top of the digits. */
.kp-drawer .kp-legacy-checkout .card-info-1,
.kp-drawer .kp-legacy-checkout .card-info-3 {
  position: relative;
}

/* The card-field mount + its brand / CVV icon are wrapped together so the icon
 * anchors to the mount and stays centred on it. The validation message sits
 * OUTSIDE this wrapper, so showing it can't push the icon down onto the text. */
.kp-drawer .kp-legacy-checkout .kp-cardfield-mount {
  position: relative;
}

.kp-drawer .kp-legacy-checkout #cardlogo,
.kp-drawer .kp-legacy-checkout #securitylogo {
  /* Explicitly reset the legacy base positioning (#cardlogo is left-anchored at
   * left:7px; both icons are bottom-pinned), then anchor to the right edge and
   * vertically center on the 52px field mount. bottom:26px (half the mount) +
   * translateY(50%) puts the icon's centre at the mount's centre. */
  position: absolute !important;
  left: auto !important;
  right: 14px !important;
  top: auto !important;
  bottom: 26px !important;
  transform: translateY(50%) !important;
  margin: 0 !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}

.kp-drawer .kp-legacy-checkout #cardlogo img,
.kp-drawer .kp-legacy-checkout #securitylogo svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 22px;
}

/* No card-type badge until a brand is detected: a detected brand renders an
 * <img>, while the empty state renders the default placeholder <svg> — hide that
 * placeholder so nothing shows until there's an actual brand. */
.kp-drawer .kp-legacy-checkout #cardlogo svg {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout #cardlogo img {
  border-radius: 4px;
}

/* Reserve room on the right of the card-number / CVV mounts so the icon doesn't
 * overlap the typed value. */
.kp-drawer .kp-legacy-checkout #krepling-card-number {
  padding-right: 50px !important;
}

.kp-drawer .kp-legacy-checkout #krepling-cvv {
  padding-right: 48px !important;
}

/* "Cancel" link below the card fields (replaces the header back button). */
.kp-drawer .kp-legacy-checkout__payment-card .kp-legacy-checkout__newcard-cancel {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  margin: 14px 0 0;
  padding: 6px 2px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--kp-button-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================ Fields ============================ */
/* The field is a grid with a 0.5rem gap; combined with the label's bottom
 * margin below, that doubled the label→input spacing. Drop the grid gap and let
 * the label margin be the single source of that spacing. */
.kp-drawer .kp-legacy-checkout__field {
  gap: 0;
}

.kp-drawer .kp-legacy-checkout label,
.kp-drawer .kp-legacy-checkout__field label {
  margin-bottom: 7px;
  font-size: 13.5px;
  /* Layout feedback item 10: bold all field labels (sign in + guest tabs). */
  font-weight: 700;
  color: var(--kp-d-ink);
  font-family: inherit;
  letter-spacing: 0;
}

/* Field label row: label on the left, email/phone toggle on the right. */
.kp-drawer .kp-legacy-checkout__field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.kp-drawer .kp-legacy-checkout__field-head label {
  margin-bottom: 0;
}

.kp-drawer .kp-legacy-checkout__use-instead {
  padding: 2px 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-button-color);
  white-space: nowrap;
  cursor: pointer;
}

.kp-drawer .kp-legacy-checkout__use-instead:hover {
  text-decoration: underline;
}

/* Layout feedback item 4: the "Create an account" / "Sign in" auth links should
 * match the "Use phone instead" toggle style (same weight + size + brand
 * colour), rather than the heavier default link. */
.kp-drawer .kp-legacy-checkout__auth-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-button-color);
}

.kp-drawer .kp-legacy-checkout__auth-link:hover {
  text-decoration: underline;
}

.kp-drawer .kp-legacy-checkout__input,
.kp-drawer select.kp-legacy-checkout__input {
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  font-size: 16px;
  color: var(--kp-d-ink);
  background: #ffffff;
  border: 1px solid var(--kp-d-hair);
  border-radius: 12px;
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel);
}

/* Guest checkout: the base .kp-legacy-checkout--guest rules shrink the text
 * inputs/selects to 34px (higher specificity than the rule above), while the
 * card-field mounts + cardholder stay 52px. Match the text inputs to that same
 * 52px / 16px card-field style so the whole guest form is consistent. */
.kp-drawer .kp-legacy-checkout--guest .kp-legacy-checkout__main .kp-legacy-checkout__input {
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  font-size: 16px;
}

/* The Apt/Unit field now has its own label, so it no longer needs the extra top
 * margin that previously separated the placeholder-only field. */
.kp-drawer .kp-legacy-checkout--guest #additional_information {
  margin-top: 0;
}

/* --- Phone mode: render the country prefix as a LEFT segment using flexbox
 *     (not the library's absolute positioning, which overlaps the number).
 *     The wrapper (.iti) becomes the bordered field; input sits borderless. --- */
.kp-drawer .kp-legacy-checkout__smart-group .iti,
.kp-drawer .kp-legacy-checkout__smart-group .intl-tel-input {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.kp-drawer .kp-legacy-checkout__smart-group.is-phone .iti,
.kp-drawer .kp-legacy-checkout__smart-group .iti.krepling-smart-phone-active {
  border: 1px solid var(--kp-d-hair);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel);
  /* The wrapper carries the border in phone mode, so pin it to the email
   * field's 52px (border-box) — otherwise the full-height input + this border
   * stack to ~54px and the phone field reads taller than the email field. */
  height: 52px;
  box-sizing: border-box;
  /* No overflow:hidden — it would clip the country dropdown. */
}

.kp-drawer .kp-legacy-checkout__smart-group.is-phone .iti:focus-within,
.kp-drawer .kp-legacy-checkout__smart-group .iti.krepling-smart-phone-active:focus-within {
  border-color: var(--kp-button-color);
  box-shadow: 0 0 0 3px var(--kp-d-brand-tint-2), var(--kp-d-bevel);
}

/* Country prefix shows only in phone mode (left segment). */
.kp-drawer .kp-legacy-checkout__smart-group.is-phone .iti__flag-container,
.kp-drawer .kp-legacy-checkout__smart-group.is-phone .flag-container,
.kp-drawer .kp-legacy-checkout__smart-group .iti.krepling-smart-phone-active .iti__flag-container {
  /* Left flex segment — the number input flexes beside it, so a long number
   * can never scroll under the flag. */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  order: -1;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1.5px solid var(--kp-d-hair) !important;
  border-radius: 11px 0 0 11px;
  background: var(--kp-d-surface-2);
}

/* intl-tel-input appends its country dropdown to <body> (dropdownContainer:
 * document.body). The drawer panel sits at z-index 99999, so without this the
 * list opens BEHIND the drawer. Lift the body-level container above it.
 * (Not .kp-drawer-scoped — the list lives at the document body, not in the drawer.) */
body > .intl-tel-input.iti-container,
body > .iti.iti--container,
body > .iti-container {
  z-index: 100001 !important;
}

body > .intl-tel-input.iti-container .country-list,
body > .iti.iti--container .iti__country-list {
  max-height: 240px;
  box-shadow: var(--kp-d-raise, 0 12px 32px -8px rgba(20, 19, 29, 0.28));
}

/* Email mode: never show the country prefix. */
.kp-drawer .kp-legacy-checkout__smart-group:not(.is-phone) .iti__flag-container,
.kp-drawer .kp-legacy-checkout__smart-group:not(.is-phone) .flag-container,
.kp-drawer .kp-legacy-checkout__smart-group .iti:not(.krepling-smart-phone-active) .iti__flag-container {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__smart-group .iti__selected-flag,
.kp-drawer .kp-legacy-checkout__smart-group .selected-flag {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 12px !important;
  background: transparent !important;
}

.kp-drawer .kp-legacy-checkout__smart-group .iti__selected-dial-code,
.kp-drawer .kp-legacy-checkout__smart-group .selected-dial-code {
  margin-left: 8px;
  font-weight: 600;
  color: var(--kp-d-ink);
}

.kp-drawer .kp-legacy-checkout__smart-group.is-phone #smartIdentifierInput,
.kp-drawer .kp-legacy-checkout__smart-group .iti.krepling-smart-phone-active #smartIdentifierInput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  /* Fill the wrapper (which now owns the 52px height) rather than forcing the
   * base 52px, which would overflow the wrapper's 50px inner area. */
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* padding is set inline by syncInputLayout() (14px left / 44px right). */
}

/* Clear button / loader stay pinned right in phone mode. */
.kp-drawer .kp-legacy-checkout__smart-group.is-phone .kp-legacy-checkout__smart-clear,
.kp-drawer .kp-legacy-checkout__smart-group.is-phone .kp-legacy-checkout__smart-loader {
  right: 12px !important;
  left: auto !important;
}

.kp-drawer textarea.kp-legacy-checkout__input {
  height: auto;
  min-height: 88px;
  padding: 14px;
}

.kp-drawer .kp-legacy-checkout__input::placeholder {
  color: var(--kp-d-muted);
}

.kp-drawer .kp-legacy-checkout__input:focus {
  border-color: var(--kp-button-color) !important;
  box-shadow: 0 0 0 3px var(--kp-d-brand-tint-2), var(--kp-d-bevel) !important;
}

/* Country / region select chevron (matches hifi.css). */
.kp-drawer select.kp-legacy-checkout__input {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
}

/* Inline links (Use phone / Enter manually / Add company): brand violet. */
.kp-drawer .kp-legacy-checkout__button--secondary,
.kp-drawer .kp-legacy-checkout__guest-action,
.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-toolbar .kp-legacy-checkout__button {
  color: var(--kp-button-color) !important;
  font-weight: 600;
  text-decoration: none;
}

/* Guest manual address — vertical rhythm after the Country → Address Line 1 →
 * City → State|Zip reorder. City (a --wide field) and the State|Zip row no
 * longer follow a sibling that supplies their top gap, so set it explicitly to
 * the 21px the rest of the form uses. */
.kp-drawer .kp-legacy-checkout--guest #address-form2 .kp-legacy-checkout__field--wide,
.kp-drawer .kp-legacy-checkout--guest #address-form2 .kp-legacy-checkout__guest-address-row {
  margin-top: 21px;
}

/* Drop the delivery block's bottom margin (per request). */
.kp-drawer .kp-legacy-checkout--guest .checkout-delivery {
  margin-bottom: 0;
}

/* Space the "+ Add an additional shipping address" link from Address Line 1. */
.kp-drawer #additional_shippingAddress {
  margin-top: 13px;
}

/* ============================ Hosted card fields ============================ */
.kp-drawer .kp-legacy-checkout .krepling-hosted-field__mount,
.kp-drawer .kp-legacy-checkout #card_holder_name {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid var(--kp-d-hair) !important;
  border-radius: 12px !important;
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel) !important;
  overflow: hidden;
}

/* Cardholder name input: 16px text, left-aligned hint (the only non-iframe
 * card field, so its alignment is CSS-controllable). */
.kp-drawer .kp-legacy-checkout #card_holder_name {
  font-size: 16px !important;
  text-align: left !important;
}

.kp-drawer .kp-legacy-checkout .krepling-hosted-field__mount iframe {
  width: 100% !important;
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
}

/* Card-brand / CVV-hint icons are hidden in the drawer (design has none), so the
 * mounts use the normal horizontal padding. */
.kp-drawer .kp-legacy-checkout .krepling-hosted-field__mount--card-number {
  padding-left: 14px !important;
}

.kp-drawer .kp-legacy-checkout .krepling-hosted-field__mount--cvv {
  padding-right: 14px !important;
}

.kp-drawer .kp-legacy-checkout .krepling-hosted-field__mount.is-error,
.kp-drawer .kp-legacy-checkout #card_holder_name.is-error {
  border-color: var(--kp-d-warn) !important;
  /* Match the red glow the address / text inputs get in their error state. */
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12) !important;
}

/* Card row: number full-width, expiry + security code in two columns below. */
.kp-drawer .kp-legacy-checkout .card-information {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  /* Keep each column at its natural height so a validation message under one
   * (e.g. Security code) doesn't stretch the other and open a label→field gap. */
  align-items: start !important;
}

.kp-drawer .kp-legacy-checkout .card-info-1 {
  grid-column: 1 / -1 !important;
  width: auto !important;
  margin: 0 !important;
}

.kp-drawer .kp-legacy-checkout .card-info-2,
.kp-drawer .kp-legacy-checkout .card-info-3 {
  width: auto !important;
  margin: 0 !important;
}

/* ============================ Order summary ============================ */
.kp-drawer .kp-legacy-checkout__grid {
  display: flex;
  flex-direction: column;
  /* Stretch children full width (the checkout-page grid's align-items:start
   * would otherwise shrink them to content width). */
  align-items: stretch;
}

.kp-drawer .kp-legacy-checkout__main {
  order: 1;
  /* Flex column so the section `order` rules apply (index.css forces main to
   * display:block otherwise, which ignores order). gap:0 keeps spacing from the
   * existing dotted-divider padding rather than adding a second gap. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.kp-drawer .kp-legacy-checkout__section--summary {
  order: 2;
  margin: 20px 0 6px;
  padding: 6px 16px !important;
  background: var(--kp-d-surface-2) !important;
  border: 1px solid var(--kp-d-hair) !important;
  border-radius: 16px !important;
}

/* No collapse: drop the "Total: $X" header bar + the panel title. */
.kp-drawer .kp-legacy-checkout__section--summary > .kp-legacy-checkout__section-head,
.kp-drawer .kp-legacy-checkout__summary-panel-title {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__summary-panel {
  max-height: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Item rows: product name + line total only. */
.kp-drawer .kp-legacy-checkout__summary-thumb,
.kp-drawer .kp-legacy-checkout__summary-qty-wrap,
.kp-drawer .kp-legacy-checkout__summary-unit-price {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-item {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: baseline;
  justify-content: space-between !important;
  gap: 12px;
  padding: 7px 0 !important;
  border-bottom: 0 !important;
}

.kp-drawer .kp-legacy-checkout__summary-copy {
  display: block !important;
}

.kp-drawer .kp-legacy-checkout__summary-name {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--kp-d-ink);
}

.kp-drawer .kp-legacy-checkout__summary-line-total {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--kp-d-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dotted-dot divider under the item list. */
.kp-drawer .kp-legacy-checkout__summary-list {
  margin: 0 !important;
  padding: 2px 0 8px !important;
  border-bottom: 2px dotted var(--kp-d-divider) !important;
}

.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-totals {
  border-top: 0 !important;
  padding-top: 8px !important;
}

.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row {
  padding: 7px 0 !important;
  border-bottom: 0 !important;
  font-size: 14.5px;
  color: var(--kp-d-ink-2);
  font-variant-numeric: tabular-nums;
}

.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row dd {
  color: var(--kp-d-ink-2);
  font-weight: 500;
}

/* "Free" shipping in green when present. */
.kp-drawer .kp-legacy-checkout__summary-total-row .kp-legacy-checkout__summary-free,
.kp-drawer .kp-legacy-checkout__summary-total-row dd .free {
  color: var(--kp-d-good);
  font-weight: 600;
}

.kp-drawer .kp-legacy-checkout__summary-total-row--grand {
  margin-top: 6px !important;
  padding-top: 14px !important;
  border-top: 2px dotted var(--kp-d-divider) !important;
}

.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row--grand dt,
.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row--grand dd {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--kp-d-ink) !important;
}

/* ============================ Pinned pay foot ============================ */
/* The "Powered by Krepling" block duplicates the header chip — hide it. */
.kp-drawer .kp-legacy-checkout__shell-footer {
  display: none !important;
}

/* Layout feedback item 3: the pinned pay section is frosted/translucent instead
 * of a hard solid colour. It overlays the bottom of the scroll area so form
 * content blurs through behind it (the body reserves matching bottom space
 * below, only while the foot is populated). */
.kp-drawer__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  /* 10% white — mostly transparent, relying on the backdrop blur for the frost. */
  background: color-mix(in srgb, #ffffff 10%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid color-mix(in srgb, var(--kp-d-ink) 8%, transparent);
  box-shadow: 0 -8px 22px -14px rgba(20, 19, 29, 0.3);
}

/* Reserve scroll space (on the scrolling shell) so the last field isn't hidden
 * behind the overlaying foot — only when the foot actually holds the pay button
 * (it is emptied on the auth / non-payment steps, where :empty hides it and no
 * space is needed). */
.kp-drawer:has(.kp-drawer__foot:not(:empty)) .kp-legacy-checkout__shell {
  padding-bottom: 132px;
}

.kp-drawer__foot:empty {
  display: none;
}

.kp-drawer__foot .kp-legacy-checkout__actions {
  margin: 0;
  display: block;
}

/* The button is moved outside .kp-legacy-checkout, so its token styles no longer
 * resolve — set them explicitly (matches hifi.css .btn-pay). */
.kp-drawer__foot [data-kp-payment-submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--kp-button-color, #8e00e9) !important;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--kp-d-raise), var(--kp-d-bevel-on) !important;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
}

.kp-drawer__foot [data-kp-payment-submit]:active {
  transform: translateY(1px);
}

.kp-drawer__foot [data-kp-payment-submit]:disabled,
.kp-drawer__foot [data-kp-payment-submit].disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
}

/* Secured caption under the pay button — moved into the foot with the actions
 * block, so it leaves the .kp-legacy-checkout scope; set values explicitly. */
.kp-drawer__foot .kp-legacy-checkout__secured-foot {
  width: 100%;
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--kp-d-muted, #6b6b78);
}

.kp-drawer__foot .kp-legacy-checkout__secured-foot strong {
  font-weight: 700;
  color: inherit;
}

/* ============================ Country picker ============================ */
/* Layout feedback item 6: a small popup dropdown anchored to the flag trigger
 * (like an OS-native select), NOT a full-screen cover. Its top/left are set
 * inline by drawer.js relative to the trigger; keep it compact + scrollable. */
.kp-drawer__picker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  /* display:none when fully closed so the (populated, off-screen) list can't
   * reserve space / a scrollbar behind the form. Mounted only while in use. */
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* border-box so the inner gutter (padding below) doesn't widen the popup, and
   * so the child search/list at width:100% can't overflow it. */
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100% - 32px);
  max-height: 320px;
  /* Inner gutter for the whole dropdown; the search + list carry no side padding
   * of their own (that previously overflowed the popup). */
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--kp-d-hair);
  border-radius: 14px;
  box-shadow: 0 14px 34px -10px rgba(20, 19, 29, 0.3), 0 2px 8px rgba(20, 19, 29, 0.12);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Every child sizes with border-box so `width:100%` + padding (search input,
 * list, rows) stays inside the popup instead of overflowing/clipping. */
.kp-drawer__picker * {
  box-sizing: border-box;
}

.kp-drawer__picker.is-mounted {
  display: flex;
}

.kp-drawer__picker.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* The dropdown doesn't need the full-panel header (back arrow + big title). */
.kp-drawer__picker-top {
  display: none;
}

.kp-drawer__picker-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--kp-d-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.kp-drawer__picker-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--kp-d-ink);
}

.kp-drawer__picker-search {
  flex: 0 0 auto;
  /* Side/top gutter comes from the picker's padding; only add a gap to the list. */
  margin: 0 0 10px;
}

.kp-drawer__picker-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--kp-d-hair);
  border-radius: 10px;
  background: #ffffff;
  color: var(--kp-d-ink);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  box-shadow: var(--kp-d-raise-sm), var(--kp-d-bevel);
}

.kp-drawer__picker-search-input:focus {
  border-color: var(--kp-button-color);
  box-shadow: 0 0 0 3px var(--kp-d-brand-tint-2), var(--kp-d-bevel);
}

.kp-drawer__picker-list {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  /* Hide the scrollbar — a reserved (classic) scrollbar shows as a right gap. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* No side padding here — the picker's own padding is the gutter. Without this
   * the list (width:100%) + padding overflowed the popup by 24px. */
  padding: 0;
}

.kp-drawer__picker-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.kp-drawer__country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Horizontal padding matches the search input's inner padding so the row text
   * lines up with the search placeholder. */
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kp-d-ink);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.kp-drawer__country-item:hover,
.kp-drawer__country-item.is-active {
  background: var(--kp-d-hair-2);
}

.kp-drawer__country-flag {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.kp-drawer__country-name {
  flex: 1 1 auto;
  min-width: 0;
}

.kp-drawer__country-dial {
  flex: 0 0 auto;
  color: var(--kp-d-muted);
  font-variant-numeric: tabular-nums;
}

.kp-drawer__country-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--kp-d-muted);
}

/* ============================ Loader ============================ */
.kp-drawer__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.2s ease;
}

.kp-drawer__loader[hidden],
.kp-drawer__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.kp-drawer__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3.5px solid rgba(16, 15, 25, 0.12);
  border-top-color: #8e00e9;
  animation: kp-drawer-spin 0.8s linear infinite;
}

@keyframes kp-drawer-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Checkout-page "re-open drawer" button (in the WC payment section) ===== */
/* Shown in place of the suppressed inline panel; reopens the drawer after close.
 * Not scoped to .kp-drawer — it lives in the WooCommerce checkout form. */
.kp-drawer-reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: var(--kp-button-color, #8e00e9);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(20, 19, 29, 0.05), 0 3px 6px rgba(20, 19, 29, 0.08), 0 8px 18px -6px rgba(20, 19, 29, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.kp-drawer-reopen:hover {
  color: #ffffff;
  opacity: 0.96;
}

.kp-drawer-reopen:active {
  transform: translateY(1px);
}

.kp-drawer-reopen__lock {
  font-size: 14px;
}

/* ============================ "Buy now" button ============================ */
.kp-buy-now.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  background: #8e00e9;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
  transition: transform 120ms ease, opacity 160ms ease;
}

.kp-buy-now.button:hover {
  color: #ffffff;
  opacity: 0.95;
}

.kp-buy-now.button:active {
  transform: translateY(1px);
}

.kp-buy-now.is-busy {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.kp-buy-now.button:disabled,
.kp-buy-now.button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Lock background scroll while the drawer is open. */
html.kp-drawer-open,
body.kp-drawer-open {
  overflow: hidden;
}

/* ============================ Mobile: bottom sheet ============================ */
@media (max-width: 767px) {
  .kp-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    /* Reset the desktop 460px cap — otherwise the bottom sheet stays 460px wide,
     * pinned bottom-left, with the page showing through on the right. */
    max-width: none;
    height: 95%;
    max-height: 95%;
    border-radius: 22px 22px 0 0;
    transform: translateY(102%);
  }

  .kp-drawer.is-open {
    transform: translateY(0);
  }

  .kp-drawer__bar {
    justify-content: center;
    height: 38px;
  }

  .kp-drawer__handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(16, 15, 25, 0.16);
  }

  .kp-drawer__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* --- Content polish for the full-width sheet --- */

  /* Tighten the side gutters: 22px reads as cramped on a phone-width sheet.
   * Keep the shell and the pinned pay foot on the same 16px gutter. */
  .kp-drawer .kp-legacy-checkout__shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kp-drawer__foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Slightly smaller merchant name so the "Secured by Krepling Pay" chip never
   * crowds it on narrow screens. */
  .kp-drawer .kp-legacy-checkout__merchant-name {
    font-size: 17px;
  }

  /* Stack the State / Province | Zip row — one full-width field per line is
   * easier to tap than two cramped columns on a phone. */
  .kp-drawer .kp-legacy-checkout--guest .kp-legacy-checkout__guest-address-row {
    grid-template-columns: 1fr;
  }

  /* When that row stacks, the grid's 16px column gap becomes the gap between
   * State and Zip — lift it to the form's 21px rhythm so the two read as
   * separate fields, not a split control. */
  .kp-drawer .kp-legacy-checkout--guest .kp-legacy-checkout__guest-address-row--compact > .kp-legacy-checkout__field + .kp-legacy-checkout__field {
    margin-top: 5px;
  }
}

/* Honor reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .kp-drawer,
  .kp-drawer-scrim {
    transition: none;
  }

  .kp-drawer__spinner {
    animation-duration: 1.6s;
  }
}

/* ============== Authenticated: compact review rows (design) ============== */
/* Shared review-row styling used by the saved-address accordion header and the
 * saved-card summary row: icon · (label / value) · Change. */
.kp-drawer .kp-legacy-checkout__review-ico {
  flex: 0 0 auto;
  width: 24px;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.kp-drawer .kp-legacy-checkout__review-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp-drawer .kp-legacy-checkout__review-lab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kp-d-muted);
}

.kp-drawer .kp-legacy-checkout__review-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--kp-d-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-drawer .kp-legacy-checkout__review-edit {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-button-color);
}

/* --- Saved-address accordion → compact "Deliver to … Change" (mirrors the
 * saved-card pattern: a white card head + individual bordered radio rows). --- */

/* Drop the outer container chrome so the head and list read as separate cards. */
.kp-drawer .kp-legacy-checkout__section--address-accordion {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* The "Deliver to … Change" head is a self-contained white rounded card. */
.kp-drawer .kp-legacy-checkout__section--address-accordion .kp-legacy-checkout__section-head {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 0;
  padding: 14px;
  border: 1.5px solid var(--kp-d-hair);
  border-radius: 12px;
  background: #fff;
}

.kp-drawer .kp-legacy-checkout__section--address-accordion .kp-legacy-checkout__section-head:hover {
  border-color: var(--kp-d-muted) !important;
}

/* No chevron, and no heavy divider under the head when expanded. */
.kp-drawer .kp-legacy-checkout__section--address-accordion .kp-legacy-checkout__section-head::after {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__section--address-accordion[data-kp-address-expanded="true"] .kp-legacy-checkout__section-head {
  border-bottom: 1px solid var(--kp-d-hair);
}

/* Panel: no inset padding / outer box — rows become standalone cards. */
.kp-drawer .kp-legacy-checkout__section--address-accordion .kp-legacy-checkout__address-panel {
  padding: 0;
  font-size: 15px;
}

/* When expanded, grow to the JS-measured panel height (addresses.js sets
 * --kp-address-panel-height = scrollHeight, with a buffer so the taller card
 * rows + "Add an address" are never clipped). The base .address-panel rule
 * supplies the max-height / opacity / translate transition, so this animates. */
.kp-drawer .kp-legacy-checkout__section--address-accordion[data-kp-address-expanded="true"] .kp-legacy-checkout__address-panel {
  padding: 12px 0 0;
  max-height: var(--kp-address-panel-height, 1600px);
  overflow: hidden;
}

/* The Add/Edit-address form is shown via the [hidden] attribute (an instant
 * display change), while the accordion panel grows its max-height over 320ms.
 * Ease the form's opacity in so it reveals together with the panel grow rather
 * than popping in fully-formed and getting clipped. */
.kp-drawer .kp-legacy-checkout__address-manage:not([hidden]) {
  animation: kp-drawer-content-in 0.3s ease;
}

/* In the compact pattern the panel shows only the radio list + "Add". */
.kp-drawer .kp-legacy-checkout__address-summary,
.kp-drawer .kp-legacy-checkout__address-panel > .kp-legacy-checkout__muted,
.kp-drawer .kp-legacy-checkout__address-star,
.kp-drawer [data-kp-address-set-default],
.kp-drawer [data-kp-address-edit],
.kp-drawer [data-kp-address-remove] {
  display: none !important;
}

/* List → vertical stack of white rounded rows (like the saved cards). */
.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  max-height: none;
  overflow: visible;
}

.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-card {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 18px 20px;
  border: 1px solid var(--kp-d-hair);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-card.is-active {
  border-color: color-mix(in srgb, var(--kp-d-ink) 30%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* Radio mirrors the saved-card donut: blank by default, dark donut when active. */
.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--kp-d-ink) 22%, transparent);
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-width 0.12s ease, border-color 0.12s ease;
}

.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-card.is-active .kp-legacy-checkout__address-radio {
  border-width: 6px;
  border-color: color-mix(in srgb, var(--kp-d-ink) 78%, transparent);
}

.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-card.is-active .kp-legacy-checkout__address-radio::after {
  display: none;
}

/* Address label sized like the saved-card row label. */
.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kp-drawer .kp-legacy-checkout__section--address .kp-legacy-checkout__address-copy strong {
  font-size: 15px;
  font-weight: 500;
}

.kp-drawer .kp-legacy-checkout__address-toolbar {
  display: flex;
  margin-top: 12px;
}

.kp-drawer [data-kp-address-add] {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--kp-button-color) !important;
  font-weight: 700;
}

/* --- Guest delivery: collapse a filled address into a "Deliver to … Change"
 * card (mirrors the saved-card / saved-address summary pattern, but for guests
 * who type/search their address). Drawer-only: the full-page guest checkout
 * keeps the open form. The country selector sits outside [data-kp-guest-address-
 * fields], so it stays visible above the card. addresses.js toggles
 * data-kp-guest-collapsed and drives the fields' inline max-height/overflow for
 * the FLIP open/close animation. */
/* max-height + overflow are driven inline by addresses.js (a FLIP animation
 * that releases the cap to `none` once expanded, so the box always grows to fit
 * content — switching to manual entry must not clip/overlap). This rule only
 * owns the fade + the transition timing the inline max-height change rides on. */
.kp-drawer [data-kp-guest-address-fields] {
  opacity: 1;
  visibility: visible;
  transition: max-height 320ms ease, opacity 200ms ease, visibility 0s 0s;
}

.kp-drawer [data-kp-guest-collapsed="true"] [data-kp-guest-address-fields] {
  opacity: 0;
  /* Remove the collapsed fields from the tab order, but only after the fade so
   * the transition is still visible. */
  visibility: hidden;
  pointer-events: none;
  transition: max-height 320ms ease, opacity 200ms ease, visibility 0s 320ms;
}

/* The summary card (hidden by default via components/address.css) appears only
 * when collapsed. Redundant drawer-scoped hide so it stays hidden even if that
 * base rule is absent in a given bundle. */
.kp-drawer .kp-legacy-checkout__guest-address-summary {
  display: none;
}

.kp-drawer [data-kp-guest-collapsed="true"] .kp-legacy-checkout__guest-address-summary {
  display: block;
  animation: kp-guest-address-card-in 260ms ease both;
}

/* Self-contained rounded card with the brand accent (matches the design). */
.kp-drawer .kp-legacy-checkout__guest-address-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--kp-button-color);
  border-radius: 12px;
  background: rgba(145, 23, 242, 0.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kp-drawer .kp-legacy-checkout__guest-address-card:hover {
  background: rgba(145, 23, 242, 0.1);
}

.kp-drawer .kp-legacy-checkout__guest-address-card .kp-legacy-checkout__review-lab {
  color: var(--kp-button-color);
}

/* Two-line address (street / locality) — override the single-line ellipsis the
 * shared review-val carries. */
.kp-drawer .kp-legacy-checkout__guest-address-card .kp-legacy-checkout__review-val {
  white-space: pre-line;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

@keyframes kp-guest-address-card-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- New card: collapse the completed card fields into a purple "Pay with …
 * Change" card (same pattern as the guest address; the summary button reuses
 * .kp-legacy-checkout__guest-address-card for the purple styling). Drawer-only.
 * payments.js toggles data-kp-card-collapsed and drives the fields' inline
 * max-height/overflow for the FLIP animation; the hosted-field iframes stay
 * mounted throughout (only hidden via the rules below). --- */
.kp-drawer [data-kp-card-fields] {
  opacity: 1;
  visibility: visible;
  transition: max-height 320ms ease, opacity 200ms ease, visibility 0s 0s;
}

.kp-drawer [data-kp-card-collapsed="true"] [data-kp-card-fields] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 320ms ease, opacity 200ms ease, visibility 0s 320ms;
}

.kp-drawer .kp-legacy-checkout__newcard-summary {
  display: none;
}

.kp-drawer [data-kp-card-collapsed="true"] .kp-legacy-checkout__newcard-summary {
  display: block;
  animation: kp-guest-address-card-in 260ms ease both;
}

/* Card summary value is a single line ("Visa •••• ••••"). */
.kp-drawer .kp-legacy-checkout__newcard-summary-card .kp-legacy-checkout__review-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand logo in the collapsed "Pay with" card (new card + saved card): shown in
 * place of the brand text, on the SAME line as the masked digits. `inline-block`
 * overrides a global `img { display: block }` (theme/reset) that would otherwise
 * push the logo onto its own line. */
.kp-drawer .kp-legacy-checkout__card-brand-logo {
  display: inline-block;
  height: 18px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.kp-drawer .kp-legacy-checkout__card-summary-text {
  display: inline;
  vertical-align: middle;
}

/* --- Guest contact: fold the Full Name (contact) + Email (auth) entry into a
 * compact "Contact … / Change" card, mirroring the guest address and new-card
 * collapse. Drawer + guest only. contact.js sets data-kp-guest-contact-collapsed
 * on the [data-kp-checkout-tab] view (an ancestor of both the contact and auth
 * sections); the card reuses .guest-address-card for the purple styling. The card
 * is `hidden` by default so it stays hidden in the full-page checkout (which
 * never sets the flag) — an author display:block beats the UA [hidden] rule. --- */
.kp-drawer [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] [data-kp-guest-contact-summary] {
  /* !important so it beats the card's `hidden` attribute even when the host theme
   * / WooCommerce ship a global [hidden]{display:none!important}. This selector's
   * specificity (0,4,0) outranks [hidden], so the card reveals in the drawer while
   * `hidden` still keeps it hidden on the full-page checkout. */
  display: block !important;
  animation: kp-guest-address-card-in 260ms ease both;
}

/* While collapsed, fold away the Full Name field (the contact section head +
 * grid) and the whole auth section (which in guest mode shows only the Email). */
.kp-drawer [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--contact .kp-legacy-checkout__section-head,
.kp-drawer [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--contact .kp-legacy-checkout__contact-grid,
.kp-drawer [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--contact [data-kp-contact-error],
.kp-drawer [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--auth {
  display: none !important;
}

/* Second line (email) reads as a muted sub-value under the name. */
.kp-drawer .kp-legacy-checkout__contact-summary-card .kp-legacy-checkout__review-val--sub {
  font-weight: 400;
  color: var(--kp-d-muted);
}

/* --- Create-account complete state. After the shopper submits the create-
 * account form, auth-mode.js sets data-kp-account-created on the checkout view.
 * Reuse the single existing address / card sections (nothing is duplicated):
 * the guest-tab rules already show them; here we additionally (a) hide the
 * Sign in / Guest tabs, and (b) reveal the guest welcome bar. The entered
 * name/email fold into the CONTACT card via the contact-collapse rules above.
 * Drawer-only — the full-page checkout never sets the flag, so it's unchanged. */
.kp-drawer [data-kp-checkout-view][data-kp-account-created="true"] [data-kp-checkout-tabs] {
  display: none !important;
}

/* `display:flex !important` reveals the guest welcome bar past its `hidden`
 * attribute (this selector outranks [hidden]); it stays hidden on the full-page
 * checkout and in the drawer until the flag is set. */
.kp-drawer [data-kp-checkout-view][data-kp-account-created="true"] [data-kp-welcome-bar-guest] {
  display: flex !important;
}

/* Account-created state: keep the same spaced dotted divider above the CONTACT
 * card as the guest-tab rule, so the dots don't sit tight against the card. */
.kp-drawer [data-kp-checkout-view][data-kp-account-created="true"] .kp-legacy-checkout__main > .kp-legacy-checkout__section--contact {
  border-top: 0;
  padding-top: 22px;
}

/* Hide the standalone card-brand text under the fields — it's redundant.
 * !important so it beats the base `#credit-card-type-text:not(:empty){display:block}`
 * rule that re-shows it once the brand is populated. */
.kp-drawer #credit-card-type-text {
  display: none !important;
}

/* --- Saved cards: compact "Pay with … Change" summary + collapsible list --- */
/* The summary head is a self-contained white rounded card (design). */
.kp-drawer .kp-legacy-checkout__card-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1.5px solid var(--kp-d-hair);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kp-drawer .kp-legacy-checkout__card-summary:hover {
  border-color: var(--kp-d-muted);
}

.kp-drawer .kp-legacy-checkout__card-summary .kp-legacy-checkout__saved-cards-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Collapsed by default: show only the summary; "Change" reveals the list with a
 * gentle max-height + fade animation (height var set in payments.js). */
.kp-drawer [data-kp-saved-cards-root][data-kp-cards-expanded="false"] .kp-legacy-checkout__saved-cards-list {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

.kp-drawer [data-kp-saved-cards-root][data-kp-cards-expanded="true"] .kp-legacy-checkout__saved-cards-list {
  max-height: var(--kp-cards-list-height, 1600px);
  margin-top: 12px;
  opacity: 1;
}

/* Compact radio-row list (design): vertical stack of white rounded rows,
 * each a radio + "Brand •••• last4 · MM/YY". Reuses the existing
 * data-kp-saved-card buttons / selection logic — only the visual changes. */
.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-cards-list {
  display: flex;
  flex-direction: column;
  grid-auto-flow: unset;
  gap: 12px;
  overflow: hidden;
  padding: 0;
  font-size: 15px;
  transition: max-height 0.32s ease, opacity 0.26s ease, margin-top 0.3s ease;
}

.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card-item {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  position: relative;
}

.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--kp-d-hair);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}

/* Selected state is driven solely by the JS-managed `.is-active` class
 * (exactly one at a time); the server-rendered `.active_card` is NOT used
 * here, since it stays set on multiple cards and would fill every radio. */
.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card.is-active {
  border-color: color-mix(in srgb, var(--kp-d-ink) 30%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* Kill the full-page offset outline on selected/active cards — it renders as a
 * second border in the drawer (and `.active_card` lingers on many cards). The
 * single row border + filled radio convey selection here. */
.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card.active_card,
.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card.is-active {
  outline: none;
  outline-offset: 0;
}

/* Hide the full violet card visual + trash action inside the drawer rows. */
.kp-drawer .kp-legacy-checkout__saved-card .DCcard-img,
.kp-drawer .kp-legacy-checkout__saved-card-actions {
  display: none !important;
}

/* The additive radio row becomes visible only in the drawer. */
.kp-drawer .kp-legacy-checkout__card-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.kp-drawer .kp-legacy-checkout__card-row-radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--kp-d-ink) 22%, transparent);
  background: #fff;
  box-sizing: border-box;
  transition: border-width 0.12s ease, border-color 0.12s ease;
}

.kp-drawer .kp-legacy-checkout__saved-card.is-active .kp-legacy-checkout__card-row-radio {
  border-width: 6px;
  border-color: color-mix(in srgb, var(--kp-d-ink) 78%, transparent);
}

.kp-drawer .kp-legacy-checkout__card-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--kp-d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Add a card" → plain violet text link. */
.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card-item--add {
  width: 100%;
}

.kp-drawer .kp-legacy-checkout__section--payment-saved[data-kp-payment-mode="saved"] .kp-legacy-checkout__saved-card-add {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 4px 2px;
  cursor: pointer;
}

.kp-drawer .kp-legacy-checkout__saved-card-add .card-top,
.kp-drawer .kp-legacy-checkout__saved-card-add-icon {
  display: none !important;
}

.kp-drawer .kp-legacy-checkout__card-add-text {
  display: inline;
  color: var(--kp-button-color);
  font-size: 16px;
  font-weight: 700;
}

/* ======================= Layout feedback item 11 ======================= */
/* Widen the gap between the dots on every dotted divider (drawer + full page —
 * both render under .kp-drawer). A CSS `dotted` border can't tune the gap, so
 * the dividers are redrawn as a horizontal dot pattern: a ~2px dot every 6px,
 * roughly 2x the native gap. */
.kp-drawer .kp-legacy-checkout__express-or::before,
.kp-drawer .kp-legacy-checkout__express-or::after,
.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section + .kp-legacy-checkout__section,
.kp-drawer .kp-legacy-checkout__otp-support,
.kp-drawer .kp-legacy-checkout__summary-list,
.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row--grand {
  border-top-style: none !important;
  border-bottom-style: none !important;
  background-image: radial-gradient(circle, var(--kp-d-divider) 0 1px, transparent 1.5px) !important;
  background-repeat: repeat-x !important;
  background-size: 6px 2px !important;
}

/* Dots sit on the top edge for every divider except the summary item-list,
 * whose divider is on its bottom edge. */
.kp-drawer .kp-legacy-checkout__express-or::before,
.kp-drawer .kp-legacy-checkout__express-or::after,
.kp-drawer .kp-legacy-checkout__main > .kp-legacy-checkout__section + .kp-legacy-checkout__section,
.kp-drawer .kp-legacy-checkout__otp-support,
.kp-drawer .kp-legacy-checkout__section--summary .kp-legacy-checkout__summary-total-row--grand {
  background-position: left top !important;
}

.kp-drawer .kp-legacy-checkout__summary-list {
  background-position: left bottom !important;
}

/* The "or" divider lines are flex pseudo-elements that used the border itself as
 * the visible line — give them a 2px box to carry the dot pattern. */
.kp-drawer .kp-legacy-checkout__express-or::before,
.kp-drawer .kp-legacy-checkout__express-or::after {
  height: 2px !important;
}

/* ======================= Layout feedback item 9 ======================= */
/* Hide the "Add additional information" / "Add an additional shipping address"
 * toggles on both guest address forms (search + manual). Hidden for now per
 * feedback; markup + behaviour are left intact so this is fully reversible. */
.kp-drawer .add_additional_unitAddress,
.kp-drawer .add_additional_shippingAddress {
  display: none !important;
}

/* ======================= Layout feedback item 8 ======================= */
/* The relocated "Back to address search" toggle sits at the top of the manual
 * address form (just under Country / region) as a brand-coloured link with a
 * leading arrow, rather than the plain toggle at the bottom of the form. */
.kp-drawer .kp-legacy-checkout__guest-address-toggles--top {
  margin: 0 0 14px;
}

.kp-drawer .kp-legacy-checkout__guest-address-toggle--back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  float: none !important;
  clear: none !important;
  width: auto !important;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kp-button-color, #8e00e9);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.kp-drawer .kp-legacy-checkout__guest-address-toggle--back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kp-drawer .kp-legacy-checkout__guest-address-toggle-arrow {
  font-size: 15px;
  line-height: 1;
}

/* ======================= Layout feedback item 7 ======================= */
/* "What still needs fixing" summary banner, shown at the top of the form when
 * the always-clickable Pay button is pressed with missing/invalid fields. Sits
 * above every section (order:-3) so it leads the guest-tab reflow. */
.kp-drawer .kp-legacy-checkout__pay-alert {
  order: -3;
  margin: 0 0 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--kp-d-warn, #d33) 34%, #ffffff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kp-d-warn, #d33) 9%, #ffffff);
  color: color-mix(in srgb, var(--kp-d-warn, #d33) 78%, #1c1b22);
  font-size: 13.5px;
  line-height: 1.45;
}

.kp-drawer .kp-legacy-checkout__pay-alert[hidden] {
  display: none;
}

.kp-drawer .kp-legacy-checkout__pay-alert-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.kp-drawer .kp-legacy-checkout__pay-alert-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.kp-drawer .kp-legacy-checkout__pay-alert-list li {
  margin: 2px 0;
}

.kp-drawer .kp-legacy-checkout__pay-alert-list b {
  font-weight: 700;
}

/* ===== Field error border in the drawer (validation feedback) ===== */
/* The drawer's own input border rule (.kp-drawer .kp-legacy-checkout__input,
 * 0,2,0) ties the base .kp-legacy-checkout__input.is-error and wins by source
 * order, so the red error border never showed on the Full Name / Email fields
 * (the Delivery Address works only because its selector has 3 classes). These
 * rules restore the red border + glow, matching the address field, and cover the
 * intl-tel wrapper used in phone mode. */
.kp-drawer .kp-legacy-checkout__input.is-error,
.kp-drawer select.kp-legacy-checkout__input.is-error {
  border-color: var(--kp-error-color, #d93025);
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12);
}

.kp-drawer .kp-legacy-checkout__smart-group.is-error .iti,
.kp-drawer .kp-legacy-checkout__smart-group.is-error .intl-tel-input {
  border-color: var(--kp-error-color, #d93025);
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12);
}

/* The Delivery Address search input carries a 13px bottom margin (spacing to the
 * "Enter address manually" toggle below) that lives inside the autocomplete
 * wrapper. Pull its validation message back up so it sits ~5px under the field
 * like the other fields, without touching that layout margin. */
.kp-drawer #address-form [data-kp-address-error] {
  margin-top: -8px;
}