/* TOTM Subscription Management — modal styles. Hex values are deliberate (no CSS vars) to avoid dark-mode contrast issues. */

.totm-sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 31, 0.55);
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.totm-sm-overlay.is-open { display: flex; }

.totm-sm-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin: auto;
}

/* Theme has a kill-all rule on every <button> (specificity 0,18,3) that sets pink background,
   pill shape, padding, font-family, plus an ::after arrow via mask-image. We override with
   !important on the conflicting properties because we can't realistically beat that specificity. */
.totm-sm-overlay button,
.totm-sm-overlay a.totm-sm-link {
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  position: static;
  float: none !important;
  transition: none !important;
}
.totm-sm-overlay button::before,
.totm-sm-overlay button::after,
.totm-sm-overlay a.totm-sm-link::before,
.totm-sm-overlay a.totm-sm-link::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.totm-sm-overlay .totm-sm-modal__close {
  position: absolute !important;
  top: 12px;
  right: 12px;
  width: 32px !important;
  height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #04342C !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.totm-sm-overlay .totm-sm-modal__close:hover { background: rgba(0, 0, 0, 0.1) !important; }

.totm-sm-modal__body {
  padding: 28px 24px 24px;
  color: #1A1A1A;
  font-size: 14px;
  line-height: 1.5;
}

.totm-sm-modal__body h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 6px;
  color: #1A1A1A;
}
.totm-sm-modal__body h4 { font-size: 16px; font-weight: 500; margin: 0; }
.totm-sm-modal__body p { margin: 0 0 12px; color: #4A5660; }

.totm-sm-step {
  font-size: 12px;
  color: #6B7780;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.totm-sm-card {
  background: #E1F5EE;
  border: 1px solid #0F6E56;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  color: #04342C;
}
.totm-sm-card--recommended { border-width: 2px; padding: 18px; }
.totm-sm-card--plain {
  background: transparent;
  border: 1px solid #D8DDE2;
  color: inherit;
}
.totm-sm-card p { color: inherit; }
.totm-sm-card__label {
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.totm-sm-card--plain .totm-sm-card__label { color: #6B7780; }

.totm-sm-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}
.totm-sm-row--total {
  font-weight: 600;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #0F6E56;
}

.totm-sm-options {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.totm-sm-options--weeks { grid-template-columns: repeat(4, 1fr); }
.totm-sm-options--months-4 { grid-template-columns: repeat(4, 1fr); }

.totm-sm-overlay .totm-sm-pill {
  background: #FFFFFF !important;
  color: #04342C !important;
  border: 1px solid #0F6E56 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.totm-sm-overlay .totm-sm-pill:hover { background: #F0FAF6 !important; color: #04342C !important; }
.totm-sm-overlay .totm-sm-pill.is-selected,
.totm-sm-overlay .totm-sm-pill[aria-pressed="true"] {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
  border-color: #0F6E56 !important;
}

.totm-sm-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.totm-sm-overlay .totm-sm-radio-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0;
  border: 1px solid #D8DDE2;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  background: #FFFFFF;
  color: #1A1A1A;
  text-transform: none;
  letter-spacing: normal;
}
.totm-sm-overlay .totm-sm-radio-list label.is-selected {
  border-color: #0F6E56;
  background: #E1F5EE;
  color: #04342C;
}
.totm-sm-overlay .totm-sm-radio-list input[type="radio"] {
  margin: 0;
  width: auto;
  vertical-align: baseline;
  flex-shrink: 0;
}

.totm-sm-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #D8DDE2;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: #FFFFFF;
  color: #1A1A1A;
}

.totm-sm-info {
  background: #F4F6F7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #4A5660;
  line-height: 1.5;
}
.totm-sm-info strong { color: #1A1A1A; }

.totm-sm-meta-line { font-size: 13px; color: #04342C; margin: 12px 0 0; }
.totm-sm-meta-line--muted { color: #4A5660; }

.totm-sm-section {
  border: 1px solid #D8DDE2;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.totm-sm-section__label {
  font-size: 12px;
  color: #6B7780;
  font-weight: 500;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.totm-sm-impact {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid #D8DDE2;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.totm-sm-impact__icon { font-size: 28px; }

.totm-sm-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #D8DDE2;
}
.totm-sm-footer__spacer { flex: 1; }

.totm-sm-overlay .totm-sm-btn {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid #D8DDE2 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: inline-block !important;
}
.totm-sm-overlay .totm-sm-btn:hover { background: #F4F6F7 !important; color: #1A1A1A !important; }

.totm-sm-overlay .totm-sm-btn--primary {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
  border-color: #0F6E56 !important;
  padding: 9px 20px !important;
}
.totm-sm-overlay .totm-sm-btn--primary:hover { background: #0B5A47 !important; color: #FFFFFF !important; }
.totm-sm-overlay .totm-sm-btn--primary:disabled,
.totm-sm-overlay .totm-sm-btn:disabled {
  background: #F0F1F3 !important;
  color: #9AA3AB !important;
  border-color: #D8DDE2 !important;
  cursor: not-allowed !important;
}

.totm-sm-overlay .totm-sm-link {
  color: #4A5660 !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  display: inline !important;
}
.totm-sm-overlay .totm-sm-link:hover { color: #1A1A1A !important; background: none !important; }

.totm-sm-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.totm-sm-calendar__head {
  text-align: center;
  font-size: 11px;
  color: #6B7780;
  font-weight: 500;
  padding: 4px 0;
}
.totm-sm-overlay .totm-sm-calendar__cell {
  /* display:flex + width:100% so each cell fills its 1fr grid column — the
     theme's global button rule forces display:inline-block + margin:auto +
     huge padding (no !important, but high specificity), which shrank the cells
     to the digit's width and made the grid look cramped. We override display,
     width and margin here (the colour/padding overrides already win via
     !important) and centre the number inside the now-square cell. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  color: #9AA3AB !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: default !important;
  font-family: inherit !important;
}
.totm-sm-overlay .totm-sm-calendar__cell--available {
  background: #FFFFFF !important;
  color: #04342C !important;
  border-color: #0F6E56 !important;
  cursor: pointer !important;
}
.totm-sm-overlay .totm-sm-calendar__cell--current {
  background: #E1F5EE !important;
  border: 2px solid #0F6E56 !important;
}
.totm-sm-overlay .totm-sm-calendar__cell--selected {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
  border-color: #0F6E56 !important;
}
/* Padding cells for days that fall outside the headline month — kept so the
   grid stays rectangular but rendered invisible/non-interactive. */
.totm-sm-overlay .totm-sm-calendar__cell--blank {
  background: transparent !important;
  border-color: transparent !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Calendar month-nav row: prev arrow · month label · next arrow.
   Sits above the weekday/date grid, mirrors the macOS-style minimalist
   date-picker pattern. Disabled state when the user is at the earliest /
   latest available month so they can't navigate beyond the 8-week window. */
.totm-sm-calendar-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 12px !important;
  gap: 12px;
}
.totm-sm-overlay .totm-sm-calendar-nav__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid #D8DDE2 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  flex: 0 0 auto !important;
}
.totm-sm-overlay .totm-sm-calendar-nav__btn:hover {
  background: #F4F6F7 !important;
  border-color: #0F6E56 !important;
  color: #0F6E56 !important;
}
.totm-sm-overlay .totm-sm-calendar-nav__btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: #FFFFFF !important;
  border-color: #E8EAED !important;
  color: #9AA3AB !important;
}
.totm-sm-overlay .totm-sm-calendar-nav__btn svg {
  display: block;
}
.totm-sm-calendar-nav__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  text-align: center;
  flex: 1 1 auto;
}

.totm-sm-confirm {
  text-align: center;
  padding: 16px 8px 8px;
}
.totm-sm-confirm__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #0F6E56;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.totm-sm-confirm p { max-width: 420px; margin: 0 auto 18px; }

.totm-sm-alert {
  background: #FDECEC;
  border: 1px solid #C8302E;
  color: #7A1715;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.totm-sm-loading {
  text-align: center;
  padding: 40px 0;
  color: #6B7780;
  font-size: 14px;
}

@media (max-width: 480px) {
  .totm-sm-modal__body { padding: 24px 18px 18px; }
  .totm-sm-options--weeks,
  .totm-sm-options--months-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Action card rendered on the single subscription page. */
.totm-sm-actions {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #D8DDE2;
  border-radius: 12px;
  background: #FFFFFF;
}
.totm-sm-actions__title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 14px;
  color: #1A1A1A;
}
.totm-sm-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.totm-sm-actions__btn {
  background: #FFFFFF;
  color: #04342C;
  border: 1px solid #0F6E56;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.totm-sm-actions__btn:hover {
  background: #0F6E56;
  color: #FFFFFF;
}

/* "Manage subscription" dropdown rendered on /my-account/subscriptions/.
   The toggle is an <a class="add-addon"> so it inherits the theme's pill style.
   The menu items are <button>s and need the same !important resets we use in the
   modal because the theme has a kill-all-buttons rule with high specificity. */
.totm-sm-manage-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: top;
  /* Match .sub-controls-right a margins so the wrapper aligns with the Edit Products anchor next to it. */
  margin: 15px 0 0 15px;
}
.totm-sm-manage-wrapper .totm-sm-manage-toggle {
  /* Toggle's own margin lives on the wrapper now, otherwise it would stack on top. */
  margin: 0 !important;
}
.totm-sm-manage-chevron {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s;
}
.totm-sm-manage-toggle[aria-expanded="true"] .totm-sm-manage-chevron {
  transform: rotate(180deg);
}

.totm-sm-manage-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 5px;
  min-width: 220px;
  background: #FFFFFF;
  border: 1px solid #D8DDE2;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.totm-sm-manage-menu[hidden] { display: none; }

.totm-sm-manage-menu .totm-sm-manage-menu__item {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #1A1A1A !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  position: static !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  float: none !important;
}
.totm-sm-manage-menu .totm-sm-manage-menu__item:hover {
  background: #F4F6F7 !important;
  color: #1A1A1A !important;
}
.totm-sm-manage-menu .totm-sm-manage-menu__item::before,
.totm-sm-manage-menu .totm-sm-manage-menu__item::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ------------------------------------------------------------
   My Account → Subscriptions page modernisation.
   Restyling existing theme classes (active-sub-circle, edit-freq, etc.)
   plus a new class for the discount-code trigger.
   ------------------------------------------------------------ */

/* Anchor the status pill to the card. */
.sub-coming-next {
  position: relative;
}

/* Primary green CTA shared across the my-account UI — used for "Manage
   subscription", "Resume", "Pay" and the dashboard's "Edit subscription".
   Defined as a CSS class (rather than inline styles) so :hover can apply
   — inline !important would otherwise beat any stylesheet hover state. */
html body a.totm-sm-primary-btn,
html body a.add-addon.totm-sm-primary-btn,
html body a.totm-sm-manage-toggle,
html body a.add-addon.totm-sm-manage-toggle,
html body button.totm-sm-primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  background: #0F6E56 !important;
  background-image: none !important;
  background-color: #0F6E56 !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  float: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
/* Kill the theme's global button :after arrow so the primary-btn looks clean. */
html body button.totm-sm-primary-btn::after,
html body button.totm-sm-primary-btn::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body a.totm-sm-primary-btn:hover,
html body a.add-addon.totm-sm-primary-btn:hover,
html body a.totm-sm-manage-toggle:hover,
html body a.add-addon.totm-sm-manage-toggle:hover,
html body button.totm-sm-primary-btn:hover,
html body button.totm-sm-primary-btn:focus {
  background: #0B5A47 !important;
  background-color: #0B5A47 !important;
  border-color: #0B5A47 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none;
}
html body button.totm-sm-primary-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed;
}

/* Secondary white CTA — used for "Got a discount code?" and "Edit Products"
   on the my-subscriptions card. Same class-based pattern as the primary
   button so :hover can apply (would lose to inline !important otherwise). */
html body a.totm-sm-discount-trigger,
html body a.add-addon.edit-sub,
html body a.add-addon.totm-sm-secondary-btn,
html body a.totm-sm-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid #D8DDE2 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  float: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html body a.totm-sm-discount-trigger:hover,
html body a.add-addon.edit-sub:hover,
html body a.add-addon.totm-sm-secondary-btn:hover,
html body a.totm-sm-secondary-btn:hover {
  background: #F4F6F7 !important;
  background-color: #F4F6F7 !important;
  border-color: #0F6E56 !important;
  color: #0F6E56 !important;
  text-decoration: none !important;
}

/* Dashboard: explicitly constrain the next-delivery card and impact tiles
   to medium-8 width. The Foundation .medium-8 class is in the markup but
   isn't constraining the cell here — this enforces the 8/12 width on
   medium+ screens so the card sits narrower than the full-width loyalty
   box above while their LEFT edges still align (both are cells in the
   same .grid-x at the same horizontal start position). */
@media (min-width: 640px) {
  body.woocommerce-account:not(.woocommerce-subscriptions) .totm-block-account-page .grid-x > .sub-coming-next.medium-8,
  body.woocommerce-account:not(.woocommerce-subscriptions) .totm-block-account-page .grid-x > .totm-sm-impact-holder.medium-8 {
    flex: 0 0 66.6667% !important;
    max-width: 66.6667% !important;
    width: 66.6667% !important;
  }
}

/* Status pill replaces the giant green/orange circle. */
.active-sub-circle,
.paused-sub-circle {
  width: auto !important;
  height: auto !important;
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  padding: 6px 12px 6px 10px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.active-sub-circle {
  background-color: #E1F5EE !important;
  color: #04342C !important;
}
.paused-sub-circle {
  background-color: #FFE7D6 !important;
  color: #5C2C00 !important;
}
.active-sub-circle::before,
.paused-sub-circle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}
.active-sub-circle::before { background-color: #0F6E56; }
.paused-sub-circle::before { background-color: #C75A00; }

/* Cleaner discount-code trigger replacing the gradient pill.
   Sized to match the .add-addon action buttons (40px tall) so it baselines with them. */
a.totm-sm-discount-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  margin: 0;
  border: 1px solid #0F6E56;
  border-radius: 24px;
  background: #FFFFFF;
  color: #0F6E56;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}
a.totm-sm-discount-trigger:hover {
  background: #0F6E56;
  color: #FFFFFF;
  text-decoration: none;
}

/* Tighter spacing between schedule + delivery method blocks
   (replaces the <br /><br /> we removed from the template). */
.sub-coming-next .next-shipment {
  margin: 0 0 4px;
  line-height: 1.6;
}
/* Last next-shipment block (Delivery method) gets a touch more space below
   so it doesn't crowd the divider line beneath. */
.sub-coming-next .next-shipment.delivery-method {
  margin-bottom: 14px;
}

/* Modern Edit links with hover state, replacing the underlined purple text. */
a.edit-freq,
.sub-coming-next a.edit-freq {
  margin-left: 8px !important;
  padding: 2px 10px !important;
  background-color: #F4F6F7 !important;
  color: #0F6E56 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s !important;
  display: inline-block !important;
  vertical-align: baseline !important;
}
a.edit-freq:hover,
.sub-coming-next a.edit-freq:hover {
  background-color: #E1F5EE !important;
  color: #04342C !important;
  text-decoration: none !important;
}

/* Subtle 1px dividers replacing the heavy <hr> defaults inside the card. */
.sub-coming-next hr {
  border: 0 !important;
  border-top: 1px solid #E8EAED !important;
  margin: 18px 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Bottom row: discount code trigger + action buttons all on the same line,
   each 40px tall, centred vertically, with breathing room above. */
.sub-coming-next .totm-sm-bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
  margin: 64px 0 0 0 !important;
  padding: 8px 0 0 0 !important;
  clear: both !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}
/* The .sub-controls-right has float:right by default and the theme adds quirky
   gutters; pin its right edge to 0 inside the bottom row so it aligns flush
   with the totals stack above. */
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right > *:last-child {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.sub-coming-next .totm-sm-bottom-row > * {
  align-self: center !important;
}
.sub-coming-next .totm-sm-bottom-row > .totm-sm-discount-trigger {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right {
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 40px !important;
}
/* Pin every direct child of .sub-controls-right to 40px tall, zero margins,
   and AUTO width so they don't stretch.
   Theme has `.woocommerce-subscriptions .sub-controls-right a { width: 100% !important; margin: 0 !important }`
   which would otherwise make each button fill the available row. */
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right > a,
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right > .totm-sm-manage-wrapper {
  margin: 0 !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
}
.sub-coming-next .totm-sm-bottom-row > .sub-controls-right > .totm-sm-manage-wrapper > .totm-sm-manage-toggle {
  margin: 0 !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 640px) {
  .sub-coming-next .totm-sm-bottom-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .sub-coming-next .totm-sm-bottom-row > .totm-sm-discount-trigger {
    align-self: flex-start !important;
  }
  .sub-coming-next .totm-sm-bottom-row > .sub-controls-right {
    flex-wrap: wrap !important;
  }
}

/* Constrain single-subscription cards so they don't stretch full-width on
   wide screens. The .sub-holder grid already switches to medium-up-2 when
   there are 2+ subs (PHP adds the class), so we only constrain the single case. */
.sub-holder.small-up-1:not(.medium-up-2) {
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Softer card border + shadow for a more current look. */
.sub-coming-next {
  border: 1px solid #E8EAED !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
}

/* Restore the theme's display-serif typography on every account-page
   heading inside a .sub-coming-next card or in the page header bar. The
   :first-child variant catches both the my-subscriptions h3 ("Your
   subscriptions") and the dashboard h3 ("Your next delivery"). */
body.woocommerce-account header h3,
body.woocommerce-account .totm-block-account-page > .grid-container > .grid-x > .cell.small-12 > h3:first-child,
body.woocommerce-account .sub-coming-next > h3:first-child,
body.woocommerce-account .sub-coming-next > h3.text-center {
  font-family: "ivypresto-display", "IvyPrestoDisplay", serif !important;
  font-size: 30px !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  color: #000000 !important;
}
/* Dashboard: left-align the "Your subscriptions" heading inside the card. */
body.woocommerce-account:not(.woocommerce-subscriptions) .sub-coming-next > h3:first-child {
  text-align: left !important;
}

/* Subscription product list — compact row layout (small inline thumbnail +
   title and price on one line). Applies to BOTH the dashboard subscription
   card AND the my-subscriptions page so the two cards match. Several theme
   rules fight this and need overriding:
     1. .totm-block-account-slider side padding.
     2. .sub-prod-img forced to display:block; margin:0 auto (carousel/centred).
     3. .my-sub-img height (70px dashboard default / 150px on the my-sub page).
   Scoped to .all-subs-prod-info so only subscription product rows are affected.
   (Previously this was dashboard-only via :not(.woocommerce-subscriptions);
   generalised so the my-subscriptions card uses the same compact layout.) */
body.woocommerce-account .sub-coming-next .totm-block-account-slider {
  padding: 0 !important;
  border-bottom: 0 !important;
}
body.woocommerce-account .sub-coming-next .all-subs-prod-info {
  display: block !important;
  margin: 0 0 18px !important;
  overflow: hidden;
}
body.woocommerce-account .sub-coming-next .all-subs-prod-info .sub-prod-img.my-sub-img {
  display: inline-block !important;
  float: left !important;
  margin: 0 24px 0 0 !important;
  height: 70px !important;
  width: 70px !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 8px !important;
}
body.woocommerce-account .sub-coming-next .all-subs-prod-info .prod-title {
  margin: 0 !important;
  padding-top: 22px !important;
  text-align: left !important;
}
/* Title + price share one line: title floats left (sized to its content,
   not the theme's 65% width), price floats right. Both sit at the same
   vertical position so the price is inline with the title rather than
   wrapping to a new line beneath it. */
body.woocommerce-account .sub-coming-next .all-subs-prod-info .prod-title-left {
  display: inline-block !important;
  float: left !important;
  width: auto !important;
  max-width: calc(100% - 100px) !important;
  text-align: left !important;
  padding-top: 0 !important;
  margin-top: 4px !important;
}
body.woocommerce-account .sub-coming-next .all-subs-prod-info .prod-title-right {
  display: inline-block !important;
  float: right !important;
  width: auto !important;
  text-align: right !important;
  padding-top: 0 !important;
  margin-top: 4px !important;
}

/* Friendly intro line below modal H3s — explains what the modal does in
   plain words. Sits inside .reveal modals (Foundation), not the new
   .totm-sm-overlay modals which have their own .totm-sm-modal__body p rule. */
.reveal .totm-sm-modal-intro {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #4A5660 !important;
  text-align: left !important;
}

/* Edit Products / Add Products modal — Remove link with bin icon, pinned to
   the right edge of each product row. Theme has existing rules on these
   classes (display:block; width:100%; float:right; text-transform via font),
   so we override layout to inline-flex + auto-width and use margin-left:auto
   so the link slots flush with the right edge no matter what the parent
   layout is doing. */
/* Remove link wrapper — placed by the grid rules in .reveal[id^="edit-modal"]
   block below. Just a passthrough container at this scope. */
html body .totm-sm-remove-row {
  text-align: right !important;
}
html body .totm-sm-remove-row .remove-current-group,
html body .totm-sm-remove-row .remove-prod-group,
html body .totm-sm-remove-row a.remove-current-group,
html body .totm-sm-remove-row a.remove-prod-group {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  /* margin-left: auto = canonical flex "push to the right edge" trick;
     also covers the case where some theme rule turns this link into a
     full-width block — auto margins still work in flex layout. */
  margin: 0 0 0 auto !important;
  padding: 4px 0 !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  color: #4A5660 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: color 0.15s !important;
}
html body .totm-sm-remove-row .remove-current-group:hover,
html body .totm-sm-remove-row .remove-prod-group:hover,
html body .totm-sm-remove-row a.remove-current-group:hover,
html body .totm-sm-remove-row a.remove-prod-group:hover {
  color: #B23A1F !important;
  background: transparent !important;
  text-decoration: none !important;
}
/* Label + icon as inline siblings within the link. Both vertical-align
   middle so they baseline on each other's centre. Icon gets a left margin
   for spacing and a 2px upward nudge — vertical-align:middle aligns to
   x-height, which is a couple of pixels below where the eye wants the icon
   to sit on cap-height text like "Remove". */
html body .totm-sm-remove-row .remove-current-group__label,
html body .totm-sm-remove-row .remove-prod-group__label {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
}
html body .totm-sm-remove-row .remove-current-group__icon,
html body .totm-sm-remove-row .remove-prod-group__icon {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 8px !important;
  position: relative !important;
  top: -5px !important;
  flex: none !important;
}

/* Impact tiles shown beneath the subscription card(s) — surfaces the
   customer's lifetime savings and total products donated to In Kind Direct.
   Compact, footer-style strip rather than headline cards.

   Wraps in Foundation .grid-x .grid-margin-x — same gutter the .sub-coming-next
   card uses — but without .grid-padding-x. The card has its border at the cell
   outer edge, so the strip's outer edge needs to sit at the same position
   (i.e. without internal cell padding pushing it inward). The --single
   modifier mirrors .sub-holder.small-up-1:not(.medium-up-2)'s 920px constraint. */
.totm-sm-impact-holder {
  margin-top: 18px !important;
}
.totm-sm-impact-holder--single {
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.totm-sm-impact-row {
  display: grid;
  grid-template-columns: 1fr;
  /* Icon protrudes 40px to the left of each tile; column-gap must clear that so the right-column tile's icon doesn't intrude on the left-column tile. */
  column-gap: 54px;
  row-gap: 20px;
  /* Inset the row so the leftmost tile's icon (40px overhang) stays inside the parent and aligns with the surrounding content. */
  padding-left: 44px;
}
/* Tablet+ : always lay out as a 2-column grid so up to four tiles read as a tidy 2x2. */
@media (min-width: 640px) {
  .totm-sm-impact-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Each tile is a two-column grid: large circular icon on the left, value + sub stacked on the right. Whole tile is tinted to match the icon palette so the section reads as four colour-coded swatches at a glance. */
/* Tile is a single-column flex container with the circular icon absolutely
   positioned on the left edge — half outside the card, half inside — to
   match the reference design. No tile border (the tint + circle is the
   accent), and overflow:visible so the icon isn't clipped at the card edge.
   Extra left padding leaves room for the visible right half of the icon. */
.totm-sm-impact-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 20px 18px 60px;
  min-height: 80px;
  border-radius: 14px;
  border: 1px solid #E8EAED;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow: visible;
}
/* Old left accent stripe — not needed now the whole tile is tinted. */
.totm-sm-impact-tile::before {
  content: none;
  display: none;
}

.totm-sm-impact-tile__icon {
  position: absolute;
  /* Pull the icon so its centre sits exactly on the tile's left edge — half the circle protrudes, half is inside. */
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #E8EAED;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.totm-sm-impact-tile__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.totm-sm-impact-tile__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.totm-sm-impact-tile__value {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.2;
}
.totm-sm-impact-tile__suffix {
  font-size: 13px;
  font-weight: 500;
  color: #4A5660;
  margin-left: 2px;
}
.totm-sm-impact-tile__sub {
  font-size: 12px;
  color: #6B7780;
  line-height: 1.35;
}

/* Per-tile colour palette — tile stays white, only the icon circle picks up the pastel colour. Value/suffix/sub text stays dark on the white tile background. */
.totm-sm-impact-tile--savings .totm-sm-impact-tile__icon { background: #F5E58A; }
.totm-sm-impact-tile--savings .totm-sm-impact-tile__value { color: #1A1A1A; }
.totm-sm-impact-tile--savings .totm-sm-impact-tile__suffix,
.totm-sm-impact-tile--savings .totm-sm-impact-tile__sub { color: #1A1A1A; }

.totm-sm-impact-tile--donations .totm-sm-impact-tile__icon { background: #F2A8C0; }
.totm-sm-impact-tile--donations .totm-sm-impact-tile__value { color: #1A1A1A; }
.totm-sm-impact-tile--donations .totm-sm-impact-tile__suffix,
.totm-sm-impact-tile--donations .totm-sm-impact-tile__sub { color: #1A1A1A; }

.totm-sm-impact-tile--eco .totm-sm-impact-tile__icon { background: #E8C4DC; }
.totm-sm-impact-tile--eco .totm-sm-impact-tile__value { color: #1A1A1A; }
.totm-sm-impact-tile--eco .totm-sm-impact-tile__suffix,
.totm-sm-impact-tile--eco .totm-sm-impact-tile__sub { color: #1A1A1A; }

.totm-sm-impact-tile--plastic .totm-sm-impact-tile__icon { background: #C7E1F2; }
.totm-sm-impact-tile--plastic .totm-sm-impact-tile__value { color: #1A1A1A; }
.totm-sm-impact-tile--plastic .totm-sm-impact-tile__suffix,
.totm-sm-impact-tile--plastic .totm-sm-impact-tile__sub { color: #1A1A1A; }
/* WC's wc_price() output wraps in spans — inherit the value sizing. */
.totm-sm-impact-tile__value .woocommerce-Price-amount,
.totm-sm-impact-tile__value bdi {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Confirmation flash banner shown at the top of the card after a modal action.
   Surfaced by JS reading sessionStorage on page load. */
.totm-sm-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #E1F5EE;
  border: 1px solid #0F6E56;
  color: #04342C;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.4;
}
.totm-sm-flash__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0F6E56;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.totm-sm-flash__body { flex: 1; }
.totm-sm-flash__body strong { display: block; font-weight: 600; margin-bottom: 2px; }
.totm-sm-flash__sub { display: block; font-size: 13px; color: #04342C; opacity: 0.85; }
/* Override the theme's global pink-with-arrow <button> styling, which would
   otherwise paint this dismiss button as a full chunky theme button. */
.totm-sm-flash__close,
html body button.totm-sm-flash__close {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #04342C !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 4px 8px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: opacity 0.15s ease !important;
}
.totm-sm-flash__close::before,
.totm-sm-flash__close::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-flash__close:hover {
  background: rgba(15, 110, 86, 0.1) !important;
  opacity: 1 !important;
}

/* While a flash banner or payment-issue banner is showing, hide the status
   pill in the same corner — the banner content is what matters in that
   moment, and the pill collides with its CTA. Pill returns when the banner
   is dismissed (flash) or the payment is fixed (payment banner). */
.sub-coming-next:has(.totm-sm-flash) .active-sub-circle,
.sub-coming-next:has(.totm-sm-flash) .paused-sub-circle,
.sub-coming-next:has(.totm-sm-payment-banner) .active-sub-circle,
.sub-coming-next:has(.totm-sm-payment-banner) .paused-sub-circle,
.sub-coming-next:has(.totm-sm-resume-banner) .active-sub-circle,
.sub-coming-next:has(.totm-sm-resume-banner) .paused-sub-circle {
  display: none !important;
}

/* Recent activity disclosure — sits as a quiet footer at the bottom of the
   card, after the action row. clear:both keeps it clear of the floated totals
   stack regardless of where the markup lands in the DOM. */
.totm-sm-activity {
  clear: both;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #E8EAED;
}
.totm-sm-activity__summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #4A5660;
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.totm-sm-activity__summary::-webkit-details-marker { display: none; }
.totm-sm-activity__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  color: #6B7780;
  transition: transform 0.15s;
}
.totm-sm-activity[open] .totm-sm-activity__summary::before {
  transform: rotate(90deg);
}
.totm-sm-activity__summary:hover { color: #1A1A1A; }
.totm-sm-activity__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.totm-sm-activity__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #F4F6F7;
  font-size: 13px;
}
.totm-sm-activity__item:last-child { border-bottom: 0; }
.totm-sm-activity__label { color: #1A1A1A; }
.totm-sm-activity__date { color: #6B7780; flex-shrink: 0; }

/* Payment-issue banner — prominent red strip at the top of the card when a
   renewal payment has failed. Direct CTA to the pay URL of the failed renewal. */
.totm-sm-payment-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FDECEC;
  border: 1px solid #C8302E;
  color: #7A1715;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.4;
}
.totm-sm-payment-banner__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #C8302E;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.totm-sm-payment-banner__body { flex: 1; }
.totm-sm-payment-banner__body strong { display: block; font-weight: 600; margin-bottom: 2px; color: #7A1715; }
.totm-sm-payment-banner__body span { display: block; font-size: 13px; opacity: 0.9; }
.totm-sm-payment-banner__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid #C8302E !important;
  border-radius: 8px !important;
  background: #C8302E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  width: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.totm-sm-payment-banner__cta:hover {
  background: #A82624 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.totm-sm-payment-banner__cta::before,
.totm-sm-payment-banner__cta::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
@media (max-width: 640px) {
  .totm-sm-payment-banner { flex-direction: column; align-items: stretch; }
  .totm-sm-payment-banner__cta { align-self: flex-start; }
}

/* Pre-resume reminder banner — paused subs resuming within 7 days. */
.totm-sm-resume-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF8EC;
  border: 1px solid #C58A1B;
  color: #5C3D00;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.4;
}
.totm-sm-resume-banner__icon { font-size: 18px; flex-shrink: 0; }
.totm-sm-resume-banner__body { flex: 1; }
.totm-sm-resume-banner__body strong { display: block; font-weight: 600; margin-bottom: 2px; color: #5C3D00; }
.totm-sm-resume-banner__body span { display: block; font-size: 13px; opacity: 0.9; }
.totm-sm-resume-banner__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid #C58A1B !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #5C3D00 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  width: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.totm-sm-resume-banner__cta:hover {
  background: #5C3D00 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.totm-sm-resume-banner__cta::before,
.totm-sm-resume-banner__cta::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
@media (max-width: 640px) {
  .totm-sm-resume-banner { flex-direction: column; align-items: stretch; }
  .totm-sm-resume-banner__cta { align-self: flex-start; }
}

/* Discount-code result notice — friendly success / error after applying a code. */
.totm-sm-discount-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 auto 18px;
  font-size: 14px;
  line-height: 1.4;
  max-width: 920px;
  border: 1px solid;
}
.totm-sm-discount-notice--success {
  background: #E1F5EE;
  border-color: #0F6E56;
  color: #04342C;
}
.totm-sm-discount-notice--error {
  background: #FDECEC;
  border-color: #C8302E;
  color: #7A1715;
}
.totm-sm-discount-notice__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.totm-sm-discount-notice--success .totm-sm-discount-notice__icon { background: #0F6E56; }
.totm-sm-discount-notice--error   .totm-sm-discount-notice__icon { background: #C8302E; }
.totm-sm-discount-notice__body { flex: 1; }
.totm-sm-discount-notice__body strong { display: block; font-weight: 600; margin-bottom: 2px; }
.totm-sm-discount-notice__body span { display: block; font-size: 13px; opacity: 0.9; }
.totm-sm-discount-notice__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid #C8302E !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #7A1715 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.totm-sm-discount-notice__cta:hover {
  background: #C8302E !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.totm-sm-discount-notice__cta::before,
.totm-sm-discount-notice__cta::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
@media (max-width: 640px) {
  .totm-sm-discount-notice { flex-direction: column; align-items: stretch; }
  .totm-sm-discount-notice__cta { align-self: flex-start; }
}

/* ------------------------------------------------------------
   Foundation Reveal modals — restyle to match the new TOTM modal
   aesthetic. CSS only; markup and behaviour are untouched.
   Covers four modals: add-discount, edit-products, change-frequency,
   change-shipping. Edit-products has extra layout for product rows.
   ------------------------------------------------------------ */

/* Container — shared across all four modals. */
.reveal#add-discount-modal,
.reveal[id^="edit-modal-"],
.reveal[id^="edit-freq-modal-"],
.reveal[id^="edit-ship-modal-"] {
  border-radius: 12px !important;
  border: 1px solid #E8EAED !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  padding: 28px 24px 24px !important;
  background: #FFFFFF !important;
  font-family: inherit !important;
  color: #1A1A1A !important;
  max-width: 560px !important;
}

/* Title */
.reveal#add-discount-modal h3,
.reveal[id^="edit-modal-"] h3,
.reveal[id^="edit-freq-modal-"] h3,
.reveal[id^="edit-ship-modal-"] h3 {
  font-size: 18px !important;
  font-weight: 500 !important;
  text-align: left !important;
  margin: 0 0 12px !important;
  font-family: inherit !important;
  color: #1A1A1A !important;
  padding-right: 40px !important;
}

/* Subtitle paragraph (e.g. discount modal's "Your discount will be applied…") */
.reveal#add-discount-modal > p:not(.callout) {
  text-align: left !important;
  font-size: 14px !important;
  color: #4A5660 !important;
  margin: 0 0 18px !important;
  line-height: 1.5 !important;
}

/* Top tip callout (success) */
.reveal#add-discount-modal .callout.success,
.reveal[id^="edit-modal-"] .callout.success,
.reveal[id^="edit-freq-modal-"] .callout.success,
.reveal[id^="edit-ship-modal-"] .callout.success {
  background: #E1F5EE !important;
  border: 1px solid #0F6E56 !important;
  color: #04342C !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 0 0 20px !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.reveal[id^="edit-modal-"] .callout.success strong,
.reveal[id^="edit-freq-modal-"] .callout.success strong {
  color: #04342C !important;
}

/* Alert callout */
.reveal#add-discount-modal .callout.alert,
.reveal[id^="edit-modal-"] .callout.alert,
.reveal[id^="edit-freq-modal-"] .callout.alert,
.reveal[id^="edit-ship-modal-"] .callout.alert {
  background: #FDECEC !important;
  border: 1px solid #C8302E !important;
  color: #7A1715 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  text-align: left !important;
}

/* Close button — small grey circle top-right with × glyph.
   Covers every Foundation Reveal modal in the my-account flow so all X's are
   identical (same circle size, same colour, same character). The original "X"
   letter in the markup is hidden via font-size:0 and replaced via ::before with
   the × multiplication sign — same character used by the new TOTM modal. */
.reveal#add-discount-modal a.close-button,
.reveal[id^="edit-modal-"] a.close-button,
.reveal[id^="edit-freq-modal-"] a.close-button,
.reveal[id^="edit-ship-modal-"] a.close-button,
.reveal[id^="resume-modal-"] a.close-button {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #04342C !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.reveal#add-discount-modal a.close-button::before,
.reveal[id^="edit-modal-"] a.close-button::before,
.reveal[id^="edit-freq-modal-"] a.close-button::before,
.reveal[id^="edit-ship-modal-"] a.close-button::before,
.reveal[id^="resume-modal-"] a.close-button::before {
  content: "×" !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #04342C !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.reveal#add-discount-modal a.close-button:hover,
.reveal[id^="edit-modal-"] a.close-button:hover,
.reveal[id^="edit-freq-modal-"] a.close-button:hover,
.reveal[id^="edit-ship-modal-"] a.close-button:hover,
.reveal[id^="resume-modal-"] a.close-button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #04342C !important;
}

/* Modern selects across all four modals — single SVG chevron pinned to the right edge. */
.reveal#add-discount-modal select,
.reveal[id^="edit-modal-"] select.convert-to-sub-select,
.reveal[id^="edit-freq-modal-"] select,
.reveal[id^="edit-ship-modal-"] select {
  border: 1px solid #D8DDE2 !important;
  border-radius: 8px !important;
  padding: 9px 36px 9px 12px !important;
  height: auto !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1A1A1A !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' width='14' height='10'%3E%3Cpath fill='%236B7780' d='M7 10 0 0h14z'/%3E%3C/svg%3E") !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
  background-origin: border-box !important;
  background-repeat: no-repeat !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  float: none !important;
}

/* Modern text inputs (discount modal voucher field) */
.reveal#add-discount-modal input[type="text"] {
  border: 1px solid #D8DDE2 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  height: auto !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1A1A1A !important;
  background-color: #FFFFFF !important;
  margin: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Form layout — stack form fields, right-align the submit button.
   The schedule modal has a hidden #new_period select positioned absolute;
   it's excluded from flex flow, so the layout stays clean. */
.reveal#add-discount-modal form,
.reveal[id^="edit-freq-modal-"] form,
.reveal[id^="edit-ship-modal-"] form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.reveal[id^="edit-freq-modal-"] .clearfix {
  display: contents;
}

/* Submit buttons (button[type=submit]) restyled as solid teal primary, right-aligned. */
.reveal#add-discount-modal button[type="submit"],
.reveal[id^="edit-freq-modal-"] button[type="submit"],
.reveal[id^="edit-ship-modal-"] button[type="submit"] {
  display: inline-block !important;
  background: #0F6E56 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-align: center !important;
  margin: 0 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  float: none !important;
  position: relative !important;
  align-self: flex-end !important;
}
.reveal#add-discount-modal button[type="submit"]:hover,
.reveal[id^="edit-freq-modal-"] button[type="submit"]:hover,
.reveal[id^="edit-ship-modal-"] button[type="submit"]:hover {
  background: #0B5A47 !important;
  color: #FFFFFF !important;
}
.reveal#add-discount-modal button[type="submit"]::before,
.reveal#add-discount-modal button[type="submit"]::after,
.reveal[id^="edit-freq-modal-"] button[type="submit"]::before,
.reveal[id^="edit-freq-modal-"] button[type="submit"]::after,
.reveal[id^="edit-ship-modal-"] button[type="submit"]::before,
.reveal[id^="edit-ship-modal-"] button[type="submit"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* The shipping modal wraps its submit button in .sub-action-container — let it flow naturally. */
.reveal[id^="edit-ship-modal-"] .sub-action-container {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Resume modal's Resume anchor uses theme `.button .totm-bg-purple-rosepink-lr`
   — restyle to match the "Ship now" primary button. */
.reveal[id^="resume-modal-"] .sub-action-container {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}
.reveal[id^="resume-modal-"] a.button {
  display: inline-block !important;
  background: #0F6E56 !important;
  background-image: none !important;
  background-color: #0F6E56 !important;
  color: #FFFFFF !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-align: center !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: relative !important;
  float: none !important;
  transition: background 0.15s !important;
}
.reveal[id^="resume-modal-"] a.button:hover {
  background: #0B5A47 !important;
  background-color: #0B5A47 !important;
  color: #FFFFFF !important;
}
.reveal[id^="resume-modal-"] a.button::before,
.reveal[id^="resume-modal-"] a.button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ============================================================
   Edit Products modal — additional layout & improvements
   (1 disabled selects, 2 bolder qty, 3 sentence-case Remove,
    4 ghost-button "+ Add another product", 5 right-align Update)
   ============================================================ */

/* Per-product editing row — clean bordered card. 4-column CSS Grid pairs each
   label with its select side-by-side (Product | Type), and lets the bottom row
   spread qty / remove / price across their own cells. */
.reveal[id^="edit-modal-"] .current-sub-items,
.reveal[id^="edit-modal-"] .group-add-prod {
  border: 1px solid #E8EAED !important;
  border-radius: 8px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  background: #FFFFFF !important;
  position: relative !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  align-items: center !important;
}
/* Use grid for layout. Tricky bit: the theme's JS hides .group-add-prod via
   $('.group-add-prod').hide() (inline display:none) on page load, then on the
   "Add another product" click jQuery's .show() removes that and sets inline
   display:block — which would clobber our grid. We split the rule:
     - .current-sub-items always grid (never hidden by JS)
     - .group-add-prod default grid (no !important so .hide() wins initially)
     - .group-add-prod with inline display:block (i.e. after .show()) gets grid !important
   That way the template row stays hidden, and shown clones render as grid. */
.reveal[id^="edit-modal-"] .current-sub-items {
  display: grid !important;
}
.reveal[id^="edit-modal-"] .group-add-prod {
  display: grid;
}
.reveal[id^="edit-modal-"] .group-add-prod[style*="display: block"],
.reveal[id^="edit-modal-"] .group-add-prod[style*="display:block"] {
  display: grid !important;
}
.reveal[id^="edit-modal-"] .group-add-prod.none {
  display: none;
}
.reveal[id^="edit-modal-"] .current-sub-items > .prod-title-select,
.reveal[id^="edit-modal-"] .current-sub-items > .prod-select,
.reveal[id^="edit-modal-"] .group-add-prod > .prod-title-select,
.reveal[id^="edit-modal-"] .group-add-prod > .prod-select {
  grid-column: 1 / 3 !important;
}
.reveal[id^="edit-modal-"] .current-sub-items > .var-title-select,
.reveal[id^="edit-modal-"] .current-sub-items > .var-select,
.reveal[id^="edit-modal-"] .group-add-prod > .var-title-select,
.reveal[id^="edit-modal-"] .group-add-prod > .var-select {
  grid-column: 3 / 5 !important;
}
.reveal[id^="edit-modal-"] .current-sub-items > .main-prod-only.prod-select,
.reveal[id^="edit-modal-"] .group-add-prod > .main-prod-only.prod-select {
  grid-column: 1 / -1 !important;
}
.reveal[id^="edit-modal-"] .current-sub-items > .quantity-counter,
.reveal[id^="edit-modal-"] .group-add-prod > .quantity-counter {
  grid-column: 1 / 3 !important;
  margin-top: 6px !important;
}
.reveal[id^="edit-modal-"] .current-sub-items > .product-line-output,
.reveal[id^="edit-modal-"] .group-add-prod > .product-line-output {
  grid-column: 4 !important;
  justify-self: end !important;
  margin: 6px 0 0 !important;
  float: none !important;
}
/* Remove link wrapper — placed on its own row spanning columns 3-4 with
   justify-self:end so its right edge lines up flush with the price above
   (which sits in column 4 right-aligned). */
.reveal[id^="edit-modal-"] .current-sub-items > .totm-sm-remove-row,
.reveal[id^="edit-modal-"] .group-add-prod > .totm-sm-remove-row {
  grid-column: 3 / 5 !important;
  justify-self: end !important;
  margin: 6px 0 0 !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  display: block !important;
  text-align: right !important;
}
.reveal[id^="edit-modal-"] .current-sub-items > .loyalty-free-badge {
  grid-column: 3 / 5 !important;
  justify-self: end !important;
  margin: 6px 0 0 !important;
  float: none !important;
}

/* Section labels above each select */
.reveal[id^="edit-modal-"] .prod-title-select,
.reveal[id^="edit-modal-"] .var-title-select {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #6B7780 !important;
  margin: 0 0 4px !important;
}

/* (1) Disabled selects — read-only, no chevron, softer background. */
.reveal[id^="edit-modal-"] select.convert-to-sub-select.select-disabled {
  background-image: none !important;
  background-color: #F4F6F7 !important;
  color: #4A5660 !important;
  cursor: not-allowed !important;
  padding-right: 12px !important;
}

/* Quantity counter container */
.reveal[id^="edit-modal-"] .quantity-counter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.reveal[id^="edit-modal-"] .quantity-counter .qc-label {
  font-size: 13px !important;
  color: #4A5660 !important;
  margin-right: 4px !important;
}
.reveal[id^="edit-modal-"] .quantity-counter .qc-less,
.reveal[id^="edit-modal-"] .quantity-counter .qc-more {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #0F6E56 !important;
  background: #FFFFFF !important;
  color: #04342C !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  user-select: none !important;
}
.reveal[id^="edit-modal-"] .quantity-counter .qc-less:hover,
.reveal[id^="edit-modal-"] .quantity-counter .qc-more:hover {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
}
.reveal[id^="edit-modal-"] .quantity-counter .qc-less.disable-quantities {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
/* (2) Qty count — bolder/larger so it reads as the value, not a label. */
.reveal[id^="edit-modal-"] .quantity-counter .qc-count {
  min-width: 28px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
}

/* Line total */
.reveal[id^="edit-modal-"] .product-line-output {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
}
.reveal[id^="edit-modal-"] .product-line-output::before {
  content: "£";
}

/* (3) REMOVE → "Remove" — sentence case, muted grey by default, red on hover.
   Hide the original CAPS text via font-size:0 and rebuild via ::before. */
.reveal[id^="edit-modal-"] a.remove-current-group,
.reveal[id^="edit-modal-"] a.remove-prod-group {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  margin: 6px 0 0 !important;
  display: inline-block !important;
}
.reveal[id^="edit-modal-"] a.remove-current-group::before,
.reveal[id^="edit-modal-"] a.remove-prod-group::before {
  content: "Remove" !important;
  display: inline !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6B7780 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  transition: color 0.15s !important;
}
.reveal[id^="edit-modal-"] a.remove-current-group:hover::before,
.reveal[id^="edit-modal-"] a.remove-prod-group:hover::before {
  color: #C8302E !important;
  text-decoration: underline !important;
}

/* (4) "Add products to your order" → ghost outline button "+ Add another product".
   Hide the original "+" character and the separate paragraph; rebuild with ::before. */
.reveal[id^="edit-modal-"] a.add-prod-group {
  font-size: 0 !important;
  display: block !important;
  width: fit-content !important;
  margin: 14px auto 4px !important;
  padding: 9px 18px !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  height: auto !important;
  text-align: center !important;
  transition: background 0.15s, color 0.15s !important;
}
.reveal[id^="edit-modal-"] a.add-prod-group::before {
  content: "+ Add another product" !important;
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0F6E56 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  transition: color 0.15s !important;
}
.reveal[id^="edit-modal-"] a.add-prod-group:hover {
  background: #0F6E56 !important;
}
.reveal[id^="edit-modal-"] a.add-prod-group:hover::before {
  color: #FFFFFF !important;
}
.reveal[id^="edit-modal-"] .add-edit-sub {
  display: none !important;
}

/* (5) Update button — solid teal primary, right-aligned at the bottom. */
.reveal[id^="edit-modal-"] a.form-submit {
  display: block !important;
  background: #0F6E56 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-align: center !important;
  margin: 18px 0 0 auto !important;
  width: fit-content !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
  float: none !important;
}
.reveal[id^="edit-modal-"] a.form-submit:hover {
  background: #0B5A47 !important;
  color: #FFFFFF !important;
}
.reveal[id^="edit-modal-"] a.form-submit::before,
.reveal[id^="edit-modal-"] a.form-submit::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Hide the visible-only id holder (used by the form's JS) */
.reveal[id^="edit-modal-"] .sub-id-holder {
  display: none !important;
}

/* FREE GIFT badge tweak inside the editor */
.reveal[id^="edit-modal-"] .loyalty-free-badge {
  background: #E1F5EE !important;
  color: #04342C !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  margin-top: 4px !important;
}

/* Donate-active banner — shown on the subscription card when the customer has scheduled their next order to be donated. Loud-on-purpose: the customer needs to notice this immediately and have a one-click path to cancel if they didn't mean it. */
.totm-sm-donate-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 16px 0 20px;
  background: #FFF1CD;
  border: 1px solid #D4A02A;
  border-left: 5px solid #C58A1B;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #5C3D00;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(92, 61, 0, 0.08);
}
.totm-sm-donate-banner__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  color: #C58A1B;
}
.totm-sm-donate-banner__body {
  flex: 1 1 240px;
  min-width: 0;
}
.totm-sm-donate-banner__title {
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
  color: #5C3D00;
}
.totm-sm-donate-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: #5C3D00 !important;
  border: 1px solid #5C3D00 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Kill the theme's global button :after arrow on this CTA when rendered as a button. */
.totm-sm-donate-banner__cta::after,
.totm-sm-donate-banner__cta::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-donate-banner__cta:hover,
.totm-sm-donate-banner__cta:focus {
  background: #3F2A00 !important;
  border-color: #3F2A00 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none;
}

/* "--top" modifier — when the banner sits as the FIRST element inside the
   subscription card. Spans edge-to-edge by countering the card's 25px padding
   with matching negative margins, so it reads as a structural header strip
   rather than another inline notice that could be missed. */
.totm-sm-donate-banner--top {
  margin: -25px -25px 24px -25px;
  border-radius: 9px 9px 0 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #D4A02A;
  border-top: 4px solid #C58A1B;
  padding: 18px 24px;
}

/* When the donate banner is at the top of the card, push the status pill down
   below the banner so it sits in the white content area (otherwise it
   overlaps the amber banner since it's positioned absolutely from the card's
   top). 140px is the desktop banner height (~100px) + its 24px margin-bottom
   + a small breathing room; on mobile the banner can wrap to a taller block
   in which case the pill still clears it comfortably. */
.totm-sm-donate-banner--top ~ .active-sub-circle,
.totm-sm-donate-banner--top ~ .paused-sub-circle {
  top: 140px !important;
}

/* My-subscriptions per-sub card (`.single-sub-container`) sits at 95% of its
   grid cell width with auto margins, so the standard -25px banner negative
   margins extend past the card's visible border. Pull the banner back to
   align with the card's edge here. The dashboard card has no such width
   constraint, so its banner keeps the full edge-to-edge treatment. */
.single-sub-container > .totm-sm-donate-banner--top {
  margin-left: -15px;
  margin-right: -15px;
}

/* ============================================================
   Mobile responsive pass — fixes specifically targeting the dashboard
   and my-subscriptions layouts I built recently. Theme breakpoint
   matches Foundation's mobile range (<= 639px).
   ============================================================ */
@media (max-width: 639px) {

  /* 1. Stack the subscription card + purple updates slider on the dashboard. They sit in a flex wrapper at `flex:1 1 0` and `flex:0 0 33%` respectively — fine at desktop, cramped on a phone. Force both to full-width here so they stack vertically. */
  .totm-sm-row {
    gap: 20px !important;
  }
  .totm-sm-col-main {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  .totm-sm-row > .subscriber-updates {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 2. Donate banner edge-to-edge. The mobile card switches to `padding: 15px` (theme rule in _my_account_responsive.scss), so the desktop -25px negative margins overshoot the card edge by 10px on each side. Tighten the margins to match the mobile padding. */
  .totm-sm-donate-banner--top,
  .single-sub-container > .totm-sm-donate-banner--top {
    margin-top: -15px !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: 16px !important;
    padding: 14px 16px;
  }

  /* 3. Donate banner CTA — full width below the body text on narrow screens (the banner already wraps via flex-wrap, this just makes the button feel deliberate rather than orphaned). */
  .totm-sm-donate-banner__cta {
    width: 100%;
    justify-content: center;
  }

  /* 4. Status pill — when the donate banner is also showing, the banner can wrap to 5+ lines on a phone, so the desktop "push pill down by 140px" rule no longer clears it. Hide the redundant Active pill in that case — the banner already implicitly conveys the subscription is active. The pill returns on desktop. */
  .totm-sm-donate-banner--top ~ .active-sub-circle,
  .totm-sm-donate-banner--top ~ .paused-sub-circle {
    display: none !important;
  }

  /* 5. My-subscriptions per-sub card bottom row — let the [discount link / Edit Products / Manage subscription] cluster wrap onto multiple lines on narrow widths so nothing overflows. */
  .totm-sm-bottom-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .totm-sm-bottom-row .sub-controls-right {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

}

/* Free-shipping nudge — shown under the totals when the order subtotal is
   below the £18 free-delivery threshold. Same pill shape as the discount-
   saved badge so the two read as a related pair, but in a neutral cream
   tone so they don't compete colour-wise (savings = green, nudge = warm). */
.totm-sm-free-ship-nudge {
  display: inline-block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 10px;
  background: #FFF4DC;
  color: #5C3D00;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  line-height: 1.4;
  box-sizing: border-box;
}
.totm-sm-free-ship-nudge strong {
  font-weight: 700;
}

/* ============================================================
   Pre-ship preview banner — surfaces in the final 7 days before
   a renewal so the customer can review/edit before billing.
   White card with a brand-green left accent — visually distinct
   from WC's mint-green success notice (e.g. "Ship date updated")
   that often appears on the same page, so the two don't blur
   into one indistinct green region.
   ============================================================ */
.totm-sm-preship-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 16px 0 20px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-left: 5px solid #0F6E56;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #1A1A1A;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.totm-sm-preship-banner__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  color: #0F6E56;
}
.totm-sm-preship-banner__body {
  flex: 1 1 240px;
  min-width: 0;
}
.totm-sm-preship-banner__title {
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
  color: #1A1A1A;
}
.totm-sm-preship-banner__products {
  display: block;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-preship-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: #0F6E56 !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Kill the theme's global button :after arrow when this CTA is rendered as button. */
.totm-sm-preship-banner__cta::after,
.totm-sm-preship-banner__cta::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-preship-banner__cta:hover,
.totm-sm-preship-banner__cta:focus {
  background: #0B5A47 !important;
  border-color: #0B5A47 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none;
}
/* --top modifier — edge-to-edge header strip variant, matches donate-banner pattern. Keeps the brand-green left accent so the banner type stays identifiable. */
.totm-sm-preship-banner--top {
  margin: -25px -25px 24px -25px;
  border-radius: 9px 9px 0 0;
  border-top: 4px solid #0F6E56;
  border-bottom: 1px solid #E8EAED;
  border-left: 0;
  border-right: 0;
  padding: 18px 24px;
}
/* My-subs per-sub card adjustment to match the donate-banner pattern. */
.single-sub-container > .totm-sm-preship-banner--top {
  margin-left: -15px;
  margin-right: -15px;
}

/* ============================================================
   Recent orders mini list — shown below the impact tiles on
   both the dashboard and the my-subscriptions page.
   ============================================================ */
.totm-sm-recent-orders {
  margin-top: 24px;
  padding: 18px 20px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.totm-sm-recent-orders__heading {
  margin: 0 0 12px;
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif !important;
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal !important;
  color: #000000;
}
.totm-sm-recent-orders__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.totm-sm-recent-orders__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F2F4;
  flex-wrap: wrap;
}
.totm-sm-recent-orders__item:last-child {
  border-bottom: 0;
}
.totm-sm-recent-orders__primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.totm-sm-recent-orders__number {
  color: #1A1A1A !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
}
.totm-sm-recent-orders__number:hover {
  color: #0F6E56 !important;
}
.totm-sm-recent-orders__date {
  font-size: 12px;
  color: #6B7780;
}
.totm-sm-recent-orders__secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.totm-sm-recent-orders__status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #E1F5EE;
  color: #04342C;
}
.totm-sm-recent-orders__status--processing {
  background: #FFF4DC;
  color: #5C3D00;
}
/* Part-shipped — soft blue so it reads as "in progress / partly out" and is
   visually distinct from processing (amber) and completed (green). */
.totm-sm-recent-orders__status--part-shipped {
  background: #E7F0FB;
  color: #1B4D7E;
}

/* ============================================================
   Part-shipment alert banner (dashboard + view-order). Tells the
   customer which products have shipped when an order is only
   partially dispatched. Soft-blue info styling to match the pill.
   ============================================================ */
.totm-sm-partship-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #E7F0FB;
  border: 1px solid #C2D8F0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.totm-sm-partship-banner__icon {
  font-size: 20px;
  line-height: 1.3;
  flex: 0 0 auto;
}
.totm-sm-partship-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.totm-sm-partship-banner__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 8px;
}
/* "Still to ship:" sub-heading above the remaining-items list. */
.totm-sm-partship-banner__subtitle {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 4px 0 6px;
}
.totm-sm-partship-banner__list--remaining li {
  color: #4A5660;
}
.totm-sm-partship-banner__list {
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  list-style: disc;
}
.totm-sm-partship-banner__list li {
  font-size: 14px;
  color: #1A1A1A;
  margin: 0 0 2px;
}
.totm-sm-partship-banner__note {
  display: block;
  font-size: 13px;
  color: #4A5660;
}
/* CTA buttons sit in a vertical stack in the banner's top-right corner. */
.totm-sm-partship-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* equal-width buttons */
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
}
.totm-sm-partship-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: #0F6E56 !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Kill the theme's global button :after arrow if rendered as a button. */
.totm-sm-partship-banner__btn::after,
.totm-sm-partship-banner__btn::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-partship-banner__btn:hover,
.totm-sm-partship-banner__btn:focus {
  background: #0B5A47 !important;
  border-color: #0B5A47 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none;
}
.totm-sm-partship-banner__btn--ghost {
  background: transparent !important;
  color: #0F6E56 !important;
}
.totm-sm-partship-banner__btn--ghost:hover,
.totm-sm-partship-banner__btn--ghost:focus {
  background: #0F6E56 !important;
  border-color: #0F6E56 !important;
  color: #FFFFFF !important;
}
/* On the order-view page the banner sits inside the order card, so trim its
   top spacing a touch. */
.totm-sm-partship-banner--order {
  margin-top: 4px;
}
/* On narrow screens the button stack drops below the text, full width. */
@media (max-width: 639px) {
  .totm-sm-partship-banner {
    flex-wrap: wrap;
  }
  .totm-sm-partship-banner__actions {
    flex: 1 1 100%;
    margin-top: 12px;
  }
}
/* Courier tracking link (recent-orders list + anywhere else it's surfaced). */
.totm-sm-tracking-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: #0F6E56 !important;
  text-decoration: none !important;
}
.totm-sm-tracking-link:hover,
.totm-sm-tracking-link:focus {
  text-decoration: underline !important;
}
.totm-sm-tracking-link__icon {
  flex: 0 0 auto;
}
.totm-sm-tracking-link__num {
  color: #6B7780;
  font-weight: 400;
}
.totm-sm-tracking-link--plain {
  color: #6B7780 !important;
  text-decoration: none !important;
}
.totm-sm-tracking-link--plain:hover {
  text-decoration: none !important;
}
/* Tracking row on the order-view delivery section. */
.totm-sm-order-view__tracking {
  color: #0F6E56 !important;
  font-weight: 500;
  text-decoration: none !important;
}
.totm-sm-order-view__tracking:hover,
.totm-sm-order-view__tracking:focus {
  text-decoration: underline !important;
}
/* Loyalty loss-aversion nudge — sits just above the Edit subscription button. */
/* Zero-height spacer that clears the float-right totals block. It takes the
   float "clearance" so the nudge's own margin-top below is free to create a
   real gap (clearance would otherwise swallow a top margin on the nudge). */
.totm-sm-loyalty-nudge-clear {
  clear: both;
}
.totm-sm-loyalty-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 28px 0 0;
  padding: 12px 16px;
  background: #EEF6F2;
  border: 1px solid #CDE5DC;
  border-radius: 10px;
  box-sizing: border-box;
}
.totm-sm-loyalty-nudge__icon {
  font-size: 18px;
  line-height: 1.35;
  flex: 0 0 auto;
}
.totm-sm-loyalty-nudge__text {
  font-size: 14px;
  line-height: 1.4;
  color: #1A1A1A;
}
.totm-sm-loyalty-nudge__text strong {
  color: #0F6E56;
  font-weight: 600;
}
.totm-sm-loyalty-nudge__hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #4A5660;
}
/* The action row's default top gap assumes it follows the totals directly; when
   the nudge sits between them, tighten it so the two don't read as detached. */
.totm-sm-loyalty-nudge + .totm-sm-bottom-row--end {
  margin-top: 28px !important;
  padding-top: 0 !important;
}
/* Inside the cancel-flow modal the nudge needs its own breathing room. */
.totm-sm-modal .totm-sm-loyalty-nudge {
  margin: 4px 0 18px;
}
.totm-sm-recent-orders__total {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
}
.totm-sm-recent-orders__view {
  color: #0F6E56 !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
}
.totm-sm-recent-orders__view:hover {
  text-decoration: underline !important;
}
.totm-sm-recent-orders__all {
  display: inline-block;
  margin-top: 12px;
  color: #0F6E56 !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
}
.totm-sm-recent-orders__all:hover {
  text-decoration: underline !important;
}

/* Mobile pass — let the order rows stack their primary/secondary
   columns rather than squeezing onto one line. */
@media (max-width: 539px) {
  .totm-sm-recent-orders__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .totm-sm-recent-orders__secondary {
    width: 100%;
    justify-content: space-between;
  }
}
/* Mobile pass — same banner-padding adjustment for the pre-ship as the donate banner. */
@media (max-width: 639px) {
  .totm-sm-preship-banner--top,
  .single-sub-container > .totm-sm-preship-banner--top {
    margin-top: -15px !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: 16px !important;
    padding: 14px 16px;
  }
  .totm-sm-preship-banner__cta {
    width: 100%;
    justify-content: center;
  }
  /* Hide status pill when preship banner shows, same reason as donate. */
  .totm-sm-preship-banner--top ~ .active-sub-circle,
  .totm-sm-preship-banner--top ~ .paused-sub-circle {
    display: none !important;
  }
}
/* Desktop pill push-down when preship banner is showing — same logic as donate. */
.totm-sm-preship-banner--top ~ .active-sub-circle,
.totm-sm-preship-banner--top ~ .paused-sub-circle {
  top: 140px !important;
}

/* ============================================================
   "Add a little extra" — personalised product recommendations
   based on what other active subscribers commonly have. Sits
   inside the subscription card, between the totals and the
   Edit subscription button. Three product cards in a row on
   desktop, stacks on mobile.
   ============================================================ */
.totm-sm-addons {
  /* Self-contained card chrome — same white background, rounded corners and soft shadow as the other dashboard widgets so the section reads as a sibling of the subscription card rather than something tucked inside it. */
  margin: 24px 0;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.totm-sm-addons__heading {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
.totm-sm-addons__intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-addons__grid {
  /* Flex with a fixed card width so 1, 2, or 3 recommendations all look proportionate — a single card no longer balloons to full width as it did with the auto-fit grid. */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.totm-sm-addon-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 200px;
  max-width: 220px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.totm-sm-addon-card:hover {
  border-color: #0F6E56;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.totm-sm-addon-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #F4F6F7;
}
.totm-sm-addon-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 14px;
  flex: 1 1 auto;
}
.totm-sm-addon-card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}
.totm-sm-addon-card__price {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F6E56;
}
.totm-sm-addon-card__price .woocommerce-Price-amount,
.totm-sm-addon-card__price bdi {
  font-size: inherit !important;
  color: inherit !important;
}
.totm-sm-addon-card__cta {
  appearance: none;
  -webkit-appearance: none;
  /* Use flex (not inline-flex) so the button fills the card width and the centering rules below have a wide enough container to act on — inline-flex was sizing to content, so the theme's global button padding-left was visibly offsetting the label. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: auto;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 6px !important;
  color: #0F6E56 !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center !important;
  text-indent: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  box-sizing: border-box;
}
/* Kill the theme's global button :after arrow. */
.totm-sm-addon-card__cta::after,
.totm-sm-addon-card__cta::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-addon-card__cta:hover,
.totm-sm-addon-card__cta:focus {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
  outline: none;
}
.totm-sm-addon-card__cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.totm-sm-addon-card__cta.is-added {
  background: #0F6E56 !important;
  color: #FFFFFF !important;
  border-color: #0F6E56 !important;
}

/* Mobile — stack to single column for readability. */
@media (max-width: 539px) {
  .totm-sm-addons__grid {
    flex-direction: column;
  }
  .totm-sm-addon-card {
    flex: 1 1 100%;
    max-width: 100%;
    flex-direction: row;
  }
  .totm-sm-addon-card__image {
    width: 100px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
  .totm-sm-addon-card__body {
    padding: 10px 12px;
  }
}

/* ============================================================
   Account page titles + back link — used at the top of the
   Orders list page and the View Order page so they share a
   consistent header treatment with the dashboard sections.
   ============================================================ */
.totm-sm-page-title {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  color: #000000;
  /* Match the loyalty-rewards card heading so all main card / page titles in the account area share one display typeface. */
  font-family: "ivypresto-display", "IvyPrestoDisplay", serif !important;
  letter-spacing: normal !important;
}
.totm-sm-back-link {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #0F6E56 !important;
  text-decoration: none !important;
}
.totm-sm-back-link:hover {
  text-decoration: underline !important;
}

/* ============================================================
   Orders list (full-page variant of the recent-orders widget).
   Reuses the existing .totm-sm-recent-orders styling so the
   /my-account/orders/ page reads the same as the dashboard
   widget — just with more rows and pagination.
   ============================================================ */
.totm-sm-recent-orders--full {
  margin-top: 0;
  padding: 22px 24px;
}
.totm-sm-recent-orders--full .totm-sm-recent-orders__item {
  padding: 14px 0;
}

.totm-sm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 4px 0;
}
.totm-sm-pagination__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: #FFFFFF !important;
  border: 1px solid #D8DDE2 !important;
  border-radius: 8px !important;
  color: #1A1A1A !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.totm-sm-pagination__link:hover,
.totm-sm-pagination__link:focus {
  border-color: #0F6E56 !important;
  color: #0F6E56 !important;
  text-decoration: none !important;
}
/* Kill the theme's global button :after arrow on pagination links. */
.totm-sm-pagination__link::after,
.totm-sm-pagination__link::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-pagination__current {
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-pagination__spacer {
  display: inline-block;
  width: 80px;
}

/* Empty-orders state on /my-account/orders/. */
.totm-sm-orders-empty {
  padding: 32px 24px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  text-align: center;
}
.totm-sm-orders-empty p {
  margin: 0 0 16px;
  color: #4A5660;
}

/* ============================================================
   View-order page — header card + sectioned content.
   Same card chrome (white background, soft shadow, 12px radius)
   as the recent-orders widget so the two pages feel like one
   continuous experience.
   ============================================================ */
.totm-sm-order-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header card — order number + date on the left, status pill on the right. */
.totm-sm-order-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
}
.totm-sm-order-view__title {
  margin: 0;
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  color: #000000;
  /* Match the loyalty-rewards card heading so all main card / page titles in the account area share one display typeface. */
  font-family: "ivypresto-display", "IvyPrestoDisplay", serif !important;
  letter-spacing: normal !important;
}
.totm-sm-order-view__date {
  margin: 4px 0 0;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-order-view__status {
  /* Inherits the pill styles from .totm-sm-recent-orders__status so we get the
     same colour-coded status indicator across pages. */
  flex-shrink: 0;
}

/* Section cards. */
.totm-sm-order-view__section {
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.totm-sm-order-view__section-heading {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

/* Two-column variant for the Delivery + Payment row. */
.totm-sm-order-view__section--columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.totm-sm-order-view__column {
  min-width: 0;
}
@media (max-width: 639px) {
  .totm-sm-order-view__section--columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Items list inside the order. */
.totm-sm-order-view__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.totm-sm-order-view__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #F0F2F4;
}
.totm-sm-order-view__item:last-child {
  border-bottom: 0;
}
.totm-sm-order-view__item-image {
  width: 56px;
  height: 56px;
  background-size: cover;
  background-position: center;
  background-color: #F4F6F7;
  border-radius: 8px;
  flex-shrink: 0;
}
.totm-sm-order-view__item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.totm-sm-order-view__item-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}
.totm-sm-order-view__item-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6B7780;
}
.totm-sm-order-view__item-price {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.totm-sm-order-view__item-price .woocommerce-Price-amount,
.totm-sm-order-view__item-price bdi {
  font-size: inherit !important;
  color: inherit !important;
}
.totm-sm-order-view__item-free {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #E1F5EE;
  color: #04342C;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Totals row. */
.totm-sm-order-view__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  margin: 0;
  font-size: 14px;
}
.totm-sm-order-view__totals dt {
  color: #4A5660;
  font-weight: 400;
}
.totm-sm-order-view__totals dd {
  margin: 0;
  color: #1A1A1A;
  font-weight: 500;
  text-align: right;
}
.totm-sm-order-view__totals dd .woocommerce-Price-amount,
.totm-sm-order-view__totals dd bdi {
  font-size: inherit !important;
  color: inherit !important;
}
.totm-sm-order-view__totals-total {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  padding-top: 8px;
  border-top: 1px solid #F0F2F4;
}

/* Address + field-row utility for delivery/payment columns. */
.totm-sm-order-view__address {
  margin: 0 0 12px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
  color: #1A1A1A;
}
.totm-sm-order-view__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
}
.totm-sm-order-view__field:last-child {
  margin-bottom: 0;
}
.totm-sm-order-view__field-label {
  font-size: 12px;
  color: #6B7780;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.totm-sm-order-view__field span:last-child {
  font-size: 14px;
  color: #1A1A1A;
}

/* My-subscriptions: addons section width-matching is now handled by wrapping
   the section in the same `.sub-holder.grid-margin-x.grid-x.grid-padding-x
   .small-up-1` scaffold the per-sub cards use — that inherits the existing
   theme rule `.sub-holder.small-up-1:not(.medium-up-2) { max-width: 920px }`
   so both sections share the identical width constraint. No standalone CSS
   override needed here any more. */

/* ============================================================
   Out-of-stock banner — rendered at the top of the subscription
   card when any current line item is OOS. Coral palette so it's
   visually distinct from the amber donate banner and the white
   pre-ship banner — three different signals, three different
   colour treatments, hard to confuse at a glance.
   ============================================================ */
.totm-sm-oos-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 16px 0 20px;
  background: #FDEFEA;
  border: 1px solid #C0512F;
  border-left: 5px solid #C0512F;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #5C2207;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(92, 34, 7, 0.06);
  outline: none !important;
}
.totm-sm-oos-banner:focus,
.totm-sm-oos-banner:focus-within,
.totm-sm-oos-banner:focus-visible {
  outline: none !important;
  box-shadow: 0 1px 3px rgba(92, 34, 7, 0.06) !important;
}
.totm-sm-oos-banner__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  color: #C0512F;
}
.totm-sm-oos-banner__body {
  flex: 1 1 240px;
  min-width: 0;
}
.totm-sm-oos-banner__title {
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
  color: #5C2207;
}
.totm-sm-oos-banner__products {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #7A3A1D;
  margin-bottom: 4px;
}
.totm-sm-oos-banner__help {
  display: block;
  font-size: 13px;
  color: #5C2207;
}
.totm-sm-oos-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: #5C2207 !important;
  border: 1px solid #5C2207 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
/* Kill the theme's global anchor :after arrow on the banner CTA so it reads as a clean filled button. */
.totm-sm-oos-banner__cta::after,
.totm-sm-oos-banner__cta::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-oos-banner__cta:hover,
.totm-sm-oos-banner__cta:focus {
  background: #421804 !important;
  border-color: #421804 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none;
}

/* --top modifier — edge-to-edge header strip variant matching the donate banner pattern. */
.totm-sm-oos-banner--top {
  margin: -25px -25px 24px -25px;
  border-radius: 9px 9px 0 0;
  border-top: 4px solid #C0512F;
  border-bottom: 1px solid #E8C7B6;
  border-left: 0;
  border-right: 0;
  padding: 18px 24px;
}
.single-sub-container > .totm-sm-oos-banner--top {
  margin-left: -15px;
  margin-right: -15px;
}

/* When the OOS banner is at the top of the card, push the status pill down so it doesn't sit on top of the amber strip. Mirrors the donate / pre-ship behaviour. */
.totm-sm-oos-banner--top ~ .active-sub-circle,
.totm-sm-oos-banner--top ~ .paused-sub-circle {
  top: 140px !important;
}

/* Mobile pass. */
@media (max-width: 639px) {
  .totm-sm-oos-banner--top,
  .single-sub-container > .totm-sm-oos-banner--top {
    margin-top: -15px !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: 16px !important;
    padding: 14px 16px;
  }
  .totm-sm-oos-banner__cta {
    width: 100%;
    justify-content: center;
  }
  /* Hide the redundant status pill when the OOS banner is showing — banner already implies the sub is active enough to have OOS items in its renewal. */
  .totm-sm-oos-banner--top ~ .active-sub-circle,
  .totm-sm-oos-banner--top ~ .paused-sub-circle {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   NON-SUBSCRIBER DASHBOARD COMPONENTS
   Shown to logged-in customers without any active subscription.
   Three building blocks: a sub-pitch hero, a one-click last-box
   re-order card, and a "you might like" grid reusing the existing
   addon-card styles.
   ───────────────────────────────────────────────────────────────── */

/* Hero — primary subscription push. */
.totm-sm-nonsub-hero {
  margin-bottom: 24px;
}
.totm-sm-nonsub-hero__lede {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #1A1A1A;
}
/* Perks rendered as a clean checked-bullet list inside the hero card.
   The green tick is drawn via a CSS pseudo-element so we don't need an
   icon font or inline SVG per row. */
.totm-sm-nonsub-hero__perks-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.totm-sm-nonsub-hero__perks-list li {
  position: relative;
  padding: 10px 0 10px 34px;
  font-size: 15px;
  line-height: 1.5;
  color: #1A1A1A;
  border-bottom: 1px solid #F1F2F4;
}
.totm-sm-nonsub-hero__perks-list li:last-child {
  border-bottom: 0;
}
.totm-sm-nonsub-hero__perks-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0F6E56;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.totm-sm-nonsub-hero__perks-list li strong {
  color: #1A1A1A;
}
.totm-sm-nonsub-hero__cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.totm-sm-nonsub-hero__cta {
  text-align: center;
}

/* Side-rail variant — the same "Make life easier" card rendered as a
   narrower right-column tile on the non-subscriber dashboard (sits in
   the slot the subscriber dashboard uses for the updates slider). */
.totm-sm-nonsub-hero--side {
  margin-bottom: 0;
}
.totm-sm-nonsub-hero--side .totm-sm-nonsub-hero__lede {
  font-size: 14px;
  margin-bottom: 16px;
}
.totm-sm-nonsub-hero--side .totm-sm-nonsub-hero__perks-list li {
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 30px;
}
.totm-sm-nonsub-hero--side .totm-sm-nonsub-hero__perks-list li::before {
  top: 11px;
  width: 18px;
  height: 18px;
  background-size: 12px 12px;
}
.totm-sm-nonsub-hero--side .totm-sm-nonsub-hero__cta {
  width: 100%;
}

/* Personalised "you could have saved £X" callout. Sits between the
   lede and the perks list inside the Make Life Easier card. Green
   highlight to tie it to the subscribe savings story. */
.totm-sm-nonsub-hero__personal-savings {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #E8F4F0;
  border: 1px solid #B7D9CD;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #0B5946;
}
.totm-sm-nonsub-hero__personal-savings strong {
  color: #0F6E56;
}
.totm-sm-nonsub-hero--side .totm-sm-nonsub-hero__personal-savings {
  font-size: 13px;
  padding: 10px 12px;
}

/* On narrower viewports the side-rail variant stacks below the main
   column and goes full-width again, just like the subscriber-updates
   slider does on the subscriber dashboard. */
@media (max-width: 939px) {
  .totm-sm-nonsub-hero--side {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 24px;
  }
}

/* Re-order card — second pitch, blends a useful utility (re-buy your
   last box in one click) with a soft subscription nudge underneath. */
.totm-sm-nonsub-reorder {
  margin-bottom: 24px;
}
.totm-sm-nonsub-reorder__meta {
  margin: 0 0 12px;
  font-size: 14px;
  color: #4A5660;
}
.totm-sm-nonsub-reorder__meta strong {
  color: #1A1A1A;
}
.totm-sm-nonsub-reorder__items {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1A1A1A;
}
.totm-sm-nonsub-reorder__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #F1F2F4;
}
.totm-sm-nonsub-reorder__items li:last-child {
  border-bottom: 0;
}
.totm-sm-nonsub-reorder__img {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid #E8EAED;
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.totm-sm-nonsub-reorder__item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.totm-sm-nonsub-reorder__name {
  font-weight: 600;
  color: #1A1A1A;
  word-break: break-word;
}
.totm-sm-nonsub-reorder__qty-line {
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-nonsub-reorder__line-total {
  flex-shrink: 0;
  font-weight: 600;
  color: #1A1A1A;
  font-size: 15px;
  white-space: nowrap;
}
/* Normalise all WooCommerce price output inside the re-order card so
   it inherits the surrounding text styling instead of bringing in
   theme/plugin overrides (which can render the currency symbol at a
   different size or apply unexpected weights). Covers the meta line
   total, the per-item qty × unit price, and the line-total column. */
.totm-sm-nonsub-reorder .woocommerce-Price-amount,
.totm-sm-nonsub-reorder .woocommerce-Price-amount bdi,
.totm-sm-nonsub-reorder bdi,
.totm-sm-nonsub-reorder .woocommerce-Price-currencySymbol {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 479px) {
  .totm-sm-nonsub-reorder__item {
    gap: 10px;
  }
  .totm-sm-nonsub-reorder__img {
    width: 48px;
    height: 48px;
  }
  .totm-sm-nonsub-reorder__line-total {
    font-size: 14px;
  }
}
.totm-sm-nonsub-reorder__cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.totm-sm-nonsub-reorder__cta {
  text-align: center;
}
.totm-sm-nonsub-reorder__sublink {
  font-size: 14px;
  font-weight: 600;
  color: #0F6E56;
  text-decoration: none;
}
.totm-sm-nonsub-reorder__sublink:hover,
.totm-sm-nonsub-reorder__sublink:focus {
  text-decoration: underline;
  color: #0B5946;
}

/* Mobile pass — full-width CTAs and stacked re-order link. */
@media (max-width: 639px) {
  .totm-sm-nonsub-hero__cta,
  .totm-sm-nonsub-reorder__cta {
    width: 100%;
  }
  .totm-sm-nonsub-reorder__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .totm-sm-nonsub-reorder__sublink {
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────────
   NON-SUBSCRIBER DASHBOARD — extra signals layered on top of the
   core re-order / hero / impact blocks. Each section is self-
   contained so any one can be re-ordered or removed without
   affecting the others.
   ───────────────────────────────────────────────────────────────── */

/* "Running low?" replenishment nudge — slim tile above the re-order
   card, only renders when the last order is at least 30 days old. */
.totm-sm-replenish-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #FFF5DC;
  border: 1px solid #E8C66B;
  border-left: 4px solid #E8C66B;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #5C4308;
}
.totm-sm-replenish-nudge__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.totm-sm-replenish-nudge__text {
  flex: 1 1 auto;
}

/* Re-order card bottom — three clearly separated horizontal stripes:
   numeric totals (right-aligned, ~320px wide), then full-width green
   savings / discount / shipping notes, then the CTA row. Splitting
   them prevents the floated totals column from crashing into the
   CTAs and lets long notes wrap naturally across the full card width. */
.totm-sm-nonsub-reorder__summary {
  margin-top: 20px;
  overflow: hidden; /* contains the inner float */
}
.totm-sm-nonsub-reorder__totals {
  float: right !important;
  width: 100%;
  max-width: 320px;
  margin: 0;
  /* Padding-bottom on the floated totals creates the visible gap below
     the Total line — the theme's `.total-sub { margin-bottom: 0 !important; }`
     rule blocks margin-based spacing, but padding is unaffected. */
  padding-bottom: 24px;
}
/* Free-shipping nudge sits below the Total line in the same right-
   aligned ~320px column so it reads as a footnote to the totals. */
.totm-sm-nonsub-reorder__ship-note {
  clear: both !important;
  width: 100%;
  max-width: 320px;
  margin: 0 0 0 auto !important;
  padding: 10px 14px !important;
  background: #FFF5DC;
  border: 1px solid #EAD9A5;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #4A5660;
  text-align: center;
}
.totm-sm-nonsub-reorder__ship-note strong {
  color: #1A1A1A;
}
.totm-sm-nonsub-reorder__notes {
  clear: both;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #E8F4F0;
  border: 1px solid #B7D9CD;
  border-radius: 10px;
}
.totm-sm-nonsub-reorder__notes p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #0B5946;
}
.totm-sm-nonsub-reorder__notes strong {
  color: #0F6E56;
}
.totm-sm-nonsub-reorder__cta-row {
  clear: both;
  margin-top: 20px;
}

/* "Join N,000+ subscribers" chip — small pill at the top of the
   right-column hero. Social proof without shouting. */
.totm-sm-subscriber-count {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  background: #FFE2EB;
  color: #B8255F;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.totm-sm-subscriber-count strong {
  color: #B8255F;
}

/* "Try a monthly subscription" secondary CTA — soft link under the
   hero, less prominent than the main subscribe button. */
.totm-sm-nonsub-hero__trial {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #F1F2F4;
  font-size: 13px;
  color: #4A5660;
  line-height: 1.5;
}
.totm-sm-nonsub-hero__trial a {
  color: #0F6E56;
  font-weight: 600;
  text-decoration: none;
}
.totm-sm-nonsub-hero__trial a:hover,
.totm-sm-nonsub-hero__trial a:focus {
  text-decoration: underline;
  color: #0B5946;
}

/* Side-column wrapper so the hero and the testimonial slider stack
   vertically inside the 33% column. */
.totm-sm-nonsub-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Testimonial slider — reuses the .subscriber-slider plumbing so the
   existing arrow + auto-rotate JS handles it. Visual styling is
   distinct from the brand-updates slider on the subscriber side. */
.totm-sm-testimonials {
  margin-bottom: 0;
  padding: 24px 22px 20px;
}
.totm-sm-testimonials .subscriber-slider-viewport {
  overflow: hidden;
}
.totm-sm-testimonial {
  padding: 4px 2px;
}
.totm-sm-testimonial__quote {
  margin: 0 0 12px;
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 18px;
  line-height: 1.45;
  color: #1A1A1A;
}
.totm-sm-testimonial__author {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4A5660;
}

/* Brand-level impact card — three numeric callouts in a horizontal
   row. Distinct from the per-customer impact tiles (different layout
   so they don't look like duplicates). */
.totm-sm-brand-impact {
  padding: 24px;
  margin: 24px 0;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.totm-sm-brand-impact__heading {
  margin: 0 0 6px;
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 22px;
  font-weight: normal;
  color: #000000;
  letter-spacing: normal;
}
.totm-sm-brand-impact__lede {
  margin: 0 0 18px;
  font-size: 14px;
  color: #4A5660;
}
.totm-sm-brand-impact__row {
  display: grid;
  /* 2x2 grid matches the four totm.com homepage counters. Collapses to
     a single column on narrow viewports via the media query below. */
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.totm-sm-brand-impact__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #F8FAFB;
  border: 1px solid #E8EAED;
  border-radius: 10px;
}
.totm-sm-brand-impact__value {
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 28px;
  line-height: 1.1;
  color: #1A1A1A;
}
.totm-sm-brand-impact__label {
  font-size: 13px;
  line-height: 1.4;
  color: #4A5660;
}

@media (max-width: 939px) {
  .totm-sm-brand-impact__row {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ACCOUNT DETAILS + EDIT ADDRESS PAGES
   Brings the Account Details and Edit Address screens in line with
   the dashboard / my-subscriptions visual language: stacked white
   section cards with the same border + shadow + serif headings.
   ───────────────────────────────────────────────────────────────── */

/* Page-level title bar — used by orders.php and now also account /
   address pages. Styled to read as the page's primary header. */
.totm-sm-page-title {
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 36px;
  font-weight: normal;
  line-height: 1.15;
  color: #000000;
  letter-spacing: normal;
  margin: 24px 0 8px;
}
.totm-sm-page-lede {
  font-size: 16px;
  color: #4A5660;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Back link (used on view-order + edit-address). Quiet grey link with
   a small chevron, sits above the card. */
.totm-sm-back-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #4A5660;
  text-decoration: none;
  margin: 20px 0 12px;
}
.totm-sm-back-link:hover,
.totm-sm-back-link:focus {
  color: #0F6E56;
  text-decoration: underline;
}

/* Per-section account card. Re-uses the existing .sub-coming-next
   shell (border + shadow + radius). Native <details>/<summary>
   handles the accordion open/close behaviour — no JS needed. The
   summary is the always-visible header row; the body sits inside a
   sibling div that animates open. */
.totm-sm-account-card {
  margin: 0 0 16px;
  padding: 0; /* padding moved to summary + body so the click target spans the full card width */
  border: 1px solid #E8EAED !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden;
}
.totm-sm-account-card__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 22px 30px;
  cursor: pointer;
  list-style: none; /* hide the default disclosure triangle */
  user-select: none;
}
/* Section icon — leading visual on each accordion title. Inherits
   currentColor so it picks up the heading's dark colour. */
.totm-sm-account-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F4F6F7;
  color: #1A1A1A;
}
.totm-sm-account-card__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 599px) {
  .totm-sm-account-card__icon {
    width: 28px;
    height: 28px;
  }
  .totm-sm-account-card__icon svg {
    width: 16px;
    height: 16px;
  }
}
/* Title span — keeps the serif heading styling now that the summary
   itself is a flex container with mixed content (icon + title + badge + chevron). */
.totm-sm-account-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.2;
  color: #000000;
  letter-spacing: normal;
}
/* Summary badge — small grey hint of the section contents, sits
   between the title and the chevron. Hidden on narrow viewports so
   the title has room. */
.totm-sm-account-card__badge {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: #4A5660;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
@media (max-width: 599px) {
  .totm-sm-account-card__badge {
    display: none;
  }
}
/* Hide the default disclosure triangle in WebKit too. */
.totm-sm-account-card__heading::-webkit-details-marker {
  display: none;
}
/* Custom chevron indicator on the right of the summary. Rotates when open. */
.totm-sm-account-card__heading::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform 0.2s ease;
}
.totm-sm-account-card[open] .totm-sm-account-card__heading::after {
  transform: rotate(180deg);
}
.totm-sm-account-card__heading:hover {
  background: #FAFBFC;
}
.totm-sm-account-card__body {
  padding: 4px 30px 28px;
}
.totm-sm-account-card__lede {
  font-size: 14px;
  color: #4A5660;
  line-height: 1.5;
  margin: 0 0 22px;
}
.totm-sm-account-card__empty {
  font-size: 14px;
  color: #4A5660;
  font-style: italic;
  margin: 0 0 16px;
}
.totm-sm-account-card__small {
  font-size: 12px;
  line-height: 1.55;
  color: #6B7480;
  margin: 18px 0 0;
}
.totm-sm-account-card__metorik {
  margin: 0;
}

/* Account form layout — clean two-column splits where it fits, single
   column where it doesn't, consistent input styling. */
.totm-sm-account-form .totm-sm-form-row {
  display: block;
}
.totm-sm-form-row--split {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 539px) {
  .totm-sm-form-row--split {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.totm-sm-form-field {
  margin: 0 0 18px;
}
.totm-sm-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.totm-sm-form-field input[type="text"],
.totm-sm-form-field input[type="email"],
.totm-sm-form-field input[type="password"],
.totm-sm-account-form input[type="text"],
.totm-sm-account-form input[type="email"],
.totm-sm-account-form input[type="password"],
.totm-sm-address-fields input[type="text"],
.totm-sm-address-fields input[type="email"],
.totm-sm-address-fields input[type="tel"],
.totm-sm-address-fields select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #D7DCE3;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 15px;
  color: #1A1A1A;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.totm-sm-form-field input:focus,
.totm-sm-account-form input:focus,
.totm-sm-address-fields input:focus,
.totm-sm-address-fields select:focus {
  outline: none;
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}
.totm-sm-form-field .required {
  color: #B8255F;
  font-weight: 700;
}
.totm-sm-form-help {
  display: block;
  font-size: 12px;
  color: #6B7480;
  margin-top: 6px;
}
.totm-sm-form-fieldset {
  border: 0;
  padding: 0;
  margin: 26px 0 0;
  border-top: 1px solid #E8EAED;
  padding-top: 22px;
}
.totm-sm-form-fieldset legend {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 14px;
  padding: 0;
}
.totm-sm-form-actions {
  margin: 24px 0 0;
}
.totm-sm-form-actions .totm-sm-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  min-height: 44px;
}

/* Payment methods list — replaces the legacy WC table with a clean
   list of cards. One row per saved card with brand/last4/expires +
   action links. */
.totm-sm-payment-methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.totm-sm-payment-methods__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #E8EAED;
  border-radius: 10px;
  background: #FFFFFF;
  margin: 0 0 10px;
}
.totm-sm-payment-methods__item.is-default {
  border-color: #B7D9CD;
  background: #F4FBF9;
}
.totm-sm-payment-methods__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1A1A1A;
}
.totm-sm-payment-methods__brand {
  font-weight: 700;
}
.totm-sm-payment-methods__last4 {
  color: #4A5660;
}
.totm-sm-payment-methods__expires {
  font-size: 12px;
  color: #6B7480;
  padding-left: 8px;
  border-left: 1px solid #E8EAED;
}
.totm-sm-payment-methods__badge {
  display: inline-block;
  padding: 2px 10px;
  background: #0F6E56;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.totm-sm-payment-methods__actions {
  display: flex;
  gap: 10px;
}
.totm-sm-payment-methods__action {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.totm-sm-payment-methods__action--delete {
  color: #B8255F;
}
.totm-sm-payment-methods__action--delete:hover,
.totm-sm-payment-methods__action--delete:focus {
  background: #FCE8EE;
}
.totm-sm-payment-methods__action--default {
  color: #0F6E56;
}
.totm-sm-payment-methods__action--default:hover,
.totm-sm-payment-methods__action--default:focus {
  background: #E8F4F0;
}

/* Default account-level addresses — two cards side by side (delivery
   + billing), collapses to one column on narrow viewports. Renders
   inside the "Address information" details. */
.totm-sm-default-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 8px;
}
.totm-sm-default-addresses--single {
  grid-template-columns: 1fr;
}
@media (max-width: 599px) {
  .totm-sm-default-addresses {
    grid-template-columns: 1fr;
  }
}
.totm-sm-default-address {
  padding: 18px 18px 20px;
  border: 1px solid #E8EAED;
  border-radius: 10px;
  background: #FFFFFF;
}
.totm-sm-default-address__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.totm-sm-default-address__heading {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
}
.totm-sm-default-address__edit {
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  text-decoration: none;
}
.totm-sm-default-address__edit:hover,
.totm-sm-default-address__edit:focus {
  text-decoration: underline;
  color: #0B5A47;
}
.totm-sm-default-address__body {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: #1A1A1A;
  margin: 0;
}
.totm-sm-default-address__empty {
  margin: 0;
  font-size: 14px;
  color: #4A5660;
  font-style: italic;
}

/* "Subscription addresses" sub-block inside the same details — sits
   below the default-addresses grid with its own little intro. */
.totm-sm-sub-addresses-block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #E8EAED;
}
.totm-sm-sub-addresses-block__heading {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 6px;
}
.totm-sm-sub-addresses-block__lede {
  font-size: 13px;
  color: #4A5660;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Subscription addresses list — one row per active sub with
   delivery + billing buttons. */
.totm-sm-sub-addresses {
  list-style: none;
  margin: 0;
  padding: 0;
}
.totm-sm-sub-addresses__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  border: 1px solid #E8EAED;
  border-radius: 10px;
  background: #FFFFFF;
  margin: 0 0 12px;
}
.totm-sm-sub-addresses__item:last-child {
  margin-bottom: 0;
}
.totm-sm-sub-addresses__info {
  flex: 1 1 220px;
}
.totm-sm-sub-addresses__id {
  margin: 0 0 4px;
  font-size: 15px;
  color: #1A1A1A;
}
.totm-sm-sub-addresses__meta {
  margin: 0;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-sub-addresses__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.totm-sm-sub-addresses__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  background: #FFFFFF;
  border: 1px solid #0F6E56;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.totm-sm-sub-addresses__btn:hover,
.totm-sm-sub-addresses__btn:focus {
  background: #0F6E56;
  color: #FFFFFF;
  text-decoration: none;
}

/* Edit-address form — pulls WC's auto-generated form-row labels into
   line with the rest of the account forms. Uses attribute selectors
   because WC controls the markup. */
.totm-sm-address-fields .form-row {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}
.totm-sm-address-fields .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.totm-sm-address-fields__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.totm-sm-address-fields .form-row-wide,
.totm-sm-address-fields .form-row--wide,
.totm-sm-address-fields .form-row[id*="address_1"],
.totm-sm-address-fields .form-row[id*="address_2"],
.totm-sm-address-fields .form-row[id*="company"],
.totm-sm-address-fields .form-row[id*="country"] {
  grid-column: 1 / -1;
}
@media (max-width: 539px) {
  .totm-sm-address-fields__wrapper {
    grid-template-columns: 1fr;
  }
}

/* Empty-state for orders page — friendlier than the default WC
   "no orders" notice. */
.totm-sm-orders-empty {
  padding: 32px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.totm-sm-orders-empty p {
  font-size: 16px;
  color: #4A5660;
  margin: 0 0 16px;
}

/* Pagination for orders list. Sits below the orders card. */
.totm-sm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0 6px;
}
.totm-sm-pagination__link {
  font-size: 14px;
  font-weight: 600;
  color: #0F6E56;
  text-decoration: none;
}
.totm-sm-pagination__link:hover,
.totm-sm-pagination__link:focus {
  text-decoration: underline;
  color: #0B5946;
}
.totm-sm-pagination__current {
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-pagination__spacer {
  flex: 0 0 60px;
}

/* ─────────────────────────────────────────────────────────────────
   ACCOUNT FORM — ROGUE-BUTTON CLEAN-UP
   The theme has a global `button::after { ... arrow ... }` rule that
   draws an arrow on every <button>. That picks up WC's password-
   reveal toggle inside password fields and the Metorik newsletter
   submit button, both of which then render as pink pill CTAs in the
   middle of the form. Targeted overrides below kill those.
   ───────────────────────────────────────────────────────────────── */

/* WC's "show password" toggles — hidden on this page; users can
   still type into the password field normally, and the toggle's
   default styling looks more like a CTA than a utility. */
.totm-sm-account-form .password-input button.show-password-input,
.totm-sm-account-form button.show-password-input,
.totm-sm-account-form .show-password-input,
/* Catch-all: WC injects the show/hide-password toggle via JS, and on some
   versions it isn't a .show-password-input button — it's whatever <button>
   ends up inside the password field wrapper. The theme's global pink button
   style then renders it as a pink bar. Hide ANY non-primary button that lands
   inside an account form field / password-input wrapper, regardless of class.
   The real submit button lives in .totm-sm-form-actions, so it's unaffected. */
.totm-sm-account-form .totm-sm-form-field button:not(.totm-sm-primary-btn),
.totm-sm-account-form .password-input button:not(.totm-sm-primary-btn),
body.woocommerce-account .totm-sm-account-form button.show-password-input,
body.woocommerce-account .totm-sm-account-form .show-password-input,
/* Broadest catch: ANY non-primary button anywhere inside the edit-account
   form (the WC password toggle lands somewhere in here regardless of WC
   version). The only legit button is the .totm-sm-primary-btn submit. */
html body .totm-sm-account-form button:not(.totm-sm-primary-btn),
/* And a global show/hide-password kill for the whole account area in case WC
   injects the toggle outside the form wrapper. */
html body.woocommerce-account .show-password-input,
html body.woocommerce-account button.show-password-input {
  display: none !important;
}
/* Belt-and-braces: kill any ::after / ::before arrow on whatever
   button-like thing WC injects inside the form so nothing leaks. */
.totm-sm-account-form button:not(.totm-sm-primary-btn)::after,
.totm-sm-account-form button:not(.totm-sm-primary-btn)::before,
.totm-sm-account-form input[type="submit"]:not(.totm-sm-primary-btn)::after,
.totm-sm-account-form input[type="submit"]:not(.totm-sm-primary-btn)::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Metorik newsletter form submit — give it the same green pill
   treatment as our primary buttons. Metorik's markup varies, so
   we target every submit-shaped element inside the wrapper. */
.totm-sm-account-card__metorik button[type="submit"],
.totm-sm-account-card__metorik input[type="submit"],
.totm-sm-account-card__metorik button.metorik-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 20px !important;
  margin: 16px 0 0 !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  background: #0F6E56 !important;
  background-image: none !important;
  background-color: #0F6E56 !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  float: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.totm-sm-account-card__metorik button[type="submit"]::after,
.totm-sm-account-card__metorik button[type="submit"]::before,
.totm-sm-account-card__metorik input[type="submit"]::after,
.totm-sm-account-card__metorik input[type="submit"]::before,
.totm-sm-account-card__metorik button.metorik-button::after,
.totm-sm-account-card__metorik button.metorik-button::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.totm-sm-account-card__metorik button[type="submit"]:hover,
.totm-sm-account-card__metorik button[type="submit"]:focus,
.totm-sm-account-card__metorik input[type="submit"]:hover,
.totm-sm-account-card__metorik input[type="submit"]:focus,
.totm-sm-account-card__metorik button.metorik-button:hover,
.totm-sm-account-card__metorik button.metorik-button:focus {
  background: #0B5A47 !important;
  background-color: #0B5A47 !important;
  border-color: #0B5A47 !important;
  color: #FFFFFF !important;
  outline: none;
}

/* Edit-address page: same arrow-kill for the Save address submit,
   in case it's missing the totm-sm-primary-btn class somewhere. */
.totm-sm-address-form button[type="submit"]:not(.totm-sm-primary-btn)::after,
.totm-sm-address-form button[type="submit"]:not(.totm-sm-primary-btn)::before {
  content: none !important;
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   ACCOUNT QUICK-STATS CHIP
   Single-line summary of the customer's relationship with TOTM that
   sits between the page lede and the first section card.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-account-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-account-stats span {
  position: relative;
  padding: 0 14px 0 0;
  margin-right: 14px;
}
.totm-sm-account-stats span:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #B0B6BC;
  font-weight: 700;
}
.totm-sm-account-stats strong {
  color: #1A1A1A;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   YOUR DATA & PRIVACY — UK GDPR data tools
   Each action is a row with a heading + description on the left and
   a single CTA on the right. Destructive variant (account deletion)
   uses a coral colour to signal weight.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-privacy-actions {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.totm-sm-privacy-actions__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #F1F2F4;
}
.totm-sm-privacy-actions__item:first-child {
  padding-top: 4px;
}
.totm-sm-privacy-actions__item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.totm-sm-privacy-actions__info {
  flex: 1 1 auto;
  min-width: 0;
}
.totm-sm-privacy-actions__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}
.totm-sm-privacy-actions__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4A5660;
}
.totm-sm-privacy-actions__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  background: #FFFFFF;
  border: 1px solid #0F6E56;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.totm-sm-privacy-actions__btn:hover,
.totm-sm-privacy-actions__btn:focus {
  background: #0F6E56;
  color: #FFFFFF;
  text-decoration: none;
}
.totm-sm-privacy-actions__btn--danger {
  color: #C0512F;
  border-color: #C0512F;
}
.totm-sm-privacy-actions__btn--danger:hover,
.totm-sm-privacy-actions__btn--danger:focus {
  background: #C0512F;
  color: #FFFFFF;
}
@media (max-width: 539px) {
  .totm-sm-privacy-actions__item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .totm-sm-privacy-actions__btn {
    width: 100%;
  }
}

/* Stats chip + Expand/Collapse-all toggle share the same row at the
   top of the page. Stats float left, toggle to the right. */
.totm-sm-account-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.totm-sm-account-meta .totm-sm-account-stats {
  margin: 0;
}
/* Expand/Collapse all — styled as a plain text link, not a button.
   The theme has a strong `button { ... pink pill ... }` global rule
   that needs the same html-body-element selector specificity used by
   .totm-sm-primary-btn to win the cascade, plus !important on every
   property the theme touches. Pushed to the far right of the meta
   row so it lines up cleanly on its own. */
html body button.totm-sm-account-toggle-all {
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 4px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  color: #0F6E56 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-align: right !important;
  cursor: pointer;
  float: none !important;
  display: inline-block !important;
}
html body button.totm-sm-account-toggle-all:hover,
html body button.totm-sm-account-toggle-all:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #0B5A47 !important;
  outline: none !important;
  text-decoration: underline !important;
}
/* Kill the theme's global ::after / ::before arrow on this button. */
html body button.totm-sm-account-toggle-all::after,
html body button.totm-sm-account-toggle-all::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* "Optional" hint next to a field label — quieter than the asterisk. */
.totm-sm-form-optional {
  font-size: 12px;
  font-weight: 400;
  color: #6B7480;
  margin-left: 4px;
}

/* The smooth accordion animation runs through inline JS that sets
   height/opacity values during the open/close transition. The default
   resting body has no inline styles applied so we just need to make
   sure it transitions nicely when the JS sets values. */
.totm-sm-account-card__body {
  transform-origin: top center;
}

/* ─────────────────────────────────────────────────────────────────
   STATUS PILL TENURE + ANNUAL SPEND + INVOICE DOWNLOADS + TOUR
   ───────────────────────────────────────────────────────────────── */

/* Subscription tenure inline on the status pill. Lighter weight than
   the main "Active" / "Paused" word so it reads as a secondary fact. */
.totm-sm-status-pill__tenure {
  font-weight: 400;
  opacity: 0.8;
  margin-left: 2px;
}

/* Estimated annual spend — sits at the bottom of the totals block,
   under the discount / free-ship lines. Same colour family as the
   "you're saving" discount line but slightly quieter. */
.totm-sm-annual-spend {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #4A5660;
}
.totm-sm-annual-spend strong {
  color: #1A1A1A;
  font-weight: 600;
}

/* "Invoice" link in the orders list row — quiet text link, sits
   alongside the View > link in the secondary actions area. */
.totm-sm-recent-orders__invoice {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  text-decoration: none;
  margin-right: 4px;
}
.totm-sm-recent-orders__invoice:hover,
.totm-sm-recent-orders__invoice:focus {
  text-decoration: underline;
  color: #0B5A47;
}

/* View-order header actions — wraps the status pill + invoice button. */
.totm-sm-order-view__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* "Download invoice" button on view-order — secondary green ghost
   button with download glyph. */
.totm-sm-order-view__invoice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  background: #FFFFFF;
  border: 1px solid #0F6E56;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.totm-sm-order-view__invoice-btn:hover,
.totm-sm-order-view__invoice-btn:focus {
  background: #0F6E56;
  color: #FFFFFF;
  text-decoration: none;
}
.totm-sm-order-view__invoice-btn svg {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   ONBOARDING TOUR
   Three-step intro shown on a customer's first dashboard visit.
   Centred modal with a tinted backdrop. Dismissal is persisted via
   AJAX into user_meta, so it never re-appears once skipped/finished.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-tour {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.totm-sm-tour[hidden] {
  display: none;
}
/* Solid backdrop — backdrop-filter blur was triggering expensive
   per-frame re-rasterisation of the animated elements underneath,
   which made the page feel sluggish on the tour. A slightly darker
   solid colour gives the same focus-the-modal effect for free. */
.totm-sm-tour__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 28, 0.65);
  cursor: pointer;
}
.totm-sm-tour__step {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: left;
  animation: totmTourPop 0.25s ease-out;
}
@keyframes totmTourPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.totm-sm-tour__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F6E56;
}
.totm-sm-tour__title {
  margin: 0 0 12px;
  font-family: 'ivypresto-display', 'IvyPrestoDisplay', serif;
  font-size: 26px;
  font-weight: normal;
  line-height: 1.2;
  color: #1A1A1A;
  letter-spacing: normal;
}
.totm-sm-tour__body {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5660;
}
.totm-sm-tour__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
html body button.totm-sm-tour__skip {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4A5660 !important;
  text-decoration: underline !important;
  cursor: pointer;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body button.totm-sm-tour__skip::after,
html body button.totm-sm-tour__skip::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
html body button.totm-sm-tour__skip:hover,
html body button.totm-sm-tour__skip:focus {
  color: #1A1A1A !important;
  background: transparent !important;
  outline: none !important;
}
html body button.totm-sm-tour__next {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  background: #0F6E56 !important;
  background-color: #0F6E56 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
html body button.totm-sm-tour__next::after,
html body button.totm-sm-tour__next::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
html body button.totm-sm-tour__next:hover,
html body button.totm-sm-tour__next:focus {
  background: #0B5A47 !important;
  background-color: #0B5A47 !important;
  border-color: #0B5A47 !important;
  color: #FFFFFF !important;
  outline: none !important;
}

/* Prevent background scrolling while the tour is open. */
body.totm-sm-tour-open {
  overflow: hidden;
}

@media (max-width: 539px) {
  .totm-sm-tour__step {
    padding: 24px 22px 22px;
  }
  .totm-sm-tour__title {
    font-size: 22px;
  }
  .totm-sm-tour__body {
    font-size: 14px;
  }
  .totm-sm-tour__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  html body button.totm-sm-tour__next {
    width: 100% !important;
  }
  html body button.totm-sm-tour__skip {
    text-align: center !important;
  }
}

/* Respect reduced-motion preferences — disables the entrance pop +
   accordion animation prep for users who've asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .totm-sm-tour__step {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   SAVINGS CALLOUT PULSE
   Subtle "this is worth your attention" cue on the two green savings
   panels — the re-order card's totals notes and the Make Life Easier
   personal-savings line. A faint outer-shadow glow that grows + fades
   over a 3.6s cycle. Slow enough to feel alive rather than fidgety,
   and skipped entirely under reduced-motion preferences.
   ───────────────────────────────────────────────────────────────── */
@keyframes totmSavingsPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(15, 110, 86, 0);
    border-color: #B7D9CD;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(15, 110, 86, 0.13);
    border-color: #9DC9B5;
    transform: scale(1.008);
  }
}
.totm-sm-nonsub-reorder__notes,
.totm-sm-nonsub-hero__personal-savings {
  animation: totmSavingsPulse 3s ease-in-out infinite !important;
  transform-origin: center center;
}
/* Pause the pulse whenever the onboarding tour modal is open. Without
   this, the browser has to keep re-rendering the actively-animated
   elements behind the (dimmed) overlay each frame, which manifests
   as a sluggish mouse / scroll while the tour is visible. */
body.totm-sm-tour-open .totm-sm-nonsub-reorder__notes,
body.totm-sm-tour-open .totm-sm-nonsub-hero__personal-savings {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .totm-sm-nonsub-reorder__notes,
  .totm-sm-nonsub-hero__personal-savings {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   "TAKE A QUICK TOUR" TRIGGER
   Persistent button at the bottom of the dashboard so customers can
   re-open the onboarding tour at any point — not just on their
   first visit. Styled as a subtle text-link with a help glyph,
   centred in its own row.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-tour-trigger-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 12px;
}
html body button.totm-sm-tour-trigger {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #D7DCE3 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #4A5660 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
html body button.totm-sm-tour-trigger:hover,
html body button.totm-sm-tour-trigger:focus {
  background: #F4F6F7 !important;
  background-color: #F4F6F7 !important;
  border-color: #B0B6BC !important;
  color: #1A1A1A !important;
  outline: none !important;
  text-decoration: none !important;
}
html body button.totm-sm-tour-trigger::after,
html body button.totm-sm-tour-trigger::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
.totm-sm-tour-trigger svg {
  display: block;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────
   WC NOTICES — green callout style on the My Account area
   The theme styles .woocommerce-message as a pink full-width strip
   (see _my-account.scss line 1392). Brings it in line with our
   green discount/savings callouts so post-action confirmations
   match the rest of the dashboard. Scoped to .woocommerce-account
   so checkout / cart notices keep their original style.
   ───────────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-message {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 1095px !important;
  margin: 24px auto !important;
  padding: 14px 20px !important;
  background-color: #E8F4F0 !important;
  background-image: none !important;
  border: 1px solid #B7D9CD !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #0B5946 !important;
  text-align: center !important;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-message::after {
  display: none !important;
}
.woocommerce-account .woocommerce-message strong {
  color: #0F6E56 !important;
}
.woocommerce-account .woocommerce-message a {
  color: #0F6E56 !important;
  text-decoration: underline !important;
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-message .wc-forward {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   PAYMENT METHODS PAGE — standalone /my-account/payment-methods/
   Uses the .sub-coming-next card shell (same border + shadow as the
   subscription card) and shares the .totm-sm-payment-methods list
   pattern with the Account Details accordion section, so the visuals
   match regardless of how the customer reaches their saved cards.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-payment-methods-page {
  padding: 28px 30px;
}
.totm-sm-payment-methods-page .totm-sm-payment-methods {
  margin-bottom: 20px;
}
.totm-sm-payment-methods-page__empty {
  margin: 0 0 20px;
  font-size: 14px;
  color: #4A5660;
  font-style: italic;
}
@media (max-width: 599px) {
  .totm-sm-payment-methods-page {
    padding: 22px 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   EDIT ADDRESS PAGE — standalone /my-account/edit-address/{type}/
   Same .sub-coming-next card shell + .totm-sm-page-title pattern
   used by the payment-methods page, plus extra address-specific
   polish on top of the existing .totm-sm-address-fields rules.
   ───────────────────────────────────────────────────────────────── */
.totm-sm-address-form__card {
  padding: 28px 30px;
}
/* WooCommerce's .form-row label uses inline-block by default; ensure
   our address layout matches the account-details form styling — same
   colour, weight, spacing. */
.totm-sm-address-fields .form-row label,
.totm-sm-address-fields .woocommerce-input-wrapper label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
  letter-spacing: normal;
  text-transform: none;
}
.totm-sm-address-fields .required {
  color: #B8255F;
  font-weight: 700;
  text-decoration: none;
}
.totm-sm-address-fields .optional {
  font-size: 12px;
  color: #6B7480;
  font-weight: 400;
}
.totm-sm-address-fields .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
/* All inputs share the polished input style (44px height, 8px radius,
   focus ring matching the account-details form). */
.totm-sm-address-fields input[type="text"],
.totm-sm-address-fields input[type="email"],
.totm-sm-address-fields input[type="tel"],
.totm-sm-address-fields input[type="number"],
.totm-sm-address-fields input[type="password"],
.totm-sm-address-fields select,
.totm-sm-address-fields .select2-selection--single,
.totm-sm-address-fields textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #D7DCE3;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 15px;
  color: #1A1A1A;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.totm-sm-address-fields input:focus,
.totm-sm-address-fields select:focus,
.totm-sm-address-fields textarea:focus,
.totm-sm-address-fields .select2-container--open .select2-selection--single {
  outline: none;
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}
/* Select2 inner alignment — WC's country dropdown uses Select2 which
   wraps the select in its own DOM. Match the same look as native
   inputs without redoing the whole Select2 theme. */
.totm-sm-address-fields .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding-left: 0 !important;
  padding-right: 14px !important;
  color: #1A1A1A !important;
}
.totm-sm-address-fields .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 8px !important;
}

/* Form-row layout — two-column grid for narrow fields, full-width for
   address lines / country. Sensible spacing between rows. */
.totm-sm-address-fields__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 18px;
}
.totm-sm-address-fields .form-row {
  margin: 0;
  padding: 0;
  width: auto !important;
  float: none !important;
}
/* Full-width rows — address lines, company, country, state, postcode,
   plus any explicit form-row-wide. */
.totm-sm-address-fields .form-row[id*="address_1"],
.totm-sm-address-fields .form-row[id*="address_2"],
.totm-sm-address-fields .form-row[id*="company"],
.totm-sm-address-fields .form-row[id*="country"],
.totm-sm-address-fields .form-row[id*="state"],
.totm-sm-address-fields .form-row[id*="city"],
.totm-sm-address-fields .form-row[id*="postcode"],
.totm-sm-address-fields .form-row[id*="email"],
.totm-sm-address-fields .form-row[id*="phone"],
.totm-sm-address-fields .form-row-wide,
.totm-sm-address-fields .form-row--wide {
  grid-column: 1 / -1;
}
@media (max-width: 539px) {
  .totm-sm-address-fields__wrapper {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .totm-sm-address-form__card {
    padding: 22px 18px;
  }
}

/* Save-address button spacing — same as account-details */
.totm-sm-address-form .totm-sm-form-actions {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #E8EAED;
}

/* GDPR data-request buttons are now <button> elements (not anchors) so
   the theme's global button styling fights with our ghost-button look.
   Lock down our intended styling with !important on the things the
   theme tends to override (background, border-radius, padding, arrow). */
html body button.totm-sm-privacy-actions__btn {
  appearance: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #0F6E56 !important;
  border-radius: 8px !important;
  color: #0F6E56 !important;
}
html body button.totm-sm-privacy-actions__btn:hover,
html body button.totm-sm-privacy-actions__btn:focus {
  background: #0F6E56 !important;
  background-color: #0F6E56 !important;
  color: #FFFFFF !important;
  outline: none !important;
}
html body button.totm-sm-privacy-actions__btn--danger {
  border-color: #C0512F !important;
  color: #C0512F !important;
}
html body button.totm-sm-privacy-actions__btn--danger:hover,
html body button.totm-sm-privacy-actions__btn--danger:focus {
  background: #C0512F !important;
  background-color: #C0512F !important;
  color: #FFFFFF !important;
}
html body button.totm-sm-privacy-actions__btn::after,
html body button.totm-sm-privacy-actions__btn::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
html body button.totm-sm-privacy-actions__btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed;
}

/* Inline "Request received" confirmation that replaces the row after
   a successful AJAX submission. Soft green to match the rest of the
   savings-style positive callouts. */
.totm-sm-privacy-actions__confirm {
  padding: 14px 16px;
  background: #E8F4F0;
  border: 1px solid #B7D9CD;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #0B5946;
}
.totm-sm-privacy-actions__confirm strong {
  color: #0F6E56;
  display: inline-block;
  margin-right: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   PENDING / FAILED ORDER — Pay now affordances
   The orders list and view-order page both surface a pay link when
   an order is sat in pending or failed status. Without these the
   customer has no way to complete payment once they leave the
   email's "Pay for your order" link behind.
   ───────────────────────────────────────────────────────────────── */

/* Per-row "Pay now" link in the orders list. Coral text so it stands
   out as the more urgent action vs the quieter View / Invoice links. */
.totm-sm-recent-orders__pay {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: #C0512F;
  border: 1px solid #C0512F;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.totm-sm-recent-orders__pay:hover,
.totm-sm-recent-orders__pay:focus {
  background: #A04527;
  border-color: #A04527;
  color: #FFFFFF;
  text-decoration: none;
}

/* View-order page banner — full-width above the order header, same
   visual weight as the dashboard's pending-payment banner. */
.totm-sm-order-view__pay-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin: 0 0 20px;
  background: #FDEFEA;
  border: 1px solid #C0512F;
  border-left: 5px solid #C0512F;
  border-radius: 10px;
  color: #5C2207;
}
.totm-sm-order-view__pay-banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.45;
  flex: 1 1 240px;
}
.totm-sm-order-view__pay-banner-body strong {
  font-size: 15px;
  color: #5C2207;
}
.totm-sm-order-view__pay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: #5C2207;
  border: 1px solid #5C2207;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.totm-sm-order-view__pay-cta:hover,
.totm-sm-order-view__pay-cta:focus {
  background: #421804;
  border-color: #421804;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 479px) {
  .totm-sm-recent-orders__pay {
    width: 100%;
    justify-content: center;
  }
  .totm-sm-order-view__pay-cta {
    width: 100%;
  }
}

/* ============================================================
   Mobile-only dashboard tidy-ups (Foundation `small` ≤ 639px).
   Scoped entirely inside this media query so desktop/tablet
   layouts are untouched.
   ============================================================ */
@media (max-width: 639px) {
  /* 1a. "Take a quick tour" + Logout share one row on mobile (rendered by
         account-nav.php as a flat .totm-sm-utilbar — NOT a nested Foundation
         grid, which kept indenting the row). It's a flex item inside the
         account-nav .grid-x, so flex-basis:100% makes it wrap onto its own
         full-width line; the outer .grid-container already provides the same
         page inset as the cards below, so tour-left / logout-right line up
         with the card edges. */
  .account-nav-bar .totm-sm-utilbar {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Logout-only variant (account pages without the tour pill): keep the lone
     logout right-aligned rather than space-between (which would push a single
     item to the left). Placed after the generic rule so it wins at equal
     specificity. */
  .account-nav-bar .totm-sm-utilbar--logout-only {
    justify-content: flex-end !important;
  }
  .account-nav-bar .totm-sm-utilbar .totm-sm-utilbar__logout {
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
  }

  /* 1b. Tighten the vertical rhythm so the loyalty card sits right under the
         tour/logout row. The theme's blanket `section { padding: 60px 0 }`
         is what created the big gaps; trim the nav bar's padding and the
         dashboard section's top padding on mobile only. */
  section.account-nav-bar {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
  }
  section.totm-block-account-page:not(.account-nav-bar) {
    padding-top: 6px !important;
  }

  /* 1c. Keep the tour pill compact + on one row wherever it renders. On mobile
         the theme forces account buttons to display:block / width:100%, which
         stacks the SVG icon above the label and stretches the pill. Re-assert
         the inline-flex pill in both possible parents (the desktop row, hidden
         on mobile, and the new nav-utility row). */
  html body .totm-sm-tour-trigger-row button.totm-sm-tour-trigger,
  html body .totm-sm-utilbar button.totm-sm-tour-trigger {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  html body .totm-sm-tour-trigger-row button.totm-sm-tour-trigger svg,
  html body .totm-sm-utilbar button.totm-sm-tour-trigger svg {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  html body .totm-sm-tour-trigger-row button.totm-sm-tour-trigger span,
  html body .totm-sm-utilbar button.totm-sm-tour-trigger span {
    display: inline-block !important;
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
  }

  /* 2. Subscription totals — let the Subtotal / Delivery / Total block
        span the full width of the card instead of floating in a narrow
        right-hand column. The inner .float-left / .float-right spans then
        push the labels and values to opposite edges across the whole card. */
  .total-sub.float-right {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    /* Contain the internal float-left/float-right spans (Subtotal/Total rows).
       Without this the block's height collapses around the floated spans, and
       the bottom row's clear:both then clears below the overflowing floats —
       which was the big empty gap above the "Edit subscription" button. */
    overflow: hidden !important;
  }
  /* Savings line + free-shipping nudge live inside the same block — make
     them span the full width too so they don't stay pinned to the old
     narrow column. */
  .total-sub.float-right .discount-name,
  .total-sub.float-right .totm-sm-free-ship-nudge {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 3. Subscription summary lines (Next delivery / Schedule / Delivery method)
        — drop the value onto its own line below the bold label so each label
        + value reads as a tidy two-line pair on narrow screens. Making the
        <b> label display:block pushes the inline value text that follows it
        onto the next line. */
  .next-shipment.all-subs-item-info > b {
    display: block;
    margin-bottom: 2px;
  }

  /* 4. Let the summary lines use the full card width on mobile. The theme
        constrains them on the my-subscriptions page
        (.woocommerce-subscriptions .next-shipment { width: 80% }), which made
        the longer "Delivery method" value wrap early. Match the dashboard
        (100%) so the text uses the full width before wrapping. */
  .woocommerce-subscriptions .next-shipment.all-subs-item-info,
  .next-shipment.all-subs-item-info {
    width: 100% !important;
  }

  /* 5. Management button row — on mobile, stack the three controls (discount
        code / edit products / manage subscription), centre them, and close
        the big gap above them. The `body` prefix raises specificity above the
        always-on desktop block (below, later in the file) so these win on
        mobile despite source order. */
  body .sub-coming-next .totm-sm-bottom-row--manage {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 8px 0 0 0 !important;
    padding: 8px 0 0 0 !important;
  }
  body .sub-coming-next .totm-sm-bottom-row--manage .sub-controls-right {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
  }
  /* All three controls: identical width, centred. The discount trigger sits a
     level up (direct child of the row) so it's capped + centred on its own;
     Edit Products + the manage wrapper fill the 320px-capped .sub-controls-right
     so every button lines up to the same width. text-align centres the labels. */
  body .sub-coming-next .totm-sm-bottom-row--manage > .totm-sm-discount-trigger {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  body .sub-coming-next .totm-sm-bottom-row--manage .sub-controls-right a,
  body .sub-coming-next .totm-sm-bottom-row--manage .sub-controls-right .totm-sm-manage-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
  }
  /* Full ancestor chain (+ body) so this out-specifies the desktop rule at
     `.sub-coming-next .totm-sm-bottom-row > .sub-controls-right >
     .totm-sm-manage-wrapper > .totm-sm-manage-toggle` (0,5,0), which forces
     width:auto and was keeping the Manage button narrower than the others. */
  body .sub-coming-next .totm-sm-bottom-row--manage .sub-controls-right .totm-sm-manage-wrapper .totm-sm-manage-toggle {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 6. Dashboard "Edit subscription" row on mobile: close the gap above it,
        stack the edit-lock note above a full-width button, and drop the
        clear:both (no float to clear now the totals are in-flow + contained).
        `body` prefix keeps these above the desktop rule's specificity. */
  body .totm-sm-bottom-row--end {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    clear: none !important;
    gap: 12px !important;
  }
  body .totm-sm-bottom-row--end .totm-sm-edit-lock {
    margin: 0 !important;
    text-align: center !important;
  }
  /* Full element+class chain (html body … a.add-addon.totm-sm-primary-btn)
     so this beats the green-button rule at
     `html body a.add-addon.totm-sm-primary-btn { width:auto !important }`
     (0,2,3) which was keeping the button auto-width. */
  html body .totm-sm-bottom-row--end a.add-addon.totm-sm-primary-btn,
  html body .totm-sm-bottom-row--end a.totm-sm-primary-btn,
  html body .totm-sm-bottom-row--end button.totm-sm-primary-btn {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Management button row — DESKTOP layout. Moved here from inline styles so
   the mobile media query above can restyle it (inline !important can't be
   overridden by a stylesheet). High specificity (.sub-coming-next prefix) so
   it beats the theme's .woocommerce-subscriptions .sub-controls-right rules. */
.sub-coming-next .totm-sm-bottom-row--manage {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px;
  margin: 48px 0 0 0 !important;
  padding: 20px 0 0 0 !important;
  clear: both;
}
.sub-coming-next .totm-sm-bottom-row--manage .sub-controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  float: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  height: 40px;
  clear: none !important;
}

/* "Edit subscription" / resume bottom row (--end variant) — DESKTOP top gap.
   Moved here from inline styles (dashboard) so the mobile media query above
   can tighten it. The my-subscriptions resume/pay rows keep their inline gap
   unless they're migrated too, so this only affects rows whose inline
   margin/padding has been removed. */
.totm-sm-bottom-row--end {
  margin: 48px 0 0 0 !important;
  padding: 20px 0 0 0 !important;
}