main[data-commerce="enabled"] {
  --commerce-navy: #102742;
  --commerce-ink: #102742;
  --commerce-gold: #f0c665;
  --commerce-cream: #f8f1dd;
  --commerce-line: #e4d8bb;
  --commerce-muted: #5e6470;
}
main[data-commerce="enabled"] [hidden] { display: none !important; }
.commerce-button, .commerce-coupon-link {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--commerce-navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.commerce-button:disabled { opacity: .58; cursor: default; }
.commerce-button-gold { background: var(--commerce-gold); color: var(--commerce-ink); border-color: #d7aa45; }
.commerce-button-soft, .commerce-coupon-link { background: var(--commerce-cream); color: var(--commerce-ink); border-color: #dfc98d; }
.commerce-button:focus-visible, .commerce-coupon-link:focus-visible { outline: 2px solid #a97418; outline-offset: 3px; }
.commerce-coupon-link { font-size: 14px; }
.commerce-coupon-link svg { flex: 0 0 16px; }
.store-card .commerce-coupon-link { display: flex; margin: 0 0 8px; }
main[data-commerce="enabled"] .book-choice:has(.commerce-coupon-link) {
  display: grid;
  grid-template-columns: minmax(0,330px);
  justify-content: start;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
}
.book-choice .commerce-coupon-link { color: var(--commerce-ink); }
.selection-actions:has(.commerce-coupon-link) { flex-wrap: wrap; }
main[data-commerce="enabled"] .commerce-home-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  max-width: 520px;
  gap: 12px;
  margin: 22px 0 12px;
}
main[data-commerce="enabled"] .commerce-home-actions .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 10px 12px;
  color: #fff;
  background: var(--commerce-navy);
  line-height: 1.5;
  text-align: center;
}
main[data-commerce="enabled"] .commerce-home-actions .cta:hover { background: #203e5c; }
.school-intro .hero-actions:has(.commerce-home-actions) { margin: 0; }

.commerce-panel { border: 1px solid var(--commerce-line); border-radius: 14px; padding: clamp(15px,3vw,26px); background: #fff; }
.commerce-offers, .commerce-transfer { color: var(--commerce-ink); min-width: 0; }
.commerce-offers h1, .commerce-transfer h1 { font-size: clamp(28px,4vw,46px); line-height: 1.4; }
.commerce-offers h2, .commerce-transfer h2 { font-size: clamp(19px,2.4vw,25px); line-height: 1.5; margin-block: 0 8px; }
.commerce-offers h3, .commerce-transfer h3 { font-size: 19px; }
.commerce-crumb { font-size: 13px; }
.commerce-muted { color: var(--commerce-muted); font-size: .875rem; }
.commerce-message:empty { display: none; }
.commerce-error, .commerce-required { color: #b42318; }
.commerce-offers-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 20px; }
.commerce-offers-hero {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  align-items: center;
  gap: 18px;
  padding: clamp(22px,4vw,38px);
  border-radius: 20px;
  background: radial-gradient(ellipse at 10% 100%,#2d4650,var(--commerce-navy) 62%);
  color: #fff;
}
.commerce-offers-hero h1 { color: inherit; margin: 0; }
.commerce-kicker { color: #f0c665; font-weight: 700; }
.commerce-offer-covers { display: flex; align-items: center; justify-content: center; min-width: 0; }
.commerce-offer-covers img { max-width: 68%; height: auto; border-radius: 3px; box-shadow: 0 8px 14px #09142166; transform: rotate(8deg); }
.commerce-offer-covers img:first-child { transform: rotate(-10deg); margin-inline-start: -32%; z-index: 1; }
.commerce-offers-form { display: grid; align-content: center; gap: 9px; }
.commerce-offers-form p { margin: 0; }
.commerce-offers-form label, .commerce-checkout-coupon > label { font-weight: 700; }
.commerce-offers-form input, .commerce-coupon-field input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 9px 12px;
  min-height: 45px;
  font: inherit;
}
.commerce-offer-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; list-style: none; margin-block: 18px; }
.commerce-offer-types li { display: grid; align-content: center; padding: 12px 16px; }
.commerce-offer-types span { color: var(--commerce-muted); font-size: .875rem; }
.commerce-offers-result { max-width: 620px; margin: 20px auto 0; }
.commerce-offers-lines { padding: 12px 35px 12px 12px; background: #faf7ef; border-radius: 8px; }
.commerce-pill { display: inline-block; padding: 1px 9px; margin: 0; border-radius: 100px; background: var(--commerce-cream); color: #6a490e; font-size: .8rem; font-weight: 600; }
.commerce-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: #f6edd4; border-radius: 8px; font-weight: 700; }

.commerce-checkout-lead { color: var(--commerce-muted); margin: 0 0 15px; }
.commerce-cart-guidance { color: var(--commerce-muted); font-size: .875rem; }
#checkout-summary .commerce-checkout-books .checkout-book-row { grid-template-columns: auto auto minmax(0,1fr) auto; }
.commerce-book-thumbnail { display: block; width: 33px; height: 44px; object-fit: contain; }
.commerce-checkout-gift { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee8db; }
.commerce-checkout-gift strong { white-space: nowrap; }
.commerce-checkout-coupon { display: grid; gap: 6px; margin: 14px 0; scroll-margin-block-start: 22px; }
.commerce-coupon-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.commerce-coupon-field input[aria-invalid="true"] { border-color: #b42318; }
.commerce-coupon-feedback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
#checkout-summary .commerce-coupon-feedback p { margin: 0; }
.commerce-coupon-feedback p:empty { display: none; }
.commerce-coupon-feedback button, .commerce-coupon-feedback a { background: none; color: var(--commerce-ink); border: 0; padding: 0; text-decoration: underline; font: inherit; cursor: pointer; }
.commerce-checkout-totals { margin-block-start: 12px; }
.commerce-checkout-totals > h2 { display: none; }
.commerce-checkout-totals dd { overflow-wrap: anywhere; }
.commerce-checkout-totals .checkout-breakdown > div:last-child { margin-block-start: 4px; }
.commerce-checkout-form .commerce-customer-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.commerce-checkout-form .commerce-muted { margin: 0; }
.commerce-payment-options { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.commerce-payment-options legend { font-family: Cairo,"IBM Plex Sans Arabic",sans-serif; font-size: 1.2rem; font-weight: 700; margin-block-end: 8px; }
.commerce-payment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#rc-checkout .commerce-payment-grid label { display: grid; align-content: start; min-width: 0; gap: 2px; padding: 10px; border: 1px solid var(--commerce-line); border-radius: 8px; cursor: pointer; }
#rc-checkout .commerce-payment-grid label:has(:checked) { background: var(--commerce-cream); border-color: #d7ad57; }
#rc-checkout .commerce-payment-grid input { width: 16px; height: 16px; margin: 0; accent-color: var(--commerce-navy); }
.commerce-payment-grid label span { font-size: .875rem; color: var(--commerce-muted); }
.commerce-checkout-form > .commerce-button { justify-self: start; margin-block-start: 6px; }

.commerce-transfer { max-width: 700px; margin: auto; }
.commerce-transfer-heading, .commerce-transfer-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.commerce-transfer-heading h2 { margin: 0; }
.commerce-transfer-line { padding: 3px 0; }
.commerce-transfer-line strong { white-space: nowrap; }
.commerce-transfer-recipient { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid #e6d4a4; border-radius: 9px; background: var(--commerce-cream); }
.commerce-transfer-recipient strong { justify-self: start; font-size: 1.4rem; letter-spacing: .03em; }
.commerce-transfer .commerce-total { margin-block: 9px; }
.commerce-transfer-form, #commerce-transfer-form { display: grid; gap: 8px; }
.commerce-upload { border: 1px dashed #c99e4e; border-radius: 9px; background: #fffdf8; padding: 12px 14px; }
.commerce-upload label { font-weight: 700; }
.commerce-upload p { color: var(--commerce-muted); margin: 3px 0 7px; }
.commerce-upload input { box-sizing: border-box; width: 100%; font: inherit; }
.commerce-transfer-result { border-inline-start: 4px solid #bd8a26; background: #fffdf8; }

@media (max-width: 720px) {
  .commerce-offers-layout, .commerce-checkout-form .commerce-customer-fields { grid-template-columns: minmax(0,1fr); }
  .commerce-payment-grid { grid-template-columns: minmax(0,1fr); }
  #rc-checkout .commerce-payment-grid label { grid-template-columns: auto minmax(0,1fr); column-gap: 8px; }
  #rc-checkout .commerce-payment-grid input { grid-row: span 2; align-self: center; }
  .commerce-checkout-form > .commerce-button { justify-self: stretch; }
}
@media (max-width: 420px) {
  main[data-commerce="enabled"] .commerce-home-actions { gap: 8px; }
  main[data-commerce="enabled"] .commerce-home-actions .cta { padding-inline: 6px; font-size: .9rem; }
  .commerce-offers-hero { grid-template-columns: minmax(0,1fr); }
  .commerce-offer-covers { max-width: 170px; justify-self: center; }
  .commerce-offer-types { grid-template-columns: minmax(0,1fr); }
  .commerce-transfer-heading { align-items: start; flex-wrap: wrap; }
}