/* F9: native customer pages using the static form/card system.
   Loaded only on the fourteen standard account controllers in theme.yml.
   Scope to the content wrapper so header/footer and checkout stay independent. */
#wrapper > .container { max-width: var(--to-container-wide); padding-inline: var(--to-gutter); }
#wrapper > .container--limited-sm { max-width: 620px; }
#wrapper > .container--limited-md { max-width: 760px; }
#wrapper #center-column { min-width: 0; padding-bottom: 4rem; }
#wrapper .page-header { margin-bottom: 1.75rem; }
#wrapper .page-title-section { margin: 0; font-family: var(--to-font-display); font-size: 3rem; font-weight: 300; line-height: 1.08; letter-spacing: -.015em; text-transform: none; overflow-wrap: anywhere; }
#my-account #wrapper .page-title-section { font-size: 3.5rem; }
#wrapper #content { min-width: 0; font-size: 1rem; }
#wrapper #content > p { margin-bottom: 1.5rem; color: var(--to-color-text-muted); line-height: 1.55; }
#wrapper #content :is(p,address,.form-check-label,.alert) { overflow-wrap: anywhere; }
#wrapper #content :is(h2,h3) { font-weight: 300; line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere; }
#wrapper #content h2 { font-size: 2rem; margin-bottom: 1.25rem; }
#wrapper #content h3 { font-size: 1.5rem; }
#wrapper :is(.page-footer, .account-menu__back) { margin-top: 1.5rem; }
#wrapper hr { margin-block: 1.75rem; border-color: var(--to-color-border); opacity: 1; }

/* Keep field order, hidden inputs, validation and country refresh markup intact. */
#wrapper :is(.login,.register-form,.forgotten-password,.address-form,#identity #customer-form,#password #content > form,#guestOrderTrackingForm,.order-message-form) { padding: 1.75rem; border-radius: var(--to-radius-card); background: var(--to-color-surface); box-shadow: 0 24px 70px rgba(0,0,0,.1); }
#wrapper #content :is(.form-control,.form-select) { min-height: 3rem; padding: .75rem .875rem; border-radius: var(--to-radius-control); font-size: 1rem; line-height: 1.4; }
#wrapper #content .form-select { padding-inline-end: 2.75rem; }
#wrapper #content textarea.form-control { min-height: 8rem; }
#wrapper #content .form-label { font-size: .875rem; font-weight: 500; }
#wrapper #content :is(.form-text,.invalid-feedback) { font-size: .875rem; }
#wrapper #content .input-group > .btn { padding: .5rem .75rem; border-radius: 0 var(--to-radius-control) var(--to-radius-control) 0; font-size: 1rem; }
#wrapper #content .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
#wrapper #content .buttons-wrapper { gap: .75rem; flex-wrap: wrap; }
#wrapper #content .buttons-wrapper .btn { max-width: 100%; font-size: 1rem; }
#wrapper #content :is(.buttons-wrapper .btn-primary,form > .btn-primary) { padding: .9375rem 1.5rem; font-size: 1.0625rem; }
#wrapper .login__register-prompt { padding-top: .25rem; }
#wrapper .register-form__login-prompt { margin-bottom: 0; }
#wrapper :is(.register-form__login-prompt,.form-check-label) a { text-decoration: underline; text-underline-offset: .2em; }

/* Parent sidebar/back-link switch stays at 992px, including its sign-out link. */
#wrapper .account-menu--sidebar { border: 1px solid var(--to-color-border); border-radius: var(--to-radius-card); padding: 1.25rem; background: var(--to-color-surface); z-index: auto; }
#wrapper .account-menu__title { margin-bottom: 1rem; font-size: 1.25rem; font-weight: 500; }
#wrapper .account-menu__nav { display: flex; flex-direction: column; gap: .375rem; }
#wrapper .account-menu__link { min-height: 2.75rem; border-radius: var(--to-radius-control); font-size: 1rem; font-weight: 400; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
#wrapper .account-menu__link--active { background: var(--to-color-surface-cool); color: var(--to-color-text); font-weight: 500; }
#wrapper .account-menu--main { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .875rem; }
#wrapper .account-menu--main .account-menu__link { align-items: flex-start; flex-direction: column; gap: .875rem; padding: 1.5rem; border: 1px solid var(--to-color-border); border-radius: var(--to-radius-card); background: var(--to-color-surface-cool); font-size: 1.0625rem; font-weight: 500; }
#wrapper .account-menu--main .account-menu__link:hover { border-color: var(--to-color-brand); color: var(--to-color-action-hover); }
#wrapper .account-menu--main .account-menu__icon { font-size: 2rem; }

#wrapper :is(.addresses__list,.order-addresses__list) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .875rem; }
#wrapper .address-card { min-width: 0; border: 1px solid var(--to-color-border); border-radius: var(--to-radius-card); background: var(--to-color-surface); }
#wrapper .address-card__container { padding: 1.5rem; }
#wrapper #content .address-card__alias { font-size: 1.0625rem; font-weight: 500; }
#wrapper .address-card__content { font-size: 1rem; line-height: 1.55; }
#wrapper .address-card__actions { flex-wrap: wrap; gap: 1rem; }
#wrapper .address-card__actions a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-underline-offset: .2em; }
#wrapper .address-card--add-address { padding: 1.5rem; background: var(--to-color-surface-cool); text-decoration: none; }

/* Native tables keep their responsive roles, labels and parent column counts.
   Do not alter configured status badge colours or hide empty/error states. */
#wrapper :is(.order-history,.grid-table) { min-width: 0; max-width: 100%; font-size: .9375rem; }
#wrapper :is(.order-history__inner,.grid-table__inner) { padding: .25rem; }
#wrapper :is(.order-history__header,.grid-table__header) { font-size: .875rem; font-weight: 500; }
#wrapper :is(.order-history__row,.grid-table__row) { border-color: var(--to-color-border); }
#wrapper :is(.order-history__cell,.grid-table__cell) { min-width: 0; overflow-wrap: anywhere; }
#wrapper .order-history__cell--reference { font-family: var(--to-font-mono); font-size: .8125rem; }
#wrapper .order-history__cell--actions { gap: .5rem; flex-wrap: wrap; }
#wrapper :is(.order-history__cell--actions,.grid-table__cell) .btn-sm { padding: .5rem .75rem; font-size: .875rem; }
#wrapper .order-infos__summary { padding: 1.5rem; border-radius: var(--to-radius-card); background: var(--to-color-surface-cool); }
#wrapper .order-infos__reference { font-family: var(--to-font-mono); font-size: .875rem; overflow-wrap: anywhere; }
#wrapper .order-infos__actions { flex-wrap: wrap; gap: .75rem; }
#wrapper .order-product__infos { min-width: 0; gap: 1rem; }
#wrapper .order-product__image { width: 5rem; flex-shrink: 0; }
#wrapper .order-product__img { width: 5rem; height: 5rem; object-fit: contain; border-radius: .75rem; background: var(--to-color-surface-cool); }
#wrapper .order-product__content { min-width: 0; }
#wrapper .order-product__name { font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
#wrapper .order-message { border-color: var(--to-color-border); border-radius: var(--to-radius-card); padding: 1.25rem; }
#wrapper .order-message__date { font-family: var(--to-font-mono); font-size: .75rem; }
#wrapper #order-return-infos { border-radius: var(--to-radius-card); }
#wrapper #order-return-infos > .card-block { padding: 1.5rem; }

@media (min-width: 992px) {
  #wrapper #center-column > .row:has(> .col-lg-3 > .account-menu--sidebar) { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 2.5rem; margin-inline: 0; }
  #wrapper #center-column > .row:has(> .col-lg-3 > .account-menu--sidebar) > :is(.col-lg-3,.col-lg-9) { min-width: 0; width: auto; padding-inline: 0; }
  #wrapper .account-menu--sidebar { top: 5.25rem; max-height: calc(100vh - 6.5rem); }
}

@media (max-width: 960px) {
  #wrapper .page-title-section { font-size: 2rem; }
  #my-account #wrapper .page-title-section { font-size: 2.5rem; }
  #wrapper .account-menu--main { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  #wrapper :is(.login,.register-form,.forgotten-password,.address-form,#identity #customer-form,#password #content > form,#guestOrderTrackingForm,.order-message-form) { padding: 1.25rem; }
  #wrapper :is(.account-menu--main,.addresses__list,.order-addresses__list) { grid-template-columns: minmax(0,1fr); }
  #wrapper #content .buttons-wrapper { align-items: stretch; }
  #wrapper #content .buttons-wrapper > .btn { width: 100%; }
  #wrapper #content .input-group > .btn { width: auto; }
  #wrapper #content :is(h2,h3) { font-size: 1.5rem; }
  #wrapper :is(.order-history__cell,.grid-table__cell) { column-gap: .75rem; }
  #wrapper .order-product__infos { flex-wrap: wrap; }
}