/* Presentation only: native account links, hooks and forms remain unchanged. */
body#order-detail #main .page-header h1,
body#order-confirmation #content-hook_order_confirmation .card-title { font-size: 30px; font-weight: 300; line-height: 1.3; text-transform: none; }
body#order-detail #content { box-shadow: none; }
body#order-detail .box,
body#order-confirmation #main > .card { border: 1px solid var(--jd-border); box-shadow: none; }
body#order-detail .box { padding: 20px; margin-bottom: 24px; overflow-wrap: anywhere; }
body#order-detail .box h3,
body#order-detail .box h4,
body#order-confirmation #main .h3 { font-weight: 400; line-height: 1.5; text-transform: none; }
body#order-detail address,
body#order-detail #order-infos li,
body#order-confirmation #order-details li { line-height: 1.7; }
body:is(#history, #order-detail) .label { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.5; }
body:is(#history, #order-detail) .table th,
body:is(#history, #order-detail) .table td { vertical-align: middle; }
body#history .order-actions a,
body#history .orders .order a,
body#order-detail #order-infos a,
body#order-detail .page-footer .account-link,
body#order-confirmation #content-hook_order_confirmation a { display: inline-flex; align-items: center; min-height: 44px; }
body#history .order-actions a { margin: 0 8px; }
body#history .orders .order { padding: 20px 0; border-bottom: 1px solid var(--jd-border); }
body#history .orders .order .text-xs-right a { justify-content: center; min-width: 44px; }
body#order-detail .order-message-form .form-control,
body#order-detail .order-message-form .btn { min-height: 44px; font-size: 16px; }
body#order-detail .order-message-form textarea { min-height: 132px; resize: vertical; }
body#order-confirmation #order-details { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  body#order-detail #main .page-header h1,
  body#order-confirmation #content-hook_order_confirmation .card-title { font-size: 25px; }
  body#order-detail .box { padding: 16px; }
  body#order-detail #order-infos .row > [class*='col-xs-'] { width: 100%; text-align: left !important; }
  body#order-detail .order-message-form .btn { width: 100%; }
  body#order-detail .order-message-form .form-control-label { padding-top: 0; padding-bottom: 8px; }
  body#order-confirmation #order-details { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--jd-border); }
}
body:is(#history, #password) #main .page-header h1 { font-size: 30px; font-weight: 300; line-height: 1.3; text-transform: none; }
body:is(#history, #password) #content { box-shadow: none; }
body#history #content > h6 { font-weight: 400; line-height: 1.65; }
body#history #content > .alert-info { padding: 24px; color: var(--jd-ink); background: var(--jd-surface); border: 1px solid var(--jd-border); line-height: 1.65; }
body#history .jd-empty-orders { margin: 24px 0; }
body#history .jd-empty-orders a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
body#password #content { max-width: 760px; margin: 0 auto 24px; padding: 24px; border: 1px solid var(--jd-border); }
body#password .jd-password-fields { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 24px auto 0; }
body#password .jd-password-fields .form-control { min-height: 44px; font-size: 16px; }
body#password .jd-password-fields .btn { min-height: 44px; white-space: normal; }
body:is(#history, #password) .page-footer .account-link { display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; }
body#addresses #content { display: flex; flex-wrap: wrap; box-shadow: none; }
body#addresses #content > [class*='col-'] { display: flex; margin-bottom: 24px; }
body#addresses #content > #notifications,
body#addresses #content > .alert,
body#addresses #content > .addresses-footer { width: 100%; }
body#addresses #content .address { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; border: 1px solid var(--jd-border); box-shadow: none; }
body#addresses #content .address-body { padding: 20px; overflow-wrap: anywhere; }
body#addresses #content address { line-height: 1.65; }
body#addresses #content .address-footer { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding: 8px 16px; border-color: var(--jd-border); }
body#addresses #content .address-footer a,
body#addresses #content .addresses-footer a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--jd-pink-text); }
body#addresses #content a[data-link-action='delete-address'] { color: var(--jd-muted); }
body#addresses #content a:hover { text-decoration: underline; }
body:is(#address, #addresses) .page-footer .account-link { display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; }
body:is(#my-account, #identity, #addresses, #address) #main .page-header h1 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.3;
  text-transform: none;
}
body#my-account #content .links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  padding: 0 15px;
}
body#my-account #content .links a {
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--jd-ink);
  text-align: left;
  text-transform: none;
}
body#my-account #content .links a .link-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 104px;
  padding: 20px 8px;
  border-bottom: 1px solid var(--jd-border);
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body#my-account #content .links a i {
  flex: 0 0 28px;
  padding: 0;
  color: var(--jd-pink-text);
  font-size: 28px;
}
body#my-account #content .links a:hover .link-item,
body#my-account #content .links a:focus-visible .link-item {
  background: var(--jd-surface);
  color: var(--jd-pink-text);
}
body:is(#identity, #address) #content { max-width: 960px; box-shadow: none; }
body:is(#identity, #address) #content .form-group { margin-bottom: 24px; }
body:is(#identity, #address) #content .form-control { min-height: 44px; color: var(--jd-ink); }
body:is(#identity, #address) #content .form-control-comment {
  color: var(--jd-muted);
  font-size: 13px;
  line-height: 1.5;
}
body:is(#identity, #address) #content .input-group-btn > .btn { min-height: 44px; background: var(--jd-muted); color: #fff; }
body:is(#identity, #address) #content .btn-primary { min-height: 44px; }
body:is(#identity, #address) #content .custom-radio input[type=radio]:checked + span { background-color: var(--jd-pink-text); }
body:is(#identity, #address) #content .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: var(--jd-pink-text); }
body:is(#identity, #address) #content .custom-radio:focus-within,
body:is(#identity, #address) #content .custom-checkbox:focus-within {
  outline: 2px solid var(--jd-pink-text);
  outline-offset: 3px;
}
@media (max-width: 991px) {
  body#my-account #content .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body:is(#history, #password) #main .page-header h1 { font-size: 25px; }
  body#password #content { padding: 16px; }
  body#addresses #content > [class*='col-'] { width: 100%; }
  body#addresses #content .address-body { min-height: 0; }
  body:is(#my-account, #identity, #addresses, #address) #main .page-header h1 { font-size: 25px; }
  body#my-account #content .links { grid-template-columns: minmax(0, 1fr); }
  body#my-account #content .links a .link-item { min-height: 76px; padding: 16px 4px; }
  body:is(#identity, #address) #content { padding: 16px; }
  body:is(#identity, #address) #content .form-control-label { padding-top: 0; padding-bottom: 8px; }
  body:is(#identity, #address) #content .form-control-comment:empty { display: none; }
  body:is(#identity, #address) #content .form-footer .btn-primary { width: 100%; float: none !important; }
}