/* Customer portal, cart and checkout flows.
   Primary routes: /cart/, /checkout/, /orders/, /notifications/,
   /wishlist/, /mypage/coupons/ and /mypage/points/. */

/* Every portal shell keeps the same header-to-navigation offset regardless of
   role, so cart and checkout follow the customer portal value. */
.cart-page-section,
.checkout-page-section {
  padding-top: 28px;
}

/* Customer portal (draft mypage.html + order-detail.html): scoped sidebar and dense cards. */
/* Customer portal shell: side tabs and body cards.
*/
.customer-portal-section {
  padding-top: 28px;
}

.customer-portal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 901px) {
  .container.mypage-layout.customer-portal-layout {
    width: 1056px;
    min-width: 1056px;
    grid-template-columns: 220px 812px;
  }
}

.customer-portal-tabs {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px;
}

.customer-portal-navigation {
  display: grid;
  gap: 6px;
}

.customer-portal-tabs > .customer-portal-tabs-toggle {
  display: none;
}

.customer-portal-tabs h1 {
  margin: 0 2px 4px;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1.45rem;
  line-height: 1.25;
}

.customer-portal-tabs a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

.customer-portal-tabs a:hover,
.customer-portal-tabs a:focus-visible,
.customer-portal-tabs a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.customer-portal-main,
.customer-portal-main .order-shell,
.order-detail-stack {
  min-width: 0;
}

.customer-portal-layout > .customer-portal-main:first-child {
  grid-column: 1 / -1;
}

/* The first panel in the body column starts level with the navigation. The cart
   and checkout grids are matched separately because checkout wraps its grid in a
   payment form whose hidden inputs come first. Both keep their own top margin
   whenever another panel of the same kind precedes them. */
.customer-portal-main > :first-child,
.customer-portal-main .cart-grid:first-of-type,
.customer-portal-main .checkout-grid:first-of-type {
  margin-top: 0;
}

.customer-portal-main .order-shell {
  display: grid;
  gap: 18px;
}

/* Customer order history: period controls, cards and redemption dialog. */
.order-query-panel,
.order-results-panel {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 16px;
}

.order-query-panel > .ui-search-toolbar {
  width: 100%;
  max-width: none;
}

.ui-search-toolbar-action.order-redemption-open {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 78px;
  height: 32px;
  min-height: 32px;
  gap: 4px;
  padding-inline: 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ui-search-toolbar-action.order-redemption-open-mobile {
  display: none;
}

.order-redemption-open-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("../img/icons/plus.svg") center / contain no-repeat;
}

.date-range-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.order-period-presets,
.order-period-date-row {
  display: contents;
}

.order-period-leading-divider {
  display: none;
}

.period-bar > a,
.order-period-presets > a {
  min-height: var(--control-h-md);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 0 14px;
  color: var(--muted);
  font-weight: 850;
  text-decoration: none;
}

.period-bar > a.active,
.period-bar > a:hover,
.order-period-presets > a.active,
.order-period-presets > a:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: var(--text-inverse);
}

.period-bar .date-box {
  min-width: 148px;
  min-height: var(--control-h-md);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
}

.period-bar .date-box:hover,
.period-bar .date-box:focus {
  border-color: var(--brand-dark);
}

.order-period-bar,
.order-date-range-control {
  gap: 6px;
}

.order-period-bar .order-period-presets > a {
  min-height: 32px;
  padding: 0 10px;
  gap: 1px;
  font-size: 0.7rem;
  font-weight: 400;
}

.order-period-number {
  font-size: inherit;
  font-weight: 700;
}

.order-period-unit {
  font-size: calc(0.7rem - 2px);
  font-weight: 400;
  transform: translateY(-0.3em);
}

.order-period-bar .date-box {
  min-width: 126px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.8rem;
}

.order-period-apply {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.order-period-apply-divider {
  display: none;
}

.order-period-apply-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("../img/icons/circle-check.svg?v=ui10-12") center / contain no-repeat;
}

.order-history-toolbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.order-history-toolbar .ops-pagination {
  margin: 0;
  width: 100%;
}

.order-history-toolbar .order-redemption-open {
  flex: 0 0 auto;
  margin-left: auto;
}

.customer-portal-main .order-card-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.order-history-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 22px;
  box-shadow: none;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.order-history-card .order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.order-card-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.order-card-meta-segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.order-card-meta-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.order-card-meta-separator {
  color: var(--cc-bar);
  font-weight: 400;
}

.order-card-status {
  color: var(--brand-dark);
  font-size: inherit;
  font-weight: 800;
}

.order-card-status.done {
  color: #087942;
}

.order-card-status.canceled {
  color: var(--danger);
}

.order-card-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.order-card-icon-action {
  position: relative;
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-dark);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.order-detail-action {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 60px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
}

.order-card-action-label {
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.order-card-action-label-mobile {
  display: none;
}

.order-card-section-divider {
  width: 100%;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
}

.order-card-icon-action:hover,
.order-card-icon-action:focus-visible {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.order-report-action {
  border-color: #efc58f;
  background: #fff1df;
  color: #8a4b0f;
}

.order-report-action:hover,
.order-report-action:focus-visible {
  border-color: #d99a51;
  background: #f9dfbe;
  color: #713b09;
}

.order-report-action.is-disabled,
.order-report-action.is-disabled:hover,
.order-report-action.is-disabled:focus-visible {
  border-color: #d9dde2;
  background: #f2f4f6;
  color: #9aa1a9;
  cursor: not-allowed;
}

.order-card-action-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.order-card-action-icon-report {
  mask-image: url("../img/icons/file-text.svg");
}

.order-card-action-icon-detail {
  mask-image: url("../img/icons/eye.svg");
}

.order-card-action-icon-list {
  mask-image: url("../img/icons/list.svg");
}

.order-card-action-icon-delivery {
  mask-image: url("../img/icons/truck.svg");
}

.order-card-action-icon-download {
  mask-image: url("../img/icons/download.svg");
}

.order-card-action-icon-receipt {
  mask-image: url("../img/icons/file-text.svg");
}

.order-card-icon-action::before,
.order-card-icon-action::after {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.order-card-icon-action::before {
  content: "";
  top: calc(100% + 3px);
  right: 10px;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #25282c;
  border-left: 5px solid transparent;
  transform: translateY(-2px);
}

.order-card-icon-action::after {
  content: attr(data-tooltip);
  top: calc(100% + 8px);
  right: 0;
  padding: 5px 8px;
  border-radius: 4px;
  background: #25282c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-2px);
}

.order-card-icon-action:hover::before,
.order-card-icon-action:hover::after,
.order-card-icon-action:focus-visible::before,
.order-card-icon-action:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.customer-order-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.customer-order-heading-label {
  color: var(--muted);
  font-weight: 400;
}

.customer-order-heading strong {
  font-weight: 800;
}

.customer-order-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.customer-order-detail-head-panel,
.customer-order-detail-content-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.customer-order-detail-content-panel {
  display: grid;
  gap: 14px;
}

.customer-order-detail-content-panel > .order-detail-tabs {
  margin-bottom: 0;
}

.customer-order-navigation {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.ui-detail-heading-status {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ui-detail-heading-status-row {
  display: flex;
  align-items: center;
}

/* Report wrappers are structural; the shared detail shell and per-report cards
   provide the only visual surfaces. */
.customer-report-panel {
  min-width: 0;
}

.customer-order-report-panel .customer-report-list {
  gap: 14px;
}

.customer-portal-main .customer-report-row {
  gap: 12px;
  padding: 15px 16px;
}

.customer-report-fields {
  color: var(--ink);
  font-size: var(--fs-sm);
}

.customer-report-field-label {
  color: var(--muted);
}

.customer-report-field-value strong {
  font-weight: 750;
}

/* Analysis and report identifiers share the brand accent. */
.customer-report-key {
  color: var(--brand-dark);
  font-weight: 750;
}

.customer-report-subject {
  color: #202124;
  font-weight: 750;
}

.customer-report-product {
  color: #b34f0f;
  font-weight: 400;
}

.customer-order-report-panel .customer-report-code-field,
.customer-order-report-panel .customer-report-release-field,
.customer-order-report-panel .customer-report-code-field .customer-report-field-label,
.customer-order-report-panel .customer-report-release-field .customer-report-field-label {
  color: #000;
  font-weight: 400;
}

.customer-report-action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--icon-action-gap);
}

.customer-order-report-panel .customer-report-action-buttons .order-card-icon-action {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}

.customer-order-report-panel .customer-report-action-buttons .order-card-action-icon {
  width: 14px;
  height: 14px;
}

.customer-report-unavailable-note {
  color: var(--muted);
  font-size: var(--fs-sm);
}


.refund-request-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.refund-request-row label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}

.refund-request-row input {
  width: clamp(180px, 28vw, 420px);
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.customer-portal-main .customer-refund-request-button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 2px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.customer-refund-request-button-mobile {
  display: none;
}

.customer-report-action-cell {
  align-self: center;
}

.customer-report-download.is-disabled,
.customer-report-view.is-disabled {
  border-color: var(--line);
  background: var(--surface-subtle);
  color: var(--muted);
  cursor: not-allowed;
}

.customer-portal-main .customer-refund-panel,
.customer-refund-history {
  display: grid;
  gap: 16px;
  font-size: var(--fs-sm);
}

.customer-refund-panel-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.customer-portal-main .customer-refund-panel-heading h2 {
  margin: 0;
  font-size: var(--fs-ti);
}

.customer-refund-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.customer-refund-history-heading h2 {
  margin: 0;
  font-size: var(--fs-ti);
}

.customer-refund-panel form {
  display: grid;
  gap: 16px;
}

.customer-refund-request-summary {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.customer-refund-request-summary dt {
  color: var(--muted);
  font-weight: 400;
}

.customer-refund-request-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.customer-portal-main .customer-refund-panel form,
.customer-portal-main .customer-refund-request-summary,
.customer-portal-main .customer-refund-request-summary dt,
.customer-portal-main .customer-refund-request-summary dd,
.customer-portal-main .refund-request-row label,
.customer-portal-main .refund-request-row input {
  font-size: var(--fs-sm);
}

.customer-refund-history-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.customer-refund-withdraw {
  flex: 0 0 auto;
  margin-left: auto;
}

.customer-portal-main .customer-refund-withdraw-button {
  min-height: 26px;
  padding: 2px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.refund-status-pill {
  border-color: #8b1a1a;
  color: #8b1a1a;
}

.refund-status-pill.is-active,
.refund-status-text.is-active {
  color: #cd1076;
}

.order-card-head > .refund-status-pill {
  flex: 0 0 auto;
}

.customer-refund-history-list {
  margin: 0;
  font-size: var(--fs-sm);
}

.customer-refund-history-list dt {
  color: var(--muted);
  font-weight: 400;
}

.customer-refund-history-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

@media (max-width: 640px) {
  .customer-order-detail-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .customer-order-heading {
    flex: 1 1 100%;
  }

  .customer-order-navigation {
    margin-left: auto;
  }

  .customer-portal-main .order-detail-tabs-divided {
    gap: 3px;
  }

  .customer-portal-main .order-detail-tabs-divided .order-detail-tab {
    padding-inline: 4px;
    font-size: var(--fs-sm);
  }

  .refund-request-row {
    flex-wrap: wrap;
  }

  .refund-request-row label {
    flex: 1 1 100%;
  }

  .refund-request-row input {
    width: 100%;
  }

  .customer-refund-panel-heading {
    justify-content: space-between;
    gap: 8px;
  }

  .customer-refund-request-button-mobile {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }

  .customer-refund-request-button-desktop {
    display: none;
  }
}

.customer-order-summary-card {
  font-size: var(--fs-sm);
}

.ui-detail-heading.order-detail-heading {
  font-size: var(--fs-ti);
}

@media (max-width: 600px) {
  .ui-detail-heading.order-detail-heading {
    font-size: 16px;
  }

}

.customer-order-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.customer-order-summary-head h2 {
  margin: 0;
  font-size: var(--fs-ti);
  font-weight: 700;
}

.customer-order-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin: 0;
}

.customer-order-receipt {
  flex: 0 0 auto;
}

.customer-order-summary-list {
  min-width: 0;
  font-size: var(--fs-sm);
}

.customer-delivery-list {
  display: grid;
  gap: 30px;
}

.customer-delivery-panels.customer-order-delivery-panels {
  gap: 14px;
}

.customer-delivery-panel {
  min-width: 0;
  font-size: var(--fs-sm);
}

/* The panel status sits at the right end of the title line, so the rule that
   closes the heading moves from the title to the row that holds both. */
.customer-delivery-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.customer-portal-main .customer-delivery-panel-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--fs-ti);
  font-weight: 800;
  line-height: 1.4;
}

.customer-delivery-panel-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.customer-delivery-panel-heading > *,
.customer-delivery-panel-title-actions > * {
  align-self: center;
}

.customer-delivery-panel-title-actions .checkout-address-button {
  min-height: 26px;
  padding: 2px 8px;
  border-color: #1874cd;
  background: #1874cd;
  color: #fff;
  font-size: 0.74rem;
}

.customer-delivery-panel-title-actions .checkout-address-button:not(:disabled):hover {
  border-color: #155fa8;
  background: #155fa8;
}

.customer-delivery-panel-title-actions .checkout-address-button:disabled {
  border-color: #828282;
  background: #828282;
  color: #fff;
  opacity: 1;
}

.customer-delivery-record {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.notification-target-focus {
  outline: 3px solid rgba(25, 118, 97, 0.34);
  outline-offset: 2px;
  background-color: rgba(225, 244, 238, 0.45);
  scroll-margin-top: 7rem;
}

.customer-delivery-record:first-child {
  padding-top: 0;
  border-top: 0;
}

.customer-delivery-record-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.customer-delivery-record h3 {
  margin: 0;
  font-size: var(--fs-base);
}

.customer-logistics-summary {
  margin: 0;
  font-size: var(--fs-sm);
}

.customer-logistics-summary dt {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.customer-logistics-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.customer-logistics-products {
  display: grid;
  gap: 4px;
}

.customer-return-content {
  display: grid;
  gap: 12px;
}

.customer-return-message-region {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.customer-return-state-message {
  position: relative;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #bfd7ee;
  border-radius: 6px;
  background: #edf5fc;
  color: #104e8b;
}

.customer-return-state-message::after {
  position: absolute;
  bottom: -5px;
  left: 16px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  content: "";
}

.customer-return-state-message::after {
  border-right: 1px solid #bfd7ee;
  border-bottom: 1px solid #bfd7ee;
  background: #edf5fc;
}

.customer-recollection-cycle {
  min-width: 0;
  max-width: 100%;
}

.customer-recollection-return-heading {
  min-width: 0;
}

.customer-recollection-cycle-body {
  display: grid;
  gap: 18px;
}

.customer-recollection-leg {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.customer-recollection-leg + .customer-recollection-leg {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.customer-recollection-leg h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.customer-recollection-return-heading h3,
.customer-recollection-return-heading form {
  margin-block: 0;
}

.customer-report-count {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.order-card-body {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.order-card-body.no-image {
  grid-template-columns: minmax(0, 1fr);
}

.order-product-link {
  display: block;
  width: 108px;
  height: 108px;
}

.order-product-image {
  display: block;
  width: 108px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f8fbfa;
}

.order-summary-list {
  margin: 0;
  font-size: inherit;
}

.order-summary-list dt {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.order-summary-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.order-summary-list .order-payment-status-value,
.customer-logistics-summary .order-payment-status-value {
  font-weight: 750;
}

.order-summary-list a {
  color: inherit;
  font-weight: inherit;
}

.order-progress {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  margin: 22px 0 16px;
  padding-top: 20px;
}

.order-progress::before,
.order-progress::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #c4d4ce;
}

.order-progress::after {
  right: auto;
  width: calc(var(--progress, 0%) - 20px);
  max-width: calc(100% - 20px);
  background: var(--brand-dark);
}

.order-progress.canceled::after {
  background: var(--danger);
}

.order-progress ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--step-count, 5), minmax(64px, 1fr));
  gap: 8px;
  min-width: max(680px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-progress li {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #637871;
  font-size: var(--fs-xs);
  font-weight: 400;
  text-align: center;
  word-break: keep-all;
}

.order-progress li::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #c4d4ce;
  border-radius: 50%;
  background: var(--surface);
}

.order-progress li.active {
  color: var(--brand-dark);
}

.order-progress li.active::before {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.order-progress li[aria-current="step"] {
  text-decoration: underline;
}

.order-progress.canceled li.active {
  color: var(--danger);
}

.order-progress.canceled li.active::before {
  border-color: var(--danger);
  background: var(--danger);
}

.order-progress li[aria-current="step"]::before {
  border-width: 4px;
  border-color: #9bcfbe;
}

.order-progress.canceled li[aria-current="step"]::before {
  border-color: #e7a8b5;
}

.modal-dialog.order-redemption-dialog {
  display: grid;
  max-width: 520px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  font-size: var(--fs-sm);
  text-align: left;
}

.refund-action-dialog::backdrop {
  background: rgba(20, 34, 31, 0.48);
}

.refund-action-dialog:not([open]) {
  display: none;
}

.order-redemption-dialog-head {
  display: flex;
  min-width: 0;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.order-redemption-dialog-head h2,
.order-redemption-fallback h2 {
  margin: 0;
  font-size: var(--fs-ti);
}

.order-redemption-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--icon-action-gap);
}

.order-redemption-dialog-action {
  cursor: pointer;
}

.order-redemption-dialog-action-cancel {
  border-color: #ff82ab;
  color: #ff82ab;
}

.order-redemption-dialog-action-cancel:hover,
.order-redemption-dialog-action-cancel:focus-visible {
  border-color: #db7093;
  background: #fff0f5;
  color: #db7093;
}

.order-redemption-dialog-action-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.order-redemption-dialog-action-icon-confirm {
  mask-image: url("../img/icons/circle-check.svg?v=ui10-12");
}

.order-redemption-dialog-action-icon-cancel {
  mask-image: url("../img/icons/cancel.svg");
}

.order-redemption-dialog-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  font-size: var(--fs-sm);
}

.refund-action-dialog .order-redemption-dialog-body {
  min-height: 52px;
  align-content: center;
}

.order-redemption-dialog-body > p,
.order-redemption-fallback > p {
  margin: 0;
  color: var(--muted);
  font-size: inherit;
}

.order-redemption-dialog .retail-redemption-inline-form,
.order-redemption-fallback .retail-redemption-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.order-redemption-dialog .order-redemption-field,
.order-redemption-fallback .order-redemption-field {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.order-redemption-field-label {
  color: var(--muted);
  font-size: inherit;
  font-weight: 400;
}

.order-redemption-dialog .retail-redemption-inline-form input,
.order-redemption-fallback .retail-redemption-inline-form input {
  width: 100%;
  min-height: var(--control-h-md);
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: inherit;
}

.order-redemption-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.order-redemption-actions .button {
  width: 100%;
  min-height: var(--control-h-md);
}

.order-redemption-fallback {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
}

/* Query controls above the customer portal lists.
*/
.customer-portal-main .catalog-heading {
  align-items: flex-start;
}

.customer-portal-main .catalog-heading h1 {
  margin-top: 6px;
}

.customer-portal-main .catalog-query {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px;
  box-shadow: none;
}

.customer-portal-main .catalog-query label {
  gap: 7px;
}

.customer-portal-main .catalog-query input,
.customer-portal-main .catalog-query select {
  border-color: var(--field-border);
  border-radius: var(--field-radius);
  min-height: var(--control-h-lg);
}

.customer-portal-main .catalog-query button {
  min-height: var(--control-h-lg);
}

/* Customer portal list rows for orders, notifications and reports.
*/
.customer-portal-main .order-card-list {
  gap: 14px;
}

.customer-portal-main .order-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: none;
}

.customer-portal-main .order-card-head {
  align-items: center;
  gap: 16px;
}

.customer-portal-main .order-card h2 {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.customer-portal-main .summary-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.customer-portal-main .summary-list div,
.customer-flow-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.customer-portal-main .summary-list dt,
.customer-flow-summary dt {
  color: var(--muted);
  font-weight: 850;
  white-space: nowrap;
}

.customer-portal-main .summary-list dd,
.customer-flow-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.customer-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 4px 10px;
  font-size: var(--fs-md);
  font-weight: 850;
}

.customer-portal-main .progress-list li {
  align-items: center;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: #f8fbfa;
}

.customer-portal-main .catalog-pagination {
  justify-content: flex-end;
}

.customer-return-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.customer-return-address-grid > section,
.customer-return-address-grid > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fbfa;
}

.customer-return-address-grid h3,
.customer-return-address-grid h4 {
  margin: 0 0 10px;
}

.customer-return-address-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.customer-return-address-grid p {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

/* Coupon wallet and customer portal cards: state badges, claim form, support copy.
*/
.coupon-wallet-shell {
  gap: 20px;
}

.coupon-claim-feedback {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #d89a9a;
  border-radius: var(--radius-sm);
  background: #fff7f7;
}

.coupon-claim-form {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.coupon-claim-form-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.coupon-claim-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.coupon-claim-form-heading h2,
.coupon-claim-form-heading p {
  margin: 0;
}

.coupon-claim-form-heading h2 {
  font-size: var(--fs-ti);
}

.coupon-claim-form-heading p {
  color: var(--muted);
  font-size: var(--fs-md);
}

.coupon-claim-lock {
  flex: 0 0 auto;
  color: #8a2d2d;
  font-size: 0.84rem;
  font-weight: 850;
}

.coupon-claim-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.coupon-claim-fields label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.coupon-claim-fields label > span {
  flex: 0 0 auto;
}

.coupon-claim-fields input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-md);
  letter-spacing: 0;
  text-transform: uppercase;
}

.coupon-claim-fields input::placeholder {
  color: #aeb5bb;
  font-weight: 400;
  opacity: 1;
}

.coupon-claim-fields button {
  min-height: var(--control-h-md);
  padding: 0 13px;
  font-size: var(--fs-sm);
}

.coupon-claim-fields button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.coupon-wallet-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.coupon-wallet-panel > .ui-detail-tabs {
  margin-bottom: 0;
}

.coupon-wallet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.coupon-wallet-toolbar .ops-pagination,
.coupon-wallet-pagination .ops-pagination {
  margin: 0;
  width: 100%;
}

.coupon-wallet-list {
  display: grid;
  gap: 10px;
}

.customer-portal-main .coupon-wallet-item {
  border-radius: var(--radius-md);
  padding: 15px 16px;
}

.coupon-wallet-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.coupon-wallet-primary-line,
.coupon-wallet-meta-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.coupon-wallet-primary-line h2 {
  margin: 0;
  font-size: var(--fs-sm);
}

.coupon-wallet-code,
.coupon-wallet-meta-line {
  color: var(--muted);
}

.coupon-wallet-amount {
  color: #a94b0c;
}

.coupon-wallet-meta-line {
  margin-top: 10px;
}

.coupon-wallet-meta-line strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.coupon-state-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #eceeef;
}

.coupon-state-icon > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #69727a;
}

.coupon-state-icon.coupon-state-available {
  background: #e3f4ec;
}

.coupon-state-icon.coupon-state-available > span {
  background: var(--brand);
}

.coupon-state-icon.coupon-state-scheduled,
.coupon-state-icon.coupon-state-reserved {
  background: #fff4d8;
}

.coupon-state-icon.coupon-state-scheduled > span,
.coupon-state-icon.coupon-state-reserved > span {
  background: #b37b12;
}

.coupon-state-icon.coupon-state-redeemed {
  background: #e9f1fb;
}

.coupon-state-icon.coupon-state-redeemed > span {
  background: #3970a8;
}

.coupon-wallet-pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}

/* Persistent customer inquiry list, compose form, and conversation. */
.inquiry-wallet-shell,
.inquiry-compose-shell,
.inquiry-detail-shell {
  gap: 18px;
}

.inquiry-page-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Customer withdrawal follows the compact My Page/inquiry type scale. */
.withdrawal-workspace {
  display: grid;
  gap: 18px;
}

.withdrawal-page-head {
  align-items: center;
}

.withdrawal-title-panel {
  padding: 12px 24px;
}

.withdrawal-title-panel .mypage-panel-head {
  min-height: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.withdrawal-page-head h1,
.withdrawal-complete-shell h1 {
  margin: 0;
  font-size: var(--fs-ti);
  font-weight: 700;
  line-height: 1.4;
}

.withdrawal-page-head p,
.withdrawal-workspace p,
.withdrawal-workspace li,
.withdrawal-complete-shell p {
  font-size: var(--fs-sm);
}

.withdrawal-section {
  display: grid;
  gap: 12px;
}

.withdrawal-section-head {
  min-height: 39px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.withdrawal-section h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.withdrawal-blocker-list,
.withdrawal-notice-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.withdrawal-blocker-list {
  width: fit-content;
  max-width: 100%;
}

.withdrawal-blocker-list li {
  min-height: 36px;
}

.withdrawal-blocker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  column-gap: 28px;
  width: 100%;
}

.withdrawal-blocker-action {
  flex-basis: 32px;
}

.withdrawal-blocker-action-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("../img/icons/file-text.svg") center / contain no-repeat;
  mask: url("../img/icons/file-text.svg") center / contain no-repeat;
}

.withdrawal-ready-message {
  margin: 0;
}

.withdrawal-provider-list {
  display: grid;
  gap: 8px;
}

.withdrawal-provider-row,
.withdrawal-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.withdrawal-provider-row > span {
  display: grid;
  gap: 2px;
  font-size: var(--fs-sm);
}

.withdrawal-provider-row small {
  color: var(--muted);
}

.withdrawal-start-form,
.withdrawal-final-form,
.withdrawal-cancel-form {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.withdrawal-reauth-actions,
.withdrawal-password-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.withdrawal-reauth-actions {
  flex-wrap: wrap;
}

.withdrawal-password-form,
.withdrawal-reauth-actions .withdrawal-cancel-form {
  margin: 0;
}

.withdrawal-password-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.withdrawal-start-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.withdrawal-final-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.withdrawal-final-actions .mypage-withdrawal-action {
  width: 112px;
}

.withdrawal-start-form .consent-row,
.withdrawal-final-form .consent-row {
  font-size: var(--fs-sm);
}

.withdrawal-action-panel {
  padding-block: 22px;
}

.withdrawal-complete-shell {
  display: grid;
  gap: 12px;
  max-width: 640px;
}

@media (max-width: 720px) {
  .withdrawal-reauth-actions,
  .withdrawal-password-form {
    width: 100%;
  }

  .withdrawal-password-form {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
  }

  .withdrawal-password-form .mypage-profile-password-control {
    grid-column: 1 / -1;
    width: min(100%, 400px);
  }

  .withdrawal-provider-row,
  .withdrawal-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .withdrawal-provider-row .button {
    width: 100%;
  }
}

.inquiry-compose-form select {
  width: 100%;
  min-height: var(--control-h-md);
}

.inquiry-compose-panel {
  display: grid;
  gap: 16px;
}

.inquiry-compose-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-compose-panel-head h2 {
  margin: 0;
  font-size: var(--fs-ti);
}

.inquiry-list-panel,
.inquiry-compose-form,
.inquiry-reply-form {
  min-width: 0;
}

.inquiry-search-toolbar {
  width: 100%;
  flex-wrap: wrap;
}

.inquiry-search-toolbar .ui-search-toolbar-filter {
  font-size: var(--fs-sm);
}

.inquiry-list-toolbar .ops-pagination,
.inquiry-list-pagination .ops-pagination {
  width: 100%;
  margin: 0;
}

.inquiry-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  box-shadow: none;
}

.customer-portal-main .inquiry-list-item {
  box-shadow: none;
}

.inquiry-list-item.is-unread {
  border-color: #9bcfbe;
  background: #fbfffd;
}

.product-question-portal {
  display: grid;
  gap: 20px;
}

.product-question-portal-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.product-question-portal-list {
  display: grid;
  gap: 12px;
}

.product-question-portal-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.product-question-portal-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.product-question-portal-summary-group {
  display: contents;
}

.product-question-portal-product,
.product-question-detail-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.product-question-portal-product {
  justify-content: center;
}

.product-question-portal-product img,
.product-question-detail-product img,
.product-question-detail-thumbnail {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
}

.product-question-detail-product span {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-question-portal-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.product-question-portal-dates {
  display: grid;
  gap: 6px;
}

.product-question-portal-main h2 {
  margin: 0;
  font-size: 15px;
}

.product-question-portal-main h2 a {
  color: inherit;
  text-decoration: none;
}

.product-question-portal-title-line,
.product-question-portal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.product-question-portal-title-line {
  color: var(--ink);
  font-size: var(--fs-sm);
}

.product-question-portal-meta {
  color: var(--text-muted);
  font-size: 13px;
}

.product-question-portal-detail-action {
  align-self: center;
}

.product-question-portal-pagination,
.product-question-continuation-actions,
.product-question-operator-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.product-question-detail-product {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.product-question-detail-panel {
  gap: 0;
}

.product-question-detail-panel .product-question-detail-head {
  grid-template-columns: minmax(0, 1fr);
}

.product-question-detail-title-line {
  display: grid;
  grid-row: 1;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.product-question-detail-thumbnail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.product-question-detail-product-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.product-question-detail-title-line .ui-message-detail-title {
  flex: 0 1 auto;
  min-width: 0;
}

.product-question-detail-title-line .ui-message-detail-title a {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-question-detail-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.product-question-detail-panel .product-question-detail-meta {
  grid-row: 2;
  margin-top: 8px;
}

.product-question-detail-date {
  color: #111111;
}

.product-question-detail-product strong {
  margin-left: auto;
  color: var(--primary);
  font-size: 13px;
}

.product-question-continuation-form {
  margin-top: 4px;
}

@media (max-width: 760px) {
  .product-question-portal-item {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding: 14px 0;
  }

  .product-question-portal-product {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .product-question-portal-content {
    grid-column: 2;
    grid-row: 1;
    display: contents;
  }

  .product-question-portal-summary-group {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    align-self: center;
    gap: 8px;
  }

  .product-question-portal-main {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    gap: 6px;
    min-width: 0;
  }

  .product-question-portal-detail-action {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .product-question-portal-title-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    column-gap: 6px;
    row-gap: 4px;
    align-content: center;
  }

  .product-question-portal-title-line h2 {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .product-question-portal-title-line h2 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-question-portal-title-divider {
    display: none;
  }

  .product-question-portal-meta {
    grid-column: 1 / -1;
  }

  .product-question-portal-dates {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 6px;
    margin-top: 4px;
  }

  .product-question-detail-title-line {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .product-question-detail-thumbnail-link,
  .product-question-detail-thumbnail {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .product-question-detail-navigation {
    gap: 4px;
  }

  .product-question-detail-panel .product-question-detail-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 6px;
  }

  .product-question-detail-panel .product-question-detail-meta > .ui-divider {
    display: none;
  }

  .product-question-detail-panel .product-question-detail-meta > .ui-divider:nth-child(2) {
    display: inline-flex;
    width: 4px;
    min-width: 4px;
    justify-content: center;
  }

  .product-question-detail-date {
    flex: 0 0 100%;
  }
}

@media (max-width: 430px) {
  .product-question-portal-title-line {
    grid-template-columns: auto auto auto;
    justify-content: start;
  }

  .product-question-portal-title-line h2 {
    grid-column: 1 / -1;
  }
}

.inquiry-list-title-line,
.inquiry-list-meta,
.inquiry-list-meta-primary {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.inquiry-list-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.inquiry-status,
.inquiry-unread-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f2f4f6;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.inquiry-status-awaiting_operator {
  border-color: #efc58f;
  background: #fff2e3;
  color: #8a4b0f;
}

.inquiry-status-awaiting_customer,
.inquiry-unread-badge {
  border-color: #a8d7c7;
  background: #e8f6f0;
  color: #16634a;
}

.inquiry-detail-link {
  white-space: nowrap;
}

.customer-portal-main .inquiry-compose-form,
.customer-portal-main .inquiry-reply-form,
.mypage-main .internal-inquiry-reply-form {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  background: var(--surface);
}

.customer-portal-main .inquiry-compose-form :is(input, select, textarea),
.customer-portal-main .inquiry-reply-form :is(input, textarea),
.mypage-main .internal-inquiry-reply-form textarea {
  width: 100%;
  border-radius: var(--field-radius);
}

.customer-portal-main .inquiry-compose-form textarea,
.customer-portal-main .inquiry-reply-form textarea,
.mypage-main .internal-inquiry-reply-form textarea {
  resize: vertical;
}

.customer-portal-main .inquiry-compose-panel .inquiry-compose-form {
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.customer-portal-main .inquiry-compose-panel .inquiry-compose-form :is(input, select, textarea) {
  font-size: var(--fs-sm);
  font-weight: 400;
}

.inquiry-compose-fields {
  display: grid;
  grid-template-columns: minmax(112px, 148px) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.inquiry-compose-category-field,
.inquiry-compose-subject-field {
  min-width: 0;
  margin: 0;
}

.inquiry-compose-category-field select {
  min-width: 0;
}

.inquiry-compose-category-field select,
.inquiry-compose-category-field option,
.inquiry-compose-subject-field input {
  font-size: var(--fs-sm);
  font-weight: 400;
}

.inquiry-compose-fields .inquiry-compose-subject-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.inquiry-compose-subject-field label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}

.inquiry-compose-panel .inquiry-reply-title {
  font-size: var(--fs-sm);
  font-weight: 400;
}

.inquiry-compose-field-divider {
  color: var(--cc-bar);
  font-weight: 400;
}

.inquiry-compose-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--icon-action-gap);
  margin-left: auto;
}

.inquiry-compose-cancel {
  border-color: #ff82ab;
  color: #ff82ab;
}

.inquiry-compose-cancel:hover,
.inquiry-compose-cancel:focus-visible {
  border-color: #db7093;
  background: #fff0f5;
  color: #db7093;
}

.inquiry-compose-panel .inquiry-reply-head {
  align-items: center;
  flex-wrap: nowrap;
}

.inquiry-compose-panel .inquiry-reply-title-line {
  align-items: center;
}

.inquiry-compose-action-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.inquiry-compose-action-icon-cancel {
  color: inherit;
  mask-image: url("../img/icons/cancel.svg");
}

.inquiry-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-reply-title-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.inquiry-reply-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
}

.inquiry-reply-byte-count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.inquiry-reply-submit {
  flex: 0 0 32px;
}

.inquiry-reply-submit-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("../img/icons/send.svg") center / contain no-repeat;
  mask: url("../img/icons/send.svg") center / contain no-repeat;
}

.inquiry-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.inquiry-detail-code,
.inquiry-detail-sequence {
  margin: 0 0 4px !important;
  font-size: 0.76rem !important;
}

.inquiry-detail-panel .ui-message-detail-head {
  grid-template-columns: minmax(0, 1fr);
}

.inquiry-conversation {
  display: grid;
  gap: 12px;
}

.inquiry-message {
  width: min(82%, 720px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.inquiry-message.is-own {
  justify-self: end;
  border-color: #a8d7c7;
  background: #f3fbf7;
}

.inquiry-message.is-other {
  justify-self: start;
}

.inquiry-message header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-message header strong {
  font-size: var(--fs-sm);
}

.inquiry-message time {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.inquiry-message p {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Point balance and immutable acquisition/use history. */
/* The history table keeps a fixed minimum width, so its grid item must be
   allowed to shrink for the wrapper's own horizontal scroll to engage. */
.point-wallet-shell > section {
  min-width: 0;
}

.point-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.point-balance-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.point-balance-card span {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.point-balance-card strong {
  color: var(--brand-dark);
  font-size: 1.35rem;
}

.point-balance-card--available span,
.point-balance-card--available strong {
  color: var(--accent-navy);
}

.point-balance-card--expiring span,
.point-balance-card--expiring strong {
  color: var(--danger);
}

.point-history-table {
  min-width: 680px;
}

.point-wallet-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.point-wallet-toolbar .ops-pagination,
.point-wallet-pagination .ops-pagination {
  margin: 0;
  width: 100%;
}

.point-wallet-pagination {
  display: flex;
  justify-content: flex-start;
}

.point-product-reference-list {
  display: grid;
  gap: 4px;
}

.point-wallet-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.point-wallet-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.point-wallet-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-md);
}

.point-wallet-tabs a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 750;
}

.point-expiry-panel {
  display: grid;
  gap: 24px;
}

.point-expiry-group {
  min-width: 0;
}

.point-expiry-group h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}

.point-expiry-list {
  display: grid;
}

.point-expiry-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.point-expiry-row > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.point-expiry-row span,
.point-expiry-row p {
  color: var(--muted);
}

.point-expiry-row > div span {
  white-space: nowrap;
}

.point-expiry-row p {
  margin: 0;
  overflow-wrap: anywhere;
}

.point-delta {
  font-weight: 800;
  white-space: nowrap;
}

.point-delta.earned {
  color: var(--brand-dark);
}

.point-delta.used {
  color: var(--danger);
}

.support-mailto {
  align-content: start;
}

.customer-flow-panel {
  max-width: 760px;
}

.customer-flow-panel .action-row {
  margin: 18px 0;
}

.customer-flow-list {
  display: grid;
  gap: 8px;
  padding-left: 1.2rem;
}

/* Two-column public detail layout. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .product-purchase-layout,
  .featured-review-grid {
    grid-template-columns: 1fr;
  }

  .customer-portal-layout {
    grid-template-columns: 1fr;
  }

  .point-balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .point-wallet-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .point-expiry-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 12px 0;
  }

  .point-expiry-row p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .customer-portal-tabs {
    position: relative;
    top: auto;
  }

  .customer-portal-main .catalog-query {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .customer-portal-main .catalog-heading,
  .customer-portal-main .order-card-head,
  .customer-portal-main .catalog-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-portal-main .order-history-card .order-card-head {
    display: contents;
  }

  .order-results-panel {
    padding-inline: 8px;
  }

  .order-query-panel .ui-search-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
  }

  .order-query-panel .ui-search-toolbar-field {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .order-query-panel .ui-search-toolbar-reset {
    flex: 0 0 32px;
    height: 32px;
    min-height: 32px;
  }

  .order-query-panel .ui-search-toolbar-action-divider,
  .order-query-panel .order-redemption-open-desktop {
    display: none;
  }

  .order-query-panel .order-period-bar {
    display: grid;
    gap: 12px;
  }

  .order-query-panel .order-period-presets,
  .order-query-panel .order-period-date-row {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
  }

  .order-query-panel .order-redemption-open-mobile {
    display: inline-flex;
  }

  .order-query-panel .order-period-leading-divider {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }

  .order-query-panel .order-period-presets > a {
    flex: 0 0 36px;
    width: 36px;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    padding-inline: 2px;
    justify-content: center;
  }

  .order-date-range-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .order-date-range-control .date-box {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    padding-inline: 4px;
  }

  .order-period-apply {
    flex: 0 0 32px;
  }

  .order-query-panel > .empty-state {
    grid-column: 1 / -1;
  }

  .order-card-meta {
    grid-column: 1 / -1;
    grid-row: 1;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin-right: -16px;
    margin-left: 0;
    white-space: nowrap;
  }

  .order-card-meta-primary {
    flex-wrap: nowrap;
    gap: 0;
    white-space: nowrap;
  }

  .order-card-meta-segment {
    gap: 0;
  }

  .order-card-meta-segment:not(:first-child) .order-card-meta-separator {
    margin-inline: 0.25em;
    font-size: calc(1em - 1px);
  }

  .order-card-meta-secondary {
    font-size: calc(1em - 1px);
  }

  .order-card-number {
    font-family: Arial, sans-serif;
  }

  .order-card-section-divider {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-bottom: 0;
    border-top: 1px solid var(--line);
  }

  .order-card-head-actions {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-self: center;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .order-card-head-actions .order-card-icon-action {
    display: inline-flex;
    flex: 0 0 32px;
    width: auto;
    min-width: 72px;
    padding-inline: 8px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
  }

  .order-card-action-label-mobile {
    display: inline;
  }

  .order-history-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
  }

  .order-card-body {
    display: contents;
  }

  .order-card-body > .order-product-link,
  .order-card-body > .order-product-image {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }

  .order-history-card .order-summary-list {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .order-history-card .order-summary-list dd {
    font-size: calc(1em - 2px);
  }

  .order-history-card > .order-progress {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 0;
    overflow: visible;
    padding-top: 42px;
  }

  .order-history-card > .order-progress::before,
  .order-history-card > .order-progress::after {
    top: 51px;
    left: 9px;
    right: 9px;
  }

  .order-history-card > .order-progress::after {
    right: auto;
    width: calc(var(--progress, 0%) - 18px);
    max-width: calc(100% - 18px);
  }

  .order-history-card > .order-progress ol {
    grid-template-columns: repeat(var(--step-count, 5), minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .order-history-card > .order-progress li {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0;
    min-width: 0;
    text-decoration: none;
  }

  .order-history-card > .order-progress .order-progress-label {
    display: none;
  }

  .order-history-card > .order-progress li[aria-current="step"] .order-progress-label {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    display: block;
    width: max-content;
    max-width: 96px;
    padding: 4px 7px;
    transform: translateX(-50%);
    border: 1px solid #9bcfbe;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .order-history-card > .order-progress li[aria-current="step"] .order-progress-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -3px) rotate(45deg);
    border-right: 1px solid #9bcfbe;
    border-bottom: 1px solid #9bcfbe;
    background: var(--surface);
  }

  .order-history-card > .order-progress.canceled li[aria-current="step"] .order-progress-label {
    border-color: #e7a8b5;
    color: var(--danger);
  }

  .order-history-card > .order-progress.canceled li[aria-current="step"] .order-progress-label::after {
    border-color: #e7a8b5;
  }

  .order-history-card > .order-progress:not(.canceled) li:first-child[aria-current="step"] .order-progress-label {
    left: 0;
    transform: none;
  }

  .order-history-card > .order-progress:not(.canceled) li:first-child[aria-current="step"] .order-progress-label::after {
    left: 9px;
  }

  .order-history-card > .order-progress:not(.canceled) li:last-child[aria-current="step"] .order-progress-label {
    right: 0;
    left: auto;
    transform: none;
  }

  .order-history-card > .order-progress:not(.canceled) li:last-child[aria-current="step"] .order-progress-label::after {
    right: 5px;
    left: auto;
  }

  .customer-portal-main .catalog-query,
  .customer-portal-main .summary-list div,
  .customer-flow-summary {
    grid-template-columns: 1fr;
  }

  .customer-portal-main .mypage-delivery-head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .customer-portal-main .mypage-delivery-head h2 {
    text-align: left;
  }

  .customer-delivery-record-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .coupon-claim-form-heading {
    display: grid;
  }

  .coupon-claim-fields {
    grid-template-columns: 1fr;
  }

  .coupon-claim-title-line {
    flex-wrap: wrap;
  }

  .coupon-claim-divider {
    display: none;
  }

  .coupon-claim-fields label {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
    align-items: center;
  }

  .coupon-wallet-item-head {
    align-items: flex-start;
  }

  .coupon-wallet-meta-line {
    row-gap: 5px;
  }

  .inquiry-page-head {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
  }

  .inquiry-message header {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .inquiry-page-head .button {
    width: 100%;
  }

  .inquiry-message {
    width: 100%;
  }

  .inquiry-form-actions {
    flex-wrap: wrap;
  }

  .inquiry-form-actions .button {
    flex: 1 1 140px;
  }

  .inquiry-compose-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .inquiry-compose-field-divider {
    display: none;
  }

  .inquiry-compose-category-field select {
    width: min(100%, 148px);
  }

  .coupon-wallet-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-portal-main .summary-list dt,
  .customer-logistics-summary dt,
  .customer-flow-summary dt {
    white-space: normal;
  }

  .customer-return-address-grid {
    grid-template-columns: 1fr;
  }
}

/* Product detail: required purchase options, secondary actions, detail images. */
/* Required purchase options on the product detail page and their validation message.
*/

.detail-scroll-images {
  display: block;
  margin-top: 0;
}

.detail-scroll-images img {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

/* Secondary actions on the wishlist and cart.
*/
.wishlist-card-list {
  display: grid;
  gap: 14px;
}

.wishlist-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.wishlist-card-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.wishlist-card-actions form {
  margin: 0;
}

.wishlist-card-actions .order-card-icon-action {
  font: inherit;
  cursor: pointer;
}

/* Accent modifiers for `.order-card-icon-action`. The button ring is
   `1px solid currentColor` and the glyph is `background: currentColor`, so one
   colour on the button tints both. Reused by wishlist, order and address rows. */
.icon-action-sky {
  color: var(--accent-sky);
}

.icon-action-navy {
  color: var(--accent-navy);
}

.icon-action-amber {
  color: var(--accent-amber);
}

.wishlist-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wishlist-card-title-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.wishlist-card-title-line h2 {
  margin: 3px 0;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.wishlist-price-badge {
  min-height: 28px;
  padding: 4px 9px;
  font-size: var(--fs-sm);
}

.wishlist-card .wishlist-card-summary {
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* Cart and checkout: line items with an order-summary sidebar. */
.block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cart-grid,
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}

.cart-lines {
  display: grid;
  gap: 14px;
}

@media (min-width: 901px) {
  .cart-page-section .cart-grid {
    grid-template-columns: minmax(0, 420px) 256px;
    justify-content: start;
  }

  .checkout-page-section .checkout-grid {
    grid-template-columns: minmax(0, 420px) 256px;
    justify-content: start;
  }
}

.checkout-resume-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #b9d8ce;
  border-radius: 8px;
  background: #f4fbf8;
}

.checkout-resume-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.checkout-resume-copy h2,
.checkout-resume-copy p {
  margin: 0;
}

.checkout-resume-copy h2 {
  font-size: 1.15rem;
}

.checkout-resume-eyebrow {
  color: var(--brand-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.checkout-resume-items {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.checkout-resume-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checkout-resume-actions {
  min-width: 136px;
}

.cart-line {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.cart-line-select {
  align-items: center;
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 400;
  gap: 0.35rem;
  white-space: nowrap;
  justify-content: center;
}

.cart-line-select input {
  height: 1rem;
  margin: 0;
  width: 1rem;
}

.cart-line-thumb img,
.wishlist-card-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cart-line-thumb img {
  width: 192px;
  height: 192px;
}

.cart-line-body h2,
.cart-line-body h3 {
  margin: 4px 0;
  font-size: 1.1rem;
}

.cart-line:not(.checkout-line) .cart-line-body h2 {
  font-size: var(--fs-ti);
}

.cart-page-section .cart-line:not(.checkout-line) {
  display: block;
}

.cart-page-section .cart-line:not(.checkout-line) .cart-line-content {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: 16px;
}

.cart-line-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cart-line-heading > div {
  min-width: 0;
}

.cart-line-heading .cart-line-select {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--muted);
  font-weight: 400;
}

.cart-line:not(.checkout-line) .cart-line-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cart-page-section .cart-line:not(.checkout-line) .cart-line-heading h2 {
  margin: 4px 0;
  font-size: var(--fs-sm);
}

.cart-line-body h2 a,
.cart-page-section .cart-line:not(.checkout-line) .cart-line-heading h2 a,
.wishlist-card-body h2 a {
  color: var(--ink);
}

/* Cart line items and the checkout summary sidebar: quantity, totals, wishlist move.
*/

/* Labels start at the body column edge so the pricing rows line up with the
   product name instead of sitting in a narrow right-hand block. */
.cart-line-pricing {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) max-content;
  gap: 3px 18px;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
}

.cart-line-pricing > div:not(.cart-line-pricing-divider) {
  display: contents;
}

/* One continuous rule above the payable row. Bordering the label and the value
   separately would leave the column gap visibly unlined. */
.cart-line-pricing-divider {
  grid-column: 1 / -1;
  margin-top: 5px;
  border-top: 1px solid var(--line);
}

.cart-line-pricing dt,
.cart-line-pricing dd {
  margin: 0;
}

.cart-line-pricing .cart-line-payable dt,
.cart-line-pricing .cart-line-payable dd {
  padding-top: 6px;
}

.cart-line-pricing .cart-line-payable dt,
.cart-line-pricing .cart-line-payable dd {
  color: var(--brand-dark);
  font-weight: 850;
}

.cart-line-pricing dt {
  color: var(--muted);
  font-size: var(--fs-md);
  text-align: left;
}

.cart-line-pricing dd {
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing dt,
.cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing dd {
  font-size: var(--fs-sm);
}

.cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing {
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  width: 175px;
  margin-left: auto;
}

.cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing dt {
  text-align: left;
}

.cart-line-controls {
  display: flex;
  align-items: center;
  gap: var(--icon-action-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cart-qty-form {
  display: flex;
  align-items: center;
  gap: var(--icon-action-gap);
  margin: 0;
}

.cart-qty-label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.cart-qty-form input {
  width: 76px;
  min-height: var(--control-h-md);
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  font: inherit;
  color: var(--ink);
}

.cart-line-controls > form {
  margin: 0;
}

.cart-line-controls .order-card-icon-action {
  font: inherit;
  cursor: pointer;
}

.cart-action-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cart-action-icon-apply {
  mask-image: url("../img/icons/circle-check.svg?v=ui10-12");
}

.cart-summary {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: none;
}

.cart-summary h2 {
  margin: 0;
  font-size: 1.1rem;
}

.cart-summary-list {
  display: grid;
  gap: 3px;
  margin: 0;
}

.cart-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cart-summary-list dt {
  color: var(--muted);
  font-size: var(--fs-md);
}

.cart-summary-list dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 400;
}

.cart-page-section .cart-summary h2,
.checkout-page-section .cart-summary h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-ti);
}

.cart-page-section .cart-summary-list dt,
.cart-page-section .cart-summary-list dd,
.checkout-page-section .cart-summary-list dt,
.checkout-page-section .cart-summary-list dd {
  font-size: var(--fs-sm);
}

.checkout-page-section .cart-summary .primary-action {
  font-size: 0.8125rem;
}

.checkout-page-section .checkout-price-normal dd {
  color: #8a8a8a;
}

.cart-page-section .cart-price-normal dd {
  color: #8a8a8a;
}

.checkout-page-section .checkout-price-discount dd,
.checkout-page-section .checkout-price-coupon dd,
.checkout-page-section .checkout-price-point dd {
  color: #8b1a1a;
}

.cart-page-section .cart-price-discount dd {
  color: #8b1a1a;
}

.checkout-page-section .checkout-price-sale-amount,
.checkout-page-section .checkout-price-reward dd {
  color: #104e8b;
}

.cart-page-section .cart-price-sale dd,
.cart-page-section .cart-price-reward dd {
  color: #104e8b;
}

.checkout-page-section .cart-summary-total dt {
  color: var(--brand-dark);
}

.cart-page-section .cart-summary-total dt {
  color: var(--brand-dark);
}

.cart-summary-list dd.has-discount {
  text-decoration: line-through;
}

.cart-summary-total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 850;
}

.cart-summary-total dt,
.cart-summary-total dd {
  font-weight: 850;
}

.cart-summary-total dd {
  color: var(--brand-dark);
  font-size: var(--fs-md);
}

.cart-summary-note {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--muted);
}

.cart-page-section .cart-summary-total dd,
.cart-page-section .cart-summary-note {
  font-size: var(--fs-sm);
}

.cart-empty {
  display: grid;
  gap: 16px;
  width: 100%;
}

.cart-empty .empty-state {
  display: grid;
  width: 100%;
  min-height: 160px;
  margin: 0;
  place-items: center;
  text-align: center;
}

.checkout-order {
  display: grid;
  gap: 14px;
}

.checkout-main {
  min-width: 0;
}

.checkout-order-products > .cart-lines {
  justify-items: center;
  margin-top: 0;
}

.checkout-line {
  display: block;
  align-items: start;
  width: min(100%, 420px);
  font-size: var(--fs-sm);
}

.checkout-line .checkout-product-title {
  grid-column: 1 / -1;
  width: calc(100% - 16px);
  margin: 0 auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.checkout-product-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px;
  align-items: center;
  padding-right: 8px;
  padding-left: 8px;
  padding-top: 16px;
}

.checkout-line .cart-line-thumb img {
  width: 100%;
  height: 100%;
}

.checkout-line .cart-line-thumb {
  display: block;
  min-width: 0;
  aspect-ratio: 1;
}

.checkout-line .cart-line-pricing dt,
.checkout-line .cart-line-pricing dd,
.checkout-line .checkout-coupon-toggle {
  font-size: var(--fs-sm);
}

.checkout-line .cart-line-pricing {
  grid-template-columns: max-content max-content;
  justify-self: end;
  width: max-content;
}

.checkout-option-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.checkout-option-card > h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.checkout-address-panel {
  justify-self: center;
  width: min(100%, 420px);
  padding: 16px;
  font-size: var(--fs-sm);
}

.checkout-address-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 16px);
  margin: 0 auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.checkout-address-heading h2 {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.checkout-address-heading .checkout-address-button {
  min-height: 26px;
  padding: 2px 8px;
  font-size: 0.74rem;
}

.checkout-address-content {
  width: calc(100% - 16px);
  margin: 0 auto;
  padding-top: 16px;
}

.checkout-address-panel .checkout-selected-address span {
  font-size: var(--fs-sm);
}

.checkout-flow-section > h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.checkout-selected-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checkout-selected-address > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.checkout-selected-address span,
.checkout-point-balance span,
.checkout-point-use > span {
  color: var(--muted);
  font-size: var(--fs-md);
}

.checkout-selected-address [data-checkout-selected-address-summary] {
  color: var(--ink);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.checkout-logistics-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.checkout-logistics-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.checkout-logistics-field[hidden],
.checkout-logistics-choice-group[hidden] {
  display: none !important;
}

.checkout-logistics-field-wide {
  grid-column: 1 / -1;
}

.checkout-logistics-field input:not([type="radio"]),
.checkout-logistics-field select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.checkout-logistics-choice-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-logistics-choice-group legend {
  margin: 0 0 6px;
  color: #008b8b;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.checkout-logistics-choice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.checkout-logistics-choice + .checkout-logistics-choice {
  margin-top: 6px;
}

.checkout-logistics-choice:has(input:checked) {
  background: #cdc9c9;
}

.checkout-logistics-choice input[type="radio"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
}

.checkout-logistics-choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-delivery-note > span {
  color: var(--ink);
  font-weight: 700;
}

.checkout-line-coupon {
  width: calc(100% - 16px);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.checkout-line-coupon-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkout-line-coupon-heading h3 {
  margin: 0;
  font-size: var(--fs-sm);
}

.checkout-coupon-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 750;
  cursor: pointer;
}

.checkout-coupon-toggle::after {
  display: inline-block;
  margin-left: 7px;
  content: "▾";
  color: var(--muted);
}

.checkout-coupon-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.checkout-coupon-panel {
  padding-top: 4px;
}

.checkout-line-coupon-heading span {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.checkout-address-button,
.checkout-use-all-points {
  min-height: 32px;
  padding: 0 11px;
  flex: 0 0 auto;
  font-size: var(--fs-sm);
}

.checkout-address-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: min(720px, calc(100vh - 48px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.checkout-address-dialog::backdrop {
  background: rgba(20, 34, 31, 0.48);
}

.checkout-address-picker-dialog {
  font-size: var(--fs-sm);
}

.checkout-address-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.checkout-address-dialog-head h2,
.checkout-address-dialog-head p {
  margin: 0;
}

.checkout-address-dialog-head h2 {
  margin-top: 4px;
  font-size: var(--fs-ti);
}

.checkout-address-picker-dialog .checkout-address-dialog-head {
  align-items: center;
}

.checkout-address-picker-dialog .checkout-address-dialog-head h2 {
  margin-top: 0;
}

.checkout-address-dialog-head-actions {
  display: flex;
  align-items: center;
  gap: var(--icon-action-gap);
}

.checkout-address-dialog-eyebrow {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
}

.checkout-address-dialog-close {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 750;
  cursor: pointer;
}

.checkout-address-options {
  display: grid;
  gap: 10px;
  max-height: min(460px, 55vh);
  margin: 0;
  padding: 18px 22px;
  overflow-y: auto;
  border: 0;
}

.checkout-address-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.checkout-address-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.checkout-address-option input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
}

.checkout-address-option > span,
.checkout-address-option > span > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.checkout-address-option > span > span {
  color: var(--muted);
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

.checkout-address-picker-dialog .checkout-address-option > span > span {
  font-size: inherit;
}

.checkout-address-option small {
  margin-left: 7px;
  color: var(--brand-dark);
  font-size: var(--fs-xs);
}

.checkout-address-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
}

.customer-return-dialog form {
  margin: 0;
}

.customer-return-dialog {
  font-size: var(--fs-sm);
}

.customer-return-dialog .checkout-address-dialog-head {
  align-items: center;
}

.customer-return-dialog .checkout-address-dialog-head h2 {
  margin-top: 0;
  font-size: var(--fs-ti);
}

.customer-return-dialog-action {
  cursor: pointer;
}

.customer-return-dialog-action-cancel {
  border-color: #ff82ab;
  color: #ff82ab;
}

.customer-return-dialog-action-cancel:hover,
.customer-return-dialog-action-cancel:focus-visible {
  border-color: #db7093;
  background: #fff0f5;
  color: #db7093;
}

.customer-return-dialog-action-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.customer-return-dialog-action-icon-cancel {
  mask-image: url("../img/icons/cancel.svg");
}

.customer-return-dialog-action-icon-confirm {
  mask-image: url("../img/icons/circle-check.svg?v=ui10-12");
}

.customer-return-dialog [data-pickup-source-panel][hidden] {
  display: none;
}

.customer-return-dialog-body,
.customer-return-method-grid,
.customer-return-manual-grid,
.customer-return-fieldset {
  display: grid;
  gap: 12px;
}

.customer-return-dialog-body {
  padding: 18px 22px;
  font-size: var(--fs-sm);
}

.customer-return-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.customer-return-fieldset legend {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.customer-return-source-option {
  padding: 12px;
}

.customer-return-address-panel {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.customer-return-address-panel p {
  margin: 0;
  overflow-wrap: anywhere;
}

.customer-return-manual-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-return-manual-summary[hidden] {
  display: none;
}

.customer-return-manual-dialog {
  font-size: var(--fs-sm);
}

.customer-return-manual-dialog .checkout-address-dialog-head {
  align-items: center;
}

.customer-return-manual-dialog .checkout-address-dialog-head h2 {
  margin-top: 0;
  font-size: var(--fs-ti);
}

.customer-return-manual-dialog-body {
  max-height: min(600px, calc(100vh - 130px));
  padding: 18px 22px;
  overflow-y: auto;
}

.customer-return-postcode-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.customer-return-contact-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
}

.customer-return-postcode-search {
  width: 38px;
  height: 38px;
}

.customer-return-manual-grid,
.customer-return-method-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-coupon-group {
  min-width: 0;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}

.checkout-coupon-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: var(--fs-sm);
}

.checkout-coupon-option > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}

.checkout-coupon-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.checkout-coupon-expiry {
  font-size: var(--fs-xs);
}

.checkout-coupon-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--icon-action-gap);
  margin-top: 14px;
}

.checkout-coupon-action {
  cursor: pointer;
}

.checkout-coupon-action-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.checkout-coupon-action-cancel {
  border-color: #ff82ab;
  color: #ff82ab;
}

.checkout-coupon-action-cancel:hover,
.checkout-coupon-action-cancel:focus-visible {
  border-color: #db7093;
  background: #fff0f5;
  color: #db7093;
}

.checkout-coupon-action-icon-cancel {
  mask-image: url("../img/icons/cancel.svg");
}

.checkout-coupon-action-icon-confirm {
  mask-image: url("../img/icons/circle-check.svg?v=ui10-12");
}

.checkout-line-coupon .checkout-note {
  font-size: var(--fs-sm);
}

.checkout-point-panel {
  justify-self: center;
  width: min(100%, 420px);
  padding: 16px;
  font-size: var(--fs-sm);
}

.checkout-point-fields > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-sm);
}

.checkout-point-heading-divider {
  display: none;
}

.checkout-point-heading-rule {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 1px;
  margin-bottom: 4px;
  background: var(--line);
}

.checkout-point-fields {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
  width: calc(100% - 16px);
  margin: 0 auto;
}

.checkout-point-balance {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--control-h-md);
  margin: 0;
}

.checkout-point-balance strong {
  color: #3a5fcd;
  font-weight: 400;
  white-space: nowrap;
}

.checkout-point-panel .checkout-point-balance span {
  font-size: var(--fs-sm);
}

.checkout-point-divider {
  grid-column: 2;
  grid-row: 3;
  color: var(--cc-bar);
  font-weight: 400;
}

.checkout-point-use-controls {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.checkout-point-use {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.checkout-point-panel .checkout-use-all-points {
  min-height: 26px;
  padding: 2px 8px;
  font-size: 0.74rem;
}

.checkout-point-use input {
  width: 112px;
  min-width: 88px;
  min-height: var(--control-h-md);
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.checkout-point-use input:focus-visible {
  border-color: var(--brand);
  outline: 2px solid rgb(15 125 93 / 18%);
  outline-offset: 1px;
}

.checkout-point-note {
  grid-column: 1 / -1;
  grid-row: 4;
}

.smartro-payment-summary {
  margin: 20px 0;
}

.payment-result-panel {
  gap: 14px;
}

.payment-result-eyebrow,
.payment-result-message {
  margin: 0;
}

.payment-result-eyebrow {
  color: #4f5965;
  font-size: 0.9rem;
  font-weight: 750;
}

.payment-result-panel[data-payment-result="success"] .payment-result-eyebrow {
  color: #17643a;
}

.payment-result-panel[data-payment-result="failed"] .payment-result-eyebrow,
.payment-result-panel[data-payment-result="invalid"] .payment-result-eyebrow {
  color: #a12f2f;
}

.payment-result-panel[data-payment-result="pending"] .payment-result-eyebrow {
  color: #8a5a00;
}

.payment-result-message {
  color: #3f4652;
  line-height: 1.65;
}

.payment-result-reference {
  margin: 4px 0;
}

.payment-result-reference > div {
  display: grid;
  grid-template-columns: auto auto minmax(0, auto);
  gap: 8px;
  align-items: baseline;
  justify-content: start;
}

.payment-result-reference dt,
.payment-result-reference dd {
  margin: 0;
}

.payment-result-reference dd {
  overflow-wrap: anywhere;
  font-weight: 750;
}

.payment-result-actions {
  margin-top: 8px;
}

.local-payment-simulation-panel {
  gap: 14px;
}

.local-payment-simulation-form {
  margin-top: 4px;
}

.local-payment-simulation-actions button {
  min-height: 42px;
}

.wishlist-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.wishlist-card-thumb img {
  width: 108px;
  height: 108px;
}

@media (max-width: 900px) {
  .cart-grid,
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .checkout-resume-panel {
    grid-template-columns: 1fr;
  }

  .checkout-resume-actions,
  .checkout-resume-actions .button {
    width: 100%;
  }

  .cart-line,
  .checkout-line {
    gap: 12px;
  }

  .cart-line {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-content {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 0;
    padding-top: 12px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-thumb img {
    width: 148px;
    height: 148px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing {
    grid-template-columns: max-content max-content;
    column-gap: 28px;
    justify-content: space-between;
    width: 147px;
    margin-left: auto;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing dt {
    text-align: left;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing-divider {
    margin-left: 0;
    width: 100%;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-qty-form input {
    width: 48px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-controls {
    width: 147px;
    margin-left: auto;
  }

  .checkout-line {
    display: block;
  }

  .checkout-product-summary {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
  }

  .checkout-line .cart-line-pricing {
    grid-template-columns: max-content max-content;
    column-gap: 6px;
    justify-content: normal;
    justify-self: end;
    width: max-content;
  }

  .checkout-line .checkout-product-title,
  .checkout-line-coupon,
  .checkout-address-heading,
  .checkout-address-content,
  .checkout-point-fields {
    width: calc(100% - 24px);
  }

  .checkout-coupon-option > span {
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .cart-line-thumb img {
    width: 104px;
    height: 104px;
  }

  .checkout-selected-address {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-logistics-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkout-logistics-choice {
    gap: 7px;
    padding: 8px 9px;
  }

  .customer-return-manual-grid,
  .customer-return-method-grid {
    grid-template-columns: 1fr;
  }

  .customer-return-manual-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-point-fields {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: stretch;
  }

  .checkout-point-fields > h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .checkout-point-heading-divider {
    grid-column: 2;
    grid-row: 1;
    display: inline;
    align-self: center;
    color: var(--cc-bar);
    font-weight: 400;
  }

  .checkout-point-balance {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
  }

  .checkout-point-heading-rule {
    grid-row: 2;
  }

  .checkout-point-divider {
    display: none;
  }

  .checkout-point-use-controls {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: center;
    flex-direction: row;
  }

  .checkout-point-use {
    flex: 1 1 auto;
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-point-use input {
    width: 100%;
  }

  .checkout-use-all-points {
    flex: 0 0 auto;
    width: auto;
  }

  .checkout-point-note {
    grid-row: 4;
  }

  .cart-line-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .cart-line-heading .cart-line-select {
    justify-content: flex-start;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-heading {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-heading > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-heading .cart-line-select {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .wishlist-card {
    grid-template-columns: 1fr;
  }

  .wishlist-card-heading {
    align-items: center;
  }

}

@media (max-width: 375px) {
  .cart-page-section .cart-line:not(.checkout-line) .cart-line-content {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-thumb img {
    width: 120px;
    height: 120px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-pricing {
    column-gap: 24px;
    width: 142px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-line-controls {
    width: 142px;
  }

  .checkout-line .cart-line-pricing {
    column-gap: 4px;
  }

  .cart-page-section .cart-line:not(.checkout-line) .cart-qty-form input {
    width: 42px;
    padding-inline: 6px;
  }
}

/* Checkout order page. */

.checkout-note {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.field-note {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.button:disabled,
.button[disabled],
.quantity-control button:disabled,
.quantity-control input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.product-purchase-disabled-note {
  margin: 12px 0;
}

/* Modal overlay (add-to-cart confirmation popup). */
[x-cloak] {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(21, 52, 45, 0.45);
}

.modal-dialog {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: none;
  text-align: center;
}

.catalog-modal-dialog {
  max-width: 760px;
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  border-radius: var(--radius-lg);
  text-align: left;
}

@media (max-width: 760px) {
  .date-range-control {
    width: 100%;
  }

  .period-bar .date-box {
    min-width: 0;
    flex: 1 1 150px;
  }
}

@media (max-width: 560px) {
  .order-history-card {
    padding: 16px;
  }

  .order-history-card .order-card-head {
    align-items: center;
  }

  .order-card-body {
    display: contents;
  }

  .order-product-link,
  .order-product-image {
    width: 108px;
    height: 108px;
  }

  .order-summary-list dt {
    white-space: normal;
  }

  .order-redemption-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-dialog.order-redemption-dialog {
    padding: 20px 16px;
  }

  .order-redemption-dialog .order-redemption-field,
  .order-redemption-fallback .order-redemption-field {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }
}