/**
 * Dripex cart, checkout, order-received and order-pay pages.
 * Loaded only on those pages. Markup: template-checkout-flow.php, woocommerce/checkout/form-checkout.php,
 * woocommerce/cart/cart-empty.php; everything else is WooCommerce's own markup, re-skinned here.
 *
 * All colors come from the design tokens in dripex-variables.css.
 * (--color-white / --color-navy / --gray-*) carries through with no per-mode overrides. Body copy
 * is --gray-800 (dark); the lightest text color used is --gray-600.
 */

/* ==========================================================================
   0. SCOPE, TOKENS & STOREFRONT RESETS
   ========================================================================== */
.dxs-flow {
  --fl-surface: var(--color-white);
  --fl-border: var(--gray-200);
  --fl-border-strong: var(--gray-300);
  --fl-tint: color-mix(in srgb, var(--color-blue) 8%, var(--fl-surface));
  --fl-tint-strong: color-mix(in srgb, var(--color-blue) 15%, var(--fl-surface));
  /* Brand colors mixed toward --color-navy: darker on light surfaces, lighter in dark mode. */
  --fl-blue-ink: color-mix(in srgb, var(--color-blue) 72%, var(--color-navy));
  --fl-green-ink: color-mix(in srgb, var(--color-green) 58%, var(--color-navy));
  --fl-red-ink: color-mix(in srgb, var(--color-red) 70%, var(--color-navy));
  --fl-head: var(--color-navy);
  --fl-ink: var(--gray-800);
  --fl-radius: 22px;
  --fl-field-h: 50px;
  /* pinned nav + WP admin bar (when logged in) + breathing room */
  --fl-sticky-top: calc(var(--dripex-nav-h, 86px) + var(--dripex-adminbar-h, 0px) + 20px);

  background: var(--gray-50);
  color: var(--fl-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dxs-flow *,
.dxs-flow *::before,
.dxs-flow *::after { box-sizing: border-box; }

/* Storefront wraps every page in .col-full (max-width + side padding). */
.dxs-flow-page .site-content > .col-full { width: 100%; max-width: none; margin: 0; padding: 0; }
.dxs-flow-page .site-content { padding: 0; margin: 0; }
.dxs-flow-page .content-area,
.dxs-flow-page .site-main { width: 100%; float: none; margin: 0; padding: 0; }

.dxs-flow-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }

/* clearfix pseudo-elements from Storefront turn into stray grid/flex items */
.dxs-flow .woocommerce::before,
.dxs-flow .woocommerce::after,
.dxs-flow form.checkout::before,
.dxs-flow form.checkout::after,
.dxs-flow .col2-set::before,
.dxs-flow .col2-set::after { display: none !important; }

.dxs-flow a:focus-visible,
.dxs-flow button:focus-visible,
.dxs-flow input:focus-visible,
.dxs-flow select:focus-visible,
.dxs-flow textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-blue) 55%, transparent);
  outline-offset: 2px;
}

/* ==========================================================================
   1. ICON SET (24px, 2px stroke) — masks used by cards, notices, payment rows
   ========================================================================== */
.ic-lock    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); }
.ic-key     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 8.5-8.5M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E"); }
.ic-support { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5v-1a7 7 0 0 1 14 0v1'/%3E%3Crect x='3.5' y='12' width='4' height='6.5' rx='1.6'/%3E%3Crect x='16.5' y='12' width='4' height='6.5' rx='1.6'/%3E%3Cpath d='M18.5 18.5c0 1.4-1.6 2-4 2h-1'/%3E%3C/svg%3E"); }
.ic-cart    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3C/svg%3E"); }
.ic-check   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ic-tag     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V4.5a1 1 0 0 1 1-1h8.1a1 1 0 0 1 .7.3l7.4 7.4a1 1 0 0 1 0 1.4l-7.6 7.6a1 1 0 0 1-1.4 0l-7.4-7.4a1 1 0 0 1-.3-.7Z'/%3E%3Ccircle cx='8' cy='8' r='1.2'/%3E%3C/svg%3E"); }
.ic-user    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.ic-card    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); }
.ic-coin    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.4c-.5-.9-1.5-1.4-2.8-1.4-1.6 0-2.7.8-2.7 2 0 3 5.6 1.3 5.6 4.2 0 1.2-1.2 2-2.9 2-1.4 0-2.5-.5-3.1-1.4M12 6.5V8m0 8v1.5'/%3E%3C/svg%3E"); }
.ic-wallet  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5A2.5 2.5 0 0 1 7 5h10.5a1.5 1.5 0 0 1 1.5 1.5V9'/%3E%3Cpath d='M4.5 7.5v10A2.5 2.5 0 0 0 7 20h11.5A1.5 1.5 0 0 0 20 18.5v-8A1.5 1.5 0 0 0 18.5 9H7a2.5 2.5 0 0 1-2.5-1.5Z'/%3E%3Ccircle cx='16' cy='14.5' r='1.2'/%3E%3C/svg%3E"); }
.ic-mail    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='m4 7.5 8 6 8-6'/%3E%3C/svg%3E"); }
.ic-info    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E"); }
.ic-ok      { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E"); }
.ic-alert   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.2v.1'/%3E%3C/svg%3E"); }

/* ==========================================================================
   2. HERO + PROGRESS STEPPER
   ========================================================================== */
.dxs-flow-hero {
  padding: clamp(18px, 2.6vw, 30px) 0 clamp(20px, 3vw, 34px);
  background:
    radial-gradient(60% 140% at 90% -40%, color-mix(in srgb, var(--color-blue) 13%, transparent), transparent 62%),
    linear-gradient(180deg, var(--gray-50) 0%, var(--fl-surface) 100%);
  border-bottom: 1px solid var(--fl-border);
}

.dxs-flow-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(12px, 2vw, 18px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
}

.dxs-flow-crumbs a { color: var(--gray-700); text-decoration: none; }
.dxs-flow-crumbs a:hover { color: var(--fl-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.dxs-flow-crumbs [aria-current] { color: var(--fl-head); font-weight: 600; }
.dxs-flow-crumbs [aria-hidden] { color: var(--gray-500); }

.dxs-flow-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}

.dxs-flow .dxs-flow-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--fl-head);
}

.dxs-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dxs-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.dxs-steps__item + .dxs-steps__item { margin-left: 14px; padding-left: 28px; }

.dxs-steps__item + .dxs-steps__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--fl-border-strong);
  transform: translateY(-50%);
}

.dxs-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--fl-border-strong);
  border-radius: 50%;
  background: var(--fl-surface);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 800;
}

.dxs-steps__item.is-current { color: var(--fl-head); }
.dxs-steps__item.is-current .dxs-steps__num { border-color: var(--color-blue); background: var(--color-blue); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 20%, transparent); }
.dxs-steps__item.is-done { color: var(--fl-green-ink); }
.dxs-steps__item.is-done + .dxs-steps__item::before,
.dxs-steps__item.is-current::before { background: var(--color-green); }
.dxs-steps__item.is-done .dxs-steps__num { border-color: var(--color-green); background: var(--color-green); }

.dxs-steps__item.is-done .dxs-steps__num::before {
  content: '';
  width: 14px;
  height: 14px;
  background: #fff;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.dxs-flow-body { padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 96px); }
.dxs-flow-content { max-width: none; margin: 0; padding: 0; }

/* ==========================================================================
   3. NOTICES
   ========================================================================== */
.dxs-flow .woocommerce-notices-wrapper:empty { display: none; }

/* The look of the messages lives in dripex-notices.css (one design for the whole site). */

/* ==========================================================================
   4. BUTTONS + FORM FIELDS
   ========================================================================== */
.dxs-flow .button,
.dxs-flow button.button,
.dxs-flow input[type="submit"],
.dxs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid var(--color-blue);
  border-radius: 12px;
  background: var(--color-blue);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 14px -8px color-mix(in srgb, var(--color-blue) 70%, transparent);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

.dxs-flow .button:hover,
.dxs-flow button.button:hover,
.dxs-flow input[type="submit"]:hover,
.dxs-btn:hover {
  background: color-mix(in srgb, var(--color-blue) 86%, #000);
  border-color: color-mix(in srgb, var(--color-blue) 86%, #000);
  transform: translateY(-1px);
}

.dxs-flow .button[disabled],
.dxs-flow .button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* secondary (outlined) buttons */
.dxs-flow .actions .button[name="update_cart"],
.dxs-flow .copy-btn,
.dxs-flow .woocommerce-orders-table .button {
  border-color: var(--fl-border-strong);
  background: var(--fl-surface);
  color: var(--fl-head) !important;
  box-shadow: none;
}

.dxs-flow .actions .button[name="update_cart"]:hover,
.dxs-flow .copy-btn:hover { border-color: var(--color-blue); background: var(--fl-tint); }

/* primary call-to-action: the purchase buttons use the site's red */
.dxs-flow .checkout-button,
.dxs-flow #place_order {
  width: 100%;
  min-height: 56px;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-red-strong) 0%, #D62828 100%);
  font-size: 17px;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-red) 80%, transparent);
}

.dxs-flow .checkout-button:hover,
.dxs-flow #place_order:hover { background: linear-gradient(135deg, #d5303c 0%, #c02020 100%); border: 0; transform: translateY(-1px); }

.dxs-flow #place_order::before {
  content: '';
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
}

.dxs-flow .checkout-button::after { content: '→'; font-size: 1.1em; }

.dxs-btn--primary { display: inline-flex; }

/* fields */
.dxs-flow form .form-row,
.dxs-flow form p.form-row { margin: 0 0 18px; padding: 0; float: none; width: auto; }

.dxs-flow form label {
  display: block;
  margin: 0 0 7px;
  color: var(--fl-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.dxs-flow form label .required,
.dxs-flow form .required { color: var(--fl-red-ink); text-decoration: none; border: 0; font-weight: 700; }
.dxs-flow form label .optional { color: var(--gray-600); font-weight: 500; }

.dxs-flow input[type="text"],
.dxs-flow input[type="email"],
.dxs-flow input[type="password"],
.dxs-flow input[type="tel"],
.dxs-flow input[type="number"],
.dxs-flow input[type="search"],
.dxs-flow textarea,
.dxs-flow select {
  width: 100%;
  min-height: var(--fl-field-h);
  padding: 12px 15px;
  border: 1.5px solid var(--fl-border-strong);
  border-radius: 12px;
  background: var(--fl-surface);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dxs-flow textarea { min-height: 104px; resize: vertical; }
.dxs-flow input::placeholder,
.dxs-flow textarea::placeholder { color: var(--gray-500); opacity: 1; }
.dxs-flow input:hover,
.dxs-flow select:hover,
.dxs-flow textarea:hover { border-color: var(--gray-400); }

.dxs-flow input:focus,
.dxs-flow select:focus,
.dxs-flow textarea:focus {
  border-color: var(--color-blue);
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 22%, transparent);
}

.dxs-flow .woocommerce-invalid input,
.dxs-flow .woocommerce-invalid select,
.dxs-flow .woocommerce-invalid textarea { border-color: var(--color-red); }

.dxs-flow .woocommerce-input-wrapper { display: block; }

.dxs-flow input[type="checkbox"],
.dxs-flow input[type="radio"] {
  width: 19px;
  height: 19px;
  min-height: 0;
  margin: 0 8px 0 0;
  padding: 0;
  accent-color: var(--color-blue);
  vertical-align: -4px;
}

.dxs-flow label.checkbox,
.dxs-flow .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--fl-ink);
  font-weight: 500;
  cursor: pointer;
}

/* password show/hide button WooCommerce adds */
.dxs-flow .password-input { position: relative; display: block; }
.dxs-flow .password-input input { padding-right: 52px; }

.dxs-flow .show-password-input {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-700);
  cursor: pointer;
  transform: translateY(-50%);
}

.dxs-flow .show-password-input::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  font: inherit;
}

/* ==========================================================================
   5. CARDS (shared by cart + checkout)
   ========================================================================== */
.dxs-co-card,
.dxs-flow .cart_totals,
.dxs-cart-items {
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(15, 23, 42, .18);
}

.dxs-co-card { padding: clamp(20px, 3vw, 32px); }

.dxs-co-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.dxs-co-card__head--plain { align-items: center; justify-content: space-between; margin-bottom: 8px; }

.dxs-co-card__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--fl-tint-strong);
  color: var(--fl-blue-ink);
  font-size: 15px;
  font-weight: 800;
}

.dxs-flow .dxs-co-card__title { margin: 0; color: var(--fl-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.dxs-co-card__sub { margin: 3px 0 0; color: var(--gray-700); font-size: 14.5px; line-height: 1.55; }
.dxs-co__edit { color: var(--fl-blue-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   6. CART
   ========================================================================== */
.dxs-flow--cart .dxs-flow-content > .woocommerce:has(.woocommerce-cart-form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1024px) {
  .dxs-flow--cart .dxs-flow-content > .woocommerce:has(.woocommerce-cart-form) {
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 28px 32px;
  }

  .dxs-flow--cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .dxs-flow--cart .cart-collaterals { position: sticky; top: var(--fl-sticky-top); }
}

.dxs-flow--cart .cart-collaterals { float: none; width: auto; margin: 0; }
.dxs-flow .cart-collaterals .cart_totals { float: none; width: auto; margin: 0; padding: clamp(20px, 3vw, 28px); }

/* --- items table → one card, one grid row per product ------------------- */
.dxs-flow .woocommerce-cart-form { min-width: 0; margin: 0; }

.dxs-flow table.shop_table.cart {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(15, 23, 42, .18);
  overflow: hidden;
}

.dxs-flow table.shop_table.cart thead { display: none; }
.dxs-flow table.shop_table.cart tbody { display: block; }

.dxs-flow table.shop_table.cart td,
.dxs-flow table.shop_table.cart th {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fl-ink);
  text-align: left;
  vertical-align: baseline;
}

/* WooCommerce's responsive table prints a label before each cell — the grid doesn't need it */
.dxs-flow table.shop_table_responsive.cart td::before { display: none !important; content: none !important; }

.dxs-flow--cart tr.cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "thumb name  qty  subtotal"
    "thumb price qty  subtotal";
  align-items: center;
  column-gap: 20px;
  row-gap: 4px;
  padding: 22px 60px 22px 22px;
  border-top: 1px solid var(--fl-border);
}

.dxs-flow--cart tr.cart_item:first-child { border-top: 0; }

.dxs-flow--cart tr.cart_item .product-thumbnail { grid-area: thumb; }
.dxs-flow--cart tr.cart_item .product-name { grid-area: name; align-self: end; min-width: 0; }
.dxs-flow--cart tr.cart_item .product-price { grid-area: price; align-self: start; color: var(--gray-700); font-size: 14px; }
.dxs-flow--cart tr.cart_item .product-quantity { grid-area: qty; }
.dxs-flow--cart tr.cart_item .product-subtotal { grid-area: subtotal; min-width: 84px; color: var(--fl-head); font-size: 1.1rem; font-weight: 800; text-align: right; }

/* fixed quantity (hidden input) → unit price would just repeat the subtotal */
.dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) .product-price { display: none; }
.dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) .product-quantity { display: none; }
.dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) { grid-template-areas: "thumb name subtotal" "thumb name subtotal"; grid-template-columns: 96px minmax(0, 1fr) auto; }
.dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) .product-name { align-self: center; }

.dxs-flow--cart tr.cart_item .product-price .amount::after { content: ' each'; font-weight: 500; color: var(--gray-600); }

.dxs-flow--cart tr.cart_item td.product-thumbnail { width: auto; max-width: none; }

.dxs-flow--cart tr.cart_item td.product-thumbnail img {
  max-width: none;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: var(--gray-100);
  object-fit: cover;
}

.dxs-flow--cart tr.cart_item .product-name > a {
  color: var(--fl-head);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-decoration: none;
}

.dxs-flow--cart tr.cart_item .product-name > a:hover { color: var(--fl-blue-ink); }

/* remove (×) button, top-right of the row */
.dxs-flow--cart tr.cart_item .product-remove { position: absolute; top: 16px; right: 16px; width: auto; }

.dxs-flow--cart tr.cart_item a.remove {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fl-border);
  border-radius: 50%;
  background: var(--fl-surface);
  color: var(--gray-700) !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dxs-flow--cart tr.cart_item a.remove:hover {
  border-color: var(--color-red);
  background: color-mix(in srgb, var(--color-red) 10%, var(--fl-surface));
  color: var(--fl-red-ink) !important;
}

/* order details chosen in the add-on plugin */
.dxs-flow ul.wcpa_cart_meta,
.dxs-flow ul.wc-item-meta,
.dxs-flow dl.variation {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dxs-flow ul.wcpa_cart_meta li,
.dxs-flow ul.wc-item-meta li { display: grid; gap: 1px; margin: 0; padding: 0; }

.dxs-flow .wcpa_cart_meta_item-label,
.dxs-flow ul.wc-item-meta .wc-item-meta-label { margin: 0; color: var(--gray-700); font-size: 13px; font-weight: 600; line-height: 1.4; }
.dxs-flow .wcpa_cart_meta_item-value,
.dxs-flow .wcpa_cart_meta_item-value p { margin: 0; color: var(--gray-900); font-size: 14.5px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.dxs-flow ul.wc-item-meta p { display: inline; margin: 0; }

/* quantity stepper (JS adds the − / + buttons; without JS it stays a plain number input) */
.dxs-flow .quantity { display: inline-flex; align-items: center; }
.dxs-flow .quantity input.qty {
  width: 56px;
  min-height: 44px;
  padding: 8px 4px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.dxs-flow .quantity input.qty::-webkit-outer-spin-button,
.dxs-flow .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dxs-flow .quantity.dxs-qty {
  gap: 0;
  border: 1.5px solid var(--fl-border-strong);
  border-radius: 12px;
  background: var(--fl-surface);
  overflow: hidden;
}

.dxs-flow .quantity.dxs-qty input.qty { width: 48px; min-height: 42px; border: 0; border-radius: 0; box-shadow: none; }

.dxs-flow .quantity.dxs-qty .dxs-qty__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fl-head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

.dxs-flow .quantity.dxs-qty .dxs-qty__btn:hover { background: var(--gray-100); }

/* coupon + update row */
.dxs-flow td.actions .coupon input.input-text { min-height: 46px; }
.dxs-flow table.shop_table.cart tr:not(.cart_item) { display: block; border-top: 1px solid var(--fl-border); background: var(--gray-50); }

.dxs-flow td.actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 22px !important;
}

.dxs-flow td.actions .coupon { display: flex; flex: 1 1 340px; gap: 8px; max-width: 460px; margin: 0; padding: 0; float: none; }
.dxs-flow td.actions .coupon label { display: none; }
.dxs-flow td.actions .coupon input.input-text { flex: 1; min-width: 0; width: auto; margin: 0; }
.dxs-flow td.actions .coupon .button { flex: none; }
.dxs-flow td.actions > .button { float: none; margin: 0; }

/* inline coupon error printed by WooCommerce's cart script */
.dxs-flow td.actions .coupon { flex-wrap: wrap; }

.dxs-flow .coupon-error-notice {
  flex: 1 1 100%;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: var(--fl-red-ink) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.dxs-flow input.has-error,
.dxs-flow input[aria-invalid="true"] { border-color: var(--color-red); }

/* totals */
.dxs-flow .cart_totals h2 {
  margin: 0 0 14px;
  color: var(--fl-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.dxs-flow .cart_totals table.shop_table,
.dxs-co__review table.shop_table {
  width: 100%;
  margin: 0 0 18px;
  border: 0;
  border-collapse: collapse;
  background: none;
  font-size: 15px;
}

.dxs-flow .cart_totals table.shop_table th,
.dxs-flow .cart_totals table.shop_table td,
.dxs-co__review table.shop_table th,
.dxs-co__review table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--fl-border);
  background: none;
  color: var(--fl-ink);
  vertical-align: top;
}

.dxs-flow .cart_totals table.shop_table tr:first-child th,
.dxs-flow .cart_totals table.shop_table tr:first-child td { border-top: 0; }

.dxs-flow .cart_totals th,
.dxs-co__review tfoot th { color: var(--gray-700); font-weight: 600; text-align: left; }
.dxs-flow .cart_totals td,
.dxs-co__review tfoot td { text-align: right; font-weight: 700; color: var(--fl-head); }

.dxs-flow .cart_totals table td::before { display: none !important; content: none !important; }

.dxs-flow .order-total th,
.dxs-flow .order-total td { padding-top: 16px !important; color: var(--fl-head) !important; font-size: 1.25rem; font-weight: 800 !important; }

.dxs-flow .wc-proceed-to-checkout { margin: 0; padding: 0; }

/* Storefront's responsive shop_table hides <th> and prints data-title labels — for the totals we keep a normal
   two-column table (label left, value right) at every width. */
.dxs-flow .cart_totals table.shop_table_responsive,
.dxs-flow .cart_totals table.shop_table_responsive tbody { display: table; width: 100%; }
.dxs-flow .cart_totals table.shop_table_responsive tbody { display: table-row-group; }
.dxs-flow .cart_totals table.shop_table_responsive tr { display: table-row; }
.dxs-flow .cart_totals table.shop_table_responsive tr th,
.dxs-flow .cart_totals table.shop_table_responsive tr td { display: table-cell; }
.dxs-flow .cart_totals table.shop_table_responsive tr th { text-align: left; }
.dxs-flow .cart_totals table.shop_table_responsive tr td { text-align: right; }

/* Storefront stripes even table rows with a light background — a white slab in dark mode */
.dxs-flow table.shop_table tbody tr:nth-child(n) > td,
.dxs-flow table.shop_table tbody tr:nth-child(n) > th,
.dxs-flow table.order_details tbody tr:nth-child(n) > td,
.dxs-flow table.order_details tbody tr:nth-child(n) > th { background-color: transparent; }

/* trust list (cart + checkout summary) */
.dxs-trust { display: grid; gap: 14px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--fl-border); list-style: none; }
.dxs-trust li { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--gray-800); font-size: 13.5px; line-height: 1.5; }
.dxs-trust strong { display: block; color: var(--fl-head); font-size: 14px; }

.dxs-trust__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--fl-tint-strong);
  color: var(--fl-blue-ink);
}

.dxs-trust__icon::before,
.dxs-co__note-icon::before,
.dxs-empty-cart__icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* --- empty cart ----------------------------------------------------------- */
.dxs-empty-cart {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 40px);
  border: 1px solid var(--fl-border);
  border-radius: 28px;
  background: var(--fl-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 50px -30px rgba(15, 23, 42, .25);
  text-align: center;
}

.dxs-empty-cart__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
  border-radius: 22px;
  background: var(--fl-tint-strong);
  color: var(--fl-blue-ink);
}

.dxs-empty-cart__icon::before { width: 34px; height: 34px; }
.dxs-flow .dxs-empty-cart h2 { margin: 0; color: var(--fl-head); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.dxs-empty-cart p { margin: 0 0 18px; max-width: 44ch; color: var(--gray-800); font-size: 16px; line-height: 1.6; }

.dxs-empty-cart__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.dxs-empty-cart__chips li { margin: 0; }

.dxs-empty-cart__chips a {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid var(--fl-border-strong);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--gray-800);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.dxs-empty-cart__chips a:hover { border-color: var(--color-blue); background: var(--fl-tint); }

/* ==========================================================================
   7. CHECKOUT
   ========================================================================== */
.dxs-flow--checkout .dxs-flow-content > .woocommerce,
.dxs-flow--pay .dxs-flow-content > .woocommerce { display: block; }

/* "Returning customer?" and "Have a coupon?" strips */
.dxs-flow .woocommerce-form-login-toggle .woocommerce-info,
.dxs-flow .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 12px; padding-block: 12px; font-size: 14.5px; }

.dxs-flow .woocommerce-info .showlogin,
.dxs-flow .woocommerce-info .showcoupon { text-decoration: underline; text-underline-offset: 3px; }

.dxs-flow form.woocommerce-form-login,
.dxs-flow form.checkout_coupon {
  max-width: 640px;
  margin: 0 0 20px;
  padding: 22px;
  border: 1px solid var(--fl-border);
  border-radius: 18px;
  background: var(--fl-surface);
}

.dxs-flow form.woocommerce-form-login > p:first-of-type { margin-top: 0; color: var(--gray-800); }
.dxs-flow form.woocommerce-form-login .form-row-first,
.dxs-flow form.woocommerce-form-login .form-row-last { width: 100%; float: none; }
.dxs-flow form.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; width: 100%; margin: 0 0 14px; }
.dxs-flow form.woocommerce-form-login .woocommerce-form-login__submit { width: 100%; }
.dxs-flow form.woocommerce-form-login .lost_password { margin: 14px 0 0; }
.dxs-flow form.woocommerce-form-login .lost_password a { color: var(--fl-blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dxs-flow form.checkout_coupon .form-row-first,
.dxs-flow form.checkout_coupon .form-row-last { display: inline-block; vertical-align: bottom; margin: 0 8px 0 0; }
.dxs-flow form.checkout_coupon .form-row-first { width: min(100%, 360px); }

/* the two-column grid: details + payment | sticky summary */
.dxs-co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "details" "summary" "payment";
  gap: 22px;
  align-items: start;
}

.dxs-co__details { grid-area: details; }
.dxs-co__summary { grid-area: summary; }
.dxs-co__payment { grid-area: payment; }

@media (min-width: 1024px) {
  .dxs-co__grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas: "details summary" "payment summary";
    gap: 22px 32px;
  }

  .dxs-co__summary { position: sticky; top: var(--fl-sticky-top); }
}

/* --- billing fields ------------------------------------------------------ */
.dxs-co__billing h3,
.dxs-co__shipping h3 { display: none; }

.dxs-co__fields .woocommerce-billing-fields__field-wrapper,
.dxs-co__fields .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.dxs-co__fields .woocommerce-billing-fields__field-wrapper .form-row,
.dxs-co__fields .woocommerce-shipping-fields__field-wrapper .form-row { min-width: 0; }
.dxs-co__fields .form-row-wide,
.dxs-co__fields .notes { grid-column: 1 / -1; }
.dxs-co__fields .clear { display: none; }

.dxs-co__fields .woocommerce-additional-fields { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--fl-border); }
.dxs-co__fields .woocommerce-additional-fields h3 { display: block; margin: 0 0 14px; color: var(--gray-700); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dxs-co__fields .woocommerce-account-fields { margin: 4px 0 6px; }
.dxs-co__fields .woocommerce-account-fields .create-account { margin-top: 12px; }
.dxs-co__fields .woocommerce-shipping-fields:empty { display: none; }

.dxs-co__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-green) 9%, var(--fl-surface));
  color: var(--gray-800);
  font-size: 14px;
  line-height: 1.55;
}

.dxs-co__note-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--color-green) 18%, var(--fl-surface)); color: var(--fl-green-ink); }

/* --- order summary -------------------------------------------------------- */
.dxs-co__summary { padding: clamp(20px, 3vw, 28px); }

/* Storefront floats #order_review / its heading into a 41% column */
.dxs-flow #order_review,
.dxs-flow #order_review_heading {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none; /* Storefront paints #order_review white — invisible in light mode, a white slab in dark */
}

.dxs-flow .woocommerce-checkout-review-order-table { width: 100%; }
.dxs-co__review table.shop_table thead { display: none; }

.dxs-co__review tbody td { padding: 16px 0; border-top: 0; }
.dxs-co__review table.shop_table td.product-name { width: auto; }
.dxs-co__review table.shop_table td.product-total { width: 1%; padding-left: 12px; }
.dxs-co__review tbody tr + tr td { border-top: 1px solid var(--fl-border); }
.dxs-co__review tbody td.product-name { padding-right: 16px; color: var(--fl-head); font-weight: 700; line-height: 1.45; }
.dxs-co__review tbody td.product-total { text-align: right; white-space: nowrap; color: var(--fl-head); font-weight: 800; }
.dxs-co__review .product-quantity { color: var(--gray-700); font-weight: 600; }
.dxs-co__review tfoot tr:first-child th,
.dxs-co__review tfoot tr:first-child td { border-top: 1px solid var(--fl-border); }

.dxs-co__review .woocommerce-shipping-totals td { text-align: right; font-weight: 500; }

/* --- payment -------------------------------------------------------------- */
.dxs-flow #payment { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }

.dxs-flow #payment ul.payment_methods {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  list-style: none;
}

.dxs-flow #payment ul.payment_methods > li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1.5px solid var(--fl-border-strong);
  border-radius: 16px;
  background: var(--fl-surface);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.dxs-flow #payment ul.payment_methods > li:hover { border-color: var(--gray-400); }

/* Storefront zeroes the last item's bottom padding and border */
.dxs-flow #payment ul.payment_methods > li:last-child { padding-bottom: 16px; border-bottom: 1.5px solid var(--fl-border-strong); }
.dxs-flow #payment ul.payment_methods > li:last-child:has(> input.input-radio:checked) { border-bottom-color: var(--color-blue); }
@media (max-width: 640px) { .dxs-flow #payment ul.payment_methods > li:last-child { padding-bottom: 14px; } }

.dxs-flow #payment ul.payment_methods > li:has(> input.input-radio:checked) {
  border-color: var(--color-blue);
  background: var(--fl-tint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 16%, transparent);
}

.dxs-flow #payment ul.payment_methods input.input-radio { grid-column: 1; width: 20px; height: 20px; margin: 0; }

.dxs-flow #payment ul.payment_methods > li > label {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--fl-head);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

/* one glyph per method: a tinted tile (::before) with the glyph mask on top (::after) */
.dxs-flow #payment ul.payment_methods > li {
  --pm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
}

.dxs-flow #payment ul.payment_methods > li.payment_method_wallet {
  --pm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5A2.5 2.5 0 0 1 7 5h10.5a1.5 1.5 0 0 1 1.5 1.5V9'/%3E%3Cpath d='M4.5 7.5v10A2.5 2.5 0 0 0 7 20h11.5A1.5 1.5 0 0 0 20 18.5v-8A1.5 1.5 0 0 0 18.5 9H7a2.5 2.5 0 0 1-2.5-1.5Z'/%3E%3Ccircle cx='16' cy='14.5' r='1.2'/%3E%3C/svg%3E");
}

.dxs-flow #payment ul.payment_methods > li.payment_method_paypal_offline_payment {
  --pm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='m4 7.5 8 6 8-6'/%3E%3C/svg%3E");
}

.dxs-flow #payment ul.payment_methods > li.payment_method_crypto_dynamic,
.dxs-flow #payment ul.payment_methods > li.payment_method_binance_pay {
  --pm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.4c-.5-.9-1.5-1.4-2.8-1.4-1.6 0-2.7.8-2.7 2 0 3 5.6 1.3 5.6 4.2 0 1.2-1.2 2-2.9 2-1.4 0-2.5-.5-3.1-1.4M12 6.5V8m0 8v1.5'/%3E%3C/svg%3E");
}

/* Storefront pads these labels like buttons and visually hides the radio — reset both, and draw our own indicator */
.dxs-flow #payment ul.payment_methods > li > label { position: relative; min-height: 38px; padding: 0 44px 0 52px; }

.dxs-flow #payment ul.payment_methods input.input-radio { position: absolute; opacity: 0; }

.dxs-flow #payment ul.payment_methods > li::after {
  content: '';
  position: absolute;
  top: 25px;
  right: 18px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gray-400);
  border-radius: 50%;
  background: var(--fl-surface) center / 12px 12px no-repeat;
  transition: border-color .15s ease, background-color .15s ease;
}

.dxs-flow #payment ul.payment_methods > li:has(> input.input-radio:checked)::after {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.dxs-flow #payment ul.payment_methods > li:has(> input.input-radio:focus-visible) { outline: 3px solid color-mix(in srgb, var(--color-blue) 55%, transparent); outline-offset: 2px; }

.dxs-flow #payment ul.payment_methods > li > label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--fl-tint-strong);
  transform: translateY(-50%);
}

/* Storefront draws its own purple "selected" dot on the checked label's ::before (higher specificity,
   with !important-free ids) — restate the tile so the dot doesn't sit on top of it. */
.dxs-flow #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:first-child:checked + label::before,
.dxs-flow #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:first-child + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  border-radius: 11px;
  background: var(--fl-tint-strong);
  box-shadow: none;
  transform: translateY(-50%);
}

.dxs-flow #payment ul.payment_methods > li > label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--fl-blue-ink);
  -webkit-mask: var(--pm-ic) center / contain no-repeat;
  mask: var(--pm-ic) center / contain no-repeat;
  transform: translateY(-50%);
}

/* the payment's own instructions / fields (WooCommerce toggles display inline) */
.dxs-flow #payment div.payment_box {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  background: var(--fl-surface);
  color: var(--gray-800);
  font-size: 14.5px;
  line-height: 1.6;
}

.dxs-flow #payment div.payment_box::before,
.dxs-flow #payment div.payment_box::after { display: none !important; }
.dxs-flow #payment div.payment_box p { margin: 0 0 10px; color: var(--gray-800) !important; }
.dxs-flow #payment div.payment_box > :last-child { margin-bottom: 0; }
.dxs-flow #payment div.payment_box label { margin-bottom: 6px; }
.dxs-flow #payment div.payment_box input,
.dxs-flow #payment div.payment_box select { max-width: none !important; }
.dxs-flow #payment div.payment_box small { display: block; margin-top: 6px; color: var(--gray-700); font-size: 13px; }
.dxs-flow #payment div.payment_box strong { color: var(--fl-head); }

.dxs-flow #payment div.payment_box code {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px dashed var(--fl-border-strong);
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--fl-head);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.dxs-flow #payment div.payment_box .copy-btn { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }

/* place order block */
.dxs-flow #payment .form-row.place-order { margin: 0; padding: 0; background: none; }
.dxs-flow .woocommerce-terms-and-conditions-wrapper { margin: 22px 0 16px; }
.dxs-flow .woocommerce-privacy-policy-text p { margin: 0; color: var(--gray-700); font-size: 13.5px; line-height: 1.6; }
.dxs-flow .woocommerce-privacy-policy-text a { color: var(--fl-blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   8. ORDER RECEIVED (thank you) + ORDER PAY
   ========================================================================== */
.dxs-flow .woocommerce-order { display: grid; gap: 22px; max-width: 900px; margin: 0 auto; }

.dxs-flow .woocommerce-thankyou-order-received {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--color-green) 32%, transparent);
  border-radius: var(--fl-radius);
  background: color-mix(in srgb, var(--color-green) 9%, var(--fl-surface));
  color: var(--fl-head);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.dxs-flow .woocommerce-thankyou-order-received::before {
  content: '';
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-green) center / 26px 26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.dxs-flow .woocommerce-thankyou-order-failed { --nt: var(--color-red); }

.dxs-flow ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dxs-flow ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--fl-border);
  border-radius: 16px;
  background: var(--fl-surface);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media (min-width: 721px) {
  .dxs-flow ul.woocommerce-order-overview li.woocommerce-order-overview__email { grid-column: span 2; }
}

.dxs-flow ul.woocommerce-order-overview li::before,
.dxs-flow ul.woocommerce-order-overview li::after { display: none !important; }
.dxs-flow ul.woocommerce-order-overview li strong { color: var(--fl-head); font-size: 1.02rem; font-weight: 800; letter-spacing: 0; text-transform: none; overflow-wrap: break-word; }

.dxs-flow .woocommerce-order > p:not(.woocommerce-thankyou-order-received) {
  margin: 0;
  color: var(--gray-800);
  font-size: 15.5px;
  line-height: 1.65;
}

.dxs-flow .woocommerce-order-details,
.dxs-flow .woocommerce-customer-details,
.dxs-flow .woocommerce-order-downloads {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
}

.dxs-flow .woocommerce-order-details__title,
.dxs-flow .woocommerce-column__title,
.dxs-flow .woocommerce-order-downloads__title { margin: 0 0 14px; color: var(--fl-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }

.dxs-flow table.woocommerce-table--order-details,
.dxs-flow table.order_details {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
  font-size: 15px;
}

.dxs-flow table.order_details th,
.dxs-flow table.order_details td { padding: 13px 0; border: 0; border-top: 1px solid var(--fl-border); background: none; color: var(--fl-ink); text-align: left; vertical-align: top; }
.dxs-flow table.order_details thead th { border-top: 0; color: var(--gray-700); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dxs-flow table.order_details td:last-child,
.dxs-flow table.order_details th:last-child { text-align: right; }
.dxs-flow table.order_details tfoot th { color: var(--gray-700); font-weight: 600; }
.dxs-flow table.order_details tfoot td { color: var(--fl-head); font-weight: 700; }
.dxs-flow table.order_details tfoot tr:last-child th,
.dxs-flow table.order_details tfoot tr:last-child td { color: var(--fl-head); font-size: 1.1rem; font-weight: 800; }
.dxs-flow table.order_details .product-name a { color: var(--fl-head); font-weight: 700; text-decoration: none; }
.dxs-flow table.order_details .product-quantity { color: var(--gray-700); }

.dxs-flow .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; }
.dxs-flow .woocommerce-customer-details .col-1,
.dxs-flow .woocommerce-customer-details .col-2 { float: none; width: auto; max-width: none; margin: 0; }
.dxs-flow .woocommerce-customer-details address { margin: 0; padding: 16px; border: 1px solid var(--fl-border); border-radius: 14px; background: var(--gray-50); color: var(--fl-ink); font-size: 15px; font-style: normal; line-height: 1.7; }
.dxs-flow .woocommerce-customer-details p { margin: 6px 0 0; color: var(--gray-800); }

.dxs-flow .order-again { margin: 0 0 8px; }
.dxs-flow .order-again .button { min-height: 42px; }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 720px) {
  .dxs-flow-hero__row { gap: 16px; }
  .dxs-steps { width: 100%; justify-content: space-between; }
  .dxs-steps__item + .dxs-steps__item { margin-left: 8px; padding-left: 22px; }
  .dxs-steps__item + .dxs-steps__item::before { width: 14px; }
  .dxs-steps__item { gap: 8px; font-size: 13px; }
  .dxs-steps__num { width: 26px; height: 26px; font-size: 12px; }
}

@media (max-width: 400px) {
  .dxs-steps__item:not(.is-current) .dxs-steps__label { display: none; }
  .dxs-steps__item + .dxs-steps__item { margin-left: 4px; padding-left: 18px; }
}

@media (max-width: 640px) {
  /* cart rows: thumbnail + name on top, quantity and price beneath */
  .dxs-flow--cart tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  name"
      "thumb qty   subtotal";
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    padding: 18px 16px;
  }

  .dxs-flow--cart tr.cart_item .product-name { margin-right: 40px; }
  .dxs-flow--cart tr.cart_item .product-subtotal { min-width: 0; }

  .dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb subtotal";
  }

  .dxs-flow--cart tr.cart_item:has(.quantity input[type="hidden"]) .product-subtotal { text-align: left; }
  .dxs-flow--cart tr.cart_item .product-price { display: none; }
  .dxs-flow--cart tr.cart_item .product-thumbnail img { width: 72px; height: 72px; border-radius: 14px; }
  .dxs-flow--cart tr.cart_item .product-remove { top: 12px; right: 12px; }
  .dxs-flow td.actions { padding: 16px !important; }
  .dxs-flow td.actions .coupon { flex: 1 1 100%; max-width: none; flex-wrap: wrap; }
  .dxs-flow td.actions .coupon input.input-text { flex: 1 1 100%; }
  .dxs-flow td.actions .coupon .button { flex: 1 1 100%; }
  .dxs-flow td.actions > .button { flex: 1 1 100%; }

  .dxs-co__fields .woocommerce-billing-fields__field-wrapper,
  .dxs-co__fields .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

  .dxs-flow #payment ul.payment_methods > li { padding: 14px; column-gap: 12px; }
  .dxs-flow .woocommerce-order-details,
  .dxs-flow .woocommerce-customer-details { padding: 18px 16px; }
  .dxs-flow ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dxs-flow form.checkout_coupon .form-row-first,
  .dxs-flow form.checkout_coupon .form-row-last { display: block; width: 100%; margin: 0 0 12px; }
  .dxs-flow form.checkout_coupon .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dxs-flow * { transition: none !important; }
  .dxs-flow .button:hover,
  .dxs-btn:hover { transform: none; }
}

/* ==========================================================================
   CHECKOUT "WELCOME BACK" — an emailed code, entered right on the page
   (assets/js/dripex-checkout-login.js)
   ========================================================================== */
.dxs-flow .dxs-co-welcome {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--color-blue) 28%, transparent);
  border-left: 4px solid var(--color-blue);
  border-radius: 14px;
  background: var(--fl-tint);
  color: var(--fl-ink);
  font-size: 15px;
  line-height: 1.55;
}

.dxs-flow .dxs-co-welcome[hidden] { display: none; }
.dxs-flow .dxs-co-welcome p { margin: 0; color: var(--fl-ink); }
.dxs-flow .dxs-co-welcome strong { color: var(--fl-head); overflow-wrap: anywhere; }

.dxs-flow .dxs-co-welcome__row { display: flex; gap: 10px; margin-top: 12px; }

.dxs-flow .dxs-co-welcome__code {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 8px 14px;
  border: 1.5px solid var(--fl-border-strong);
  border-radius: 12px;
  background: var(--fl-surface);
  color: var(--gray-900);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .4em;
  text-align: center;
}

.dxs-flow .dxs-co-welcome__code:focus {
  border-color: var(--color-blue);
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 22%, transparent);
}

.dxs-flow .dxs-co-welcome__verify {
  flex: none;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--color-blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dxs-flow .dxs-co-welcome__verify:disabled { opacity: .6; cursor: default; }

.dxs-flow .dxs-co-welcome__error { margin-top: 10px !important; color: var(--fl-red-ink) !important; font-size: 14px; font-weight: 600; }
.dxs-flow .dxs-co-welcome__error[hidden] { display: none; }
.dxs-flow .dxs-co-welcome__resend { margin-top: 10px !important; color: var(--gray-700) !important; font-size: 14px; }

.dxs-flow .dxs-co-welcome__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fl-blue-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .dxs-flow .dxs-co-welcome__row { flex-direction: column; }
  .dxs-flow .dxs-co-welcome__verify { width: 100%; }
}

/* welcome-back box: every button sets its own hover fill AND text (the global button hover is a dark fill) */
.dxs-flow .dxs-co-welcome__verify:hover:not(:disabled) { background: color-mix(in srgb, var(--color-blue) 86%, var(--color-navy)); color: #fff; }
.dxs-flow .dxs-co-welcome__link:hover,
.dxs-flow .dxs-co-welcome__link:focus { background: none; border-color: transparent; color: var(--fl-head); }