/* CHECKOUT PAGE STYLES (linked at the start of <body>, so they come after every stylesheet in <head>).
   The file is a sequence of blocks, each headed "---- #name ----". Later blocks deliberately override earlier ones, so keep the
   ORDER as it is. Search for a block name to jump to it.

   CONTENTS (top to bottom)
     Shipping form (step 02)   #final-shipping-layout · #zip-city-state-exact-final · #shipping-actual-fields-fix ·
                               #EMERGENCY-LABEL-RESTORE · #shipping-field-containers-final · #shipping-form-polish ·
                               #phone-display-style · #unified-shipping-placeholder-color · #zip-state-validation-ui ·
                               state / city / country greyed-out blocks · #zip-error-message-final · square-corner blocks
     Pop-up windows            #addr-check-modal (address check + terms windows; the payment window lives in gx-app.css)
     Right-hand panel          #checkout-same-height-final · #order-summary-selection (incl. 03 REVIEW) ·
                               #step-slide-animation · #progress-swipe-animation · #your-order-compact-final
     Page chrome               #main-header-carbon-copy · #blur-tint-neutral
     Kits card                 #kits-lock · #kits-card-stable-height · accessories (in the deposit block)
     Validation                #inline-field-validation · #shipping-spacing-final · #four-step-checkout
     BACK / CONTINUE           #round-nav-and-shipping-method · #checkout-nav-bar · V4 · V6 · V9 · V10
     Panel fit (desktop)       #checkout-panel-fit-final · V4 order pinned
     Look-alike of the card form   V5 · #addr-combo · #co-busy · V7 · V8 · V12 · V13 · V15 · V18
     Order information card    V19 · V20 · V22 · V25
     Terms tick + window       V27 · V29 · #terms-window-v2 · new-tab arrows (end of file)
   2026-10-30 cleanup: removed only rules the browser never used (styling for the hidden old step buttons, and declarations
   that a later block in this file overrides with equal or higher priority). Nothing on screen changed. */
/* ---- #final-shipping-layout ---- */
/* =====================================================
   FINAL SHIPPING DESIGN
   ===================================================== */

#checkoutStep2 {
  width: 100% !important;
  box-sizing: border-box !important;
}

#checkoutStep2 #shippingAddressForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* title */
#checkoutStep2 #shippingAddressForm .shipping-address-title {
  margin: 0 0 24px !important;
}

/* fields */
#checkoutStep2 #shippingAddressForm .shipping-field {
  width: 100% !important;
  margin: 0 0 20px !important;
}

#checkoutStep2 #shippingAddressForm .shipping-field label {
  display: block !important;
  margin: 0 0 8px !important;
}

/* actual inputs */
#checkoutStep2 #shippingAddressForm input,#checkoutStep2 #shippingAddressForm .shipping-country{width:100%!important;height:48px!important;min-height:48px!important;padding:0 13px!important;border:1px solid rgba(58,42,29,.18)!important;background:rgba(255,255,255,.32)!important;box-shadow:none!important;box-sizing:border-box!important}

/* city / state */
#checkoutStep2 #shippingAddressForm .shipping-grid-city{display:grid!important;gap:12px!important}

/* ZIP / country */
#checkoutStep2 #shippingAddressForm .shipping-grid-bottom{display:grid!important;gap:12px!important}

/* country */
#checkoutStep2 #shippingAddressForm .shipping-country{display:flex!important;align-items:center!important;justify-content:space-between!important}

/* tiny email notice — THIS IS THE ONE */
.shipping-email-note-final {
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  color: rgba(58,42,29,.40);
  font: 6.5px/1.35 "DM Mono", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* desktop: make the right panel actually use its space */
.order-card {
  min-width: 0 !important;
}

/* mobile */
@media (max-width: 600px) {
  #checkoutStep2 #shippingAddressForm .shipping-grid-city,
  #checkoutStep2 #shippingAddressForm .shipping-grid-bottom {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 430px) {
  #checkoutStep2 #shippingAddressForm .shipping-grid-city,
  #checkoutStep2 #shippingAddressForm .shipping-grid-bottom {
    grid-template-columns: 1fr !important;
  }
}

/* ---- #zip-city-state-exact-final ---- */
/* ZIP error state: City + State must visually match the ZIP field exactly. */
#checkoutStep2 #shippingAddressForm #shippingCity.zip-location-invalid,#checkoutStep2 #shippingAddressForm #shippingState.zip-location-invalid{opacity:1!important}

/* Outside a ZIP error, preserve the existing gray City/State appearance. */
#checkoutStep2 #shippingAddressForm #shippingCity:not(.zip-location-invalid),
#checkoutStep2 #shippingAddressForm #shippingState:not(.zip-location-invalid) {
  color:rgba(58,42,29,.55) !important;
  -webkit-text-fill-color:rgba(58,42,29,.55) !important;
  opacity:.62 !important;
  border-color:rgba(58,42,29,.18) !important;
  background:rgba(255,255,255,.22) !important;
  box-shadow:none !important;
}

/* ---- #addr-check-modal ---- */
/* ADDRESS CHECK window (2026-10-19): the payment window's own look, rule for rule (copied from the payment window's rules, gx-app.css, V13d, V15, V17 with
   #payWindow swapped for :is(#addrCheckWrap,#termsWrap)). The window itself is built by script.js (verifyAddress). */
body > :is(#addrCheckWrap,#termsWrap) { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center; justify-content: center; padding: 24px; }
body > :is(#addrCheckWrap,#termsWrap)[hidden] { display: none !important; }
body > :is(#addrCheckWrap,#termsWrap) .pwin-backdrop { position: absolute; inset: 0; background: rgba(31,24,19,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: payFade .24s ease both; }
body > :is(#addrCheckWrap,#termsWrap) .pwin-modal {
  position: relative; width: min(560px, 100%); max-height: min(90vh, 900px);
  display: flex; flex-direction: column;
  background: #f5efe4; border: 1px solid rgba(58,42,29,.2);
  box-shadow: 0 24px 60px -30px rgba(31,24,19,.5);
  animation: payRise .26s cubic-bezier(.2,.7,.2,1) both;
}
body > :is(#addrCheckWrap,#termsWrap) .pwin-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 56px 16px 22px; border-bottom: 1px solid rgba(58,42,29,.14);
  font: 400 9px/1 "DM Mono", monospace; letter-spacing: .14em; color: rgba(51,39,31,.6);
}
body > :is(#addrCheckWrap,#termsWrap) .pwin-head span:last-child { color: #33271f; }
body > :is(#addrCheckWrap,#termsWrap) .pwin-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; background: none; border: 0; color: #33271f; font-size: 15px; cursor: pointer; }
body > :is(#addrCheckWrap,#termsWrap) .pwin-close:hover { color: #a52d25; }
body > :is(#addrCheckWrap,#termsWrap).is-closing .pwin-backdrop { animation: payFadeOut .22s ease both; }
body > :is(#addrCheckWrap,#termsWrap).is-closing .pwin-modal { animation: paySink .22s ease both; }
@keyframes payFadeOut { to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes paySink { to { opacity: 0; transform: translateY(10px); } }
body > :is(#addrCheckWrap,#termsWrap) .pay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; background: #f5efe4; }
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-modal{background:var(--gx-card)!important;border:2px solid var(--gx-ink)!important;border-radius:12px!important;box-shadow:6px 6px 0 var(--gx-ink)!important;overflow:hidden}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head{position:relative;padding-top:24px!important;border-bottom:2px dashed var(--gx-ink)!important;background:var(--gx-card)!important;color:var(--gx-ink)!important}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-bottom:2px solid var(--gx-ink);background:var(--gx-hdr-stripe)}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head span:last-child{color:var(--gx-red)!important}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-close{top:17px!important;right:12px!important;z-index:5!important;display:grid!important;place-items:center;color:var(--gx-ink)!important;font-size:16px!important;line-height:1!important}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-close{transition:color .16s ease}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-close:hover,
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-close:focus-visible,
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-close:active{color:#a52d25!important}   /* the links' hover red; :active so a finger gets it too */
/* "05 / 05": the same ink pill as the steps' "0X / 05" */
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head span:first-child{display:inline-block;padding:5px 8px;border-radius:999px;background:var(--gx-ink);color:var(--gx-card)!important;opacity:1}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pay-body{background:var(--gx-card)!important}
html body.checkout-page.gx :is(#addrCheckWrap,#termsWrap) .pay-submit:not(#_):not(#_):not(#_) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: .45em !important;
  padding: 0 18px 0 22px !important;
  text-align: left !important;
}
html body.checkout-page.gx :is(#addrCheckWrap,#termsWrap) .pay-submit .nav-arrow:not(#_) {
  flex: none !important;
  display: block !important;
  margin-left: auto !important;
  width: 1.1em !important;
  height: 1.1em !important;
  color: transparent !important;
  overflow: hidden !important;
  background: #f7f0df !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
:is(#addrCheckWrap,#termsWrap) .pay-lock { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(#addrCheckWrap,#termsWrap) .pay-secure{display:flex;align-items:center;gap:7px;margin:0 0 14px;font:500 9px/1 "DM Mono", monospace;letter-spacing:.14em}
:is(#addrCheckWrap,#termsWrap) .pay-secure .pay-lock { width: 13px; height: 13px; stroke-width: 1.8; }
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure:not(#_){display:inline-flex;align-items:center;gap:6px;margin:0 auto 0 12px;min-width:0;font:500 9px/1 "DM Mono", monospace;letter-spacing:.14em;white-space:nowrap;opacity:1}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure .pay-lock { width: 13px; height: 13px; stroke-width: 1.8; }
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure-t { font: inherit; display: block; position: relative; top: var(--v15-dy, 0px); }
@media (max-width: 360px) {
  html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure:not(#_) { margin-left: 8px; gap: 4px; letter-spacing: .08em; }
}
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure-t:not(#_) { translate: 0 1px; }

/* the address window's own content */
:is(#addrCheckWrap,#termsWrap) .pay-secure { color: #3b2c22 !important; }
html body.checkout-page.gx > :is(#addrCheckWrap,#termsWrap) .pwin-head .pay-secure:not(#_) { color: #3b2c22 !important; }
:is(#addrCheckWrap,#termsWrap) .addr-lead { margin: 0 0 16px; padding: 4px 0 16px; border-bottom: 2px dashed #3b2c22; font: 400 10px/1.7 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(51,39,31,.7); }
:is(#addrCheckWrap,#termsWrap) .addr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
:is(#addrCheckWrap,#termsWrap) .addr-cards.is-single { grid-template-columns: 1fr; }
@media (max-width: 560px) { :is(#addrCheckWrap,#termsWrap) .addr-cards { grid-template-columns: 1fr; } }
:is(#addrCheckWrap,#termsWrap) .addr-card { min-width: 0; padding: 14px 16px 16px; border: 2px solid #3b2c22; border-radius: 8px; background: #fffdf7; }
:is(#addrCheckWrap,#termsWrap) .addr-card.is-new { background: #fff; box-shadow: 3px 3px 0 #3b2c22; }
:is(#addrCheckWrap,#termsWrap) .addr-card > small { display: block; margin: 0 0 10px; font: 400 9px/1 "DM Mono", monospace; letter-spacing: .12em; color: rgba(51,39,31,.7); }
:is(#addrCheckWrap,#termsWrap) .addr-card.is-new > small { color: #a52d25; }
:is(#addrCheckWrap,#termsWrap) .addr-card p { margin: 0; font: 400 15px/1.45 Epilogue, ui-sans-serif, system-ui, sans-serif; color: #33271f; overflow-wrap: anywhere; }
:is(#addrCheckWrap,#termsWrap) .addr-card .addr-chg { font-weight: 600; color: #a52d25; }
:is(#addrCheckWrap,#termsWrap) .addr-warn { margin: 0 0 14px; padding: 8px 10px; border: 1.5px dashed #b8382e; border-radius: 8px; background: #f7e4de; font: 500 9px/1.5 "DM Mono", monospace; letter-spacing: .1em; color: #a52d25; text-transform: uppercase; }
:is(#addrCheckWrap,#termsWrap) .addr-actions { display: flex; flex-direction: column; gap: 12px; }
:is(#addrCheckWrap,#termsWrap) .addr-actions .pay-submit { width: 100%; margin-top: 0; }
html body.checkout-page.gx :is(#addrCheckWrap,#termsWrap) .pay-submit.addr-secondary:not(#_):not(#_):not(#_) { background: transparent !important; color: #3b2c22 !important; justify-content: center !important; padding: 0 22px !important; }
@media (hover: hover) { html body.checkout-page.gx :is(#addrCheckWrap,#termsWrap) .pay-submit.addr-secondary:not(#_):not(#_):not(#_):hover { background: rgba(59,44,34,.07) !important; } }
html body.checkout-page.gx :is(#addrCheckWrap,#termsWrap) .pay-submit.addr-secondary.is-skip:not(#_):not(#_):not(#_) { justify-content: space-between !important; text-align: left; padding: 0 18px 0 22px !important; column-gap: .45em !important; }
#addrCheckWrap .addr-secondary .addr-skip { flex: 0 0 auto; width: 1.1em; height: 1.1em; }
/* 2026-11-01 (owner): the two buttons sit side by side (the suggested/kept address on the left, KEEP MY ADDRESS / EDIT on the right).
   Each is as wide as its own text + icon needs (nothing wraps inside a button); when the two don't fit in one row they wrap
   and stack, each full width, exactly as before. */
#addrCheckWrap .addr-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }
#addrCheckWrap .addr-actions .pay-submit { width: auto; flex: 1 1 max-content; min-width: 0; white-space: nowrap; }
:is(#addrCheckWrap,#termsWrap) .pay-submit:disabled { opacity: .45; cursor: wait; }

/* ---- #shipping-actual-fields-fix ---- */
#shippingAddressForm{
  width:100%!important;
}

#shippingAddressForm .shipping-grid-city,
#shippingAddressForm .shipping-grid-bottom{
  display:grid!important;
  width:100%!important;
  gap:12px!important;
  align-items:start!important;
}

#shippingAddressForm .shipping-grid-bottom{
  grid-template-columns:105px minmax(0,1fr)!important;
}

#shippingAddressForm .shipping-grid-city > *,
#shippingAddressForm .shipping-grid-bottom > *{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:430px){
  #shippingAddressForm .shipping-grid-city,
  #shippingAddressForm .shipping-grid-bottom{
    grid-template-columns:minmax(0,1fr) 70px!important;
  }
}

/* ---- #EMERGENCY-LABEL-RESTORE ---- */
#shippingAddressForm label,
#shippingAddressForm .shipping-field label {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#777 !important;
    font-size:8px !important;
    font-weight:400 !important;
    line-height:10px !important;
    letter-spacing:.08em !important;
    height:auto !important;
    min-height:12px !important;
    width:auto !important;
    position:relative !important;
    z-index:10 !important;
    overflow:visible !important;
    margin:0 0 4px !important;
    padding:0 !important;
}

#shippingAddressForm .shipping-field label span {
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
}

/* ---- #shipping-field-containers-final ---- */
/* Each field gets its own consistent vertical container */
#shippingAddressForm > .shipping-field{display:flex!important;flex-direction:column!important;padding:0!important}

#shippingAddressForm > .shipping-field:last-of-type {
    margin-bottom: 18px !important;
}

/* Paired rows */
#shippingAddressForm .shipping-grid {
    display: grid !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    gap: 14px !important;
}

#shippingAddressForm .shipping-grid .shipping-field {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* Label-to-field spacing */
#shippingAddressForm .shipping-field > label {
    margin: 0 0 4px !important;
}

/* Keep every input exactly aligned */
#shippingAddressForm .shipping-field > input,
#shippingAddressForm .shipping-country {
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ---- #checkout-same-height-final ---- */
/* =========================================================
   CHECKOUT — ONE FIXED RIGHT-PANEL HEIGHT FOR ALL 3 STEPS
   ========================================================= */

.checkout-grid > .order-card {
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* The order card is the actual fixed-height shell */
.order-card {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

/* Everything inside the step system must be allowed to shrink */
.order-card > * {
  flex-shrink: 0;
}

/* Step content is the only flexible area */
.order-card .checkout-step{min-height:0!important;box-sizing:border-box!important}

/* Shipping form must never force the card taller */
.order-card .shipping-address-form {
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Compact vertical rhythm inside shipping */
.order-card .shipping-field {
  margin-bottom: 10px !important;
}

.order-card .shipping-grid {
  margin-bottom: 10px !important;
}

/* Inputs stay compact */
.order-card .shipping-address-form input {
  min-height: 40px !important;
  box-sizing: border-box !important;
}

/* Don't let the payment content resize the card */
.order-card #payWindow,
.order-card .pwin-wrap {
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Mobile should remain naturally sized */
@media (max-width: 820px) {
  .order-card {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ---- #shipping-form-polish ---- */
.shipping-grid-name {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 14px !important;
}
.shipping-grid-city {
  grid-template-columns: minmax(0,1fr) 54px !important;
}
.shipping-grid-bottom {
  grid-template-columns: 96px minmax(0,1fr) !important;
}

/* ---- #phone-display-style ---- */
#shippingPhoneDisplay{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;padding-top:0;box-sizing:border-box;transform:translateY(1px);white-space:nowrap;font-size:0.88em;font-family:inherit;font-weight:inherit;line-height:1;color:#3a2a1d;z-index:3}

.shipping-address-form input{
  font-size:0.88em !important;
  font-family:inherit !important;
  font-weight:inherit !important;
}

#shippingPhoneDisplay .phone-empty{
  color:rgba(58,42,29,.42);
}

#shippingPhoneDisplay .phone-caret{
  display:none;
  width:1px;
  height:1.05em;
  margin-left:1px;
  vertical-align:-0.12em;
  background:#3a2a1d;
  animation:phoneCaretBlink 1s step-end infinite;
}

.shipping-field:has(#shippingPhone:focus) #shippingPhoneDisplay .phone-caret{
  display:inline-block;
}

@keyframes phoneCaretBlink{
  50%{opacity:0;}
}

.shipping-field:has(#shippingPhone){
  position:relative;
}

.shipping-field:has(#shippingPhone) #shippingPhoneDisplay{
  box-sizing:border-box;
  padding:0 12px;
  height:100%;
  display:flex;
  align-items:center;
}

.shipping-field:has(#shippingPhone) #shippingPhoneDisplay{
  top:0;
}

#shippingPhone{
  position:relative;
  z-index:2;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:transparent;
  background:transparent !important;
}

/* ---- #unified-shipping-placeholder-color ---- */
.shipping-address-form input::placeholder{
  color:rgba(58,42,29,.42) !important;
  opacity:1 !important;
}

/* ---- #zip-state-validation-ui ---- */
#shippingAddressForm #shippingState{
  color:rgba(58,42,29,.42) !important;
  background:rgba(255,255,255,.32) !important;
  cursor:default !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
}
#shippingAddressForm #shippingState.has-value{color:#3a2a1d !important;}
#shippingAddressForm #shippingState.has-error{
  color:#a52d25 !important;
  border-color:#a52d25 !important;
  background:rgba(165,45,37,.045) !important;
}
#shippingAddressForm #shippingPostalCode.zip-error{
  color:#a52d25 !important;
  border-color:#a52d25 !important;
  background:rgba(165,45,37,.045) !important;
}
#shippingAddressForm #shippingPostalCode.zip-valid{
  border-color:rgba(58,42,29,.28) !important;
}
.zip-state-error{
  display:none !important;
}

/* ---- #order-summary-selection ---- */
/* The step label above already says 01 / 06 YOUR ORDER and 02 / 06 YOUR
   INFORMATION, so the big repeated headings come out. */
.order-card-title,
.order-card > h2,
#shippingAddressForm .shipping-address-title { display: none !important; }

/* Summary reads as a list of what's selected, not a price table. */
.order-card .summary-row.kit-row {
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(58,42,29,.12);
}
.order-card .summary-row.kit-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.order-card .summary-row.kit-row > span small {
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(58,42,29,.5);
}
.order-card .summary-row.kit-row.is-unselected { display: none; }
.order-card .summary-empty {
  display: none;
  padding: 18px 0;
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  color: rgba(58,42,29,.45);
}
.order-card .summary-empty.is-visible { display: block; }

/* Review step (05) */
#reviewBlock .review-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(58,42,29,.12);
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#reviewBlock .review-line.is-total {
  border-bottom: 0;
  padding-top: 14px;
  font-size: .8rem;
}
#reviewBlock .review-line.is-total strong { font-size: .95rem; }
#reviewBlock .review-note a {
  color: rgba(58,42,29,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#reviewBlock .review-pay-error {
  margin: 6px 0 0;
  font: 400 8px/1.3 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b42318;
  /* same type as the field errors (EMAIL ADDRESS IS NOT VALID). Its line is always reserved, empty or not, so the
     paragraph below never shifts when it appears; phones get two lines because the longer messages wrap there */
  min-height: 10.4px;
}
#reviewBlock .review-pay-error[hidden] { display: block !important; visibility: hidden; }
/* the site's global paragraph rule forces a proportional font on every <p>; this line must be the same DM Mono as the field errors */
html body #reviewBlock .review-pay-error:not(#_):not(#_) { font: 400 8px/1.3 "DM Mono", monospace !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #b42318 !important; }
@media (max-width: 560px) { #reviewBlock .review-pay-error { min-height: 20.8px; } }
#reviewBlock .review-note {
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: rgba(58,42,29,.5);
}
/* the details block at the top of REVIEW */
#reviewBlock .review-head {
  margin: 18px 0 2px;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: .16em;
  color: rgba(58,42,29,.55);
}
#reviewBlock .review-head:first-child { margin-top: 0; }
#reviewBlock .review-line.review-info span { flex: none; color: rgba(58,42,29,.55); font-size: .62rem; padding-top: 2px; }
#reviewBlock .review-line.review-info strong { min-width: 0; text-align: right; font-weight: 400; text-transform: none; overflow-wrap: anywhere; line-height: 1.5; }

/* ---- #step-slide-animation ---- */
/* Same motion as step 01 -> 02, replayed on every step change.
   BACK runs it mirrored so it reads as going backwards. */
.checkout-step.step-slide-fwd {
  animation: checkoutStepIn .38s cubic-bezier(.22,.61,.36,1) both;
}
.checkout-step.step-slide-back {
  animation: checkoutStepInBack .38s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes checkoutStepInBack {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- #progress-swipe-animation ---- */
.checkout-progress span{
  position:relative;
  overflow:hidden;
  background:rgba(58,42,29,.12) !important;
}

.checkout-progress span::after{
  content:"";
  position:absolute;
  inset:0;
  background:#3a2a1d;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}

.checkout-progress span.progress-solid::after{
  transform:scaleX(1);
}

.checkout-progress span.progress-forward::after{
  transform-origin:left center;
  animation:progressForward .6s cubic-bezier(.4,0,.2,1) forwards;
}

.checkout-progress span.progress-back::after{
  transform:scaleX(1);
  transform-origin:left center;
  animation:progressBack .6s cubic-bezier(.4,0,.2,1) forwards;
}

/* 2026-10-31 (owner): the moving end of the fill is rounded while it animates. Scaling it (scaleX) squashed the end into a flat edge,
   so the fill is now revealed with a rounded clip instead (the bar stays full width, scale 1, the clip moves). */
@keyframes progressForward{
  from{transform:scaleX(1);clip-path:inset(0 100% 0 0 round 999px);}
  to{transform:scaleX(1);clip-path:inset(0 0 0 0 round 999px);}
}

@keyframes progressBack{
  from{transform:scaleX(1);clip-path:inset(0 0 0 0 round 999px);}
  to{transform:scaleX(1);clip-path:inset(0 100% 0 0 round 999px);}
}

@media(prefers-reduced-motion:reduce){
  .checkout-progress span::after{
    animation:none !important;
    transform:scaleX(1) !important;
  }
}

/* ---- #your-order-compact-final ---- */
/* YOUR ORDER — compact typography */
.order-card > .checkout-steps .summary-row,
.order-card .summary-row {
  font-size: .78rem !important;
  line-height: 1.2 !important;
  padding: 9px 0 !important;
  gap: 12px !important;
}

.order-card > .checkout-steps .summary-row span,
.order-card .summary-row span {
  font-size: .78rem !important;
}

.order-card > .checkout-steps .summary-row strong,
.order-card .summary-row strong {
  font-size: .76rem !important;
  white-space: nowrap !important;
}

.order-card > .checkout-steps .summary-total,
.order-card .summary-total {
  font-size: 1rem !important;
  padding-top: 13px !important;
}

.order-card > .checkout-steps .summary-total span,
.order-card .summary-total span {
  font-size: .82rem !important;
}

.order-card > .checkout-steps .summary-total strong,
.order-card .summary-total strong {
  font-size: 1rem !important;
}

/* Shipping + Tax must always remain one line */
.order-card .summary-row:nth-of-type(4),
.order-card .summary-row:nth-of-type(5) {
  white-space: nowrap !important;
}

.order-card .summary-row:nth-of-type(4) strong,
.order-card .summary-row:nth-of-type(5) strong {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@media(max-width:430px){
  .order-card .summary-row {
    font-size: .74rem !important;
  }

  .order-card .summary-row span,
  .order-card .summary-row strong {
    font-size: .72rem !important;
  }
}

/* ---- #phone-display-selection-fix ---- */
#shippingPhoneDisplay,#shippingPhoneDisplay *{-moz-user-select:none!important;-ms-user-select:none!important}

/* ---- #phone-display-android-fix ---- */
#shippingPhoneDisplay,
#shippingPhoneDisplay * {
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
  pointer-events:none !important;
}

/* ---- #phone-android-final ---- */
#shippingPhone{
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
}

#shippingPhoneDisplay{
  pointer-events:auto !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:text;
}

/* ---- (unnamed block) ---- */
#shippingAddressForm .shipping-grid-city{
  grid-template-columns:minmax(0,4fr) minmax(48px,1fr) !important;
}

#checkoutStep2 #shippingAddressForm .shipping-grid-bottom{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.8fr) !important;
}

@media(max-width:600px){

  #checkoutStep2 #shippingAddressForm .shipping-grid-bottom{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.8fr) !important;
  }
}

/* ---- (unnamed block) ---- */
#checkoutStep2 #shippingState{
  color:rgba(58,42,29,.55) !important;
  -webkit-text-fill-color:rgba(58,42,29,.55) !important;
}

/* ---- #state-country-match ---- */
#checkoutStep2 #shippingAddressForm #shippingState{
  background:rgba(255,255,255,.22) !important;
  opacity:.62 !important;
}

/* ---- #country-state-text-match ---- */
#checkoutStep2 #shippingAddressForm .shipping-country{color:rgba(58,42,29,.55)!important}

#checkoutStep2 #shippingAddressForm .shipping-country span{
  color:rgba(58,42,29,.55) !important;
  opacity:1 !important;
}

/* ---- #state-country-final ---- */
#checkoutStep2 #shippingAddressForm .shipping-grid-city{
  grid-template-columns:minmax(0,7fr) minmax(0,3fr) !important;
}

#checkoutStep2 #shippingAddressForm .shipping-country{
  opacity:.62 !important;
}

/* ---- #city-state-match-final ---- */
#checkoutStep2 #shippingAddressForm #shippingCity{
  background:rgba(255,255,255,.22) !important;
  color:rgba(58,42,29,.55) !important;
  -webkit-text-fill-color:rgba(58,42,29,.55) !important;
  opacity:.62 !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* ---- #zip-location-validation-final ---- */
#checkoutStep2 #shippingAddressForm #shippingCity.zip-location-invalid,
#checkoutStep2 #shippingAddressForm #shippingState.zip-location-invalid,
#checkoutStep2 #shippingAddressForm #shippingPostalCode.zip-location-invalid{
  color:#b3261e !important;
  -webkit-text-fill-color:#b3261e !important;
  border-color:#b3261e !important;
  background:rgba(165,45,37,.045) !important;
  box-shadow:0 0 0 1px #b3261e inset !important;
}

/* ---- #zip-error-message-final ---- */
/* The ZIP error belongs to the ZIP field itself, just like the phone error. */
#checkoutStep2 #shippingAddressForm .zip-location-error{
  display:block;
  width:100%;
  height:10.4px;
  min-height:10.4px;
  margin:7px 0 0;
  padding:0;
  box-sizing:border-box;
  color:#b42318;
  font:8px/1.3 "DM Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  opacity:0;
  overflow:visible;
  transition:opacity .15s ease;
  pointer-events:none;
}

#checkoutStep2 #shippingAddressForm .zip-location-error.is-visible{
  opacity:1;
}

/* ---- #square-focus-fields ---- */
#checkoutStep2 #shippingAddressForm input:focus,
#checkoutStep2 #shippingAddressForm input:focus-visible,
#checkoutStep2 #shippingAddressForm textarea:focus,
#checkoutStep2 #shippingAddressForm select:focus,
#checkoutStep2 #shippingAddressForm .shipping-field:focus-within{
  border-radius:0 !important;
}

/* ---- #shipping-square-corners-real-final ---- */
#checkoutStep2 #shippingAddressForm .shipping-field,
#checkoutStep2 #shippingAddressForm .shipping-field input,
#checkoutStep2 #shippingAddressForm .shipping-country,
#checkoutStep2 #shippingAddressForm .shipping-field::before,
#checkoutStep2 #shippingAddressForm .shipping-field::after{
  border-radius:0 !important;
}

/* ---- #shipping-kill-all-rounding ---- */
#checkoutStep2 #shippingAddressForm,
#checkoutStep2 #shippingAddressForm *,
#checkoutStep2 #shippingAddressForm *::before,
#checkoutStep2 #shippingAddressForm *::after{
  border-radius:0 !important;
}

#checkoutStep2 #shippingAddressForm input,#checkoutStep2 #shippingAddressForm textarea,#checkoutStep2 #shippingAddressForm select{appearance:none!important;-webkit-appearance:none!important}

#checkoutStep2 #shippingAddressForm .shipping-field{
  overflow:visible !important;
}

/* ---- #shipping-square-box-final ---- */
#checkoutStep2 #shippingAddressForm .shipping-field,
#checkoutStep2 #shippingAddressForm .shipping-field > input,
#checkoutStep2 #shippingAddressForm .shipping-field > textarea,
#checkoutStep2 #shippingAddressForm .shipping-field > select,
#checkoutStep2 #shippingAddressForm .shipping-field > .shipping-country,
#checkoutStep2 #shippingAddressForm .shipping-field > div,
#checkoutStep2 #shippingAddressForm .shipping-grid,
#checkoutStep2 #shippingAddressForm input,
#checkoutStep2 #shippingAddressForm textarea,
#checkoutStep2 #shippingAddressForm select,
#checkoutStep2 #shippingAddressForm .shipping-country,
#checkoutStep2 #shippingAddressForm .shipping-field::before,
#checkoutStep2 #shippingAddressForm .shipping-field::after{
  border-radius:0 !important;
  -webkit-border-radius:0 !important;
  clip-path:none !important;
}

#checkoutStep2 #shippingAddressForm .shipping-field:focus-within,
#checkoutStep2 #shippingAddressForm .shipping-field:focus-within::before,
#checkoutStep2 #shippingAddressForm .shipping-field:focus-within::after,
#checkoutStep2 #shippingAddressForm input:focus,
#checkoutStep2 #shippingAddressForm input:focus-visible{
  border-radius:0 !important;
  -webkit-border-radius:0 !important;
  clip-path:none !important;
}

#checkoutStep2 #shippingAddressForm input{
  outline-offset:0 !important;
}

/* ---- #square-focus-border-final ---- */
#checkoutStep2 #shippingAddressForm input:focus,
#checkoutStep2 #shippingAddressForm input:focus-visible,
#checkoutStep2 #shippingAddressForm textarea:focus,
#checkoutStep2 #shippingAddressForm textarea:focus-visible,
#checkoutStep2 #shippingAddressForm select:focus,
#checkoutStep2 #shippingAddressForm select:focus-visible{
  border-radius:0 !important;
  -webkit-border-radius:0 !important;
  outline:2px solid #000 !important;
  outline-offset:-2px !important;
}

#checkoutStep2 #shippingAddressForm .shipping-field:focus-within{
  border-radius:0 !important;
  -webkit-border-radius:0 !important;
}

/* ---- #main-header-carbon-copy ---- */
/* Remove the faint vertical guide line down the middle of the page
   (a 1px gradient on body::before in style.css). */
html body::before {
  background: none !important;
}

/* Footer: vertically centre the right-hand text (© 2026 STEFAN SAMOS … and
   the link next to it) against the logo + GMK PACKAGE block. It used to sit
   ~12px high because it was pinned to the top of the row. */
footer.footer {
  align-items: center !important;
}

/* Same optical correction as the status pill: DM Mono capitals sit slightly
   high in their line box, so nudge the footer text down by the same amount. */
footer.footer .footer-brand > div{transform:translateY(0.055em)}

/* Kit quantity boxes: same focus look as the shipping fields —
   square 2px black border, no rounded browser focus ring. */
.qty input:focus,
.qty input:focus-visible {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  outline: 2px solid #000 !important;
  outline-offset: -2px !important;
}

/* IMPORTANT ORDER INFORMATION links (Legal / Order Information, Fulfillment &
   Shipping): same colour change as the header links -> var(--red), same .25s
   ease. :active shows it the moment a finger touches it on mobile. */
.checkout-legal-notice a {
  transition: color .25s ease, text-decoration-color .25s ease !important;
}
.checkout-legal-notice a:hover,
.checkout-legal-notice a:active,
.checkout-legal-notice a:focus-visible {
  color: var(--red) !important;
  text-decoration-color: var(--red) !important;
}

/* Footer uses the same background as the Group Buy section ("READY TO SHIP."). */
footer.footer {
  background: var(--paper-2) !important;
}

/* ===== Carbon copy of the main page header (stefkeyca.ps index.html) =====
   Same position, pill, logo, links, ORDER STATUS button, hover, mobile layout,
   selection/copy/long-press locks, and pull-to-refresh lock. */
/* Stable header position across every viewport (14px, the same as every other page's header). */
header.nav {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  transform: translateX(-50%) !important;
}

/* One identical, narrower ORDER STATUS pill on desktop and mobile. */
header.nav .nav-cta {
  position: absolute !important;
  top: 50% !important;
  right: 20px !important;
  bottom: auto !important;
  width: 115px !important;
  height: 28px !important;
  min-width: 115px !important;
  max-width: 115px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  flex: 0 0 115px !important;
  overflow: hidden !important;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms cubic-bezier(.2,.7,.2,1) !important;
  box-shadow: none !important;
}

/* Same lift + offset shadow behavior as CHECKOUT NOW. */
header.nav .nav-cta:hover,
header.nav .nav-cta:focus-visible {
  transform: translateY(calc(-50% - 2px)) scale(1.01) !important;
  box-shadow: 4px 4px 0 rgba(51,39,31,.12) !important; /* was .16 — a touch softer */
}

header.nav .nav-cta {
  font-size: 7px !important;
  white-space: nowrap !important;
}

header.nav .nav-cta span {
  margin-left: 8px !important;
}

@media (prefers-reduced-motion: reduce) {
  header.nav .nav-cta {
    transition: none !important;
  }
}

/* Slightly inset header logo for balanced visual spacing. */
header.nav .stef-header-mark {
  position: absolute !important;
  left: 20px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Compact header on narrow mobile viewports: keep only the logo and ORDER STATUS. */
@media (max-width: 700px) {
  header.nav .nav-links {
    display: none !important;
  }
}

/* Header interaction lock:
   only the actual navigation links remain clickable;
   the logo/header surface cannot be selected, dragged, or context-clicked. */
header.nav,
header.nav *,
header.nav .stef-header-mark,
header.nav .stef-header-mark img,
header.nav .nav-cta {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

header.nav .stef-header-mark,
header.nav .stef-header-mark img {
  pointer-events: none !important;
}

/* Links, buttons & images (ORDER STATUS, CHECKOUT NOW, MORE INFO, BACK TO TOP,
   the keycap renders, both STEF logos, ...):
   no blue tap-highlight box, no text selection, no long-press/right-click menu
   (the JS "link-button-lock" below handles the menu), no dragging.
   Everything else on the page stays selectable as normal.
   Keyboard focus outlines are unaffected. */
html {
  -webkit-tap-highlight-color: transparent !important;
}
a,a *,button,button *,[role="button"],[role="button"] *,img,svg{-webkit-tap-highlight-color:transparent!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important;user-drag:none!important}

header.nav {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Disable pull-to-refresh (Chrome/Android, Samsung Internet, Firefox, and
   Safari on iOS 16+). Normal scrolling is unaffected; only the "pull past the
   top to reload" gesture (and the rubber-band bounce) is turned off. */
html,
body {
  overscroll-behavior-y: none !important;
}

/* Same colour change as the header links (.nav-links a:hover -> var(--red)),
   now also on MORE INFO and the footer links (LEGAL / ORDER INFORMATION,
   FULFILLMENT & SHIPPING, BACK TO TOP). :active gives feedback the moment a
   finger touches it on mobile; :hover covers desktop; :focus-visible keyboards. */
a.text-link,footer.footer .legal a{transition:color .25s ease, border-color .25s ease, text-decoration-color .25s ease!important}
a.text-link:hover,a.text-link:active,a.text-link:focus-visible,footer.footer .legal a:hover,footer.footer .legal a:active,footer.footer .legal a:focus-visible{color:var(--red)!important;border-color:var(--red)!important;/* MORE INFO's underline follows */;text-decoration-color:var(--red)!important;/* footer links' underline follows */}

/* ---- #blur-tint-neutral ---- */
/* Header blur tint: neutral grey instead of beige, same tone + curve as the
   bottom blur, so both read the same over light and dark sections.
   Only the tint changes; the header's blur and fade are untouched. */
html body::after {
  background: linear-gradient(
      to bottom,
      rgba(128,128,128,0.140) 0.0%,
      rgba(128,128,128,0.140) 6.2%,
      rgba(128,128,128,0.138) 12.5%,
      rgba(128,128,128,0.133) 18.8%,
      rgba(128,128,128,0.126) 25.0%,
      rgba(128,128,128,0.115) 31.2%,
      rgba(128,128,128,0.101) 37.5%,
      rgba(128,128,128,0.086) 43.8%,
      rgba(128,128,128,0.070) 50.0%,
      rgba(128,128,128,0.054) 56.2%,
      rgba(128,128,128,0.039) 62.5%,
      rgba(128,128,128,0.025) 68.8%,
      rgba(128,128,128,0.014) 75.0%,
      rgba(128,128,128,0.007) 81.2%,
      rgba(128,128,128,0.002) 87.5%,
      rgba(128,128,128,0.000) 93.8%,
      rgba(128,128,128,0.000) 100.0%
    ) !important;
}

/* ---- #kits-lock ---- */
/* The kit selector is only editable on step 01. Once the buyer continues to
   SHIPPING or PAYMENT it greys out and stops responding; going BACK to step 01
   makes it live again. */
.kits-card {
  transition: opacity .25s ease, filter .25s ease;
}
.kits-card.kits-locked {
  pointer-events: none !important;
  cursor: default !important;
}
.kits-card.kits-locked h2,
.kits-card.kits-locked .kit-option,
.kits-card.kits-locked .qty button,
.kits-card.kits-locked .qty input {
  cursor: default !important;
}

/* ---- #kits-card-stable-height ---- */
/* Keep the left column at its natural height. It used to be stretched to match
   the right-hand panel, so it grew taller on steps 02/03 when the shipping form
   and payment box made that panel taller. */
.checkout-grid {
  align-items: start !important;
}
.checkout-left {
  align-self: start !important;
}
.checkout-left > .checkout-card {
  height: auto !important;
}

/* ---- #inline-field-validation ---- */
/* Inline validation for the shipping form: red field + a small message under it,
   matching the ZIP / phone error styling. No pop-ups.
   Every row reserves one message line (hidden when empty), so the vertical
   rhythm of the form never changes whether an error is showing or not. */
#shippingAddressForm input.field-invalid,
#checkoutStep2 #shippingAddressForm .shipping-field input.field-invalid,
#checkoutStep2 #shippingAddressForm input.field-invalid,
#checkoutStep2 #shippingAddressForm #shippingCity.field-invalid,
#checkoutStep2 #shippingAddressForm #shippingState.field-invalid,
#shippingAddressForm #shippingCity.field-invalid,
#shippingAddressForm #shippingState.field-invalid {
  color: #a52d25 !important;
  border-color: #a52d25 !important;
  background: rgba(165,45,37,.045) !important;
  box-shadow: inset 0 0 0 1px #a52d25 !important;
}

/* Reserved message line (every field has one, the phone's too). */
#shippingAddressForm .field-msg {
  display: block !important;
  grid-column: 1 / -1;
  height: 10.4px !important;
  min-height: 10.4px !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap;
  visibility: hidden;
  color: #b42318;
  font: 8px/1.3 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#shippingAddressForm .field-msg.is-visible {
  visibility: visible;
}

/* ---- #shipping-spacing-final ---- */
/* One rhythm for the whole form: every row is followed by the same gap,
   and each row reserves its message line, so nothing moves when errors appear.
   (The old markup had unclosed field wrappers, which is why the gaps between
   rows were all different.) */
#shippingAddressForm .checkout-block > .shipping-field,
#shippingAddressForm .checkout-block > .shipping-grid,
#shippingAddressForm > .shipping-field,
#shippingAddressForm > .shipping-grid {
  margin: 0 0 18px !important;
}
#shippingAddressForm .shipping-grid > .shipping-field {
  margin: 0 !important;
}
/* Only the columns get a gap; the reserved message line sits directly under
   the inputs, exactly like it does on the single-field rows. */
#shippingAddressForm .shipping-grid {
  column-gap: 14px !important;
  row-gap: 0 !important;
}
#shippingAddressForm .shipping-field label {
  margin: 0 0 7px !important;
}

/* Beat the older, more specific rules further up the page
   (#checkoutStep2 #shippingAddressForm .shipping-field { margin: 0 0 20px }
   and .shipping-grid-city > * { grid-column: auto }). */
html body #checkoutStep2 :is(#shippingAddressForm, #contactBlock, #shippingBlock) > .shipping-field,
html body #checkoutStep2 :is(#shippingAddressForm, #contactBlock, #shippingBlock) > .shipping-grid,
html body :is(#shippingAddressForm, #contactBlock, #shippingBlock) > .shipping-field,
html body :is(#shippingAddressForm, #contactBlock, #shippingBlock) > .shipping-grid {
  margin: 0 0 18px !important;
}
html body #checkoutStep2 #shippingAddressForm > .shipping-grid:last-child,
html body #shippingAddressForm > .shipping-grid:last-child {
  margin-bottom: 0 !important;
}
html body #checkoutStep2 #shippingAddressForm .shipping-grid > .shipping-field,
html body #shippingAddressForm .shipping-grid > .shipping-field {
  margin: 0 !important;
}
html body #checkoutStep2 #shippingAddressForm .shipping-grid,
html body #shippingAddressForm .shipping-grid {
  column-gap: 14px !important;
  row-gap: 0 !important;
}
html body #checkoutStep2 #shippingAddressForm .shipping-grid > .field-msg,
html body #shippingAddressForm .shipping-grid > .field-msg {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* ---- #four-step-checkout ---- */
/* The shipping card is split into two steps: 02 CONTACT and 03 SHIPPING.
   display:contents keeps the existing form layout/spacing rules working. */
#shippingAddressForm .checkout-block { display: contents; }
#shippingAddressForm .checkout-block[hidden] { display: none !important; }

.checkout-inline-notice {
  display: none;
  margin: 0 0 12px !important;
  color: #b42318;
  font: 8px/1.4 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.checkout-inline-notice.is-visible { display: block; }

/* ---- #round-nav-and-shipping-method ---- */
/* Old per-step buttons stay in the page (their logic still runs) but are hidden;
   the round BACK / NEXT pair replaces them visually on every step. */
html body .order-card .checkout-step-actions,
html body #checkoutStep1 .checkout-step-actions,
html body #checkoutStep2 .checkout-step-actions,
html body #checkoutStep2 .checkout-step-actions.shipping-actions-final,
html body #checkoutStep3 .checkout-step-actions,
html body .order-card .checkout-review-actions { display: none !important; }

/* (the rest of this pair's look is set by the later blocks: #checkout-nav-bar, V4, V6, V9, V10) */
.checkout-round-nav { justify-content: space-between; }
.checkout-round-nav .round-next.is-locked { filter: grayscale(1); }

/* ---- deposit checkout: the one-of-each note, and shipping / tax "later" + the $20 due today ---- */
html body .kits-card .kit-limit {
  margin: -6px 0 16px !important;
  font: 500 9px/1.4 "DM Mono", monospace !important;
  letter-spacing: .14em !important;
  color: #a52d25 !important;
}

/* accessories: a tick list under the kits (one of each), and their lines in the order summary */
html body .kits-card .acc-pick { margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed rgba(58,42,29,.35); }
/* two per row, each its own separate box */
html body .kits-card .acc-pick-body { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding-top: 12px; overflow: hidden; }
@media (max-width: 420px) { html body .kits-card .acc-pick-body { grid-template-columns: 1fr !important; } }
/* the header row is the toggle: closed by default, the arrow turns when it opens */
html body .kits-card .acc-pick-title { list-style: none; cursor: pointer; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .16em; color: #33271f; display: flex; align-items: center; gap: 12px; padding: 4px 0; -webkit-user-select: none; user-select: none; }
html body .kits-card .acc-pick-title::-webkit-details-marker { display: none; }
html body .kits-card .acc-pick-note { margin-left: auto; color: rgba(58,42,29,.55); }
html body .kits-card .acc-pick-arrow { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border: 1.5px solid #33271f; border-radius: 6px; fill: none; stroke: #33271f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .kits-card .acc-pick[open]:not(.is-closing) .acc-pick-arrow { transform: rotate(180deg); }   /* V21: flips back as soon as closing starts */
html body .kits-card .acc-pick-title:hover .acc-pick-name, html body .kits-card .acc-pick-title:active .acc-pick-name { color: #a52d25; }
/* the arrow button reacts: red under the mouse / finger, filled red while the list is open */
html body .kits-card .acc-pick-arrow { transition: transform .26s cubic-bezier(.2,.7,.2,1), background-color .16s ease, border-color .16s ease, stroke .16s ease; }   /* V21: the flip animates both ways */
html body .kits-card .acc-pick-title:hover .acc-pick-arrow,
html body .kits-card .acc-pick-title:active .acc-pick-arrow,
html body .kits-card .acc-pick-title:focus-visible .acc-pick-arrow { border-color: #a52d25; stroke: #a52d25; }
html body .kits-card .acc-pick[open]:not(.is-closing) .acc-pick-arrow { background: #b8382e; border-color: #33271f; stroke: #fffaf0; }
/* a small heading over each pair, spanning both columns */
html body .kits-card .acc-group { grid-column: 1 / -1; margin: 6px 0 -2px; font: 500 8.5px/1 "DM Mono", monospace; letter-spacing: .16em; color: #a52d25; }
html body .kits-card .acc-group:first-child { margin-top: 0; }
html body .kits-card .acc-group i { font-style: normal; color: #2c5a8c; }
/* slim row: tick | name + size | price on the right */
html body .kits-card .acc-opt { position: relative; box-sizing: border-box; margin: 0 !important; min-width: 0; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 12px; border: 1px solid rgba(58,42,29,.22); background: rgba(255,250,239,.6); cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
html body .kits-card .acc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html body .kits-card .acc-box { width: 18px; height: 18px; border: 2px solid #33271f; border-radius: 4px; background: #fffaf0; display: grid; place-items: center; }
html body .kits-card .acc-box:after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fffaf0; border-bottom: 2px solid #fffaf0; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
html body .kits-card .acc-opt input:checked + .acc-box { background: #b8382e; }
html body .kits-card .acc-opt input:checked + .acc-box:after { opacity: 1; }
html body .kits-card .acc-opt input:focus-visible + .acc-box { outline: 2px solid #2c5a8c; outline-offset: 2px; }
html body .kits-card .acc-opt:has(input:checked) { border-color: #33271f; background: #fffaf0; }
html body .kits-card .acc-txt strong { display: block; font: 600 13px/1.2 "Epilogue", system-ui, sans-serif; color: #1f1813; }
html body .kits-card .acc-txt small { display: block; margin-top: 3px; font: 400 9px/1.3 "DM Mono", monospace; letter-spacing: .1em; color: rgba(58,42,29,.6); text-transform: uppercase; }
html body .kits-card .acc-txt { min-width: 0; }
/* the accessory's number, like the kits' 01 / 02 / 03 */
html body .kits-card .acc-n { font: 500 8px/1 "DM Mono", monospace; font-style: normal; letter-spacing: .1em; color: rgba(58,42,29,.55); margin-right: 6px; vertical-align: 1px; }
html body .kits-card .acc-txt small .acc-desc { text-transform: none; letter-spacing: .04em; }
html body .kits-card .acc-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .kits-card .acc-opt em { font: 500 12px/1 "DM Mono", monospace; font-style: normal; color: #33271f; white-space: nowrap; }
html body .summary-row.acc-row.is-unselected { display: none !important; }
/* not on sale yet (the RAMA artisans): greyed out, can't be ticked, "COMING SOON" where the price goes */
html body .kits-card .acc-pick-body { align-items: start; }
/* 2026-10-27: breathing room under the open accessories list, before the card's own bottom edge (it sat tight against it) */
html body .kits-card details.acc-pick .acc-pick-body { padding-bottom: 14px; }   /* no !important: an !important value beats the open/close animation, which made the bottom edge snap */
html body .kits-card .acc-opt.is-soon { cursor: not-allowed; opacity: .55; border-style: dashed; background: rgba(58,42,29,.04); }
html body .kits-card .acc-opt.is-soon .acc-box { border-color: rgba(51,39,31,.45); background: transparent; }
html body .kits-card .acc-opt.is-soon em { font-size: 8.5px; letter-spacing: .14em; color: rgba(58,42,29,.8); }
/* the cable's style choice: opens right under the cable's box, joined to it */
html body .kits-card .acc-cable { display: flex; flex-direction: column; min-width: 0; }
html body .kits-card .acc-style { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 12px 10px; border: 1px solid #33271f; border-top: 1px dashed rgba(58,42,29,.35); background: #fffaf0; animation: accStyleIn .22s cubic-bezier(.2,.7,.2,1) both; }
html body .kits-card .acc-style[hidden] { display: none; }
html body .kits-card .acc-style-k { margin-right: 4px; font: 500 8px/1 "DM Mono", monospace; letter-spacing: .16em; color: rgba(58,42,29,.6); }
html body .kits-card .acc-style label { position: relative; margin: 0; cursor: pointer; }
html body .kits-card .acc-style input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none; }
html body .kits-card .acc-style label span { display: inline-block; padding: 6px 10px 5px; border: 1.5px solid #33271f; border-radius: 999px; background: #fffaf0; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #33271f; transition: background-color .15s ease, color .15s ease; }
html body .kits-card .acc-style input:checked + span { background: #b8382e; color: #fffaf0; }
html body .kits-card .acc-style input:focus-visible + span { outline: 2px solid #2c5a8c; outline-offset: 2px; }
@media (hover: hover) { html body .kits-card .acc-style label:hover input:not(:checked) + span { color: #a52d25; border-color: #a52d25; } }
@keyframes accStyleIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .kits-card .acc-style { animation: none; } }
html body .summary-row.acc-row small b { font-weight: inherit; }
/* Select your kits: the − / + buttons get the same rounded corners as the number box between them */
html body.checkout-page .kits-card .qty button,
html body.checkout-page .kits-card .qty input { border-radius: 8px !important; }
html body .summary-row.summary-deposit span,
html body .summary-row.summary-deposit strong { color: #a52d25 !important; }
/* Shipping / Tax / Due today: same rhythm as the kit rows, and the deposit line set apart
   with breathing room above it (the gap that used to follow the subtotal now follows it). */
html body #orderBlock .summary-row.summary-deposit{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;padding:8px 0!important}
html body #orderBlock .summary-row.summary-deposit span,
html body #orderBlock .summary-row.summary-deposit strong { white-space: nowrap !important; }
html body #shippingAddressForm #orderBlock .summary-total { margin-bottom: 0 !important; }
html body #orderBlock .summary-row.summary-deposit {
  margin: 2px 0 var(--fit-gap, 14px) !important;
  padding-top: 9px !important;
  border-top: 1.5px solid #3b2c22 !important;
  border-bottom: 0 !important;
}
html body #orderBlock .summary-row.summary-deposit strong { font-size: 15px !important; font-weight: 700 !important; }
html body #shippingAddressForm #orderBlock .summary-row.summary-deposit { margin-bottom: 2px !important; }
html body #orderBlock .summary-row.summary-refund { display: block !important; padding: 0 !important; border: 0 !important; margin: 0 0 var(--fit-gap, 14px) !important; }
html body #orderBlock .summary-refund p { margin: 0 !important; font: 400 9px/1.6 "DM Mono", monospace !important; letter-spacing: .06em !important; color: rgba(58,42,29,.65) !important; text-transform: none !important; }
html body #orderBlock .summary-refund b { font-weight: 600 !important; color: #a52d25 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
html body #orderBlock .summary-refund a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---- #step-gate-style ---- */
/* CONTINUE stays greyed out until the step's fields are filled and verified. */
#checkoutStep2 .checkout-next.is-step-locked {
  opacity: .42 !important;
  filter: grayscale(1) !important;
  cursor: default !important;
}
.checkout-inline-notice.is-info {
  color: rgba(58,42,29,.55);
}

/* ---- #checkout-new-flow ---- */
/* 01 YOUR ORDER: the kit summary sits above the name fields. */
html body #orderBlock .summary-row { margin: 0 !important; }
html body #orderBlock .summary-total { margin: 4px 0 var(--fit-gap, 14px) !important; }
html body #orderBlock .shipping-grid-name { margin-top: 4px !important; }

/* ---- #checkout-nav-bar ---- */
/* BACK and CONTINUE: one squared-off bar in the site's own language
   (thin brown outline, dark fill, DM Mono caps), same height as the inputs. */
html body .order-card .checkout-round-nav {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: auto 0 0 !important;
  padding-top: 14px !important;
  flex: 0 0 auto !important;
}
html body .order-card .checkout-round-nav button{min-width:0!important;font:500 9px/1 "DM Mono", monospace!important;text-transform:uppercase!important;white-space:nowrap!important;cursor:pointer}
html body .order-card .checkout-round-nav .round-back{flex:0 0 auto!important;width:auto!important;padding:0 20px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}

html body .order-card .checkout-round-nav .round-next{flex:1 1 auto!important;display:inline-flex!important;align-items:center!important}
html body .order-card .checkout-round-nav .round-next .nav-arrow{letter-spacing:0}
/* Not ready yet: the same dark button, just faded, instead of a washed-out grey. */
html body .order-card .checkout-round-nav .round-next.is-locked,html body .order-card .checkout-round-nav .round-next:disabled{color:#f4efe4!important}
html body .order-card .checkout-round-nav .is-absent { display: none !important; }

/* Address + Apt share a row, split like City + State. */
html body #shippingAddressForm .shipping-grid-address {
  display: grid !important;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) !important;
}
html body #shippingAddressForm .shipping-grid-address > .field-msg { grid-column: 1 / -1 !important; }

/* An empty field marked red stays red while you tap into it (red focus
   line instead of black); typing clears the error and it turns normal. */
html body #checkoutStep2 #shippingAddressForm input.field-invalid:focus,
html body #checkoutStep2 #shippingAddressForm input.field-invalid:focus-visible,
html body #checkoutStep2 #shippingAddressForm input.zip-location-error:focus,
html body #checkoutStep2 #shippingAddressForm input.zip-location-invalid:focus,
html body #checkoutStep2 #shippingAddressForm input.zip-location-invalid:focus-visible,
html body #checkoutStep2 #shippingAddressForm input.zip-location-error:focus-visible {
  outline: 2px solid #a52d25 !important;
  outline-offset: -2px !important;
}

@media (min-width: 821px) {
  /* The step's content takes whatever height is left above the pinned bar,
     and the script shrinks it until it fits there. */
  /* card > stage > [progress, active step, button bar]: the stage fills the
     card, the step takes the space that's left, the bar sits at the bottom. */
  html body .checkout-grid > .order-card > .checkout-steps {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body .checkout-grid > .order-card .checkout-steps > .checkout-progress { flex: 0 0 auto !important; }
  html body .checkout-grid > .order-card .checkout-step.active{overflow:hidden!important}

}

/* ---- #checkout-panel-fit-final ---- */
/* ==========================================================================
   LAST WORD ON THE CHECKOUT PANEL (kept at the very end so nothing overrides it)
   ========================================================================== */

/* City / State: filled in from the ZIP, so no black focus outline on tap. */
html body #checkoutStep2 #shippingAddressForm #shippingCity:focus,
html body #checkoutStep2 #shippingAddressForm #shippingCity:focus-visible,
html body #checkoutStep2 #shippingAddressForm #shippingState:focus,
html body #checkoutStep2 #shippingAddressForm #shippingState:focus-visible,
html body #shippingAddressForm #shippingCity:focus,
html body #shippingAddressForm #shippingState:focus {
  outline: none !important;
}

/* ZIP message: sits under the ZIP / COUNTRY row, spans exactly the width of
   that row (ZIP left edge to COUNTRY right edge) and wraps to a second line
   instead of running past the edge. */
html body #checkoutStep2 #shippingAddressForm .shipping-grid-bottom > .zip-location-error{grid-column:1 / -1!important;width:auto!important;max-width:100%!important;height:auto!important;min-height:10.4px!important;white-space:normal!important;overflow:visible!important}
html body #checkoutStep2 #shippingAddressForm .shipping-grid-bottom > .zip-location-error:not(.is-visible) { display: none !important; }
html body #checkoutStep2 #shippingAddressForm .shipping-grid-bottom:has(> .zip-location-error.is-visible) > .field-msg:not(.is-visible) { display: none !important; }

@media (min-width: 821px) {
  /* The left column is never stretched by the right one. */
  html body .checkout-grid { align-items: start !important; }
  html body .checkout-grid > .checkout-left { align-self: start !important; }

  /* The right panel: a flex column whose height the script sets to match the
     left column exactly. BACK / NEXT sit at the bottom. */
  html body .checkout-grid > .order-card {
    display: flex !important;
    flex-direction: column !important;
  }
  html body .checkout-grid > .order-card .checkout-step.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body .checkout-grid > .order-card .checkout-step-actions { margin-top: auto !important; }

  /* Uniform rows in steps 02 and 03. Every row (a single field or a pair)
     gets the same gap below it, and every error line has the same size and
     the same distance from its field. The gap and input height are CSS
     variables that the script below tightens just enough for the step to
     fit the panel, so there is never a scroll bar. */
  html body .checkout-grid #shippingAddressForm .checkout-block > .shipping-field,
  html body .checkout-grid #shippingAddressForm .checkout-block > .shipping-grid {
    margin: 0 0 var(--fit-gap, 14px) !important;
  }
  html body .checkout-grid #shippingAddressForm .checkout-block .shipping-grid > .shipping-field { margin: 0 !important; }
  html body .checkout-grid #shippingAddressForm .shipping-grid { row-gap: 0 !important; column-gap: 14px !important; }
  html body .checkout-grid #shippingAddressForm .shipping-field > label { margin: 0 0 var(--fit-label, 6px) !important; }
  html body .checkout-grid #shippingAddressForm .shipping-field > input:not([type="radio"]):not([type="checkbox"]),
  html body .checkout-grid #shippingAddressForm .shipping-country {
    height: var(--fit-input, 46px) !important;
    min-height: var(--fit-input, 46px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* No scroll bar, ever. */
  html body .checkout-grid > .order-card { overflow: hidden !important; }
}

/* Every error line is identical: same font, size, spacing and position. */
html body #shippingAddressForm .field-msg,
html body #checkoutStep2 #shippingAddressForm .shipping-grid-bottom > .zip-location-error {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font: 8px/1.3 "DM Mono", monospace !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #b42318 !important;
}
html body #shippingAddressForm .field-msg {
  display: block !important;
  height: 10.4px !important;
  min-height: 10.4px !important;
  white-space: nowrap !important;
}

/* ---- #checkout-v4-order-pinned ---- */
/* V4 · 01 YOUR ORDER (desktop, where the panel has a fixed height): kits and
   accessories list from the top; Subtotal, Due today, the refund line and
   First / Last name are one block pinned right above the buttons, so they
   never move when items are added or removed. The name row keeps its
   reserved error line. Only applies while step 01 is showing. */
@media (min-width: 821px) {
  html body .checkout-grid > .order-card #checkoutStep2.active > #shippingAddressForm:has(> #orderBlock:not([hidden])) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body .checkout-grid > .order-card #shippingAddressForm > #orderBlock:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body .checkout-grid > .order-card #shippingAddressForm > #orderBlock > .summary-total {
    margin-top: auto !important;
  }
  html body .checkout-grid > .order-card #shippingAddressForm > #orderBlock > .shipping-grid-name {
    margin: 4px 0 18px !important;   /* 2026-10-19: Email and Phone follow, so the same 18px gap as between every other field */
    flex: 0 0 auto !important;
  }
}

/* ---- #checkout-v4-buttons ---- */
/* V4 · BACK / CONTINUE styled like the payment window's PAY button
   (48px, square, 10px DM Mono at .14em, hover #4a3a2f, faded .45 when locked).
   Look only: the buttons' behaviour is unchanged. */
html body .order-card .checkout-round-nav button {
  line-height: 1 !important;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease !important;
}
html body .order-card .checkout-round-nav .round-next:hover:not(.is-locked):not(:disabled) {
  background: #4a3a2f !important;
  border-color: #33271f !important;
}

/* ---- #checkout-v5-cardform-look ---- */
/* V5 · Fields and buttons in steps 01-04 copy the payment pop-up exactly,
   as it is actually drawn by the theme (gx-app.css + retro.css + retro3.css).
   LOOK ONLY: borders, corners, fill and shadows. Font, padding and height are
   NOT changed, so the phone number's (XXX) XXX-XXXX layer stays where it is,
   and no script, id or behaviour is touched. */

/* ---- fields: like CARD NUMBER (2px ink, 8px corners, #fffdf7) ---- */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm :is(#shippingFirstName,#shippingLastName,#shippingEmail,#shippingPhone,#shippingLine1,#shippingLine2,#shippingCity,#shippingState,#shippingPostalCode),
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-country {
  border: 2px solid #3b2c22 !important;
  border-radius: 8px !important;
  background: #fffdf7 !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important;
}
/* focus: the card form's hard 3px ink shadow (City / State are filled from the ZIP, so they don't get it) */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm :is(#shippingFirstName,#shippingLastName,#shippingEmail,#shippingPhone,#shippingLine1,#shippingLine2,#shippingPostalCode):focus,
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm :is(#shippingFirstName,#shippingLastName,#shippingEmail,#shippingPhone,#shippingLine1,#shippingLine2,#shippingPostalCode):focus-visible {
  box-shadow: 3px 3px 0 #3b2c22 !important;
  outline: none !important;
}
/* error: the card form's red border + pale red fill */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm :is(#shippingFirstName,#shippingLastName,#shippingEmail,#shippingPhone,#shippingLine1,#shippingLine2,#shippingCity,#shippingState,#shippingPostalCode):is(.field-invalid,.zip-error,.has-error,.zip-location-error,.zip-location-invalid) {
  border-color: #b8382e !important;
  background: #f7e4de !important;
}
/* room for the focus shadow inside the panel, which clips anything past its edge */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-field { padding-right: 4px !important; box-sizing: border-box !important; }

/* ---- #addr-combo ---- */
/* ADDRESS & APT / SUITE: one field box that holds two inputs, street ; apt, laid out as ONE line of text. The street input is
   exactly as wide as its text and the semicolon sits right after it, so the semicolon moves as you type; the apt input fills the
   rest of the line. (The widths are set by the script below.) The box carries the border, fill, focus shadow and error colour;
   the inputs inside are bare. Placeholders are grey, the semicolon is solid ink. */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo:not(#_) {
  display: flex !important; align-items: center; width: 100% !important; box-sizing: border-box !important;
  height: 46px !important; min-height: 46px !important;
  border: 2px solid #3b2c22 !important; border-radius: 8px !important; background: #fffdf7 !important;
  box-shadow: none !important; overflow: hidden; cursor: text;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important;
}
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo:not(#_):focus-within { box-shadow: 3px 3px 0 #3b2c22 !important; overflow: visible; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo:not(#_):has(#shippingLine1.field-invalid) { border-color: #b8382e !important; background: #f7e4de !important; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo > input:not(#_):not(#_):not(#_) {
  flex: 0 1 auto; min-width: 0; width: 9em !important; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  opacity: 1 !important; padding: 0 0 0 13px !important; text-overflow: ellipsis;
  font-family: var(--f-text) !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: .06em !important;
  color: #33271f !important; -webkit-text-fill-color: #33271f !important;
}
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo > #shippingLine2:not(#_):not(#_):not(#_) {
  flex: 1 0 auto; min-width: 4.5em; width: 6.5em !important; padding: 0 13px 0 .5em !important;
}
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo > input:not(#_):not(#_)::placeholder {
  color: rgba(51,39,31,.35) !important; -webkit-text-fill-color: rgba(51,39,31,.35) !important; opacity: 1 !important;
}
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .addr-combo > .addr-semi:not(#_) {
  flex: none; color: #33271f; font: 400 15px/1 var(--f-text); letter-spacing: 0; user-select: none; -webkit-user-select: none; pointer-events: none;
}

/* ---- #co-busy ---- */
/* LOADING: wherever the checkout is taking you on to the next part (CONTINUE after the address check, CONTINUE TO PAYMENT while the
   payment window opens, PAY $20 while the card is processed), the words stay and the arrow on the right is replaced by a small
   loading circle. Copied from the sign-in pages (admin.css, .btn[aria-busy="true"]): 15px circle, 2.5px line in the text colour with
   the right side open, one turn every .7s (1.1s when the phone asks for reduced motion, so it still visibly spins), the button
   stays solid and can't be pressed again meanwhile. */
/* The arrow itself becomes the circle (same element, same slot, so nothing else on the button moves). It is drawn like the sign-in
   page's: its outer circle is 20px and its right edge sits where the arrow's right edge was, which is exactly where the sign-in
   page's circle ends (the button's right padding). It turns with the `rotate` property because the arrow's own rules pin
   `transform` with !important, which would stop a transform animation. */
@keyframes coSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
html body.checkout-page button.co-busy:not(#_):not(#_) { opacity: 1 !important; pointer-events: none; cursor: default; }
html body.checkout-page button.co-busy:not(#_):not(#_) .nav-arrow:not(#_):not(#_):not(#_):not(#_):not(#_) {
  display: block !important; flex: none !important; box-sizing: content-box !important;
  width: 15px !important; height: 15px !important; margin: 0 0 0 -9px !important; padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important; color: inherit !important; overflow: visible !important;
  background: none !important; -webkit-mask: none !important; mask: none !important;
  border: 2.5px solid currentColor !important; border-right-color: transparent !important; border-radius: 50% !important;
  animation: coSpin .7s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  html body.checkout-page button.co-busy:not(#_):not(#_) .nav-arrow:not(#_):not(#_):not(#_):not(#_):not(#_) { animation: coSpin 1.1s linear infinite !important; }
}

/* ---- #checkout-v6-buttons ---- */
/* V6 · BACK and CONTINUE are the site's red button, the same as the home page's
   SEE COLLECTION N° 001 (.button.button-red as drawn by retro.css, retro3.css,
   retro4.css and sk-site.css): 36px, 9px corners, 1.5px ink border, red fill,
   cream text, DM Mono 10.5px at .11em, 3px hard ink shadow.
   Hover / press / release are NOT styled here: the site's shared press script
   (sk-ui.js, part 6) runs them exactly as on every other button (hover sinks a
   third of the way into the shadow, pressing sinks all the way, letting go
   pops it back). The specificity is kept below that script's rules on purpose
   so it can take over the shadow while hovered / pressed. */
html body.checkout-page.gx .order-card .checkout-round-nav { padding: 14px 4px 4px 0 !important; }
html body.checkout-page.gx .order-card .checkout-round-nav button {
  height: 36px !important;
  min-height: 0 !important;
  border: 1.5px solid #3b2c22 !important;
  border-radius: 9px !important;
  background: #b23a34 !important;
  color: #f7f0df !important;
  font-size: 10.5px !important;
  letter-spacing: .11em !important;
  box-shadow: 3px 3px 0 #3b2c22 !important;
  transform: none !important;
  opacity: 1;
}
html body.checkout-page.gx .order-card .checkout-round-nav button:hover { background: #b23a34 !important; border-color: #3b2c22 !important; color: #f7f0df !important; }
html body.checkout-page.gx .order-card .checkout-round-nav .round-next .nav-arrow { transform: none !important; transition: none !important; }
/* not ready yet: same red button, faded (it still answers a tap by showing what's missing) */
html body.checkout-page.gx .order-card .checkout-round-nav .round-next.is-locked,
html body.checkout-page.gx .order-card .checkout-round-nav .round-next:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ---- #checkout-v7-name-errors ---- */
/* V7 · The name row used to share one error line across both fields. Now each
   field has its own line directly under it: FIRST NAME IS MISSING under First
   name, LAST NAME IS MISSING under Last name. The validation script is not
   changed; it still writes to the shared line, which is hidden, and the script
   below copies each message to the right field. Same look and reserved space. */
html body #checkoutStep2 #shippingAddressForm .shipping-grid-name > .field-msg:not(.v7-msg) { display: none !important; }
html body #checkoutStep2 #shippingAddressForm .shipping-grid-name > .field-msg.v7-msg-first { grid-column: 1 !important; width: auto !important; }
html body #checkoutStep2 #shippingAddressForm .shipping-grid-name > .field-msg.v7-msg-last { grid-column: 2 !important; width: auto !important; }

/* ---- #checkout-v8-field-height ---- */
/* V8 · On desktop the address fields keep their fit-to-panel height (44px,
   shrunk only if a step wouldn't otherwise fit). On phones there is no fixed
   panel, so they are simply 44px, the site-wide field height (sk-site.css V43). */
@media (max-width: 820px) {
  html body #checkoutStep2 #shippingAddressForm .shipping-field > input:not([type="radio"]):not([type="checkbox"]),
  html body #checkoutStep2 #shippingAddressForm .shipping-country {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

/* ---- #checkout-v9-button-height ---- */
/* V9 (changed 2026-10-19) · BACK / CONTINUE / PAY are exactly as tall as the home page's SEE COLLECTION N° 001 button: 36px, the
   site's button height (sk-site.css V43). EVERY field in the checkout (contact, shipping, billing, card) is 44px, the height of the
   payment / billing form's fields, on every step and window size: the address fields no longer shrink to fit the panel. */
html body.checkout-page.gx .order-card .checkout-round-nav button:not(#_):not(#_):not(#_) {
  height: 36px !important;
  min-height: 0 !important;
}
html body.checkout-page.gx #payWindow .pay-submit:not(#_):not(#_):not(#_) {
  height: 36px !important;
  min-height: 0 !important;
}
html body.checkout-page.gx :is(#shippingAddressForm input:not([type="radio"]):not([type="checkbox"]), #shippingAddressForm select, #shippingAddressForm .shipping-country, #shippingAddressForm .sk-sel-btn, .pay-field input:not([type="radio"]):not([type="checkbox"]), .pay-field select, .pay-field .sk-sel-btn, #payCardName, input[id^="tlpy_"], #billCountry):not(#_):not(#_):not(#_) {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ---- #checkout-v10-continue-layout ---- */
/* V10 · CONTINUE TO … is laid out exactly like the home page's red buttons
   (SEE COLLECTION N° 001, ORDER STATUS): the words on the left, the arrow on the
   right, same side padding and gap, and the same arrow icon (the → character is
   swapped for the site's arrow drawing, in the text colour). */
html body.checkout-page.gx .order-card .checkout-round-nav .round-next:not(#_):not(#_):not(#_) {
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 18px 0 22px !important;
}
html body.checkout-page.gx .order-card .checkout-round-nav .round-next .nav-arrow:not(#_) {
  flex: none !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  font-size: inherit !important;
  color: transparent !important;
  overflow: hidden !important;
  background: #f7f0df !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  transform: none !important;
}

/* ---- #checkout-v11-manifest ---- */
/* V11 · The SHIPPING MANIFEST strip above the checkout: wherever its PACKED BY STEF / U.S. ONLY / TRACKED tags are hidden
   (phones and tablets), the line moves to the right edge, opposite the barcode. On narrow phones "· GMK PACKAGE" is dropped so
   the line stays short (it reads SHIPPING MANIFEST · COLLECTION N° 001). */
@media (max-width: 800px) {
  html body.checkout-page .gx-co-top .gx-co-label { margin-left: auto; text-align: right; }
}
@media (max-width: 600px) {
  html body.checkout-page .gx-co-top .gx-co-pkg { display: none; }
}

/* ---- #checkout-v12-style ---- */
/* V12a · COUNTRY (United States) can't be changed, so it stays greyed out like it was before V5 gave it the white
   card-form fill: same 2px border and corners, faded. */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-country:not(#_) {
  opacity: .62 !important;
  background: rgba(255,255,255,.22) !important;
}
/* V12b · SELECT YOUR KITS, greyed out on steps 02-04: only what's inside the card fades and loses its colour; the card
   itself (its fill, border and shadow) stays solid, so the page background no longer shows through it. */
html body .kits-card.kits-locked:not(#_) { opacity: 1 !important; filter: none !important; }
html body .kits-card.kits-locked:not(#_) > * { opacity: .45 !important; filter: grayscale(1) !important; }
/* V12c · PHONE NUMBER: the (XXX) XXX-XXXX text sat 2px above the middle of its box; moved down 2px (digits, grey
   placeholder digits and the typing caret together). Nothing else about the field changes. */
html body #shippingAddressForm #shippingPhoneDisplay:not(#_) { translate: 0 2px; }

/* ---- #checkout-v13-style ---- */
/* V13a · ONE LOOK FOR BOTH FORMS. The address fields now use the payment window's type: what you type in Epilogue 15px
   (the site's text font, as in CARD NUMBER), the grey example text in the same faded ink, and the labels above the fields
   in the payment window's DM Mono 9px. Sizes, spacing and the phone number's (XXX) XXX-XXXX layer stay where they are. */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-field > input:not(#_),
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-country:not(#_),
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm #shippingPhoneDisplay:not(#_) {
  font-family: var(--f-text) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
}
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-field > input:not(#shippingPhone):not(#_) { color: #33271f !important; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-field > input:not(#_)::placeholder { color: rgba(51,39,31,.35) !important; opacity: 1 !important; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm #shippingPhoneDisplay[aria-hidden]:not(#_) .phone-empty { color: rgba(51,39,31,.35) !important; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-field > label:not(#_):not(#_) {
  font-family: "DM Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  color: rgba(51,39,31,.7) !important;
}
/* V13b · CITY and STATE are filled in from the ZIP and can't be typed in, so they get exactly the greyed-out look of
   COUNTRY (faded, see-through fill, faded text). If the ZIP doesn't match them they still turn red. */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm :is(#shippingCity,#shippingState):not(.field-invalid):not(.zip-location-error):not(#_),
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-country:not(#_):not(#_) {
  opacity: .62 !important;
  background: rgba(255,255,255,.22) !important;
  color: rgba(58,42,29,.55) !important;
  -webkit-text-fill-color: rgba(58,42,29,.55) !important;
}
/* V13c · Payment window, billing PHONE: the focus shadow now runs under the whole box, the +1 country-code part included
   (it used to stop where the typing part starts, so it looked cut off). */
html body.checkout-page.gx > #payWindow .pay-phone:not(#_) { border-radius: 8px; transition: box-shadow .15s ease; }
html body.checkout-page.gx > #payWindow .pay-phone:focus-within:not(#_) { box-shadow: 3px 3px 0 var(--gx-ink, #3b2c22); }
html body.checkout-page.gx > #payWindow .pay-phone input:focus:not(#_) { box-shadow: none !important; }
/* V13d · PAY $20: PAY and the amount on the left, the site's arrow on the right (like CONTINUE TO … and SEE COLLECTION). */
html body.checkout-page.gx #payWindow .pay-submit:not(#_):not(#_):not(#_) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: .45em !important;
  padding: 0 18px 0 22px !important;
  text-align: left !important;
}
html body.checkout-page.gx #payWindow .pay-submit .nav-arrow:not(#_) {
  flex: none !important;
  display: block !important;
  margin-left: auto !important;
  width: 1.1em !important;
  height: 1.1em !important;
  color: transparent !important;
  overflow: hidden !important;
  background: #f7f0df !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 5v7H5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
/* V13e · SECURE CHECKOUT: a green lock and line at the top of the payment window, and a small lock before the card-details
   note at the bottom. */
#payWindow .pay-lock { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#payWindow .pay-secure { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .14em; color: #2f7d46; }
#payWindow .pay-secure .pay-lock { width: 13px; height: 13px; stroke-width: 1.8; }
#payWindow .pay-note { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
#payWindow .pay-note .pay-lock { width: 10px; height: 10px; margin-top: 1px; }
/* V13f · Every payment-window error now sits right under its own field (CARD NUMBER IS NOT VALID under the card number,
   and so on), in the same small red type and reserved line as the address steps, so nothing jumps when one appears. The
   line above PAY is only used for messages that don't belong to a field (a declined card, for example). */
#payWindow .pay-form { gap: 8px; }
#payWindow .pay-billing-form { gap: 8px; }
#payWindow .pay-msg {
  display: block; height: 10.4px; margin: 0; padding: 0; overflow: visible; white-space: nowrap; visibility: hidden;
  font: 8px/1.3 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #b42318;
}
#payWindow .pay-msg.is-visible { visibility: visible; }
#payWindow .pay-error.v13-moved { display: none !important; }
/* V13g · Address steps: CITY / STATE share a row, so their errors are split like the name row's (V7): each under its own field. */
html body #checkoutStep2 #shippingAddressForm .shipping-grid-city > .field-msg:not(.v7-msg) { display: none !important; }
html body #checkoutStep2 #shippingAddressForm .shipping-grid-city > .field-msg.v13-msg-city { grid-column: 1 !important; width: auto !important; }
html body #checkoutStep2 #shippingAddressForm .shipping-grid-city > .field-msg.v13-msg-state { grid-column: 2 !important; width: auto !important; }

/* ---- #checkout-v15-style ---- */
/* V15a · SECURE CHECKOUT moves into the payment window's top bar, right after the 05 / 05 tag and on its line (it
   used to take a row of its own above TOTAL). Green lock + green words, the words centred on the lock (the script below
   lines the capitals up with the middle of the icon). PAYMENT stays on the right. */
html body.checkout-page.gx > #payWindow .pwin-head .pay-secure:not(#_) {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 12px; min-width: 0;
  font: 500 9px/1 "DM Mono", monospace; letter-spacing: .14em; color: #2f7d46 !important; white-space: nowrap; opacity: 1;
}
html body.checkout-page.gx > #payWindow .pwin-head .pay-secure .pay-lock { width: 13px; height: 13px; stroke-width: 1.8; }
html body.checkout-page.gx > #payWindow .pwin-head .pay-secure-t { font: inherit; display: block; position: relative; top: var(--v15-dy, 0px); }
@media (max-width: 360px) {
  html body.checkout-page.gx > #payWindow .pwin-head .pay-secure:not(#_) { margin-left: 8px; gap: 4px; letter-spacing: .08em; }
}
/* V17 · SECURE CHECKOUT measured 1px above the middle of the lock on screen: moved down 1px (every width). */
html body.checkout-page.gx > #payWindow .pwin-head .pay-secure-t:not(#_) { translate: 0 1px; }
/* V15b · Billing address: every field now keeps the same reserved error line under it (COUNTRY and APT used to have
   none, which is why the gaps around them were tighter than the rest), so all the fields are evenly spaced. */

/* ---- #checkout-v18-style ---- */
/* V18 · COUNTRY and CITY never wrap onto two lines. CITY: a name too long for its box ends in … (the full name is still
   what gets sent). COUNTRY: when "United States" doesn't fit on one line it says USA (script below, re-checked when the
   window changes size). */
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm .shipping-country:not(#_):not(#_) { white-space: nowrap !important; overflow: hidden !important; }
html body.checkout-page.gx #checkoutStep2 #shippingAddressForm #shippingCity:not(#_) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ---- #checkout-v19-style ---- */
/* V19 · IMPORTANT ORDER INFORMATION: the old thin grey box inside the card is gone (grey borders were phased out of the
   site; its square corners were showing inside the card's rounded ones). Text and spacing unchanged. */
html body.checkout-page .checkout-info-card .checkout-legal-notice:not(#_) { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* ---- #checkout-v20-style ---- */
/* V20a · IMPORTANT ORDER INFORMATION: the same card fill as SELECT YOUR KITS and the checkout panel. */
html body.checkout-page.gx .checkout-card.checkout-info-card:not(#_),
html body.checkout-page.gx .checkout-info-card .checkout-legal-notice:not(#_):not(#_) { background: var(--gx-card) !important; background-color: var(--gx-card) !important; }
/* V20b · SELECT YOUR KITS on phones: the − 0 + buttons stay beside the kit's name whenever both fit with room to spare
   (the script below checks each kit); only when they don't do they drop underneath, as before. */
html body.checkout-page .kits-card .kit-option.v20-side:not(#_) { grid-template-columns: minmax(0, 1fr) auto !important; gap: 20px !important; }
html body.checkout-page .kits-card .kit-option.v20-side:not(#_) .qty { justify-content: flex-end; }

/* ---- #checkout-v22-style ---- */
/* V22 · IMPORTANT ORDER INFORMATION: V20 also painted the inner text box, whose square corners then stuck out over the card's
   rounded ones (the pale square at the top-right). The inner box is see-through again and the card clips to its own corners;
   the card itself keeps the same fill as SELECT YOUR KITS. */
html body.checkout-page.gx .checkout-info-card .checkout-legal-notice:not(#_):not(#_):not(#_) { background: transparent !important; background-color: transparent !important; border-radius: inherit !important; }
html body.checkout-page.gx .checkout-card.checkout-info-card:not(#_):not(#_) { overflow: hidden !important; }

/* ---- #checkout-v25-style ---- */
/* V25 · SELECT YOUR KITS: the ACCESSORIES · OPTIONAL · ONE OF EACH row sits in the middle of its strip: the same 20px from the
   dashed line above to the row as from the row to the card's bottom edge (the card's own bottom padding used to make it bigger). */
html body.checkout-page .kits-card:not(#_):has(> .acc-pick) { padding-bottom: 16px !important; }
html body.checkout-page .kits-card .acc-pick:not(#_) { padding-top: 16px !important; }
html body.checkout-page .kits-card .acc-pick-title:not(#_) { padding: 4px 0 !important; }

/* ---- #checkout-v27-terms ---- */
/* V27 · the "I accept the terms and conditions" tick in the payment window (above PAY) and the small TERMS window its link opens
   (built by script.js, openTermsWindow). The window reuses the ADDRESS CHECK window's look (the rules above name both ids). */
#reviewBlock .pay-terms { margin: 16px 0 0; }
/* the page's global input styling (full width, 2px border, tall) was stretching the tick into a big empty box */
html body.checkout-page #reviewBlock .pay-terms input[type="checkbox"]:not(#_):not(#_):not(#_) {
  -webkit-appearance: none !important; appearance: none !important;
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
  flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important;
  border: 2px solid #000 !important; border-radius: 6px !important; box-shadow: none !important;
  background-color: #fbf8f1 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important;
  cursor: pointer; transition: background-color .15s ease;
}
html body.checkout-page #reviewBlock .pay-terms input[type="checkbox"]:checked:not(#_):not(#_):not(#_) {
  background-color: #b8382e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fbf8f1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6'/%3E%3C/svg%3E") !important;
}
html body.checkout-page #reviewBlock .pay-terms input[type="checkbox"]:focus-visible:not(#_):not(#_):not(#_) { outline: 2px solid #3b2c22 !important; outline-offset: 2px; }
/* room for the red "missing" outline so the page edge doesn't cut it */
html body.checkout-page #reviewBlock .pay-terms:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 10px !important; padding: 3px 3px 3px 4px !important; }
#reviewBlock .pay-terms.is-missing { color: #a52d25; }
#reviewBlock .pay-terms.is-missing input { outline: 2px solid #b8382e; outline-offset: 1px; }
/* the link's colour, underline and spacing are set by the block further down ("the terms link and the ORDER INFORMATION link") */
html body #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_) { display: inline; width: auto; height: auto; min-height: 0; font: inherit; letter-spacing: inherit; text-transform: none; vertical-align: baseline; cursor: pointer; }
/* the text beside the tick is one inline run (words + link + period), like the ORDER INFORMATION link above it */
#reviewBlock .pay-terms > span { display: block; line-height: 1.5; }
/* V28 (2026-10-30): the tick moved from the payment window to step 03 REVIEW (#reviewBlock), right before the payment window opens. */

/* V29 (2026-10-30) · the payment window's "Billing address is the same as the shipping address" tick is the same box as the "I accept" tick */
html body.checkout-page #payWindow .pay-billing input[type="checkbox"]:not(#_):not(#_):not(#_) {
  -webkit-appearance: none !important; appearance: none !important;
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
  flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important;
  border: 2px solid #000 !important; border-radius: 6px !important; box-shadow: none !important;
  background-color: #fbf8f1 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important;
  cursor: pointer; transition: background-color .15s ease;
}
html body.checkout-page #payWindow .pay-billing input[type="checkbox"]:checked:not(#_):not(#_):not(#_) {
  background-color: #b8382e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fbf8f1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6'/%3E%3C/svg%3E") !important;
}
html body.checkout-page #payWindow .pay-billing input[type="checkbox"]:focus-visible:not(#_):not(#_):not(#_) { outline: 2px solid #3b2c22 !important; outline-offset: 2px; }
html body.checkout-page #payWindow label.pay-billing:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 10px !important; padding: 3px 3px 3px 4px !important; }

/* V29 · WINDOW HEADERS THAT DON'T FIT (payment, address check, terms). The script "V29 header fit" in checkout.js measures each header
   and adds fit-1, then fit-2 only while the header is too narrow:
     fit-1 = the 04 / 04 pill and the PAYMENT title go; SECURE CHECKOUT + lock sit on the left
     fit-2 = still too narrow: only the lock stays on the left
   The X (absolute, top right) is always there. fit-measure is only on for the instant the script measures. */
.pwin-head.fit-measure > * { flex: none !important; white-space: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; }
html body.checkout-page.gx > :is(#payWindow,#addrCheckWrap,#termsWrap) .pwin-head.fit-1 > span:first-child:not(#_):not(#_),
html body.checkout-page.gx > :is(#payWindow,#addrCheckWrap,#termsWrap) .pwin-head.fit-1 > span:last-child:not(.pay-secure):not(#_):not(#_) { display: none !important; }
html body.checkout-page.gx > :is(#payWindow,#addrCheckWrap,#termsWrap) .pwin-head.fit-1 .pay-secure:not(#_):not(#_) { margin: 0 auto 0 0 !important; }
html body.checkout-page.gx > :is(#payWindow,#addrCheckWrap,#termsWrap) .pwin-head.fit-2 .pay-secure-t:not(#_):not(#_) { display: none !important; }

/* the terms link and the ORDER INFORMATION link: gray + underline, red on hover / tap / keyboard focus (same on desktop and mobile) */
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_),
html body.checkout-page #reviewBlock .review-note a:not(#_):not(#_):not(#_) { color: rgba(58,42,29,.75) !important; -webkit-text-fill-color: currentColor; text-decoration: underline !important; text-underline-offset: 3px; transition: color .16s ease; -webkit-tap-highlight-color: transparent; }
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):hover,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):active,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):focus,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):focus-visible,
html body.checkout-page #reviewBlock .review-note a:not(#_):not(#_):not(#_):hover,
html body.checkout-page #reviewBlock .review-note a:not(#_):not(#_):not(#_):active,
html body.checkout-page #reviewBlock .review-note a:not(#_):not(#_):not(#_):focus-visible { color: #a52d25 !important; outline: none; }

/* the underline never moves: same offset, thickness and position in every state (rest, hover, press, focus) */
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_),
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):hover,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):active,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):focus,
html body.checkout-page #reviewBlock .pay-terms .pay-terms-link:not(#_):not(#_):not(#_):focus-visible {
  text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; text-decoration-color: currentColor !important;
  transform: none !important; translate: none !important; position: static !important; top: auto !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; line-height: inherit !important;
}

/* ---- #terms-window-v2 (2026-10-30) ---- */
/* TERMS window: two rows, stacked. On the left what each page covers (with its path as a small tag), on the right a small button.
   Both buttons are always the same width. Rows stack (button under the text, full width) only on very narrow screens. */
#termsWrap .terms-list { display: flex; flex-direction: column; }
#termsWrap .terms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 14px 0; border-top: 2px dashed rgba(59,44,34,.35); }
#termsWrap .terms-row:first-child { border-top: 0; padding-top: 2px; }
#termsWrap .terms-row:last-child { padding-bottom: 2px; }
#termsWrap .terms-info { min-width: 0; }
#termsWrap .terms-path { display: inline-block; margin: 0 0 8px; padding: 4px 8px 4px; border: 2px solid #3b2c22; border-radius: 6px; background: #fffdf7; box-shadow: 2px 2px 0 #3b2c22; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; color: #3b2c22; }
#termsWrap .terms-info p { margin: 0; font: 400 13px/1.5 Epilogue, ui-sans-serif, system-ui, sans-serif; color: rgba(51,39,31,.82); overflow-wrap: anywhere; }
html body.checkout-page.gx #termsWrap .pay-submit.terms-btn:not(#_):not(#_):not(#_):not(#_) {
  width: 142px !important; min-width: 142px !important; max-width: 142px !important; height: 38px !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 12px 0 14px !important; column-gap: 8px !important; justify-content: space-between !important;
  font-size: 9px !important; letter-spacing: .12em !important; white-space: nowrap;
}
html body.checkout-page.gx #termsWrap .pay-submit.terms-btn .nav-arrow:not(#_):not(#_) { width: 1em !important; height: 1em !important; }
@media (max-width: 420px) {
  #termsWrap .terms-row { column-gap: 12px; }
  html body.checkout-page.gx #termsWrap .pay-submit.terms-btn:not(#_):not(#_):not(#_):not(#_) { width: 124px !important; min-width: 124px !important; max-width: 124px !important; letter-spacing: .08em !important; padding: 0 10px 0 12px !important; }
  #termsWrap .terms-info p { font-size: 12px; }
}
@media (max-width: 330px) {
  #termsWrap .terms-row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  html body.checkout-page.gx #termsWrap .pay-submit.terms-btn:not(#_):not(#_):not(#_):not(#_) { width: 100% !important; max-width: none !important; }
}

/* PHONE / NARROW: the payment, address-check and terms windows are no longer edge to edge. Same side gutter as the page's cards, the same
   space above and below, and the window is only as tall as its content (it scrolls inside only when the screen is too short for it). */
@media (max-width: 700px) {
  html body.checkout-page > :is(#payWindow, #addrCheckWrap, #termsWrap):not(#_):not(#_) {
    padding: max(16px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom)) !important;
    align-items: center !important; justify-content: center !important;
  }
  html body.checkout-page > :is(#payWindow, #addrCheckWrap, #termsWrap) .pwin-modal:not(#_):not(#_) {
    width: 100% !important; max-width: none !important; height: auto !important;
    max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important;
  }
}
@media (max-width: 600px) {
  html body.checkout-page > :is(#payWindow, #addrCheckWrap, #termsWrap):not(#_):not(#_) { padding-left: 16px !important; padding-right: 16px !important; }
}
#termsWrap .addr-lead { margin-bottom: 18px; }

/* 2026-10-30 (owner): links that open in a NEW TAB carry a small up-right arrow right after their last word (it never wraps onto a
   line of its own). The LEGAL / FULFILLMENT buttons in the terms window point up-right too (the site's down-right arrow means
   "go here", in this same tab). Screen readers hear "(opens in a new tab)" instead. */
.co-nw { white-space: nowrap; }

/* 2026-11-01 · APPLE PAY in the payment window: Tilopay's button on top, then "OR PAY BY CARD", then the card form. While the
   button isn't there (not an Apple device, or Apple Pay not enabled yet) the whole strip takes no space. */
#payWindow .pay-wallet { display: flex; flex-direction: column; gap: 12px; }
#payWindow .pay-wallet:not(:has(#tlpy_apple_pay_button_div > *)) { display: none; }
#payWindow #tlpy_apple_pay_button_div > * { width: 100% !important; min-height: 44px; border-radius: 8px; overflow: hidden; }
#payWindow .pay-or { display: flex; align-items: center; gap: 12px; margin: 2px 0 2px; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .14em; color: rgba(51,39,31,.6); }
#payWindow .pay-or:before, #payWindow .pay-or:after { content: ""; flex: 1; border-top: 2px dashed rgba(59,44,34,.35); }
html body.checkout-page svg.co-ext {
  display: inline-block; width: .72em; height: .72em; margin-left: .18em; vertical-align: .02em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible; transition: transform .15s ease;
}
@media (hover: hover) { html body.checkout-page a:hover > .co-nw > svg.co-ext { transform: translate(1px, -1px); } }
.co-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
html body.checkout-page.gx #termsWrap .pay-submit .nav-arrow:not(#_):not(#_) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l8-8M5 4h7v7'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l8-8M5 4h7v7'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}