:root {
  --checkout-blue: #005bd1;
  --checkout-blue-bright: #176fd1;
  --checkout-purple: #592ff4;
  --checkout-line: #dedede;
  --checkout-muted: #646464;
  --checkout-summary: #f5f5f5;
  --checkout-soft: #f4f4f4;
  --checkout-text: #000000;
}

* {
  box-sizing: border-box;
}

html {
  background: #ffffff;
  color-scheme: light;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--checkout-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--checkout-blue);
}

button,
input,
select {
  font: inherit;
}

button,
summary,
select,
input[type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.checkout-page {
  min-height: 100vh;
  overflow: clip;
}

.checkout-form {
  display: contents;
}

.checkout-icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.checkout-header {
  height: 101px;
  border-bottom: 1px solid var(--checkout-line);
  background: #ffffff;
}

.header-inner {
  width: 100%;
  max-width: 980px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.brand-logo {
  display: block;
  width: 106px;
  height: auto;
}

.bag-icon {
  width: 24px;
  height: 24px;
  color: var(--checkout-blue);
}

.mobile-order-toggle {
  display: none;
}

.checkout-columns {
  display: grid;
  grid-template-columns: 539px 441px;
  width: 100%;
  max-width: 980px;
  min-height: calc(100vh - 101px);
  margin: 0 auto;
}

.checkout-main {
  width: 100%;
  padding: 40px 40px 36px 0;
}

.express-checkout h2 {
  margin: 0 0 14px;
  color: var(--checkout-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  text-align: center;
}

.shop-pay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 262px;
  height: 48px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--checkout-purple);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 1;
}

.shop-pay-button img {
  display: block;
  width: 47px;
  height: 20px;
}

.express-element-shell {
  width: 100%;
  min-height: 48px;
  margin: 0 auto;
}

.wallet-placeholder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 48px;
}

.wallet-placeholder span {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  background: #f6f6f6;
  color: #555555;
  font-size: 12px;
  font-weight: 600;
}

.wallet-availability-note,
.stripe-inline-error,
.stripe-setup-message {
  margin: 8px 0 0;
  color: var(--checkout-muted);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.stripe-inline-error,
.stripe-setup-message {
  color: #8a2f26;
}

.stripe-loading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 48px;
}

.stripe-loading span {
  min-height: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f1f1 0%, #fafafa 50%, #f1f1f1 100%);
}

.express-checkout > p {
  max-width: 477px;
  margin: 13px auto 0;
  color: var(--checkout-muted);
  font-size: 12px;
  line-height: 16.2px;
  text-align: center;
}

.or-separator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 20px;
  color: var(--checkout-muted);
  font-size: 14px;
  line-height: 18.9px;
}

.or-separator::before,
.or-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--checkout-line);
}

.checkout-section h2 {
  margin: 0 0 13px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
}

.contact-section > .checkout-field {
  width: 100%;
}

.checkout-field {
  position: relative;
  display: block;
  width: 100%;
  height: 49px;
  overflow: hidden;
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  background: #ffffff;
}

.checkout-field:focus-within {
  border-color: var(--checkout-blue-bright);
  box-shadow: 0 0 0 1px var(--checkout-blue-bright);
}

.field-label {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 50%;
  color: var(--checkout-muted);
  font-size: 14px;
  line-height: 19px;
  pointer-events: none;
  transform: translateY(-50%);
}

.field-label--raised {
  top: 7px;
  font-size: 11px;
  line-height: 13px;
  transform: none;
}

.checkout-field input,
.checkout-field select {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #000000;
}

.checkout-field input {
  padding: 13px 38px 13px 10px;
}

.checkout-field:focus-within .field-label:not(.field-label--raised),
.checkout-field:has(input:not(:placeholder-shown)) .field-label:not(.field-label--raised) {
  top: 7px;
  font-size: 11px;
  line-height: 13px;
  transform: none;
}

.checkout-field:focus-within input,
.checkout-field:has(input:not(:placeholder-shown)) input {
  padding-top: 21px;
  padding-bottom: 4px;
}

.checkout-form[data-validation-attempted="true"] .checkout-field:has(input:invalid),
.checkout-form[data-validation-attempted="true"] .checkout-field:has(select:invalid) {
  border-color: #d72c0d;
  box-shadow: 0 0 0 1px #d72c0d;
}

.checkout-field select {
  appearance: none;
  padding: 21px 36px 4px 10px;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: #555555;
  pointer-events: none;
  transform: translateY(-50%);
}

.help-icon,
.small-help {
  width: 16px;
  height: 16px;
  color: #585858;
}

.checkout-field > .help-icon {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.field-trailing-icon {
  position: absolute;
  right: 13px;
  z-index: 2;
  top: 50%;
  width: 16px;
  height: 16px;
  color: #555555;
  pointer-events: none;
  transform: translateY(-50%);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 19px;
  cursor: pointer;
}

.checkbox-row input {
  position: relative;
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border: 1px solid var(--checkout-line);
  border-radius: 6px;
  background: #ffffff;
}

.checkbox-row input:checked {
  border-color: #1773d1;
  background: #1773d1;
}

.checkbox-row input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.delivery-section {
  margin-top: 32px;
}

.field-stack {
  display: grid;
  gap: 10px;
}

.two-column-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.three-column-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.shipping-method {
  margin-top: 25px;
}

.shipping-method h3 {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 600;
}

.shipping-method p {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  margin: 0;
  padding: 13px 18px;
  border-radius: 11px;
  background: var(--checkout-soft);
  color: var(--checkout-muted);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.payment-section {
  margin-top: 33px;
}

.payment-section h2 {
  margin-bottom: 1px;
}

.section-subtitle {
  margin: 0 0 16px;
  color: var(--checkout-muted);
  font-size: 14px;
}

.payment-panel {
  overflow: hidden;
  border: 1px solid var(--checkout-blue-bright);
  border-radius: 12px;
  background: var(--checkout-soft);
}

.payment-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--checkout-blue-bright);
  background: #f4f4fb;
}

.payment-panel-header > strong {
  font-size: 14px;
}

.stripe-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--checkout-muted);
  font-size: 12px;
}

.stripe-secure-label .mini-lock {
  position: static;
  width: 14px;
  height: 14px;
  transform: none;
}

.stripe-payment-element {
  min-height: 225px;
  padding: 14px;
  background: #ffffff;
}

.stripe-loading--payment {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 197px;
}

.stripe-loading--payment span {
  min-height: 49px;
  border: 1px solid var(--checkout-line);
  border-radius: 11px;
}

.stripe-loading--payment span:first-child {
  min-height: 42px;
}

.stripe-payment-element > .stripe-setup-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 197px;
  margin: 0;
  padding: 20px;
}

.card-brands {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-brands img {
  display: block;
  width: 38px;
  height: 24px;
}

.more-cards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 24px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  background: #ffffff;
  color: #3a6591;
  font-size: 11px;
}

.payment-field-grid {
  display: grid;
  gap: 10px;
  padding: 14px 14px 10px;
}

.payment-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 0 38px 0 12px;
  border: 1px solid var(--checkout-line);
  border-radius: 11px;
  background: #ffffff;
  color: var(--checkout-muted);
  font-size: 14px;
}

.payment-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.payment-field .help-icon {
  position: absolute;
  right: 12px;
}

.mini-lock {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: #555555;
  transform: translateY(-50%);
}

.payment-panel > .checkbox-row {
  margin: 0;
  padding: 2px 14px 14px;
}

.payment-handoff-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mobile-inline-summary {
  display: none;
}

.remember-me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
}

.remember-me > div {
  min-width: 0;
}

.remember-me strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
}

.remember-me p {
  margin: 1px 0 0;
  color: var(--checkout-muted);
  font-size: 11px;
  line-height: 15px;
}

.remember-me a {
  color: var(--checkout-muted);
}

.remember-me button {
  flex: 0 0 auto;
  padding: 8px 0 8px 8px;
  border: 0;
  background: transparent;
  color: var(--checkout-blue);
  cursor: pointer;
  font-size: 12px;
}

.renewal-legal {
  margin: 54px 0 0;
  font-size: 14px;
  line-height: 18.9px;
}

.renewal-legal strong {
  font-weight: 700;
}

.renewal-legal a {
  color: #000000;
}

.checkout-action {
  margin-top: 20px;
}

.pay-now-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 49px;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--checkout-blue);
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.pay-now-button:hover {
  background: #075eb7;
}

.pay-now-button:focus-visible {
  outline: 3px solid #9fc8f4;
  outline-offset: 2px;
}

.pay-now-button:disabled {
  background: var(--checkout-blue);
  color: #ffffff;
  cursor: wait;
  opacity: 1;
}

.action-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #e2a5a0;
  border-radius: 8px;
  background: #fff2f1;
  color: #8a2f26;
  font-size: 13px;
  line-height: 18px;
}

.policy-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--checkout-line);
}

.policy-footer a {
  font-size: 12px;
}

.desktop-order-summary {
  position: relative;
  min-width: 0;
  padding: 40px 0 36px 41px;
  background: var(--checkout-summary);
  box-shadow: 100vw 0 0 100vw var(--checkout-summary);
}

.desktop-summary-inner {
  position: sticky;
  top: 40px;
  width: 100%;
  max-width: 400px;
}

.product-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.product-thumb {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  overflow: visible;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.quantity-badge {
  position: absolute;
  right: -6px;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.product-name {
  display: grid;
  min-width: 0;
}

.product-name strong,
.product-line-price {
  font-size: 14px;
  font-weight: 400;
}

.product-name span {
  margin-top: 1px;
  color: var(--checkout-muted);
  font-size: 12px;
}

.discount-row {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 10px;
  margin-top: 22px;
}

.discount-field {
  position: relative;
  display: block;
  height: 49px;
  overflow: hidden;
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  background: #ffffff;
}

.discount-field span {
  position: absolute;
  left: 10px;
  top: 50%;
  color: var(--checkout-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.discount-field input {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 0;
  outline: 0;
  background: transparent;
}

.discount-row > button {
  border: 1px solid #e4e4e4;
  border-radius: 11px;
  background: #f1f1f1;
  color: #7a7a7a;
  font-weight: 600;
}

.cost-summary {
  display: grid;
  gap: 6px;
  margin-top: 34px;
}

.cost-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cost-summary > div > strong,
.cost-summary > div > span {
  font-size: 14px;
  font-weight: 400;
}

.cost-summary .muted-value {
  color: var(--checkout-muted);
}

.cost-summary .total-cost {
  margin-top: 11px;
}

.cost-summary .total-cost > strong {
  font-size: 18px;
  font-weight: 600;
  line-height: 24.3px;
}

.total-cost > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.total-cost small {
  color: var(--checkout-muted);
  font-size: 11px;
}

.total-cost span strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 24.3px;
}

.cost-summary .recurring-cost {
  margin-top: 1px;
  padding-top: 4px;
  border-top: 1px solid var(--checkout-line);
}

.cost-summary .recurring-cost strong {
  font-size: 14px;
  font-weight: 600;
}

.small-help {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 2px;
  font-size: 8px;
  vertical-align: 1px;
}

@media (max-width: 1039px) and (min-width: 1000px) {
  .header-inner,
  .checkout-columns {
    max-width: calc(100% - 48px);
  }

  .checkout-columns {
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
  }

  .checkout-main {
    padding-right: 34px;
  }

  .desktop-order-summary {
    padding-left: 34px;
  }
}

@media (max-width: 999px) {
  .checkout-page {
    overflow: visible;
  }

  .checkout-header {
    height: 101px;
  }

  .header-inner {
    max-width: none;
    padding: 0 14px;
  }

  .mobile-order-toggle {
    display: block;
    border-bottom: 1px solid var(--checkout-line);
    background: var(--checkout-summary);
  }

  .mobile-order-toggle summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 63px;
    padding: 0 14px;
    color: var(--checkout-blue);
    cursor: pointer;
    list-style: none;
  }

  .mobile-order-toggle summary::-webkit-details-marker {
    display: none;
  }

  .mobile-order-toggle summary strong {
    color: #000000;
    font-size: 20px;
  }

  .summary-chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    color: var(--checkout-blue);
    vertical-align: -2px;
  }

  .mobile-toggle-content {
    padding: 14px;
    border-top: 1px solid var(--checkout-line);
  }

  .checkout-columns {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .checkout-main {
    width: 100%;
    padding: 20px 14px 40px;
  }

  .desktop-order-summary {
    display: none;
  }

  .shop-pay-button {
    width: calc(100% - 10px);
    height: 48px;
  }

  .express-checkout > p {
    margin-top: 13px;
    line-height: 16.2px;
  }

  .or-separator {
    margin: 18px 0 13px;
  }

  .two-column-fields,
  .three-column-fields,
  .payment-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .delivery-section {
    margin-top: 33px;
  }

  .shipping-method {
    margin-top: 24px;
  }

  .shipping-method p {
    min-height: 68px;
    justify-content: flex-start;
    text-align: left;
  }

  .payment-section {
    margin-top: 33px;
  }

  .payment-field-grid {
    padding: 14px 14px 10px;
  }

  .payment-panel > .checkbox-row {
    padding-bottom: 14px;
  }

  .card-brands {
    gap: 4px;
  }

  .mobile-inline-summary {
    display: block;
    margin-top: 31px;
  }

  .add-discount-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--checkout-line);
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
    font-weight: 600;
  }

  .add-discount-button .checkout-icon {
    width: 14px;
    height: 14px;
  }

  .mobile-total-line {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 11px;
  }

  .product-thumb--compact {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  .product-thumb--compact img {
    border-radius: 8px;
  }

  .mobile-total-line > div {
    display: grid;
  }

  .mobile-total-line > div strong {
    font-size: 17px;
    line-height: 19px;
  }

  .mobile-total-line > div span {
    color: var(--checkout-muted);
    font-size: 12px;
  }

  .mobile-total-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .mobile-total-price small {
    color: var(--checkout-muted);
    font-size: 10px;
  }

  .mobile-total-price strong {
    font-size: 17px;
  }

  .mobile-total-price .checkout-icon {
    width: 14px;
    height: 14px;
  }

  .mobile-recurring-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 5px 6px;
    border-radius: 6px;
    background: var(--checkout-summary);
    white-space: nowrap;
  }

  .mobile-recurring-line strong {
    font-size: 14px;
  }

  .mobile-recurring-line .small-help {
    margin-left: auto;
  }

  .remember-me {
    margin-top: 21px;
  }

  .renewal-legal {
    margin-top: 54px;
    line-height: 18.9px;
  }

  .checkout-action {
    margin-top: 19px;
  }

  .policy-footer {
    gap: 7px 13px;
    margin-top: 14px;
    padding-top: 20px;
  }

  .policy-footer a {
    font-size: 14px;
  }

  .product-line--compact {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
  }
}

@media (min-width: 750px) and (max-width: 999px) {
  .header-inner,
  .checkout-main,
  .mobile-order-toggle summary {
    max-width: 580px;
    margin-right: auto;
    margin-left: auto;
  }

  .checkout-main {
    padding-bottom: 20px;
  }

  .or-separator {
    margin: 22px 0 20px;
  }

  .express-checkout > p {
    max-width: none;
    text-align: left;
  }

  .two-column-fields,
  .payment-split {
    grid-template-columns: 1fr 1fr;
  }

  .three-column-fields {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .shipping-method p {
    min-height: 51px;
    justify-content: center;
    text-align: center;
  }

  .mobile-inline-summary {
    margin-top: 36px;
  }

  .remember-me {
    margin-top: 15px;
  }

  .remember-me > div {
    max-width: 440px;
  }

  .policy-footer {
    gap: 10px 14px;
    margin-top: 48px;
  }

  .policy-footer a {
    font-size: 12px;
  }
}

@media (max-width: 749px) {
  .checkout-main {
    padding-bottom: 20px;
  }

  .policy-footer {
    padding-bottom: 17px;
  }
}

@media (max-width: 374px) {
  .checkout-main,
  .header-inner,
  .mobile-order-toggle summary {
    padding-left: 12px;
    padding-right: 12px;
  }

  .card-brands img {
    width: 34px;
    height: auto;
  }

  .mobile-recurring-line strong {
    font-size: 12px;
  }
}

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

.status-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--checkout-summary);
}

.status-card {
  max-width: 560px;
  padding: 42px;
  border: 1px solid var(--checkout-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.07);
  text-align: center;
}

.status-card h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: -0.03em;
}

.status-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 26px auto;
  border-radius: 50%;
  background: #e8f1fb;
  color: var(--checkout-blue);
  font-size: 24px;
}

.status-card > p:not(.status-mark) {
  color: var(--checkout-muted);
  line-height: 1.6;
}

.status-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--checkout-blue);
  font-weight: 700;
}

/* ===================== 702Greens pay links additions (2026-10-03) ===================== */
[hidden] { display: none !important; }
.testbar { padding: 8px 14px; background: #fff3cd; color: #6b4e00; font-size: 13px; text-align: center; }
.field-wrap + .field-wrap { margin-top: 0; }
.field-error { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; color: #d72c0d; font-size: 12px; line-height: 16px; }
.field-error .checkout-icon { width: 13px; height: 13px; }
.checkout-field[data-invalid="true"] { border-color: #d72c0d; box-shadow: 0 0 0 1px #d72c0d; }
.checkout-field textarea { width: 100%; height: 100%; margin: 0; padding: 21px 10px 4px; border: 0; outline: 0; resize: none; background: transparent; color: #000; font: inherit; }
.checkout-field--disabled { background: #f6f6f6; }
.checkout-field input:disabled, .checkout-field select:disabled { color: #545454; cursor: not-allowed; }
.ship-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 51px;
  padding: 13px 14px;
  border: 1px solid var(--checkout-blue-bright);
  border-radius: 12px;
  background: #f4f4fb;
}
.ship-option .radio { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 5px solid var(--checkout-blue-bright); background: #fff; }
.ship-option div { flex: 1; min-width: 0; }
.ship-option strong { display: block; font-size: 14px; font-weight: 400; }
.ship-option span { color: var(--checkout-muted); font-size: 12px; }
.ship-option b { font-size: 14px; font-weight: 600; }
.billing-fields { padding: 0 14px 14px; }
.billing-fields h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 600; }
.discount-message { margin: 6px 0 0; font-size: 12px; color: var(--checkout-muted); }
.discount-message[data-tone="error"] { color: #d72c0d; }
.discount-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: #ececec; color: #000; font-size: 12px; }
.discount-tag button { padding: 0; border: 0; background: none; color: var(--checkout-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.discount-row > button:not(:disabled) { background: var(--checkout-blue); border-color: var(--checkout-blue); color: #fff; cursor: pointer; }
.product-name span + span { margin-top: 0; }
.status-inline { padding: 80px 0; color: var(--checkout-muted); text-align: center; }
.status-inline h1 { margin: 0 0 8px; color: #000; font-size: 22px; }

/* Thank-you page, after Shopify's order status page. */
.thanks-head { display: flex; align-items: center; gap: 12px; }
.thanks-head .checkout-icon { width: 44px; height: 44px; color: var(--checkout-blue); stroke-width: 1.2; }
.thanks-head p { margin: 0; color: var(--checkout-muted); font-size: 14px; }
.thanks-head h2 { margin: 2px 0 0; font-size: 24px; font-weight: 600; line-height: 1.2; }
.thanks-box { margin-top: 20px; padding: 18px; border: 1px solid var(--checkout-line); border-radius: 12px; }
.thanks-box h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.thanks-box p { margin: 0; color: var(--checkout-muted); font-size: 14px; line-height: 1.45; }
.thanks-box p + p { margin-top: 6px; }
.thanks-box a { color: var(--checkout-blue); }
.order-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 12px; }
.order-details h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.order-details p { color: #000; }
.thanks-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 14px; }
.thanks-foot a { color: var(--checkout-blue); }
.restart-test { margin-top: 16px; font-size: 12px; }
.restart-test button { padding: 0; border: 0; background: none; color: var(--checkout-blue); cursor: pointer; text-decoration: underline; font: inherit; }
@media (max-width: 749px) { .order-details { grid-template-columns: 1fr; } }

[data-view="loading"] .checkout-form-wrap, [data-view="loading"] .thanks,
[data-view="error"] .checkout-form-wrap, [data-view="error"] .thanks, [data-view="error"] .desktop-summary-inner, [data-view="error"] .mobile-order-toggle,
[data-view="checkout"] .thanks, [data-view="checkout"] .status-inline,
[data-view="thanks"] .checkout-form-wrap, [data-view="thanks"] .status-inline { display: none !important; }
[data-view="loading"] .status-inline [data-error], [data-view="error"] .status-inline [data-loading] { display: none; }
.stripe-payment-element { min-height: 0; }
/* The summary's grey fill is a wide box-shadow; keep the header and test bar painted above it, as Shopify does. */
.testbar, .checkout-header { position: relative; z-index: 2; }

/* ===================== 702Greens brand layer (2026-10-03) =====================
   Shopify's layout stays exactly as above; this changes only the look, the way Shopify
   Plus brands restyle their checkouts: Work Sans, 702Greens teal, lime pay button,
   a tinted summary column and a trust row. */
@font-face {
  font-family: 'Work Sans';
  src: url('/assets/work-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --checkout-blue: #144444;
  --checkout-blue-bright: #144444;
  --checkout-line: #d7e1db;
  --checkout-muted: #637272;
  --checkout-summary: #f3f6f4;
  --checkout-soft: #f1f4f2;
  --checkout-text: #144444;
  --brand-deep: #0a2a2a;
  --brand-lime: #a4cd3a;
  --brand-lime-hover: #b8db55;
  --brand-leaf: #547322;
  --brand-promise-bg: #f4f8e8;
  --brand-promise-line: #cfe0a8;
}
body { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.checkout-field input, .checkout-field select, .checkout-field textarea, .discount-field input { color: var(--checkout-text); }
.checkout-section h2 { font-weight: 500; letter-spacing: -0.02em; }
.shipping-method h3, .billing-fields h3 { font-weight: 600; }
.brand-logo-svg {
  display: block;
  width: 140px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(20%) sepia(22%) saturate(1000%) hue-rotate(132deg) brightness(90%) contrast(95%);
}
.checkout-header { height: 84px; }
.checkout-field:focus-within { border-color: var(--checkout-text); box-shadow: 0 0 0 3px rgb(20 68 68 / 14%); }
.checkbox-row input:checked { border-color: var(--checkout-text); background: var(--checkout-text); }
.payment-panel { border-color: var(--checkout-text); }
.payment-panel-header { border-bottom-color: var(--checkout-text); background: var(--checkout-soft); }
.ship-option { border-color: var(--checkout-text); background: var(--brand-promise-bg); }
.ship-option .radio { border-color: var(--checkout-text); }
.ship-option b { color: var(--brand-leaf); }
.quantity-badge { background: var(--checkout-text); }
.product-name strong, .product-line-price, .cost-summary strong, .total-cost span strong { color: var(--checkout-text); }
.discount-row > button:not(:disabled) { background: var(--checkout-text); border-color: var(--checkout-text); }
.pay-now-button {
  min-height: 56px;
  border-radius: 100px;
  background: var(--brand-lime);
  color: var(--brand-deep);
  font-size: 16px;
  transition: background 0.2s, transform 0.2s;
}
.pay-now-button:hover { background: var(--brand-lime-hover); transform: translateY(-1px); }
.pay-now-button:disabled { background: var(--brand-lime); color: var(--brand-deep); opacity: 0.75; }
.pay-now-button:focus-visible { outline: 2px solid var(--checkout-text); outline-offset: 3px; }
.renewal-legal a, .policy-footer a, .thanks-box a, .thanks-foot a, .restart-test button { color: var(--checkout-text); }
.thanks-head .checkout-icon { color: var(--brand-leaf); }
.mobile-order-toggle summary { color: var(--checkout-text); }
.summary-chevron { color: var(--checkout-text); }

/* Express checkout: Apple Pay / Google Pay, shown only on devices that have one. */
.express-checkout { margin-bottom: 4px; }
.express-checkout h2 { margin: 0 0 12px; color: var(--checkout-muted); font-size: 14px; font-weight: 400; text-align: center; }
#express-element { min-height: 48px; }

/* Trust row and promise in the order summary, after Olipop's badges. */
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.trust-row div { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: #fff; color: var(--checkout-text); font-size: 12px; line-height: 1.3; text-align: center; }
.trust-row svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-leaf); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.summary-promise { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--brand-promise-line); border-radius: 12px; background: var(--brand-promise-bg); color: var(--checkout-text); font-size: 13px; line-height: 1.45; }
.summary-promise svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--brand-leaf); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.summary-promise b { display: block; font-weight: 600; }
.summary-quote { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--checkout-line); color: var(--checkout-text); font-size: 13px; line-height: 1.45; }
.summary-quote .stars { display: flex; gap: 2px; margin-bottom: 6px; color: var(--brand-leaf); }
.summary-quote .stars svg { width: 13px; height: 13px; fill: currentColor; }
.summary-quote figcaption { margin-top: 4px; color: var(--checkout-muted); }
.summary-quote blockquote { margin: 0; }

/* ===================== Polish pass (2026-10-03) ===================== */
.checkout-field--fixed { background: #fff; }
.checkout-field--fixed select:disabled { color: var(--checkout-text); opacity: 1; cursor: default; -webkit-text-fill-color: var(--checkout-text); }
.checkout-field--fixed .select-chevron { color: #9aa8a8; }
.product-thumb img { object-fit: contain; background: #fff; padding: 3px; }

/* Lighter trust row: icons and words, no card boxes. */
.trust-row { gap: 0; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--checkout-line); border-bottom: 1px solid var(--checkout-line); }
.trust-row div { padding: 0 6px; background: none; border-radius: 0; font-weight: 500; }
.trust-row div + div { border-left: 1px solid var(--checkout-line); }
.summary-promise { margin-top: 14px; }

/* Phones: Shopify keeps names and City/State/ZIP side by side, so the form is shorter. */
@media (max-width: 749px) {
  .delivery-section .two-column-fields { grid-template-columns: 1fr 1fr; }
  .delivery-section .three-column-fields, .billing-fields .three-column-fields { grid-template-columns: 1.2fr 1fr 1fr; }
}
.mobile-trust { margin-top: 24px; }
.mobile-trust .trust-row { margin-top: 0; }
.mobile-trust .summary-quote { padding-top: 14px; }
@media (min-width: 1000px) { .mobile-trust { display: none; } }
@media (max-width: 749px) {
  .delivery-section .three-column-fields, .billing-fields .three-column-fields { grid-template-columns: 1fr 1fr 1fr; }
  .three-column-fields .checkout-field select { padding-right: 26px; }
  .three-column-fields .select-chevron { right: 9px; }
}
.summary-promise p { margin: 0; }
.address-element { min-height: 280px; }
.field-hint { margin: -2px 0 0; color: var(--checkout-muted); font-size: 12px; }
/* Thank-you: the member setup is the next step (setup.html). */
.setup-next { border-color: var(--brand-lime); box-shadow: inset 0 0 0 1px var(--brand-lime); }
.setup-next .setup-button { margin-top: 14px; text-decoration: none; color: var(--brand-deep) !important; }

/* ===================== Device QA fixes (2026-10-04) ===================== */
/* Express row placeholder while Stripe loads (prevents the page jumping). */
#express[data-state="loading"] #express-element { min-height: 48px; border-radius: 12px; background: linear-gradient(90deg, #f1f4f2 0%, #f8faf9 50%, #f1f4f2 100%); background-size: 200% 100%; animation: express-wait 1.2s ease-in-out infinite; }
@keyframes express-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #express[data-state="loading"] #express-element { animation: none; } }
/* Bag icon: 44px tap area, same look. */
#back-to-plan { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -10px; }
/* Floating labels never wrap inside a field. */
.field-label { right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Recurring line stays tidy on the narrowest phones. */
.cost-summary .recurring-cost strong:last-child { white-space: nowrap; }
@media (max-width: 379px) { .cost-summary .recurring-cost strong { font-size: 13px; } }
/* Reserve the final height of Stripe's boxes so nothing jumps while they load (measured 2026-10-04:
   address 606px when its box is under ~490px wide, else 453px; card 148-150px; express row 56px). */
#address-element { min-height: 453px; }
@media (max-width: 539px) { #address-element { min-height: 606px; } }
#payment-element { min-height: 150px; }
#express[data-state="loading"] #express-element { min-height: 56px; }
/* Quiet placeholder in the reserved space until each Stripe box is ready. */
#address-element:not(.is-ready), #payment-element:not(.is-ready) { border-radius: 12px; background: linear-gradient(90deg, #f1f4f2 0%, #f8faf9 50%, #f1f4f2 100%); background-size: 200% 100%; animation: express-wait 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #address-element:not(.is-ready), #payment-element:not(.is-ready) { animation: none; } }
/* Exact reserved heights including padding (card box 168-170px, express row 52px). */
#payment-element { min-height: 170px; }
#express[data-state="loading"] #express-element { min-height: 52px; }
.thanks-foot a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.add-discount-button { min-height: 44px; padding-inline: 12px; }

/* ===================== iPhone pass (2026-10-04) ===================== */
/* Stripe's email field (Link): reserved height and quiet placeholder like the other Stripe boxes. */
#contact-element { min-height: 48px; }
#contact-element:not(.is-ready) { border-radius: 12px; background: linear-gradient(90deg, #f1f4f2 0%, #f8faf9 50%, #f1f4f2 100%); background-size: 200% 100%; animation: express-wait 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #contact-element:not(.is-ready) { animation: none; } }
/* Renewal terms under the wallet buttons, where Shopify puts them. */
.express-legal { margin: 12px 0 0; color: var(--checkout-muted); font-size: 13px; line-height: 1.5; text-align: center; }
.express-legal a { color: inherit; text-decoration: underline; }
/* Stripe lays its boxes out only once they are on screen (measured 2026-10-04): the address box
   waits at 179px below the fold and grows to full height when scrolled to, which shoved the page
   down in front of the person. So its full height stays reserved: 478px on phones, 357px wider.
   The card box changes height with Link's choices (unticking "Save my information" removes a
   phone field), so it is reserved only while loading. */
#contact-element { min-height: 56px; }
#address-element { min-height: 357px; }
@media (max-width: 479px) { #address-element { min-height: 478px; } }
#payment-element { min-height: 0; }
#payment-element:not(.is-ready) { min-height: 291px; }

/* ===================== Branded promise (2026-10-04) ===================== */
/* His pick, design 2 with just the tree: the logo's tree centred above the title (set like the
   wordmark, between hairlines), then two short lines. "Freshness guaranteed" links to the cooler
   guide, which holds the guarantee's conditions. */
.summary-promise { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 18px 18px; text-align: center; }
.promise-mark { display: block; width: 56px; height: 47px; background: var(--checkout-text); -webkit-mask: url(/assets/tree.svg) center / contain no-repeat; mask: url(/assets/tree.svg) center / contain no-repeat; }
.summary-promise b { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.summary-promise b::before, .summary-promise b::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.35; }
.summary-promise p { font-size: 14px; line-height: 1.45; }
.summary-promise .line { display: block; }
.summary-promise a.line { display: inline-block; padding: 12px 4px; margin: -12px 0; color: inherit; text-decoration: underline; text-decoration-color: rgba(20, 68, 68, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* The title stays on one line on the smallest phones (320px wrapped it under the hairlines). */
.summary-promise b { white-space: nowrap; }
@media (max-width: 379px) { .summary-promise b { gap: 8px; letter-spacing: 0.12em; } .summary-promise b::before, .summary-promise b::after { width: 14px; } }

/* ===================== Reviews with faces + summary spacing (2026-10-04) ===================== */
/* The members' faces in front of the stars, as on the plan page (he liked them). */
.quote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; color: var(--checkout-muted); font-size: 12px; }
.quote-head .faces { display: inline-flex; }
.quote-head .faces img { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.quote-head .faces img + img { margin-left: -8px; }
.summary-quote .quote-head .stars { margin-bottom: 0; }
/* Summary rhythm (8px scale): trust row, 16px, Promise, 24px, review. No rule line above the review:
   the Promise box already separates them. */
.summary-promise { margin-top: 16px; }
.summary-promise + .summary-quote, .mobile-trust .summary-promise + .summary-quote { margin-top: 24px; padding-top: 0; border-top: 0; }

/* ===================== Payment box alignment (2026-10-04) ===================== */
/* His note: "this isnt aligned". Stripe's tabs already frame each payment choice, so the outer box
   (and its inset) went: the card fields now line up with the address fields and Pay now, and the
   billing checkbox sits under them on the same edge, the same size as Link's checkbox above it. */
.payment-panel { overflow: visible; border: 0; border-radius: 0; background: none; }
.stripe-payment-element { padding: 0; background: none; }
.payment-panel > .checkbox-row { margin: 16px 0 0; padding: 0; }
.billing-fields { padding: 16px 0 0; }
/* Shopify's 54px gap sat under its "Remember me" box; ours goes straight from the card box. */
.renewal-legal { margin-top: 28px; }

/* Shown under Pay now if payment takes more than a few seconds (2026-10-04). */
.pay-wait { margin: 10px 0 0; color: var(--checkout-muted); font-size: 14px; text-align: center; }

/* "Start a new order" on the thank-you page: a quiet text button, 44px tall to tap. */
.thanks-foot .new-order { padding: 12px 2px; margin: -12px 0; border: 0; background: none; color: var(--checkout-text); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* "You ordered this plan today" above Pay now: informs, never blocks a second order. */
.repeat-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--brand-promise-bg); color: var(--checkout-text); font-size: 13px; line-height: 1.45; }

/* Summary spacing (his note, 2026-10-04): the recurring line sat 11px under Total but 22px above the
   trust row. Now 10px of air under its divider, and 16px down to the trust row, the same as the trust row to the Promise. */
.cost-summary .recurring-cost { padding-top: 10px; }
[data-summary-slot] .trust-row { margin-top: 16px; }

/* ===================== Offer links + text consent (2026-10-05) ===================== */
/* Offer bar: what the code does and a real countdown to its end date (never a fake timer). */
.offer-bar { position: relative; z-index: 2; padding: 10px 16px; background: var(--checkout-text); color: #ffffff; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.offer-bar[data-state="ended"] { background: var(--checkout-summary); color: var(--checkout-muted); font-weight: 400; }
/* "Text me news and offers": its own yes for marketing texts, with the small print always visible. */
.text-consent .checkbox-row { margin-top: 0; }
.consent-fine { margin: 6px 0 0 26px; color: var(--checkout-muted); font-size: 11.5px; line-height: 1.45; }


/* ---------- Greens (2026-10-10): the row above the wallets, the thank-you list and the change sheet ---------- */
.greens-section { margin: 0 0 28px; }
.greens-section h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 24px; color: var(--checkout-text); }
.greens-section h2:focus { outline: none; }
.greens-card { overflow: hidden; border: 1px solid var(--checkout-line); border-radius: 12px; background: #ffffff; }
.greens-lines { margin: 0; padding: 0; list-style: none; }
.greens-lines li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #ececec; }
.greens-lines li:last-child { border-bottom: 0; }
.greens-thumb { position: relative; flex: none; width: 52px; height: 52px; border: 1px solid #d7d7d7; border-radius: 10px; background: #ffffff; }
.greens-thumb img { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.greens-qty { position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--checkout-text); color: #ffffff; font-size: 12px; font-weight: 600; }
.greens-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.greens-name strong { font-size: 15px; font-weight: 600; color: var(--checkout-text); }
.greens-name span { font-size: 13px; color: var(--checkout-muted); }
.greens-foot { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px 0 14px; border-top: 1px solid #ececec; background: #fafafa; }
.greens-foot > span { font-size: 14px; color: var(--checkout-muted); }
.greens-change { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--checkout-text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.greens-change:disabled { color: var(--checkout-muted); text-decoration: none; cursor: default; }
.greens-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--checkout-muted); }

.thanks-greens .greens-lines li { padding: 8px 0; border-bottom: 0; }
.thanks-greens .greens-note { margin-top: 4px; }
.text-us-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 12px; padding: 0 22px; box-sizing: border-box; border: 1.5px solid var(--checkout-text); border-radius: 100px; color: var(--checkout-text); font-size: 15px; font-weight: 600; text-decoration: none; }

html.greens-sheet-open { overflow: hidden; }
.greens-sheet { position: fixed; inset: 0; z-index: 1000; }
.greens-sheet[hidden] { display: none; }
.greens-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 0.2s ease; }
.greens-sheet.is-open .greens-sheet-scrim { opacity: 1; }
.greens-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; border-radius: 20px 20px 0 0; background: #ffffff; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); color: var(--checkout-text); transform: translateY(100%); transition: transform 0.22s ease; outline: none; }
.greens-sheet.is-open .greens-sheet-panel { transform: none; }
.greens-sheet-grab { align-self: center; flex: none; width: 36px; height: 5px; border-radius: 3px; background: #d9d9d9; }
.greens-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.greens-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.greens-sheet-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--checkout-text); cursor: pointer; }
.greens-sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.greens-sheet-sub { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--checkout-muted); }
.greens-meter { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #f6f6f6; }
.greens-meter > span { font-size: 12px; font-weight: 600; color: var(--checkout-muted); }
.greens-meter-boxes { display: flex; gap: 8px; }
.greens-meter-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--checkout-line); border-radius: 10px; background: #ffffff; }
.greens-meter-box img { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.greens-meter-box span { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; }
.greens-options { margin: 0; padding: 0; list-style: none; }
.greens-options li { display: flex; align-items: center; gap: 12px; min-height: 60px; border-bottom: 1px solid #efefef; }
.greens-options li:last-child { border-bottom: 0; }
.greens-options img { flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.greens-option-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.greens-option-name strong { font-size: 15px; font-weight: 600; }
.greens-option-name span { font-size: 13px; line-height: 1.3; color: var(--checkout-muted); }
.greens-stepper { display: flex; align-items: center; gap: 2px; }
.greens-stepper button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #cfcfcf; border-radius: 18px; background: #ffffff; color: var(--checkout-text); cursor: pointer; }
.greens-stepper button[data-step="1"] { border-color: var(--checkout-text); }
.greens-stepper button:disabled { opacity: 0.3; cursor: default; }
.greens-stepper svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.greens-step-count { width: 24px; text-align: center; font-size: 15px; font-weight: 600; }
.greens-mix-count { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--brand-promise-line); border-radius: 16px; background: var(--brand-promise-bg); font-size: 15px; font-weight: 600; }
.greens-full { margin: -4px 0 0; font-size: 13px; color: var(--checkout-muted); }
/* Adding a box (2026-10-16): Nutrition Mix's row has + only, so a spacer keeps the counts lined up. */
.greens-step-spacer { flex: none; width: 36px; height: 36px; }
.greens-sheet-sub strong { color: var(--checkout-text); font-weight: 600; }
.greens-change-plan { color: var(--checkout-text); font-weight: 600; white-space: nowrap; }
.greens-show-more { align-self: stretch; min-height: 44px; margin-top: -4px; border: 1px solid #cfcfcf; border-radius: 22px; background: #ffffff; color: var(--checkout-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.greens-added { margin: -4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-promise-bg); font-size: 13px; line-height: 1.4; color: var(--checkout-text); }
.greens-more { margin: 0; font-size: 13px; color: var(--checkout-muted); }
.greens-more a { color: var(--checkout-text); font-weight: 600; }
.greens-done { flex: none; margin-top: 4px; }

/* Desktop: the same panel slides in from the right instead of up from the bottom. */
@media (min-width: 750px) {
  .greens-sheet-panel { top: 0; left: auto; width: 420px; max-height: none; height: 100%; padding: 24px; border-radius: 20px 0 0 20px; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.16); transform: translateX(100%); }
  .greens-sheet-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .greens-sheet-scrim, .greens-sheet-panel { transition: none; }
}

/* One price line under the greens (2026-10-17): today's charge and every renewal, delivery included. */
.greens-price { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--checkout-text); }
.greens-price strong { font-weight: 600; }
/* ---------- Your order (2026-10-17): the editor behind "Change", the simple version ----------
   Product mode on the brand system (Obsidian 702Greens/Landing Page/Design System.md v4): Work Sans,
   Brand Dark #144444 for text, − / + and Most popular, the accent #A4CD3A only on Update and the title's Dot,
   neutrals #F5F5F7 / #E8E8E8, 11px tracked labels, pill buttons, Lucide 1.5px line icons. Two things:
   the boxes (− and + around the count, one line that resells) and the greens (shown straight away). Then
   the price and Update. Spacing is tight enough that the Mix and Broccoli rows clear the footer on an iPhone
   in Safari (about 664pt visible). Grey text is #6E6E73 (5.07:1 on white; #86868B failed WCAG AA). */
.order-sheet {
  --os-ink: #144444; --os-text: #1D1D1F; --os-muted: #6E6E73; --os-faint: #6E6E73;
  --os-line: #E8E8E8; --os-alt: #F5F5F7; --os-accent: #A4CD3A; --os-accent-hover: #B8DB55;
  gap: 0; padding: 8px 0 0; overscroll-behavior: contain; color: var(--os-text);
  /* Keeps a focused or scrolled-to control clear of the pinned header and footer. */
  scroll-padding: 64px 0 156px;
}
@media (min-width: 750px) { .order-sheet { width: 440px; padding: 0; } }
.order-sheet .greens-sheet-grab { margin: 0 auto 4px; }
/* The close button stays in view while the sheet scrolls: with Cancel gone, it's the way out without saving. */
/* top: -8px covers the panel's 8px top padding, so nothing shows above it while the list scrolls under. */
.sheet-head { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 24px 4px; background: #ffffff; }
@media (min-width: 750px) { .sheet-head { top: 0; padding-top: 24px; } }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--os-ink); }
.sheet-dot { color: var(--os-accent); }
.order-sheet .greens-sheet-close { margin: 0 -12px 0 0; }
.sheet-section { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 0; }
.sheet-greens { padding-top: 16px; }
.sheet-label { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--os-muted); }
.sheet-caption { margin: 0; font-size: 14px; line-height: 1.45; color: var(--os-faint); text-wrap: pretty; }
/* Every box picked: the line says + now adds a box, and what it costs. */
.sheet-caption.is-full { color: var(--os-ink); font-weight: 600; }

/* The boxes: − and + around the count (Shaan, Oct 17: "as they add boxes change the message"). Most popular
   sits on the card's top edge at 2, out of the flow, so − and + never move under a thumb. */
.box-stepper { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 76px; margin-top: 6px; padding: 12px 12px 20px; border-radius: 16px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--os-line); }
.box-stepper.is-fixed .box-step, .box-stepper.is-fixed .box-step-note { visibility: hidden; }
/* The most popular count (2, weekly): the card is outlined in Brand Dark under its badge, like a highlighted plan. */
.box-stepper.is-popular { box-shadow: inset 0 0 0 1.5px var(--os-ink); }
.box-step-wrap { position: relative; display: grid; }
.box-step-note { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; color: var(--os-ink); font-variant-numeric: tabular-nums; }
.box-stepper-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 5px 11px; border-radius: 100px; background: var(--os-ink); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.box-stepper-tag[hidden] { display: none; }
.box-step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--os-ink); color: var(--os-ink); cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }
.box-step:hover:not(:disabled) { background: var(--os-alt); }
.box-step:disabled { box-shadow: inset 0 0 0 1px var(--os-line); color: #C7C7CC; cursor: default; }
.box-step:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; }
.box-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.box-count { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; text-align: center; }
.box-count-n { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--os-ink); font-variant-numeric: tabular-nums; }
.box-count-use { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--os-ink); }
/* Room for "48–60 handfuls · $185 a week" on one line at 375, so the card never grows under a thumb. */
.box-count-price { font-size: 12.5px; color: var(--os-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.box-line { margin: 0; }
.box-line > span { font-size: 14px; line-height: 1.5; color: var(--os-muted); text-wrap: pretty; }
.box-line-add { padding: 0; border: 0; background: none; color: var(--os-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The greens: Nutrition Mix and the three most popular, shown straight away; the rest one tap away. */
.order-sheet .greens-options li { min-height: 60px; gap: 14px; border-bottom-color: #F0F0F0; }
.order-sheet .greens-options img { width: 44px; height: 44px; border-radius: 12px; }
.order-sheet .greens-option-name { gap: 3px; }
.order-sheet .greens-option-name strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--os-text); }
.order-sheet .greens-option-name > span { font-size: 13px; line-height: 1.35; color: var(--os-faint); }
.order-sheet .greens-options li.is-picked .greens-option-name strong { font-weight: 600; color: var(--os-ink); }
.premium-tag { padding: 2px 7px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--os-ink); color: var(--os-ink); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; }
/* "Most popular" on the Nutrition Mix row: the same Brand Dark pill as the box badge, smaller. Both row tags
   are scoped under .greens-option-name so the row's own span rule (13px, grey) doesn't override them. */
.popular-tag { padding: 3px 8px; border-radius: 100px; background: var(--os-ink); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.order-sheet .greens-option-name .premium-tag { font-size: 10px; line-height: 1.3; color: var(--os-ink); }
.order-sheet .greens-option-name .popular-tag { font-size: 10px; line-height: 1.3; color: #ffffff; }
.order-sheet .greens-mix-count { min-width: 0; height: auto; padding: 0 4px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--os-ink); }
/* A green's − / +: a 44px tap area around a 36px ring. The ring is light (a free swap mustn't look like the
   box stepper's $15 +); the glyph stays Brand Dark so the control reads (WCAG 1.4.11). Once every box is
   picked, + adds a box, so its ring turns Brand Dark like the box +. At 0, − and the count keep their space
   but don't show, so the row never re-wraps under a thumb. */
.order-sheet .greens-stepper { gap: 0; }
.order-sheet .greens-stepper button { position: relative; width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: var(--os-ink); }
.order-sheet .greens-stepper button::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 1px var(--os-line); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.order-sheet .greens-stepper button svg { position: relative; width: 16px; height: 16px; stroke-width: 1.5; }
.order-sheet .greens-stepper button:hover:not(:disabled)::before { background: var(--os-alt); }
.order-sheet .greens-stepper button:focus-visible { outline: 2px solid var(--os-ink); outline-offset: -2px; }
.order-sheet .greens-stepper.adds-box button[data-step="1"]::before { box-shadow: inset 0 0 0 1px var(--os-ink); }
.order-sheet .greens-stepper.is-zero button[data-step="-1"], .order-sheet .greens-stepper.is-zero .greens-step-count { visibility: hidden; }
.order-sheet .greens-step-count { color: var(--os-ink); font-variant-numeric: tabular-nums; }
/* "See all 23 greens": a stack of small photos of the next greens, then the link, so the range shows without
   opening it. Same link style as "Add another for $15". */
.sheet-more { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--os-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.sheet-more[hidden] { display: none; }
.sheet-more svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sheet-more-faces { display: flex; flex: none; }
.sheet-more-faces img { width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; object-fit: cover; background: #ffffff; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--os-line); }
.sheet-more-faces img:first-child { margin-left: 0; }
.sheet-more-text { text-decoration: underline; text-underline-offset: 3px; }
.sheet-more:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; border-radius: 8px; }

/* The live price and Update, always in view at the bottom of the sheet: the checkout page's own price
   sentence, one line of delivery terms, and the button. */
.sheet-footer { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--os-line); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.sheet-total { margin: 0; font-size: 15px; line-height: 1.4; color: var(--os-text); font-variant-numeric: tabular-nums; }
.sheet-total strong { font-weight: 600; color: var(--os-ink); }
.sheet-fine { margin: 0; font-size: 12px; line-height: 1.4; color: var(--os-faint); }
.sheet-fine + .sheet-fine { margin-top: -6px; }
.sheet-apply { min-height: 52px; border: 0; border-radius: 100px; background: var(--os-accent); color: var(--os-ink); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease; }
.sheet-apply:hover { background: var(--os-accent-hover); }
.sheet-apply:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .box-step, .order-sheet .greens-stepper button::before, .sheet-apply { transition: none; } }

/* ---------- Shopify's wording and order block (2026-10-17, Shaan: "copy shopify here") ----------
   On a laptop the order shows once, on the right, as on Shopify: the summary column carries the greens lines,
   "2 boxes every week" and Change. On a phone the greens card stays at the top (there's no right column). */
/* The summary's greens, Shopify-small: no card, photo with its count, name, "2 boxes · Weekly", then Change. */
.summary-greens { overflow: visible; margin: 0 0 16px; border: 0; border-radius: 0; background: none; }
.summary-greens .greens-lines li { gap: 12px; padding: 0 0 12px; border: 0; }
.summary-greens .greens-name strong { font-size: 14px; font-weight: 500; }
.summary-greens .greens-name span { font-size: 12.5px; }
.summary-greens .greens-foot { justify-content: flex-start; min-height: 0; padding: 0; border: 0; background: none; }
.summary-greens .greens-change { min-height: 32px; padding: 0; font-size: 13px; font-weight: 500; }
/* The phone's Order summary drawer shows the order and the totals only, as on Shopify; the trust row and the
   Promise already sit under Pay now on a phone. */
.mobile-toggle-content .trust-row, .mobile-toggle-content .summary-promise, .mobile-toggle-content .summary-quote { display: none; }
/* Small legal text, as on Shopify. */
.renewal-legal { font-size: 13px; line-height: 1.45; }
/* "Email me with news and offers", under the email field, ticked to start, as on Shopify. */
.email-consent { margin-top: 12px; }
/* "Recurring subtotal" with a ? that says what's in it (ours includes delivery from the second charge). */
.recurring-label { display: inline-flex; align-items: center; gap: 4px; }
.recurring-help { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -8px -6px; padding: 0; border: 0; border-radius: 16px; background: none; color: var(--checkout-muted); cursor: pointer; }
.recurring-help svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recurring-help:focus-visible { outline: 2px solid var(--checkout-text); outline-offset: -4px; }
.recurring-tip { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--checkout-muted); }

/* ---------- The plans (2026-10-17): Light, Daily, Performance for one person; households behind a switch ----------
   Three tiles with Daily in the middle, pre-selected and Most popular. The chosen tile gets a Brand Dark ring on
   a faint tint. Under them: who it's for (bold), the handfuls, and "Cooking for two or more?" on the same row. */
.plan-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.plan-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px; border: 0; border-radius: 14px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--os-line); color: var(--os-ink); font: inherit; text-align: center; cursor: pointer; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.plan-tile strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.plan-tile-boxes { font-size: 12px; color: var(--os-muted); }
.plan-tile-price { margin-top: 2px; font-size: 13px; color: var(--os-text); font-variant-numeric: tabular-nums; }
.plan-tile:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px #C9D3D0; }
.plan-tile[aria-checked="true"] { background: #F3F7F7; box-shadow: inset 0 0 0 1.5px var(--os-ink); }
.plan-tile:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; }
.plan-tile:disabled { opacity: 0.4; cursor: default; }
.plan-tile-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 4px 9px; border-radius: 100px; background: var(--os-ink); color: #ffffff; font-size: 9.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.plan-detail { display: flex; flex-direction: column; gap: 2px; }
.plan-detail strong { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--os-ink); }
.plan-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-detail-row > span { font-size: 13px; color: var(--os-muted); font-variant-numeric: tabular-nums; }
.plan-switch { flex: none; min-height: 32px; padding: 0; border: 0; background: none; color: var(--os-ink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-switch:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .plan-tile { transition: none; } }

/* ---------- Classic and one-time links (Oct 24, Shaan): quiet, like the page's fine print ----------
   Under the order on a laptop and under Total on a phone. The phone's Order summary drawer leaves them out (they
   already sit under Total), and they go away once the order is paid. */
.switch-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 16px; font-size: 13px; line-height: 1.45; }
.switch-links[hidden], .switch-links a[hidden] { display: none; }
.switch-links a { color: var(--checkout-muted); text-decoration: underline; text-underline-offset: 3px; }
.switch-links a:hover { color: var(--checkout-text); }
.mobile-inline-summary .switch-links { margin: 12px 0 0; }
.mobile-toggle-content .switch-links, [data-view="thanks"] .switch-links { display: none; }