/* Customer account and purchase flows. Loaded after the shared theme stylesheet. */

/* Account panel: keep content widths predictable and interactive rows readable. */
.account-panel .account-content { min-width: 0; }
.account-panel .account-content .hermes-stack { gap: 16px; }
.account-panel .hermes-stats { gap: 14px; }
.account-panel .hermes-stat { min-width: 0; }
.account-panel .hermes-stat .k { display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.account-panel .hermes-stat .v { overflow-wrap: anywhere; }
.account-panel .account-mobile-menu { box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.account-panel .account-mobile-menu nav a,
.account-panel .account-mobile-menu nav button { min-width: 0; }
.account-panel .account-mobile-menu nav a span,
.account-panel .account-mobile-menu nav button span { overflow-wrap: anywhere; }
.account-panel .hermes-card h1,
.account-panel .hermes-card h2,
.account-panel .hermes-card h3 { line-height: 1.3; }
.account-panel .hermes-card .hermes-flex-between { align-items: center; }
.account-panel .hermes-meta > div { min-width: 0; }
.account-panel .hermes-meta h4,
.account-panel .hermes-meta code { overflow-wrap: anywhere; }
.account-panel .hermes-btn { max-width: 100%; white-space: normal; }

/* Cart rows become two clear action rows before the mobile breakpoint. */
@media (max-width: 900px) {
  #hermes-cart-root .plx-cart-wrap { display: flex; flex-direction: column; gap: 16px; }
  #hermes-cart-root .plx-cart-list,
  #hermes-cart-root .plx-cart-side { width: 100%; flex: 1 1 auto; }
  #hermes-cart-root .plx-cart-side { position: static; }
}
@media (max-width: 575px) {
  #hermes-cart-root .plx-cart-list { padding: 14px; border-radius: 22px; }
  #hermes-cart-root .plx-cart-row {
    display: grid;
    /* The quantity control is wider than the thumbnail column. Reserve its
       full hit area so the price cell cannot sit on top of the + button. */
    grid-template-columns: minmax(96px, auto) minmax(0,1fr) auto;
    grid-template-areas: "image info info" "qty price remove";
    align-items: center;
    gap: 10px 12px;
    padding: 14px 0;
  }
  #hermes-cart-root .plx-cart-row img { grid-area: image; width: 54px; height: 48px; }
  #hermes-cart-root .plx-cart-info { grid-area: info; overflow-wrap: anywhere; }
  #hermes-cart-root .plx-cart-info b { line-height: 1.4; }
  #hermes-cart-root .plx-cart-info small { display: block; line-height: 1.5; }
  #hermes-cart-root .plx-cart-row .plx-qty { grid-area: qty; justify-self: start; gap: 8px; padding: 5px 8px; }
  #hermes-cart-root .plx-cart-line { grid-area: price; min-width: 0; text-align: right; font-size: 13px; overflow-wrap: anywhere; }
  #hermes-cart-root .plx-cart-del { grid-area: remove; justify-self: end; }
  #hermes-cart-root .plx-cart-side { padding: 18px; border-radius: 22px; }
  #hermes-cart-root .plx-cart-total { gap: 12px; }
  #hermes-cart-root .plx-cart-total b { font-size: 18px; }
}

/* Checkout: avoid squeezing contact and billing fields on small tablets. */
@media (max-width: 900px) {
  .hermes-checkout-layout { grid-template-columns: minmax(0,1fr); }
  .hermes-checkout-summary { position: static; grid-row: 1; }
}
@media (max-width: 575px) {
  .hermes-checkout-page > .container { width: min(100% - 28px, 600px); }
  .hermes-checkout-heading { gap: 12px; }
  .hermes-checkout-form-card,
  .hermes-checkout-summary { border-radius: 20px; }
  .hermes-checkout-form .hermes-field-row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .hermes-checkout-section-title { gap: 10px; }
  .hermes-checkout-section-title p { max-width: 42ch; }
  .hermes-checkout-company .hermes-field-row { padding: 0 14px; }
  .hermes-checkout-form .hermes-card { align-items: flex-start !important; }
  .hermes-checkout-form .hermes-card input[type="radio"] { margin-top: 2px; }
  .hermes-checkout-form .submit-btn { white-space: normal; }
}
/* Inline test-mode notice becomes in-flow content on checkout; constrain it to the form column. */
.hermes-checkout-page > .container > .hermes-flash {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
}
.hermes-checkout-page > .container > .hermes-flash > span { min-width: 0; overflow-wrap: anywhere; }