/* Checkout page styles that were in the page <head> (moved out of its inline <style> blocks, same order; linked right after the site stylesheet).
   checkout.css (linked in <body>) comes after this file and overrides much of it; keep the block order.
   2026-10-30 cleanup: removed styling for elements that never show (the old per-step buttons, .note, .shipping-email-note,
   the hidden SHIPPING ADDRESS title). .co-btn stays: it styles the PROCEED button if the checkout script doesn't load. */
/* ---- (unnamed block) ---- */
.checkout-wrap{max-width:1120px;margin:0 auto;padding:150px 24px 90px}
.checkout-head{max-width:760px;margin:0 0 48px}
.checkout-head .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.checkout-head h1{font-size:clamp(3.2rem,7vw,6.5rem);line-height:.88;margin:.35rem 0 1.2rem}
.checkout-head p{max-width:680px;line-height:1.6;opacity:.78}
.checkout-grid{display:grid;align-items:start}
.checkout-card{border:1px solid rgba(58,42,29,.18);background:rgba(255,250,239,.72);padding:28px}
.checkout-card h2{margin:0 0 20px}
.kit-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid rgba(58,42,29,.18);padding:20px;margin:12px 0;background:rgba(255,255,255,.22)}
.kit-option strong{display:block}.kit-option small{display:block;margin-top:6px;opacity:.68;line-height:1.4}
.qty{display:flex;align-items:center;gap:8px}.qty button{width:34px;height:34px;border:1px solid rgba(58,42,29,.3);background:transparent;cursor:pointer;font-size:1.05rem}.qty input{width:50px;height:34px;text-align:center;border:1px solid rgba(58,42,29,.3);background:transparent}.qty button:disabled,.qty input:disabled{cursor:default;opacity:.38;background:rgba(58,42,29,.07);color:rgba(58,42,29,.45);pointer-events:none;user-select:none;-webkit-user-select:none}.co-btn.is-disabled{user-select:none!important;-webkit-user-select:none!important}.release-banner{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid rgba(58,42,29,.18);padding:14px 16px;margin:0 0 28px;background:rgba(58,42,29,.045);font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.release-banner strong{font-weight:500}.release-banner>span:last-child{margin-left:auto;text-align:right}.addr-note{margin:18px 0 4px;font-family:"DM Mono",monospace;font-size:7px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:rgba(58,42,29,.5)}.addr-note+.addr-note{margin-top:8px}
.summary-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(58,42,29,.14)}
.summary-total{font-size:1.25rem;font-weight:800;border-bottom:0;padding-top:18px}
.co-btn{display:block;width:100%;margin-top:18px;padding:16px 18px;text-align:center;text-decoration:none;background:#3a2a1d;color:#fff8e8;border:0;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

@media(max-width:820px){.checkout-wrap{padding-top:125px}.checkout-head{margin-bottom:32px}}
@media(max-width:600px){.checkout-wrap{padding-left:16px;padding-right:16px}.checkout-card{padding:20px}.kit-option{grid-template-columns:1fr;gap:14px}.qty{justify-content:flex-end}}

.checkout-legal-notice{margin-top:38px;padding:18px 20px;border:1px solid rgba(58,42,29,.18);background:rgba(58,42,29,.035);font:8px/1.7 "DM Mono",monospace;letter-spacing:.03em;}
.checkout-legal-notice strong{display:block;font-weight:500;letter-spacing:.11em;margin-bottom:6px;}
.checkout-legal-notice p{margin:0;opacity:.72;}
.checkout-legal-notice a{text-decoration:underline;text-underline-offset:3px;}

/* CHECKOUT LAYOUT + PAYMENT STATES */
.checkout-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:28px;align-items:stretch;}
.checkout-left{display:grid;grid-template-rows:auto auto;gap:28px;min-width:0;}
.checkout-left > .checkout-card{height:100%;}
.order-card{height:100%;}
.checkout-info-card{display:flex;align-items:stretch;padding:0;border:0;background:transparent;}
.checkout-info-card .checkout-legal-notice{margin:0;width:100%;display:flex;flex-direction:column;justify-content:center;}
.co-btn{transition:none;}
.co-btn:hover{opacity:1;}
.co-btn:not(:disabled):hover{opacity:.9;}
.co-btn:disabled,.co-btn.is-disabled{background:#aaa49b!important;border-color:#aaa49b!important;color:#eee9dc!important;cursor:default!important;opacity:1!important;pointer-events:none!important;box-shadow:none!important;transform:none!important;}
@media(max-width:820px){
  .checkout-grid{grid-template-columns:1fr;align-items:stretch;}
  .checkout-left{grid-template-rows:auto auto;}
  .order-card{height:auto;}
}

/* ---- #three-step-checkout-css ---- */
.checkout-steps {
  position: relative;
  overflow: hidden;
}

.checkout-step {
  display: none;
  animation: checkoutStepIn .38s cubic-bezier(.22,.61,.36,1) both;
}

.checkout-step.active {
  display: block;
}

@keyframes checkoutStepIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.checkout-step.leaving {
  animation: checkoutStepOut .22s ease both;
}

@keyframes checkoutStepOut {
  to {
    opacity: 0;
    transform: translateX(-14px);
  }
}

.checkout-step-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(58,42,29,.14);
}

.checkout-step-number {
  font:9px "DM Mono",monospace;
  letter-spacing:.15em;
  opacity:.55;
}

.checkout-step-title {
  font:10px "DM Mono",monospace;
  letter-spacing:.14em;
}

.checkout-confirmation {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(58,42,29,.14);
}

.checkout-confirmation-copy {
  font:12px/1.55 "DM Mono",monospace;
  opacity:.7;
}

.checkout-progress {
  display:flex;
  gap:7px;
  margin-bottom:20px;
}

.checkout-progress span {
  flex:1;
  height:2px;
  background:rgba(58,42,29,.12);
  transition:background .3s ease;
}

.checkout-progress span.active {
  background:#3a2a1d;
}

#checkoutStep3 .pwin-wrap {
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

#checkoutStep3 .pwin-backdrop,
#checkoutStep3 .pwin-close {
  display:none!important;
}

#checkoutStep3 .pwin-modal {
  position:static!important;
  transform:none!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}

#checkoutStep3 .pwin-head {
  display:none!important;
}

#shippingAddressForm {
  margin:0!important;
  padding:0!important;
  border:0!important;
}


/* ---- #checkout-final-layout-fix ---- */
/* Keep the overall checkout generous instead of making the
   order panel behave like a tiny sidebar. */
.checkout-steps {
  width: 100%;
}

.checkout-step {
  width: 100%;
}

/* Shipping fields */
#shippingAddressForm {
  width: 100% !important;
}

#shippingAddressForm .shipping-field {
  min-width: 0 !important;
}

#shippingAddressForm .shipping-field input,
#shippingAddressForm .shipping-country {
  width: 100% !important;
}

/* City / State */
#shippingAddressForm .shipping-grid-city {
  grid-template-columns: minmax(0, 1.7fr) minmax(90px, .7fr) !important;
}

/* ZIP / Country */
#shippingAddressForm .shipping-grid-bottom {
  grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr) !important;
}

/* Make the address form feel like part of the editorial layout,
   not a stack of cramped controls. */
#shippingAddressForm .shipping-field input,
#shippingAddressForm .shipping-country {
  height: 46px !important;
  min-height: 46px !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
}

/* Slightly more breathing room on wider screens */
@media (min-width: 1000px) {
  #shippingAddressForm {
    max-width: none !important;
  }

  #shippingAddressForm .shipping-grid-city {
    grid-template-columns: minmax(0, 1.8fr) minmax(100px, .65fr) !important;
  }

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

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

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

/* ---- #shipping-clean-final ---- */
/* =========================================================
   SHIPPING FORM — SINGLE AUTHORITATIVE LAYOUT
   ========================================================= */

#shippingAddressForm{box-sizing:border-box}

#shippingAddressForm > .shipping-field {
  width: 100%;
  margin: 0 0 18px;
}

#shippingAddressForm .shipping-grid {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
}

#shippingAddressForm .shipping-grid > .shipping-field {
  min-width: 0;
  margin: 0;
}

#shippingAddressForm .shipping-field label{display:block}

#shippingAddressForm .shipping-field input,#shippingAddressForm .shipping-country{box-sizing:border-box}

#shippingAddressForm .shipping-country {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

#shippingAddressForm .shipping-field label span {
  margin-left: 5px;
}

#shippingAddressForm #shippingState {
  text-transform: uppercase;
}

#shippingAddressForm #shippingPostalCode {
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {

  #shippingAddressForm .shipping-grid {
    gap: 10px;
  }
}

/* ---- #shipping-label-size-fix ---- */
#shippingAddressForm .shipping-field label {
  font-size: 9px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.48);
  margin: 0 0 7px;
}

#shippingAddressForm .shipping-field label span {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.34);
}

/* ---- #shipping-label-restore ---- */
#shippingAddressForm .shipping-field > label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  position: static !important;

  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.48) !important;

  margin: 0 0 7px !important;
  padding: 0 !important;
}

#shippingAddressForm .shipping-field > label span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.34) !important;
}

/* ---- #phone-no-shadow ---- */
/* The phone field never has a box shadow of its own. ([name] keeps this rule exactly as specific as it always was.) */
#checkoutStep2 #shippingAddressForm #shippingPhone[name] {
  box-shadow:none !important;
}

/* ---- #zip-location-error-sync ---- */
/* When ZIP is invalid, mirror the ZIP error styling onto City + State. */
#shippingAddressForm .shipping-field:has(#shippingCity.zip-location-error) input,
#shippingAddressForm .shipping-field:has(#shippingState.zip-location-error) input {
  border-color: #b3261e !important;
  background: rgba(165,45,37,.045) !important;
  box-shadow: inset 0 0 0 1px rgba(179,38,30,.18) !important;
}

/* Keep City + State in their normal gray state when ZIP is valid/cleared. */
#shippingAddressForm #shippingCity:not(.zip-location-error),
#shippingAddressForm #shippingState:not(.zip-location-error) {
  border-color: rgba(58,42,29,.18) !important;
  background: rgba(255,255,255,.32) !important;
  box-shadow: none !important;
}

/* ---- #zip-city-state-exact-error-match ---- */
/* City + State use the exact same error colors as the ZIP field. */
#checkoutStep2 #shippingAddressForm #shippingCity.zip-location-error,
#checkoutStep2 #shippingAddressForm #shippingState.zip-location-error {
  color:#a52d25 !important;
  -webkit-text-fill-color:#a52d25 !important;
  opacity:1 !important;
  border-color:#a52d25 !important;
  background:rgba(165,45,37,.045) !important;
  box-shadow:inset 0 0 0 1px #a52d25 !important;
}

#checkoutStep2 #shippingAddressForm #shippingCity:not(.zip-location-error),
#checkoutStep2 #shippingAddressForm #shippingState:not(.zip-location-error) {
  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;
}

/* ---- #kit-number-style ---- */
.kit-option > div:first-child > strong {
  display:flex !important;
  align-items:flex-start !important;
  gap:6px !important;
}
.kit-number {
  color:var(--muted, rgba(58,42,29,.55)) !important;
  font-family:"DM Mono",monospace !important;
  font-size:.46em !important;
  line-height:1 !important;
  position:relative !important;
  top:.72em !important;
  font-weight:400 !important;
  letter-spacing:.04em !important;
  flex:0 0 auto !important;
}

/* ---- #page-lock ---- */
/* ===== Whole-page lock =====
   Nothing on the page can be selected, highlighted, long-pressed, dragged or
   right-clicked. The one exception is real form fields (the checkout's
   shipping inputs), which must stay typeable / pasteable. */
html,
body,
body * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
img,
svg,
a {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
body *::selection {
  background: transparent !important;
}
body input,
body textarea,
body select,
body [contenteditable="true"],
body [contenteditable="true"] * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
body input::selection,
body textarea::selection,
body [contenteditable="true"]::selection {
  background: highlight !important;
}

/* ---- #footer-right-rows ---- */
/* Copyright and the back link share one line and are centred against each
   other; the contact details sit on a single row underneath, right-aligned
   under the back link. */

@media (max-width: 700px) {
  /* Phones: copyright on the left and the back link on the right edge,
     lined up under DESIGNED BY STEFAN SAMOS; contact line underneath. The
     block sits evenly between the logo above and the divider below. */

  footer.footer .legal { margin-top: 0 !important; }
}

/* ---- #justify-info-boxes ---- */
/* Justified text stretches the spaces inside short link labels
   ("LEGAL / ORDER INFORMATION →"). Keeping each link as one unbreakable
   block stops that: the paragraph stays justified, the link text stays tight. */
footer .legal a,
.checkout-legal-notice a {
  display: inline-block;
  white-space: nowrap;
  text-align: left;
}
/* Paragraphs inside info boxes line up on both edges. Hyphenation keeps the
   spacing between words even on narrow screens. */
.checkout-legal-notice p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---- #page-back-style ---- */
/* "← BACK" in front of the small label above each page title. */
.page-back { color: inherit !important; text-decoration: none !important; transition: color .16s ease; white-space: nowrap; }
.page-back:hover, .page-back:focus-visible { color: #a52d25 !important; }
.page-back-sep { display: inline-block; width: 1px; height: .9em; margin: 0 .8em; vertical-align: -.1em; background: currentColor; opacity: .35; }

/* ---- #payment-window ---- */
/* Payment opens as a window over the page (the fixed-height panel can't hold the card form). Same look as the site's other pop-up. */
body > #payWindow { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center; justify-content: center; padding: 24px; }
body > #payWindow[hidden] { display: none !important; }
body > #payWindow .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 > #payWindow .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 > #payWindow .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 > #payWindow .pwin-head span:last-child { color: #33271f; }
body > #payWindow .pwin-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; background: none; border: 0; color: #33271f; font-size: 15px; cursor: pointer; }
body > #payWindow .pwin-close:hover { color: #a52d25; }

@keyframes payFade { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes payRise { from { opacity: 0; transform: translateY(10px); } }
html.pwin-open, html.pwin-open body, html.pwin-closing, html.pwin-closing body { overflow: hidden !important; }
html.pwin-open header.nav, html.pwin-open .mobile-top-button, html.pwin-open .mobile-bottom-blur,
html.pwin-closing header.nav, html.pwin-closing .mobile-top-button, html.pwin-closing .mobile-bottom-blur { z-index: 1000 !important; }
body > #payWindow.is-closing .pwin-backdrop { animation: payFadeOut .22s ease both; }
body > #payWindow.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); } }
@media (max-width: 700px) {
  body > #payWindow { padding: 0; align-items: stretch; }
  body > #payWindow .pwin-modal { width: 100%; max-height: none; height: 100%; border: 0; }
}

/* ---- #tilopay-payment-form ---- */
/* Card form inside the payment window, in the checkout's own style. */
body > #payWindow .pay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; background: #f5efe4; }
.pay-test { margin: 0 0 12px; padding: 8px 10px; border: 1px dashed rgba(165,45,37,.5); font: 500 9px/1.3 "DM Mono", monospace; letter-spacing: .12em; color: #a52d25; text-align: center; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(58,42,29,.14); font: 400 10px/1 "DM Mono", monospace; letter-spacing: .14em; color: rgba(51,39,31,.7); }
.pay-total strong { font: 600 1.35rem/1 "DM Mono", monospace; letter-spacing: .02em; color: #33271f; }
.pay-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pay-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pay-field label { display: flex; justify-content: space-between; font: 400 9px/1 "DM Mono", monospace; letter-spacing: .12em; color: rgba(51,39,31,.7); }
.pay-brand { color: #33271f; }
/* the card company's logo, inside the card number box on the right (shown once the first digits say which company it is) */
.pay-cc { position: relative; }
/* accepted cards, at the foot of the IMPORTANT ORDER INFORMATION box */
.co-cards { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(58,42,29,.3); }
.co-cards span { margin-right: 6px; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .16em; color: #33271f; }
.co-cards svg { display: block; width: 36px; height: 24px; -webkit-user-select: none; user-select: none; }
.co-cards .co-saved { flex: 1 1 0; min-width: 0; margin: 0 0 0 10px; text-align: right; white-space: nowrap; font-size: 8px; line-height: 1.45; letter-spacing: .1em; color: rgba(51,39,31,.6); }
.pay-cc input { padding-right: 60px !important; }
.pay-cc-logo { position: absolute; right: 12px; top: 50%; width: 33px; height: 22px; margin-top: -11px; border-radius: 4px; opacity: 0; transform: scale(.85); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
/* the three card logos are drawn inline (symbols in the .cc-sprite right after <body>); the class the script sets picks which one shows */
.pay-cc-logo svg { display: none; width: 100%; height: 100%; }
.pay-cc-logo.is-visa .cc-visa, .pay-cc-logo.is-mastercard .cc-mastercard, .pay-cc-logo.is-amex .cc-amex { display: block; }
.pay-cc-logo.is-on { opacity: 1; transform: none; }
.pay-field input {
  height: 44px; padding: 0 14px; box-sizing: border-box; width: 100%;
  border: 1px solid rgba(58,42,29,.2); border-radius: 0; background: #fbf7ef;
  font: 400 15px/1 "DM Mono", monospace; letter-spacing: .06em; color: #33271f;
  outline: none; transition: border-color .16s ease;
}
.pay-field input::placeholder { color: rgba(51,39,31,.35); }
.pay-field input:focus { border-color: #33271f; }
.pay-field input.is-invalid { border-color: #a52d25; background: #f7e9e4; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay-billing { display: flex; gap: 10px; align-items: center; font: 400 9px/1.5 "DM Mono", monospace; letter-spacing: .06em; color: rgba(51,39,31,.65); }
.pay-billing input { accent-color: #33271f; margin: 0; cursor: pointer; }
.pay-billing { cursor: pointer; }
.pay-billing-form { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 2px; border-top: 1px dashed rgba(58,42,29,.25); }
.pay-billing-form[hidden] { display: none; }
.pay-billing-title { font: 500 9px/1 "DM Mono", monospace; letter-spacing: .14em; color: #33271f; }
.pay-opt { opacity: .55; }
.pay-field select { height: 44px; padding: 0 12px; box-sizing: border-box; width: 100%; border: 1px solid rgba(58,42,29,.2); border-radius: 0; background: #fbf7ef; font: 400 14px/1 "DM Mono", monospace; color: #33271f; outline: none; }
.pay-field select:focus { border-color: #33271f; }
.pay-field select.is-invalid { border-color: #a52d25; background: #f7e9e4; }
.pay-phone { display: flex; align-items: stretch; }
.pay-phone-cc { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(58,42,29,.2); border-right: 0; background: #efe6d6; font: 400 13px/1 "DM Mono", monospace; color: #33271f; white-space: nowrap; }
.pay-phone input { min-width: 0; }
.pay-error { margin: 0; font: 400 9px/1.6 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #b42318; }
.pay-submit {
  height: 48px; margin-top: 4px; border: 1px solid #33271f; border-radius: 0;
  background: #33271f; color: #f4efe4; cursor: pointer;
  font: 500 10px/1 "DM Mono", monospace; letter-spacing: .14em;
  transition: background-color .18s ease, opacity .18s ease;
}
.pay-submit:hover:not(:disabled) { background: #4a3a2f; }
.pay-submit:disabled { opacity: .45; cursor: wait; }
.pay-note { margin: 0; font: 400 8px/1.6 "DM Mono", monospace; letter-spacing: .06em; color: rgba(51,39,31,.5); text-align: center; }
/* Tilopay draws the bank's verification screen in here when a card needs it. */
#responseTilopay:not(:empty) { position: fixed; inset: 0; z-index: 2147483647; background: rgba(31,24,19,.45); display: flex; align-items: center; justify-content: center; }