/* Phase 42D-6 — V3 cart supplement (VIP card, validation, cart-specific UX) */

/* VIP credits card */
.vip-credits-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #fff9e8, #f5fbe8);
  border: 1px solid #e8dfc0; margin-bottom: 16px;
}
.vip-credits-card.active { background: linear-gradient(135deg, #eef9e8, #fff); border-color: var(--green-soft); }
.vip-credits-ico { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.vip-credits-ico .ico { width: 20px; height: 20px; color: var(--green-dark); }
.vip-credits-copy b { display: block; font-size: 14px; font-weight: 600; }
.vip-credits-copy p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.hp-card { grid-template-columns: auto 1fr; }
.hp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; grid-column: 1 / -1; }
.hp-form input { width: 88px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.hp-use-prefix { font-size: 13px; font-weight: 600; }
.hp-points-eq { font-size: 12.5px; color: var(--muted); min-width: 8.5em; }
.hp-rule { grid-column: 1 / -1; font-size: 12px; margin: 8px 0 0; }
.hp-error { grid-column: 1 / -1; }
.hp-earn { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--green-dark); }
.hp-clear-form { grid-column: 1 / -1; margin: 0; }
.d-csum-earn { grid-column: 1 / -1; font-size: 12.5px; color: var(--green-dark); font-weight: 600; margin: 4px 0 0; }
.d-cosum-edit { margin: 6px 0 0; font-size: 12.5px; }
.coupon-label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 8px; }
.preview-note { font-size: 11px; margin-top: 10px; }
.cline-main { min-width: 0; padding-right: 6px; }
.cline { padding-top: 16px; padding-bottom: 16px; align-items: start; }
.cline .cmedia { width: 68px; height: 68px; border-radius: 12px; background: var(--green-softer); }
.cline .cmedia img { width: 86%; height: 86%; object-fit: contain; }
.cprice-detail { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; margin-top: 8px; }
.cprice-detail .cunit { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cprice-detail .sale-tag {
  color: #8a2d0f; background: #ffe6d8; border: 1px solid #ffc9af;
  font-weight: 700; border-radius: 999px; padding: 2px 7px; line-height: 1.2;
}
.cprice-detail .price-was { font-size: 11px; color: var(--muted); font-weight: 500; opacity: .9; text-decoration: line-through; }
.cmedia-ph { width: 36px; height: 36px; border-radius: 8px; background: var(--green-soft); }
.cart-flavour-form .flavour-select,
.cart-flavour-form .flavour,
.cart-flavour-form .fs-btn { max-width: 220px; width: 100%; }
.cart-flavour-form .fs-btn {
  min-height: 36px;
  margin-top: 6px;
}
/* DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 (Mark): the cart's loose-product flavour controls only — plain 500-weight text
   (v3-flavour-select.js renders no <b> inside .cart-flavour-form) and a caret that points down when closed, up when open.
   DG-HERO-CATALOG-CART-POLISH-30A: the pack flavour menu (.d-cpack-menu) shares the same option weight and size. */
.cart-flavour-form .fs-btn-txt,
.cart-flavour-form .fs-opt,
.d-cpack-menu .fs-opt { font-weight: 500; }
/* DG-CART-MINICART-POLISH-25 (Mark): the chosen flavour reads 13px, also its inner name element */
.cart-flavour-form .fs-btn-txt,
.cart-flavour-form .fs-btn-txt :is(b, .fs-name) { font-size: 13px; }
.cart-flavour-form .fs-btn-txt { color: var(--ink); }
.cart-flavour-form .fs-opt-main,
.d-cpack-menu .fs-opt-main { font-size: 14.5px; color: var(--ink); }
.cart-flavour-form .fs-btn.is-placeholder .fs-btn-txt { color: var(--muted); }
.cart-flavour-form .fs-caret { transform: rotate(90deg); }
.cart-flavour-form .flavour-select.open .fs-caret { transform: rotate(-90deg); }
/* DG-CART-DROPDOWN-SAFARI-COMBINED-24 (Mark): the chosen name keeps one line in the closed control (ellipsis when the button is
   too narrow; the full name stays the button's text and accessible name), photo and caret keep their size. The open list is
   as wide as its widest option (sized and placed by v3-flavour-select.js): every option keeps one line, with an ellipsis only
   when even the visible viewport is too narrow. */
.cart-flavour-form .fs-btn-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cart-flavour-form .fs-btn .fs-name,
.cart-flavour-form .fs-opt .fs-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cart-flavour-form .fs-btn .fs-thumb,
.cart-flavour-form .fs-caret { flex: none; }
.cart-flavour-form .fs-opt-main { min-width: 0; }
.cart-qty-update { font-size: 12px; padding: 4px 10px; min-height: 0; }
.cart-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; }
.cart-clear-inline { margin: 0; }
.cart-clear-btn { color: var(--muted); font-size: 13px; }
.cart-clear-btn:hover { color: var(--sale); }
.cline.is-saving { opacity: .72; }
.cline.is-saved { box-shadow: inset 3px 0 0 var(--green); }
.cline.is-error { box-shadow: inset 3px 0 0 var(--sale); }
.field-invalid input, .field-invalid select, .field-invalid textarea, .field-invalid .fs-btn {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important;
}
.field-msg.field-error { color: #b42318; font-size: 12px; margin: 4px 0 0; font-weight: 600; }
.toast.toast-error .ico { color: #ff8a80; }
.mc-flavour, .mc-unit { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.mc-total { display: block; font-size: 15px; font-weight: 700; color: var(--green-dark); text-align: right; }
.cart-qty-form { align-items: center; gap: 8px; }
.cart-qty-form .cart-qty-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cart-summary .secure-badges { margin-top: 14px; }
.cart-summary .secure-badges .pay-chip .ico { width: 13px; height: 13px; vertical-align: text-bottom; }
.cat-row-buy { display: grid; gap: 8px; }
.cat-row-buy .cart-ajax-message { margin: 0; font-size: 12px; }
.cat-row-buy .cart-ajax-error { text-align: left; }
.minicart .mc-item { align-items: start; }
.minicart .mc-actions { display: none; } /* 44D: actions moved into .mc-row + .mc-remove-btn */
.minicart .mc-price { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mc-extra { margin-bottom: 8px; }
.mc-extra[hidden],
.mc-extra:empty { display: none !important; margin: 0 !important; }
.mc-mini-note { margin: 0 0 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mc-mini-note .ico { width: 14px; height: 14px; color: var(--green-dark); }
.mc-trust { margin-top: 10px; }

@media (max-width: 640px) {
  .vip-credits-card { grid-template-columns: auto 1fr; }
  .vip-credits-form { grid-column: 1 / -1; width: 100%; }
  .cline { grid-template-columns: 58px 1fr; gap: 10px; }
  .cline .cright { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
  .cart-flavour-form .flavour-select,
  .cart-flavour-form .flavour,
  .cart-flavour-form .fs-btn { max-width: 100%; }
}

.cart-lines-wrap { position: relative; }
.cart-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: all;
  border-radius: inherit;
}
.cart-busy-overlay[hidden] { display: none !important; }
.cart-busy-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(47, 143, 39, 0.25);
  border-top-color: var(--green-dark, #2f8f27);
  animation: cart-busy-spin 0.7s linear infinite;
}
.cart-busy-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #5b6458);
}
.cart-lines-card.is-cart-busy {
  pointer-events: none;
}
@keyframes cart-busy-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-busy-dot { animation: none; }
}

.cline,
.mc-item {
  position: relative;
}
.line-busy-overlay,
.mc-item .line-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: inherit;
  pointer-events: all;
}
.line-busy-overlay[hidden] { display: none !important; }
.line-busy-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(47, 143, 39, 0.22);
  border-top-color: var(--green-dark, #2f8f27);
  animation: cart-busy-spin 0.7s linear infinite;
}
.hp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-use-max {
  border: 1.5px solid var(--line);
  background: #fff;
}

body.v3-storefront[data-v3-page="cart"] .d-osum-ship-meta {
  display: none;
}

body.v3-storefront[data-v3-page="cart"] button[name="vip_action"][value="max"] {
  font-size: 13px;
  padding: 8px 18px;
}

body.v3-storefront[data-v3-page="cart"] .vip-credits-card {
  position: relative;
}

body.v3-storefront[data-v3-page="cart"] .hp-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--berry);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

body.v3-storefront[data-v3-page="cart"] .hp-info-btn:hover,
body.v3-storefront[data-v3-page="cart"] .hp-info-btn:focus-visible {
  border-color: var(--berry);
  background: var(--berry-soft);
  outline: none;
}

body.v3-storefront[data-v3-page="cart"] .vip-credits-card .d-csum-earn {
  margin: 10px 0 0;
}
.hp-clear-link,
.hp-info-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hp-info-link {
  font-weight: 600;
  margin-left: 6px;
}
.hp-info-modal:not(.open) { display: none; }
.modal-overlay.hp-info-modal.open,
.hp-info-modal.open {
  display: grid;
  place-items: center;
  padding: 24px 20px;
}
.modal.hp-info-dialog,
.hp-info-dialog {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  max-height: min(86vh, 86dvh, 720px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.modal-body.hp-info-body,
.hp-info-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: min(86vh, 86dvh, 720px);
  margin: 0;
  padding: 0;
  text-align: left;
  grid-column: 1 / -1;
}
.hp-info-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hp-info-head {
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 28px 32px 16px;
  border-bottom: 1px solid var(--line);
}
.hp-info-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-softer, #e7f3e4);
  color: var(--green-dark);
}
.hp-info-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.hp-info-close {
  position: static;
  top: auto;
  right: auto;
  justify-self: end;
}
.hp-info-content {
  width: 100%;
  padding: 20px 32px 44px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}
.d-dialog-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.hp-info-section {
  margin: 0 0 16px;
}
.hp-info-section h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
}
.hp-info-section p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.hp-info-foot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px 32px 28px;
  border-top: 1px solid var(--line);
}
.hp-info-gotit {
  width: min(100%, 220px);
}
.payment-protected-notice-compact {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .hp-actions { width: 100%; flex-wrap: wrap; }
  .hp-info-modal.open { padding: 16px; }
  .hp-info-dialog { width: min(100%, calc(100vw - 32px)); }
  .hp-info-head,
  .hp-info-content,
  .hp-info-foot { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .line-busy-spinner,
  .checkout-loading-spinner,
  .checkout-loading-leaf,
  .checkout-loading-overlay:not([hidden]) { animation: none; }
  .d-dialog-fade { transition: none; }
}

/* PLT-SHARED-PORTAL-RUNTIME-01 — HerbaPoints card, every portal and every state.
   Row 1 is one compact header: icon · balance + value · help. Everything below it
   (redeem form, sale/coupon explanation, earnings callout, error) spans the full
   card width, so the sale/offer state — where the redeem form is not rendered —
   leaves no empty grid column or gap. */
.hp-card { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; }
body.v3-storefront[data-v3-page="cart"] .hp-card .hp-info-btn {
  position: static;
  align-self: center;
  flex: 0 0 auto;
}
.hp-card .hp-blocked-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink, #1b2a17);
  font-size: 12.5px;
  line-height: 1.45;
}
.hp-card .hp-blocked-note .ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--green-dark); }
.hp-card .d-csum-earn { grid-column: 1 / -1; }
body.v3-storefront[data-v3-page="cart"] .hp-card.hp-card--blocked .d-csum-earn {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--green-softer, #eef6ea);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .hp-card { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* PLT-SHARED-PORTAL-RUNTIME-01 — shared legal-readiness state on checkout/payment. */
body.v3-storefront[data-storefront="unified"] .d-legal-unready {
  margin: 0 0 18px;
}
body.v3-storefront[data-storefront="unified"] .d-legal-unready a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 part F — pack component flavour editor (V2 30 28/28A contract).
   DG-HERO-CATALOG-CART-POLISH-30A (Mark): the flavour reads as quiet green text with the shared caret; opening shows the
   same compact .fs-menu / .fs-opt menu as the standalone cart control (v3-storefront.css + the shared 500-weight rules
   above). The menu is position: fixed (placed by v3-cart-units.js below or above its control, under the sticky chrome)
   so the pack card's rounded overflow never clips it; long flavour names wrap. */
body.v3-storefront[data-storefront="unified"] .d-cpack-fs {
  min-width: 0;
  width: 75%;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  max-width: 100%;
  min-height: 24px;
  margin: 0 0 0 -4px;
  padding: 1px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--green-dark);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav-name {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: underline dotted color-mix(in srgb, var(--green-dark) 55%, transparent);
  text-underline-offset: 3px;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav .fs-caret {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: currentColor;
  transform: rotate(90deg);
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav .fs-caret svg {
  width: 14px;
  height: 14px;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav[aria-expanded="true"] .fs-caret { transform: rotate(-90deg); }
body.v3-storefront[data-storefront="unified"] .d-cpack-flav:hover { background: var(--green-softer); }
body.v3-storefront[data-storefront="unified"] .d-cpack-flav:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 1px;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-flav:disabled { cursor: default; opacity: .7; }
body.v3-storefront[data-storefront="unified"] .d-cpack-menu {
  position: fixed;
  z-index: 58;
  right: auto;
  display: block;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"] .d-cpack-menu[hidden] { display: none; }
body.v3-storefront[data-storefront="unified"] .d-cpack-menu .fs-opt:disabled { cursor: progress; opacity: .6; }
body.v3-storefront[data-storefront="unified"] .d-cpack-menu .fs-opt.is-choosing { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--green); }
body.v3-storefront[data-storefront="unified"] .d-cpack-editor-status { margin: 4px 12px 2px; font-size: 12px; color: var(--muted); }
body.v3-storefront[data-storefront="unified"] .d-cpack-editor-status:empty { display: none; }
body.v3-storefront[data-storefront="unified"] .d-cpack-editor-status.is-error { color: var(--d-status-fail, #a3160f); font-weight: 600; }
body.v3-storefront[data-storefront="unified"] .d-cpack-item.is-pending .d-cpack-editor-status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--green);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: d-cpack-spin .8s linear infinite;
}
@keyframes d-cpack-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"] .d-cpack-item.is-pending .d-cpack-editor-status::before { animation: none; }
}
@media (max-width: 640px) {
  body.v3-storefront[data-storefront="unified"] .d-cpack-flav { min-height: 32px; font-size: 13px; }
  body.v3-storefront[data-storefront="unified"] .d-cpack-menu .fs-opt { min-height: 44px; }
}
/* phone page content renders at the canonical 0.95 zoom (v3-mobile-compact.css): 47px keeps a ≥ 44px visual tap target */
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .d-cpack-menu .fs-opt { min-height: 47px; }
}

/* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark) — the cart page's pack card in the minicart pack's soft look (.minicart .d-mc-pack,
   v3-design-overrides.css): the same 2px green edge, the light green surface and ink text instead of the dark green head with
   white text; name, price, was price, saving, reference amount and the remove / quantity controls read in the minicart's ink
   and green. Layout, the foldable contents, spacing and every behaviour stay; the minicart itself is not restyled. */
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack {
  border-color: var(--d-green-700);
  background: var(--green-softer);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-head {
  background: none;
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack :is(.d-cpack-name, .d-cpack-name-link) {
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-tag {
  color: var(--green-dark);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack :is(.d-cpack-note, .d-cpack-was) {
  color: var(--muted);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack :is(.d-cpack-controls .d-cline-remove, .d-cpack-qtystatic) {
  color: var(--muted);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-controls .d-cline-remove:hover {
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-money .d-cline-total {
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-money .d-cline-save {
  color: var(--green-dark);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-head :is(.d-sellref, .d-sellref-amount) {
  color: var(--muted);
}
body.v3-storefront[data-storefront="unified"] .pack-group.d-cpack .d-cpack-body {
  background: none;
}

/* ==========================================================================
   DG-CHECKOUT-CALM-SHELL-22 (Mark) — one calm checkout shell for the unified cart, address and payment pages.
   Presentation only; the shell markup is decided in partials/v3/header.php (#site-header.v3-header-cluster--checkout,
   data-checkout-shell = cart | address | payment | result). This file loads before the design layers, so every rule
   below carries its own higher specificity (html + body family + scope) instead of !important.
   ========================================================================== */

/* --- A. Desktop / tablet header: the step's own back link first in the menu, a hairline after it. */
html body.v3-storefront[data-storefront="unified"] .nav-desktop a.v3-co-back {
  color: var(--muted);
}
html body.v3-storefront[data-storefront="unified"] .nav-desktop a.v3-co-back:hover {
  color: var(--green-dark);
}
html body.v3-storefront[data-storefront="unified"] .nav-desktop a.v3-co-back .v3-co-back-ico {
  display: block;
}
html body.v3-storefront[data-storefront="unified"] #site-header .v3-co-back-ico {
  transform: rotate(180deg);
}
/* No category row in the shell: the calm bar is a phone-only element, never the tablet "fit" fallback, and the sticky
   offsets below the header do not reserve a category row height. */
@media (min-width: 721px) {
  html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar {
    display: none;
  }
  /* The menu (with the back link first) sits right after the logo on every step, also when it holds only two or three
     links; the logo link no longer stretches over the empty row. */
  html body.v3-storefront[data-storefront="unified"] #site-header.v3-header-cluster--checkout .site-header .brand {
    flex: 0 1 auto;
  }
  html body.v3-storefront[data-storefront="unified"] #site-header.v3-header-cluster--checkout .header-actions {
    margin-left: auto;
  }
  /* FIX01 (Mark): the usual storefront top-bar shadow under the visible header (the same value the berry category bar /
     phone dock carry; on the phone the shell bar already has it from that dock rule). Bottom only (negative spread). */
  html body.v3-storefront[data-storefront="unified"] #site-header.v3-header-cluster--checkout > .site-header {
    box-shadow: 0 10px 22px -12px rgba(107, 15, 77, 0.78), 0 3px 8px -3px rgba(64, 8, 46, 0.32);
  }
  html:has(#site-header.v3-header-cluster--checkout) {
    --catbar-h: 0px;
  }
}

/* --- B. Phones: one calm bar (menu left, "Back to home" right); the brand row and the search band are not shown. */
html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar > .container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--berry-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home .v3-co-back-ico,
html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home .ico {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}
html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-nojs {
  display: inline-flex;
  gap: 14px;
  margin-left: 8px;
  font-size: 15px;
  font-weight: 700;
}
@media (max-width: 720px) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #site-header.v3-header-cluster--checkout > .site-header,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #site-header.v3-header-cluster--checkout > .searchbar {
    display: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home {
    color: #fff;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
  }
}
@media (hover: hover) and (max-width: 720px) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}
@media (max-width: 340px) {
  html body.v3-storefront[data-storefront="unified"] #v3-cat-select.v3-co-bar .v3-co-home {
    padding: 0 8px;
    font-size: 14px;
  }
}

/* --- C. Cart: the delivery cue is its own quiet block under the summary card (same element and state classes). */
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-ship {
  margin-top: -2px;
  border: 1px solid var(--line);
}
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-ship.d-csum-ship-on {
  border-color: var(--green-soft);
}
/* DG-DELIVERY-CLARITY-CART-24 (V10 copy) + DG-DELIVERY-PROGRESS-PRESENTATION-24 (Mark) — the one delivery block, right after the
   summary card in the DOM: under the card in the two-column cart, FIRST in the side column once the cart stacks (the same
   max-width 1000px as the basket grid). It holds no control, so the visual order does not change any focus order.
   DG-SHIPPING-CARD-PAY-LABELS-24 (Mark): it is the drawer's green shipping card (.d-ship-card, v3-design-overrides.css); only
   the side-column placement lives here. */
/* DG-CART-MINICART-POLISH-25 (Mark): the card's own 10px padding */
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-dlv.d-ship-card {
  display: grid;
  margin: 0;
  padding: 10px;
  border: 1px solid #cfe3c4;
  border-radius: 14px;
  background: var(--green-softer);
  color: var(--green-dark);
}
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-dlv[hidden] {
  display: none;
}
@media (max-width: 1000px) {
  html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-dlv {
    order: -1;
  }
}
body.v3-storefront[data-storefront="unified"] .d-csum-dlv.is-pending {
  opacity: 0.6;
}
/* The Starter Set threshold line is not shown on the cart (the partial keeps it for its other consumers). */
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-skit-goal {
  display: none;
}

/* --- D. Compact HerbaPoints card: light surface, small icon, quiet ? control, no inner panels. */
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .vip-credits-card.hp-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  margin-bottom: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--d-surface-quiet, #f7f8f5);
  box-shadow: none;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .vip-credits-card.hp-card.active {
  border-color: var(--green-soft);
}
/* DG-CART-COMPACT-PACKS-25 (Mark): on its own in the cart side column (outside the summary card) it reads as a card there. */
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cart-side > .d-csum-coupon .vip-credits-card.hp-card {
  background: var(--card, #fff);
  box-shadow: var(--shadow-sm);
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .vip-credits-ico {
  align-self: start;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .vip-credits-ico .ico {
  width: 18px;
  height: 18px;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .vip-credits-copy b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .vip-credits-copy p {
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1b2a17);
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-info-btn {
  position: static;
  align-self: center;
  width: 24px;
  height: 24px;
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-info-btn:hover,
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-info-btn:focus-visible {
  border-color: var(--green-dark);
  background: #fff;
  color: var(--green-dark);
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-info-btn:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}
/* The server reason: compact text with its small info icon, no filled panel; never clamped. */
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-blocked-note {
  gap: 7px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-blocked-note .ico {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--muted);
}
/* The earn preview: one small closing line with a quiet green accent. */
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .d-csum-earn,
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card.hp-card--blocked .d-csum-earn {
  margin: 0;
  padding: 0 0 0 9px;
  border-left: 2px solid var(--green, #3fa535);
  border-radius: 0;
  background: none;
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-form {
  margin-top: 2px;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .hp-blocked-note,
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .hp-card .d-csum-earn {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}

/* --- F. FIX02 (Mark): the checkout footer keeps the normal footer (USPs, logo, intro, payment marks, legal line); only
   the menus go. Brand block | Contact (this portal's address + email) | Policies; phones stack as usual. */
html body.v3-storefront[data-storefront="unified"] .footer-grid.footer-grid--discover.footer-grid--checkout {
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 960px) {
  html body.v3-storefront[data-storefront="unified"] .footer-grid.footer-grid--discover.footer-grid--checkout {
    grid-template-columns: 1fr 1fr;
  }
  html body.v3-storefront[data-storefront="unified"] .footer-grid.footer-grid--checkout > .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  html body.v3-storefront[data-storefront="unified"] .footer-grid.footer-grid--discover.footer-grid--checkout {
    grid-template-columns: 1fr;
  }
}
html body.v3-storefront[data-storefront="unified"] .footer-grid--checkout .d-foot-contact address {
  margin: 0 0 6px;
  padding: 4px 0;
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* --- E. Spacing on the three step pages, the summary total weight, the payment help links. */
/* DG-CART-MINICART-POLISH-25 (Mark): margin-top 20px (was 0) */
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .breadcrumb {
  margin-top: 20px;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .page-head {
  margin-top: 30px;
}
html body.v3-storefront[data-storefront="unified"]:is([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) .cstep {
  margin: 20px 0 36px; /* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): was 6px 0 36px */
}
html body.v3-storefront[data-storefront="unified"] .d-csum-total,
html body.v3-storefront[data-storefront="unified"] .d-csum-total strong {
  font-weight: 700;
}
/* FIX03 (Mark): one control row — the shared WhatsApp button, the contact-form link right after it (wrapping when narrow;
   stacked on phones) — then the one separate line. A new wrapper, so the old .d-pay-help-actions pill rules never apply. */
html body.v3-storefront .d-pay-help .d-pay-help-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 4px 0 4px; /* DG-PAYMENT-HELP-SPACING-23 (Mark): was 4px 0 12px */
}
html body.v3-storefront .d-pay-help .d-pay-help-ctas .d-cta-whatsapp {
  min-height: 44px;
}
html body.v3-storefront .d-pay-help .d-pay-help-ctas .d-pay-help-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px; /* DG-PAYMENT-HELP-SPACING-23 (Mark) */
}
@media (max-width: 720px) {
  html body.v3-storefront .d-pay-help .d-pay-help-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  html body.v3-storefront .d-pay-help .d-pay-help-ctas .d-pay-help-link {
    margin-top: 10px;
  }
}
html body.v3-storefront .d-pay-help .d-pay-help-link {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body.v3-storefront .d-pay-help .d-pay-help-link:hover {
  color: var(--berry);
}
html body.v3-storefront .d-pay-help .d-pay-help-link:focus-visible {
  outline: 2px solid var(--berry, #8e1566);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Mark24Oct direct: checkout uses its in-page buttons, without a floating mobile CTA.
   DG-CART-COMPACT-PACKS-25 (Mark): the cart's own phone bar is back (cart only), so this applies to checkout alone. */
html body.v3-storefront[data-storefront="unified"][data-v3-page="checkout"] .d-mcta {
  display: none;
}
html body.v3-storefront.has-d-mcta[data-storefront="unified"][data-v3-page="checkout"] {
  padding-bottom: 0;
}
/* DG-DETAIL-CART-MOTION-26 G (Mark): the one exception is the address step's bar for a customer with a proven paid order
   (rendered only then, [data-cta-paid-returning]): on phones it is the cart page's bar again, with its page clearance. */
@media (max-width: 720px) {
  html body.v3-storefront[data-storefront="unified"][data-v3-page="checkout"] .d-mcta[data-checkout-cta-bar][data-cta-paid-returning]:not([hidden]) {
    display: block;
  }
  html body.v3-storefront.has-d-mcta[data-storefront="unified"][data-v3-page="checkout"]:has(.d-mcta[data-cta-paid-returning]:not([hidden])) {
    padding-bottom: var(--v2-mcta-h, 76px);
  }
}

/* Mark25Oct: hide the extra empty-cart links on the cart page in every cart state. */
html body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-cempty-links {
  display: none;
}