/* ==========================================================================
   STYLES — PurCel Labs checkout flow
   Pages: sign-in, sign-in-otp, select-payment-method, checkout,
          saved-cards, order-success, order-history

   Load order: bootstrap (CDN) -> styles.css

   Sections (in cascade order):
     1. Shared layout (container widths)
     2. Site footer + page loader
     3. Checkout flow (auth, checkout, payment, saved cards, order success, order history)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap");

/* BS5 resets that break the existing BS4-designed footer / account links */
.footer-wrapper a,
.account-sidebar a,
.account-page-main a,
.account-page-main .btn-link {
  text-decoration: none;
}

.footer-wrapper a {
  color: inherit;
}

.footer-wrapper .row {
  --bs-gutter-x: 0;
}

/* ====================================================================== */
/* 1. SHARED LAYOUT
   Page container widths (used by footer and page content).
   ====================================================================== */

/* Page container widths */
/* 992px-1299px used a fixed 970px, so the side space grew from ~11px at 992px
   to ~165px at 1299px -- only ~27px a side at 1024px. Growing the width with
   the screen instead (~910px at 992px up to ~1040px at 1299px) makes the gap
   rise smoothly (about 40px to 130px) and meet the 1300px rule below exactly.
   It starts no narrower than ~900px because the checkout address row's
   "State / Province" placeholder gets clipped below that.
   max-width: Bootstrap caps .container at 960px between 992px and 1199px. */
@media (min-width: 992px) {
  .container {
    width: calc(42.2vw + 491px) !important;
    max-width: 1400px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

/* From 1300px the container used fixed steps (1300px, then 1400px), which made
   it exactly as wide as the screen at 1300px and 1400px -- almost no side space
   there, recovering only slowly up to ~1700px. A proportional width keeps the
   side gap steady (about 130-160px a side, like the 155px at 1280px) until the
   1400px max-width above caps it at about 1750px. */
@media (min-width: 1300px) {
  .container {
    width: 80% !important;
  }
}

/* ====================================================================== */
/* 2. SITE FOOTER + PAGE LOADER
   Brand colours, off-scale spacing, and the loader. Layout/colour utilities
   live in the markup (container, row, col, text-white, d-md-flex, fw-normal,
   position-fixed / bg-white on #page-loader, border-0 / fw-bolder on back-to-top).
   ====================================================================== */

.footer-wrapper {
  background-color: #202021;
}

.footer-details-box {
  padding: 75px 0 50px;
}

.footer-details-box img {
  width: 180px;
}

.footer-details-box p {
  font-size: 15px;
  color: #d2d2d3;
}

.footer-details-box p i {
  color: #2650a4;
}

.footer-contact-box {
  margin-top: 0.3rem;
}

/* Privacy Policy / Terms / Returns: one row below the footer rule, starting at the same left
   edge as the address / email / phone above it, with a thin vertical line between them. */
.footer-legal-links {
  gap: 6px 24px;
}

.footer-legal-links a {
  position: relative;
  font-size: 15px;
  color: #d2d2d3;
  text-decoration: none;
}

.footer-legal-links a + a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.45;
  transform: translateY(-50%);
}

/* Phones: the links sit under the copyright line, so give them some room, and tighten
   them so all three still fit on one row. */
@media (max-width: 767.98px) {
  .footer-legal-links {
    margin-top: 12px;
  }
}

/* Small desktops: a narrower column, so a slightly smaller size keeps all three on one row. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .footer-legal-links {
    gap: 6px 14px;
  }

  .footer-legal-links a {
    font-size: 13px;
  }

  .footer-legal-links a + a::before {
    left: -7px;
  }
}

/* Tablets: the column is too narrow for one row, so the links stack neatly, one per line
   (no separator lines then), starting at the same left edge as the address above. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-legal-links {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .footer-legal-links a {
    font-size: 14px;
  }

  .footer-legal-links a + a::before {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .footer-legal-links {
    gap: 6px 14px;
  }

  .footer-legal-links a {
    font-size: 13px;
  }

  .footer-legal-links a + a::before {
    left: -7px;
  }
}

/* The narrowest phones that still fit one row need the smaller size. */
@media (max-width: 399.98px) {
  .footer-legal-links a {
    font-size: 12px;
  }
}

/* Very narrow phones: the three can't share a row, so they stack vertically (no separator lines). */
@media (max-width: 369.98px) {
  .footer-legal-links {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* stacked, so there is room for a larger size */
  .footer-legal-links a {
    font-size: 14px;
  }

  .footer-legal-links a + a::before {
    display: none;
  }
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.bottom-footer {
  border-top: 1px solid #ebebeb54;
  padding: 20px 0;
  font-size: 15px;
  opacity: 0.6;
  gap: 6px;
}

.click-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  display: none;
}

.click-to-top button {
  background-color: #2650a4;
  font-size: 20px;
  padding: 5px 13px;
  border-radius: 10px;
  outline: none;
}

#page-loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
  z-index: 1100;
}

#page-loader.show {
  transition: opacity 0.4s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

#page-loader .circular {
  animation: loader-rotate 2s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
}

#page-loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: loader-dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes loader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   Two conditions, previously duplicated as two identical blocks: phones, and
   portrait tablets up to 991px. Bootstrap's md breakpoint covers the first but
   has no way to express the orientation half, so both stay here.
   -------------------------------------------------------------------------- */
@media (max-width: 767px),
(orientation: portrait) and (max-width: 991px) {

  /* Back to top button */
  .click-to-top {
    bottom: 20px;
    right: 20px;
  }

  /* Footer wrapper */
  .footer-wrapper {
    padding: 3rem 0 4rem;
  }

  .footer-wrapper .footer-details-box {
    padding: 10px 0;
  }

  /* Bottom footer / copyright.
     .d-md-flex already stacks this below 768px; the !important is needed to
     also stack it on portrait tablets between 768px and 991px, where the
     Bootstrap utility is still applying display:flex. */
  .bottom-footer {
    display: block !important;
  }

  .bottom-footer a {
    white-space: nowrap;
  }
}


/* ====================================================================== */
/* 3. CHECKOUT FLOW
   Main page content (auth, checkout, payment, saved cards, order success).
   Same look as before — unused/IE rules dropped, duplicate declarations
   folded into the winning rule. Header/footer live in sections 1–2.
   ====================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — shared across checkout + account pages
   -------------------------------------------------------------------------- */
:root {
  /* Landing & Product Shared Tokens */
  --landing-white: #ffffff;
  --landing-blue: #0963d7;
  --landing-blue-hover: #005fd1;
  --landing-blue-dark: #095ec4;
  --landing-blue-glow: rgba(80, 140, 230, 0.75);
  --landing-blue-heading: #cce3ff;
  --landing-blue-line: #c5d7ef;
  --landing-border: #dbe3ec;

  /* Blues */
  --flow-blue: #0963d7;
  --flow-blue-hover: #005fd1;
  --flow-blue-dark: #095ec4;
  --flow-blue-amex: #0057c8;
  --flow-blue-amex-bg: #006fcf;
  --flow-blue-soft: #e8f1ff;
  --flow-blue-softest: #f7faff;
  --flow-blue-focus: #cbddff;
  --flow-blue-btn: #eaf3ff;
  --flow-blue-btn-hover: #d6e8ff;
  --flow-blue-icon: #f0f5ff;

  /* Text */
  --flow-text: #111;
  --flow-text-heading: #242424;
  --flow-text-dark: #142039;
  --flow-text-muted: #4a4a4a;
  --flow-text-list: #666666;
  --flow-text-gpay: #3c4043;
  --flow-text-label: #667792;
  --flow-text-caption: #4f607a;
  --flow-text-subtle: #9a9aa3;
  --flow-text-soft: #7a7a85;
  --flow-label-muted: #8a8a8f;
  --flow-placeholder: #aaa;

  /* Borders */
  --flow-border: #d9d9e0;
  --flow-border-light: #ddd;
  --flow-border-card: #dbe3ec;
  --flow-border-input: #ccd7e5;
  --flow-border-muted: #d4dce6;
  --flow-border-hover: #9aacc2;
  --flow-border-tracking: #cbd5e1;
  --flow-border-help: #d8e0ec;
  --flow-border-dashed: #cfd7e2;
  --flow-border-dashed-hover: #b8c4d6;
  --flow-border-trust: #1a1a1a;
  --flow-border-soft: #9e9e9e;
  --flow-divider: #e4e4e8;

  /* Surfaces & controls */
  --flow-white: #fff;
  --flow-surface-subtle: #fbfcfe;
  --flow-surface-muted: #f7f9fc;
  --flow-disabled-bg: #b0bdd0;

  /* Success */
  --flow-success: #198754;
  --flow-success-bg: #e0f7e7;
  --flow-success-ring: #e8f8ec;
  --flow-success-mark: #12b94e;
  --flow-success-badge-bg: #d6f8e8;
  --flow-success-badge: #00a35a;
  --flow-green: #25991f;

  /* Danger / error */
  --flow-red: #eb001b;
  --flow-red-remove: #ff2d5f;
  --flow-red-pending: #e53935;
  --flow-red-soft: #ffabab;
  --flow-red-error: #ff8080;
  --flow-danger: #dc3545;
  /* Validation-error outline: a soft pink hairline (drawn as an outline so the
     field keeps its normal border thickness and does not change size). */
  --flow-error-line: #f2a3ae;

  /* Effects */
  --flow-shadow-modal: rgba(20, 32, 57, 0.16);

  /* Radii */
  --flow-radius-pill: 50rem;
  --flow-radius-card: 24px;
  --flow-radius-input: 18px;
}

/* --------------------------------------------------------------------------
   Shared form components — reusable across all pages
   -------------------------------------------------------------------------- */
.flow-input {
  height: 36px;
  min-height: 36px;
  border: 3px solid var(--flow-border-light);
  border-radius: var(--flow-radius-pill);
  background: var(--flow-white);
  color: var(--flow-text);
  font-size: 12px;
  padding: 0 14px;
  box-shadow: none !important;
  outline: 0;
}

.flow-input:focus {
  border-color: var(--flow-border-light);
  box-shadow: none !important;
  outline: 0;
}

.flow-input:disabled,
.flow-input[disabled] {
  background-color: #e9ecef !important;
  color: #79879c !important;
  border-color: #d1d9e2 !important;
  cursor: not-allowed;
  opacity: 0.75;
  -webkit-text-fill-color: #79879c;
}

.flow-label {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--flow-label-muted);
}

.flow-input-group .input-group-text {
  border: 3px solid var(--flow-border-light);
  border-right: 0;
  border-top-left-radius: var(--flow-radius-pill);
  border-bottom-left-radius: var(--flow-radius-pill);
  height: 36px;
  min-height: 36px;
  color: var(--flow-text-label);
  background: var(--flow-white);
}

.flow-input-group .form-control {
  border: 3px solid var(--flow-border-light);
  border-left: 0;
  border-top-right-radius: var(--flow-radius-pill);
  border-bottom-right-radius: var(--flow-radius-pill);
  height: 36px;
  min-height: 36px;
  font-size: 12px;
  color: var(--flow-text);
  background: var(--flow-white);
}

.flow-input-group .form-control:focus,
.flow-input-group:focus-within .input-group-text {
  border-color: var(--flow-border-light);
  box-shadow: none;
  outline: 0;
}

@media (max-width: 767.98px) {
  .flow-input {
    min-height: 40px;
    padding: 0 14px;
  }

  .flow-input-group .input-group-text,
  .flow-input-group .form-control {
    min-height: 40px;
  }
}

.flow-input-error,
.flow-input-error:focus {
  border-color: var(--flow-error-line) !important;
}

.flow-input-error-msg {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Base typography & resets
   Global element defaults the flow pages rely on.
   -------------------------------------------------------------------------- */
body,
html {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
  overflow-x: clip;
  padding: 0% !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  line-height: 36px;
  font-weight: 600;
  color: var(--flow-text-heading);
  font-size: 36px;
}

p {
  font-weight: 500;
  font-size: 15px;
}

ol,
ul {
  box-sizing: border-box;
  font-size: 13px;
  color: var(--flow-text-muted);
}

ul li,
ol li {
  color: var(--flow-text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  box-sizing: border-box;
}

a:hover {
  text-decoration: none;
  opacity: 0.8;
}

input[type="checkbox"] {
  margin-right: 5px;
}

::placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Shared layout — page wrappers & main areas
   -------------------------------------------------------------------------- */
.login-to-checkout-wrapper,
.checkout-flow-wrapper,
.saved-cards-wrapper,
.order-history-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.account-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.account-wrapper .account-page-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.account-wrapper .text-primary {
  color: var(--flow-blue) !important;
}

.checkout-flow-page,
.saved-cards-page {
  flex: 1;
  padding: 40px 0 64px;
}

/* body carries this class (and several other page-specific ones) statically
   on every page via _clear.php, so it isn't actually scoped to a real
   "login to checkout" page -- exclude the checkout/saved-cards pages
   explicitly or its higher-specificity padding-top (48px) silently wins
   over .checkout-flow-page's own value at every breakpoint above 980px,
   making that one screen size inconsistent with the rest. */
.login-to-checkout-wrapper .page:not(.checkout-flow-page):not(.saved-cards-page) {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 48px 0 64px;
}

/* --------------------------------------------------------------------------
   5. Shared page header (checkout + saved cards)
   -------------------------------------------------------------------------- */
.checkout-flow-header-text h1,
.saved-cards-header-text h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--flow-text);
}

.saved-cards-header-text p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--flow-text-muted);
}

/* --------------------------------------------------------------------------
   6. Shared custom circular checkbox
   -------------------------------------------------------------------------- */
.checkout-checkbox-row,
.select-payment-page .save-card-option,
.add-card-modal .save-card-option,
.select-payment-page .same-address-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
}

.select-payment-page .same-address-option {
  grid-template-columns: 18px auto;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
}

.checkout-checkbox-row input,
.select-payment-page .save-card-checkbox,
.add-card-modal .save-card-checkbox,
.select-payment-page .add-card-form .same-address-checkbox {
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.checkout-checkbox-row::before,
.select-payment-page .save-card-option::before,
.add-card-modal .save-card-option::before,
.select-payment-page .same-address-option::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--flow-border);
  border-radius: 50%;
  background: var(--flow-white);
  box-sizing: border-box;
  pointer-events: none;
}

.checkout-checkbox-row:has(input:checked)::before,
.select-payment-page .save-card-option:has(input:checked)::before,
.add-card-modal .save-card-option:has(input:checked)::before,
.select-payment-page .same-address-option:has(input:checked)::before {
  background: var(--flow-blue);
  border-color: var(--flow-blue);
}

.checkout-checkbox-row:has(input:checked)::after,
.select-payment-page .save-card-option:has(input:checked)::after,
.add-card-modal .save-card-option:has(input:checked)::after,
.select-payment-page .same-address-option:has(input:checked)::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 5px;
  height: 12px;
  margin-top: -3px;
  margin-right: -1px;
  border: solid var(--flow-white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.select-payment-page .same-address-option:has(input:checked)::after {
  margin-top: -2px;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   7. Shared custom radio (payment + shipping)
   -------------------------------------------------------------------------- */
.select-payment-page .payment-radio,
.checkout-flow-page .payment-radio,
.addresses-page .payment-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--flow-border);
  position: relative;
}

.select-payment-page .payment-radio::after,
.checkout-flow-page .payment-radio::after,
.addresses-page .payment-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flow-white);
  transform: translate(-50%, -50%);
}

.select-payment-page .payment-method-card:has(input:checked) .payment-radio {
  background: var(--flow-blue);
}

/* --------------------------------------------------------------------------
   8. Shared utilities
   -------------------------------------------------------------------------- */
.is-hidden {
  display: none !important;
}

/* ==========================================================================
   AUTH PAGES — sign-in, sign-in-otp (+ shared .auth-card on payment)
   Only values Bootstrap 5 cannot match 1:1
   ========================================================================== */

.auth-card {
  width: fit-content;
  min-height: 550px;
  border: 3px solid var(--flow-border);
  border-radius: 28px;
  padding: 32px 20px;
}

.icon-circle {
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  background: var(--flow-blue-icon);
}

.bolt {
  height: 56px;
  width: auto;
}

.auth-card h1 {
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.benefit-line {
  display: grid;
  grid-template-columns: 24px auto 24px;
  gap: 15px;
  margin-bottom: 2px;
  padding: 0 10px;
}

.benefit-line span {
  height: 2px;
  background: var(--flow-border);
}

.benefit-line p {
  font-size: 13px;
  white-space: nowrap;
  margin: 0;
}

.benefits {
  margin: 0 0 40px;
  font-size: 13px;
  line-height: 1.85;
}

.benefits li {
  margin-bottom: 10px;
  font-size: 13px;
}

.auth-form {
  width: 300px;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 46px;
  border: 2.2px solid var(--flow-blue);
  border-radius: var(--flow-radius-input);
  background: var(--flow-white);
  color: var(--flow-text);
  font-size: 12px;
  text-align: center;
  outline: none;
  margin-bottom: 24px;
  padding: 0 24px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 500;
}

.auth-form input:not([type="checkbox"])::placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.auth-form input:not([type="checkbox"])::-webkit-input-placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.auth-form button {
  border: none;
  border-radius: var(--flow-radius-input);
  background: var(--flow-blue);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  max-width: 90%;
  margin: 0 auto;
}

.auth-form button:hover {
  background: var(--flow-blue-hover);
}

/* Sign In page */
.sign-in-page .auth-card {
  margin: 0;
}

.sign-in-page .auth-card-individual h1 {
  margin-bottom: 16px;
  line-height: 1.2;
}

.sign-in-page .auth-form-individual input:not([type="checkbox"]) {
  margin-bottom: 12px;
}

.sign-in-page .auth-form-individual input:not([type="checkbox"]):last-of-type {
  margin-bottom: 16px;
}

/* Form-level error/status message — keep it inside the card width so a long
   message wraps to a second line instead of stretching the whole card. */
.sign-in-page .auth-card > .alert {
  width: 300px;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.sign-in-page .auth-card-facility {
  min-height: 550px;
}

.sign-in-page .auth-form-facility {
  flex: 1;
  width: 300px;
}

.sign-in-page .auth-card-facility h1 {
  margin-bottom: 16px;
  line-height: 1.2;
}

.sign-in-page .auth-form-facility input:not([type="checkbox"]) {
  margin-bottom: 12px;
}

.sign-in-page .auth-form-facility input:not([type="checkbox"]):last-of-type {
  margin-bottom: 16px;
}

.sign-in-page .auth-form-facility button {
  max-width: 100%;
  height: 44px;
  margin-bottom: 16px;
}

.sign-in-page .auth-facility-links {
  gap: 8px;
  margin-top: 0;
}

.sign-in-page .auth-facility-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-blue);
  text-decoration: none;
}

.sign-in-page .auth-facility-link:hover {
  text-decoration: underline;
  color: var(--flow-blue);
}

.sign-in-page .auth-remember-option {
  gap: 14px;
  min-width: 0;
  margin-bottom: 24px;
  cursor: pointer;
  justify-content: center;
}

.sign-in-page .auth-remember-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--flow-blue);
  border-radius: 4px;
  background: var(--flow-white);
  accent-color: var(--flow-blue);
  box-sizing: border-box;
}

.sign-in-page .auth-remember-checkbox:checked {
  background-color: var(--flow-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7 9.5 3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.sign-in-page .auth-remember-option::before,
.sign-in-page .auth-remember-option:has(input:checked)::before,
.sign-in-page .auth-remember-option:has(input:checked)::after {
  content: none;
}

.sign-in-page .auth-remember-label {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  color: var(--flow-blue);
  white-space: nowrap;
  text-align: center;
  padding-top: 0;
}

.sign-in-page .auth-continue-btn {
  min-height: 44px;
  padding: 0;
  border: none;
  outline: none;
  border-radius: var(--flow-radius-input);
  background: var(--flow-blue-btn);
  color: var(--flow-blue);
  font-size: 13px;
  max-width: unset;
  margin: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.sign-in-page .auth-continue-btn:hover {
  background: var(--flow-blue-btn-hover);
  color: var(--flow-blue);
  border: none;
  box-shadow: none;
}

/* Individual sign-in "Send Code": grey and unusable until the email or phone number is given, then
   solid blue with a darker blue on hover. */
.sign-in-page #send-otp-button {
  background: var(--flow-blue);
  color: var(--flow-white);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sign-in-page #send-otp-button:hover {
  background: var(--flow-blue-dark);
  color: var(--flow-white);
  /* a clear glow all the way round (360°): darker blue, a ring and a soft blue shadow on every side */
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

.sign-in-page #send-otp-button:disabled,
.sign-in-page #send-otp-button:disabled:hover {
  background: var(--flow-disabled-bg);
  color: var(--flow-white);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

/* Checkout's Send Code button: the same hover (only while it is enabled). */
#checkout-send-code-btn {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#checkout-send-code-btn:not(:disabled):hover {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

/* SMS notice under the fields (Individual sign-in, and checkout's own guest
   OTP step): plain text only -- no box, background or checkbox. Agreeing to the
   one-time text is done by selecting Send Code. Sized to the form column. */
.sign-in-page .auth-sms-note,
.checkout-flow-page .auth-sms-note {
  width: 100%;
  margin: 0 0 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--flow-text-muted);
  overflow-wrap: break-word;
  /* The sign-in card is text-center, which would centre each line; left-align
     so every line starts at the same point. */
  text-align: left;
}

/* On checkout, the phone/email fields sit in a grid with no bottom margin of
   their own (unlike the sign-in page's inputs), so the notice needs its own
   top margin to keep it from touching the field borders above it. */
.checkout-flow-page .auth-sms-note {
  margin-top: 12px;
}

/* The message shown above the email / phone fields (e.g. "This email is
   registered on ... Facility portal") keeps its alert box, but its text is
   left-aligned and sized like the Send Code note under the fields. */
#checkout-contact-alert.alert,
#individual-form-alert.alert {
  margin: 0 0 8px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}

/* OTP Input page */
.sign-in-otp-page .otp-contact-line {
  margin-bottom: 20px;
}

.sign-in-otp-page .otp-contact-line li + li {
  margin-top: 4px;
}

.sign-in-otp-page .otp-contact-line a {
  color: var(--flow-blue);
}

.sign-in-otp-page .otp-contact-line a:hover,
.sign-in-otp-page .otp-resend-link:hover {
  text-decoration: underline;
}

.sign-in-otp-page .otp-inputs,
.checkout-account-otp .otp-inputs {
  margin-bottom: 28px;
}

.sign-in-otp-page .otp-inputs input,
.checkout-account-otp .otp-inputs input,
.sign-in-otp-page .auth-form .otp-inputs input,
.checkout-account-otp .auth-form .otp-inputs input {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 47px;
  min-height: 47px;
  flex: 0 0 42px;
  margin: 0;
  padding: 0;
  border: 3px solid var(--flow-border);
  border-radius: 10px;
  background: var(--flow-white);
  color: var(--flow-text);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.sign-in-otp-page .otp-inputs.is-error input,
.checkout-account-otp .otp-inputs.is-error input {
  border-color: transparent;
  outline: 1px solid var(--flow-error-line);
  outline-offset: -1px;
}

.sign-in-otp-page .otp-inputs.is-shaking,
.checkout-account-otp .otp-inputs.is-shaking {
  animation: otp-shake 0.45s ease;
}

@keyframes otp-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }
}

.sign-in-otp-page .otp-helper-text,
.sign-in-otp-page .otp-expiry-text {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 60px;
  color: var(--flow-text);
}

.sign-in-otp-page .otp-resend-link {
  color: var(--flow-blue);
}

.sign-in-otp-page .otp-resend-link.is-disabled {
  color: var(--flow-placeholder);
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  opacity: 0.6;
}

.sign-in-otp-page .otp-expiry-text.is-expired {
  color: #c0392b;
  font-weight: 500;
}

.sign-in-otp-page .otp-form button {
  height: 40px;
  margin-bottom: 16px;
}

.otp-submit-btn,
.sign-in-otp-page .otp-submit-btn {
  position: relative;
  overflow: hidden;
}

.otp-submit-btn .otp-submit-progress,
.sign-in-otp-page .otp-submit-btn .otp-submit-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 0;
  background: var(--flow-blue);
  z-index: 0;
  pointer-events: none;
}

.champak-add-cart .otp-submit-progress {
  background: #198754;
}

.otp-submit-btn .otp-submit-label,
.sign-in-otp-page .otp-submit-btn .otp-submit-label {
  position: relative;
  z-index: 1;
}

.otp-submit-btn.is-submitting,
.otp-submit-btn.is-submitting:hover,
.otp-submit-btn.is-submitting:focus,
.sign-in-otp-page .otp-submit-btn.is-submitting,
.sign-in-otp-page .otp-submit-btn.is-submitting:hover,
.champak-add-cart.is-submitting,
.champak-add-cart.is-submitting:hover,
.champak-add-cart.is-submitting:focus,
.champak-add-cart.is-submitting:focus-visible {
  background: var(--flow-blue-btn) !important;
  background-color: var(--flow-blue-btn) !important;
  border-color: var(--flow-blue-btn) !important;
  color: var(--flow-white) !important;
  cursor: default;
  pointer-events: none;
  box-shadow: none !important;
}

.otp-submit-btn.is-submitting .otp-submit-progress {
  animation: otp-submit-fill 1s ease-out forwards;
}

.sign-in-otp-page .otp-submit-btn.is-submitting .otp-submit-progress {
  animation: otp-submit-fill 1.4s ease-out forwards;
}

.otp-submit-btn.is-success .otp-submit-progress,
.sign-in-otp-page .otp-submit-btn.is-success .otp-submit-progress {
  width: 100%;
}

.otp-submit-btn.is-success,
.otp-submit-btn.is-success:hover,
.otp-submit-btn.is-success:focus,
.champak-add-cart.is-success,
.champak-add-cart.is-success:hover,
.champak-add-cart.is-success:focus,
.champak-add-cart.is-success:focus-visible {
  background: #198754 !important;
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: none !important;
}

@keyframes otp-submit-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.sign-in-otp-page .otp-expiry-text {
  margin-bottom: 0;
  margin-top: 25px;
}

/* Auth responsive */
@media (max-width: 980px) {
  .login-to-checkout-wrapper .page {
    padding: 34px 0 48px;
    align-items: flex-start;
  }

  .login-to-checkout-wrapper .sign-in-page,
  .login-to-checkout-wrapper .sign-in-otp-page,
  .login-to-checkout-wrapper .order-success-page,
  .login-to-checkout-wrapper .not-found-page,
  .login-to-checkout-wrapper .payment-failed-page {
    align-items: center;
  }

  .auth-card {
    padding: 32px 24px;
  }

  .benefit-line p {
    white-space: normal;
  }

  .checkout-flow-page,
  .saved-cards-page {
    padding: 34px 0 48px;
  }

  .checkout-flow-header-text h1,
  .saved-cards-header-text h1 {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .login-to-checkout-wrapper .page {
    padding: 24px 0 40px;
  }

  .auth-card {
    border-radius: var(--flow-radius-card);
    padding: 28px 20px;
  }

  .icon-circle {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
  }

  .bolt {
    height: 48px;
  }

  .auth-card h1 {
    font-size: 20px;
  }

  .benefit-line {
    gap: 10px;
    grid-template-columns: 16px auto 16px;
  }

  .benefit-line p,
  .benefits li {
    font-size: 14px;
  }

  .benefits {
    margin-bottom: 32px;
  }

  .auth-form {
    width: 100%;
  }

  .auth-form input:not([type="checkbox"]),
  .auth-form button {
    font-size: 16px;
  }

  .auth-form button {
    max-width: 100%;
  }

  .auth-form input:not([type="checkbox"]) {
    margin-bottom: 16px;
    padding: 0 16px;
  }

  .sign-in-page .auth-cards-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .sign-in-page .auth-card > .alert {
    width: 100%;
  }

  .sign-in-page .auth-card-facility {
    width: 100%;
    max-width: 360px;
    min-height: auto;
    padding: 16px 20px;
    border-radius: 28px;
  }

  .sign-in-page .auth-form-facility {
    flex: none;
    width: 100%;
  }

  .sign-in-page .auth-card-individual {
    width: 100%;
    max-width: 360px;
    min-height: auto;
    padding: 16px 20px;
    border-radius: 28px;
  }

  .sign-in-page .icon-circle {
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
  }

  .sign-in-page .bolt {
    height: 56px;
  }

  .sign-in-page .auth-card-individual h1 {
    font-size: 19px;
    margin-bottom: 32px;
  }

  .sign-in-page .auth-card-facility h1 {
    font-size: 19px;
    margin-bottom: 16px;
  }

  .sign-in-page .auth-form-facility input:not([type="checkbox"]) {
    margin-bottom: 12px;
    padding: 0 24px;
    font-size: 12px;
  }

  .sign-in-page .auth-form-facility button {
    margin-top: 0;
    height: 44px;
    margin-bottom: 14px;
  }

  .sign-in-page .auth-form-individual input:not([type="checkbox"]) {
    margin-bottom: 16px;
    padding: 0 24px;
    font-size: 12px;
  }

  .sign-in-page .auth-sms-note,
  .checkout-flow-page .auth-sms-note {
    margin-bottom: 14px;
    font-size: 10.5px;
  }

  #checkout-contact-alert.alert,
  #individual-form-alert.alert {
    font-size: 10.5px;
  }

  .sign-in-page .auth-remember-option {
    margin-bottom: 20px;
  }

  .sign-in-page .auth-remember-label {
    font-size: 12px;
  }

  .sign-in-page .auth-continue-btn {
    font-size: 13px;
  }

  .sign-in-otp-page .auth-card,
  .select-payment-page .auth-card {
    width: 100%;
    max-width: 360px;
    min-height: 550px;
    padding: 32px 20px;
    border-radius: 28px;
  }

  .sign-in-otp-page .icon-circle {
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
  }

  .sign-in-otp-page .bolt {
    height: 56px;
  }

  .sign-in-otp-page .auth-card h1 {
    font-size: 19px;
  }

  .sign-in-otp-page .benefit-line {
    gap: 15px;
    grid-template-columns: 24px auto 24px;
    padding: 0 10px;
  }

  .sign-in-otp-page .benefit-line p,
  .sign-in-otp-page .benefits li {
    font-size: 13px;
    white-space: nowrap;
  }

  .sign-in-otp-page .otp-inputs input,
  .checkout-account-otp .otp-inputs input,
  .sign-in-otp-page .auth-form .otp-inputs input,
  .checkout-account-otp .auth-form .otp-inputs input {
    height: 48px;
    min-height: 48px;
    padding: 0;
    font-size: 22px;
  }

  .sign-in-otp-page .otp-form button {
    font-size: 20px;
  }
}

@media (max-width: 380px) {
  .sign-in-page .auth-remember-label {
    font-size: 11px;
  }

  .sign-in-otp-page .otp-inputs,
  .checkout-account-otp .otp-inputs {
    gap: 6px;
  }

  .sign-in-otp-page .otp-inputs input,
  .checkout-account-otp .otp-inputs input,
  .sign-in-otp-page .auth-form .otp-inputs input,
  .checkout-account-otp .auth-form .otp-inputs input {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    flex: 0 0 36px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    font-size: 20px;
  }

  .checkout-continue-btn {
    font-size: 16px;
  }
}

/* ==========================================================================
   PAYMENT PAGE — select-payment-method
   Only values Bootstrap 5 cannot match 1:1
   Do not put d-flex on [hidden] blocks (e.g. .inline-card-fields)
   ========================================================================== */

.select-payment-page .payment-methods-wrap {
  min-height: 250px;
  max-width: 90%;
}

.select-payment-page .payment-methods {
  margin-bottom: 20px;
}

.select-payment-page .payment-form:has(.inline-card-fields:not([hidden])) .payment-methods {
  margin-bottom: 6px;
}

.select-payment-page .auth-card {
  width: 380px;
  max-width: 100%;
  min-height: 550px;
  padding: 32px 20px;
  border-radius: 28px;
}

.select-payment-page #payment-heading {
  margin-bottom: 20px;
}

/* Keep alerts inside the card and centred so a long message wraps to two
   lines instead of stretching the whole card. */
.select-payment-page #payment-alert {
  width: 100%;
  margin: 0 auto 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.select-payment-page .payment-method-card {
  gap: 10px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 0 0 12px;
  overflow: visible;
  border: 2px solid var(--flow-border);
  border-radius: var(--flow-radius-pill);
  cursor: pointer;
}

.select-payment-page .payment-method-card:has(input:checked) {
  border-color: var(--flow-blue);
}

.select-payment-page .payment-method-card.is-pending-remove .payment-remove,
.select-payment-page .payment-method-card.is-pending-remove:has(input:checked) .payment-remove {
  border-color: var(--flow-red-soft);
  color: var(--flow-red);
  background-color: var(--flow-red-soft);
}

.select-payment-page .payment-method-card.is-pending-remove .payment-remove:hover,
.select-payment-page .payment-method-card.is-pending-remove:has(input:checked) .payment-remove:hover {
  border-color: var(--flow-red-soft);
  color: var(--flow-red);
  background-color: var(--flow-red-soft);
}

.select-payment-page .payment-method-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.select-payment-page .payment-card-icon {
  height: 16px;
  width: auto;
}

.select-payment-page .payment-card-icon--visa {
  height: 10px;
}

/* Fallback for card brands with no logo asset (e.g. JCB, UnionPay) --
   an <i> icon instead of <img>, so height/width don't apply; size via font-size. */
.select-payment-page i.payment-card-icon--generic {
  height: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--flow-label-muted, #8a8a8f);
}

.select-payment-page .payment-card-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--flow-text);
}

.select-payment-page .payment-form a.payment-remove {
  align-self: stretch;
  margin: 0 0 0 auto;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--flow-radius-pill);
  background: none;
  color: var(--flow-text-subtle);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  width: auto;
}

.select-payment-page .payment-form a.payment-remove:hover {
  color: var(--flow-red);
  background: none;
  border-color: transparent;
  outline: 2px solid var(--flow-red-soft);
  text-decoration: none;
  box-shadow: none;
}

.select-payment-page .payment-method-card--add {
  margin-top: 4px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 4px 0 16px;
  border: 2px solid var(--flow-blue);
}

.select-payment-page .payment-method-card--add:has(input:checked) {
  border-color: var(--flow-blue);
}

.select-payment-page .payment-method-card--add .payment-card-label {
  flex: 0 1 auto;
  font-size: 12px;
}

.select-payment-page .payment-card-brands {
  gap: 2px;
}

.select-payment-page .payment-card-brands .card-field-icon-wrap {
  padding: 1px 3px;
  border-width: 1px;
}

.select-payment-page .payment-card-brands .card-field-icon {
  height: 6px;
}

.select-payment-page .payment-card-brands .card-field-brand--amex {
  font-size: 6px;
}

.select-payment-page .payment-wallet {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  border: 2px solid var(--flow-blue);
  border-radius: var(--flow-radius-pill);
  cursor: pointer;
}

/* Bootstrap's d-flex utility is !important and would otherwise beat the [hidden]
   attribute (e.g. the Google Pay tile, which is revealed only when the wallet is
   actually available). Force hidden elements on this page to stay hidden. */
.select-payment-page [hidden] {
  display: none !important;
}

.select-payment-page .payment-wallet input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.select-payment-page .payment-wallet-logo--paypal {
  height: 22px;
  width: auto;
}

.select-payment-page .payment-gpay-mark {
  gap: 6px;
  color: var(--flow-text-gpay);
  font-size: 18px;
  line-height: 1;
}

.select-payment-page .payment-gpay-mark img {
  display: block;
  width: 18px;
  height: 18px;
}

.select-payment-page .card-field-icon-wrap--amex {
  background: var(--flow-blue-amex-bg);
  border-color: var(--flow-blue-amex-bg);
}

.select-payment-page .card-field-icon-wrap--amex .card-field-brand--amex {
  color: var(--flow-white);
  font-style: normal;
}

.select-payment-page .payment-form>button[type="submit"] {
  max-width: 90%;
  height: 44px;
  min-height: 40px;
  margin-bottom: 16px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--flow-radius-input);
  background: var(--flow-blue);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.select-payment-page .payment-trust-badges {
  gap: 6px;
  width: 0;
  min-width: 100%;
  max-width: 100%;
  margin: 16px auto 12px;
}

.select-payment-page .payment-trust-badge {
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--flow-border-trust);
  border-radius: var(--flow-radius-pill);
}

.select-payment-page .payment-trust-badge--gpay {
  gap: 3px;
  color: var(--flow-text-gpay);
  font-size: 11px;
}

.select-payment-page .payment-trust-badge--gpay img {
  display: block;
  width: 10px;
  height: 10px;
}

.select-payment-page .payment-trust-badge--paypal img,
.select-payment-page .payment-trust-badge--stripe img {
  display: block;
  height: 10px;
  width: auto;
}

.select-payment-page .payment-security-text {
  margin: 0 -10px;
  width: 0;
  min-width: calc(100% + 20px);
  max-width: none;
  font-size: 8px;
  line-height: 1.5;
  color: var(--flow-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.select-payment-page .payment-security-text b {
  font-size: 12px;
}

/* Add new card view */
.select-payment-page .add-card-page-heading {
  margin-bottom: 20px;
}

.select-payment-page .inline-card-fields,
.add-card-modal .inline-card-fields {
  display: flex;
  flex-direction: column;
  margin: 4px 0 16px;
  text-align: left;
}

/* The card form fades and slides in under "Credit / Debit Card" when it is chosen, instead of just appearing. */
/* Anchor the card to the top so it grows downward when the card form opens,
   instead of re-centring and nudging everything above it. */
.login-to-checkout-wrapper .page.select-payment-page:not(.checkout-flow-page):not(.saved-cards-page) {
  align-items: flex-start;
}

.select-payment-page .inline-card-fields:not([hidden]) {
  animation: payment-fields-in 0.28s ease both;
}

@keyframes payment-fields-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

.select-payment-page .inline-card-fields[hidden] {
  display: none;
}

.select-payment-page .card-field,
.add-card-modal .card-field {
  padding: 8px 12px 4px;
  border: 2px solid var(--flow-border);
  border-radius: var(--flow-radius-pill);
}

.select-payment-page .card-field label,
.add-card-modal .card-field label {
  margin: 0 0 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--flow-text);
}

.select-payment-page .card-field-input-row,
.add-card-modal .card-field-input-row {
  min-height: 14px;
  line-height: 1.2;
}

.select-payment-page .inline-card-fields .card-field-input-row input,
.select-payment-page .inline-card-fields .card-field input,
.add-card-modal .inline-card-fields .card-field-input-row input,
.add-card-modal .inline-card-fields .card-field input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  color: var(--flow-text);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.select-payment-page .card-field input::placeholder,
.select-payment-page .card-field-input-row input::placeholder,
.select-payment-page .card-field input::-webkit-input-placeholder,
.select-payment-page .card-field-input-row input::-webkit-input-placeholder,
.add-card-modal .card-field input::placeholder,
.add-card-modal .card-field-input-row input::placeholder,
.add-card-modal .card-field input::-webkit-input-placeholder,
.add-card-modal .card-field-input-row input::-webkit-input-placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.select-payment-page .card-field-row,
.add-card-modal .card-field-row {
  gap: 6px;
  margin-bottom: 0;
}

.select-payment-page .card-field--half,
.add-card-modal .card-field--half {
  flex: 1;
  min-width: 0;
}

/* A card field with an error: pink thin border, and the message inside the field under the input */
.add-card-modal .card-field-error,
.select-payment-page .card-field-error {
  display: none;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--landing-accent-red);
}

.add-card-modal .card-field.has-error,
.select-payment-page .card-field.has-error {
  padding: 9px 13px 5px;
  border-width: 1px;
  border-color: var(--flow-error-line);
  border-radius: 20px;
}

.add-card-modal .card-field.has-error .card-field-error,
.select-payment-page .card-field.has-error .card-field-error {
  display: block;
}

/* the payment page's card form is narrower, so the half-width fields get a slightly smaller message to keep it on one line */
.select-payment-page .card-field-error {
  font-size: 11.5px;
}

/* When one field of the Expiration | CVC row has an error and grows, the other one grows with it and keeps
   the same corner radius, so the two stay a matching pair. */
.add-card-modal .card-field-row:has(.card-field.has-error) .card-field,
.select-payment-page .card-field-row:has(.card-field.has-error) .card-field {
  border-radius: 20px;
}

/* Save card: the same glow and lift on hover as the other action buttons (only while it is enabled) */
.add-card-modal #saveCardBtn {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.add-card-modal #saveCardBtn:not(:disabled):hover,
.add-card-modal #saveCardBtn:not(:disabled):focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

.select-payment-page .card-field-icons,
.add-card-modal .card-field-icons {
  gap: 2px;
}

.select-payment-page .card-field-icon-wrap,
.add-card-modal .card-field-icon-wrap {
  padding: 2px 4px;
  border: 2px solid var(--flow-border);
  border-radius: var(--flow-radius-pill);
}

.select-payment-page .card-field-icon,
.add-card-modal .card-field-icon {
  height: 8px;
  width: auto;
}

/* Fallback icon for card brands with no logo asset (e.g. JCB, UnionPay)
   in the live card-number field's brand hint row. */
.select-payment-page .card-field-icon-generic,
.add-card-modal .card-field-icon-generic {
  font-size: 8px;
  line-height: 1;
  color: var(--flow-label-muted, #8a8a8f);
}

.select-payment-page .card-field-brand--amex,
.add-card-modal .card-field-brand--amex {
  font-size: 8px;
  font-style: italic;
  line-height: 1;
  color: var(--flow-blue-amex);
}

.select-payment-page .card-field-cvc-icon,
.add-card-modal .card-field-cvc-icon {
  width: 24px;
  height: auto;
  opacity: 0.45;
}

/* The "Set as default card" option is a square checkbox with a tick, not a round radio-style dot */
.add-card-modal .save-card-option::before {
  border-radius: 4px;
}

.select-payment-page .save-card-label,
.add-card-modal .save-card-label {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.2;
  /* color: var(--flow-text); */
  color : var(--bs-btn-color);
  
}

.select-payment-page .add-card-form button[type="submit"] {
  max-width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 16px;
  border: none;
  border-radius: var(--flow-radius-input);
  background: var(--flow-blue);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.select-payment-page .add-card-form button[type="submit"]:hover {
  background: var(--flow-blue-hover);
}

/* Stripe Elements (card number / expiry / cvc) sit in the same rows the design
   uses for plain inputs. */
.select-payment-page .card-field-input-row .StripeElement,
.add-card-modal .card-field-input-row .StripeElement {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 3px 0;
}

/* The payment form shares .auth-form's generic button rule (max-width:90%,
   centered), which on this wide checkout column made the Pay button stretch
   almost edge to edge. Fits its own text/padding instead. */
.select-payment-page #payment-pay-btn {
  width: auto;
  max-width: none;
  padding: 0 32px;
}

.select-payment-page #payment-pay-btn[disabled] {
  opacity: 0.75;
  cursor: progress;
}

/* Pay: the same glow and lift on hover as the other action buttons (only while it is enabled) */
.select-payment-page #payment-pay-btn {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.select-payment-page #payment-pay-btn:not([disabled]):hover,
.select-payment-page #payment-pay-btn:not([disabled]):focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

.select-payment-page #payment-pay-btn .spinner-border {
  width: 1.1rem;
  height: 1.1rem;
}

/* Selection state: only the payment method the user has picked gets the blue
   outline; PayPal / Google Pay / "Credit or Debit Card" rest at the default
   border until chosen. */
.select-payment-page .payment-wallet,
.select-payment-page .payment-method-card,
.select-payment-page .payment-method-card--add {
  border-color: var(--flow-border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-payment-page .payment-wallet:has(input:checked),
.select-payment-page .payment-method-card:has(input:checked),
.select-payment-page .payment-method-card--add:has(input:checked) {
  border-color: var(--flow-blue);
  box-shadow: 0 0 0 1px var(--flow-blue) inset;
}

.select-payment-page .address-heading {
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.select-payment-page .add-card-form .checkout-field-stack {
  margin-bottom: 16px;
  text-align: left;
}

.select-payment-page .checkout-field-row--city-state {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.select-payment-page .checkout-field--zip-half {
  width: calc(50% - 3px);
  margin-bottom: 14px;
}

/* Payment responsive */
@media (max-width: 560px) {
  .select-payment-page .auth-card {
    width: 100%;
    max-width: 360px;
  }

  .select-payment-page .payment-methods-wrap {
    max-width: 100%;
  }

  .select-payment-page .payment-form>button[type="submit"] {
    max-width: 100%;
  }

  .select-payment-page .payment-method-card:not(.payment-method-card--add) {
    padding: 0 0 0 14px;
  }

  .select-payment-page .payment-card-label {
    font-size: 9px;
  }

  .select-payment-page .payment-form a.payment-remove {
    padding: 0 14px;
  }

  .select-payment-page .checkout-field-row--city-state {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .select-payment-page .checkout-field--zip-half {
    width: 100%;
  }
}

/* ==========================================================================
   CHECKOUT FLOW — only values Bootstrap 5 cannot match 1:1
   Shared address pattern also used on mail-addresses
   ========================================================================== */

.checkout-flow-header {
  margin-bottom: 10px;
}

.checkout-flow-header-text h1 {
  margin-bottom: 15px;
}

.checkout-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  /* The shipping step (#checkout-fulfilment) is a grid item of its own, below
     the form. The order summary spans both rows so its height can't stretch
     row 1 -- otherwise, when the form is shorter than the summary (e.g. one
     saved address), a big gap opens between step 2 and step 3. The leftover
     height, if any, goes to the empty last row. Only applies above the 980px
     breakpoint; below it the layout is a single flex column. */
  grid-template-rows: auto 1fr;
}

.checkout-flow-form {
  grid-column: 1;
  grid-row: 1;
}

.checkout-flow-summary {
  grid-column: 2;
  grid-row: 1 / span 2;
}

#checkout-fulfilment {
  grid-column: 1;
  grid-row: 2;
}

/* Between the form and the shipping step the steps' own 28px margin is the
   spacing (same as between steps 1, 2 and 3); the layout's Bootstrap
   gap-3/gap-lg-5 (!important) would add up to 48px more as a row gap. Only the
   column gap is wanted, and only while the layout is a two-column grid. */
@media (min-width: 981px) {
  .checkout-flow-layout {
    row-gap: 0 !important;
  }
}

.checkout-step {
  margin-bottom: 28px;
}

.checkout-step[aria-labelledby="checkout-step-2"] {
  margin-bottom: 14px;
}

.checkout-step:last-of-type {
  margin-bottom: 0;
}

.checkout-step-title span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--flow-text);
  font-size: 11px;
}

.checkout-step-title h2 {
  font-size: 16px;
  line-height: 1.2;
  color: var(--flow-text);
}

.checkout-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-step.is-otp .checkout-contact-body {
  padding: 4px 4px 12px;
  border: 1px solid var(--flow-blue);
  border-radius: 18px;
}

.checkout-name-fields {
  margin-top: 12px;
}

.checkout-name-fields .checkout-field--plain {
  width: 100%;
  border-radius: 20px;
}

.checkout-name-fields[hidden] {
  display: none;
}

.checkout-account-otp {
  margin-top: 10px;
  padding: 0 10px;
  container-type: inline-size;
  container-name: checkout-otp;
}

.checkout-account-message {
  font-size: 13px;
  line-height: 1.4;
  color: var(--flow-blue);
}

.checkout-otp-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
}

/* Wide: timer | OTP | Resend on one line */
.checkout-otp-actions {
  display: contents;
}

.checkout-otp-timer {
  order: 1;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--flow-blue);
}

/* Once the countdown ends, the timer span is left empty (see
   startResendCountdown in checkout.php) -- take it out of the flex flow
   entirely so its gap doesn't push "Resend code" off-center under the
   OTP inputs above it. */
.checkout-otp-timer:empty {
  display: none;
}

.checkout-otp-row > .otp-form {
  order: 2;
}

.checkout-otp-resend {
  order: 3;
  min-height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--flow-blue);
  border-radius: var(--flow-radius-pill);
  background: var(--flow-white);
  color: var(--flow-blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.checkout-otp-resend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-otp-resend:not(:disabled):hover {
  background: var(--flow-blue-softest);
}

.checkout-account-otp .auth-form {
  width: fit-content;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}

/* Narrow: OTP on top; timer + Resend centered as a group below */
@container checkout-otp (max-width: 560px) {
  .checkout-otp-row {
    justify-content: center;
  }

  .checkout-otp-row > .otp-form {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .checkout-otp-actions {
    display: flex;
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .checkout-otp-timer,
  .checkout-otp-resend {
    order: unset;
  }
}

.checkout-field-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checkout-address-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-address-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-address-form-panel:not([hidden]) {
  margin-top: 2px;
}

.checkout-address-form-panel .checkout-checkbox-row {
  margin-top: 12px;
}

.checkout-field-stack[hidden],
.checkout-address-form-panel[hidden],
.checkout-address-choices[hidden],
.checkout-checkbox-row[hidden],
.checkout-billing-form-panel[hidden],
.checkout-billing-section[hidden],
.address-save-wrap[hidden] {
  display: none;
}

.checkout-saved-address-shell--selectable input,
.checkout-new-address-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.checkout-saved-address-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  border: 3px solid var(--flow-border);
  border-radius: 16px;
}

/* Checkout's version of this card is a clickable radio label with the
   whole card (shipping + billing) as one selectable unit -- the Mail
   Addresses page reuses .checkout-saved-address-shell for a plain (non-radio)
   card, so the radio layout below must not leak onto it.
   The radio itself is positioned absolutely (top set in JS -- see
   alignSavedAddressRadios() in checkout.php) so it lines up with the
   divider between the shipping and billing blocks regardless of how many
   lines each block wraps to; a plain vertical grid/flex center would drift
   above or below that line whenever the two blocks are uneven heights. */
.checkout-saved-address-shell--selectable {
  position: relative;
  padding-left: 44px;
  margin: 0;
  cursor: pointer;
}

.checkout-saved-address-shell--selectable:has(input:checked) {
  border-color: var(--flow-blue);
  border-width: 2px;
}

.checkout-saved-address-shell--selectable .payment-radio {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.checkout-saved-address-shell--selectable:has(input:checked) .payment-radio,
.checkout-new-address-option:has(input:checked) .payment-radio {
  background: var(--flow-blue);
}

.checkout-saved-address-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.checkout-saved-address-row {
  align-items: stretch;
  gap: 24px;
}

.checkout-saved-address-divider {
  height: 1px;
  background: var(--flow-border);
}

.checkout-saved-billing-body {
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--flow-text);
}

.checkout-saved-billing-body strong {
  font-size: 14px;
  line-height: 1.3;
}

.checkout-saved-address-body {
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--flow-text);
}

.checkout-saved-address-body strong {
  font-size: 14px;
  line-height: 1.3;
}

.checkout-saved-address-aside {
  flex: 0 0 auto;
  align-self: stretch;
  gap: 8px;
  min-height: 100%;
}

/* Mailing Addresses: this column is as wide as its widest content, which is the
   "Set as Default" button on a card that is not the default and only the smaller
   "Default" badge on the one that is -- so the address text wrapped differently
   from card to card. Both states reserve the wider width, so the text gets the
   same room on every card. (Widths are the button + trash icon at 12px / 11px text.) */
.addresses-page .checkout-saved-address-aside {
  min-width: 150px;
}

@media (max-width: 640px) {
  .addresses-page .checkout-saved-address-aside {
    min-width: 142px;
  }
}

.checkout-saved-address-edit {
  color: var(--flow-blue);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.checkout-saved-address-edit .fa {
  margin-left: 2px;
  font-size: 12px;
}

/* Checkout page only: the pencil icon is a round icon button (the Mail Addresses
   page keeps its "Edit Details >" text link). */
:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-edit .fa {
  margin-left: 0;
  font-size: 15px;
}

/* Trash icon in the card's bottom-right corner: removes the saved address (after a confirmation). */
.checkout-saved-address-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--flow-text-subtle);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Mail Addresses: the in-use address gets the same blue pencil / red trash as the
   selected card on checkout. */
.addresses-page .checkout-saved-address-shell:has(.saved-card-in-use-badge) .checkout-saved-address-aside .checkout-saved-address-edit {
  color: var(--flow-blue);
}

.addresses-page .checkout-saved-address-shell:has(.saved-card-in-use-badge) .checkout-saved-address-remove {
  color: var(--flow-red, #dc2626);
}

/* The selected (in use) address shows its X in red. */
.checkout-saved-address-shell:has(.select-book-address:checked) .checkout-saved-address-remove {
  color: var(--flow-red, #dc2626);
}

.checkout-saved-address-remove:hover,
.checkout-saved-address-remove:focus-visible {
  color: var(--flow-red, #dc2626);
  background: var(--flow-red-soft, #fdecec);
  outline: none;
}

/* Was ".checkout-saved-address input:checked" -- that class doesn't exist on
   this markup (the radio is .select-book-address), so this never matched and
   "Edit Details" was always shown muted, on every card, selected or not. */
.checkout-saved-address-shell:not(:has(.select-book-address:checked)) .checkout-saved-address-edit {
  color: var(--flow-text-subtle);
}

.checkout-saved-address-edit:hover {
  text-decoration: underline;
}

/* Mail Addresses page: the address on the left, "Edit Details" at the top right and
   In Use / Remove at the bottom right (the card used to stack them under the address). */
.addresses-page .checkout-saved-address-shell {
  flex-direction: row;
  gap: 24px;
}

/* The saved addresses sit two to a row where there is room and stack on narrower
   screens (a long full-width card left the address and its buttons far apart).
   The "New Shipping Address" option and the edit form always take a full row. */
.addresses-page .checkout-address-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 8px 12px;
  align-items: stretch;
  max-width: 800px;
}

/* Cards in a row are the same height whatever the length of their address; the pencil stays at
   the top and In Use / Make In Use + the bin at the bottom of every card. */
.addresses-page .checkout-address-block--saved .checkout-saved-address-shell {
  flex: 1 1 auto;
}

@media (min-width: 724px) {
  .addresses-page .checkout-address-block--saved .checkout-saved-address-shell {
    min-height: 160px;
  }
}

/* The add / edit form is no wider than the list above it (and its New Shipping Address bar). */
.addresses-page .checkout-address-form-slot {
  max-width: 800px;
}

.addresses-page .checkout-address-block--new,
.addresses-page .checkout-address-choices .checkout-address-form-slot {
  grid-column: 1 / -1;
}

/* Same round hover as the trash icon: the pencil turns blue on a soft blue circle,
   also on the unselected (grey) cards. */
:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-shell .checkout-saved-address-edit:hover,
:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-shell .checkout-saved-address-edit:focus-visible,
:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-shell:not(:has(.select-book-address:checked)) .checkout-saved-address-edit:hover,
:is(.checkout-flow-page, .addresses-page) .checkout-saved-address-shell:not(:has(.select-book-address:checked)) .checkout-saved-address-edit:focus-visible {
  color: var(--flow-blue);
  background: var(--flow-blue-soft);
  text-decoration: none;
  outline: none;
}

.checkout-saved-address-footer {
  width: fit-content;
  max-width: 100%;
}

.checkout-new-address-option {
  gap: 10px;
  min-height: 38px;
  padding: 0 16px;
  border: 3px solid var(--flow-border);
  border-radius: var(--flow-radius-pill);
  font-size: 14px;
  color: var(--flow-text);
  cursor: pointer;
}

.checkout-new-address-option:has(input:checked) {
  border-color: var(--flow-blue);
  border-width: 2px;
}

.checkout-step--address.is-new .checkout-address-form-panel .checkout-field-stack,
.checkout-step--address.is-editing .checkout-address-form-panel .checkout-field-stack {
  margin-top: 6px;
}

.checkout-step--address.is-new .checkout-address-form-panel .checkout-field,
.checkout-step--address.is-editing .checkout-address-form-panel .checkout-field {
  border-color: var(--flow-blue-focus);
}

/* First / last name inputs (and Attention) show each word starting with a capital
   letter while typed; the names are also saved that way by the server. */
#firstName,
#lastName,
#loginotpform-firstname,
#loginotpform-lastname,
#checkout-first-name,
#checkout-last-name,
#checkout-attention,
#address-attention {
  text-transform: capitalize;
}

/* "Enter a location" search box above the address fields. It is a regular
   .checkout-field pill; only the icon and its left padding are extra. */
.checkout-location-search i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--flow-label-muted);
  pointer-events: none;
}

.checkout-location-search input {
  padding-left: 26px;
}

/* New customer on checkout: only the search box until an address is picked. */
.address-save-btn.is-auto-hidden {
  display: none !important;
}

.checkout-field-stack.is-search-only > :not(.checkout-location-search) {
  display: none !important; /* beats the .d-flex utility */
}

.checkout-location-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--flow-border-light);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
}

.checkout-location-list li {
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
  cursor: pointer;
}

.checkout-location-list li.is-active,
.checkout-location-list li:hover {
  background: #f2f4f7;
}

.checkout-location-list .checkout-location-credit {
  padding: 4px 16px;
  font-size: 10px;
  color: var(--flow-label-muted);
  text-align: right;
  cursor: default;
}

.checkout-location-list .checkout-location-credit:hover {
  background: transparent;
}

.checkout-field-row {
  display: grid;
  /* the State column is the widest so the longest state name (District Of Columbia) is not cut off */
  grid-template-columns: 1fr 1.8fr 0.75fr;
  gap: 12px;
}

.checkout-field {
  min-height: 48px;
  padding: 4px 10px;
  border: 3px solid var(--flow-border-light);
  border-radius: var(--flow-radius-pill);
}

.checkout-field-grid .checkout-field {
  border-radius: 20px;
}

.checkout-field label {
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--flow-label-muted);
}

.checkout-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
}

/* .checkout-field--plain.checkout-field input {
  font-size: 10px;
} */

.checkout-field select,
.checkout-field .checkout-select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.checkout-billing-same-option {
  font-size: 13px;
  cursor: pointer;
}

/* Full-screen blocker shown while a checkout request is in flight. Its
   semi-opaque backdrop swallows every click until the request settles. */
.checkout-flow-loading {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  cursor: progress;
}

.checkout-flow-loading .spinner-border {
  width: 3rem;
  height: 3rem;
  color: var(--flow-blue, #2650a4);
}

.checkout-flow-page.is-busy {
  cursor: progress;
}

/* An address / shipping change is being saved: ignore clicks on the options meanwhile, with no
   visual change at all (so nothing flashes). */
.checkout-flow-page.is-updating #checkout-saved-addresses,
.checkout-flow-page.is-updating #checkout-fulfilment {
  pointer-events: none;
}

/* The shipping-method step + Continue button now live in this wrapper (so they
   can be swapped by AJAX); keep the address step's bottom spacing that
   .checkout-step:last-of-type would otherwise strip. */
.checkout-flow-form .checkout-step--address {
  margin-bottom: 28px;
}

#checkout-fulfilment .checkout-step:last-of-type {
  margin-bottom: 0;
}

.checkout-billing-same-option input {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #000;
  border-radius: 50%;
  background: var(--flow-white);
  accent-color: #000;
  box-sizing: border-box;
}

.checkout-billing-same-option input:checked {
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7 9.5 3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

.checkout-field input::placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.checkout-field input::-webkit-input-placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.checkout-field--plain {
  border-radius: var(--flow-radius-pill);
  height: 28px;
  min-height: 36px;
  padding: 0 10px;
}

.checkout-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  resize: vertical;
  min-height: 72px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
}

.checkout-field textarea::placeholder {
  color: var(--flow-placeholder) !important;
  opacity: 1;
}

.checkout-field--textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  border-radius: var(--flow-radius-input);
}

/* auth-form paints its own blue pills on inputs — reset inside shared checkout fields */
.auth-form .checkout-field input:not([type="checkbox"]) {
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: 10px;
  font-weight: 400;
  box-shadow: none;
}

.checkout-checkbox-row {
  margin-top: 20px;
  font-size: 11px;
  line-height: 1;
  color: var(--flow-text);
  grid-template-columns: 15px 1fr;
}

.checkout-billing-section {
  margin-top: 20px;
}

.checkout-billing-section .checkout-checkbox-row {
  margin-top: 0;
}

.checkout-billing-form-panel {
  margin-top: 16px;
}

.checkout-billing-form-panel .checkout-step-title {
  margin-bottom: 12px;
}

.checkout-step--address.is-new .checkout-billing-form-panel .checkout-field-stack,
.checkout-step--address.is-editing .checkout-billing-form-panel .checkout-field-stack {
  gap: 6px;
}

.checkout-checkbox-row input {
  width: 15px;
  height: 15px;
}

.checkout-checkbox-row::before {
  width: 15px;
  height: 15px;
}

.checkout-checkbox-row:has(input:checked)::after {
  width: 5px;
  height: 11px;
  margin-top: -2px;
}

.checkout-shipping-options {
  /* 8px, not 4px: the pills grow on hover, and at 4px the grown pill's border
     touched its neighbour's. */
  gap: 8px;
  padding-left: 35px;
}

.checkout-shipping-option {
  /* flex: 0 0 auto (not width: fit-content) is what actually keeps this pill
     sized to its own text at every breakpoint -- fit-content is a value some
     mobile browsers (older Safari in particular) don't size flex items with
     the same way, letting the item stretch to fill the row instead, which is
     what was turning these into full-width stacked bars on at least one real
     device. flex: 0 0 auto (no grow, no shrink, size from content) is the
     standard, universally-supported way to say the same thing for a flex
     item, so it isn't at the mercy of that. */
  flex: 0 0 auto;
  /* Equal left/right padding (same total as the old 4px/10px) plus centering,
     so the radio + text group sits in the exact middle of the pill. */
  padding: 4px 7px;
  justify-content: center;
  /* Was the bootstrap gap-2 utility class on the label -- that utility sets
     gap with !important, which would have silently blocked the narrower
     mobile override below from ever taking effect. */
  gap: 8px;
  /* Was var(--flow-border) (#d9d9e0), a light gray meant for borders on a
     white background -- fine as an actual border between two white pills,
     but too faint once reused as this pill's own outline and text/icon
     color on an unselected option (e.g. "Overnight" before it's picked).
     Also thinned from 3px to 1.5px now that it's a darker, more visible
     color -- 3px read as bold/heavy once it wasn't faint anymore. */
  border: 1.5px solid var(--flow-text-muted);
  border-radius: var(--flow-radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: var(--flow-text-muted);
  cursor: pointer;
  /* flex-shrink: 0 above already stops this pill from being squeezed
     narrower than its content, but belt-and-braces: this label's own text
     should never wrap onto a second line -- flex-wrap on the row wraps
     whole pills onto the next line instead when they don't both fit. */
  white-space: nowrap;
}

/* Hover: the pill simply grows a little (a transform, so nothing around it moves).
   Kept small: the pills are only 4px apart on desktop, so a bigger scale makes
   their borders touch. */
.checkout-shipping-option {
  transition: transform 0.2s ease;
}

.checkout-shipping-option:hover {
  transform: scale(1.04);
}

.checkout-shipping-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* The radio dot itself (.payment-radio) is a solid filled circle by default
   (shared with the payment-method and saved-address radios elsewhere, scoped
   here rather than changed at the source so those keep their own look) --
   fine when it's a faint fill, but a solid dark circle read as heavy/bold
   once darkened for contrast. An unchecked option gets a thin outline ring
   instead (an actual radio-button look) rather than a solid dot; picking an
   option still fills it in solid, exactly as before. */
.checkout-shipping-option .payment-radio {
  background: var(--flow-white);
  border: 1.5px solid var(--flow-text-muted);
  /* Keeps the circle at its original 20px total size now that a border is
     added -- otherwise the border would sit outside the width/height and
     make it 3px larger overall. */
  box-sizing: border-box;
}

.checkout-shipping-option:has(input:checked) {
  border-color: var(--flow-blue);
  color: var(--flow-blue);
}

.checkout-shipping-option:has(input:checked) .payment-radio {
  background: var(--flow-blue);
  border-color: var(--flow-blue);
}

.checkout-summary-card {
  padding: 50px 20px 60px;
  border: 3.5px solid var(--flow-border);
  border-radius: 30px;
}

.checkout-summary-card h2 {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--flow-text);
}

.checkout-products-list {
  container-type: inline-size;
}

.checkout-product {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto 22px;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}

.checkout-product-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--flow-text-subtle);
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.checkout-product-remove:hover,
.checkout-product-remove:focus {
  color: var(--flow-red-remove);
  background: var(--flow-blue-softest);
  outline: none;
}

.checkout-product-thumb {
  width: 44px;
  height: 44px;
  max-width: 100%;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

.checkout-product-info {
  min-width: 0;
}

.checkout-product-info h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--flow-text);
  overflow-wrap: break-word;
}

.checkout-product-info p {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--flow-text-muted);
}

.checkout-qty {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  height: 32px;
  border: 2px solid var(--flow-border-soft);
  border-radius: var(--flow-radius-pill);
  padding: 4px;
  box-sizing: border-box;
  justify-self: start;
}

.checkout-qty button {
  flex: 0 0 auto;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: var(--flow-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.checkout-qty span,
.checkout-qty input {
  flex: 0 0 auto;
  width: 2.8ch;
  min-width: 2.8ch;
  box-sizing: content-box;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--flow-text);
  padding: 0 6px;
  border-left: 1px solid var(--flow-border);
  border-right: 1px solid var(--flow-border);
  outline: none;
}

.checkout-product-price {
  min-width: 44px;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--flow-text);
}

.checkout-product-unit {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--flow-text-subtle);
}

/* Remove-item confirmation modal */
.checkout-remove-modal .modal-content {
  border-radius: 18px;
  padding: 4px;
}

.checkout-remove-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--flow-red-soft, #fdecec);
  color: var(--flow-red, #dc2626);
  font-size: 18px;
}

.checkout-remove-modal h3 {
  font-size: 16px;
}

.checkout-remove-modal p {
  font-size: 13px;
}

/* Stack qty + price when the summary column is too narrow for 5 columns.
   Viewport media queries miss this because the sidebar can be ~280px on desktop. */
@container (max-width: 420px) {
  .checkout-product {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    column-gap: 10px;
  }

  .checkout-product-thumb {
    grid-row: 1 / span 2;
  }

  .checkout-product-info {
    grid-column: 2;
    grid-row: 1;
  }

  .checkout-product-remove {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  .checkout-qty {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
  }

  .checkout-product-price {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
  }
}

.checkout-flow-layout.is-cart-empty {
  display: flex;
  justify-content: center;
}

.checkout-flow-layout.is-cart-empty .checkout-flow-summary {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.checkout-empty-cart {
  padding: 24px 12px 18px;
  text-align: center;
}

.checkout-empty-cart[hidden] {
  display: none !important;
}

.checkout-empty-cart-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--flow-blue-btn);
  color: var(--flow-blue);
  font-size: 24px;
  margin: 0 auto 16px;
}

.checkout-empty-cart-title {
  font-size: 17px;
  line-height: 1.3;
  color: var(--flow-text-dark);
  margin-bottom: 8px;
}

.checkout-empty-cart-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--flow-text-muted);
  max-width: 270px;
  margin: 0 auto 20px;
}

.checkout-empty-cart-btn {
  min-height: 38px;
  padding: 8px 24px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--flow-blue);
  border-color: var(--flow-blue);
  color: var(--flow-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checkout-empty-cart-btn:hover,
.checkout-empty-cart-btn:focus {
  background: var(--flow-blue-hover);
  border-color: var(--flow-blue-hover);
  color: var(--flow-white);
}

.checkout-summary-divider {
  height: 3px;
  margin: 8px 0 14px;
  background: var(--flow-divider);
}

.checkout-summary-row {
  margin-bottom: 15px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--flow-text);
}

.checkout-summary-row--discount span:last-child {
  color: var(--flow-green);
}

.checkout-summary-total {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--flow-text);
}

.checkout-summary-total span:first-child {
  font-size: 16px;
}

.checkout-summary-legal {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1;
  color: var(--flow-text-subtle);
}

.checkout-summary-legal p {
  line-height: 1.3;
}

.checkout-summary-legal a {
  color: inherit;
  font-weight: 800;
}

.checkout-summary-legal a:hover {
  text-decoration: underline;
}

.checkout-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Relative placement instead of a hard breakpoint switch between
     fit-content and 100%: the button is never narrower than 60% of its
     step (so it doesn't read as a tiny, disconnected button on a wider
     tablet/desktop column) and never wider than the step itself, sizing
     itself to its own text in between. This scales continuously across
     every screen width on its own -- only ≤640px (where the shipping-option
     pills above it also switch to a full-width 50/50 split) still forces it
     the rest of the way to 100%, to match them exactly. */
  width: fit-content;
  min-width: 150px;
  max-width: 100%;
  margin: 16px 0 0;
  /* Just a step above the shipping-method pills it sits under (30px tall /
     10px text on desktop and phones, 32px / 11px on tablets): 36px tall with
     12px text here, 38px / 13px in the tablet rule. Text is about a third of
     the height at every size. */
  padding: 0 18px;
  min-height: 36px;
  border: 0;
  border-radius: var(--flow-radius-pill);
  background: var(--flow-blue);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

/* display:flex above would otherwise beat the [hidden] attribute (author
   styles always win over the UA default), e.g. hiding the "Send Verification
   Code" button once a code has been sent. */
.checkout-continue-btn[hidden] {
  display: none !important;
}

.checkout-continue-btn:hover {
  color: var(--flow-white);
  text-decoration: none;
  background: var(--flow-blue-dark);
}

/* Same glow and lift on hover as the Pay button (only while enabled) */
.checkout-continue-btn {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.checkout-continue-btn:not(:disabled):hover,
.checkout-continue-btn:not(:disabled):focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
  /* it is a link when enabled, and the global a:hover fade made it look disabled */
  opacity: 1;
}

.checkout-continue-btn:disabled {
  background: var(--flow-disabled-bg);
  cursor: not-allowed;
  opacity: 1;
}

.checkout-continue-btn:disabled:hover {
  background: var(--flow-disabled-bg);
}

/* Checkout responsive */
@media (max-width: 980px) {
  .checkout-flow-layout {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  /* Whenever the layout has to go vertical: contact + address steps first,
     then the order summary sitting right above the shipping-method step and
     its "Continue to Payment" button (#checkout-fulfilment is now a sibling
     of .checkout-flow-form, not nested inside it -- see checkout.php), so
     the total is visible right before the customer commits to it. */
  .checkout-flow-form {
    order: 0;
    width: 100%;
    margin-top: 0;
  }

  .checkout-flow-summary {
    order: 1;
    width: 100%;
  }

  #checkout-fulfilment {
    order: 2;
    width: 100%;
  }

}

@media (max-width: 640px) {

  .checkout-flow-page,
  .saved-cards-page {
    padding: 24px 0 40px;
  }

  .checkout-flow-container,
  .saved-cards-container {
    padding: 20px 16px;
    border: 2px solid var(--flow-border-light);
    border-radius: var(--flow-radius-card);
    background: var(--flow-white);
  }

  .checkout-flow-header {
    margin-bottom: 22px;
  }

  .checkout-flow-layout {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .checkout-flow-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .checkout-field-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* City, State and ZIP stack one under another on small screens so each one has the full width */
  .checkout-field-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .checkout-account-otp {
    padding: 0;
  }

  .checkout-account-otp .auth-form {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .checkout-account-message {
    font-size: 12px;
  }

  .checkout-saved-address-shell {
    gap: 12px;
    padding: 12px;
  }

  /* The generic padding reset above resets padding-left too -- restore the
     room the absolutely-positioned radio needs (see the desktop rule). */
  .checkout-saved-address-shell--selectable {
    padding-left: 44px;
  }

  .checkout-new-address-option {
    font-size: 13px;
    padding: 0 12px;
  }

  .checkout-shipping-options {
    gap: 8px;
    padding-left: 0;
  }

  /* A little tighter than the desktop/tablet padding -- extra headroom so
     both pills reliably fit side by side on narrow real-device widths
     (larger system font settings, browser zoom, etc. can need more room
     than a same-width desktop emulation does). */
  /* Small screens: the pills and the button stay compact and sized to their
     own content (the base flex: 0 0 auto), one step smaller than desktop,
     instead of stretching to share the whole row -- on a 500-640px screen that
     made them look oversized. Two pills still fit side by side down to 340px. */
  .checkout-shipping-option {
    gap: 5px;
    padding: 3px 5.5px;
  }

  .checkout-flow-page .checkout-shipping-option .payment-radio {
    width: 16px;
    height: 16px;
  }

  .checkout-flow-page .checkout-shipping-option .payment-radio::after {
    width: 6px;
    height: 6px;
  }

  .checkout-continue-btn {
    min-width: 140px;
    padding: 0 16px;
    font-size: 11px;
    min-height: 30px;
  }

  .checkout-field-grid .checkout-field {
    min-height: 48px;
    padding: 6px 10px;
  }

  .checkout-field--plain {
    min-height: 40px;
    padding: 0 14px;
  }

  .checkout-step {
    margin-bottom: 22px;
  }

  .checkout-flow-summary {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }

  .checkout-summary-card {
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
  }

  .checkout-summary-card-header {
    padding: 20px 12px;
    border: 2px solid var(--flow-border);
    border-radius: var(--flow-radius-input);
  }

  .checkout-summary-card h2 {
    margin-bottom: 26px;
    margin-top: 16px;
  }
}

/* Tablet-width bridge for Shipping Method + Continue to Payment: without
   this, the button jumped straight from its 18px phone size (≤640px) to the
   full 28px desktop size at 641px, with nothing in between across the
   641-980px tablet range. */

@media (min-width: 641px) and (max-width: 980px) {
  .checkout-continue-btn {
    /* The pills are 32px / 11px at this width, so one step up from them. */
    font-size: 13px;
    min-height: 38px;
  }

  .checkout-shipping-option {
    font-size: 11px;
    padding: 5px 8.5px;
  }
}

/* Guest contact step only (email + phone): stack to one column earlier than
   the general .checkout-field-grid breakpoint (640px) so the SMS consent
   notice sits directly under the phone field -- matching the sign-in
   page's always-single-column layout -- on small screens generally, not
   just the narrowest phones. Scoped to .checkout-contact-body so the name
   fields, address forms and the home page's contact form (which reuse the
   same .checkout-field-grid class) keep their own 640px breakpoint. */
@media (max-width: 768px) {
  .checkout-contact-body .checkout-field-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   SAVED CARDS PAGE — only values Bootstrap 5 cannot match 1:1
   ========================================================================== */

.saved-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* the cards stay a sensible size on wide screens instead of stretching with the page */
  max-width: 720px;
}

.saved-card-item {
  padding: 14px 16px 8px;
  border: 2.5px solid var(--flow-border);
  border-radius: var(--flow-radius-card);
}

.saved-card-top {
  margin-bottom: 16px;
}

.saved-card-bank {
  gap: 10px;
  min-width: 0;
}

.saved-card-bank-logo {
  width: 28px;
  height: auto;
}

.saved-card-bank span {
  font-size: 20px;
  line-height: 1.1;
  color: var(--flow-text);
}

.saved-card-network {
  height: 22px;
  width: auto;
}

.saved-card-network--diners {
  height: 30px;
}

.saved-card-network--visa {
  height: 16px;
}

/* Fallback for card brands with no logo asset (e.g. JCB, UnionPay) --
   an <i> icon instead of <img>, so height/width don't apply; size via font-size. */
i.saved-card-network--generic {
  height: auto;
  font-size: 22px;
  line-height: 1;
  color: var(--flow-label-muted, #8a8a8f);
}

.saved-card-number-block {
  margin: 0;
}

.saved-card-label {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--flow-text-soft);
}

.saved-card-number {
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--flow-text);
}

.saved-card-meta {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  margin-bottom: 18px;
}

/* the card number, then a clear gap before the expiry row */
.saved-card-meta--number {
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}

/* expires on the left, the In Use badge + delete icon at the right edge */
.saved-card-meta--actions {
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 6px;
}

.saved-card-meta-item p {
  font-size: 13px;
  line-height: 1.2;
  color: var(--flow-text);
}

.saved-card-in-use-badge {
  min-height: 28px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--flow-success-badge-bg);
  color: var(--flow-success-badge);
  font-size: 12px;
  line-height: 1;
}

.saved-card-make-in-use {
  position: relative;
  overflow: hidden;
  min-height: 28px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(9, 99, 215, 0.3);
  border-radius: 999px;
  background: rgba(9, 99, 215, 0.1);
  color: var(--flow-blue);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Set as Default: a soft blue tint at rest so it reads as clickable; fills solid blue with a glow on hover (not while it is switching over). */
.saved-card-make-in-use {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.saved-card-make-in-use:not(.is-activating):hover,
.saved-card-make-in-use:not(.is-activating):focus-visible {
  background: var(--flow-blue);
  border-color: var(--flow-blue);
  color: var(--flow-white);
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.22), 0 0 12px 2px rgba(9, 99, 215, 0.3);
  transform: translateY(-1px);
  outline: none;
}

.saved-card-make-in-use-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--flow-success-badge-bg);
  z-index: 0;
  pointer-events: none;
}

.saved-card-make-in-use-label {
  position: relative;
  z-index: 1;
}

.saved-card-make-in-use.is-activating {
  border-color: transparent;
  color: var(--flow-success-badge);
  pointer-events: none;
  cursor: default;
}

.saved-card-make-in-use.is-activating .saved-card-make-in-use-progress {
  animation: saved-card-in-use-fill 1.4s ease-out forwards;
}

@keyframes saved-card-in-use-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.saved-card-item.is-pending-remove {
  border-color: var(--flow-red-pending);
}

/* Saved cards: the trash icon (the same button as a saved mailing address, with its round red hover)
   sits at the bottom right beside the In Use / Make In Use badge; it is red on the card in use. */
.saved-card-item:has(.saved-card-in-use-badge) .checkout-saved-address-remove {
  color: var(--flow-red, #dc2626);
}

.saved-cards-add-new-box {
  /* same width as the saved cards above, and a lighter box than before */
  width: 100%;
  max-width: 720px;
  gap: 16px;
  padding: 12px 16px;
  min-height: 72px;
  border: 3px dashed var(--flow-border-dashed);
  border-radius: var(--flow-radius-input);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
}

.saved-cards-add-new-box:hover,
.saved-cards-add-new-box:focus {
  outline: none;
  border-color: var(--flow-border-dashed-hover);
}

.saved-cards-add-new-icon {
  width: 40px;
  height: auto;
}

.saved-cards-add-new-text strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--flow-text);
}

.saved-cards-add-new-text p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--flow-text-muted);
}

.add-card-modal .modal-content {
  border-radius: 18px;
  box-shadow: 0 12px 40px var(--flow-shadow-modal);
}

.add-card-modal .modal-body {
  padding: 12px 20px 24px;
}

.add-card-modal .inline-card-fields {
  margin: 0;
}

.add-card-modal .save-card-option {
  margin-top: 8px;
}

.add-card-modal .btn-primary {
  background: var(--flow-blue);
  border-radius: var(--flow-radius-input);
  min-height: 48px;
}

.add-card-modal .btn-primary:hover {
  background: var(--flow-blue-hover);
}


.saved-cards-security {
  max-width: 720px;
  padding: 8px 12px;
  border: 2.5px solid var(--flow-border);
  border-radius: var(--flow-radius-input);
}

.saved-cards-stripe {
  line-height: 0;
}

.saved-cards-stripe img {
  height: 36px;
  width: auto;
}

.saved-cards-security-text b {
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
}

.saved-cards-security-text p {
  font-size: 11px;
  color: var(--flow-text);
}

/* Saved cards responsive */
@media (max-width: 980px) {
  .saved-cards-grid,
  .saved-cards-add-new-box,
  .saved-cards-security {
    max-width: 420px;
  }

  .saved-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .saved-card-label {
    font-size: 11px;
  }

  .saved-card-bank-logo {
    width: 20px;
  }

  .saved-card-network--diners {
    height: 20px;
  }

  .saved-card-item {
    padding: 14px 14px 8px;
  }

  .saved-card-bank span {
    font-size: 16px;
  }

  .saved-card-number {
    font-size: 18px;
  }

  .saved-card-meta-item p {
    font-size: 12px;
  }

  .saved-cards-add-new-box {
    gap: 14px;
    min-height: auto;
    padding: 12px 14px;
  }

  .saved-cards-add-new-text strong {
    font-size: 15px;
  }

  .saved-cards-add-new-text p {
    font-size: 11px;
  }

  .saved-cards-security {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    border: none;
    background: transparent;
  }

  .saved-card-in-use-badge,
  .saved-card-make-in-use {
    font-size: 11px;
  }
}

/* ==========================================================================
   ORDER SUCCESS — order-success
   Only values Bootstrap 5 cannot match 1:1
   ========================================================================== */

.order-success-page .order-success-card {
  max-width: 460px;
  border: 3px solid var(--flow-border);
  border-radius: 32px;
  padding: 36px 24px 28px;
}

.order-success-icon {
  margin-bottom: 10px;
}

.order-success-icon-ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--flow-success-ring);
}

.order-success-icon-mark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--flow-success-mark);
}

.order-success-icon-mark svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}

.order-success-page h1 {
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.order-success-subtext {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--flow-text-muted);
}

.order-success-summary,
.order-success-address {
  border: 1px solid var(--flow-border);
  border-radius: 18px;
}

.order-success-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
}

.order-success-summary::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: var(--flow-border);
  transform: translateX(-50%);
  pointer-events: none;
}

.order-success-summary-col {
  min-width: 0;
  padding: 16px 18px;
}

.order-success-date {
  font-size: 12px;
  line-height: 1.35;
  color: var(--flow-text-muted);
}

.order-success-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--flow-text);
  margin-bottom: 4px;
}

.order-success-id {
  color: var(--flow-blue);
  font-size: 14px;
  line-height: 1.3;
}

.order-success-id:hover {
  color: var(--flow-blue-hover);
  text-decoration: underline;
}

.order-success-address {
  padding: 10px 18px;
}

.order-success-address p {
  font-size: 13px;
  line-height: 1.1;
  color: var(--flow-text);
}

.order-success-address strong {
  margin-bottom: 3px;
}

.order-success-actions {
  margin-top: 18px;
  padding-top: 2px;
}

.order-success-countdown {
  font-size: 13px;
  line-height: 1.25;
}

.order-success-countdown-label {
  font-size: 11px;
  color: var(--flow-text-muted);
}

.order-success-countdown-timer {
  font-size: 15px;
  color: var(--flow-ink, #071a46);
  letter-spacing: 0.5px;
}

.order-success-continue-btn {
  min-height: 38px;
  padding: 8px 20px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--flow-blue);
  border-color: var(--flow-blue);
  color: var(--flow-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.order-success-continue-btn:hover,
.order-success-continue-btn:focus {
  background: var(--flow-blue-hover);
  border-color: var(--flow-blue-hover);
  color: var(--flow-white);
}

/* Order success responsive */
@media (max-width: 560px) {
  .order-success-page .order-success-card {
    max-width: 360px;
    padding: 32px 18px 24px;
    border-radius: 28px;
  }

  .order-success-page h1 {
    font-size: 20px;
  }

  .order-success-summary {
    grid-template-columns: 1fr;
  }

  .order-success-summary::after {
    top: 50%;
    bottom: auto;
    left: 14px;
    right: 14px;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }

  .order-success-actions {
    flex-direction: column;
    align-items: stretch !important;
    text-align: center;
  }

  .order-success-countdown {
    text-align: center !important;
  }

  .order-success-continue-btn {
    width: 100%;
  }
}

/* ==========================================================================
   NOT FOUND — 404
   Only values Bootstrap 5 cannot match 1:1
   ========================================================================== */

.not-found-page .not-found-card {
  max-width: 460px;
  border: 3px solid var(--flow-border);
  border-radius: 32px;
  padding: 36px 24px 28px;
}

.not-found-page .not-found-code {
  font-size: 48px;
  line-height: 1;
  color: var(--flow-blue);
  margin-bottom: 8px;
}

.not-found-page h1 {
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.not-found-subtext {
  margin: 0 0 24px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--flow-text-muted);
}

@media (max-width: 560px) {
  .not-found-page .not-found-card {
    max-width: 360px;
    padding: 32px 18px 24px;
    border-radius: 28px;
  }

  .not-found-page h1 {
    font-size: 20px;
  }
}

/* ==========================================================================
   PAYMENT FAILED — payment-failed
   Only values Bootstrap 5 cannot match 1:1
   ========================================================================== */

.payment-failed-page .payment-failed-card {
  max-width: 460px;
  border: 3px solid var(--flow-border);
  border-radius: 32px;
  padding: 36px 24px 28px;
}

.payment-failed-icon {
  margin-bottom: 10px;
}

.payment-failed-icon-ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #fdecea;
}

.payment-failed-icon-mark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--flow-red-pending);
}

.payment-failed-icon-mark svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.payment-failed-page h1 {
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.payment-failed-subtext {
  margin: 0 0 24px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--flow-text-muted);
}

.payment-failed-page .profile-save-btn {
  min-width: 150px;
  height: 36px;
  border-radius: var(--flow-radius-pill);
  font-size: 13px;
  padding: 0 1.35rem;
  background: var(--flow-blue);
  border-color: var(--flow-blue);
}

.payment-failed-page .profile-save-btn:hover {
  background: var(--flow-blue-hover);
  border-color: var(--flow-blue-hover);
}

.payment-failed-page .profile-edit-btn {
  min-width: 150px;
  height: 36px;
  border-radius: var(--flow-radius-pill);
  font-size: 13px;
  padding: 0 1.35rem;
  background: var(--flow-border);
  border: 1px solid var(--flow-border);
  color: var(--flow-text);
}

.payment-failed-page .profile-edit-btn:hover {
  background: #dce4ee;
  border-color: #dce4ee;
  color: var(--flow-text-strong, #111);
}

@media (max-width: 560px) {
  .payment-failed-page .payment-failed-card {
    max-width: 360px;
    padding: 32px 18px 24px;
    border-radius: 28px;
  }

  .payment-failed-page h1 {
    font-size: 20px;
  }
}

/* ==========================================================================
   ACCOUNT SIDEBAR — shared layout + nav for account pages
   Pages: order-history, profile, saved-cards, mail-addresses, policy pages
   Markup: .account-layout > .account-layout-row > .account-sidebar + .account-content
   ========================================================================== */

.account-layout {
  max-width: 1400px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.account-layout-row {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

.account-sidebar {
  flex: 0 0 300px;
  max-width: 300px;
  min-height: fit-content;
  z-index: 2;
}

.account-mobile-nav .fa-angle-right {
  font-size: 1.5rem;
  line-height: 1;
}

/* Small screens: the Account Menu button and the site menu button, side by side */
.account-mobile-menu-btn,
.account-mobile-toggler {
  min-height: 46px;
  border: 1px solid var(--flow-border);
  border-radius: 12px;
  background: var(--flow-white);
  color: var(--flow-text-dark);
}

.account-mobile-menu-btn {
  flex: 1 1 auto;
  padding: 0 16px;
  font-size: 16px;
  text-align: left;
}

.account-mobile-toggler {
  flex: 0 0 46px;
  width: 46px;
  padding: 0;
  font-size: 22px;
}

.account-offcanvas-back .fa-angle-left {
  font-size: 1.5rem;
  line-height: 1;
}

.account-sidebar-inner {
  padding: 28px 20px 20px;
  min-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-page-main {
  overflow: visible;
}

.account-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Desktop: column stretches for full-height separator; inner panel is sticky
   when it fits. If content is taller than the viewport (short screens),
   .account-sidebar-overflow disables sticky so the sidebar scrolls with the page.
   --account-header-height is set from the sticky landing header via js/main.js */
@media (min-width: 992px) {
  .account-wrapper {
    --account-header-height: 0px;
  }

  .account-layout-row {
    align-items: stretch !important;
  }

  /* Outer column: tall as the page content → border runs full content height */
  .account-sidebar.sticky-top {
    position: relative;
    top: auto;
    align-self: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  /* Inner panel: sticks under header when content fits the viewport */
  .account-sidebar.sticky-top .account-sidebar-inner {
    position: sticky;
    top: var(--account-header-height);
    height: auto;
    min-height: min(100%, calc(100vh - var(--account-header-height)));
    max-height: calc(100vh - var(--account-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Short screens: no nested scrollbar — sidebar moves with page scroll */
  .account-wrapper.account-sidebar-overflow .account-sidebar.sticky-top .account-sidebar-inner {
    position: static;
    top: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}

.account-sidebar-link-gap {
  gap: 0.75rem;
}

.account-sidebar-title {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--flow-text-caption);
  padding-left: calc(0.75rem + 1px);
  padding-right: calc(0.75rem + 1px);
}

.account-sidebar-link {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--flow-text-dark);
  font-size: 14px;
  padding: 0.5rem 0.75rem;
}

.account-sidebar-link.active {
  border-color: var(--flow-blue);
  background: var(--flow-blue-softest);
  color: var(--flow-blue);
}

.account-sidebar-link i {
  color: var(--flow-text-label);
  width: 22px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.account-sidebar-link.active i {
  color: var(--flow-blue);
}

/* Normalize FA glyph optical size differences */
.account-sidebar-link .fa-map-marker {
  transform: scale(1.2);
}

.account-sidebar-link .fa-exchange {
  transform: scale(0.95);
}

.account-help-card {
  border: 1px solid var(--flow-border-help);
  border-radius: 16px;
  background: var(--flow-blue-softest);
  max-width: 100%;
  padding: 20px 18px 18px;
}

/* Keep flex push (mt-auto); mt-2 gap via previous sibling so utilities don't fight */
.account-help-card.mt-auto {
  margin-top: auto !important;
}

.account-sidebar-inner>*:has(+ .account-help-card),
.offcanvas-body>*:has(+ .account-help-card) {
  margin-bottom: 0.5rem;
}

.account-help-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--flow-blue-soft);
  color: var(--flow-blue);
}

.account-help-title {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--flow-text-dark);
}

.account-help-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--flow-text-label);
}

.account-help-link {
  font-size: 12px;
  line-height: 1.3;
  color: var(--flow-text-dark);
}

.account-help-link:hover {
  color: var(--flow-blue);
  text-decoration: none;
  opacity: 1;
}

/* ==========================================================================
   ACCOUNT PAGE SHELL — shared .main-wrap padding (all sidebar pages)
   ========================================================================== */

.account-wrapper .main-wrap {
  padding: 32px 40px 48px;
  flex: 1 1 auto;
}

@media (max-width: 1199.98px) {
  .account-wrapper .main-wrap {
    padding: 28px 24px 40px;
  }
}

/* Compact main-wrap on md: saved-cards, addresses, policy only
   (order-history + profile keep XL padding until xs) */
@media (max-width: 767.98px) {

  .saved-cards-account-page .main-wrap,
  .addresses-page .main-wrap,
  .policy-page .main-wrap {
    padding: 20px 16px 32px;
  }
}

@media (max-width: 575.98px) {

  .order-history-page .main-wrap,
  .profile-page .main-wrap,
  .addresses-page .main-wrap,
  .policy-page .main-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   ACCOUNT WELCOME HEADER — shared Welcome back / name / lead
   Pages: order-history, saved-cards, profile, mail-addresses
   (policy pages use a different header — do not include)
   ========================================================================== */

.order-history-page,
.saved-cards-account-page,
.profile-page,
.addresses-page {
  color: var(--flow-text-dark);
}

.order-history-page h1,
.saved-cards-account-page h1,
.profile-page h1,
.addresses-page h1 {
  font-size: 32px;
  letter-spacing: -0.4px;
}

/* Profile uses HTML lh-sm (~1.25); others use 1.2 */
.order-history-page h1,
.saved-cards-account-page h1,
.addresses-page h1 {
  line-height: 1.2;
}

.order-history-page .lead,
.saved-cards-account-page .lead,
.profile-page .lead,
.addresses-page .lead {
  font-size: 15px;
}

@media (max-width: 1199.98px) {

  /* Profile has no 30px step at this breakpoint */
  .order-history-page h1,
  .saved-cards-account-page h1,
  .addresses-page h1 {
    font-size: 30px;
  }
}

@media (max-width: 767.98px) {

  .order-history-page .welcome,
  .saved-cards-account-page .welcome,
  .profile-page .welcome,
  .addresses-page .welcome {
    font-size: 15px;
  }

  .order-history-page h1,
  .saved-cards-account-page h1,
  .profile-page h1,
  .addresses-page h1 {
    font-size: 26px;
  }
}

@media (max-width: 575.98px) {

  .order-history-page h1,
  .saved-cards-account-page h1,
  .profile-page h1,
  .addresses-page h1 {
    font-size: 24px;
  }
}

/* Order History: the PDF download icon next to an order number */
.order-pdf-link {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.order-pdf-link img {
  /* grows and shrinks with the screen: ~20px on a small phone up to 24px on large screens */
  width: clamp(20px, 1.6vw + 14px, 24px);
  height: auto;
}

.order-pdf-link:hover,
.order-pdf-link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

/* keeps the icons in one straight column whatever the length of the order number */
.order-table td > .d-flex > div:first-child {
  min-width: 96px;
}

/* Profile: the "was not changed" notice is plain red text, not a coloured box */
.profile-page #profile-alert.profile-alert-red {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--landing-accent-red);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* Profile account bar with session info and logout */
.profile-page .profile-account-bar {
  margin-top: 28px;
  max-width: 650px; /* same width as the Personal Information card above it */
  padding-top: 14px;
  border-top: 1px solid var(--flow-border);
}

.profile-page .profile-account-status {
  font-size: 13px;
  color: var(--flow-text-label);
}

.profile-page .profile-account-status strong {
  color: var(--flow-text-dark);
}

.profile-page .profile-logout-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--flow-radius-pill);
  font-size: 12px;
  background: #fff4c7;
  border: 1px solid #f1e0a1;
  color: var(--flow-text);
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profile-page .profile-logout-btn:hover,
.profile-page .profile-logout-btn:focus {
  background: var(--flow-blue-softest);
  border-color: var(--flow-red-soft);
  color: var(--flow-red-remove);
}

/* Shared primary save button (profile + mail addresses + contact) */
.profile-page .profile-edit-btn {
  min-width: 100px;
  height: 36px;
  border-radius: 12px;
  font-size: 13px;
  padding: 0 1.35rem;
  background: var(--flow-border);
  border: 1px solid var(--flow-border);
  color: var(--flow-text);
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profile-page .profile-edit-btn:hover {
  background: #dce4ee;
  border-color: #dce4ee;
  color: var(--flow-text-strong, #111);
}

.profile-page #profile-edit-btn {
  background: #d8f1df;
  border-color: #bfe5c9;
  color: #1d5a2f;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.profile-page #profile-edit-btn:not(:disabled):hover,
.profile-page #profile-edit-btn:not(:disabled):focus-visible {
  background: #c2e8cd;
  border-color: #98d3a9;
  color: #14451f;
  box-shadow: 0 0 0 3px rgba(46, 160, 87, 0.22);
  transform: translateY(-1px);
  outline: none;
}

/* While editing, the same button is "Cancel": a soft red, so it reads as "leave without saving" and is
   clearly different from the blue Save Changes beside it. */
.profile-page #profile-edit-btn.is-cancel {
  background: #fde4e4;
  border-color: #f5bdbd;
  color: #8f2323;
}

.profile-page #profile-edit-btn.is-cancel:not(:disabled):hover,
.profile-page #profile-edit-btn.is-cancel:not(:disabled):focus-visible {
  background: #f9cccc;
  border-color: #ee9d9d;
  color: #721a1a;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Save Changes: the same glow and lift on hover as the other action buttons (only while it is enabled). */
.profile-page #profile-save-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.profile-page #profile-save-btn:not(:disabled):hover,
.profile-page #profile-save-btn:not(:disabled):focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

.profile-page .profile-edit-btn:disabled,
.profile-page .profile-edit-btn:disabled:hover {
  background: var(--flow-disabled-bg) !important;
  border-color: var(--flow-disabled-bg) !important;
  color: var(--flow-white) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Profile: success messages shown right below the "Personal Information" heading; each one
   fades in, stays a few seconds and then folds away. */
.profile-toasts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-toast {
  max-height: 0;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 10px;
  background: #1f8f45;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.profile-toast.is-visible {
  max-height: 80px;
  margin: 0 0 12px;
  padding: 10px 14px;
  opacity: 1;
}

/* Profile: field errors under the Personal Information inputs */
.profile-card .flow-input.is-invalid,
.profile-card .flow-input.is-invalid:focus {
  border: 1px solid var(--flow-error-line);
  background-image: none;
  box-shadow: none;
}

.profile-field-error {
  margin: 4px 0 0;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--landing-accent-red);
}

.profile-field-error:empty {
  display: none;
}

/* Profile: confirming a new email address / phone number with a 6-digit code */
.contact-verify-panel {
  padding: 18px 20px;
  border: 1px solid var(--flow-blue-focus);
  border-radius: 16px;
  background: var(--flow-blue-softest);
}

.contact-verify-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--flow-text);
}

.contact-verify-row {
  padding: 14px 0;
  border-top: 1px solid var(--flow-blue-focus);
}

.contact-verify-row[hidden] {
  display: none;
}

.contact-verify-label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flow-text);
  overflow-wrap: anywhere;
}

.contact-verify-label .fa {
  width: 18px;
  color: var(--flow-blue);
}

.contact-verify-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.contact-verify-entry .otp-inputs input {
  width: 42px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--flow-border);
  border-radius: 10px;
  background: var(--flow-white);
  color: var(--flow-text);
  font-size: 22px;
  text-align: center;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}

.contact-verify-entry .otp-inputs input:focus {
  border-color: var(--flow-blue);
}

.contact-verify-entry .otp-inputs.is-error input {
  border-color: transparent;
  outline: 1px solid var(--flow-error-line);
  outline-offset: -1px;
}

.contact-verify-resend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--flow-text-muted);
}

.contact-verify-resend button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--flow-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.contact-verify-resend button:disabled {
  color: var(--flow-text-subtle);
  cursor: not-allowed;
}

.contact-verify-error {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  text-align: left;
  color: var(--landing-accent-red);
}

.contact-verify-error:empty {
  display: none;
}

/* Verify / Cancel for one contact (each row has its own). */
.contact-verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.contact-verify-actions[hidden],
.contact-verify-entry[hidden] {
  display: none;
}

.contact-verify-row.is-verified .contact-verify-label,
.contact-verify-row.is-verified .contact-verify-label .fa {
  color: #1a7f4b;
}

@media (max-width: 575.98px) {
  .contact-verify-panel {
    padding: 14px;
  }

  .contact-verify-entry .otp-inputs {
    gap: 6px !important;
  }

  .contact-verify-entry .otp-inputs input {
    width: 38px;
    height: 44px;
    font-size: 20px;
  }
}

.profile-page .profile-save-btn,
.addresses-page .address-save-btn,
.checkout-flow-page .address-save-btn {
  min-width: 150px;
  height: 36px;
  border-radius: 12px;
  font-size: 13px;
  padding: 0 1.35rem;
  background: var(--flow-blue);
  border-color: var(--flow-blue);
}

.landing-page .contact-submit.profile-save-btn,
.not-found-page .profile-save-btn {
  min-width: 150px;
  height: 36px;
  border-radius: var(--flow-radius-pill);
  font-size: 13px;
  padding: 0 1.35rem;
  background: var(--flow-blue);
  border-color: var(--flow-blue);
}

.profile-page .profile-save-btn:hover,
.addresses-page .address-save-btn:hover,
.checkout-flow-page .address-save-btn:hover,
.landing-page .contact-submit.profile-save-btn:hover,
.not-found-page .profile-save-btn:hover {
  background: var(--flow-blue-hover);
  border-color: var(--flow-blue-hover);
}

/* Add / Save / Deliver-to-this-address buttons: the same glow and lift on hover as Send Code
   (only while the button is enabled). */
.addresses-page .address-save-btn,
.checkout-flow-page .address-save-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.addresses-page .address-save-btn:not(:disabled):hover,
.checkout-flow-page .address-save-btn:not(:disabled):hover {
  box-shadow: 0 0 0 3px rgba(9, 99, 215, 0.28), 0 0 18px 4px rgba(9, 99, 215, 0.45);
  transform: translateY(-1px);
}

/* Mailing Addresses: Cancel beside "Add this address" */
.addresses-page .address-cancel-btn {
  min-width: 100px;
  height: 36px;
  padding: 0 1.35rem;
  border: 1px solid var(--flow-border);
  border-radius: 12px;
  background: var(--flow-border);
  color: var(--flow-text);
  font-size: 13px;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.addresses-page .address-cancel-btn:not(:disabled):hover {
  background: #dce4ee;
  border-color: #dce4ee;
  color: var(--flow-text-strong, #111);
  box-shadow: 0 0 0 3px rgba(120, 135, 155, 0.22);
  transform: translateY(-1px);
}

.addresses-page .address-cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.addresses-page .address-cancel-btn[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .addresses-page .address-cancel-btn {
    min-width: 0;
  }
}

.profile-page .profile-save-btn:disabled,
.profile-page .profile-save-btn:disabled:hover,
.addresses-page .address-save-btn:disabled,
.checkout-flow-page .address-save-btn:disabled,
.addresses-page .address-save-btn:disabled:hover,
.checkout-flow-page .address-save-btn:disabled:hover,
.landing-page .contact-submit.profile-save-btn:disabled,
.landing-page .contact-submit.profile-save-btn:disabled:hover {
  background: var(--flow-disabled-bg) !important;
  border-color: var(--flow-disabled-bg) !important;
  cursor: not-allowed;
}

@media (max-width: 767.98px) {

  .profile-page .profile-edit-btn,
  .profile-page .profile-save-btn,
  .addresses-page .address-save-btn,
  .checkout-flow-page .address-save-btn,
  .landing-page .contact-submit.profile-save-btn,
  .not-found-page .profile-save-btn,
  .payment-failed-page .profile-save-btn,
  .payment-failed-page .profile-edit-btn {
    min-width: 0;
  }
}

/* Keep the Save Address buttons the same size while the label swaps for the
   spinner on small screens (the rule above drops min-width to 0). */
@media (max-width: 767.98px) {
  .addresses-page .address-save-btn,
  .checkout-flow-page .address-save-btn {
    min-width: 135px;
  }
}

/* ==========================================================================
   ORDER HISTORY PAGE — page-specific only
   ========================================================================== */

.order-history-page .badge-success-subtle,
.order-history-page .badge-primary-subtle {
  line-height: 1;
  font-weight: 400;
  padding: 0.5em 0.8em 0.32em;
}

/* Detail modal td is 12px; order table td is 14px — match badge size to order rows */
.order-history-page .detail-table .badge-success-subtle,
.order-history-page .detail-table .badge-primary-subtle {
  font-size: 87.5%;
}

.order-history-page .badge-success-subtle {
  background-color: var(--flow-success-bg);
  color: var(--flow-success);
}

.order-history-page .badge-primary-subtle {
  background-color: var(--flow-blue-soft);
  color: var(--flow-blue);
}

.order-history-page .order-details-modal .modal-header .badge {
  font-size: 12px;
  padding: 0.3em 0.65em;
  line-height: 1;
}

.order-history-page .clean-card {
  border-color: var(--flow-border-card);
  border-radius: 18px;
}

.order-history-page .search {
  max-width: 325px;
}

.order-history-page .order-toolbar-actions .btn {
  font-size: 13px;
}

.order-history-page .order-table th {
  color: var(--flow-text-label);
  font-size: 12px;
  padding: 12px;
}

.order-history-page .detail-table th {
  color: var(--flow-blue);
  font-size: 12px;
  padding: 12px 18px;
  text-align: center;
}

.order-history-page .detail-table th:first-child,
.order-history-page .detail-table td:first-child {
  text-align: left;
}

.order-history-page .order-table td {
  font-size: 14px;
  padding: 12px;
}

.order-history-page .order-table td:last-child {
  text-align: center;
}

.order-history-page .thumb {
  width: 58px;
  height: 58px;
}

.order-history-page .item-box {
  width: 42px;
  height: 42px;
  border: 1px solid var(--flow-border-card);
  border-radius: 10px;
  background: var(--flow-surface-subtle);
}

.order-history-page .order-table .btn,
.order-history-page .order-table .btn-sm,
.order-history-page .mobile-order .btn,
.order-history-page .mobile-order .btn-sm {
  min-width: auto;
  border-radius: 12px;
  background: var(--flow-white);
  border: 1px solid var(--flow-border-muted);
  color: var(--flow-text-dark);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.65rem 1.4rem;
  box-shadow: none;
}

.order-history-page .order-table .btn:hover,
.order-history-page .order-table .btn:focus,
.order-history-page .mobile-order .btn:hover,
.order-history-page .mobile-order .btn:focus {
  background: var(--flow-white);
  border-color: var(--flow-border-hover);
  color: var(--flow-text-dark);
  box-shadow: none;
}

.order-history-page .order-details-modal .modal-dialog {
  max-width: 820px;
}

.order-history-page .order-details-modal .modal-content {
  border-radius: 18px;
  box-shadow: 0 12px 40px var(--flow-shadow-modal);
}

.order-history-page .order-details-modal .modal-header {
  padding: 16px 12px 10px;
}

.order-history-page .order-details-modal .modal-body {
  padding: 16px 12px 12px;
}

.order-history-page .order-details-modal h3 {
  font-size: 18px;
  color: var(--flow-text-dark);
}

.order-history-page .details-close {
  width: 22px;
  height: 22px;
  color: var(--flow-text);
  cursor: pointer;
}

.order-history-page .details-close:hover {
  color: var(--flow-blue);
}

.order-history-page .detail-table td {
  font-size: 12px;
  padding: 18px;
  text-align: center;
}

.order-history-page .tracking {
  font-size: 12px;
}

@media (max-width: 767.98px) {
  .order-history-page .order-details-modal .modal-dialog {
    max-width: 100%;
    margin: 8px;
  }

  .order-history-page .order-details-modal .modal-content {
    border-radius: 14px;
  }

  .order-history-page .order-details-modal .modal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 12px 8px;
  }

  .order-history-page .order-details-modal .modal-header-left {
    padding-right: 28px;
  }

  .order-history-page .order-details-modal .modal-header-right {
    margin-left: 0 !important;
  }

  .order-history-page .order-details-modal .details-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .order-history-page .order-details-modal h3 {
    font-size: 12px;
  }

  .order-history-page .order-details-modal .details-date,
  .order-history-page .order-details-modal .details-date small {
    font-size: 12px;
  }

  .order-history-page .order-details-modal .modal-body {
    padding: 8px 4px 4px;
  }

  .order-history-page .detail-table th,
  .order-history-page .detail-table td {
    padding: 8px 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  .order-history-page .detail-table th {
    font-size: 9px;
  }

  .order-history-page .detail-table th:first-child,
  .order-history-page .detail-table td:first-child {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    white-space: normal;
    text-align: center;
  }

  .order-history-page .detail-table .tracking {
    font-size: 10px;
  }
}

@media (max-width: 575.98px) {
  .order-history-page .order-toolbar {
    gap: 12px;
  }

  .order-history-page .order-toolbar-actions {
    width: 100%;
    margin-left: 0 !important;
    justify-content: space-between;
  }

  .order-history-page .order-toolbar-actions .btn+.btn {
    margin-left: 16px !important;
  }

  .order-history-page .search {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Profile page — page-specific only
   -------------------------------------------------------------------------- */

.profile-page .profile-card {
  border-color: var(--flow-border-card);
  border-radius: 18px;
  max-width: 650px;
}

/* Policy pages (Returns & Shipping, Terms & Conditions, Privacy) — content only;
   .main-wrap padding comes from ACCOUNT PAGE SHELL above */

.policy-page .policy-content {
  max-width: 720px;
  font-weight: 400;
}

.policy-page .policy-content p,
.policy-page .policy-content li {
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.policy-page .policy-content h2,
.policy-page .policy-content strong,
.policy-page .policy-content .fw-semibold {
  font-weight: 600 !important;
}

.policy-page .policy-link {
  color: var(--flow-blue);
  text-decoration: none;
}

.policy-page .policy-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   LANDING PAGE — index.html
   Home-only tokens scoped to .landing-page (do not use on checkout pages).
   ========================================================================== */

.landing-page {
  /* --landing-header-height is set at runtime on :root from the fixed header */

  /* surfaces */
  --landing-white: #fff;
  --landing-panel-start: #ffffff;
  --landing-panel-end: #edf6fe;
  --landing-panel-soft: #f7fbff;
  --landing-panel-tint: #edf3ff;

  /* ink / text */
  --landing-ink: #071a46;
  --landing-ink-hover: #14284f;
  --landing-ink-deep: #0a1535;
  --landing-text: #142039;
  --landing-text-muted: #6b7a90;
  --landing-text-feature: #284676;
  --landing-text-soft: #657186;
  --landing-text-faint: #9aa8bc;
  --landing-text-strong: #111;
  --landing-stats-ink: #1a2336;

  /* brand blues (reuse shared flow tokens where they match) */
  --landing-blue: var(--flow-blue);
  --landing-blue-hover: var(--flow-blue-hover);
  --landing-blue-dark: var(--flow-blue-dark);
  --landing-blue-glow: rgba(80, 140, 230, 0.75);
  --landing-blue-heading: #cce3ff;
  --landing-blue-line: #c5d7ef;
  --landing-hotspot: #1a3a8f;

  /* borders */
  --landing-border: var(--flow-border-card);
  --landing-border-input: var(--flow-border-input);

  /* accents */
  --landing-accent-red: #e11d2e;

  /* overlays */
  --landing-nav-sheet: rgba(255, 255, 255, 0.96);
  --landing-nav-shadow: rgba(0, 0, 0, 0.08);
  --landing-indicator: rgba(255, 255, 255, 0.55);
  --landing-glow: rgba(80, 140, 230, 0.75);
  --landing-content-overlay: rgba(255, 255, 255, 0.92);

  /* page shell */
  margin: 0;
  background: var(--landing-white);
  overflow-x: clip;
  scroll-padding-top: var(--landing-header-height, 80px);
}


html {
  scroll-padding-top: 76px;
}

@media (max-width: 991.98px) {
  html {
    scroll-padding-top: 62px;
  }
}


@media (max-width: 340px) {
  html {
    scroll-padding-top: 84px;
  }
}

.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.landing-header:hover,
.landing-header.is-scrolled,
.landing-header.is-searching {
  background: var(--landing-white);
  border-bottom-color: var(--landing-border);
}

/*
  Non-index pages: same landing header markup with the scrolled look always on
  (white bg + bottom border). Sticky so account sidebars can pin under it —
  same behaviour as the old site header.
  Tokens are local so header colors work outside .landing-page.

  _clear.php's <body> carries every page-type class (landing-page, page-wrapper,
  etc.) unconditionally on every page, so page-wrapper alone can't tell the real
  home page apart from any other -- base.php adds landing-header--home only on
  site/index, and that's what actually excludes it here.
*/
.page-wrapper > .landing-header:not(.landing-header--home) {
  --landing-white: #fff;
  --landing-border: var(--flow-border-card);
  --landing-ink: #071a46;
  --landing-ink-hover: #14284f;
  --landing-nav-sheet: rgba(255, 255, 255, 0.96);
  --landing-nav-shadow: rgba(0, 0, 0, 0.08);

  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 1030;
  background: var(--landing-white);
  border-bottom: 1px solid var(--landing-border);
}

.landing-navbar .landing-logo-img {
  height: 42px;
  width: auto;
}

.landing-navbar .navbar-brand:hover,
.landing-navbar .navbar-brand:focus {
  opacity: 1;
}

.landing-navbar-toggler {
  color: var(--landing-ink);
}

.landing-navbar .landing-nav-links .nav-link {
  color: var(--landing-ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.landing-navbar .landing-nav-links .nav-link:hover,
.landing-navbar .landing-nav-links .nav-link:focus {
  color: var(--landing-ink-hover);
}

.landing-navbar .landing-nav-icons {
  gap: 20px;
  width: auto;
}

.landing-navbar .landing-mobile-icons {
  gap: 16px;
  margin-right: 14px;
}

.landing-navbar .landing-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--landing-ink);
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.landing-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--flow-radius-pill);
  background: var(--flow-blue);
  color: var(--flow-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.landing-cart-badge[hidden],
.landing-cart-badge:empty,
.landing-cart-badge.is-hidden {
  display: none !important;
}

.landing-navbar .landing-icon-link i {
  color: var(--landing-ink);
}

/* Bigger clickable area around each icon (hand cursor + highlight on the whole area) */
.landing-navbar .landing-icon-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.landing-navbar .landing-nav-icons {
  gap: 8px;
}

.landing-navbar .landing-mobile-icons {
  gap: 4px;
}

.landing-navbar .landing-icon-link:hover,
.landing-navbar .landing-icon-link:focus-visible {
  background-color: rgba(13, 110, 253, 0.12);
  transform: scale(1.08);
}

.landing-navbar .landing-icon-link:hover,
.landing-navbar .landing-icon-link:focus {
  color: var(--landing-ink-hover);
}

.landing-navbar .landing-icon-link:hover i,
.landing-navbar .landing-icon-link:focus i {
  color: var(--landing-ink-hover);
}

.landing-header-search {
  display: none;
  width: 100%;
}

.landing-header-search-form {
  position: relative;
  max-width: 580px;
  width: 100%;
}

.landing-header-search-group {
  width: 100%;
}

.landing-header-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--flow-white, #ffffff);
  border: 1px solid var(--flow-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1060;
  padding: 6px 0;
}

.landing-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--flow-text-dark, #1e293b);
  transition: background-color 0.15s ease;
  cursor: pointer;
  border-bottom: 1px solid var(--flow-surface-muted, #f1f5f9);
}

.landing-search-result-item:last-child {
  border-bottom: none;
}

.landing-search-result-item:hover,
.landing-search-result-item.is-selected {
  background-color: var(--flow-surface-muted, #f8fafc);
}

.landing-search-result-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--flow-border, #e2e8f0);
  background: var(--flow-white, #ffffff);
  flex-shrink: 0;
  padding: 2px;
}

.landing-search-result-info {
  flex: 1 1 auto;
  min-width: 0;
}

.landing-search-result-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--flow-text-dark, #1e293b);
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-search-result-sku {
  font-size: 12px;
  color: var(--flow-text-muted, #64748b);
  line-height: 1.2;
}

.landing-search-result-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--flow-blue, #2650a4);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.2;
}

.landing-search-result-pack {
  font-size: 11px;
  font-weight: 500;
  color: var(--flow-text-muted, #64748b);
  display: block;
}

.landing-search-no-results {
  padding: 16px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--flow-text-muted, #64748b);
}

.landing-header.is-searching .landing-nav-links {
  display: none !important;
}

.landing-header.is-searching .landing-header-search {
  display: flex !important;
}

.landing-header.is-searching .landing-icon-link[aria-label="Search"],
.landing-header.is-searching .landing-search-toggle {
  display: none !important;
}

@media (max-width: 991.98px) {
  /* On mobile/tablet collapse drawer, keep the menu links visible and show the search bar below */
  .landing-header.is-searching .landing-nav-links {
    display: flex !important;
  }

  .landing-header.is-searching .landing-header-search {
    order: 2;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .landing-header-search-form {
    max-width: 100%;
  }

  .landing-navbar .navbar-collapse.show .landing-header-search,
  .landing-navbar .navbar-collapse.collapsing .landing-header-search {
    padding: 4px 0;
  }
}

@media (max-width: 991.98px) {
  .landing-navbar .landing-logo-img {
    height: 36px;
  }

  .landing-navbar .navbar-collapse.show,
  .landing-navbar .navbar-collapse.collapsing {
    margin-top: 12px;
    padding: 12px 8px 16px;
  }

  .landing-navbar .landing-nav-links .nav-link {
    font-size: 14px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .landing-navbar .landing-nav-icons {
    justify-content: center;
    width: 100%;
    padding-top: 8px;
  }
}

@media (max-width: 575.98px) {
  .landing-navbar .landing-nav-links .nav-link {
    font-size: 13px;
  }

  .landing-navbar .landing-icon-link {
    font-size: 22px;
  }
}

.landing-hero {
  width: 100%;
  overflow: hidden;
}

.landing-hero-carousel {
  width: 100%;
  overflow: hidden;
}

.landing-hero-carousel .carousel-inner {
  overflow: hidden;
}

.landing-hero-carousel .carousel-item {
  line-height: 0;
}

.landing-hero-slide {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
}

.landing-hero-carousel .carousel-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-hero-carousel .carousel-indicators {
  margin-bottom: 18px;
}

.landing-hero-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  margin: 0 5px;
  background-color: var(--landing-indicator);
  opacity: 1;
}

.landing-hero-carousel .carousel-indicators .active {
  background-color: var(--landing-blue);
}

/* Desktop: fixed frame — small image size diffs must not change carousel height */
@media (min-width: 768px) {
  .landing-hero-carousel .carousel-inner,
  .landing-hero-carousel .carousel-item {
    aspect-ratio: 1933 / 761;
    height: auto;
    min-height: 0;
  }

  .landing-hero-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 767.98px) {
  /* Sticky header on mobile (sits above hero initially, sticks to top when scrolled) */
  .landing-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--landing-white);
    border-bottom: 1px solid var(--landing-border);
  }

  /* Show the full mobile slide — no crop */
  .landing-hero-carousel .carousel-inner,
  .landing-hero-carousel .carousel-item {
    min-height: 0;
    height: auto;
  }

  .landing-hero-slide {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center top;
  }

  /* Dots sit under the mobile slide, not on top of it */
  .landing-hero-carousel .carousel-indicators {
    position: static;
    margin: 12px 0 0;
    padding: 0;
  }

  .landing-hero-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--landing-text-faint);
  }

  .landing-hero-carousel .carousel-indicators .active {
    background-color: var(--landing-blue);
  }
}

/* ==========================================================================
   CHAMPAK SECTION — index.html
   ========================================================================== */

.champak-section-panel {
  background: linear-gradient(90deg, var(--landing-panel-start) 0%, var(--landing-panel-end) 100%);
  border-radius: clamp(16px, 2.5vw, 32px);
  overflow: hidden;
}

.champak-section .text-primary {
  color: var(--landing-blue) !important;
}

.champak-section .btn-primary,
.ppe-section .btn-primary {
  --bs-btn-color: var(--landing-white);
  --bs-btn-bg: var(--landing-blue);
  --bs-btn-border-color: var(--landing-blue);
  --bs-btn-hover-color: var(--landing-white);
  --bs-btn-hover-bg: var(--landing-blue-hover);
  --bs-btn-hover-border-color: var(--landing-blue-hover);
  --bs-btn-active-color: var(--landing-white);
  --bs-btn-active-bg: var(--landing-blue-dark);
  --bs-btn-active-border-color: var(--landing-blue-dark);
  --bs-btn-disabled-color: var(--landing-white);
  --bs-btn-disabled-bg: var(--landing-blue);
  --bs-btn-disabled-border-color: var(--landing-blue);
  color: var(--landing-white);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.champak-section .champak-products-row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  /* One card per line on phones, kept to a compact width and centred instead
     of stretching edge to edge (which made the card and its button huge). */
  grid-template-columns: minmax(0, 230px);
  gap: 8px;
  margin-top: 0;
  justify-content: center;
}

.champak-section .champak-products-row>.champak-product-col {
  width: auto;
  max-width: none;
  padding: 0;
  margin-top: 0;
}

.champak-product-col,
.ppe-product-col {
  position: relative;
}

.champak-product-col::before,
.champak-product-col::after,
.ppe-product-col::before,
.ppe-product-col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  border-radius: 36px;
  pointer-events: none;
  transform: scale(0);
  transition: transform 0.5s ease;
}

.champak-product-col::after,
.ppe-product-col::after {
  border-top: 1px solid var(--landing-blue);
  border-right: 1px solid var(--landing-blue);
  transform-origin: 100% 0%;
}

.champak-product-col::before,
.ppe-product-col::before {
  border-bottom: 1px solid var(--landing-blue);
  border-left: 1px solid var(--landing-blue);
  transform-origin: 0 100%;
}

.champak-product-col:hover::before,
.champak-product-col:hover::after,
.ppe-product-col:hover::before,
.ppe-product-col:hover::after {
  transform: scale(1);
}

.champak-product-col:hover .champak-product-card,
.ppe-product-col:hover .champak-product-card {
  border-color: transparent !important;
}

.champak-product-card {
  width: 100%;
  max-width: 100%;
  border-color: var(--landing-border) !important;
  border-radius: 36px;
  container-type: inline-size;
  container-name: champak-card;
  position: relative;
  transition: border-color 0.25s ease-in-out;
}

/* Very small screens: one product per line. Larger: 2, then 3 per line;
   when the 3 cards don't fit beside the image the image stacks above them. */
@media (min-width: 480px) {
  .champak-section .champak-products-row {
    grid-template-columns: repeat(2, minmax(0, 230px));
  }
}

@media (min-width: 768px) {
  .champak-section .champak-products-row {
    grid-template-columns: repeat(3, minmax(0, 230px));
  }
}

.champak-product-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--landing-white);
}

.champak-product-body {
  padding: 12px 10px 14px;
  text-align: left;
  min-width: 0;
}

.champak-product-sku {
  font-size: 11px;
  font-weight: 500;
  color: var(--landing-blue);
  line-height: 1.3;
}

.champak-product-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--landing-text);
  line-height: 1.25;
}

.champak-product-price {
  line-height: 1.2;
}

.champak-product-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--landing-blue);
}

.champak-product-pack {
  font-size: 11px;
  font-weight: 600;
  color: var(--landing-text-muted);
}

.champak-product-unit {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--landing-text);
  line-height: 1.3;
}

.champak-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.champak-add-cart {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--flow-radius-pill);
  white-space: nowrap;
  color: var(--landing-white) !important;
  background-color: var(--landing-blue) !important;
  border-color: var(--landing-blue) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.champak-add-cart:hover,
.champak-add-cart:focus,
.champak-add-cart:focus-visible {
  color: var(--landing-white) !important;
  background-color: var(--landing-blue-hover) !important;
  border-color: var(--landing-blue-hover) !important;
}

.champak-add-cart:active {
  color: var(--landing-white) !important;
  background-color: var(--landing-blue-dark) !important;
  border-color: var(--landing-blue-dark) !important;
}

/* Visible hover on the quantity +/- buttons (.checkout-qty is the one component
   used on the home page cards, the product page and the checkout order
   summary) and on the Add to cart button (home cards and product page). The
   Add to cart hover above only shifts #0963d7 to #005fd1, which can't be
   seen, and the +/- buttons had no hover at all. Pointer devices only, so a
   tap on a phone doesn't leave a stuck hover. */
.checkout-qty button {
  border-radius: var(--flow-radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.champak-add-cart {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .checkout-qty button:hover,
  .checkout-qty button:focus-visible {
    background-color: var(--flow-blue-btn-hover);
    color: var(--flow-blue);
  }

  .champak-add-cart:not(.is-submitting):not(.is-success):not(:disabled):hover,
  .champak-add-cart:not(.is-submitting):not(.is-success):not(:disabled):focus-visible {
    background-color: #0750b0 !important;
    border-color: #0750b0 !important;
    /* Even glow on all four sides, sized to fit inside a home card's ~11px
       padding (the card clips anything beyond it). */
    box-shadow: 0 0 8px 2px rgba(9, 99, 215, 0.45);
    transform: translateY(-1px);
  }
}

.checkout-qty button:active {
  background-color: var(--flow-blue-soft);
}

.champak-add-cart:not(.is-submitting):not(.is-success):not(:disabled):active {
  transform: translateY(0);
  box-shadow: none;
}

@container champak-card (max-width: 220px) {
  .champak-product-actions {
    gap: 6px;
  }

  .checkout-qty {
    min-width: 64px;
    height: 30px;
    padding: 2px;
  }

  .checkout-qty button {
    font-size: 14px;
    padding: 0 4px;
  }

  .checkout-qty span,
  .checkout-qty input {
    font-size: 13px;
    padding: 0 4px;
  }

  .champak-add-cart {
    height: 30px;
    padding: 0 6px;
    font-size: 12px;
  }
}

.champak-feature-side {
  display: flex;
  align-items: flex-end;
  padding: 0;
  min-width: 0;
}

.champak-feature-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 838 / 574;
  container-type: size;
  container-name: champak-scene;
  overflow: hidden;
}

.champak-section-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
  user-select: none;
}

.champak-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 3.5cqw;
  height: 3.5cqw;
  min-width: 18px;
  min-height: 18px;
  max-width: 28px;
  max-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.champak-hotspot-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7cqw;
  height: 0.7cqw;
  min-width: 3px;
  min-height: 3px;
  max-width: 5px;
  max-height: 5px;
  border-radius: 50%;
  background: var(--landing-hotspot);
  transform: translate(-50%, -50%);
  box-shadow: none;
  transition: box-shadow 0.25s ease;
}

.champak-hotspot.active .champak-hotspot-dot,
.champak-hotspot:hover .champak-hotspot-dot {
  box-shadow: 0 0 2.1cqw 1.2cqw var(--landing-blue-glow);
}

.champak-feature-callout {
  position: absolute;
  right: 1%;
  top: 50%;
  transform: translateY(-50%);
  width: 33%;
  max-width: none;
  min-width: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.champak-feature-svg {
  display: block;
  width: auto;
  height: 90px;
  max-width: none;
  margin: 0 auto;
}

.champak-feature-copy {
  margin-top: 10px;
  width: 100%;
}

.champak-feature-title {
  margin: 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--landing-text-feature);
}

.champak-feature-desc {
  font-size: 9px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--landing-text-feature);
}

@media (max-width: 991.98px) {
  .champak-feature-side {
    border-top: 0;
  }

  .champak-feature-callout {
    right: 2%;
    width: 30%;
  }
}

@media (max-width: 767.98px) {
  .champak-section-panel {
    border-radius: 16px;
  }

  .champak-feature-callout {
    right: 2%;
    width: 32%;
  }
}

@media (max-width: 575.98px) {
  .champak-feature-callout {
    right: 1%;
    width: 36%;
  }

  .champak-feature-svg {
    height: 72px;
  }
}

/* ==========================================================================
   PPE SECTION — index.html
   ========================================================================== */

.ppe-heading-line {
  display: block;
  height: 2px;
  background: var(--landing-blue-heading);
  border-radius: 2px;
}

.ppe-heading-line--start {
  flex: 0 0 auto;
  width: 56px;
}

.ppe-heading-text {
  flex: 0 0 auto;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-blue-heading);
  line-height: 1;
}

.ppe-section-panel {
  background: linear-gradient(90deg, var(--landing-panel-start) 0%, var(--landing-panel-end) 100%);
  border-radius: clamp(16px, 2.5vw, 32px);
}

.ppe-products-row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-top: 0;
  gap: 8px;
}

.ppe-products-row>.ppe-product-col {
  flex: 0 0 auto;
  width: calc((100% - 8px) / 2);
  max-width: calc((100% - 8px) / 2);
  padding: 0;
  margin-top: 0;
}

@media (min-width: 768px) {
  .ppe-heading-line {
    height: 4px;
  }

  .ppe-products-row>.ppe-product-col {
    width: 230px;
    max-width: 230px;
  }
}

/* ==========================================================================
   MEDICAL PPE SECTION — index.html
   ========================================================================== */

.medical-ppe-section {
  display: flex;
  align-items: center;
  background-color: var(--landing-white);
  background-image: url("../img/madical-ppe.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  min-height: clamp(300px, 36vw, 620px);
}

.medical-ppe-mobile-media {
  display: none;
}

.medical-ppe-section .container {
  display: flex;
  align-items: center;
  min-height: inherit;
}

.medical-ppe-row {
  width: 100%;
  min-height: clamp(300px, 36vw, 620px);
}

.medical-ppe-content {
  color: var(--landing-ink);
}

.medical-ppe-title {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.7vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--landing-ink);
}

.medical-ppe-tagline {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-ink);
  line-height: 1.3;
}

.medical-ppe-copy {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--landing-ink);
  text-align: justify;
}

@media (max-width: 991.98px) {
  .medical-ppe-section {
    position: relative;
    display: block;
    background-image: none;
    min-height: 0;
  }

  .medical-ppe-mobile-media {
    display: block;
    width: 100%;
    line-height: 0;
  }

  .medical-ppe-mobile-media img {
    display: block;
    width: 100%;
    height: auto;
  }

  .medical-ppe-section .container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .medical-ppe-row {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
  }

  .medical-ppe-content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .medical-ppe-tagline,
  .medical-ppe-title {
    margin: 0;
  }

  .medical-ppe-tagline {
    font-size: 16px;
  }

  .medical-ppe-copy {
    line-height: 1.2;
  }
}

/* ==========================================================================
   WHO WE SERVICE SECTION — index.html
   ========================================================================== */

.who-we-service-section {
  position: relative;
  background-color: var(--landing-white);
  padding: 40px 0;
  overflow: hidden;
  min-height: clamp(420px, 42vw, 560px);
}

.who-we-service-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  aspect-ratio: 1127 / 883;
  background-image: url("../img/service-bg.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
}

.who-we-service-row {
  min-height: clamp(380px, 38vw, 520px);
}

.who-we-service-content {
  position: relative;
  z-index: 1;
  padding-right: clamp(12px, 2vw, 32px);
}

.who-we-service-title {
  margin: 0 0 14px;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--landing-ink);
}

.who-we-service-heading-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 130px;
  margin-bottom: 20px;
}

.who-we-service-heading-line::before {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  background: var(--landing-blue);
}

.who-we-service-heading-line::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--landing-blue);
}

.who-we-service-subtitle {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--landing-ink);
}

.who-we-service-desc {
  margin: 0 0 36px;
  max-width: 400px;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--landing-text-muted);
}

.who-we-service-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.who-we-service-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.who-we-service-item+.who-we-service-item {
  border-left: 1px solid var(--landing-blue-line);
}

.who-we-service-icon {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.who-we-service-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--landing-ink);
}

@media (max-width: 991.98px) {
  .who-we-service-section {
    padding: 28px 0 36px;
    min-height: 0;
  }

  .who-we-service-section::before {
    width: 100%;
    height: 500px;
    bottom: auto;
    aspect-ratio: auto;
    background-position: right top;
    background-size: contain;
  }

  .who-we-service-row {
    min-height: 0;
  }

  .who-we-service-content {
    padding-top: 500px;
    padding-right: 0;
  }

  .who-we-service-title {
    font-size: clamp(32px, 7vw, 44px);
  }

  .who-we-service-desc {
    max-width: none;
    margin-bottom: 28px;
  }

  .who-we-service-list {
    flex-wrap: wrap;
    row-gap: 20px;
  }

  .who-we-service-item {
    flex: 0 0 33.333%;
    padding: 0;
  }

  .who-we-service-item:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .who-we-service-section::before {
    height: 280px;
  }

  .who-we-service-content {
    padding-top: 280px;
  }
}

@media (max-width: 575.98px) {
  .who-we-service-title {
    font-size: clamp(26px, 8vw, 32px);
  }

  .who-we-service-item {
    flex: 0 0 50%;
  }

  .who-we-service-item:nth-child(3n + 1) {
    border-left: 1px solid var(--landing-blue-line);
  }

  .who-we-service-item:nth-child(2n + 1) {
    border-left: 0;
  }

  .who-we-service-label {
    font-size: 9px;
  }
}

/* ==========================================================================
   STATS SECTION — index.html
   ========================================================================== */

.stats-section {
  background: var(--landing-white);
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--landing-ink);
}

.stats-icon {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.stats-number {
  font-size: clamp(26px, 2.35vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--landing-ink);
}

.stats-label {
  font-size: clamp(13px, 1.05vw, 14px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--landing-ink);
}

/* ==========================================================================
   DEDICATION SECTION — index.html
   ========================================================================== */

.dedication-section {
  background: var(--landing-white);
}

.dedication-content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.dedication-icon {
  display: block;
  width: 125px;
  height: 125px;
  margin: 0 auto 20px;
  object-fit: contain;
}

.dedication-title {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--landing-ink);
}

.dedication-copy {
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--landing-stats-ink);
  text-align: center;
}

@media (max-width: 767.98px) {
  .dedication-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
  }
}

@media (min-width: 768px) {
  .dedication-content {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ==========================================================================
   CONTACT SECTION — index.html
   ========================================================================== */

.contact-section {
  background: linear-gradient(to top, var(--landing-panel-tint) 0%, var(--landing-panel-soft) 100%);
}

.contact-card {
  background: var(--landing-white);
  border-radius: 24px;
  padding: 28px 24px;
}

.contact-card-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  color: var(--landing-ink);
  line-height: 1.2;
}

.contact-accent-line {
  display: block;
  width: 42px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--landing-accent-red);
}

.contact-card-intro {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--landing-ink);
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 32px 28px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--landing-panel-tint);
  color: var(--landing-ink);
}

.contact-info-icon i {
  color: var(--landing-ink);
  font-size: 38px;
  line-height: 1;
}

.contact-info-item:nth-child(3) .contact-info-icon i {
  font-size: 30px;
}

.contact-info-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-ink);
  line-height: 1.2;
}

.contact-info-body .contact-accent-line {
  margin-bottom: 10px;
}

.contact-info-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--landing-stats-ink);
}

.contact-info-text a {
  color: inherit;
  text-decoration: none;
}

.contact-info-text a:hover {
  color: var(--landing-blue);
}

@media (min-width: 992px) {
  .contact-card {
    padding: 36px 32px;
  }

  .contact-info-card {
    padding: 40px 34px;
  }
}

/* Contact form validation styling */
.contact-form .checkout-field {
  position: relative;
  /* Subject/Name/Email/Phone's pill wrapper and Message's textarea wrapper
     come from different shared classes that end up with different padding
     at some screen widths (responsive rules elsewhere touch one but not the
     other). Pin both here so every field's placeholder lines up the same
     way regardless of screen size: same left edge, and (for Message, whose
     top padding was 0px on a phone but 8px on desktop) a small, constant
     gap from the top border instead of one that changes with the viewport. */
  padding: 8px 10px !important;
}

/* Same fix as above, for the Message textarea's own left/top padding -- it
   was sitting well right of and below Subject/Email's placeholder because it
   still had its own (and, at some widths, Bootstrap's default) padding on
   top of the wrapper's. Only the position changes; Message keeps its own
   top-aligned (not vertically centered) placeholder, just closer to the
   wrapper's own top-left corner now. */
.contact-form .checkout-field--textarea textarea {
  padding-left: 0 !important;
  padding-top: 0 !important;
}

/* Subject/Name/Email/Phone: text sits vertically centered in the pill, and
   left-aligned horizontally (the normal reading direction) -- explicit here
   (and on the placeholder specifically, since some browsers can otherwise
   render placeholder text differently from typed text) so it doesn't depend
   on inherited flex/text-align defaults. */
.contact-form .checkout-field-grid .checkout-field input {
  text-align: left !important;
  /* Bootstrap's .form-control padding (12px) was stacking on top of this
     pill's own 10px side padding, pushing the text ~13px in from the edge
     instead of sitting right against it. The wrapper's padding is enough on
     its own. */
  padding-left: 0 !important;
}

.contact-form .checkout-field-grid .checkout-field input::placeholder {
  text-align: left !important;
}

.contact-form .checkout-field .form-group {
  width: 100%;
  margin-bottom: 0;
}

/* Grid-to-Message stays at 8px -- Bootstrap's gap-2 on the form already
   gives that, so nothing to override here. */

.contact-form .checkout-field-grid {
  align-items: start;
  /* Subject/Name row to Email/Phone row: 12px on desktop's two-column
     layout. On a phone (single column, see the 640px override below) these
     four fields end up stacked one per row, and that same row-gap applies
     between every one of them -- so it's set to 8px there instead, matching
     the grid-to-Message gap throughout. */
  row-gap: 12px;
}

@media (max-width: 640px) {
  .contact-form .checkout-field-grid {
    row-gap: 8px;
  }
}

.contact-form .checkout-field:has(.is-invalid) {
  border-color: transparent;
  outline: 1px solid var(--flow-error-line);
  outline-offset: -1px;
  background-color: #fdeced;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-form .form-control.is-invalid,
.contact-form .form-control.is-valid {
  background-image: none;
  padding-right: 10px;
}

/* Only take up space (and push the field taller) once there's actually a
   message to show -- otherwise this empty placeholder's own margin was
   adding a few px below the input that the field's vertical centering had
   no way to account for, nudging the placeholder text above true-center. */
.contact-form .invalid-feedback:empty {
  display: none;
  margin: 0;
}

.contact-form .invalid-feedback {
  display: block;
  margin: 4px 2px 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--landing-accent-red);
  font-weight: 500;
}

.contact-form .checkout-field-grid .checkout-field:has(.invalid-feedback:not(:empty)) {
  height: auto;
  border-radius: 16px;
  padding: 8px 16px 10px;
}

.contact-form .checkout-field--textarea:has(.invalid-feedback:not(:empty)) {
  padding-bottom: 10px;
}

/* Mail Addresses page, the checkout page's address form (add or edit), the
   checkout page's Contact Information step, and the sign-in page's
   Individual form: field-level validation errors shown under their own
   input, the same red text treatment as the contact form, instead of a
   single message banner above the whole form. Scoped to these shared
   container classes so all four forms get it. */
.checkout-address-form-panel .checkout-field:has(.is-invalid),
.checkout-contact-body .checkout-field:has(.is-invalid),
.auth-form-individual .checkout-field:has(.is-invalid) {
  border-color: transparent;
  outline: 1px solid var(--flow-error-line);
  outline-offset: -1px;
  background-color: #fdeced;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* On the checkout page, editing a saved address gives every field in the
   panel a blue outline (.is-editing, see below) -- that rule is more
   specific than the one above, so it would otherwise win over the red
   invalid-field border. Match its specificity to let red take priority. */
.checkout-step--address.is-editing .checkout-address-form-panel .checkout-field:has(.is-invalid) {
  border-color: transparent;
  outline: 1px solid var(--flow-error-line);
  outline-offset: -1px;
}

.checkout-address-form-panel .invalid-feedback:empty,
.checkout-contact-body .invalid-feedback:empty,
.auth-form-individual .invalid-feedback:empty {
  display: none;
  margin: 0;
}

.checkout-address-form-panel .invalid-feedback,
.checkout-contact-body .invalid-feedback,
.auth-form-individual .invalid-feedback {
  display: block;
  margin: 4px 2px 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--landing-accent-red);
  font-weight: 500;
  /* the sign-in card is centred; error lines start from the same point instead */
  text-align: left;
}

.checkout-address-form-panel .checkout-field:has(.invalid-feedback:not(:empty)),
.checkout-contact-body .checkout-field:has(.invalid-feedback:not(:empty)),
.auth-form-individual .checkout-field:has(.invalid-feedback:not(:empty)) {
  height: auto;
  border-radius: 16px;
  padding: 8px 16px 10px;
}

/* Neutralise the thick Bootstrap focus glow on these pill-shaped fields —
   the pill border already communicates focus/error, a big ring looks broken here. */
.contact-form .checkout-field input:focus,
.contact-form .checkout-field textarea:focus,
.contact-form .checkout-field select:focus {
  box-shadow: none;
  outline: none;
}

/* Neutralise the browser's autofill tint so autofilled fields match the rest of the form. */
.contact-form .checkout-field input:-webkit-autofill,
.contact-form .checkout-field input:-webkit-autofill:hover,
.contact-form .checkout-field input:-webkit-autofill:focus,
.contact-form .checkout-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--flow-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Sign-in page, Individual form: reuses the .checkout-field component so a
   field with a validation error looks like the checkout page's Contact step
   (label + left-aligned value + red border + error text below). With no
   error, though, it keeps this page's original look -- blue pill, centered
   placeholder, no label -- so the two states are set up separately below. */
.auth-form-individual .checkout-field {
  min-height: 46px;
  padding: 0;
  margin-bottom: 12px;
  border: 2.2px solid var(--flow-blue);
  border-radius: var(--flow-radius-input);
  /* The card around this form is Bootstrap's .text-center (!important), which
     the label and error text would otherwise inherit -- left-align them
     explicitly (the input centers its own text, below). */
  text-align: left;
}

.auth-form-individual .checkout-field label {
  display: none;
}

.auth-form-individual .checkout-field input:not([type="checkbox"]) {
  height: auto;
  min-height: 0;
  /* !important: .sign-in-page .auth-form-individual input:last-of-type (more
     specific) otherwise gives each input a 16px bottom margin inside its box. */
  margin-bottom: 0 !important;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

/* Chrome paints autofilled inputs with its own light-blue background, which
   shows up as a band behind the text only (the input is shorter than the
   pill around it). Repaint it white for every .checkout-field pill -- login,
   checkout contact/address, Mail Addresses -- not just the contact form
   (which has its own copy of this above). */
.checkout-field input:-webkit-autofill,
.checkout-field input:-webkit-autofill:hover,
.checkout-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--flow-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Error state: no label -- just the same centered placeholder with the red
   border, and the error message centered underneath it. Same radius as the
   normal state so the pill doesn't change shape when it turns red. */
.auth-form-individual .checkout-field:has(.invalid-feedback:not(:empty)) {
  padding: 8px 0 10px;
  border-radius: var(--flow-radius-input);
}

.auth-form-individual .invalid-feedback {
  margin: 4px 0 0;
  /* every line of an error message starts from the same point (left-aligned, inset from the border) */
  padding: 0 16px;
  text-align: left;
}

/* Toastr notifications: Bootstrap 5 ships its own `.toast` component that shares
   toastr's class names, and its plain `.toast{}` background/opacity rules load
   after toastr.css, so they win the cascade and paint every toast blank. Re-assert
   the look with an ID-anchored selector so it always wins regardless of load order. */
#toast-container > .toast {
  position: relative;
  opacity: 1;
  display: block;
  width: auto;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background-image: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

#toast-container > .toast-success {
  background-color: #1e8e3e;
}

#toast-container > .toast-error {
  background-color: var(--landing-accent-red, #e11d2e);
}

#toast-container > .toast-info {
  background-color: #2b6cb0;
}

#toast-container > .toast-warning {
  background-color: #b7791f;
}

#toast-container .toast-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
  color: #fff;
}

#toast-container .toast-message {
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
}

@media (max-width: 480px) {
  #toast-container.toast-top-right,
  #toast-container.toast-top-left,
  #toast-container.toast-bottom-right,
  #toast-container.toast-bottom-left {
    left: 12px;
    right: 12px;
  }

  #toast-container > .toast {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Product Details Page Styles
   ========================================================================== */

.product-details-page {
  background-color: var(--flow-white);
  color: var(--flow-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.product-details-page .text-primary,
.product-details-page #product-detail-price,
.product-details-page .product-feature-list i {
  color: var(--flow-blue) !important;
}

.product-details-page .text-dark,
.product-details-page #product-detail-title,
.product-details-page #product-detail-pack {
  color: var(--flow-text-dark) !important;
}

.product-details-page .text-muted,
.product-details-page #product-detail-sku,
.product-details-page #product-detail-unit {
  color: var(--flow-text-muted) !important;
}

.product-details-page .bg-light {
  background-color: var(--flow-surface-muted) !important;
}

.product-details-page .border {
  border-color: var(--flow-border) !important;
}

.product-details-page .cartSections {
  flex: 1 0 auto;
  padding: 60px 0 90px;
}

.product-details-page .footer-wrapper {
  margin-top: auto;
}

.imageshwingbox-productpage {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.more-images-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.more-images-box-inner {
  width: 70px;
  height: 290px;
  overflow: hidden;
  position: relative;
}

.more-images-box .scroll-button {
  width: 100%;
  cursor: pointer;
  background-color: var(--flow-white);
  color: var(--flow-text-muted);
  border: 1.5px solid var(--flow-border);
  padding: 4px 0;
  font-size: 12px;
  margin: 6px 0;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.more-images-box .scroll-button:hover {
  background-color: var(--flow-white);
  color: var(--flow-blue);
  border-color: var(--flow-blue);
}

.more-images-box .scroll-button:focus {
  outline: none;
}

.more-images-box ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
}

.more-images-box ul li {
  width: 60px;
  height: 60px;
  margin: 6px auto;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.more-images-box ul li:first-child {
  margin-top: 0;
}

.more-images-box ul li:last-child {
  margin-bottom: 0;
}

.more-images-box ul li img {
  border: 2px solid transparent;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 2px;
  background: var(--flow-white);
  transition: border-color 0.2s ease;
}

.more-images-box ul li.is-active img,
.more-images-box ul li:hover img {
  border-color: var(--flow-blue);
}

.image-box-product {
  position: relative;
  background: var(--flow-white);
  border: 1px solid var(--flow-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box-product .mian-zoom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 8px;
  cursor: zoom-in;
}

.image-box-product .my-foto {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1299.98px) {
  .imageshwingbox-productpage {
    flex-direction: column-reverse;
    gap: 16px;
    align-items: center;
  }

  .more-images-box {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .more-images-box .scroll-button {
    width: 32px;
    height: 60px;
    margin: 0;
  }

  .more-images-box-inner {
    width: 260px;
    height: 64px;
  }

  .more-images-box ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: 100%;
    top: 0;
    left: 0;
  }

  .more-images-box ul li {
    margin: 0 4px !important;
    flex-shrink: 0;
  }
}

@media (max-width: 991.98px) {
  .product-details-page .cartSections {
    padding: 30px 0 60px;
  }
}

@media (max-width: 575.98px) {
  .image-box-product {
    padding: 10px;
  }
}