/* ============================================================
   Deviceland — utility pages (account, login, 404)

   The masthead is fixed, and the clearance rule that accounts for it lives in
   pdp.css, which only loads on product pages. Without it the breadcrumb on
   these pages rendered underneath the header and was clipped. The offset is
   restated here rather than moved, because pdp.css also carries a mobile
   overflow guard these pages must not inherit.
   ============================================================ */

html body.deviceland-shop.deviceland-utility #main {
  padding-top: calc(var(--head-measured, 69px) + 14px);
  padding-bottom: clamp(80px, 9vw, 130px);
  background: var(--paper);
}

html body.deviceland-shop .dl-utility-page {
  padding: 0;
}

html body.deviceland-shop .dl-utility-shell {
  max-width: 1120px;
}

/* Signing in is one column, not a page with a form parked in its top left
   corner. At 1120px the shell centres on a wide display and a 420px sign in
   form sat against its left edge with a third of the screen empty beside it,
   which is what reads as "off centre". A narrower measure puts the breadcrumb,
   the heading and the form on one left edge.

   The signed-in dashboard is deliberately NOT narrowed: it is a two column
   layout, and 760px squeezed the navigation to 57px with every label wrapped. */
/* 440px, not 760px. At 760 the 420px form sat against the left edge of a
   centred shell, so the form itself read as left of centre while the page
   around it looked symmetrical. Matching the column to the form puts the
   breadcrumb, heading and fields on one left edge AND centres the group. */
html body.deviceland-shop .dl-account-page.is-signed-out .dl-utility-shell {
  max-width: 440px;
}

/* A sign-in is a short page; without this the form sits under the masthead
   with the footer a long way below it. */
html body.deviceland-shop .dl-account-page.is-signed-out .dl-utility-head {
  margin-top: clamp(28px, 6vh, 64px);
}

/* Elessi centres the text inside .login-form. With left-aligned field labels
   above them, the switch link and any notice came out centred underneath —
   two alignments in one short form. */
html body.deviceland-shop .dl-account-content .login-form,
html body.deviceland-shop .dl-account-content .register-form,
html body.deviceland-shop .dl-account-content .woocommerce-form {
  text-align: left;
}

/* ---------- head ---------- */

html body.deviceland-shop .dl-utility-head {
  max-width: 620px;
  margin: clamp(34px, 5vw, 62px) 0 clamp(30px, 4vw, 48px);
}

html body.deviceland-shop .dl-utility-head .eyebrow {
  color: var(--muted-fg);
}

/* Restrained by design. The display face at 86px turned a routine sign-in into
   a statement; the catalogue reserves that scale for merchandise. */
html body.deviceland-shop .dl-utility-head h1 {
  margin: 14px 0 12px;
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-utility-lede {
  margin: 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted-fg);
}

/* ---------- actions ---------- */

html body.deviceland-shop .dl-utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

html body.deviceland-shop .dl-utility-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-utility-btn:hover {
  background: var(--ink-3);
  border-color: var(--ink-3);
  color: var(--on-ink);
}

html body.deviceland-shop .dl-utility-btn-quiet {
  background: transparent;
  border-color: var(--hair-light-2);
  color: var(--on-paper);
}

html body.deviceland-shop .dl-utility-btn-quiet:hover {
  background: var(--paper-2);
  border-color: var(--hair-light-2);
  color: var(--on-paper);
}

html body.deviceland-shop .dl-utility-aside {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-utility-aside a {
  color: var(--ember-deep);
  text-decoration: none;
}

/* ---------- account / login ---------- */

/* Elessi prints "Great to have you back!" above the form. Our own head already
   names the page, and the exclamation is louder than anything else on it.

   The ID is carried here deliberately. Elessi sets this with
   `#customer_login .nasa-form-title { display: block }`, and an ID outranks any
   number of classes, so the class-only version of this rule lost the cascade
   while appearing correct in the file. */
html body.deviceland-shop #customer_login .nasa-form-title,
html body.deviceland-shop #nasa-login-register-form .nasa-form-title,
html body.deviceland-shop .dl-account-content .nasa-form-title {
  display: none;
}

html body.deviceland-shop .dl-account-content.is-signed-out .woocommerce {
  max-width: 420px;
}

html body.deviceland-shop .dl-account-content .row,
html body.deviceland-shop .dl-account-content .login-form,
html body.deviceland-shop .dl-account-content .register-form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

html body.deviceland-shop .dl-account-content .woocommerce-form-login,
html body.deviceland-shop .dl-account-content .woocommerce-form-register {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

html body.deviceland-shop .dl-account-content .form-row {
  margin: 0 0 22px;
  padding: 0;
}

html body.deviceland-shop .dl-account-content label {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-account-content .woocommerce-form-login__rememberme,
html body.deviceland-shop .dl-account-content .lost_password {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-account-content .lost_password a,
html body.deviceland-shop .dl-account-content a.lost_password {
  color: var(--muted-fg);
  text-decoration: none;
}

html body.deviceland-shop .dl-account-content .lost_password a:hover,
html body.deviceland-shop .dl-account-content a.lost_password:hover {
  color: var(--on-paper);
}

html body.deviceland-shop .dl-account-content input.input-text,
html body.deviceland-shop .dl-account-content input[type="text"],
html body.deviceland-shop .dl-account-content input[type="email"],
html body.deviceland-shop .dl-account-content input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-light-2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-account-content input.input-text:focus,
html body.deviceland-shop .dl-account-content input[type="text"]:focus,
html body.deviceland-shop .dl-account-content input[type="email"]:focus,
html body.deviceland-shop .dl-account-content input[type="password"]:focus {
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: none;
}

/* The ember block in the middle of the form.

   Elessi's password visibility control is a bare <a>/<button> holding two
   SVGs. Our button primitives matched it on class and painted it with the
   accent fill, so it rendered as a solid orange rectangle sitting between the
   password field and the submit button. It is an icon affordance, not a
   button, and it is restored to one here. */
html body.deviceland-shop .dl-account-content .ns-show-password,
html body.deviceland-shop .dl-account-content .show-password-input,
html body.deviceland-shop .dl-account-content button.show-password-input {
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  color: var(--muted-fg);
  text-indent: 0;
}

html body.deviceland-shop .dl-account-content .ns-show-password svg {
  width: 17px;
  height: 17px;
}

html body.deviceland-shop .dl-account-content .form-row-wide {
  position: relative;
}

html body.deviceland-shop .dl-account-content .button,
html body.deviceland-shop .dl-account-content button[type="submit"]:not(.ns-show-password):not(.show-password-input) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
}

/* Elessi's theme-option stylesheet colours .button with the accent at
   `body .button`, which ties with a class-only override and wins on order, so
   the dashboard's buttons came out ember-on-ink and unreadable. Stated at the
   element to settle it. */
html body.deviceland-shop .dl-account-content a.button,
html body.deviceland-shop .dl-account-content button.button,
html body.deviceland-shop .dl-account-content button[type="submit"]:not(.ns-show-password):not(.show-password-input) {
  color: var(--on-ink);
}

/* Full width belongs to the sign-in and register submits only. Applying it to
   every .button stretched "Confirm email address" and "Browse products" across
   the dashboard panel and pushed their labels out of the box. */
html body.deviceland-shop .dl-account-content .woocommerce-form-login__submit,
html body.deviceland-shop .dl-account-content .woocommerce-form-register__submit {
  width: 100%;
}

html body.deviceland-shop .dl-account-content .button:hover,
html body.deviceland-shop .dl-account-content a.button:hover {
  background: var(--ink-3);
  border-color: var(--ink-3);
  color: var(--on-ink);
}

html body.deviceland-shop .dl-account-content .nasa-switch-form {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--muted-fg);
  text-align: left;
}

html body.deviceland-shop .dl-account-content .nasa-switch-form a {
  color: var(--ember-deep);
  text-decoration: none;
}

/* ---------- signed-in account ---------- */

/* Grid, not widths on floats.

   WooCommerce floats the navigation and the content panel. Setting widths on
   them left the floats uncleared, so .woocommerce collapsed to zero height and
   the footer was painted straight through the dashboard. A grid container
   establishes the height these two columns actually need.

   The first column is .account-nav-wrap, not the nav itself: Elessi wraps the
   navigation together with an avatar card, so styling the nav directly left
   the real grid item unsized. */
/* Single column now that the navigation is a rail above the panel rather than
   a side column. The two-column grid was also what made the menu look absent
   on a phone: 220px against a 760px shell left it 57px wide with every label
   wrapped to one character per line. */
html body.deviceland-shop .dl-account-content .woocommerce {
  display: block;
}

html body.deviceland-shop .dl-account-content .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

html body.deviceland-shop .dl-account-content.is-signed-out .woocommerce {
  display: block;
  max-width: 420px;
}

html body.deviceland-shop .dl-account-content .account-nav-wrap,
html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation,
html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content {
  padding-left: 0;
  border-left: 0;
}

/* The avatar card, and the second copy of the navigation.

   Elessi prints a Gravatar plus "Welcome <username>" above the menu, and then
   renders the whole menu again inside the content panel as a grid of icon
   tiles. The dashboard therefore listed every destination twice, and at a
   narrow measure the card collapsed to "Welc / admi".

   The heading on this page already says "Your account" and the panel already
   greets the customer by name, so both are removed rather than restyled. */
html body.deviceland-shop .dl-account-content .account-nav.account-user {
  display: none;
}

/* ---------- account navigation ---------- */

/* Our own rail, from wc_get_account_menu_items(), so the navigation is
   identical on the dashboard and on every sub-page. Elessi's two copies are
   retired below: a side column that only appears on the dashboard, and a grid
   of white tiles inside the panel that matched nothing else in this design. */
/* Wraps, rather than scrolls sideways.

   A horizontal rail hid half the destinations behind a swipe, and a menu you
   have to discover by swiping is not navigation — the whole complaint was that
   Orders could not be reached from Addresses. Six short pills wrap to two or
   three tidy rows on a phone and sit on one row from 600px up, so every
   destination is visible without any gesture. */
html body.deviceland-shop .dl-account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(26px, 4vw, 40px);
}

html body.deviceland-shop .dl-account-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-account-tab:hover {
  border-color: var(--hair-light-2);
  color: var(--on-paper);
}

html body.deviceland-shop .dl-account-tab.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* Both of Elessi's copies now that ours is always present. */
html body.deviceland-shop .dl-account-content .account-nav-wrap {
  display: none;
}

/* The in-panel copy of the menu is a duplicate at every width.

   I briefly exposed it below 768px on the theory that Elessi hides the side
   column on small screens. Measured instead of assumed: the side navigation
   renders at 360, 375, 414, 480, 600 and 767px as well, so the exception only
   listed every destination twice on a phone. What made the navigation look
   absent was the grid — the column was 220px wide against a 760px shell, which
   left it 57px and wrapped every label to one character per line. */
html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content .woocommerce-MyAccount-navigation {
  display: none;
}

/* Generic line-art icons beside each label are not part of this design. */
html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation .ns-svg-wrap {
  display: none;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation a {
  display: block;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content a:not(.button) {
  color: var(--ember-deep);
}

/* WooCommerce's email-confirmation notice arrives as an accent-bordered box
   with a button inside it; left unstyled it read as an error on an otherwise
   quiet page. */
html body.deviceland-shop .dl-account-content .woocommerce-message,
html body.deviceland-shop .dl-account-content .woocommerce-info,
html body.deviceland-shop .dl-account-content .woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 26px;
  padding: 18px 20px;
  border: 1px solid var(--hair-light-2);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-account-content .woocommerce-message .button,
html body.deviceland-shop .dl-account-content .woocommerce-info .button {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--hair-light);
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 0;
  font-size: 13.5px;
  color: var(--muted-fg);
  text-decoration: none;
}

html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation .is-active a {
  color: var(--on-paper);
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  html body.deviceland-shop.deviceland-utility #main {
    padding-bottom: 72px;
  }

  html body.deviceland-shop .dl-utility-head {
    margin-top: 26px;
  }

  html body.deviceland-shop .dl-utility-head h1 {
    font-size: clamp(27px, 8vw, 34px);
  }

  html body.deviceland-shop .dl-utility-actions {
    gap: 10px;
  }

  /* Full-width targets rather than two half-width pills on a phone. */
  html body.deviceland-shop .dl-utility-btn {
    width: 100%;
  }

  html body.deviceland-shop .dl-account-content.is-signed-out .woocommerce {
    max-width: none;
  }

  html body.deviceland-shop .dl-account-content .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation,
  html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-content {
    width: 100%;
    padding: 0;
    border: 0;
  }

  html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation {
    margin-bottom: 30px;
  }

  /* On a phone the navigation stacks above the panel, so it is given more
     presence than the desktop side column: full-width rows with a rule
     between them and a comfortable target height. */
  html body.deviceland-shop .dl-account-content .woocommerce-MyAccount-navigation a {
    padding: 15px 0;
    font-size: 14px;
    color: var(--on-paper);
  }
}