/* Theme 21 account pages share the product and checkout card styling. */
.fashion-storefront #react-spa-root .fashion-account-layout { grid-template-columns:calc(max(16px,(100% - 1200px)/2)) 240px minmax(0,1fr) calc(max(16px,(100% - 1200px)/2)); column-gap:24px; row-gap:24px; padding:28px 0 64px; }
.fashion-storefront #react-spa-root .fashion-account-navigation { padding:10px; border:1px solid #0000001a; border-radius:14px; background:var(--theme-background); }
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav { display:grid; gap:4px; margin:0; }
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item { margin:0; border:0; padding:0; background:transparent; }
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item a { display:flex; align-items:center; min-height:46px; padding:12px 14px; border:0; border-radius:8px; font-size:13px; line-height:1.5; font-weight:500; text-decoration:none; background:transparent; color:var(--theme-text); }
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item.active { background:transparent!important; }
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item.active a,
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item a:hover { background:var(--theme-text); color:var(--theme-background); }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-header,.react-addresses-header,.react-orders-header) { background:none; padding:0 16px 12px; margin:0; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-header,.react-addresses-header,.react-orders-header) h1 { font-size:30px!important; line-height:1.4; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-panel,.react-address-panel,.react-address-card,.react-orders-table,.react-orders-empty,.react-address-empty) { padding:24px; border:1px solid #0000001a!important; border-radius:14px!important; background:var(--theme-background)!important; box-shadow:none; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-account-shell { gap:24px; }
.fashion-storefront #react-spa-root .react-account-dashboard h2 { margin-bottom:12px; font-size:25px; line-height:1.3; }
.fashion-storefront #react-spa-root .react-account-dashboard p { font-size:14px; line-height:1.8; }
.fashion-storefront #react-spa-root .react-account-dashboard a { color:var(--theme-text); text-decoration:underline; }
.fashion-storefront #react-spa-root .react-account-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.fashion-storefront #react-spa-root .react-account-tile { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:100px; padding:20px; border:1px solid #0000001a; border-radius:12px; background:var(--theme-background); color:var(--theme-text); text-align:start; }
.fashion-storefront #react-spa-root .react-account-tile strong { font-weight:500; line-height:1.5; }
.fashion-storefront #react-spa-root .react-account-tile::after { content:'→'; font-size:22px; }
.fashion-storefront #react-spa-root [dir=rtl] .react-account-tile::after,
html[dir=rtl] .fashion-storefront #react-spa-root .react-account-tile::after { content:'←'; }
.fashion-storefront #react-spa-root .react-account-tile:hover { border-color:var(--theme-text); background:#00000003; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-grid,.react-address-grid-2) { gap:20px 16px; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-field,.react-address-field) { gap:8px; margin:0; font-size:13px; line-height:1.5; min-width:0; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-field,.react-address-field) :is(input,select,textarea) { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #0000001a; border-radius:8px!important; background:var(--theme-background); color:var(--theme-text); font-size:14px!important; }
.fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-primary,.react-address-primary,.react-orders-view) { display:inline-flex; align-items:center; justify-content:center; min-height:46px; min-width:0; padding:12px 20px; border-radius:8px; background:var(--theme-text); color:var(--theme-background); font-size:13px; font-weight:500; text-decoration:none; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-account-primary { margin-top:24px; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-addresses-shell { display:flex; flex-direction:column; gap:20px; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-addresses-shell > .react-address-primary { order:-1; align-self:flex-start; margin:0; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-address-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.fashion-storefront #react-spa-root .react-address-card h2 { font-size:18px; font-weight:600; margin:0 0 14px; }
.fashion-storefront #react-spa-root .react-address-card__body { font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.fashion-storefront #react-spa-root .react-address-actions { display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid #0000001a; padding-top:16px; margin-top:18px; }
.fashion-storefront #react-spa-root .react-address-actions a { padding:8px 14px; border:1px solid #0000001a; border-radius:7px; font-size:13px; color:var(--theme-text); background:transparent; }
.fashion-storefront #react-spa-root .react-address-form-shell { display:grid; gap:20px; }
.fashion-storefront #react-spa-root .fashion-account-layout .react-orders-table { padding:0; overflow:hidden; }
.fashion-storefront #react-spa-root :is(.react-orders-head,.react-orders-row) { grid-template-columns:76px 90px minmax(0,1fr) minmax(90px,1fr) minmax(100px,1fr); gap:14px; padding:18px 20px; }
.fashion-storefront #react-spa-root .react-orders-head { background:#00000003; font-size:12px; font-weight:500; }
.fashion-storefront #react-spa-root .react-orders-row { font-size:13px; }
.fashion-storefront #react-spa-root .react-orders-status { justify-self:start; padding:6px 10px; border-radius:30px; background:#00000006; font-size:12px; color:var(--theme-text); }
.fashion-storefront #react-spa-root .react-orders-row .react-orders-view { padding:8px 12px; min-height:40px; }
.fashion-storefront #react-spa-root .react-track-form { gap:16px; }
@media(max-width:1100px) {
 .fashion-storefront #react-spa-root .fashion-account-layout { grid-template-columns:0 210px minmax(0,1fr) 0; column-gap:16px; }
 .fashion-storefront #react-spa-root .react-account-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fashion-storefront #react-spa-root :is(.react-orders-head,.react-orders-row) { grid-template-columns:66px 70px minmax(0,1fr) 80px 100px; gap:10px; padding:16px 12px; }
}
@media(max-width:991px) {
 .fashion-storefront #react-spa-root .fashion-account-layout .react-address-grid { grid-template-columns:minmax(0,1fr); }
 .fashion-storefront #react-spa-root .react-orders-head { display:none; }
 .fashion-storefront #react-spa-root .react-orders-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:20px; }
 .fashion-storefront #react-spa-root .react-orders-row > strong { grid-column:1; grid-row:1; font-size:16px; }
 .fashion-storefront #react-spa-root .react-orders-row > .react-orders-view { grid-column:2; grid-row:1; }
 .fashion-storefront #react-spa-root .react-orders-row > span { grid-column:1/-1; }
 .fashion-storefront #react-spa-root .react-orders-row > span[data-label]::before { content:attr(data-label) ': '; font-weight:500; }
}
@media(max-width:767px) {
 .fashion-storefront #react-spa-root .fashion-account-layout { display:flex; flex-direction:column; padding:20px 16px 40px; gap:24px; }
 .fashion-storefront #react-spa-root .fashion-account-navigation { width:100%; padding:8px; }
 .fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:0 0 4px; }
 .fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item { flex:0 0 auto; }
 .fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item a { white-space:nowrap; min-height:44px; padding:10px 14px; }
 .fashion-storefront #react-spa-root .fashion-account-content { width:100%; }
 .fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-header,.react-addresses-header,.react-orders-header) { padding:0 0 20px; }
 .fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-header,.react-addresses-header,.react-orders-header) h1 { font-size:26px!important; text-align:start; }
 .fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-panel,.react-address-panel,.react-address-card) { padding:20px 16px; border-radius:12px!important; }
 .fashion-storefront #react-spa-root .react-account-tile { padding:16px; min-height:90px; }
 .fashion-storefront #react-spa-root .react-account-dashboard h2 { font-size:22px; }
 .fashion-storefront #react-spa-root .fashion-account-layout :is(.react-account-grid,.react-address-grid-2) { grid-template-columns:minmax(0,1fr); }
}
.fashion-storefront #react-spa-root .fashion-account-layout,
.fashion-storefront #react-spa-root .fashion-account-layout * { box-sizing:border-box; }
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header) { box-sizing:border-box; width:100%; max-width:100%; background:none; padding:28px 16px 24px; margin:0; }
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header) h1 { font-size:30px!important; line-height:1.4; }
@media(max-width:767px) {
 .fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav { flex-direction:row; }
 .fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item { width:auto; }
}

/* Complete account navigation and purpose-specific form/results details. */
.fashion-storefront #react-spa-root .fashion-account-icon { flex:0 0 20px; display:block; }
.fashion-storefront #react-spa-root .fashion-account-navigation a { gap:10px; }
.fashion-storefront #react-spa-root .react-account-tile { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:14px; }
.fashion-storefront #react-spa-root .react-account-tile .fashion-account-icon { width:24px; height:24px; }
.fashion-storefront #react-spa-root .fashion-account-section-title { margin:0 0 22px; font-size:18px; font-weight:600; }
.fashion-storefront #react-spa-root .fashion-account-password { position:relative; }
.fashion-storefront #react-spa-root .fashion-account-password input { padding-inline-end:56px!important; }
.fashion-storefront #react-spa-root .fashion-password-toggle { display:grid; place-items:center; position:absolute; inset-inline-end:2px; top:2px; width:44px; height:44px; min-width:0; padding:0; border:0; border-radius:6px; background:transparent; color:var(--theme-text); }
.fashion-storefront #react-spa-root .react-track-form .react-account-primary { margin:0; }
.fashion-storefront #react-spa-root .react-track-table th { background:#00000003; }
.fashion-storefront #react-spa-root .react-track-table :is(th,td) { padding:16px; border:0; border-bottom:1px solid #0000001a; font-size:13px; }
.fashion-storefront #react-spa-root .react-track-results h2 { font-size:20px; }
@media(max-width:991px) {
 .fashion-storefront #react-spa-root .react-track-table table { min-width:0; }
 .fashion-storefront #react-spa-root .react-track-table thead { display:none; }
 .fashion-storefront #react-spa-root .react-track-table tbody { display:grid; gap:16px; }
 .fashion-storefront #react-spa-root .react-track-table tr { display:grid; padding:16px; border:1px solid #0000001a; border-radius:10px; }
 .fashion-storefront #react-spa-root .react-track-table td { display:grid; grid-template-columns:minmax(80px,.7fr) minmax(0,1fr); gap:12px; text-align:start; padding:8px 0; border:0; overflow-wrap:anywhere; }
 .fashion-storefront #react-spa-root .react-track-table td::before { content:attr(data-label); opacity:.7; }
 .fashion-storefront #react-spa-root .react-track-table td[colspan] { display:block; }
 .fashion-storefront #react-spa-root .react-track-table td[colspan]::before { content:none; }
}
@media(max-width:575px) {
 .fashion-storefront #react-spa-root .react-account-tile { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
 .fashion-storefront #react-spa-root .react-account-tile .fashion-account-icon { grid-column:1/-1; }
}