/* 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; }
.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; }
.cart-flavour-form .fs-btn-txt { font-size: 15px; 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); }
.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;
}
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; }
}