:root {
  --color-default: #1A1A1A;
  --color-alt: #4A4A4A;
  --color-icon: #1A1A1A;
  --color-inputIcon: #4A4A4A;
  --color-badge: #C8102E;
  --color-badge-active: #9A0C24;
  --color-link: #C8102E;
  --color-link-hover: #9A0C24;
  --color-buttonPrimary: #FFFFFF;
  --color-buttonPrimary-hover: #FFFFFF;
  --color-buttonPrimary-active: #FFFFFF;
  --bgColor-buttonPrimary: #C8102E;
  --bgColor-buttonPrimary-hover: #9A0C24;
  --bgColor-buttonPrimary-active: #9A0C24;
  --borderColor-input: #E5E5E5;
  --borderColor-input-hover: #C8102E;
  --borderColor-input-focus: #C8102E;
}
#snipcart {
  position: relative;
  z-index: var(--z-modal, 500);
}
.snipcart-modal__container {
  font-family: 'Inter', sans-serif;
  z-index: var(--z-modal, 500);
}
.snipcart__font--subtitle {
  font-family: 'Oswald', sans-serif;
}

/* ── Promo code box fix ─────────────────────────────────────────
   Snipcart's default layout absolutely-positions the "Apply" button
   inside the input, which overlaps on narrow viewports. We switch
   the form to a wrapping flex layout so the input, Apply, and Cancel
   each get their own space.
   ─────────────────────────────────────────────────────────────── */

/* Make the form container wrap so elements don't overlap */
.snipcart-discount-box__form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Let the input shrink and leave room for buttons; remove right padding
   that Snipcart adds to make space for the old absolute-positioned Apply */
.snipcart-discount-box__form .snipcart-input {
  flex: 1 1 0% !important;
  min-width: 120px !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}

/* Remove double-border effect from inner input (wrapper border + input outline) */
.snipcart-discount-box__form .snipcart-input__input {
  outline: none !important;
  box-shadow: none !important;
}

/* Pull the Apply button out of absolute positioning */
.snipcart-discount-box__submit {
  position: static !important;
  flex-shrink: 0 !important;
  padding: 14px 20px !important;
  background-color: #C8102E !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  line-height: 1.2 !important;
}

.snipcart-discount-box__submit:hover {
  background-color: #9A0C24 !important;
}

/* Style the Cancel button cleanly */
.snipcart-discount-box__cancel {
  flex-shrink: 0 !important;
  padding: 14px 20px !important;
  color: #4A4A4A !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  background: #f5f5f5 !important;
  border-radius: 4px !important;
  outline: none !important;
  line-height: 1.2 !important;
}

.snipcart-discount-box__cancel:hover {
  background: #e5e5e5 !important;
}

/* Fix the form container to not overflow on mobile */
.snipcart-discount-box__form-container {
  width: 100% !important;
  max-width: 100% !important;
}

.snipcart-discount-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Hide the TEST MODE banner */
.snipcart-test-banner {
  display: none !important;
}