/* Black Friday visual layer;
   original checkout names and integrations retained. */
:root {
  --ink:#fff5df;
  --muted:#c7bba6;
  --paper:#161310;
  --soft:#171310;
  --line:#66502e;
  --green:#efc56f;
  --shadow:0 16px 60px #0009;
  color-scheme:dark
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:16px
}

body {
  background:radial-gradient(ellipse at top,#34100c 0,transparent 50%),#080707;
  color:var(--ink)
}

.page {
  width:min(100%,760px);
  padding:0 0 100px;
  background:#080706;
  box-shadow:0 0 100px #000
}

.design-section {
  position:relative;
  margin:0;
  line-height:0
}

.design-section>img {
  display:block;
  width:100%;
  height:auto
}

.art-button {
  position:absolute;
  display:block;
  border-radius:14px;
  z-index:2
}

.art-button:hover {
  box-shadow:0 0 24px #ffbf6477;
  background:#ffc4540a
}

.art-button:focus-visible {
  outline:4px solid #fff;
  outline-offset:4px;
  background:#ffc45433
}

.hero-section .hero-button {
  left:16%;
  right:16%;
  top:90%;
  height:7%
}

.double-offer {
  left:10%;
  right:10%;
  top:54%;
  height:9%
}

.single-offer {
  left:10%;
  right:10%;
  top:88%;
  height:9%
}

.form-shell {
  margin:0 18px;
  border:1px solid #b57c35;
  border-radius:20px;
  padding:8px;
  background:radial-gradient(ellipse at top,#4c110e66,transparent 60%),#100d0c;
  box-shadow:0 0 0 5px #24150e,0 0 35px #c42a181c
}

.form-top {
  background:none;
  padding:25px 12px 10px;
  color:#ffebbb
}

.form-top strong {
  font-size:clamp(25px,5vw,36px);
  line-height:1.5
}

.form-top p {
  color:#edc97b;
  font-size:14px
}

.checkout-logo {
  display:block;
  width:220px;
  max-width:80%;
  height:auto;
  object-fit:contain;
  margin:0 auto 18px;
  border-radius:0;
  filter:none
}

.hero-price strong,.hero-price span {
  color:#f6ca70
}

.order-form {
  gap:16px;
  scroll-margin-top:20px
}

.form-banner {
  background:#e3b7600a;
  border-color:#88632b;
  color:#f5d899
}

label,.field-label {
  color:#f0dfc3;
  background:#181411;
  border-color:#70502b
}

.section-label {
  color:#f7d28b
}

input,select,textarea {
  background:#11100f;
  border-color:#665033;
  color:#fff5df
}

input::placeholder,textarea::placeholder {
  color:#b7a996;
  opacity:1
}

input:focus,textarea:focus,select:focus {
  border-color:#e6b959;
  box-shadow:0 0 0 3px #d7a74729
}

.choice-body {
  background:#211b16;
  border-color:#765331;
  color:#f2ddbb
}

.choice-card:has(input:checked) .choice-body {
  background:linear-gradient(145deg,#6b251b,#351611);
  border-color:#efbd61;
  color:white;
  animation:none;
  box-shadow:0 0 0 1px #d7a44d,0 0 16px #ee62172e
}

.choice-card:has(input:focus-visible) .choice-body {
  outline:3px solid #fff;
  outline-offset:3px
}

.choice-card:has(input:checked) img {
  animation:none
}

.model-content img {
  background:#fff;
  border-radius:8px;
  padding:4px;
  width:44px;
  height:44px
}

.summary-card {
  background:#1c1610;
  border-color:#79582c
}
.summary-head,.summary-pill {
  color:#f7d28b
}
.summary-pill {
  background:#c1943620
}

.btn,.sticky-cta a {
  background:linear-gradient(180deg,#ef2f21,#ac0907);
  border:1px solid #ff7b43;
  box-shadow:0 0 20px #df25053d;
  color:#fff4df
}

.btn:disabled {
  opacity:.65;
  cursor:wait
}
.btn-subtext {
  color:#dbc493
}

.footer {
  background:#080707;
  padding-bottom:105px
}

.toast {
  background:#5f4018;
  z-index:40
}

@media(max-width:620px) {
  .page {
  padding:0 0 90px
}
.form-shell {
  margin:0 12px
}
.order-form {
  padding:14px 8px
}
.offer-main {
  font-size:14px
}
.form-top {
  padding:22px 8px 8px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::after {
  animation:none!important;
  transition:none!important
}

}

/* Live red digits over the empty boxes in assets/hero.webp.
   Higher specificity overrides the older inline countdown styles in index.html. */
.hero-section {
  position: relative;
  container-type: inline-size;
}

.hero-section .live-countdown {
  position: absolute;
  top: 80%;
  left: 26%;
  width: 48%;
  height: 5.8%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.hero-section .live-countdown > strong,
.hero-section .countdown-digits small {
  display: none;
}

.hero-section .countdown-digits {
  display: flex;
  direction: ltr;
  flex-direction: row-reverse;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 0;
}

.hero-section .countdown-digits > span {
  visibility: hidden;
  flex: 0 0 8%;
}

.hero-section .countdown-digits > div {
  flex: 0 0 28%;
  min-width: 0;
  height: 100%;
  text-align: center;
}

.hero-section .countdown-digits b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #ff6157;
  font-family: Arial, sans-serif;
  font-size: min(8.5vw, 64.6px);
  font-size: 8.5cqw;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 5px #ff3329,
    0 0 14px #ff3329,
    0 0 25px #ff332980;
}

.hero-section .countdown-digits[hidden] {
  display: none;
}