/* Login / logout / account hub / orders / addresses. */

.page.auth {
  text-align: center;
}

/* login/logout: the screen owns the full viewport below the sticky
   header — content dead-centered, footer pushed past the fold. svh so
   mobile toolbars can't hide the button; vh is the fallback. */
.page.auth--full {
  position: relative; /* anchors .auth__return to this page's own box */
  display: grid;
  align-content: start;
  justify-content: center;
  justify-items: center;
  /* face anchored at ~23% of the viewport height; header height
     subtracted since the padding is measured inside main. */
  padding-block: calc(23.1vh - 3.625rem) 0;
  padding-block: calc(23.1svh - 3.625rem) 0;
  min-height: calc(100vh - 3.625rem);
  min-height: calc(100svh - 3.625rem);
}

/* pinned to the bottom of the login screen, present in both the
   logged-out form and the post-logout state (same template, ?bye=1) */
.auth__return {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  font-size: var(--text-body); /* 20px */
  text-decoration: none;
}

@media (min-width: 72rem) {
  .auth__return {
    display: none; /* header logo already links home; redundant everywhere on desktop */
  }
}

.page.auth--full .auth__face {
  margin-block: 0 var(--space-3);
}

.page.auth--full .auth__message {
  margin-block: var(--space-3) 0;
}

.auth__face {
  display: block;
  width: 7rem; /* 113px */
  height: auto;
  margin: var(--space-5) auto var(--space-3);
}

.auth__face--thankyou {
  width: 5.125rem; /* 82px */
  transform: rotate(168.88deg); /* as drawn */
}

.auth__intro {
  max-width: 34ch;
  margin: 0 auto var(--space-4);
  font-size: var(--text-ui);
  font-weight: var(--weight-light);
}

/* hand-drawn outline pill (same drawn-asset family as the cart and
   account buttons) */
.auth__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.625rem;  /* 170px */
  height: 3.125rem;  /* 50px */
  border: 0;
  background: transparent url('../img/cart-pill.png') center / 100% 100% no-repeat;
  color: var(--color-ink);
  font-size: var(--text-title); /* 24px SemiBold */
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.auth__message {
  margin-block: var(--space-4) var(--space-6);
  font-size: var(--text-title); /* 24px SemiBold */
  font-weight: var(--weight-semibold);
}

.auth__message--plain {
  margin-block: var(--space-6);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
}

.auth__message--thankyou {
  font-size: var(--text-body); /* 20px SemiBold */
}

.auth__greeting {
  margin-bottom: var(--space-4);
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-medium);
}

/* "Hi" / name on two lines: icon nudges up via position:relative (not
   margin, which would shift following siblings) while margin-bottom
   shrinks by the added line's height so the nav below never moves. */
.page.auth--full .auth__face--nudged {
  position: relative;
  top: -1rem;
  margin-bottom: calc(var(--space-3) - 1.75rem);
}

/* ---- account hub ---- */

.account__nav {
  display: grid;
  justify-items: center;
  row-gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* hand-drawn pill (same drawn family as the cart buttons) */
.account__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.75rem;  /* scaled down with the font, from 206px */
  height: 3rem;     /* scaled down with the font, from 58px */
  background: url('../img/cart-pill.png') center / 100% 100% no-repeat;
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

/* inverted: cart-pill-filled.png is that same drawing with its interior
   flood-filled, so the hand-drawn wobble is pixel-identical and only the
   fill changes — a separate drawn asset would shift shape on hover.
   hover gated so touch devices don't latch the state after a tap;
   focus-visible isn't, so keyboard users get it on any device. */
@media (hover: hover) {
  .auth__login:hover,
  .account__link:hover {
    background-image: url('../img/cart-pill-filled.png');
    color: var(--color-paper);
  }
}

.auth__login:focus-visible,
.account__link:focus-visible {
  background-image: url('../img/cart-pill-filled.png');
  color: var(--color-paper);
}

/* ---- orders ---- */

/* no .page top padding here — the sticky back arrow sits flush below
   the header instead, matching journal/product's own back-arrow pages.
   The visible first child's own top margin is zeroed too — the hidden
   h1 before it is position:absolute (out of flow) but still DOM-first,
   so :first-child alone wouldn't reach these. */
.page.auth--sub {
  padding-top: 0;
}

.page.auth--sub .auth__message--plain {
  margin-top: 0;
}

/* same layout as .cart__empty (cart.css) — icon + medium-weight message,
   no return link this time (the page's own sticky back arrow already
   covers that). .page.auth--sub already zeroes its own top padding
   (unlike .cart), so no extra subtraction needed here. */
.orders__empty {
  min-height: calc(100vh - 3.625rem);
  min-height: calc(100svh - 3.625rem);
  padding-top: var(--space-4);
  text-align: center;
}

.orders__empty-icon {
  margin-inline: auto;
}

.orders__empty-text {
  margin-top: var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.orders__list {
  list-style: none;
  margin: 0 0 2.5rem; /* 40px bottom margin after the last block */
  padding: 0;
  display: grid;
  row-gap: var(--space-1); /* same card-to-card spacing as addresses__list */
}

/* Order card: thicker 2px border, unlike every other
   bordered card on the site (--border-thin elsewhere). */
.orders__card {
  display: grid;
  row-gap: var(--space-2);
  padding: var(--space-2);
  border: 2px solid var(--color-ink);
  text-align: left;
}

.orders__date {
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.orders__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.orders__img {
  width: 5.3125rem; /* 85px */
  height: 6.6875rem; /* 107px — portrait, not square */
  object-fit: cover;
  flex: none;
}

.orders__status,
.orders__number {
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
}

.orders__price {
  font-size: var(--text-body); /* 20px — bigger than the order/status lines above it */
  font-weight: var(--weight-medium);
}

.orders__links {
  display: grid;
  row-gap: var(--space-1);
  justify-items: start;
  margin-top: var(--space-2);
}

.orders__view {
  font-size: var(--text-ui); /* 16px SemiBold */
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}


/* ---- addresses ---- */

.addresses__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  row-gap: var(--space-1);
}

/* two stacked rows: address (label + body) on top, actions below —
   full-width so the actions row's left edge lines up with the label's,
   not with the body column further right */
.addresses__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  /* 3px is off the --border-* scale: it's the weight the default-
     address accent is drawn at, and every card matches it so the accent
     and the error outline below read as a colour change, not a resize */
  border: 3px solid var(--card-border-color, var(--color-ink));
  text-align: left;
}

/* the default address is sorted first (addresses.php) and marked with
   an accent border instead of a plain text badge */
.addresses__card--default {
  --card-border-color: #fff200;
}

/* delete/make-default failure: flashes red over the card's edge then
   fades back, one-shot since this is a re-render, not a client-side state
   change. An inset outline rather than the border itself — it matches the
   default card's 3px yellow in both weight and position without a
   1px->3px border change reflowing the contents mid-flash, and fading to
   transparent reveals whatever border the card actually has underneath. */
@keyframes addresses-flash-error {
  0%, 55.6% { outline-color: #d33; } /* 1s held, then 0.8s fading */
  100% { outline-color: transparent; }
}

.addresses__card--flash-error {
  outline: 3px solid transparent;
  outline-offset: -3px; /* drawn inside the box, over the border, not around it */
  animation: addresses-flash-error 1.8s ease forwards;
}

/* the exemption base.css's blanket collapse would otherwise deny: a
   one-shot colour fade carries functional information and involves no
   movement, and collapsed to 0.01ms it simply never appears. Duration
   only — specificity is what beats the universal !important rule. */
@media (prefers-reduced-motion: reduce) {
  .addresses__card--flash-error {
    animation-duration: 1.8s !important;
  }
}

/* label column sits fixed on the left; everything else shares the
   remaining width on the right — both stay left-aligned internally.
   Label is always rendered (empty when no label set, addresses.php),
   so the body column starts at the same x on every card regardless of
   whether that address has one. */
.addresses__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.addresses__label {
  flex: 0 0 5rem; /* fixed, not content-sized — the reserved-space requirement above */
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
}

.addresses__body {
  flex: 1;
  min-width: 0; /* lets the address text wrap instead of overflowing the row */
}

.addresses__lines {
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
}

.addresses__unshippable {
  margin-top: var(--space-1);
  font-size: var(--text-caption);
}

/* mirrors .addresses__row's column split so Edit sits under the label
   track and Make Default sits under the body track — i.e. aligned
   with the address content above it, not centered across the card */
.addresses__actions {
  display: grid;
  grid-template-columns: 5rem 1fr;
  column-gap: var(--space-3);
}

.addresses__actions-secondary {
  display: flex;
}

/* Edit is an <a>, the other two are <button>s — without this it'd be the
   only one of the three carrying the default link underline */
.addresses__edit,
.addresses__make-default,
.addresses__delete {
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

/* stays flush right in the secondary group whether or not Make
   Default is present beside it (the default card has only Delete) */
.addresses__delete {
  margin-left: auto;
}

/* New Address + Save address: same bordered/rounded style as Journal's
   featured-card Read button (.article-card--featured .article-card__more),
   not the illustrated pill family the other account buttons use */
.addresses__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 3.75rem; /* 60px, off the token scale */
  padding: 0.25em 1em;
  border: var(--border-thick);
  border-radius: var(--radius-l);
  font-size: var(--text-body); /* 20px, matches the Journal button */
  font-weight: var(--weight-regular);
  line-height: 1;
  text-decoration: none;
}

/* inverted — deliberately NOT behind (hover: hover): unlike the drawn
   pills, these both navigate or submit, so a latched state on touch
   can't outlive the tap */
.addresses__new:hover,
.addresses__new:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* delete/make-default are POST forms — reset the button back to plain
   text-link styling so they sit identically beside Edit */
.addresses__delete-form,
.addresses__make-default-form {
  display: contents; /* the <form> itself shouldn't participate in the flex row */
}

.addresses__make-default,
.addresses__delete {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.addresses__delete {
  position: relative; /* anchors .confirm-bubble (confirm-bubble.css) */
}

/* ---- address form (the design's drawn 3-field/"Etc"
   mockup can't carry Shopify's real address fields, so this uses the
   site's plain bordered-field convention instead) ---- */

/* .page.auth centers everything by default (right for the login/account
   screens) — wrong for an actual data-entry form */
.address-form__title,
.address-form__card {
  text-align: left;
}

.address-form__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-title); /* 24px */
  font-weight: var(--weight-medium);
}

.address-form__icon {
  /* px, not rem: the <img> is 31×29 px-fixed art and must not drift
     under the fluid root */
  width: 31px;
  height: 29px;
}

/* cancels .form__card's own illustrated border-image — this page draws
   its own field boxes directly on the inputs instead (below) */
.address-form__card {
  border: 0;
  padding: 0;
}

.address-form__card .form__field {
  margin-top: 1.25rem;
}

.address-form__separator {
  margin-top: 1.25rem;
  border: 0;
  border-top: var(--border-thin);
}

/* label text styling comes from the shared .form__label rule
   (form.css) — 20px Medium, no override here */
.address-form__card .form__label {
  display: block;
  margin-bottom: 0.375rem;
}

/* hand-drawn field-box art — border-image 9-slice applied straight to
   the control. No explicit height: forcing one
   fought the browser's text-centering and left the caret riding high. */
.address-form__card .form__field input:not([type='checkbox']),
.address-form__card .form__field select {
  display: block;
  width: 100%;
  /* left inset shifted in (8px flat vs the right side's 1em) — the
     drawn box's stroke sits closer to the text on that side */
  padding-left: 0.5rem; /* 8px */
  padding-right: 1em;
  /* equal top/bottom padding centres the text inside the drawn box */
  padding-block: var(--space-1);
  border-style: solid;
  border-color: transparent;
  border-width: 0.625rem;
  border-image-source: url('../img/wholesale-field-border.png');
  border-image-slice: 17;
  border-image-width: 0.625rem;
  border-image-repeat: stretch;
  background: none;
}

/* anchors the popup listbox to this field, not the whole card */
.address-form__country-field {
  position: relative;
}

.address-form__country-listbox {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  max-height: 12rem;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  border: var(--border-thin);
  background: var(--color-paper);
}

.address-form__country-listbox li {
  padding: 0.5em 1em;
  font-size: var(--text-ui);
  cursor: pointer;
}

.address-form__country-listbox li[aria-selected='true'],
.address-form__country-listbox li:hover {
  background: var(--color-grey);
}

.address-form__card .form__field--invalid input,
.address-form__card .form__field--invalid select {
  border-color: #d33;
}

/* same treatment as the cookie banner's "Learn more" link */
.address-form__shipping-link {
  display: inline-block;
  margin-top: 0.375rem;
  font-size: var(--text-caption);
  color: var(--accent-red-small);
  text-decoration: underline;
}

.address-form__shipping-link-arrow {
  display: inline-block;
  margin-left: 0.25em;
  text-decoration: none;
}

/* everything visual comes from .addresses__new (New Address) — only the
   bits that can't. Block-level + fit-content so margin-inline:auto
   centres it: the shared style is inline-flex, centred by its parent's
   text-align, which this left-aligned form card doesn't provide. */
.address-form__submit {
  display: flex;
  width: fit-content;
  margin-top: 1.25rem; /* 20px, off the token scale */
  margin-bottom: 2.5rem; /* 40px, off the token scale */
  background: none; /* a <button>'s own UA background, not a design choice */
  cursor: pointer;
}

/* landscape tablets — after the desktop block so these win in the band */
@media (min-width: 72rem) and (max-width: 85.4375rem) {
  /* the popover card is narrow here: the reserved 5rem label track sat
     the address body (and Make Default, on the mirrored track below) too
     far right — both splits shrink together to stay aligned */
  .addresses__row {
    gap: var(--space-2);
  }

  .addresses__label {
    flex-basis: 1.9375rem;
  }

  /* one justified row: Edit — Make Default — Delete, replacing desktop's
     mirrored label/body track split */
  .addresses__actions {
    display: flex;
    justify-content: space-between;
  }

  .addresses__actions-secondary {
    display: contents; /* its two buttons justify as direct row items */
  }

  .addresses__delete {
    margin-left: 0; /* the flush-right auto margin would defeat the spread */
  }
}