/* ==========================================================================
   Opsi E · e-woo.css: WooCommerce screens (cart, checkout, order received, order pay,
   My Account) and the DOKU card result screens.

   CSS ONLY on WooCommerce's real markup. Never moves, hides or reorders Blocks markup or the
   modules that hook into it:
     - payment groups      details.bloomlab-payment-group (restyled, never hidden)
     - JNE picker          #bloomlab-jne-flow-b-host + locked #shipping-city / #shipping-state:
                           NO opacity / pointer-events rules anywhere in this file
     - inline qty edit     .blab-qty-* in the ONE order-summary list (layout rules stay in
                           bloomlab-shop-styles.css, which loads before this file)
     - phone check         first input[autocomplete=tel]; field order untouched (no `order`,
                           no grid-area on address fields)
     - BLCRM autofill      ul.blcrm-autofill-list under #email: nothing here clips the contact step
     - notices / errors    always visible
   Loads after wc-blocks-style and bloomlab-shop-styles, so its teal !important button rules are
   overridden here deliberately (higher specificity + !important).
   e.css resets (lists, headings 400, p margin 0, button reset, img block) apply on these pages:
   what WooCommerce needs back is restored inside this file's scope.

   Sections:
     1. page shell (TT5 template, title, notices)       5. order received (+ "Langkah berikutnya")
     2. shared Woo controls (inputs, buttons, prices)   6. order pay (classic form)
     3. cart                                            7. My Account (from the design ref ex.css §7)
     4. checkout                                        8. DOKU result screens (ex.css §8)
   ========================================================================== */

/* ---------- 1. page shell ---------- */
/* cart, checkout, order received, order pay (My Account has its own shell in section 7) */
body.e-woo:not(.woocommerce-account) main.wp-block-group { margin-top: 0 !important; padding: clamp(22px, 3.4vw, 44px) 0 clamp(56px, 7vw, 96px) !important; background: var(--paper); }
body.e-woo:not(.woocommerce-account) main.wp-block-group > * { box-sizing: border-box; max-width: var(--wrap) !important; margin-inline: auto !important; padding-inline: var(--gut) !important; }
body.e-woo:not(.woocommerce-account) main.wp-block-group .wp-block-post-content > * { max-width: none !important; margin-inline: 0 !important; }
body.e-woo .wp-block-post-title {
  margin-block: 0 clamp(18px, 2.6vw, 30px) !important; font: 380 clamp(34px, 4.2vw, 52px)/1.04 var(--f-display); letter-spacing: -.025em; color: var(--ink);
}
/* the announcement strip is noise at the last steps of the funnel (same rule as the DOKU screens) */
body.e-woo-checkout .e-bar, body.e-woo-pay .e-bar, body.bldc-status-page .e-bar { display: none !important; }

/* notices (Blocks banners + classic): restyled, never hidden or clipped */
body.e-woo .wc-block-store-notices { margin-bottom: 18px !important; }
body.e-woo .wc-block-components-notice-banner {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent;
  font: 600 14.5px/1.5 var(--f-body); color: var(--ink); background: var(--white);
}
body.e-woo .wc-block-components-notice-banner:focus, body.e-woo .wc-block-components-notice-banner:focus-visible { outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px; }
body.e-woo .wc-block-components-notice-banner > svg { flex: none; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: currentColor; fill: var(--white); }
body.e-woo .wc-block-components-notice-banner.is-success { background: color-mix(in srgb, var(--teal) 10%, var(--white)); border-color: color-mix(in srgb, var(--teal) 28%, var(--white)); color: #0E5154; }
body.e-woo .wc-block-components-notice-banner.is-error { background: color-mix(in srgb, var(--coral) 11%, var(--white)); border-color: color-mix(in srgb, var(--coral) 38%, var(--white)); color: #8A2911; }
body.e-woo .wc-block-components-notice-banner.is-info, body.e-woo .wc-block-components-notice-banner.is-warning { background: color-mix(in srgb, var(--aqua) 12%, var(--white)); border-color: color-mix(in srgb, var(--aqua) 34%, var(--white)); }
body.e-woo .wc-block-components-notice-banner__content { flex: 1; min-width: 0; color: inherit; overflow-wrap: anywhere; }
body.e-woo .wc-block-components-notice-banner__content ul { list-style: disc; padding-left: 18px; }
body.e-woo .wc-block-components-notice-banner__content .wc-forward,
body.e-woo .wc-block-components-notice-banner__content a.button {
  float: none !important; display: inline !important; min-height: 0 !important; margin: 0 0 0 8px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
  color: inherit !important; font: 700 14px/1.5 var(--f-body) !important; text-decoration: underline !important; text-underline-offset: 4px; opacity: 1 !important;
}
/* classic notices (order pay, account) */
body.e-woo .woocommerce-message, body.e-woo .woocommerce-info, body.e-woo .woocommerce-error { border-radius: 14px; }

/* ---------- 2. shared Woo controls ---------- */
/* e.css `.price` is the landing-page display price: Woo uses .price for line prices */
body.e-woo .wc-block-components-product-price, body.e-woo .woocommerce .price {
  margin: 0; font: inherit; letter-spacing: normal; white-space: normal;
}
body.e-woo .wc-block-formatted-money-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.e-woo .woocommerce-Price-currencySymbol { margin-right: .14em; }
body.e-woo .wc-block-components-product-price del { color: var(--muted); font-weight: 500; font-size: .88em; }
body.e-woo .wc-block-components-product-price ins { text-decoration: none; }

/* buttons: the primary actions become the coral pill (replaces the legacy teal !important block) */
body.e-design.e-woo .wc-block-components-button.contained,
body.e-design.e-woo .wc-block-cart__submit-button,
body.e-design.e-woo a.wc-block-cart__submit-button.wp-element-button,
body.e-design.e-woo .wc-block-checkout .wc-block-components-checkout-place-order-button,
body.e-design.e-woo .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .6em; min-height: 54px; width: 100%;
  padding: 14px 26px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--coral) !important; color: var(--on-coral) !important; font: 700 16.5px/1.2 var(--f-body) !important; letter-spacing: .005em;
  text-decoration: none !important; box-shadow: 0 14px 30px -14px rgba(245, 114, 81, .9); transform: none; transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}
body.e-design.e-woo .wc-block-components-button.contained:hover,
body.e-design.e-woo .wc-block-cart__submit-button:hover,
body.e-design.e-woo .wc-block-checkout .wc-block-components-checkout-place-order-button:hover { background: var(--coral-2) !important; transform: none; }
body.e-design.e-woo .wc-block-components-button.contained:active { transform: scale(.98); }
body.e-design.e-woo .wc-block-components-button.contained:disabled,
body.e-design.e-woo .wc-block-components-button.contained[aria-disabled="true"] { box-shadow: none; }
body.e-woo .wc-block-components-button__text { font: inherit; color: inherit; }
/* secondary Woo buttons (coupon Apply, outlined): ink, not coral; they were teal pills */
body.e-design.e-woo .wc-block-components-totals-coupon__button,
body.e-design.e-woo .wc-block-components-button.outlined,
body.e-design.e-woo .wc-block-cart .wc-block-components-totals-coupon__button {
  width: auto; min-height: 48px; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; background: var(--ink) !important; color: var(--paper) !important;
  font: 700 14.5px/1 var(--f-body) !important; box-shadow: none !important; transform: none;
}
body.e-design.e-woo .wc-block-components-totals-coupon__button:hover { background: #0C2F32 !important; }

/* text inputs and selects (Blocks floating labels keep working: only borders, radius, colours) */
body.e-woo .wc-block-components-text-input input[type],
body.e-woo .wc-block-components-text-input textarea,
body.e-woo .wc-blocks-components-select .wc-blocks-components-select__select,
body.e-woo .wc-block-components-textarea,
body.e-woo .wc-block-components-totals-coupon__input input {
  border: 1.5px solid var(--line-2) !important; border-radius: 12px !important; background-color: var(--white); color: var(--ink) !important;
  font-family: var(--f-body) !important; font-size: 16px !important; box-shadow: none;
}
body.e-woo .wc-block-components-text-input input[type]:focus,
body.e-woo .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body.e-woo .wc-block-components-textarea:focus {
  border-color: var(--teal) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 30%, transparent) !important; outline: none;
}
body.e-woo .wc-block-components-text-input label,
body.e-woo .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--muted); font-family: var(--f-body); }
body.e-woo .wc-block-components-text-input.has-error input[type],
body.e-woo .wc-block-components-text-input input[aria-invalid="true"],
body.e-woo .wc-blocks-components-select.has-error .wc-blocks-components-select__select { border-color: var(--coral-2) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 20%, transparent) !important; }
body.e-woo .wc-block-components-validation-error { color: #9A2D12; font-weight: 600; }
body.e-woo .wc-block-components-validation-error > p { margin: 4px 0 0; }
/* the JNE-locked City/Province: a calm "filled in for you" tint. Background only: the module's
   inline opacity/pointer-events lock stays untouched. */
body.e-woo input[data-bloomlab-jne-locked="1"] { background-color: var(--cream) !important; }

/* checkboxes / radios */
body.e-woo .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--white); }
body.e-woo .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
body.e-woo .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--white); }
body.e-woo .wc-block-components-checkbox label { align-items: flex-start; }
body.e-woo .wc-block-components-checkbox__label { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
body.e-woo .wc-block-components-radio-control__input { border: 2px solid var(--line-2) !important; background: var(--white); }
body.e-woo .wc-block-components-radio-control__input:checked { border-color: var(--ink) !important; }
body.e-woo .wc-block-components-radio-control__input:checked::before { background: var(--ink) !important; }

/* quantity selector (cart) → the .sx-qty pill */
body.e-woo .wc-block-components-quantity-selector {
  display: inline-flex; align-items: center; width: auto; min-width: 0; height: 40px; margin: 0; border: 1.5px solid var(--line-2) !important; border-radius: 99px !important; background: var(--white); overflow: hidden;
}
body.e-woo .wc-block-components-quantity-selector::after { display: none; }
body.e-woo .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  order: 0; width: 34px; min-width: 34px; height: 100%; padding: 0; border: 0 !important; background: none; box-shadow: none !important; color: var(--ink); font: 700 16px/1 var(--f-body); text-align: center;
}
body.e-woo .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  width: 38px; min-width: 38px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 0; background: none; color: var(--ink); font: 500 19px/1 var(--f-body); opacity: 1; cursor: pointer;
}
body.e-woo .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--cream); }
body.e-woo .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: var(--line-2); }

/* totals rows (cart sidebar, checkout summary) → .sx-sum */
body.e-woo .wc-block-components-totals-wrapper { padding: 14px 0; border-top: 1px solid var(--line) !important; }
body.e-woo .wc-block-components-totals-wrapper:empty { display: none; }
body.e-woo .wc-block-components-totals-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 0; font-size: 14.5px; color: var(--ink-2); }
body.e-woo .wc-block-components-totals-item + .wc-block-components-totals-item { margin-top: 9px; }
body.e-woo .wc-block-components-totals-item__label { color: var(--ink-2); flex: 1 1 auto; min-width: 0; }
body.e-woo .wc-block-components-totals-item__value { font-weight: 700; color: var(--ink); text-align: right; margin-left: auto; }
body.e-woo .wc-block-components-totals-item__description { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
body.e-woo .wc-block-components-totals-item__description p { margin: 2px 0 0; }
body.e-woo .wc-block-components-totals-footer-item { align-items: baseline; }
body.e-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700; color: var(--ink); font-size: 15.5px; }
body.e-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.e-woo .wc-block-components-totals-footer-item-tax-value { font: 400 30px/1 var(--f-display) !important; letter-spacing: -.02em; color: var(--ink); }
body.e-woo .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item) { border-top: 1px solid var(--ink) !important; }
body.e-woo .wc-block-components-shipping-placeholder__value, body.e-woo .wc-block-components-totals-shipping__via { font-weight: 600; color: var(--muted); font-size: 13.5px; }
/* coupon panel → .sx-coupon */
body.e-woo .wc-block-components-totals-coupon .wc-block-components-panel__button,
body.e-woo .wc-block-components-panel__button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 2px 0; border: 0; background: none; color: var(--ink);
  font: 700 14.5px/1.4 var(--f-body); cursor: pointer; text-decoration: underline; text-decoration-color: var(--aqua); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
body.e-woo .wc-block-components-panel__button-icon { fill: var(--ink-2); }
body.e-woo .wc-block-components-totals-coupon__form { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
body.e-woo .wc-block-components-totals-coupon__form .wc-block-components-text-input { flex: 1 1 auto; margin: 0; }
body.e-woo .wc-block-components-chip, body.e-woo .wc-block-components-totals-discount__coupon-list-item {
  border-radius: 99px; background: color-mix(in srgb, var(--teal) 12%, var(--white)); color: var(--teal); border: 0; font: 700 12px/1 var(--f-mono); letter-spacing: .04em;
}

/* ---------- 3. cart ---------- */
body.e-woo-cart .wc-block-cart { gap: 0; }
body.e-woo-cart .wp-block-woocommerce-cart.alignwide { margin: 0 !important; }
/* Layout: WooCommerce's own sidebar layout (flex + its container-query classes) is kept as is.
   Never hide or re-grid its children: the empty first <div> is Woo's resize listener, which decides
   the mobile layout (and with it where the order summary and the JNE picker's slot render). */
body.e-woo-cart .wc-block-components-sidebar-layout { margin: 0 !important; align-items: flex-start; }
body.e-woo-cart .wc-block-components-main, body.e-woo-cart .wc-block-components-sidebar { min-width: 0; }
body.e-woo-cart .wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-sidebar { margin-top: 22px; }
/* line items: the table becomes a list of .sx-line cards (table semantics kept) */
body.e-woo-cart table.wc-block-cart-items { display: block; width: 100%; margin: 0; border: 0; border-collapse: separate; }
body.e-woo-cart table.wc-block-cart-items thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.e-woo-cart table.wc-block-cart-items tbody { display: grid; gap: 12px; }
body.e-woo-cart .wc-block-cart-items__row {
  display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px 14px; align-items: start; padding: 14px !important;
  border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line) !important; box-shadow: var(--sh-1);
}
body.e-woo-cart .wc-block-cart-items__row > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
body.e-woo-cart .wc-block-cart-item__image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 76px !important; }
body.e-woo-cart .wc-block-cart-item__product { grid-column: 2 !important; grid-row: 1 !important; }
body.e-woo-cart .wc-block-cart-item__image a { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 14px; background: var(--cream); overflow: hidden; }
body.e-woo-cart .wc-block-cart-item__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
body.e-woo-cart .wc-block-cart-item__wrap { display: grid; gap: 4px; justify-items: start; }
body.e-woo-cart .wc-block-cart-item__product .wc-block-components-product-name {
  color: var(--ink); font: 700 16px/1.3 var(--f-body); text-decoration: none; max-width: 100%;
}
body.e-woo-cart .wc-block-cart-item__product .wc-block-components-product-name:hover { text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 4px; }
body.e-woo-cart .wc-block-cart-item__prices { font: 500 13.5px/1.4 var(--f-mono); color: var(--ink-2); }
body.e-woo-cart .wc-block-components-product-metadata { font-size: 13px; line-height: 1.5; color: var(--muted); }
body.e-woo-cart .wc-block-components-product-metadata p { margin: 0; }
body.e-woo-cart .wc-block-components-product-badge, body.e-woo-cart .wc-block-components-sale-badge {
  border: 0; border-radius: 6px; background: color-mix(in srgb, var(--coral) 16%, var(--white)); color: #9A2D12; font: 700 10.5px/1 var(--f-mono); letter-spacing: .06em; padding: 4px 7px;
}
body.e-woo-cart .wc-block-cart-item__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
body.e-woo-cart .wc-block-cart-item__remove-link {
  display: inline-grid !important; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--muted) !important; cursor: pointer; font-size: 13px;
}
body.e-woo-cart .wc-block-cart-item__remove-link:hover { background: var(--cream); color: #9A2D12 !important; }
body.e-woo-cart .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; fill: currentColor; }
body.e-woo-cart .wc-block-cart-item__total { position: static !important; grid-column: 2 !important; grid-row: 2 !important; text-align: left !important; font: 700 16px/1.3 var(--f-body); color: var(--ink); }
body.e-woo-cart .wc-block-cart-item__total .wc-block-components-product-price { font: inherit; }
body.e-woo-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-start; }
@media (min-width: 640px) {
  body.e-woo-cart .wc-block-cart-items__row { grid-template-columns: 84px minmax(0, 1fr) auto !important; align-items: center; }
  body.e-woo-cart .wc-block-cart-item__image, body.e-woo-cart .wc-block-cart-item__image a { width: 84px !important; height: 84px; }
  body.e-woo-cart .wc-block-cart-item__image { grid-row: 1 !important; }
  body.e-woo-cart .wc-block-cart-item__total { grid-column: 3 !important; grid-row: 1 !important; text-align: right !important; min-width: 110px; }
  body.e-woo-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { justify-content: flex-end; }
}
/* totals sidebar → .sx-card "Ringkasan" */
body.e-woo-cart .wc-block-cart__sidebar {
  padding: clamp(18px, 2.4vw, 26px) !important; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
@media (min-width: 960px) { body.e-woo-cart .wc-block-cart__sidebar { position: sticky; top: calc(var(--head-h) + 18px); } }
body.e-woo-cart .wc-block-cart__totals-title {
  display: block !important; margin: 0 0 6px !important; padding: 0 !important; font: 400 26px/1.1 var(--f-display) !important; letter-spacing: -.015em; text-transform: none !important; color: var(--ink); text-align: left;
}
body.e-woo-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-of-type { border-top: 0 !important; }
body.e-woo-cart .wc-block-cart__submit { margin: 18px 0 0 !important; }
body.e-woo-cart .wc-block-cart__submit-container { padding: 0 !important; background: none !important; box-shadow: none !important; }
body.e-woo-cart .wc-block-cart__payment-options:empty { display: none; }
/* phones: Woo pins the checkout button to the bottom; keep it clear of the WhatsApp bubble */
@media (max-width: 781px) {
  body.e-woo-cart .wc-block-cart__submit-container--sticky { padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)) !important; padding-right: 90px !important; background: color-mix(in srgb, var(--paper) 94%, transparent) !important; border-top: 1px solid var(--line); }
}
/* cross-sells ("Sering dibeli bareng") */
body.e-woo-cart .wp-block-woocommerce-product-collection { margin-top: 28px; }
body.e-woo-cart .wp-block-woocommerce-product-collection h2 { font: 400 26px/1.15 var(--f-display); margin: 0 0 14px !important; }
body.e-woo-cart .wp-block-woocommerce-product-collection img { border-radius: 14px; }
/* empty cart */
body.e-woo-cart .wp-block-woocommerce-empty-cart-block { display: grid; gap: 18px; justify-items: start; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: var(--white); border: 1px dashed var(--line-2); }
body.e-woo-cart .wc-block-cart__empty-cart__title { margin: 0 !important; text-align: left !important; font: 400 clamp(26px, 3vw, 36px)/1.1 var(--f-display) !important; letter-spacing: -.02em; color: var(--ink); }
body.e-woo-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.e-cart-empty { display: grid; gap: 18px; justify-items: start; width: 100%; }
.e-cart-empty-lede { font-size: 17px; color: var(--ink-2); }
.e-cart-empty .btn { color: var(--on-coral); }
.e-cart-empty-list { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
@media (min-width: 640px) { .e-cart-empty-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .e-cart-empty-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.e-cart-empty-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--p) 10%, var(--paper)); transition: background .2s; }
.e-cart-empty-list a:hover { background: color-mix(in srgb, var(--p) 22%, var(--paper)); }
.e-cart-empty-list img { width: 54px; height: 50px; object-fit: contain; border-radius: 8px; flex: none; }
.e-cart-empty-list b { display: block; font: 400 20px/1.1 var(--f-display); }
.e-cart-empty-list .mono { font-size: 10.5px; color: var(--ink-2); }

/* free-shipping + Bloom360 bonus (e-woo-bonus.js, display only; the mockup's .sx-meter + .sx-sum-bonus) */
body.e-woo #e-b360-meter-host { margin-top: 12px; }
body.e-woo .e-b360-meter { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--sh-1); display: grid; gap: 14px; min-width: 0; }
body.e-woo .wc-block-components-sidebar .e-b360-meter { margin-top: 14px; padding: 16px; box-shadow: none; }
body.e-woo .sx-meter { display: grid; gap: 8px; }
body.e-woo .sx-meter-track { position: relative; height: 8px; border-radius: 99px; background: var(--cream); }
body.e-woo .sx-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--aqua), var(--teal)); transition: width .45s var(--ease); }
body.e-woo .sx-ms { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-2); transition: background .3s, border-color .3s, transform .3s var(--ease); }
body.e-woo .sx-ms:last-of-type { margin-left: -14px; }
body.e-woo .sx-ms.on { background: var(--teal); border-color: var(--teal); transform: scale(1.12); }
body.e-woo .sx-meter-msg { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
body.e-woo .sx-meter-msg b { color: var(--ink); }
body.e-woo .sx-sum-bonus .wc-block-components-totals-item__label, body.e-woo .sx-sum-bonus .wc-block-components-totals-item__value { color: var(--teal); }
body.e-woo .sx-sum-bonus .wc-block-components-totals-item__label { font-weight: 600; }
body.e-woo .sx-sum-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { body.e-woo .sx-meter-fill, body.e-woo .sx-ms { transition: none; } }
/* ---------- 4. checkout ---------- */
body.e-woo-checkout .wp-block-woocommerce-checkout.alignwide { margin: 0 !important; padding-top: 0 !important; }
/* Layout: WooCommerce's own sidebar layout (flex + container-query classes) is kept. Never hide or
   re-grid its children: the empty first <div> is Woo's resize listener, which decides the mobile
   layout and therefore where the order summary, the inline qty edit and the JNE picker's slot
   (ExperimentalOrderMeta) render. Hiding it broke the JNE picker on phones (measured 2026-10-02). */
body.e-woo-checkout .wc-block-checkout.wc-block-components-sidebar-layout { margin: 0 !important; align-items: flex-start; }
body.e-woo-checkout .wc-block-components-main, body.e-woo-checkout .wc-block-components-sidebar { min-width: 0; }
body.e-woo-checkout .wc-block-checkout__form { margin: 0; counter-reset: e-step; }
/* each step a card; numbered by CSS counters (only steps that render a heading count) */
body.e-woo-checkout .wc-block-checkout__form > .wc-block-components-checkout-step {
  margin: 0 0 16px !important; padding: clamp(18px, 2.4vw, 26px) !important; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0;
}
body.e-woo-checkout .wc-block-checkout__form > .wc-block-components-checkout-step::after { display: none !important; } /* Woo's step connector line */
body.e-woo-checkout .wc-block-components-checkout-step__heading-container { margin: 0 0 14px; padding: 0; }
body.e-woo-checkout .wc-block-components-checkout-step__heading { display: flex; align-items: center; gap: 10px; margin: 0; }
body.e-woo-checkout .wc-block-components-checkout-step__title {
  display: flex; align-items: center; gap: 10px; margin: 0 !important; font: 700 18px/1.25 var(--f-body) !important; color: var(--ink);
}
body.e-woo-checkout .wc-block-components-checkout-step__title::before {
  counter-increment: e-step; content: counter(e-step); width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--white); font: 700 12px/1 var(--f-mono);
}
body.e-woo-checkout .wc-block-components-checkout-step__heading-content { margin-left: auto; font-size: 13px; color: var(--muted); }
body.e-woo-checkout .wc-block-components-checkout-step__heading-content a { color: var(--ink); font-weight: 700; }
body.e-woo-checkout .wc-block-components-checkout-step__content { padding: 0 !important; margin: 0; border: 0 !important; }
body.e-woo-checkout .wc-block-components-checkout-step__container::after, body.e-woo-checkout .wc-block-components-checkout-step__content::before { display: none !important; }
body.e-woo-checkout .wc-block-components-checkout-step__description { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }
body.e-woo-checkout .wc-block-checkout__guest-checkout-notice { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
/* order note + terms + actions sit after the cards without their own card */
body.e-woo-checkout .wc-block-checkout__form > .wc-block-checkout__order-notes,
body.e-woo-checkout .wc-block-checkout__form > .wp-block-woocommerce-checkout-order-note-block {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 4px !important;
}
body.e-woo-checkout .wc-block-checkout__add-note .wc-block-components-textarea { min-height: 84px; padding: 12px 14px; }
body.e-woo-checkout .wc-block-checkout__terms { margin: 0 !important; padding: 12px 4px 0 !important; border-top: 1px dashed var(--line-2) !important; font-size: 13px; color: var(--muted); }
body.e-woo-checkout .wc-block-checkout__terms a { color: var(--ink); font-weight: 700; }
body.e-woo-checkout .wc-block-checkout__actions { margin: 0 !important; padding: 0 !important; }
body.e-woo-checkout .wc-block-checkout__actions_row { display: flex; gap: 12px; }
/* address form: Woo's own grid, only spacing. No `order` / grid placement (postcode stays above city). */
body.e-woo-checkout .wc-block-components-address-form { gap: 0 14px; }
body.e-woo-checkout .wc-block-components-address-form > .wc-block-components-text-input,
body.e-woo-checkout .wc-block-components-address-form > .wc-block-components-country-input,
body.e-woo-checkout .wc-block-components-address-form > .wc-block-components-state-input { margin-top: 12px; }
body.e-woo-checkout .wc-block-components-address-form__address_2-toggle { margin-top: 10px; color: var(--teal); font-weight: 700; font-size: 13.5px; }
body.e-woo-checkout .wc-block-checkout__use-address-for-billing { margin-top: 16px; }
body.e-woo-checkout .wc-block-components-address-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
body.e-woo-checkout .wc-block-components-address-card__edit { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* JNE picker host (inline-styled by the module): give it the step-card look; nothing about its
   fields, lock or position changes */
body.e-woo-checkout #bloomlab-jne-flow-b-host:not(:empty) {
  margin-bottom: 16px;
  padding: clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 26px); border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
body.e-woo-checkout .bloomlab-jne-flow-b select { border: 1.5px solid var(--line-2); border-radius: 12px; background-color: var(--white); color: var(--ink); font: 500 16px/1.3 var(--f-body); min-height: 48px; }
body.e-woo-checkout .bloomlab-jne-field > span { font-weight: 700; color: var(--ink); }
body.e-woo-checkout .bloomlab-jne-note { color: var(--muted); }
/* shipping options → .sx-opt */
body.e-woo-checkout .wc-block-components-shipping-rates-control__no-shipping-address-message,
body.e-woo-checkout .wc-block-components-shipping-rates-control__no-results-notice {
  margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; text-align: left;
}
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control { display: grid; gap: 9px; }
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
  margin: 0 !important; padding: 13px 14px 13px 46px !important; border-radius: 14px !important; border: 1.5px solid var(--line) !important; background: var(--white); box-shadow: none !important; transition: border-color .2s, background .2s;
}
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover { border-color: var(--ink-2) !important; }
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked,
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--ink) !important; background: color-mix(in srgb, var(--aqua) 7%, var(--white)); box-shadow: inset 0 0 0 1px var(--ink) !important;
}
body.e-woo-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input { left: 14px; }
body.e-woo-checkout .wc-block-components-radio-control__label { color: var(--ink); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
body.e-woo-checkout .wc-block-components-radio-control__secondary-label { color: var(--ink); font-weight: 700; white-space: nowrap; }
body.e-woo-checkout .wc-block-components-radio-control__description,
body.e-woo-checkout .wc-block-components-radio-control__secondary-description { color: var(--muted); font-size: 12.5px; }
body.e-woo-checkout .wc-block-components-radio-control--highlight-checked::after,
body.e-woo-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked::after { display: none !important; }
body.e-woo-checkout .wc-block-components-shipping-rates-control__package { margin: 0; padding: 0; border: 0; }
/* payment groups (checkout-payment-groups module) → .sx-pg accordion. Restyled through the module's
   own classes; never hidden, never moved. */
body.e-woo-checkout .bloomlab-payment-groups { display: grid; gap: 8px; margin: 0; }
body.e-woo-checkout details.bloomlab-payment-group { margin: 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; transition: border-color .2s; }
body.e-woo-checkout details.bloomlab-payment-group[open],
body.e-woo-checkout details.bloomlab-payment-group:has(input:checked) { border-color: var(--ink); }
body.e-woo-checkout .bloomlab-payment-group > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 13px 16px; background: none; color: var(--ink); font: 700 15px/1.3 var(--f-body); cursor: pointer; list-style: none;
}
body.e-woo-checkout .bloomlab-payment-group > summary:hover { background: var(--paper); }
body.e-woo-checkout .bloomlab-payment-group > summary::-webkit-details-marker { display: none; }
body.e-woo-checkout .bloomlab-payment-group > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border: 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s; flex: none;
}
body.e-woo-checkout .bloomlab-payment-group[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
body.e-woo-checkout .bloomlab-pg-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--cream); color: var(--ink-2); font: 600 11.5px/22px var(--f-body); text-align: center; }
body.e-woo-checkout .bloomlab-payment-group-inner { display: grid; gap: 8px; padding: 2px 12px 12px; }
@media (min-width: 760px) { body.e-woo-checkout .bloomlab-payment-group-inner { grid-template-columns: 1fr 1fr; } }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__option {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 !important; padding: 12px 14px !important;
  border: 1.5px solid var(--line) !important; border-radius: 14px; background: var(--white); cursor: pointer; transition: border-color .2s, background .2s;
}
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__option:last-child { border-bottom: 1.5px solid var(--line) !important; }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__option:hover { border-color: var(--ink-2) !important; }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--ink) !important; background: color-mix(in srgb, var(--aqua) 7%, var(--white)); box-shadow: inset 0 0 0 1px var(--ink);
}
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__input { position: static !important; transform: none !important; flex: none; width: 20px; height: 20px; margin: 0 !important; }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__option-layout { flex: 1; min-width: 0; padding: 0 !important; }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__label-group { display: flex; align-items: center; min-width: 0; }
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-payment-method-label,
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__label {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font: 700 14.5px/1.3 var(--f-body); color: var(--ink);
}
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-radio-control__label img,
body.e-woo-checkout .bloomlab-payment-group-inner .wc-block-components-payment-method-label img {
  display: inline-block; width: auto !important; max-width: 92px; height: auto; max-height: 22px; object-fit: contain; margin: 0; border-radius: 4px;
}
/* the selected method's description panel stays in Woo's own list (the module hides only that list) */
body.e-woo-checkout .wc-block-components-radio-control-accordion-content { padding: 10px 2px 0 !important; color: var(--muted); font-size: 13.5px; }
body.e-woo-checkout .wc-block-components-checkout-payment-methods__notice, body.e-woo-checkout .wc-block-checkout__no-payment-methods-notice { border-radius: 14px; }
/* additional information (CusRev consent) */
body.e-woo-checkout #order-fields .wc-block-components-checkbox { margin-top: 4px; }
/* order summary sidebar → sticky .sx-card. ONE summary list; the inline qty pill keeps its layout. */
body.e-woo-checkout .wc-block-checkout__sidebar {
  padding: clamp(18px, 2.4vw, 26px) !important; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
@media (min-width: 960px) { body.e-woo-checkout .wc-block-checkout__sidebar.is-sticky { position: sticky; top: calc(var(--head-h) + 18px); } }
body.e-woo-checkout .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; border-radius: 0; margin: 0; }
body.e-woo-checkout .wc-block-components-checkout-order-summary__title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0 !important; border: 0 !important; }
body.e-woo-checkout .wc-block-components-checkout-order-summary__title-text,
body.e-woo-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  margin: 0 !important; font: 400 26px/1.1 var(--f-display) !important; letter-spacing: -.015em; color: var(--ink); text-transform: none;
}
body.e-woo-checkout .wc-block-components-checkout-order-summary__title-price { margin-left: auto; font-weight: 700; color: var(--ink); }
body.e-woo-checkout .wc-block-components-checkout-order-summary__content { padding: 0 !important; }
body.e-woo-checkout .wc-block-components-order-summary { padding: 0 !important; }
body.e-woo-checkout .wc-block-components-order-summary .wc-block-components-order-summary__content { display: grid; gap: 4px; }
body.e-woo-checkout .wc-block-components-order-summary-item { border-bottom: 1px solid var(--line); }
body.e-woo-checkout .wc-block-components-order-summary-item:last-child { border-bottom: 0; }
body.e-woo-checkout .wc-block-components-order-summary-item__image img { border-radius: 12px !important; background: var(--cream); }
body.e-woo-checkout .wc-block-components-order-summary-item__quantity { background: var(--ink); color: var(--white); border: 0; box-shadow: none; font: 700 11px/20px var(--f-body); }
body.e-woo-checkout .wc-block-components-order-summary-item .wc-block-components-product-name { color: var(--ink) !important; font: 700 14.5px/1.35 var(--f-body) !important; }
body.e-woo-checkout .wc-block-components-order-summary-item__individual-prices { color: var(--ink-2) !important; font-family: var(--f-mono) !important; font-size: 13px !important; font-weight: 500 !important; }
/* inline quantity pill (blcrm-checkout) → .sx-qty look; layout/visibility rules stay in shop CSS */
body.e-woo-checkout .blab-qty-controls { border: 1.5px solid var(--line-2); border-radius: 99px; background: var(--white); box-shadow: none; height: 38px; }
body.e-woo-checkout .blab-qty-controls:hover { border-color: var(--ink-2); }
body.e-woo-checkout .blab-qty-btn { width: 36px; height: 36px; color: var(--ink) !important; border-radius: 50%; }
body.e-woo-checkout .blab-qty-btn:hover { background: var(--cream); }
body.e-woo-checkout .blab-qty-btn svg { width: 17px; height: 17px; }
body.e-woo-checkout .blab-qty-btn.blab-qty-trash-active:hover { background: color-mix(in srgb, var(--coral) 14%, var(--white)); color: #9A2D12; }
body.e-woo-checkout .blab-qty-display { color: var(--ink); font: 700 15px/36px var(--f-body); min-width: 28px; }
/* Shop as Client (staff only): neutral card, keep its WP-blue out of the design */
body.e-woo-checkout .wp-block-woocommerce-ptwoo-shop-as-client-block { border-radius: var(--r-l); }

/* ---------- 5. order received ---------- */
body.e-woo.e-woo-received main.wp-block-group > * { max-width: 920px !important; }
body.e-woo-received .wc-block-order-confirmation-status { margin: 0 0 18px; display: grid; gap: 10px; }
body.e-woo-received .wc-block-order-confirmation-status::before {
  content: ""; width: 64px; height: 64px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 10.4l3.4 3.4L15.4 6.6'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 16px 30px -14px rgba(20, 118, 122, .8);
}
body.e-woo-received .wc-block-order-confirmation-status h1 { margin: 6px 0 0; font: 400 clamp(32px, 3.6vw, 46px)/1.04 var(--f-display) !important; letter-spacing: -.02em; color: var(--ink); }
body.e-woo-received .wc-block-order-confirmation-status p { margin: 0; font-size: 16.5px; color: var(--ink-2); }
body.e-woo-received .wc-block-order-confirmation-summary { margin: 0 0 22px; }
body.e-woo-received .wc-block-order-confirmation-summary-list {
  list-style: none; display: grid; gap: 0; margin: 0; padding: 4px 18px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
body.e-woo-received .wc-block-order-confirmation-summary-list-item { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
body.e-woo-received .wc-block-order-confirmation-summary-list-item:last-child { border-bottom: 0; }
body.e-woo-received .wc-block-order-confirmation-summary-list-item__key { color: var(--muted); font-weight: 500; }
body.e-woo-received .wc-block-order-confirmation-summary-list-item__value { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  body.e-woo-received .wc-block-order-confirmation-summary-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 14px 18px; gap: 12px 18px; }
  body.e-woo-received .wc-block-order-confirmation-summary-list-item { grid-template-columns: 1fr; gap: 2px; padding: 0; border: 0; }
}
body.e-woo-received h2.wp-block-heading, body.e-woo-received .wc-block-order-confirmation-totals-wrapper h2,
body.e-woo-received .wc-block-order-confirmation-shipping-wrapper h2, body.e-woo-received .wc-block-order-confirmation-billing-wrapper h2 {
  margin: 28px 0 12px !important; font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--f-display) !important; letter-spacing: -.015em; color: var(--ink);
}
body.e-woo-received .wc-block-order-confirmation-totals table, body.e-woo-received .wc-block-order-confirmation-totals__table {
  width: 100%; margin: 0; border: 1px solid var(--line) !important; border-radius: var(--r-l); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--white); box-shadow: var(--sh-1); font-size: 15px;
}
body.e-woo-received .wc-block-order-confirmation-totals th, body.e-woo-received .wc-block-order-confirmation-totals td {
  padding: 14px 18px !important; border: 0 !important; border-top: 1px solid var(--line) !important; text-align: left; vertical-align: top; color: var(--ink-2); line-height: 1.45;
}
body.e-woo-received .wc-block-order-confirmation-totals thead th { border-top: 0 !important; background: var(--paper); font: 500 11px/1.3 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.e-woo-received .wc-block-order-confirmation-totals__product a { color: var(--ink); font-weight: 700; text-decoration: none; }
body.e-woo-received .wc-block-order-confirmation-totals__total, body.e-woo-received .wc-block-order-confirmation-totals tfoot td { text-align: right !important; white-space: nowrap; font-weight: 700; color: var(--ink); }
body.e-woo-received .wc-block-order-confirmation-totals tfoot tr:last-child th, body.e-woo-received .wc-block-order-confirmation-totals tfoot tr:last-child td { border-top: 1px solid var(--ink) !important; background: var(--paper); }
body.e-woo-received .wc-block-order-confirmation-totals tfoot tr:last-child td { font: 400 26px/1 var(--f-display); }
body.e-woo-received .wc-block-order-confirmation-address-wrapper { gap: 14px !important; margin-top: 8px; }
body.e-woo-received .wc-block-order-confirmation-address-wrapper .wp-block-column { min-width: 0; }
body.e-woo-received .wc-block-order-confirmation-shipping-address, body.e-woo-received .wc-block-order-confirmation-billing-address {
  padding: 18px 20px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line) !important; box-shadow: var(--sh-1); font-style: normal; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere;
}
body.e-woo-received .wc-block-order-confirmation-create-account { border-radius: var(--r-l); background: var(--cream); padding: clamp(18px, 2.4vw, 26px); }
body.e-woo-received .woocommerce-verify-email, body.e-woo-received form.woocommerce-form-verify-email { display: grid; gap: 12px; max-width: 560px; }
body.e-woo-received .woocommerce-verify-email .input-text, body.e-woo-received form.woocommerce-form-verify-email input[type="email"] {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); font: 500 16px/1.3 var(--f-body);
}
body.e-woo-received .woocommerce-verify-email .button, body.e-woo-received form.woocommerce-form-verify-email button {
  min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--coral); color: var(--on-coral); font: 700 15.5px/1.2 var(--f-body); cursor: pointer;
}
/* additional information: purchase pixels, DOKU inline panel, staff button. Styled, never hidden. */
body.e-woo-received .wc-block-order-confirmation-additional-information { margin-top: 18px; }
/* "Langkah berikutnya" (added by inc/woo.php after the status block; reuses .sx-next from e.css) */
.e-ty-next { display: grid; gap: 12px; margin: 4px 0 22px; }
.e-ty-next-h { font: 700 12px/1.4 var(--f-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 !important; }
.e-ty-next .sx-next a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.e-ty-help { font-size: 14px; color: var(--ink-2); }
.e-ty-help a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 4px; }

/* ---------- 6. order pay (classic form-pay.php: rare, reachable from failed payments) ---------- */
body.e-woo-pay #order_review { display: grid; gap: 18px; }
body.e-woo-pay table.shop_table {
  width: 100%; margin: 0; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--white); box-shadow: var(--sh-1);
}
body.e-woo-pay table.shop_table th, body.e-woo-pay table.shop_table td { padding: 14px 18px !important; border: 0 !important; border-top: 1px solid var(--line) !important; color: var(--ink-2); }
body.e-woo-pay table.shop_table thead th { border-top: 0 !important; background: var(--paper); font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.e-woo-pay table.shop_table tfoot tr:last-child td { font: 400 24px/1 var(--f-display); color: var(--ink); }
body.e-woo-pay #payment { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-l); background: var(--white) !important; border: 1px solid var(--line); box-shadow: var(--sh-1); }
body.e-woo-pay #payment ul.wc_payment_methods { display: grid; gap: 8px; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; list-style: none; }
body.e-woo-pay #payment ul.wc_payment_methods li { margin: 0; padding: 12px 14px !important; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); list-style: none; }
body.e-woo-pay #payment ul.wc_payment_methods li:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--aqua) 7%, var(--white)); }
body.e-woo-pay #payment ul.wc_payment_methods li label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
body.e-woo-pay #payment ul.wc_payment_methods li img { display: inline-block; max-height: 22px; width: auto; border-radius: 4px; }
body.e-woo-pay #payment div.payment_box { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); color: var(--ink-2); font-size: 13.5px; }
body.e-woo-pay #payment div.payment_box::before { display: none; }
body.e-woo-pay #payment .place-order { padding: 0 !important; margin: 0; }
body.e-woo-pay #place_order {
  float: none; width: 100%; min-height: 54px; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--coral) !important; color: var(--on-coral) !important;
  font: 700 16.5px/1.2 var(--f-body); cursor: pointer; box-shadow: 0 14px 30px -14px rgba(245, 114, 81, .9);
}
body.e-woo-pay #place_order:hover { background: var(--coral-2) !important; }

/* ==========================================================================
   7. My Account (ported verbatim from the design reference work/designs/assets/ex.css §7-8,
      2026-10-01 22:20; only change: the DOKU rule also hides the Opsi E .e-bar).
      WooCommerce classic [woocommerce_my_account] markup inside the
   TT5 page template (main.wp-block-group > .wp-block-post-content > .woocommerce).
   Scoped to body.woocommerce-account and specific enough to beat
   woocommerce.css / woocommerce-layout.css / -smallscreen.css and TT5 globals.
   ========================================================================== */
body.woocommerce-account main.wp-block-group { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body.woocommerce-account main.wp-block-group > .wp-block-group { margin: 0 !important; padding: clamp(26px, 4vw, 52px) 0 clamp(64px, 8vw, 110px) !important; max-width: none !important; }
body.woocommerce-account .wp-block-post-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account .wp-block-post-content > .woocommerce { box-sizing: border-box; width: 100%; max-width: var(--wrap) !important; margin-inline: auto !important; padding-inline: var(--gut); }
body.woocommerce-account .wp-block-post-title { margin-block: 0 clamp(22px, 3vw, 36px) !important; font: 380 clamp(36px, 4.6vw, 58px)/1.02 var(--f-display); letter-spacing: -.025em; color: var(--ink); overflow-wrap: anywhere; }
body.woocommerce-account .wp-block-post-title::before { content: "Akun BloomLab"; display: block; margin-bottom: 14px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
body.woocommerce-account .woocommerce { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
body.woocommerce-account .woocommerce * { box-sizing: border-box; }
body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { content: none !important; display: none !important; } /* Woo clearfix pseudo-elements would become grid cells */
body.woocommerce-account .woocommerce > * { margin-block: 0; }
body.woocommerce-account .woocommerce a:not(.button):not(.ex-acct-tile):not(.btn-wa) { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--aqua); }
body.woocommerce-account .woocommerce a:not(.button):not(.ex-acct-tile):not(.btn-wa):hover { text-decoration-color: var(--coral); }
body.woocommerce-account .woocommerce h2 { font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--f-display); letter-spacing: -.015em; color: var(--ink); margin: 0; }
body.woocommerce-account .woocommerce .clear { display: none; }
body.woocommerce-account .woocommerce .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout: logged in = sidebar nav + content */
body.woocommerce-account.logged-in .woocommerce { display: grid; gap: 22px; align-items: start; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0; }
body.woocommerce-account .woocommerce-MyAccount-content { display: grid; gap: 20px; align-content: start; }
body.woocommerce-account .woocommerce-MyAccount-content > p { max-width: 70ch; }
body.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
@media (min-width: 960px) { body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); } }

/* account navigation */
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { flex: none; margin: 0; padding: 0; border: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads { display: none !important; } /* no downloadable products: always empty */
body.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--white); color: var(--ink-2) !important; text-decoration: none !important; font: 600 14.5px/1 var(--f-body) !important; white-space: nowrap; transition: background .2s, border-color .2s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { border-color: var(--ink); color: var(--ink) !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; }
.woocommerce-MyAccount-navigation-link--dashboard { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5Z'/%3E%3Cpath d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4 19.5h16'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c1.3-3.8 4.4-5.5 8-5.5s6.7 1.7 8 5.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H6.5a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1H14M10 12h10M16.5 8.5 20 12l-3.5 3.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E"); }
@media (min-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--head-h) + 24px); padding: 8px; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; overflow: visible; margin: 0; padding: 0; }
  body.woocommerce-account .woocommerce-MyAccount-navigation a { border: 0; border-radius: 12px; min-height: 46px; padding: 0 14px; background: none; }
  body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--paper); }
  body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); }
  body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
}

/* notices: .woocommerce-message / -info / -error */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error {
  position: relative; list-style: none; margin: 0 0 4px !important; padding: 14px 16px 14px 48px !important; border: 1px solid transparent !important; border-radius: 14px;
  font: 600 14.5px/1.5 var(--f-body); color: var(--ink); background: var(--white); width: auto; word-wrap: break-word;
}
body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-info::before, .woocommerce-notices-wrapper .woocommerce-error::before {
  content: "" !important; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: currentColor; font-family: inherit;
  -webkit-mask: var(--nic) center / contain no-repeat; mask: var(--nic) center / contain no-repeat;
}
body.woocommerce-account .woocommerce-message::after, body.woocommerce-account .woocommerce-info::after, body.woocommerce-account .woocommerce-error::after { content: none; }
.woocommerce-message { --nic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.7'/%3E%3C/svg%3E"); }
.woocommerce-info { --nic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E"); }
.woocommerce-error { --nic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16h.01'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-message { background: color-mix(in srgb, var(--teal) 10%, var(--white)) !important; border-color: color-mix(in srgb, var(--teal) 28%, var(--white)) !important; color: #0E5154; }
body.woocommerce-account .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-info { background: color-mix(in srgb, var(--aqua) 12%, var(--white)) !important; border-color: color-mix(in srgb, var(--aqua) 34%, var(--white)) !important; color: var(--ink); }
body.woocommerce-account .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-error { background: color-mix(in srgb, var(--coral) 11%, var(--white)) !important; border-color: color-mix(in srgb, var(--coral) 35%, var(--white)) !important; color: #8A2911; }
body.woocommerce-account .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
body.woocommerce-account .woocommerce-error a, body.woocommerce-account .woocommerce-message a, body.woocommerce-account .woocommerce-info a { color: inherit !important; }
body.woocommerce-account .woocommerce-info .button { float: none; margin: 8px 0 0; display: flex; width: max-content; }

/* buttons: every Woo button in the account area becomes the Opsi E pill */
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; margin: 0; padding: 13px 26px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--coral) !important; color: var(--on-coral) !important; font: 700 15.5px/1.2 var(--f-body) !important; letter-spacing: .005em; text-decoration: none !important; text-transform: none;
  box-shadow: 0 14px 30px -14px rgba(245, 114, 81, .9); cursor: pointer; transition: background .2s, transform .2s var(--ease), box-shadow .2s;
}
body.woocommerce-account .woocommerce .button:hover { background: var(--coral-2) !important; }
body.woocommerce-account .woocommerce .button:active { transform: scale(.98); }

/* forms */
body.woocommerce-account .woocommerce form .form-row,
body.woocommerce-account .woocommerce-form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; align-content: start; min-width: 0; }
body.woocommerce-account .woocommerce form .form-row label,
body.woocommerce-account .woocommerce form label { display: block; margin: 0; font: 700 13.5px/1.4 var(--f-body); color: var(--ink); }
body.woocommerce-account .woocommerce form .form-row .required { color: var(--coral-2); text-decoration: none; border: 0; }
body.woocommerce-account .woocommerce form .optional { color: var(--muted); font-weight: 500; }
body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce form input[type="text"], body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="tel"], body.woocommerce-account .woocommerce form input[type="password"],
body.woocommerce-account .woocommerce form textarea {
  width: 100%; min-height: 50px; margin: 0; padding: 12px 14px !important; border-radius: 12px !important; border: 1.5px solid var(--line-2) !important; background: var(--white) !important;
  color: var(--ink) !important; font: 500 16px/1.3 var(--f-body) !important; box-shadow: none; outline: none; transition: border-color .2s, box-shadow .2s;
}
body.woocommerce-account .woocommerce form .input-text:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 30%, transparent); }
body.woocommerce-account .woocommerce form .woocommerce-invalid .input-text { border-color: var(--coral-2) !important; }
body.woocommerce-account .woocommerce form .woocommerce-input-wrapper { display: block; }
body.woocommerce-account .woocommerce form fieldset { margin: 6px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); display: grid; gap: 14px; min-width: 0; }
body.woocommerce-account .woocommerce form fieldset legend { padding: 0 6px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
body.woocommerce-account .woocommerce form #account_display_name_description { font-size: 12.5px; color: var(--muted); }
body.woocommerce-account .woocommerce form #account_display_name_description em { font-style: normal; }
/* show-password toggle (Woo JS swaps .display-password) */
body.woocommerce-account .woocommerce .password-input { position: relative; display: block; width: 100%; }
body.woocommerce-account .woocommerce .password-input .input-text { padding-right: 52px !important; }
body.woocommerce-account .woocommerce .show-password-input {
  position: absolute; right: 6px !important; top: 0 !important; bottom: 0 !important; width: 40px; height: 40px; margin: auto 0 !important; transform: none !important; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
body.woocommerce-account .woocommerce .show-password-input::before { content: none !important; display: none !important; }
body.woocommerce-account .woocommerce .show-password-input::after {
  content: "" !important; position: absolute; inset: 10px; background: currentColor; font-family: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.woocommerce-account .woocommerce .show-password-input:hover { background: var(--cream); color: var(--ink); }
body.woocommerce-account .woocommerce .show-password-input.display-password { color: var(--teal); }
/* select2 (country / province) */
body.woocommerce-account .select2-container--default .select2-selection--single { height: 50px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--white); }
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 40px 0 14px !important; color: var(--ink) !important; font: 500 16px/47px var(--f-body) !important; }
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow { height: 47px; right: 10px; width: 24px; }
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 10px !important; }
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b { background: none !important; border: 0; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
body.woocommerce-account .select2-container--focus .select2-selection--single { border-color: var(--teal); }

/* two-column field grids (edit account, edit address) */
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields__field-wrapper { display: grid; gap: 16px; }
@media (min-width: 640px) {
  body.woocommerce-account .woocommerce-EditAccountForm,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  body.woocommerce-account .woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last),
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-MyAccount-content > form,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-form-login {
  margin: 0 !important; padding: clamp(18px, 2.6vw, 30px) !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important; background: var(--white); box-shadow: var(--sh-1);
}
body.woocommerce-account .woocommerce-MyAccount-content > form { display: grid; gap: 18px; }
body.woocommerce-account .woocommerce-address-fields { display: grid; gap: 20px; }
body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type { margin-top: 4px; }

/* logged out: login + side panel; lost password single column */
body.woocommerce-account:not(.logged-in) .wp-block-post-content > .woocommerce { display: grid; gap: 18px; }
@media (min-width: 960px) {
  body.woocommerce-account:not(.logged-in) .wp-block-post-content > .woocommerce:has(.woocommerce-form-login) {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-areas: "n n" "h a" "f a"; column-gap: clamp(32px, 4vw, 64px); row-gap: 16px; align-items: start;
  }
  body.woocommerce-account .woocommerce:has(.woocommerce-form-login) > .woocommerce-notices-wrapper { grid-area: n; }
  body.woocommerce-account .woocommerce:has(.woocommerce-form-login) > h2 { grid-area: h; }
  body.woocommerce-account .woocommerce:has(.woocommerce-form-login) > .woocommerce-form-login { grid-area: f; }
  body.woocommerce-account .woocommerce:has(.woocommerce-form-login) > .ex-acct-aside { grid-area: a; }
}
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-ResetPassword { display: grid; gap: 18px; max-width: 620px; }
body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; }
body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) .woocommerce-form-login__submit { justify-self: stretch; }
@media (min-width: 560px) { body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; } }
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 10px; font-weight: 600 !important; color: var(--ink-2) !important; cursor: pointer; }
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit { float: none !important; margin: 0 !important; flex: 1 1 200px; }
/* live: Woo's block-theme CSS stretched the remember-me label to a full centred row (seen 2026-10-02) */
body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) > .woocommerce-form-login__rememberme { grid-column: 1; grid-row: 1; width: auto !important; margin: 0 !important; justify-self: start; }
body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) > .woocommerce-form-login__submit { grid-column: 1; grid-row: 2; order: 0; }
@media (min-width: 560px) { body.woocommerce-account .woocommerce-form-login > .form-row:not(.woocommerce-form-row) > .woocommerce-form-login__submit { grid-column: 2; grid-row: 1; } }
body.woocommerce-account .woocommerce form input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
body.woocommerce-account .woocommerce-LostPassword { margin: 0; font-size: 14.5px; }
body.woocommerce-account .woocommerce-ResetPassword > p:first-child { color: var(--ink-2); }
body.woocommerce-account .woocommerce-ResetPassword .button { width: 100%; }
.ex-acct-back { margin-top: 4px !important; font-size: 14.5px; }
.ex-acct-aside { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-l); background: var(--cream); }
.ex-acct-aside-t { font: 400 clamp(24px, 2.2vw, 30px)/1.12 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.ex-acct-aside-list { display: grid; gap: 10px; }
.ex-acct-aside-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.ex-acct-aside-list svg { width: 22px; height: 22px; color: var(--teal); }
.ex-acct-aside .btn-wa { justify-self: start; max-width: 100%; }

/* dashboard tiles (added via the woocommerce_account_dashboard action: adds, never removes) */
.ex-acct-quick { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 640px) { .ex-acct-quick { grid-template-columns: 1fr 1fr; } }
.ex-acct-tile { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .25s var(--ease); }
.ex-acct-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.ex-acct-tile .mono { font-size: 10.5px; }
.ex-acct-tile b { font: 420 22px/1.2 var(--f-display); overflow-wrap: anywhere; }
.ex-acct-tile-x { font-size: 13.5px; color: var(--muted); }
.ex-acct-tile--wa { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ex-acct-tile--wa .wa-dot { grid-row: span 2; }
.ex-acct-st { justify-self: start; }

/* status chips: the order-status cell, the view-order <mark>, dashboard tile */
.ex-acct-st, body.woocommerce-account mark.order-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; font: 700 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--cream); color: var(--ink-2); }
.ex-acct-st::before, body.woocommerce-account mark.order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ex-acct-st--processing, body.woocommerce-account mark.order-status { background: color-mix(in srgb, var(--teal) 14%, var(--white)); color: var(--teal); }

/* orders table */
body.woocommerce-account table.shop_table { width: 100%; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: var(--white); box-shadow: var(--sh-1); font-size: 15px; }
body.woocommerce-account table.shop_table th, body.woocommerce-account table.shop_table td { padding: 15px 18px !important; border: 0 !important; border-top: 1px solid var(--line) !important; text-align: left; vertical-align: middle; line-height: 1.45 !important; color: var(--ink-2); }
body.woocommerce-account table.shop_table thead th { border-top: 0 !important; background: var(--paper); font: 500 11px/1.3 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
body.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-family: var(--f-mono) !important; font-weight: 600 !important; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
body.woocommerce-account .woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--ink) !important; white-space: nowrap; }
body.woocommerce-account .woocommerce-orders-table__cell-order-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before { background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent); }
body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before { background: var(--mb); }
body.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before,
body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before { background: var(--tz); }
body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before { background: var(--coral-2); }
body.woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { color: var(--ink); font-weight: 700; }
body.woocommerce-account .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
body.woocommerce-account .woocommerce-orders-table .button { min-height: 38px !important; padding: 8px 16px !important; margin: 2px 6px 2px 0 !important; font-size: 13.5px !important; box-shadow: none !important; }
body.woocommerce-account .woocommerce-orders-table .button.view { background: var(--white) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; padding: 6.5px 14.5px !important; }
body.woocommerce-account .woocommerce-orders-table .button.view:hover { background: var(--cream) !important; }
body.woocommerce-account .woocommerce-orders-table .button.cancel { background: none !important; color: var(--muted) !important; padding: 8px 6px !important; text-decoration: underline !important; text-underline-offset: 4px; }
/* orders table on phones: each order a card (overrides woocommerce-smallscreen's float layout) */
@media (max-width: 767px) {
  body.woocommerce-account table.woocommerce-orders-table, body.woocommerce-account table.woocommerce-orders-table tbody { display: grid; gap: 12px; border: 0 !important; background: none; box-shadow: none; border-radius: 0 !important; overflow: visible; }
  body.woocommerce-account table.woocommerce-orders-table thead { display: none; }
  body.woocommerce-account table.woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); }
  body.woocommerce-account table.woocommerce-orders-table tr th, body.woocommerce-account table.woocommerce-orders-table tr td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; background: none !important; }
  body.woocommerce-account table.woocommerce-orders-table tr td::before, body.woocommerce-account table.woocommerce-orders-table tr th::before { content: none !important; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-number { grid-column: 1; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-date { grid-column: 2; grid-row: 1; text-align: right !important; font-size: 13px; color: var(--muted) !important; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-status { grid-column: 1; font-size: 14px; }
  body.woocommerce-account table.woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-status::before { content: "" !important; float: none; margin-right: 8px !important; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-total { grid-column: 2; grid-row: 2; text-align: right !important; font-size: 13.5px; }
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 8px; padding-top: 10px !important; margin-top: 4px; border-top: 1px solid var(--line) !important; white-space: normal; }
  body.woocommerce-account .woocommerce-orders-table .button { margin: 0 !important; flex: 1 1 auto; }
  body.woocommerce-account .woocommerce-orders-table .button.cancel { flex: 0 0 auto; }
}

/* view order */
body.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--ink); font-weight: 700; }
body.woocommerce-account .woocommerce-MyAccount-content mark.order-number { font-family: var(--f-mono); font-weight: 600; font-size: .95em; }
body.woocommerce-account .woocommerce-MyAccount-content mark.order-status { vertical-align: 1px; }
body.woocommerce-account .woocommerce-OrderUpdates { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 10px; }
body.woocommerce-account .woocommerce-OrderUpdate { position: relative; margin: 0 !important; padding: 16px 18px 16px 44px !important; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); list-style: none; }
body.woocommerce-account .woocommerce-OrderUpdate::before { content: ""; position: absolute; left: 18px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent); }
body.woocommerce-account .woocommerce-OrderUpdate .meta { margin: 0 0 4px !important; font: 500 11px/1.4 var(--f-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; }
body.woocommerce-account .woocommerce-OrderUpdate .description p { margin: 0; color: var(--ink); }
body.woocommerce-account .woocommerce-order-details, body.woocommerce-account .woocommerce-customer-details { display: grid; gap: 14px; margin: 0 !important; }
body.woocommerce-account table.order_details td.product-name a { color: var(--ink) !important; font-weight: 700 !important; text-decoration: none !important; }
body.woocommerce-account table.order_details .product-quantity { font-weight: 600; color: var(--muted); white-space: nowrap; }
body.woocommerce-account table.order_details td.product-total, body.woocommerce-account table.order_details tfoot td, body.woocommerce-account table.order_details thead th.product-total { text-align: right !important; white-space: nowrap; }
body.woocommerce-account table.order_details tfoot th { font-weight: 500 !important; color: var(--ink-2) !important; }
body.woocommerce-account table.order_details tfoot td { font-weight: 700; color: var(--ink) !important; white-space: normal; }
body.woocommerce-account table.order_details tfoot tr:last-child th, body.woocommerce-account table.order_details tfoot tr:last-child td { border-top: 1px solid var(--ink) !important; background: var(--paper); padding-block: 18px !important; }
body.woocommerce-account table.order_details tfoot tr:last-child th { font-weight: 700 !important; color: var(--ink) !important; }
body.woocommerce-account table.order_details tfoot tr:last-child td { font: 400 28px/1 var(--f-display); letter-spacing: -.02em; }
body.woocommerce-account table.order_details .shipped_via { font-weight: 500; color: var(--muted); font-size: 12.5px; }
body.woocommerce-account .order-again { margin: 0; }

/* addresses (overview, customer details) */
body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-columns--addresses { display: grid; gap: 14px; margin: 0 !important; }
body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after, body.woocommerce-account .col2-set::before, body.woocommerce-account .col2-set::after { content: none !important; }
@media (min-width: 720px) { body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } }
body.woocommerce-account .woocommerce-Address, body.woocommerce-account .woocommerce-column { float: none !important; width: auto !important; margin: 0 !important; padding: 20px 22px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); display: grid; gap: 12px; align-content: start; min-width: 0; }
body.woocommerce-account .woocommerce-Address-title { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 !important; }
body.woocommerce-account .woocommerce-Address-title::before, body.woocommerce-account .woocommerce-Address-title::after { content: none !important; }
body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-column__title { float: none !important; font: 500 11.5px/1.4 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--teal) !important; margin: 0 !important; }
body.woocommerce-account .woocommerce-Address-title .edit { float: none !important; font-size: 13.5px; }
body.woocommerce-account .woocommerce address { margin: 0; padding: 0 !important; border: 0 !important; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink) !important; }
body.woocommerce-account .woocommerce address p { margin: 6px 0 0 !important; padding: 0 !important; color: var(--ink-2); font-size: 14px; }
body.woocommerce-account .woocommerce address p::before { content: none !important; }
body.woocommerce-account .woocommerce-customer-details--phone, body.woocommerce-account .woocommerce-customer-details--email { padding-left: 0 !important; }
body.woocommerce-account .ex-acct-editaddr { margin-top: 6px !important; }

/* ==========================================================================
   8. DOKU card result screens: exact markup of bloomlab-doku-card
      (class-doku-card-return.php). Replaces assets/css/return.css while the
      Opsi E switch is on. States: --identity, --pending, --failed, --paid, --inline.
   ========================================================================== */
body.bldc-status-page .e-bar, body.bldc-status-page .promo, body.bldc-status-page #header, body.bldc-status-page #headerimg, body.bldc-status-page #page > hr { display: none !important; }
.bloomlab-doku-card-screen { display: block; background: var(--paper); }
.bldc-status {
  --tone: var(--aqua); --tone-ink: var(--teal); --tone-tint: color-mix(in srgb, var(--aqua) 14%, var(--white));
  display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 5vw, 64px) var(--gut) clamp(56px, 8vw, 96px);
  font-family: var(--f-body); color: var(--ink-2); line-height: 1.6;
}
.bldc-status--identity { --tone: var(--ink); --tone-ink: var(--ink); --tone-tint: var(--cream); }
.bldc-status--pending { --tone: #E3A52B; --tone-ink: #7A4E00; --tone-tint: #FFF3DC; }
.bldc-status--failed { --tone: var(--coral); --tone-ink: #9A2D12; --tone-tint: color-mix(in srgb, var(--coral) 13%, var(--white)); }
.bldc-status--paid { --tone: var(--teal); --tone-ink: var(--teal); --tone-tint: color-mix(in srgb, var(--teal) 12%, var(--white)); }
.bldc-card {
  position: relative; width: 100%; max-width: 580px; display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px);
  border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.bldc-card::before { content: ""; position: absolute; left: clamp(22px, 4vw, 36px); right: clamp(22px, 4vw, 36px); top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone); }
.bldc-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-tint); color: var(--tone-ink); }
.bldc-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bldc-status--paid .bldc-icon { background: var(--teal); color: var(--white); box-shadow: 0 16px 30px -14px rgba(20, 118, 122, .8); }
.bldc-pill { justify-self: start; margin: 4px 0 0; padding: 6px 10px; border-radius: 99px; background: var(--tone-tint); color: var(--tone-ink); font: 700 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; }
.bldc-title { margin: 0; font: 400 clamp(28px, 3.6vw, 38px)/1.08 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bldc-lead { margin: 0; font-size: 16px; color: var(--ink-2); }
.bldc-lead strong, .bldc-help strong { color: var(--ink); font-weight: 700; }
.bldc-alert { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--coral) 12%, var(--white)); color: #9A2D12; font-size: 14px; font-weight: 600; line-height: 1.45; }
.bldc-alert svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bldc-status form { margin: 0; display: grid; gap: 16px; }
.bldc-field { display: grid; gap: 6px; }
.bldc-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.bldc-input { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--white); color: var(--ink); font: 600 18px/1.3 var(--f-mono); letter-spacing: .04em; }
.bldc-input::placeholder { color: color-mix(in srgb, var(--muted) 70%, var(--white)); }
.bldc-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 30%, transparent); }
.bldc-help { margin: 0; font-size: 13px; color: var(--muted); }
.bldc-summary { display: grid; margin: 0; border-top: 1px solid var(--line); }
.bldc-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.bldc-summary-label { color: var(--muted); }
.bldc-summary-value { font-weight: 700; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.bldc-summary-row:first-child .bldc-summary-value { font-family: var(--f-mono); font-weight: 600; letter-spacing: .02em; }
.bldc-notes { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.bldc-notes-title { margin: 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bldc-notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bldc-notes-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.bldc-note-marker { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 600 11.5px/1 var(--f-mono); }
.bldc-note-marker--dot { background: none; }
.bldc-note-marker--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.bldc-notice { margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--aqua) 14%, var(--white)); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.bloomlab-doku-card-return { display: grid; gap: 14px; }
.bldc-actions { display: grid; gap: 10px; margin-top: 4px; }
.bldc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 13px 22px; border-radius: 999px; border: 0;
  font: 700 16px/1.2 var(--f-body); text-decoration: none; text-align: center; cursor: pointer; transition: background .2s, transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.bldc-btn svg { width: 20px; height: 20px; flex: none; }
.bldc-btn:active { transform: scale(.98); }
.bldc-btn--primary { background: var(--coral); color: var(--on-coral); box-shadow: 0 14px 30px -14px rgba(245, 114, 81, .9); }
.bldc-btn--primary:hover { background: var(--coral-2); }
.bldc-btn--secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.bldc-btn--secondary:hover { border-color: var(--ink); }
.bldc-btn--secondary svg { color: #25D366; }
.bldc-action-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.bldc-foot { margin: 4px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.bldc-foot a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--aqua); }
.bldc-nowrap { white-space: nowrap; }
/* inline variant: sits inside the order-received page, so no page padding or min-height */
.bldc-status--inline { padding: 0; align-items: stretch; margin: 20px 0; }
.bldc-status--inline .bldc-card { max-width: 640px; }
.bldc-status--inline .bldc-title { font-size: clamp(24px, 2.6vw, 30px); }
@media (min-width: 560px) { .bldc-actions form + .bldc-action-note { margin-top: -2px; } }

/* image stages: a single minmax(0,1fr) track, so percentage max-widths on the pack resolve against the stage
   (an auto track would grow to the image's intrinsic width first) */
.ex-pm-img, .ex-sc-img, .ex-post-cta-img, .ex-result-img, .ex-pcard-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ex-pm-img img, .ex-sc-img img, .ex-post-cta-img img, .ex-pcard-pack { justify-self: center; align-self: center; }