/**
 * Kit selection v2 (/order/kits-v2) — scoped under .kit-v2 so live /order/kits is untouched.
 * Phase 1 UI only.
 */

.kit-v2 {
  --kit-v2-bg: #e8f4f8;
  --kit-v2-card: #ffffff;
  --kit-v2-navy: var(--sc-navy, #052f56);
  /* Brand light-blue for links, matching the Ala Carte checkout (was an
     off-brand #1a6bb5). */
  --kit-v2-blue: var(--sc-light-blue, #1ab8e9);
  --kit-v2-border: #d5e3ec;
  --kit-v2-border-soft: #e6eef3;
  --kit-v2-muted: #5a6b7a;
  /* Idle tile prices — Circular Bold, dark charcoal (comp); titles stay #666 Lora. */
  --kit-v2-card-price: #333333;
  --kit-v2-cta: var(--sc-red, #c61c40);
  --kit-v2-cta-hover: #a81836;
  --kit-v2-radius: 12px;
  --kit-v2-radius-sm: 8px;
  --kit-v2-shadow: 0 4px 24px rgba(5, 47, 86, 0.08);
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  color: var(--kit-v2-navy);
}

.kit-v2__page {
  background: var(--kit-v2-bg);
  padding: 28px 16px 56px;
  min-height: 60vh;
}
/* Checkout uses the same pale-blue as the Ala Carte checkout (--sc-pale-blue,
   #f0fafc) rather than the slightly deeper kit entry blue (#e8f4f8). */
.kit-v2--checkout .kit-v2__page {
  background: var(--sc-pale-blue);
}

.kit-v2__container {
  max-width: 1120px;
  margin: 0 auto;
}

/* —— Progress steps (below intro; pill style from design) —— */
.kit-v2__steps {
  margin: 0 0 32px;
}

.kit-v2__steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  width: 100%;
}

/* Not-active pill matches /quick-order's `.qo-step`: neutral grey border and
   muted text on white, and no shadow. It used to carry a blue-grey border,
   a lighter blue-grey text and a soft drop shadow, which read as a different
   component next to the other wizard. */
.kit-v2__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--sc-border-soft);
  border-radius: 999px;
  /* Not-reached steps are grey; active and completed override to navy. */
  color: var(--sc-text-muted);
  box-shadow: none;
}

.kit-v2__step--active {
  background: #fff;
  border-color: var(--sc-navy);
  color: var(--kit-v2-navy);
  box-shadow: none;
}

/* A completed step is styled like one not reached yet -- only the step you
   are on is marked. Same call as `.qo-step-done` on /quick-order, so the two
   wizards behave alike; it previously kept navy text and a navy badge, which
   made two pills look current at once. */
.kit-v2__step--completed {
  background: #fff;
  border-color: var(--sc-border-soft);
  color: var(--kit-v2-navy);
}

/* Kit Selection pill on Checkout links back to order/kits. The link fills the pill
   (negative margins undo the li padding) so the whole pill is the target. */
.kit-v2__step-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: -10px -12px;
  padding: 10px 12px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.kit-v2__step--link {
  cursor: pointer;
  transition: border-color var(--sc-transition, .25s ease), color var(--sc-transition, .25s ease);
}

.kit-v2__step--link:hover,
.kit-v2__step--link:focus-within {
  border-color: var(--sc-light-blue);
  color: var(--kit-v2-navy);
}

.kit-v2__step-link:hover,
.kit-v2__step-link:focus-visible {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.kit-v2__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--sc-border-soft);
  color: var(--sc-navy);
  flex-shrink: 0;
}

.kit-v2__step--active .kit-v2__step-num {
  background: var(--kit-v2-navy);
  color: #fff;
}

.kit-v2__step-label {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— Intro —— */
.kit-v2__intro {
  text-align: left;
  margin: 0 0 20px;
  max-width: none;
}

/* No font-size: sc-components.css sets the site-wide h1 curve. The local
   clamp topped out at 2.35rem (37.6px), which is why this title came up
   short of the 42px every other page shows. */
.kit-v2__heading {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  line-height: 1.25;
  color: var(--kit-v2-navy);
  margin: 0 0 12px;
}

.kit-v2__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  /* Standard body grey (#666), same as the Ala Carte checkout lede, instead of
     the blue-grey --kit-v2-muted, so the two sub-titles match. */
  color: var(--sc-text);
  font-weight: 400;
}

.kit-v2__lede-link {
  color: var(--kit-v2-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kit-v2__lede-link:hover {
  color: var(--kit-v2-navy);
}

/* —— Main card —— */
.kit-v2__main-card {
  background: var(--kit-v2-card);
  border-radius: var(--kit-v2-radius);
  box-shadow: var(--kit-v2-shadow);
  border: 1px solid rgba(5, 47, 86, 0.06);
  padding: 28px;
}

.kit-v2__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: stretch;
}

.kit-v2__col--config {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* —— Gallery —— */
.kit-v2__gallery-main {
  position: relative;
  background: #f4f8fb;
  border-radius: var(--kit-v2-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kit-v2__gallery-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.kit-v2__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kit-v2-navy);
  box-shadow: 0 2px 8px rgba(5, 47, 86, 0.15);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  z-index: 2;
}

.kit-v2__gallery-nav:hover {
  background: #fff;
  color: var(--kit-v2-blue);
}

.kit-v2__gallery-nav--prev { left: 10px; }
.kit-v2__gallery-nav--next { right: 10px; }

.kit-v2__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.kit-v2__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f8fb;
  cursor: pointer;
}

.kit-v2__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kit-v2__thumb.is-active,
.kit-v2__thumb:hover {
  border-color: var(--kit-v2-blue);
}

/* —— Product header —— */
.kit-v2__product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.kit-v2__product-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0;
  color: var(--kit-v2-navy);
}

.kit-v2__product-price {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--kit-v2-navy);
  white-space: nowrap;
}

/* —— Size cards —— */
.kit-v2__sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.kit-v2__size-card {
  text-align: left;
  background: #eef1f4;
  border: 1.5px solid transparent;
  border-radius: var(--kit-v2-radius-sm);
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  color: inherit;
  font: inherit;
}

.kit-v2__size-card:hover {
  border-color: rgba(5, 47, 86, 0.25);
}

/* Site-wide :focus-visible is brand red (sc-components); selection tiles use navy. */
.kit-v2__size-card:focus {
  outline: none;
}

.kit-v2__size-card:focus-visible {
  outline: 2px solid var(--kit-v2-navy);
  outline-offset: 2px;
}

.kit-v2__size-card.is-selected {
  background: #fff;
  border-color: var(--kit-v2-navy);
  box-shadow: none;
}

.kit-v2__size-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

/* `capitalize`, because the kit names arrive lower-case from the catalog
   ("moments", "decades") and the markup has no say in it. */
.kit-v2__size-name {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--kit-v2-navy);
  text-transform: capitalize;
}

.kit-v2__size-price {
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--kit-v2-card-price);
  white-space: nowrap;
}

.kit-v2__size-card.is-selected .kit-v2__size-price {
  font-weight: 700;
  color: var(--kit-v2-navy);
}

.kit-v2__size-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kit-v2__size-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kit-v2-muted);
}

.kit-v2__size-dims {
  font-size: 0.75rem;
  color: var(--kit-v2-muted);
  line-height: 1.35;
}

/* —— Delivery —— */
.kit-v2__delivery {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 20px;
}

.kit-v2__delivery-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.kit-v2__delivery-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.125rem;
  margin: 0;
  color: var(--kit-v2-navy);
}

.kit-v2__billing-toggle {
  display: inline-flex;
  border: 1px solid var(--kit-v2-navy);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.kit-v2__billing-btn {
  border: none;
  background: transparent;
  color: var(--kit-v2-navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 8px 18px;
  min-width: 5.25rem;
  cursor: pointer;
  line-height: 1.35;
}

.kit-v2__billing-btn.is-active {
  background: var(--kit-v2-navy);
  color: #fff;
}

.kit-v2__billing-btn:not(.is-active):hover {
  background: rgba(5, 47, 86, 0.06);
}

.kit-v2__delivery-options {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* Override global `form { padding: 20px }` in style.css — keeps CTA inside main card */
.kit-v2 .kit-v2__store-form {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Full width of delivery block — error + CTA align with option cards */
.kit-v2__delivery-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding-top: 4px;
}

.kit-v2__delivery-actions .kit-v2__delivery-msg {
  margin: 0;
  text-align: right;
}

.kit-v2__cta-row--delivery {
  margin-top: 0;
  justify-content: flex-end;
  width: 100%;
}

/* Basic Cloud + Flash Drive — 1×2 columns per design */
.kit-v2__delivery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.kit-v2__delivery-row .kit-v2__delivery-card {
  height: 100%;
  min-width: 0;
  padding: 12px 14px;
}

/* White card with a soft grey border, like the Ala Carte delivery cards
   (.qo-card); selection turns the border navy with a matching ring (below). */
.kit-v2__delivery-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kit-v2__delivery-card:hover {
  border-color: rgba(5, 47, 86, 0.25);
}

.kit-v2__delivery-card:focus {
  outline: none;
}

.kit-v2__delivery-card:focus-visible {
  outline: 2px solid var(--kit-v2-navy);
  outline-offset: 2px;
}

.kit-v2__delivery-card.is-selected {
  background: #fff;
  border-color: var(--kit-v2-navy);
  box-shadow: 0 0 0 1px var(--kit-v2-navy);
}

/* "Selected" pill on the chosen card, matching the Ala Carte delivery card
   (#quick-order .qo-del.qo-selected::before). */
.kit-v2__delivery-card.is-selected::before {
  content: "Selected";
  position: absolute;
  top: -11px;
  right: 16px;
  z-index: 2;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--sc-red);
  color: #fff;
  font-size: 12px;
  font-weight: var(--sc-weight-semi);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.kit-v2__delivery-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.kit-v2__delivery-card.is-disabled:hover {
  border-color: transparent;
}

/* Parity with valuekit.blade.php `.active-badge` on /order/kits */
.kit-v2__delivery-active-badge {
  display: inline-block;
  background: var(--sc-text-muted, #5a6b7a);
  color: #fff;
  font-size: var(--sc-small, 0.8125rem);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}

/* /order/kits `.delivery-title` + row `.mt-2` before price or ACTIVE */
.kit-v2__delivery-status-row {
  margin-top: 0.5rem;
}

.kit-v2__billing-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kit-v2__delivery-locked-note {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--kit-v2-muted);
}

/* Heading + price on one horizontal row (price sits against the heading) */
.kit-v2__delivery-card-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
}

.kit-v2__delivery-card-info {
  flex: 1 1 auto;
  min-width: 0;
}

.kit-v2__delivery-brand {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.kit-v2__delivery-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

.kit-v2__delivery-logo--sc {
  height: 18px;
  max-width: 88px;
}

.kit-v2__delivery-by {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--kit-v2-muted);
  line-height: 1;
  white-space: nowrap;
  margin: 0 0.2em 0 0.35em;
  padding: 0;
}

/* Kinoke premium card — brand row, then title aligned with wordmark */
.kit-v2__kinoke {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.kit-v2__kinoke-left {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-brand {
  gap: 0;
  max-width: 100%;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-brand > .kit-v2__delivery-logo:first-child {
  margin-right: 0.5rem;
}

/* Tight wordmark + by ScanCafe (no flex gap between images and “by”) */
.kit-v2__delivery-card--kinoke .kit-v2__delivery-logo {
  height: 24px;
  max-width: none;
  vertical-align: middle;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-logo--sc {
  height: 16px;
  margin-left: 0.15em;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-by {
  margin-left: 0.15em;
  margin-right: 0.1em;
}

.kit-v2__kinoke-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

.kit-v2__kinoke-title {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--kit-v2-muted);
  padding: 0;
  margin: 0;
  text-align: left;
}

.kit-v2__kinoke-renews {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--kit-v2-muted);
}

.kit-v2__delivery-card--kinoke {
  padding: 16px 18px;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-card-price {
  padding-top: 0;
  align-self: center;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-amount--inline .kit-v2__delivery-period {
  display: inline;
  margin-top: 0;
  margin-left: 0.25em;
  font-weight: 700;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.kit-v2__delivery-card--kinoke .kit-v2__delivery-trial {
  color: #8a97a5;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.kit-v2__delivery-name {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--sc-text, #666666);
  margin: 0;
}

/* Basic Cloud: two-line heading with price to the right */
.kit-v2__delivery-name--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 7.25rem;
}

.kit-v2__delivery-name-line {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--sc-text, #666666);
}

/* Secondary row: Flash Drive + Basic Cloud share one title size */
.kit-v2__delivery-card--compact .kit-v2__delivery-name,
.kit-v2__delivery-card--compact .kit-v2__delivery-name-line {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}

.kit-v2__delivery-desc {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--kit-v2-muted);
}

.kit-v2__delivery-card-price {
  text-align: right;
  flex: 0 0 auto;
  margin-left: auto;
}

.kit-v2__delivery-amount {
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--kit-v2-card-price);
  white-space: nowrap;
}

/* Selected delivery — titles and price read in navy like the design comp. */
.kit-v2__delivery-card.is-selected .kit-v2__delivery-name,
.kit-v2__delivery-card.is-selected .kit-v2__delivery-name-line,
.kit-v2__delivery-card.is-selected .kit-v2__delivery-amount,
.kit-v2__delivery-card.is-selected .kit-v2__delivery-period {
  color: var(--kit-v2-navy);
}

.kit-v2__delivery-card.is-selected .kit-v2__delivery-amount,
.kit-v2__delivery-card.is-selected .kit-v2__delivery-period {
  font-weight: 700;
}

.kit-v2__delivery-card:not(.is-selected) .kit-v2__delivery-period {
  color: var(--sc-text, #666666);
  font-weight: 400;
}

.kit-v2__delivery-period {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1px;
}

.kit-v2__delivery-trial {
  margin-top: 2px;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--kit-v2-blue);
}

.kit-v2__qty {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
}

.kit-v2__qty-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kit-v2-muted);
  margin: 0;
  white-space: nowrap;
}

.kit-v2__qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kit-v2-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.kit-v2__qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f4f8fb;
  color: var(--kit-v2-navy);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.kit-v2__qty-btn:hover {
  background: #e8f0f6;
}

.kit-v2__qty-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--kit-v2-border);
  border-right: 1px solid var(--kit-v2-border);
  text-align: center;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kit-v2-navy);
  -moz-appearance: textfield;
}

.kit-v2__qty-input::-webkit-outer-spin-button,
.kit-v2__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kit-v2__qty-input--plain {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 3.125rem;
  min-width: 3.125rem;
  max-width: 3.125rem;
  height: 2rem;
  padding: 4px 6px;
  border: 1px solid var(--kit-v2-border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.kit-v2__qty-input--plain:focus-visible {
  outline: 2px solid var(--kit-v2-blue);
  outline-offset: 0;
}

/* —— CTA ——
   Geometry matches header Start Here (.sc-btn): padding-based, --sc-radius,
   1px transparent border reserved for hover. Colors stay kit-v2 (red CTA). */
.kit-v2__cta-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.kit-v2__form-error {
  margin: 12px 0 0;
  color: #b42318;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: right;
}

.kit-v2__cta,
a.kit-v2__cta,
button.kit-v2__cta {
  appearance: none;
  display: inline-block;
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  /* Match the Ala Carte pay button's shape: 18px, 8px radius, full width.
     Colour stays red per the product decision. */
  font-size: 18px;
  font-weight: var(--sc-weight-semi, 600);
  line-height: 1.25;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--kit-v2-cta);
  border-color: var(--kit-v2-cta);
  color: #fff;
  cursor: pointer;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kit-v2__cta:hover,
.kit-v2__cta:focus,
a.kit-v2__cta:hover,
a.kit-v2__cta:focus {
  background: var(--kit-v2-cta-hover);
  border-color: var(--kit-v2-cta-hover);
  color: #fff;
  text-decoration: none;
}

.kit-v2__cta:focus-visible {
  outline: 2px solid var(--kit-v2-navy);
  outline-offset: 2px;
}

/* —— Support card —— */
/* Matches `.qo-help` on /quick-order: a flat white panel, no border and no
   shadow, 24px padding and gap, 32px clear of the content above. The card
   treatment this used to have (hairline border + shadow, 22/28 padding) was
   the main thing setting the two pages apart. */
.kit-v2__support {
  margin-top: var(--sc-space-6);
  background: #fff;
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-lg);
  padding: var(--sc-space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-5);
  text-align: center;
}

/* Collapses to one column at the same breakpoint as `.qo-help`. It used to
   stack at 991.98px and shrink its padding, so the two pages parted company
   on tablets even when they matched on desktop. */
@media (max-width: 575px) {
  .kit-v2__support {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kit-v2__support-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: var(--sc-h5);
  margin: 0 0 4px;
  color: var(--sc-navy);
}

/* Titles in --sc-navy, body in --sc-text (#666666), i.e. the shared
   paragraph colour rather than this page's own muted grey or the navy that
   the titles use. */
/* 12px to match .qo-help p. NOTE: this is the one place on the page that
   does not follow the "paragraphs are 16px" rule -- it follows /quick-order
   instead, which is what this block was asked to match. */
.kit-v2__support-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sc-text);
}

/* Navy at rest like the text around it; the underline is what marks it as a
   link. Rest and hover are swapped rather than dropped, so hovering still
   changes something -- navy on navy would have been a dead state. */
.kit-v2__support-link {
  color: var(--kit-v2-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kit-v2__support-link:hover {
  color: var(--kit-v2-blue);
}

.kit-v2__support-sep {
  margin: 0 6px;
  color: #b0bec8;
}

/* Both columns centre, so the two help blocks read as a pair rather than
   as text pushed to opposite edges. */
.kit-v2__support-item {
  text-align: center;
}

.kit-v2__support-item--right {
  text-align: center;
}

/* —— Checkout / thank-you (UI preview) —— */
.kit-v2__container--narrow {
  max-width: 820px;
}

.kit-v2__preview-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.kit-v2__preview-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kit-v2-muted);
  margin-right: 4px;
}

.kit-v2__preview-btn {
  border: 1px solid var(--kit-v2-navy);
  background: #fff;
  color: var(--kit-v2-navy);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.kit-v2__preview-btn.is-active {
  background: var(--kit-v2-navy);
  color: #fff;
}

/* Checkout has no outer white card: the individual .kit-v2__box sections are
   the cards, sitting directly on the page background like the Ala Carte
   checkout. Scoped to .kit-v2--checkout so the kit entry page keeps its card. */
.kit-v2--checkout .kit-v2__main-card.kit-v2__checkout-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Match the Ala Carte checkout content width (its .container_inner caps at
   1180px); the shared kit container is 1120px. Scoped so the entry page keeps
   its own width. */
.kit-v2--checkout .kit-v2__container {
  max-width: 1180px;
}

.kit-v2__checkout-columns {
  display: grid;
  /* ~56/40 split with a ~44px gutter, matching Ala Carte's space-between
     left(56%)/right(40%) columns (was 1.05/0.95 with a 24px gutter, which
     made the right column too wide and the gutter too tight). */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "left right";
  gap: 44px;
  align-items: start;
}

.kit-v2__checkout-left {
  grid-area: left;
}

.kit-v2__checkout-right {
  grid-area: right;
}

/* Match Ala Carte's .c-checkout-box: soft grey border, 10px radius, generous
   28/26 padding (the kit boxes were tighter with an 8px radius and a bluish
   border). */
.kit-v2__box {
  background: #fff;
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-lg);
  padding: 28px 26px;
  margin-bottom: 24px;
}

.kit-v2__box-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: var(--sc-weight-medium, 500);
  font-size: var(--sc-h5, 1rem);
  margin: 0 0 12px;
  color: var(--kit-v2-navy);
}

.kit-v2__box-title--caps {
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kit-v2-muted);
}

/* Reads as part of the title, like Ala Carte's "- only $X" (.c-diff-color):
   same Lora face, weight and size as the heading, navy - not a smaller
   light-blue accent. */
.kit-v2__box-title-accent {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: var(--kit-v2-navy);
}

.kit-v2__box-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.kit-v2__box-title-row .kit-v2__box-title {
  margin-bottom: 0;
}

.kit-v2__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kit-v2__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kit-v2__field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Month wider than year/CVV; keep all three on one row. */
.kit-v2__field-row--card-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
}

.kit-v2__field-row--card-meta .kit-v2__field--exp-month {
  flex: 1.6 1 0;
  min-width: 7.5rem;
}

.kit-v2__field-row--card-meta .kit-v2__field--exp-year,
.kit-v2__field-row--card-meta .kit-v2__field--cvv {
  flex: 0 0 4.75rem;
  width: 4.75rem;
  max-width: 4.75rem;
}

/* Native <select> and <input> differ in default height — lock all three to one row. */
.kit-v2__field-row--card-meta .kit-v2__field--exp-month .kit-v2__input,
.kit-v2__field-row--card-meta .kit-v2__field--exp-year .kit-v2__input,
.kit-v2__field-row--card-meta .kit-v2__field--cvv .kit-v2__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.625rem;
  height: 2.625rem;
  padding: 0 12px;
  line-height: calc(2.625rem - 2px);
  font-size: 0.875rem;
}

.kit-v2__field-row--card-meta .kit-v2__field--exp-year .kit-v2__input,
.kit-v2__field-row--card-meta .kit-v2__field--cvv .kit-v2__input {
  text-align: center;
  letter-spacing: 0.04em;
}

/*
 * Kit-v2 inputs: never paint browser :invalid / :user-invalid red on focus
 * (login/register, payment, address). Red only with .kit-v2__input--invalid.
 */
.kit-v2 .kit-v2__input:invalid,
.kit-v2 .kit-v2__input:required:invalid,
.kit-v2 .kit-v2__input:user-invalid,
.kit-v2 .kit-v2__input:focus:invalid,
.kit-v2 .kit-v2__input:focus:required:invalid,
.kit-v2 .kit-v2__input:focus:user-invalid,
.kit-v2 select.kit-v2__input:invalid,
.kit-v2 select.kit-v2__input:required:invalid,
.kit-v2 select.kit-v2__input:user-invalid,
.kit-v2 select.kit-v2__input:focus:invalid,
.kit-v2 select.kit-v2__input:focus:required:invalid,
.kit-v2 select.kit-v2__input:focus:user-invalid {
  border-color: var(--kit-v2-border);
  box-shadow: none;
  outline: none;
}

.kit-v2 .kit-v2__input:focus {
  outline: none;
  border-color: var(--kit-v2-blue);
  box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.18);
}

.kit-v2 .kit-v2__input.kit-v2__input--invalid,
.kit-v2 .kit-v2__field.is-invalid .kit-v2__input,
.kit-v2 .kit-v2__field--card-number.is-invalid .kit-v2__input {
  border-color: #c61c40;
  box-shadow: none;
  outline: none;
}

.kit-v2 .kit-v2__input.kit-v2__input--invalid:focus,
.kit-v2 .kit-v2__field.is-invalid .kit-v2__input:focus,
.kit-v2 .kit-v2__field--card-number.is-invalid .kit-v2__input:focus {
  border-color: #c61c40;
  box-shadow: none;
  outline: none;
}

.kit-v2__form--payment {
  gap: 14px;
}

/* Card number — same chrome as other payment inputs; icons sit inside the field. */
.kit-v2__card-input-wrap {
  position: relative;
  display: block;
}

.kit-v2__field--card-number .kit-v2__input--card-number {
  padding-right: 4.75rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.kit-v2__field--card-number .kit-v2__input--card-number::placeholder {
  letter-spacing: 0.04em;
  color: #a8b8c8;
  font-weight: 400;
}

.kit-v2__cc-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
  pointer-events: none;
}

.kit-v2__cc-icons .fa {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--kit-v2-navy);
  opacity: 0.18;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.kit-v2__cc-icons .fa.is-active {
  opacity: 1;
  color: var(--kit-v2-navy);
}

.kit-v2__field-hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--kit-v2-muted);
}

.kit-v2__field-hint[hidden] {
  display: none !important;
}

.kit-v2__field-error {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 600;
  color: #8a1c32;
}

.kit-v2__field-row--card-meta + .kit-v2__field-error {
  margin-top: -4px;
}

.kit-v2__field-error[hidden] {
  display: none !important;
}

.kit-v2__billing-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.kit-v2__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kit-v2-muted);
}
/* Checkout is placeholder-driven (matches Ala Carte): hide the per-field
   labels visually while keeping them for screen readers. */
.kit-v2--checkout .kit-v2__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Match Ala Carte's .c-checkout-form inputs: #ccc border, 8px radius, 48px
   tall (was a pale-blue border, 6px radius and ~40px). */
.kit-v2__input {
  width: 100%;
  border: 1px solid var(--sc-border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--kit-v2-navy);
  background: #fff;
}
.kit-v2__input:not(.kit-v2__textarea) {
  height: 48px;
}

.kit-v2__input--sm {
  max-width: 160px;
  padding: 8px 10px;
}

.kit-v2__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Buttons — same structure as .sc-btn / Start Here; colors remain kit-v2 */
.kit-v2__btn,
a.kit-v2__btn,
button.kit-v2__btn {
  appearance: none;
  display: inline-block;
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-size: var(--sc-body, 1rem);
  font-weight: var(--sc-weight-semi, 600);
  line-height: 1.25;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--sc-radius, 6px);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kit-v2__btn--primary {
  background: var(--sc-light-blue);
  border-color: var(--sc-light-blue);
  color: #fff;
}

.kit-v2__btn--primary:hover,
.kit-v2__btn--primary:focus,
a.kit-v2__btn--primary:hover,
a.kit-v2__btn--primary:focus {
  background: #031f3a;
  border-color: #031f3a;
  color: #fff;
  text-decoration: none;
}

.kit-v2__btn--ghost {
  background: transparent;
  color: var(--kit-v2-navy);
  border-color: var(--kit-v2-navy);
}

.kit-v2__btn--ghost:hover,
.kit-v2__btn--ghost:focus {
  background: var(--kit-v2-navy);
  border-color: var(--kit-v2-navy);
  color: #fff;
  text-decoration: none;
}

.kit-v2__btn--sm {
  font-size: var(--sc-small, 0.875rem);
  padding: 8px 16px;
}

.kit-v2__btn:focus-visible {
  outline: 2px solid var(--kit-v2-navy);
  outline-offset: 2px;
}

.kit-v2__text-link,
.kit-v2__inline-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--kit-v2-blue);
  /* No underline, like the Ala Carte .color-blue links. */
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
}

.kit-v2__text-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Inline "(Change Address)" inside the Ship From title: light-blue, no
   underline, regular weight and small - like Ala Carte's (Change Address). */
.kit-v2__title-link {
  margin-left: 6px;
  font-size: 0.8125rem;
  font-weight: var(--sc-weight-regular, 400);
  text-decoration: none;
  vertical-align: baseline;
}

.kit-v2__link-btn,
a.kit-v2__link-btn {
  display: inline-block;
  font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
  font-size: var(--sc-body, 1rem);
  font-weight: var(--sc-weight-semi, 600);
  line-height: 1.25;
  padding: 10px 24px;
  border: 1px solid var(--kit-v2-navy);
  border-radius: var(--sc-radius, 6px);
  color: var(--kit-v2-navy);
  text-align: center;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kit-v2__link-btn:hover,
.kit-v2__link-btn:focus,
a.kit-v2__link-btn:hover,
a.kit-v2__link-btn:focus {
  background: var(--kit-v2-navy);
  border-color: var(--kit-v2-navy);
  color: #fff;
  text-decoration: none;
}

.kit-v2__address {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--kit-v2-navy);
}

.kit-v2__option-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  cursor: pointer;
}

.kit-v2__option-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Regular grey label + price, matching the Ala Carte shipping rows (which were
   un-bolded to body grey); the kit row was navy/bold. */
.kit-v2__option-label {
  font-weight: var(--sc-weight-regular, 400);
  font-size: 0.875rem;
  color: var(--sc-text);
}

.kit-v2__option-price {
  font-weight: var(--sc-weight-regular, 400);
  color: var(--sc-text);
  white-space: nowrap;
}

/* Mirror Ala Carte's .c-checkout-protection: image in a ~38% column centred
   against the bullets, which are vertically centred beside it. */
.kit-v2__protection {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 14px;
}

.kit-v2__protection-media {
  width: 38%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kit-v2__protection-img {
  display: block;
  max-width: 95%;
  height: auto;
  border-radius: 6px;
}

/* Blue-tick bullets + grey text, matching Ala Carte's .c-protection-list
   (blue-tick.jpg + grey .c-prot-title); the kit used disc bullets in navy.
   The list fills the rest of the row and centres vertically against the image. */
.kit-v2__protection-list {
  margin: 0;
  list-style: none;
  padding-left: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sc-text);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kit-v2__protection-list li {
  /* min-height fits the 29px tick so a single-line bullet does not clip the
     icon's bottom edge (the box was only one text line tall). */
  min-height: 29px;
  padding-left: 40px;
  margin-bottom: 8px;
  background: url('../images/blue-tick.jpg') no-repeat left top;
  background-size: 29px auto;
}

.kit-v2__protection-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .kit-v2__protection {
    flex-direction: column;
    align-items: flex-start;
  }
  .kit-v2__protection-media {
    width: auto;
    align-self: flex-start;
  }
}

.kit-v2__prot-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* White with a grey border by default; the selected (and hovered) button fills
   pale blue with a light-blue border - the Ala Carte .c-prot-btn / .active look. */
.kit-v2__prot-btn {
  flex: 1 1 140px;
  border: 1px solid var(--sc-border);
  background: #fff;
  color: var(--kit-v2-navy);
  font: inherit;
  font-weight: 700;
  padding: 15px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.kit-v2__prot-btn:hover,
.kit-v2__prot-btn.is-active {
  background: #bfe9f7;
  border-color: var(--sc-light-blue);
}

.kit-v2__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f6;
  font-size: 0.875rem;
}

.kit-v2__price-row--total {
  border-bottom: none;
  padding-top: 12px;
  margin-top: 4px;
  font-size: 1rem;
}

.kit-v2__price-row--total .kit-v2__price-value {
  font-size: 1.125rem;
}

.kit-v2__price-label {
  color: var(--kit-v2-navy);
  min-width: 0;
}

.kit-v2__price-sub {
  margin-top: 2px;
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 400;
  color: var(--kit-v2-muted, #666);
  line-height: 1.35;
}

.kit-v2__price-value {
  font-weight: 700;
  color: var(--kit-v2-navy);
  white-space: nowrap;
}

.kit-v2__edit-link {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--kit-v2-blue);
  text-decoration: none;
}

.kit-v2__edit-link:hover {
  text-decoration: underline;
}

.kit-v2__price-row--discount {
  align-items: flex-start;
}

.kit-v2__discount-field {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
}

.kit-v2__discount-field .kit-v2__input--sm {
  max-width: 180px;
  width: 180px;
}

.kit-v2__discount-message {
  margin: 0;
  max-width: 180px;
  width: 180px;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: left;
  color: var(--kit-v2-muted);
}

.kit-v2__discount-message.is-error {
  color: var(--sc-danger, #c0392b);
}

.kit-v2__discount-message.is-info {
  color: var(--kit-v2-muted);
}

.kit-v2__discount-message[hidden] {
  display: none !important;
}

a.kit-v2__discount-apply,
a.kit-v2__discount-apply:link,
a.kit-v2__discount-apply:visited,
a.kit-v2__discount-apply:hover,
a.kit-v2__discount-apply:focus,
a.kit-v2__discount-apply:active {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  align-self: flex-end;
  color: var(--kit-v2-blue);
}

.kit-v2__radio,
.kit-v2__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--kit-v2-navy);
  cursor: pointer;
}

.kit-v2__radio > input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
  width: 1rem;
  height: 1rem;
}

.kit-v2__radio > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.kit-v2__check {
  flex-wrap: nowrap;
}

.kit-v2__check > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  width: 1rem;
  height: 1rem;
}

.kit-v2__check > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.kit-v2__check .kit-v2__inline-link {
  display: inline;
  white-space: nowrap;
  vertical-align: baseline;
}

.kit-v2__billing-options .kit-v2__radio {
  align-items: center;
}

.kit-v2__payment-extras {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* SMS / Special Instructions sub-headings: regular grey, title case - matching
   the Ala Carte "SMS Text Message Notification" / "Special Instructions"
   headings (were bold navy uppercase). */
.kit-v2__extras-heading {
  margin: 0 0 4px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-text);
}

.kit-v2__extras-copy {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sc-text);
}

.kit-v2__inline-link--btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  vertical-align: baseline;
}

.kit-v2__label--sm {
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.kit-v2__textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}

.kit-v2__sms-warning-tip {
  margin-top: 8px;
}

.kit-v2__sms-warning-tip img {
  max-width: 100%;
  height: auto;
  display: block;
}

.kit-v2__dialog--sms {
  max-width: 560px;
  width: min(560px, calc(100% - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 50px rgba(5, 47, 86, 0.22);
}

.kit-v2__sms-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kit-v2__sms-modal-lede,
.kit-v2__sms-modal-note,
.kit-v2__sms-modal-fine {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--kit-v2-text, #334155);
}

.kit-v2__sms-modal-note {
  color: var(--kit-v2-muted);
}

.kit-v2__sms-modal-fine {
  font-size: 0.75rem;
  color: var(--kit-v2-muted);
}

.kit-v2__sms-modal-fine--bold {
  font-weight: 600;
}

/* Terms line: grey text, no divider, matching Ala Carte's .c-checkbox-wrap. */
#kit-v2-payment-details > .kit-v2__check--payment {
  margin-top: 25px;
  color: var(--sc-text-muted);
}
#kit-v2-payment-details > .kit-v2__check--payment span {
  color: var(--sc-text-muted);
}

#kit-v2-payment-details > .kit-v2__field-error + .kit-v2__cta-row--checkout,
#kit-v2-payment-details > .kit-v2__check--payment + .kit-v2__field-error + .kit-v2__cta-row--checkout {
  margin-top: 12px;
}

.kit-v2__billing-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kit-v2__field-note {
  margin: 0 0 8px;
  font-size: 0.875rem;
}

/* Full-width pay button, like Ala Carte (was compact, right-aligned). */
.kit-v2__cta-row--checkout {
  justify-content: stretch;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}
.kit-v2__cta-row--checkout .kit-v2__cta {
  display: block;
  width: 100%;
  white-space: normal;
}

.kit-v2__muted {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--kit-v2-muted);
}

.kit-v2__muted--sm {
  font-size: 0.75rem;
  margin-top: 8px;
}

.kit-v2__checkout-guest-note {
  padding: 12px 0 0;
}

.kit-v2__dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(5, 47, 86, 0.2);
}

.kit-v2__dialog--address {
  max-width: 560px;
  width: min(560px, calc(100% - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.kit-v2__dialog--terms {
  max-width: 640px;
  width: min(640px, calc(100% - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 50px rgba(5, 47, 86, 0.22);
}

.kit-v2__terms-modal {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 680px);
  background: #fff;
}

.kit-v2__terms-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--kit-v2-border-soft);
  background: linear-gradient(180deg, #eef7fb 0%, #fff 85%);
}

.kit-v2__terms-modal-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.kit-v2__terms-modal-eyebrow {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kit-v2-blue);
}

.kit-v2__terms-modal-title {
  margin: 0 0 8px;
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--kit-v2-navy);
}

.kit-v2__terms-modal-lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kit-v2-muted);
  max-width: 34em;
}

.kit-v2__terms-modal-close {
  flex: 0 0 auto;
  border: none;
  background: #fff;
  color: var(--kit-v2-muted);
  font-size: 1.5rem;
  line-height: 1;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--kit-v2-border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kit-v2__terms-modal-close:hover,
.kit-v2__terms-modal-close:focus {
  color: var(--kit-v2-navy);
  border-color: var(--kit-v2-border);
  background: #f8fbfd;
}

.kit-v2__terms-modal-body {
  padding: 20px 22px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kit-v2__terms-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kit-v2__terms-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--kit-v2-radius-sm);
  background: #f7fafc;
  border: 1px solid var(--kit-v2-border-soft);
}

.kit-v2__terms-highlight-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--kit-v2-navy);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-align: center;
}

.kit-v2__terms-highlight-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--kit-v2-navy);
}

.kit-v2__terms-highlight-text strong {
  font-weight: 600;
}

.kit-v2__terms-full-link {
  margin-top: 16px;
}

.kit-v2__terms-full-link-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--kit-v2-radius-sm);
  border: 1px dashed var(--kit-v2-border);
  background: #fff;
  color: var(--kit-v2-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kit-v2__terms-full-link-anchor:hover,
.kit-v2__terms-full-link-anchor:focus {
  background: #f3f9fc;
  border-color: var(--kit-v2-blue);
  color: var(--kit-v2-navy);
  text-decoration: none;
}

.kit-v2__terms-full-link-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: 0.85;
}

.kit-v2__terms-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--kit-v2-border-soft);
  background: #fafcfd;
}

.kit-v2__terms-got-it,
.kit-v2__sms-got-it {
  width: auto;
  min-width: 7.5rem;
  padding-top: 12px;
  padding-bottom: 12px;
}

.kit-v2__dialog::backdrop {
  background: rgba(5, 47, 86, 0.45);
  backdrop-filter: blur(2px);
}

.kit-v2__dialog-inner {
  padding: 22px 24px;
}

.kit-v2__dialog-inner--wide {
  max-width: 640px;
  width: min(640px, 92vw);
}

.kit-v2__dialog-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--kit-v2-navy);
}

/* —— Shipping address modal (payment incomplete profile) —— */
.kit-v2__address-modal {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 760px);
}

.kit-v2__address-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  background: linear-gradient(180deg, #f3f9fc 0%, #fff 100%);
  border-bottom: 1px solid var(--kit-v2-border-soft);
}

.kit-v2__address-modal-eyebrow {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kit-v2-blue);
}

.kit-v2__address-modal-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--kit-v2-navy);
}

.kit-v2__address-modal-lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kit-v2-muted);
  max-width: 36em;
}

.kit-v2__address-modal-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: -4px -4px 0 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--kit-v2-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.kit-v2__address-modal-close:hover {
  background: var(--kit-v2-border-soft);
  color: var(--kit-v2-navy);
}

.kit-v2__address-modal-body {
  padding: 8px 22px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kit-v2__address-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kit-v2__address-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kit-v2__address-legend {
  padding: 0;
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kit-v2-navy);
}

.kit-v2__address-grid {
  display: grid;
  gap: 12px;
}

.kit-v2__address-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kit-v2__address-grid--city {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.85fr);
}

.kit-v2__label-optional {
  font-weight: 400;
  color: var(--kit-v2-muted);
  text-transform: none;
  letter-spacing: 0;
}

.kit-v2__country-fixed {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kit-v2-navy);
  background: #f4f8fb;
  border: 1px solid var(--kit-v2-border-soft);
  border-radius: 8px;
}

.kit-v2__address-modal .kit-v2__input {
  border-radius: 8px;
  padding: 11px 12px;
  border-color: #cfdce6;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kit-v2__address-modal .kit-v2__input:focus {
  outline: none;
  border-color: var(--kit-v2-blue);
  box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.18);
}

.kit-v2__input.kit-v2__input--invalid {
  border-color: #c61c40;
  box-shadow: none;
  outline: none;
}

.kit-v2__input.kit-v2__input--invalid:focus {
  border-color: #c61c40;
  box-shadow: none;
  outline: none;
}

.kit-v2__address-modal-errors {
  background: #fdf2f4;
  border: 1px solid #f0c4cd;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  color: #8a1c32;
}

.kit-v2__address-modal-footer {
  padding: 14px 22px 20px;
  border-top: 1px solid var(--kit-v2-border-soft);
  background: #fafcfd;
}

.kit-v2__address-modal-save {
  width: 100%;
  padding: 12px 24px;
}

.kit-v2__address-modal-save:disabled {
  opacity: 0.65;
  cursor: wait;
}

.kit-v2__address-modal-footnote {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--kit-v2-muted);
}

.kit-v2__address-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kit-v2-navy);
}

.kit-v2__address-modal-overlay[hidden] {
  display: none !important;
}

.kit-v2__address-modal-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--kit-v2-border);
  border-top-color: var(--kit-v2-blue);
  border-radius: 50%;
  animation: kit-v2-spin 0.7s linear infinite;
}

@keyframes kit-v2-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
  .kit-v2__address-grid--2,
  .kit-v2__address-grid--city {
    grid-template-columns: 1fr;
  }

  .kit-v2__address-modal-header,
  .kit-v2__address-modal-body,
  .kit-v2__address-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kit-v2__address-modal-title {
    font-size: 1.2rem;
  }
}

.kit-v2__hero {
  background: var(--kit-v2-navy);
  color: #fff;
  border-radius: 14px;
  padding: 28px 28px 24px;
  margin: 0 0 18px;
}

.kit-v2__hero-title {
  font-family: var(--sc-font-heading, Lora, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 8px;
  color: #fff;
}

.kit-v2__hero-text {
  margin: 0;
  opacity: 0.9;
  font-size: 0.9875rem;
}

.kit-v2__alert {
  background: #eef6fb;
  border: 1px solid #cfe0ee;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  color: var(--kit-v2-navy);
}

/* —— Checkout flash / payment error notice —— */
.kit-v2__notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  border: 1px solid transparent;
}

.kit-v2__notice--region {
  border-color: #e8c4a8;
  background: #fff8f0;
  color: var(--kit-v2-navy);
}

.kit-v2__notice--region .kit-v2__notice-icon {
  color: #c45c26;
}

.kit-v2__notice--error {
  background: #fdf5f6;
  border-color: #f0c4cd;
  box-shadow: 0 1px 2px rgba(198, 28, 64, 0.06);
}

.kit-v2__notice-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8e4e8;
  color: var(--kit-v2-cta, #c61c40);
}

.kit-v2__notice-body {
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 2px;
}

.kit-v2__notice-title {
  margin: 0 0 4px;
  font-size: 0.9875rem;
  font-weight: 700;
  color: #8a1c32;
  line-height: 1.3;
}

.kit-v2__notice-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kit-v2-navy);
}

.kit-v2__notice-hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--kit-v2-muted);
}

.kit-v2__notice-list {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: var(--kit-v2-navy);
}

.kit-v2__notice-list li + li {
  margin-top: 2px;
}

.kit-v2__notice:focus {
  outline: 2px solid var(--kit-v2-cta, #c61c40);
  outline-offset: 2px;
}

.kit-v2__tracking {
  background: #f8fafc;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

.kit-v2__tracking-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kit-v2-muted);
}

.kit-v2__tracking-id {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--kit-v2-navy);
  word-break: break-all;
  margin-top: 4px;
}

.kit-v2__next-list {
  margin: 0 0 14px;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--kit-v2-navy);
}

.kit-v2__next-list li {
  margin-bottom: 0.55rem;
}

.kit-v2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.kit-v2__survey-launch {
  margin: 8px 0 0;
  text-align: center;
}

/* —— Responsive —— */
@media (max-width: 991.98px) {
  .kit-v2__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .kit-v2__checkout-columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "right";
  }

  .kit-v2__main-card {
    padding: 20px;
  }

  .kit-v2__support-item--right {
    text-align: center;
  }

  .kit-v2__field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep Exp. Month / Year / CVV on one row even when other rows stack. */
  .kit-v2__field-row--card-meta {
    display: flex;
    flex-wrap: nowrap;
  }

  .kit-v2__field-row--card-meta .kit-v2__field--exp-month {
    min-width: 6.5rem;
  }

  .kit-v2__field-row--card-meta .kit-v2__field--exp-year,
  .kit-v2__field-row--card-meta .kit-v2__field--cvv {
    flex-basis: 4.25rem;
    width: 4.25rem;
    max-width: 4.25rem;
  }
}

@media (max-width: 575.98px) {
  .kit-v2__page {
    padding: 20px 12px 40px;
  }

  .kit-v2__steps-list {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .kit-v2__step {
    min-width: 0;
  }

  .kit-v2__step-label {
    white-space: normal;
  }

  .kit-v2__sizes {
    grid-template-columns: minmax(0, 1fr);
  }

  .kit-v2__delivery-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .kit-v2__delivery-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .kit-v2__cta-row--delivery {
    justify-content: stretch;
  }

  .kit-v2__cta-row {
    justify-content: stretch;
  }

  .kit-v2__cta {
    width: 100%;
  }

  .kit-v2__gallery-nav {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================================
   Order Summary -> same look & feel as order/payment & order/media: navy header
   bar, white rounded card with shadow, grey labels + navy-bold values, and a
   divider only before the total (not between every row). Scoped to the summary
   id so other kit boxes are untouched and the sizes out-rank the 16px preview
   override. Values/labels stay 16px (the hacked body size, matching those pages).
   ========================================================================== */
#kit-order-summary {
  padding: 0 24px 24px;
  border: 0;
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow-card);
}
/* Full-bleed navy header bar, Lora, like the other two summaries (24px insets
   to match the Ala Carte Order Summary). */
#kit-order-summary .kit-v2__box-title {
  margin: 0 -24px 20px;
  padding: 14px 24px;
  background: var(--sc-navy);
  color: var(--sc-on-brand);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}
/* Total row in Lora, like the Ala Carte Order Summary total (was Circular). */
#kit-order-summary .kit-v2__price-row--total .kit-v2__price-label,
#kit-order-summary .kit-v2__price-row--total .kit-v2__price-value {
  font-family: var(--sc-font-heading);
  font-weight: var(--sc-weight-bold);
}
/* No divider between every row; one line only above the total. */
#kit-order-summary .kit-v2__price-row {
  border-bottom: 0;
}
#kit-order-summary .kit-v2__price-row--total {
  border-top: 1px solid var(--sc-border-soft);
}
/* Grey labels, like order/payment (values stay navy bold). */
#kit-order-summary .kit-v2__price-label {
  color: var(--sc-text);
}
/* Plan sub-note small + grey, matching "(First 30 days free ...)". */
#kit-order-summary .kit-v2__price-sub {
  font-size: 12px !important;
  color: var(--sc-text);
}

/* Login/Register box -> match order/payment. "New user?"/"Existing user?" is a
   navy prompt; the Register/Login toggle beside it is a light-blue link, no
   underline (like order/payment's "New user? Register"). */
.kit-v2__guest-prompt {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-semi);
}
.kit-v2__guest-prompt .kit-v2__guest-link {
  color: var(--sc-light-blue);
  font-weight: var(--sc-weight-semi);
  text-decoration: none;
}
/* order/payment's login shows placeholders only, no field labels above the
   inputs. Hide them visually in the login/register boxes but keep them for
   screen readers. */
[data-guest-auth] .kit-v2__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}