/* Commerce uses the shared palette and keeps all purchase controls in document flow. */
.commerce-page {
  --commerce-ink: #292c22;
  --commerce-muted: #676b5e;
  --commerce-border: #dedfd4;
  --commerce-soft: #f1f2e9;
  color: var(--commerce-ink);
  width: 100%;
  min-width: 0;
  max-width: 1160px;
  margin: 0 auto;
}
.commerce-page *, .commerce-page *::before, .commerce-page *::after { box-sizing: border-box; }
.commerce-page [hidden] { display: none !important; }
.commerce-page h1, .commerce-page h2, .commerce-page h3 { color: var(--commerce-ink); font-family: Manrope, Inter, sans-serif; letter-spacing: -.035em; }
.commerce-page h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.13; font-weight: 700; }
.commerce-page h2 { margin: 0 0 16px; font-size: 1.3rem; line-height: 1.35; font-weight: 700; }
.commerce-page h3 { font-size: 1rem; line-height: 1.45; }
.commerce-page .help { color: var(--commerce-muted); font-size: .875rem; line-height: 1.65; }
.commerce-page .btn { min-height: 48px; border-radius: 10px; padding: 12px 20px; gap: 12px; box-shadow: none; font-size: .9rem; line-height: 1.35; text-align: center; }
.commerce-page .btn--primary { color: #fff; background: #5f6b34; border: 1px solid #5f6b34; box-shadow: none; }
.commerce-page .btn--primary:hover { background: #424b28; border-color: #424b28; box-shadow: none; transform: none; }
.commerce-page .btn--light { color: #424b28; background: #fff; border: 1px solid var(--commerce-border); box-shadow: none; }
.commerce-page .btn--light:hover { background: var(--commerce-soft); }
.commerce-page .btn:disabled { opacity: .5; cursor: not-allowed; }
.commerce-page input:not([type=hidden]):not([type=radio]):not([type=checkbox]), .commerce-page select, .commerce-page textarea { min-width: 0; max-width: 100%; min-height: 48px; border: 1px solid #cfd2c5; border-radius: 8px; box-shadow: none; background: #fff; color: #292c22; padding: 12px 14px; font: inherit; font-size: 16px; }
.commerce-page input:focus, .commerce-page select:focus, .commerce-page textarea:focus { outline: 2px solid #5f6b34; outline-offset: 2px; border-color: #5f6b34; }
.commerce-page a:focus-visible, .commerce-page button:focus-visible, .commerce-page summary:focus-visible { outline: 2px solid #5f6b34; outline-offset: 4px; }
.commerce-page input[type=checkbox], .commerce-page input[type=radio] { accent-color: #5f6b34; }
.commerce-page .field-error { color: #9e3029; font-size: .875rem; line-height: 1.6; }
.commerce-page label { color: var(--commerce-ink); font-size: .9rem; }
.commerce-page p { line-height: 1.7; }
.commerce-page .commerce-eyebrow { color: #5f6b34; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.commerce-heading { margin: 0 0 32px; }
.commerce-heading h1 { margin: 0 0 14px; }
.commerce-heading > p { margin: 0; max-width: 640px; color: var(--commerce-muted); font-size: 1rem; line-height: 1.7; }
.commerce-surface { min-width: 0; padding: 28px; background: #fff; border: 1px solid var(--commerce-border); border-radius: 14px; box-shadow: 0 3px 12px rgb(41 44 34 / 2%); }
.commerce-back, .commerce-text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #424b28; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.commerce-back { justify-content: flex-start; text-decoration: none; }
.commerce-progress { margin: 0 0 28px; }
.commerce-progress ol { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--commerce-muted); }
.commerce-progress li { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.commerce-progress li + li::before { content: "/"; color: #929686; font-weight: 400; }
.commerce-progress a { display: inline-flex; align-items: center; min-height: 44px; color: var(--commerce-muted); }
.commerce-progress li[aria-current] { color: #424b28; font-weight: 700; }
.commerce-total { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px solid var(--commerce-border); border-bottom: 1px solid var(--commerce-border); }
.commerce-total strong { white-space: nowrap; font-size: 1.55rem; letter-spacing: -.03em; }
.commerce-label { display: block; color: var(--commerce-muted); font-size: .8rem; margin-bottom: 8px; }

/* Product detail */
.commerce-product { gap: 24px; }
.commerce-product .product-page__hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.commerce-product .product-page__media { border: 0; border-radius: 16px; box-shadow: none; background: #eae9df; aspect-ratio: 1 / 1; }
.commerce-product .product-page__media > picture, .commerce-product .product-page__media .triptych { display: block; height: 100%; width: 100%; }
.commerce-product .product-page__media img { height: 100%; width: 100%; display: block; object-fit: cover; }
.commerce-product .product-page__media .triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.commerce-product .triptych picture { min-width: 0; }
.commerce-product .product-page__content { gap: 0; min-width: 0; }
.commerce-product .commerce-product__title { font-size: clamp(2.1rem, 3.8vw, 3.5rem); margin: 0 0 20px; }
.commerce-product .page-lede { font-size: 1rem; color: var(--commerce-muted); line-height: 1.8; margin: 0 0 22px; }
.commerce-product .product-page__meta { gap: 16px; margin-bottom: 22px; }
.commerce-product .price-tag { padding: 0; border: 0; border-radius: 0; background: none; color: var(--commerce-ink); font-size: 1.6rem; font-weight: 700; box-shadow: none; }
.commerce-product .price-tag .help { font-weight: 400; font-size: .9rem; }
.commerce-product .status { border: 0; border-radius: 6px; padding: 5px 9px; background: var(--commerce-soft); color: #424b28; font-size: .75rem; font-weight: 600; }
.commerce-product .status--soldout { color: #815138; background: #f8eee7; }
.commerce-product .product-page__delivery { padding: 18px 0; margin: 0 0 22px; background: none; border: 0; border-top: 1px solid var(--commerce-border); border-bottom: 1px solid var(--commerce-border); border-radius: 0; font-size: .95rem; }
.commerce-product .product-page__delivery strong { font-size: .8rem; color: var(--commerce-muted); font-weight: 500; }
.commerce-product .product-page__delivery .help { margin-top: 8px; font-size: .78rem; }
.commerce-product .product-page__cta { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: end; gap: 14px; }
.commerce-product .qty-group { display: grid; gap: 6px; }
.commerce-product .qty-input { width: 100%; text-align: center; }
.commerce-product .product-page__cta .btn { width: 100%; }
.commerce-product__menu { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; min-height: 44px; color: #424b28; font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; }
.commerce-product .product-article { max-width: none; gap: 40px; margin-top: 28px; }
.commerce-product__essentials { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.commerce-product__essentials .list-clean { display: grid; gap: 9px; font-size: .9rem; color: var(--commerce-muted); }
.commerce-product__essentials .commerce-eyebrow { margin-bottom: 12px; }
.commerce-product__essentials h2 { margin-bottom: 20px; }
.commerce-ingredients li { position: relative; padding-left: 15px; }
.commerce-ingredients li::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #8b9570; left: 0; top: .7em; }
.commerce-storage { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--commerce-border); }
.commerce-storage h3 { margin: 0 0 8px; }
.commerce-storage p { margin: 0; font-size: .9rem; color: var(--commerce-muted); }
.commerce-product__story { max-width: 780px; }
.commerce-product__story p { margin: 0 0 12px; font-size: .95rem; color: var(--commerce-muted); }
.commerce-product__story .product-article__lead { font-size: 1.15rem; color: var(--commerce-ink); font-weight: 500; }
.commerce-product__details { border-top: 1px solid var(--commerce-border); }
.commerce-disclosure { border-bottom: 1px solid var(--commerce-border); }
.commerce-disclosure summary { padding: 20px 4px; cursor: pointer; font-weight: 600; font-size: .95rem; color: #424b28; }
.commerce-disclosure > div { padding: 0 4px 24px; max-width: 850px; font-size: .9rem; color: var(--commerce-muted); }
.commerce-disclosure ul { line-height: 1.8; }

/* Cart */
.commerce-cart__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.commerce-cart .cart-list { gap: 0; padding: 0; margin: 0; border: 1px solid var(--commerce-border); background: #fff; border-radius: 14px; overflow: hidden; }
.commerce-cart .cart-line.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; padding: 24px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.commerce-cart .cart-line + .cart-line { border-top: 1px solid var(--commerce-border); }
.commerce-cart .cart-info { gap: 5px; }
.commerce-cart .cart-line__title { font-size: 1.05rem; line-height: 1.4; }
.commerce-cart .cart-line__schedule { font-size: .78rem; color: #5f6b34; margin-top: 7px; }
.commerce-cart .cart-line__schedule strong { color: #5f6b34; font-weight: 600; }
.commerce-cart .subtotal { align-self: start; padding-top: 2px; white-space: nowrap; font-size: 1rem; }
.commerce-cart .cart-line .qty-group { display: inline-flex; gap: 0; width: fit-content; border: 1px solid var(--commerce-border); border-radius: 8px; overflow: hidden; }
.commerce-cart .qty-btn { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 0; padding: 0; color: #424b28; background: #fff; font-family: inherit; font-size: 1.35rem; font-weight: 500; box-shadow: none; }
.commerce-cart .qty-btn:hover:not(:disabled) { background: var(--commerce-soft); }
.commerce-cart .qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.commerce-cart .qty-value { min-width: 30px; text-align: center; font-size: .9rem; }
.commerce-cart__remove { display: flex; align-items: center; justify-content: flex-end; }
.commerce-cart .remove-btn { min-height: 44px; padding: 8px 0 8px 12px; border: 0; border-radius: 0; background: none; color: var(--commerce-muted); font-size: .8rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.commerce-cart .remove-btn:hover { color: #9e3029; }
.commerce-cart .cart-summary { display: flex; flex-direction: column; align-items: stretch; position: sticky; top: 110px; bottom: auto; gap: 0; padding: 28px; margin: 0; background: #fff; border: 1px solid var(--commerce-border); border-radius: 14px; box-shadow: none; }
.commerce-cart .cart-summary h2 { font-size: 1.2rem; margin: 0 0 18px; }
.commerce-cart .cart-summary .help { margin: 16px 0 22px; }
.commerce-cart .cart-summary .commerce-text-link { margin-top: 10px; }
.commerce-cart__extras { margin-top: 48px; }
.commerce-cart__extras > h2 { font-size: 1.5rem; margin-bottom: 20px; }
.commerce-cart__extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.commerce-addon > .stack { display: grid; gap: 20px; height: 100%; }
.commerce-addon h2 { font-size: 1.15rem; margin-bottom: 6px; }
.commerce-addon .section-eyebrow { color: #5f6b34; font-size: .68rem; letter-spacing: .12em; margin-bottom: 12px; }
.commerce-addon .status { border: 0; padding: 4px 8px; border-radius: 6px; background: var(--commerce-soft); color: #424b28; font-size: .75rem; }
.commerce-addon form { align-items: end; justify-content: flex-start; gap: 12px; }
.commerce-addon .qty-group { display: grid; gap: 5px; }
.commerce-addon .qty-input { width: 76px; text-align: center; }
.commerce-empty { text-align: center; padding: 60px 24px; }
.commerce-empty__mark { display: grid; place-items: center; margin: 0 auto 22px; width: 56px; height: 56px; color: #5f6b34; background: var(--commerce-soft); border-radius: 50%; font-size: 1.7rem; }
.commerce-empty h2 { font-size: 1.5rem; }
.commerce-empty p { margin: 0 auto 24px; max-width: 420px; color: var(--commerce-muted); }

/* Checkout keeps the order review above the native form-associated submit action. */
.commerce-checkout .checkout-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.commerce-checkout .checkout-heading { margin-bottom: 32px; }
.commerce-checkout .checkout-panel { padding: 28px; border: 1px solid var(--commerce-border); border-radius: 14px; background: #fff; box-shadow: none; }
.commerce-checkout .checkout-details form { gap: 28px; }
.commerce-checkout .checkout-section legend { padding-bottom: 22px; color: var(--commerce-ink); font-family: Manrope, sans-serif; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.checkout-section__number { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--commerce-soft); color: #424b28; font-size: .8rem; }
.commerce-checkout .checkout-section .form { gap: 20px; }
.commerce-checkout .checkout-section + .checkout-section { border-color: var(--commerce-border); padding-top: 24px; }
.commerce-checkout .checkout-choice-row label { border-color: var(--commerce-border); border-radius: 8px; min-height: 50px; font-weight: 500; }
.commerce-checkout .checkout-choice-row label:has(input:checked) { border-color: #7c8860; background: var(--commerce-soft); color: #424b28; }
.commerce-checkout .checkout-field-label { font-size: .875rem; font-weight: 500; }
.commerce-checkout .checkout-verification-actions .btn { min-height: 44px; font-size: .8rem; padding: 10px 15px; }
.commerce-checkout .checkout-options { padding: 0 16px; border-color: var(--commerce-border); border-radius: 8px; background: #fbfcf8; }
.commerce-checkout .checkout-options summary { min-height: 50px; font-size: .85rem; color: #424b28; }
.commerce-checkout .checkout-review { position: sticky; top: 110px; }
.checkout-review__heading { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.commerce-checkout .checkout-review__heading h2 { margin: 0; font-size: 1.15rem; }
.commerce-checkout .checkout-edit-cart { margin: 0; font-size: .8rem; font-weight: 500; color: #5f6b34; text-decoration: underline; text-underline-offset: 3px; }
.commerce-checkout .checkout-schedule-heading { border-radius: 6px; background: var(--commerce-soft); font-family: inherit; font-size: .8rem; font-weight: 600; letter-spacing: 0; padding: 10px 12px; color: #424b28; }
.commerce-checkout .order-summary__line { padding: 16px 0; border-color: var(--commerce-border); }
.commerce-checkout .order-summary__meta > strong { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.commerce-checkout .order-summary__meta .help { font-size: .78rem; line-height: 1.6; }
.commerce-checkout .line-total { font-size: .9rem; white-space: nowrap; }
.commerce-checkout .summary-line { margin: 0; min-height: 34px; font-size: .875rem; }
.commerce-checkout .summary-line.mt-md { margin-top: 20px; }
.commerce-checkout .summary-total { margin-top: 14px; padding-top: 20px; border-color: var(--commerce-border); font-size: 1.2rem; }
.commerce-checkout .summary-total strong { font-size: 1.5rem; letter-spacing: -.02em; }
.commerce-checkout .checkout-place-order .help { font-size: .75rem; }
.commerce-checkout #smsModal, .commerce-checkout #emailModal { border: 1px solid var(--commerce-border); border-radius: 14px; box-shadow: 0 20px 70px rgb(25 31 16 / 18%); padding: 24px; background: #fff; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.commerce-checkout #smsModal h3, .commerce-checkout #emailModal h3 { margin: 0 0 14px; font-size: 1.2rem; }
.commerce-checkout #smsModal .row, .commerce-checkout #emailModal .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 16px 0 12px; }
.commerce-checkout #smsModal .btn, .commerce-checkout #emailModal .btn { background: #5f6b34; color: #fff; }
.commerce-checkout .btn-alt { min-height: 44px; border: 1px solid var(--commerce-border); border-radius: 8px; background: #f7f8f3; color: #424b28; padding: 10px 14px; font-size: .85rem; }

/* Confirmation, payment and order status */
.commerce-confirmation { max-width: 1000px; }
.commerce-confirmation__heading { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.commerce-confirmation__heading h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.commerce-confirmation__heading p { max-width: 510px; margin: 16px auto 0; font-size: .95rem; color: var(--commerce-muted); }
.commerce-confirmation__check { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #e9edda; color: #5f6b34; font-size: 1.5rem; }
.commerce-confirmation__heading .commerce-eyebrow { margin-bottom: 12px; }
.commerce-confirmation__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.commerce-confirmation .order-schedule { padding: 0; margin: 0; border: 0; gap: 20px; }
.commerce-confirmation .order-schedule__title { margin: 0; font-size: 1.15rem; }
.commerce-confirmation .order-schedule__group { padding-top: 18px; border-color: var(--commerce-border); }
.commerce-confirmation .order-schedule__date { margin: 0 0 6px; font-size: .9rem; font-family: inherit; letter-spacing: 0; font-weight: 600; }
.commerce-confirmation .order-schedule__window { color: #5f6b34; font-size: .8rem; }
.commerce-confirmation .order-schedule__items { gap: 12px; margin-top: 16px; }
.commerce-confirmation .order-schedule__item { gap: 20px; font-size: .9rem; align-items: start; }
.commerce-confirmation .order-schedule__item .help { font-size: .8rem; }
.commerce-payment { display: grid; gap: 18px; }
.commerce-payment h2, .commerce-payment p, .commerce-payment .commerce-eyebrow { margin: 0; }
.commerce-payment .commerce-eyebrow { margin-bottom: -8px; }
.commerce-payment .commerce-total { padding: 16px 0; font-size: .9rem; }
.commerce-payment .commerce-text-link { min-height: 44px; margin: -6px 0; font-size: .85rem; }
.commerce-qr { border-top: 1px solid var(--commerce-border); border-bottom: 1px solid var(--commerce-border); }
.commerce-qr summary { cursor: pointer; min-height: 48px; padding: 14px 0; color: #424b28; font-size: .85rem; }
.commerce-qr img { display: block; width: 220px; max-width: 100%; height: auto; margin: 8px auto 20px; }
.commerce-status-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.commerce-status-row h2 { font-size: 1.15rem; }
.commerce-status { display: inline-flex; align-items: center; width: fit-content; border-radius: 6px; padding: 5px 9px; font-size: .75rem; font-weight: 600; background: #f0f0e9; color: #5b5f50; }
.commerce-status--paid { background: #eaf0de; color: #424b28; }
.commerce-status--pending { background: #f7eedc; color: #7b5929; }
.commerce-location h3 { margin: 0 0 10px; }
.commerce-location p { overflow-wrap: anywhere; font-size: .9rem; }

/* Subscription management and verification popup */
.commerce-subscription { max-width: 1040px; }
.commerce-subscription__overview { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr auto; gap: 24px; align-items: start; margin-bottom: 28px; }
.commerce-subscription__overview > div { min-width: 0; overflow-wrap: anywhere; }
.commerce-subscription__overview strong { font-size: .95rem; font-weight: 600; }
.commerce-subscription__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.commerce-subscription__side { display: grid; gap: 24px; }
.commerce-dates { display: grid; gap: 0; margin-top: 20px; }
.commerce-dates li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--commerce-border); }
.commerce-dates time { display: grid; width: 48px; flex: 0 0 48px; text-align: center; padding: 5px 8px; background: var(--commerce-soft); border-radius: 8px; color: #424b28; }
.commerce-dates time span { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.commerce-dates time strong { font-size: 1.25rem; line-height: 1.4; }
.commerce-dates li > div { display: grid; gap: 3px; min-width: 0; }
.commerce-dates li > div > strong { font-size: .9rem; }
.commerce-dates li .help { font-size: .78rem; }
.commerce-info-list { margin: 0; padding-left: 20px; color: var(--commerce-muted); display: grid; gap: 14px; font-size: .9rem; line-height: 1.7; }
.commerce-history li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--commerce-border); }
.commerce-history .commerce-status-row { font-size: .9rem; }
.commerce-history p.help { margin: 4px 0 10px; }
.commerce-subscription__cancel { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border-top: 1px solid var(--commerce-border); margin-top: 36px; padding-top: 26px; }
.commerce-subscription__cancel h2 { font-size: 1rem; margin-bottom: 6px; }
.commerce-subscription__cancel p { margin: 0; }
.commerce-page .btn.commerce-danger { color: #963d30; background: transparent; border: 1px solid #d9bfb6; }
.commerce-page .btn.commerce-danger:hover { color: #963d30; background: #faeeea; border-color: #bd8e80; }
.commerce-notice { margin: 20px 0; background: #f6efdc; border: 1px solid #e2d7bb; color: #735522; padding: 16px; border-radius: 10px; font-size: .9rem; }
.commerce-popup { padding: 24px 16px; margin: 0; min-height: 100dvh; background: #f7f5ef; font-family: Inter, system-ui, sans-serif; }
.commerce-popup .commerce-page { max-width: 440px; margin: max(20px, 8vh) auto; }
.commerce-popup h1 { font-size: 1.7rem; }
.commerce-popup #m { overflow-wrap: anywhere; }
.commerce-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 8px 0 12px; }
.commerce-popup #status { margin: 12px 0; min-height: 24px; }

@media (max-width: 1000px) {
  .commerce-product .product-page__hero { gap: 32px; }
  .commerce-cart__grid, .commerce-checkout .checkout-grid { gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .commerce-checkout .checkout-panel, .commerce-cart .cart-summary { padding: 22px; }
}
@media (max-width: 800px) {
  .commerce-page h1 { font-size: 2.25rem; }
  .commerce-cart__grid, .commerce-checkout .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .commerce-cart .cart-summary, .commerce-checkout .checkout-review { position: static; }
  .commerce-confirmation__grid { grid-template-columns: minmax(0, 1fr); }
  .commerce-product .product-page__hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .commerce-product .product-page__media { aspect-ratio: 4 / 3; }
  .commerce-product .commerce-product__title { font-size: 2.25rem; }
  .commerce-product__essentials { gap: 20px; }
}
@media (max-width: 600px) {
  .commerce-page h1 { font-size: 2rem; }
  .commerce-page h2 { font-size: 1.2rem; }
  .commerce-page .commerce-eyebrow { font-size: .65rem; margin-bottom: 12px; }
  .commerce-heading { margin-bottom: 26px; }
  .commerce-heading > p { font-size: .9rem; }
  .commerce-progress { margin-bottom: 20px; }
  .commerce-surface, .commerce-checkout .checkout-panel, .commerce-cart .cart-summary { padding: 22px 18px; border-radius: 12px; }
  .commerce-product { gap: 16px; }
  .commerce-product .product-page__hero { gap: 24px; }
  .commerce-product .product-page__media { border-radius: 12px; }
  .commerce-product .commerce-product__title { font-size: 2rem; margin-bottom: 16px; }
  .commerce-product .page-lede { font-size: .9rem; margin-bottom: 18px; }
  .commerce-product .product-page__meta { flex-direction: row; justify-content: flex-start; margin-bottom: 18px; }
  .commerce-product .product-page__cta { gap: 12px; }
  .commerce-product .product-article { gap: 28px; margin-top: 18px; }
  .commerce-product__essentials { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .commerce-product__story .product-article__lead { font-size: 1rem; }
  .commerce-disclosure summary { font-size: .9rem; padding: 18px 2px; }
  .commerce-cart .cart-line.card { gap: 16px 12px; padding: 20px 18px; }
  .commerce-cart .cart-line__title { font-size: .95rem; }
  .commerce-cart .cart-info .help { font-size: .8rem; }
  .commerce-cart .cart-line__schedule.help { font-size: .75rem; }
  .commerce-cart__extras { margin-top: 32px; }
  .commerce-cart__extras > h2 { font-size: 1.25rem; }
  .commerce-cart__extra-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .commerce-checkout .checkout-heading { margin-bottom: 26px; }
  .commerce-checkout .checkout-details form { gap: 26px; }
  .commerce-checkout .checkout-section legend { font-size: .95rem; }
  .commerce-checkout .checkout-section .form { gap: 18px; }
  .commerce-checkout .checkout-verification-actions .btn { flex: 1 1 120px; }
  .commerce-checkout .checkout-review__heading h2 { font-size: 1.15rem; }
  .commerce-confirmation__heading { margin-bottom: 28px; }
  .commerce-confirmation__heading h1 { font-size: 2rem; }
  .commerce-confirmation__heading p { font-size: .9rem; }
  .commerce-confirmation__check { margin-bottom: 18px; }
  .commerce-confirmation__grid { gap: 16px; }
  .commerce-confirmation .order-schedule__item { gap: 14px; }
  .commerce-subscription__overview { grid-template-columns: minmax(0, 1fr) auto; gap: 22px; }
  .commerce-subscription__overview > div:first-child { grid-column: 1 / -1; }
  .commerce-subscription__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .commerce-subscription__side { gap: 16px; }
  .commerce-subscription__cancel form, .commerce-subscription__cancel .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .commerce-page *, .commerce-page *::before, .commerce-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}