:root {
  --cart-bg: #f5f7fb;
  --cart-card: #ffffff;
  --cart-border: #dce4ef;
  --cart-text: #12203f;
  --cart-muted: #70809d;
  --cart-brand: #387eb6;
  --cart-brand-dark: #12203f;
  --cart-danger: #c23d3d;
}

.axiom-cart-page {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: var(--cart-bg);
  color: var(--cart-text);
}

.axiom-cart-page * {
  box-sizing: border-box;
}

.cart-page-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 60px;
}

.cart-page-hero {
  margin-bottom: 28px;
}

.cart-page-kicker {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #55a1db;
  text-transform: uppercase;
}

.cart-page-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 0.95;
  font-weight: 900;
  color: var(--cart-brand-dark);
}

.cart-page-hero p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cart-muted);
  max-width: 760px;
}

.cart-page-layout {
  display: block;
}

.cart-page-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: start;
}

.cart-card {
  background: var(--cart-card);
  border: 1px solid var(--cart-border);
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(18, 32, 63, 0.03);
}

.cart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.cart-card-header h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  color: var(--cart-brand-dark);
}

.cart-card-summary {
  position: sticky;
  top: 24px;
}

.cart-page-items-wrap {
  display: grid;
  gap: 16px;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--cart-border);
  border-radius: 24px;
  padding: 16px;
  background: #fcfdff;
}

.cart-item-image {
  width: 110px;
  height: 110px;
  border-radius: 20px;
  overflow: hidden;
  background: #f3f6fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-item-info h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--cart-brand-dark);
}

.cart-item-meta {
  display: grid;
  gap: 6px;
}

.cart-item-meta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cart-muted);
}

.cart-item-actions {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.cart-item-price {
  font-size: 26px;
  font-weight: 900;
  color: var(--cart-brand-dark);
}

.cart-qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cart-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.cart-qty-btn {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--cart-brand-dark);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.cart-qty-value {
  min-width: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-brand-dark);
}

.cart-remove-btn {
  border: 0;
  background: transparent;
  color: var(--cart-danger);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cart-summary-list {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.cart-summary-row,
.cart-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-summary-row span,
.cart-summary-row strong {
  font-size: 16px;
  line-height: 1.45;
}

.cart-summary-row span {
  color: var(--cart-muted);
}

.cart-summary-row strong,
.cart-summary-total strong {
  color: var(--cart-brand-dark);
  font-weight: 800;
  text-align: right;
}

.cart-summary-total {
  border-top: 1px solid var(--cart-border);
  padding-top: 18px;
  margin-top: 18px;
  margin-bottom: 20px;
}

.cart-summary-total span {
  font-size: 18px;
  color: var(--cart-brand-dark);
  font-weight: 700;
}

.cart-summary-total strong {
  font-size: 30px;
  font-weight: 900;
}

.cart-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-summary-note {
  margin: 16px 0 0;
  color: var(--cart-muted);
  font-size: 14px;
  line-height: 1.5;
}

.cart-page-btn {
  appearance: none;
  width: 100%;
  text-decoration: none;
  border: 1px solid var(--cart-border);
  border-radius: 999px;
  min-height: 64px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.cart-page-btn:hover {
  transform: translateY(-1px);
}

.cart-page-btn-primary {
  border: none;
  background: linear-gradient(135deg, #4c8fda 0%, #3c80c8 100%);
  color: #fff;
}

.cart-page-btn-secondary {
  background: #fff;
  color: var(--cart-brand-dark);
  border: 2px solid #dbe4f0;
}

.cart-page-btn-ghost {
  background: transparent;
  color: var(--cart-muted);
}

.cart-empty-state,
.cart-page-loading {
  border: 1px dashed var(--cart-border);
  border-radius: 24px;
  padding: 34px 20px;
  text-align: center;
  color: var(--cart-muted);
  font-size: 16px;
  font-weight: 600;
  background: #fcfdff;
}

body.axiom-cart-page .cart-page-coupon-box {
  margin-top: 18px;
  margin-bottom: 18px;
}

body.axiom-cart-page .cart-page-coupon-label {
  display: block;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cart-brand-dark);
}

body.axiom-cart-page .cart-page-coupon-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.axiom-cart-page .cart-page-coupon-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 2px solid #d8e0ec;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  color: var(--cart-brand-dark);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

body.axiom-cart-page .cart-page-coupon-input::placeholder {
  color: #9aa7bf;
}

body.axiom-cart-page .cart-page-coupon-input:focus {
  border-color: #4a88d9;
  box-shadow: 0 0 0 4px rgba(74, 136, 217, 0.1);
}

body.axiom-cart-page .cart-page-coupon-btn {
  min-width: 180px;
  height: 54px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4b8fda 0%, #3c79d8 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

body.axiom-cart-page .cart-page-coupon-btn:hover {
  opacity: 0.96;
}

body.axiom-cart-page .cart-page-coupon-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

body.axiom-cart-page .cart-page-coupon-message {
  min-height: 20px;
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6c7c99;
}

body.axiom-cart-page .cart-page-coupon-message.success {
  color: #1d8a43;
}

body.axiom-cart-page .cart-page-coupon-message.error {
  color: #c73b3b;
}

.cart-page-payment-icons {
  margin-top: 18px;
}

.icons-only-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

.cart-page-payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: #ffffff;
}

.cart-page-payment-icon i,
.cart-page-payment-icon .payment-wordmark {
  color: var(--cart-brand-dark);
  line-height: 1;
}

.cart-page-payment-icon i.fa-cc-visa,
.cart-page-payment-icon i.fa-cc-mastercard,
.cart-page-payment-icon i.fa-cc-amex,
.cart-page-payment-icon i.fa-cc-discover {
  font-size: 40px;
}

.cart-page-payment-icon i.fa-bitcoin,
.cart-page-payment-icon i.fa-ethereum {
  font-size: 34px;
}

.cart-page-payment-icon i.fa-apple-pay {
  font-size: 38px;
}

.payment-wordmark {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.gpay-logo-custom {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}

.gpay-g-blue {
  font-size: 30px;
  font-weight: 500;
  color: #4285f4;
}

.gpay-pay-dark {
  font-size: 24px;
  font-weight: 700;
  color: #12203f;
}

.solana-icon-svg {
  width: 38px;
  height: 28px;
  display: block;
}

.cart-drawer-title-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cart-drawer-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-drawer-title-icon i,
.cart-drawer-title-icon svg {
  display: none !important;
}

/* force the cart page header to match the homepage header */
.axiom-cart-page .site-header .header-inner {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 16px;
}

.axiom-cart-page .site-header .site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.axiom-cart-page .site-header .site-logo img {
  display: block;
  width: 58px;
  height: 58px;
  max-width: none;
  object-fit: contain;
}

.axiom-cart-page .site-header .hamburger-btn {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 64px;
}

.axiom-cart-page #cartTriggerMount {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.axiom-cart-page #cartTriggerMount > * {
  width: 100%;
  height: 100%;
}

.axiom-cart-page #cartTriggerMount .cart-btn,
.axiom-cart-page #cartTriggerMount button {
  position: relative;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.axiom-cart-page #cartTriggerMount .cart-btn svg,
.axiom-cart-page #cartTriggerMount button svg {
  width: 24px;
  height: 24px;
  display: block;
}

.axiom-cart-page #cartTriggerMount .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
}

@media (max-width: 980px) {
  .cart-page-main {
    grid-template-columns: 1fr;
  }

  .cart-card-summary {
    position: static;
    top: auto;
  }
}

@media (max-width: 720px) {
  .cart-page-shell {
    width: min(100% - 20px, 1240px);
    padding: 20px 0 44px;
  }

  .cart-card {
    border-radius: 26px;
    padding: 20px;
  }

  .cart-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .cart-item-image {
    width: 100%;
    height: 220px;
  }

  .cart-item-actions {
    width: 100%;
    justify-items: start;
  }

  .cart-item-price {
    font-size: 24px;
  }

  .cart-summary-total strong {
    font-size: 26px;
  }
}

@media (max-width: 640px) {
  .cart-summary-row,
  .cart-summary-total {
    gap: 12px;
  }

  .cart-summary-row span,
  .cart-summary-row strong {
    font-size: 15px;
  }

  body.axiom-cart-page .cart-page-coupon-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.axiom-cart-page .cart-page-coupon-btn {
    width: 100%;
    min-width: 0;
  }

  .icons-only-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .cart-page-payment-icon {
    min-height: 72px;
    padding: 10px;
    border-radius: 18px;
  }

  .cart-page-payment-icon i.fa-cc-visa,
  .cart-page-payment-icon i.fa-cc-mastercard,
  .cart-page-payment-icon i.fa-cc-amex,
  .cart-page-payment-icon i.fa-cc-discover {
    font-size: 34px;
  }

  .cart-page-payment-icon i.fa-bitcoin,
  .cart-page-payment-icon i.fa-ethereum,
  .cart-page-payment-icon i.fa-apple-pay {
    font-size: 30px;
  }

  .payment-wordmark {
    font-size: 24px;
  }

  .gpay-g-blue {
    font-size: 26px;
  }

  .gpay-pay-dark {
    font-size: 20px;
  }

  .solana-icon-svg {
    width: 32px;
    height: 24px;
  }

  .cart-drawer-title-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .axiom-cart-page .site-header .header-inner {
    grid-template-columns: 56px 1fr 56px;
    gap: 12px;
  }

  .axiom-cart-page .site-header .hamburger-btn {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    flex-basis: 56px;
  }

  .axiom-cart-page #cartTriggerMount {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .axiom-cart-page #cartTriggerMount .cart-btn,
  .axiom-cart-page #cartTriggerMount button {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .axiom-cart-page .site-header .site-logo img {
    width: 54px;
    height: 54px;
  }
}

.cart-page-payment-icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.cart-page-payment-icon-google i {
  font-size: 2rem;
}

.cart-page-coupon-box {
  margin-top: 18px;
}

.cart-page-coupon-label {
  display: block;
  margin-bottom: 10px;
  color: #12203f;
  font-size: 16px;
  font-weight: 800;
}

.cart-page-coupon-row {
  display: grid;
  gap: 12px;
}

.cart-page-coupon-input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #ffffff;
  padding: 0 18px;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #12203f;
  outline: none;
}

.cart-page-coupon-input:focus {
  border-color: #4f97dc;
  box-shadow: 0 0 0 3px rgba(79, 151, 220, 0.12);
}

.cart-page-coupon-btn {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5aa0e8, #3f7fe4);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.cart-page-coupon-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.cart-page-coupon-message {
  min-height: 22px;
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 1.5;
}

.cart-page-coupon-message.success {
  color: #0f9f62;
}

.cart-page-coupon-message.error {
  color: #c23d3d;
}

.cart-page-coupon-message.muted {
  color: #70809d;
}