/* The Account area, the sign-in card and the wishlist hearts (Basic, Figma 328:2318 Orders,
   337:1921 Profile + dialogs, 352:1552 Store credit, 297:4185 Login + OTP, 311:3212 heart).

   Everything interactive here works with NO JavaScript:
   - the status filters are radios; the rules below hide rows whose data-group does not match;
   - the dialogs are shown while they are the page's :target (a CHANGE link is href="#id"), or
     when the server re-renders one with .is-open after a rejected save;
   - a heart is a form button; wishlist.js only fills it and saves without a reload. */

/* ---------------------------------------------------------------- shell */

/* The palette. Declared on EVERY root this file styles, not only .acct: the Profile dialogs are
   siblings of .acct (they sit after it in the page so a fixed overlay is not trapped inside a
   transformed ancestor), and the sign-in card has no .acct at all. With the tokens on .acct alone
   every var(--acct-*) inside a dialog was undefined — the SAVE button came out white on white
   with no border, and CANCEL lost its border, so a dialog looked like it had only "Cancel".
   The checkout (checkout.css .cko*) was drawn in the same file and uses this file's fields, hints
   and buttons, so its roots carry the same palette — one set of values for both areas. */
.acct,
.acct-dialog,
.auth,
.cko,
.cko-note,
.cko-top {
  --acct-ink: #0f0c0b;
  --acct-muted: #595550;
  --acct-line: #dcdad8;
  --acct-soft: #f8f8f7;
}

.acct {
  margin: calc(-1 * var(--spacing-sections, 0px)) calc(-1 * var(--sec-bleed, 0px));
  padding: 6.25rem calc(var(--sec-bleed, 0px) + 1.25rem) 11.875rem;
  background: var(--acct-soft);
  color: var(--acct-ink);
}

.acct__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--acct-line);
}

.acct__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: var(--caps-transform, uppercase);
}

.acct__signed-in {
  margin: 0;
  font-size: 0.875rem;
  color: var(--acct-muted);
}

.acct__signed-in strong {
  color: var(--acct-ink);
  font-weight: 500;
}

.acct__body {
  display: grid;
  grid-template-columns: 12.25rem minmax(0, 1fr);
  gap: 5rem;
  padding-top: 3rem;
}

.acct__panel {
  min-width: 0;
}

.acct__panel > * + * {
  margin-top: 3rem;
}

/* The tab column (328:2542): 196px of rows, the active one underlined. */
.acct-tabs {
  display: flex;
  flex-direction: column;
  align-self: start;
  position: sticky;
  top: 1.5rem;
}

.acct-tab {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--acct-line);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.0875rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--acct-muted);
  text-decoration: none;
}

.acct-tab svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
}

.acct-tab:hover {
  color: var(--acct-ink);
}

.acct-tab.is-active {
  color: var(--acct-ink);
  border-bottom-color: var(--acct-ink);
}

@media (max-width: 749px) {
  .acct {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  .acct__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 1.5rem;
  }

  .acct-tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 1.5rem;
    scrollbar-width: none;
  }

  .acct-tab {
    flex: none;
  }
}

/* ---------------------------------------------------------------- sections, text, buttons */

.acct-section > * + * {
  margin-top: 1.5rem;
}

.acct-section + .acct-section {
  margin-top: 3rem;
}

.acct-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.acct-section__head--ruled {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--acct-line);
}

/* Heading on top, the filter pills on their own row under it (Orders 328:2318, Store credit
   history 352:1552); a totals line, when there is one, at the far end of the pills' row. */
.acct-section__head--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

.acct-section__head--stack .acct-filter-row {
  justify-content: space-between;
}

.acct-section__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: var(--caps-transform, uppercase);
}

.acct-section__intro {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--acct-muted);
}

.acct-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.075rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--acct-muted);
}

.acct-value {
  margin: 0.375rem 0 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.acct-value--dots {
  display: flex;
  gap: 0.3rem;
  height: 1.5rem;
  align-items: center;
}

.acct-value--dots span {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--acct-ink);
}

.acct-muted {
  margin: 0;
  font-size: 0.875rem;
  color: var(--acct-muted);
}

.acct-empty {
  margin: 1.5rem 0 0;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--acct-line);
  background: #fff;
  text-align: center;
  font-size: 0.875rem;
  color: var(--acct-muted);
}

.acct-notice {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid #b9dfc6;
  background: #eef8f1;
  font-size: 0.875rem;
  color: #11632f;
}

.acct-notice--error,
.acct-field-error {
  border-color: #f0c2bd;
  background: #fdf1ef;
  color: #b3261e;
}

.acct-field-error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #f0c2bd;
  font-size: 0.875rem;
}

.acct-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

/* THE PROVINCE BOX FOLLOWS THE COUNTRY (snippets/address-province-field.liquid, handoff 2026-10-01
   Part 9). A saved province that is not on the country's list is shown and MARKED, in the error
   family's warm colour, never erased. The box's unused half (and the whole box for a country whose
   addresses have no province) carries [hidden]; the field style sets a display, which beats the UA's
   [hidden] rule, so it is restated here. */
.acct-hint--warn {
  color: #9a3412;
}

[data-province-field][hidden],
[data-province-select][hidden],
[data-province-text][hidden] {
  display: none;
}

/* CHANGE / ADD / Sign out (337:1921): 38px, hairline border, tracked capitals. */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  padding: 0 1.125rem;
  border: 1px solid var(--acct-line);
  border-radius: 0;
  background: #fff;
  color: var(--acct-ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.acct-btn:hover {
  border-color: var(--acct-ink);
}

.acct-btn--solid {
  border-color: var(--acct-ink);
  background: var(--acct-ink);
  color: #fff;
}

.acct-btn--solid:hover {
  background: #2b2724;
}

.acct-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acct-ink);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.acct-link--danger {
  margin-right: auto;
  color: #b3261e;
}

/* ---------------------------------------------------------------- filter pills (no JS) */

.acct-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.acct-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.acct-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.125rem;
  padding: 0 0.875rem;
  border: 1px solid var(--acct-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--acct-muted);
  cursor: pointer;
}

.acct-pill:hover {
  border-color: var(--acct-ink);
}

.acct-filter__input:checked + .acct-pill {
  border-color: var(--acct-ink);
  background: var(--acct-ink);
  color: #fff;
}

.acct-filter__input:focus-visible + .acct-pill {
  outline: 2px solid var(--acct-ink);
  outline-offset: 2px;
}

.acct-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.acct:has(#acct-of-in_progress:checked) .acct-order:not([data-group="in_progress"]),
.acct:has(#acct-of-delivered:checked) .acct-order:not([data-group="delivered"]),
.acct:has(#acct-of-cancelled:checked) .acct-order:not([data-group="cancelled"]),
.acct:has(#acct-cf-added:checked) .acct-ledger__row:not([data-group="added"]),
.acct:has(#acct-cf-used:checked) .acct-ledger__row:not([data-group="used"]),
.acct:has(#acct-cf-expired:checked) .acct-ledger__row:not([data-group="expired"]) {
  display: none;
}

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

.acct-orders,
.acct-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acct-order {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--acct-line);
  background: #fff;
}

.acct-order + .acct-order {
  margin-top: 0.75rem;
}

.acct-order__main {
  min-width: 0;
}

.acct-order__number {
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: var(--caps-transform, uppercase);
  color: var(--acct-ink);
  text-decoration: none;
}

.acct-order__number:hover {
  text-decoration: underline;
}

.acct-order__meta {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

.acct-order__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.acct-order__thumbs img,
.acct-order__thumb-empty {
  display: block;
  width: 3.5rem;
  height: 4.375rem;
  object-fit: cover;
  background: #eceae8;
}

.acct-order__actions {
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

/* :not(:has(*)), not :empty — Liquid leaves whitespace inside, which :empty counts as content
   (handoff trap 6), so an order with no action kept a blank 1rem gap. */
.acct-order__actions:not(:has(*)) {
  display: none;
}

.acct-order__actions a {
  color: var(--acct-ink);
  text-underline-offset: 0.2em;
}

/* PRINT RECEIPTS (round 10): the tick in front of a paid order's number, the row's own "print"
   link beside its request link, and the bar above the list that prints the ticked ones. */
.acct-order__pick {
  display: inline-flex;
  align-items: center;
  margin-right: 0.625rem;
  vertical-align: middle;
  cursor: pointer;
}

.acct-order__pick input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--acct-ink);
}

.acct-order__actions .acct-order__receipt {
  margin-left: 1rem;
}

.acct-order__actions .acct-order__receipt:first-child {
  margin-left: 0;
}

.acct-receipts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1rem;
}

.acct-receipts__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

.acct-od__receipt {
  margin: 0 0 1.25rem;
}

.acct-order__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
}

.acct-order__total {
  font-size: 1rem;
  font-weight: 500;
}

.acct-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #f1f0ee;
  font-size: 0.75rem;
  font-weight: 500;
  color: #595550;
  white-space: nowrap;
}

.acct-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.acct-badge--delivered,
.acct-badge--picked_up { background: #e8f6ed; color: #16a64b; }
.acct-badge--in_transit,
.acct-badge--ready_for_pickup { background: #eaf0fd; color: #2865eb; }
.acct-badge--paid,
.acct-badge--partially_refunded,
.acct-badge--awaiting_payment { background: #fdf5e3; color: #cd8c04; }
.acct-badge--refunded,
.acct-badge--payment_cancelled,
.acct-badge--cancelled { background: #f1f0ee; color: #595550; }
/* A request on the order (Part 3F): waiting on the shop is amber, the customer's turn or the shop's
   next step is blue, a declined request is grey like the closed states. */
.acct-badge--cancel_requested,
.acct-badge--return_requested,
.acct-badge--refund_requested { background: #fdf5e3; color: #cd8c04; }
.acct-badge--return_approved,
.acct-badge--return_received,
.acct-badge--refund_approved { background: #eaf0fd; color: #2865eb; }
.acct-badge--request_declined { background: #f1f0ee; color: #595550; }

@media (max-width: 749px) {
  .acct-order {
    flex-direction: column;
    padding: 1rem;
  }

  .acct-order__side {
    flex-direction: row;
    align-items: center;
  }
}

/* ---------------------------------------------------------------- one order (account_order) */

/* The design draws no order page; this is the Orders row opened up, in the same type and rules:
   ← All orders, the number + date + chip over a hairline, the lines as rows with a 3:4 thumbnail,
   the totals under them and the address / tracking / note in a narrow column beside. */
.acct-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.075rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--acct-muted);
  text-decoration: none;
}

.acct-back:hover {
  color: var(--acct-ink);
}

.acct-back svg {
  width: 0.875rem;
  height: 0.875rem;
}

.acct-od > * + * {
  margin-top: 1.5rem;
}

.acct-od .acct-section__head {
  align-items: flex-start;
}

.acct-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #f3dca6;
  background: #fdf5e3;
  font-size: 0.875rem;
}

.acct-callout p {
  margin: 0;
}

.acct-od__actions {
  margin: 0;
  font-size: 0.875rem;
}

.acct-od__actions a {
  color: var(--acct-ink);
  text-underline-offset: 0.2em;
}

.acct-od__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 2.5rem;
  align-items: start;
}

.acct-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--acct-line);
}

.acct-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--acct-line);
}

.acct-line__img {
  display: block;
  width: 4rem;
  height: 5.3125rem;
  flex: none;
  object-fit: cover;
  background: #eceae8;
}

.acct-line__text {
  flex: 1;
  min-width: 0;
}

.acct-line__title {
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.acct-line__meta {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

.acct-line__total {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.acct-totals {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.acct-totals th,
.acct-totals td {
  padding: 0.375rem 0;
  font-weight: 400;
  text-align: left;
}

.acct-totals td {
  text-align: right;
  white-space: nowrap;
}

.acct-totals code {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--acct-line);
  font-size: 0.75rem;
}

.acct-totals__grand th,
.acct-totals__grand td {
  padding-top: 0.875rem;
  border-top: 1px solid var(--acct-line);
  font-size: 1rem;
  font-weight: 500;
}

.acct-od__side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.acct-od__box {
  padding: 1.25rem;
  border: 1px solid var(--acct-line);
  background: #fff;
}

.acct-od__address {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.acct-od__box a {
  color: var(--acct-ink);
  text-underline-offset: 0.2em;
}

@media (max-width: 989px) {
  .acct-od__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* The grey version of the callout: a reason nothing can be asked (the request forms). */
.acct-callout--muted {
  border-color: var(--acct-line);
  background: #fff;
}

/* A return's steps (BUILD_BRIEF_2026-10-09-B §7, snippets/return-steps.liquid), on the signed-in order
   page AND the order-status page guests use (.co, which does not carry the --acct-* palette — so the
   panel declares it). The admin's StatusSteps drawn in the shop's own type: a dot per step on a line,
   passed steps filled, the step the return is at a ring with its label in bold, the rest grey, a short
   date under each step reached. One next line under it, then "Return details", closed. */
.rpanel {
  --acct-ink: #0f0c0b;
  --acct-muted: #595550;
  --acct-line: #dcdad8;
  --rpanel-ok: #1f7a3a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--acct-line);
  background: #fff;
  color: var(--acct-ink);
  font-size: 0.875rem;
}

/* The order-status page follows the shop's dark theme (checkout.css .co); the panel goes with it. */
html[data-theme="dark"] .co .rpanel {
  --acct-ink: #e5e7eb;
  --acct-muted: #9aa2af;
  --acct-line: #334155;
  --rpanel-ok: #86efac;
  background: transparent;
}

html[data-theme="dark"] .co .rpanel__dot {
  background: #111a2b;
}

.rpanel p {
  margin: 0;
}

.rpanel__title {
  font-size: 1rem;
  font-weight: 500;
}

.rpanel__steps {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpanel__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  padding-top: 1.375rem;
  color: var(--acct-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
}

/* The line from the previous dot to this one. */
.rpanel__step::before {
  content: '';
  position: absolute;
  top: 0.4375rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--acct-line);
}

.rpanel__step:first-child::before {
  display: none;
}

.rpanel__step.is-done::before,
.rpanel__step.is-current::before {
  background: var(--acct-ink);
}

.rpanel__dot {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--acct-line);
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.rpanel__step.is-done .rpanel__dot {
  border-color: var(--acct-ink);
  background: var(--acct-ink);
}

.rpanel__step.is-current .rpanel__dot {
  border-color: var(--acct-ink);
}

.rpanel__step.is-done .rpanel__label {
  color: var(--acct-ink);
}

.rpanel__step.is-current .rpanel__label {
  color: var(--acct-ink);
  font-weight: 600;
}

.rpanel__label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rpanel__date {
  font-size: 0.75rem;
  color: var(--acct-muted);
}

.rpanel__ok {
  color: var(--rpanel-ok);
}

.rpanel__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 28rem;
}

.rpanel__form .acct-btn {
  align-self: flex-start;
}

.rpanel__details {
  border-top: 1px solid var(--acct-line);
  padding-top: 0.875rem;
}

.rpanel__details > summary {
  cursor: pointer;
  font-weight: 500;
}

.rpanel__details-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.875rem;
}

.rpanel__address {
  margin: 0.25rem 0 0.5rem;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (max-width: 749px) {
  .rpanel {
    padding: 1rem;
  }

  .rpanel__step {
    font-size: 0.75rem;
  }

  .rpanel__form .acct-btn {
    align-self: stretch;
  }
}

/* ---------------------------------------------------------------- request forms (cancel / return) */

/* The two request pages are the order page's shell with a form in it; the fields are the Profile
   dialogs' own (.acct-field), the refund block a hairline box like the address cards. */
.acct-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 45rem;
  margin: 0;
}

.acct-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--acct-line);
}

.acct-rq-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
}

.acct-rq-head .acct-label {
  margin: 0;
}

.acct-qty {
  width: 4.5rem;
  height: 2.875rem;
  flex: none;
  padding: 0 0.5rem;
  border: 1px solid var(--acct-line);
  border-radius: 0;
  background: #fff;
  color: var(--acct-ink);
  font: inherit;
  font-size: 0.9375rem;
  text-align: center;
}

.acct-qty:focus {
  outline: none;
  border-color: var(--acct-ink);
}

.acct-fieldset {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--acct-line);
  background: #fff;
}

.acct-fieldset__legend {
  float: left; /* puts the legend INSIDE the box as its first row, not on the border */
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: var(--caps-transform, uppercase);
}

.acct-fieldset__legend + * {
  clear: both;
}

.acct-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* .acct-fields is a flex column; the destination set the shopper is NOT using carries [hidden],
   which a display rule would otherwise override. */
.acct-fields[hidden] {
  display: none;
}

.acct-field textarea {
  min-height: 6rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #dcdad8;
  border-radius: 0;
  background: #fff;
  color: #0f0c0b;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  resize: vertical;
}

.acct-field textarea:focus,
.acct-field select:focus {
  outline: none;
  border-color: #0f0c0b;
}

@media (max-width: 480px) {
  .acct-fieldset {
    padding: 1rem;
  }

  .acct-form__foot .acct-btn {
    flex: 1;
  }
}

/* ---------------------------------------------------------------- profile */

.acct-rows {
  border: 1px solid var(--acct-line);
  background: #fff;
}

.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
}

.acct-row + .acct-row {
  border-top: 1px solid var(--acct-line);
}

.acct-row__text {
  min-width: 0;
}

.acct-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--acct-line);
  background: #fff;
  color: var(--acct-ink);
  text-decoration: none;
}

.acct-card + .acct-card {
  margin-top: 0.75rem;
}

.acct-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  background: var(--acct-soft);
}

.acct-card__icon svg {
  width: 1rem;
  height: 1rem;
}

.acct-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.acct-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.acct-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.acct-card__sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--acct-muted);
}

.acct-card__sub--note {
  color: #cd8c04;
}

.acct-card__chevron {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
  color: var(--acct-muted);
}

a.acct-card:hover {
  border-color: var(--acct-ink);
}

.acct-tag {
  padding: 0.125rem 0.5rem;
  background: var(--acct-soft);
  border: 1px solid var(--acct-line);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.06rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--acct-muted);
}

.acct-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.75rem;
}

.acct-addresses .acct-card + .acct-card {
  margin-top: 0;
}

/* The marketing switch (337:1921): 40x22, black when on. */
.acct-switch {
  position: relative;
  width: 2.5rem;
  height: 1.375rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--acct-line);
  cursor: pointer;
  transition: background 0.15s;
}

.acct-switch span {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 12, 11, 0.2);
  transition: transform 0.15s;
}

.acct-switch.is-on {
  background: var(--acct-ink);
}

.acct-switch.is-on span {
  transform: translateX(1.125rem);
}

.acct-signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--acct-line);
}

.acct-signout form {
  margin: 0;
}

/* ---------------------------------------------------------------- store credit */

.acct-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--acct-line);
  background: #fff;
}

/* Gift points earned but not usable yet (BUILD_BRIEF_2026-10-12-J §6), above the balance. */
.acct-pending {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  list-style: none;
  border: 1px solid var(--acct-line);
  background: #f6f8f6;
  font-size: 0.875rem;
  line-height: 1.5;
}
.acct-pending__row + .acct-pending__row {
  margin-top: 0.25rem;
}

.acct-balance__main,
.acct-balance__notes {
  padding: 1.5rem;
}

.acct-balance__notes {
  border-left: 1px solid var(--acct-line);
  background: var(--acct-soft);
}

.acct-balance__amount {
  margin: 0.5rem 0 0;
  font-family: var(--font-heading, inherit);
  font-size: 2rem;
  font-weight: 500;
}

.acct-balance__notes-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.acct-balance__notes-title svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.acct-balance__notes ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

@media (max-width: 749px) {
  .acct-balance {
    grid-template-columns: minmax(0, 1fr);
  }

  .acct-balance__notes {
    border-left: 0;
    border-top: 1px solid var(--acct-line);
  }
}

.acct-ledger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--acct-line);
}

.acct-ledger__label {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.acct-ledger__amount {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.acct-ledger__amount.is-credit {
  color: #16a64b;
}

/* A grant whose date has passed: "Expired 5 August 2026" in the error red, so it does not read
   like a live "Expires …" beside it. */
.acct-ledger__expired {
  color: #b3261e;
}

/* ---------------------------------------------------------------- wishlist tab */

.acct-wishlist {
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------- dialogs (no JS) */

.acct-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.acct-dialog:target,
.acct-dialog.is-open {
  display: flex;
}

.acct-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 11, 0.45);
}

.acct-dialog__box {
  position: relative;
  width: min(37.5rem, 100%);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  background: #fff;
  color: #0f0c0b;
}

.acct-dialog__box > form {
  margin: 0;
}

/* THE NUDGE (round 27, the admin's round-26 rule). Once something in a dialog has been typed or
   changed, a click on the dimmed backdrop and Escape leave it open, and the card gives this short
   sideways shake instead: the click landed, and the dialog stayed on purpose. No words - Cancel,
   x and Save are right there. checkout.js adds the class (and takes it off when it has run).
   Nothing moves for a shopper who asked for reduced motion. */
.acct-dialog__box.is-nudged {
  animation: acct-dialog-nudge 0.3s ease-in-out;
}

@keyframes acct-dialog-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-dialog__box.is-nudged {
    animation: none;
  }
}

.acct-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #dcdad8;
}

.acct-dialog__head h2 {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: var(--caps-transform, uppercase);
}

.acct-dialog__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #595550;
}

.acct-dialog__close:hover {
  color: #0f0c0b;
}

.acct-dialog__close svg {
  width: 1rem;
  height: 1rem;
}

.acct-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.acct-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #dcdad8;
}

.acct-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.acct-fields--2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 480px) {
  .acct-fields--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.acct-field,
.auth__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.075rem);
  text-transform: var(--caps-transform, uppercase);
  color: #595550;
}

.acct-field input,
.acct-field select,
.auth__field input {
  height: 2.875rem;
  padding: 0 0.875rem;
  border: 1px solid #dcdad8;
  border-radius: 0;
  background: #fff;
  color: #0f0c0b;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
}

.acct-field input:focus,
.auth__field input:focus {
  outline: none;
  border-color: #0f0c0b;
}

.acct-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------- store credit statement (round 14) */

/* The Store credit tab's statement form: two dates and two buttons on one row, wrapping on a
   phone. The fields are the Profile dialogs' own (.acct-field). */
.acct-statement {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0;
}

.acct-statement .acct-field {
  flex: 1 1 10rem;
  min-width: 0;
}

.acct-statement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- change email (round 13) */

/* "Waiting for you to confirm new@…" under the email row, and inside the pending dialog. */
.acct-pending-note {
  margin-top: 0.375rem;
  overflow-wrap: anywhere;
}

.acct-pending {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid #f1dfae;
  background: #fdf8ea;
  font-size: 0.875rem;
  color: #6b4e00;
  overflow-wrap: anywhere;
}

/* A green notice inside a dialog ("A new code is on its way.") — the page's own notice is hidden
   behind the overlay. */
.acct-notice--in-dialog {
  margin: 0;
}

/* The live verdict under the new address: one line at a time; the green tick is the "ok" one. */
.acct-email-status {
  min-height: 1.25rem;
  margin: -0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

.acct-email-status [hidden] {
  display: none;
}

.acct-email-status--ok {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #11632f;
}

.acct-email-status--ok svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.acct-email-status--bad {
  color: #b3261e;
}

.acct-field input[aria-invalid="true"] {
  border-color: #b3261e;
}

.acct-field input:disabled,
.acct-field input[readonly] {
  background: var(--acct-soft);
  color: var(--acct-muted);
}

.acct-dialog__foot form {
  margin: 0;
}

.acct-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* The code step's Resend button sits under the dialog's footer, centred like the sign-in card's. */
.acct-dialog__resend {
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  text-align: center;
}

/* ---------------------------------------------------------------- sign in (297:4185) */

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: calc(-1 * var(--spacing-sections, 0px)) calc(-1 * var(--sec-bleed, 0px));
  padding: 5rem 1.25rem 6rem;
  background: #f8f8f7;
}

.auth__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(31.25rem, 100%);
  padding: 2.5rem;
  border: 1px solid #dcdad8;
  background: #fff;
  color: #0f0c0b;
}

.auth__back {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.5rem 0 -0.5rem -0.5rem;
  color: #0f0c0b;
}

.auth__back svg {
  width: 1rem;
  height: 1rem;
}

.auth__intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  text-transform: var(--caps-transform, uppercase);
}

.auth__lead {
  margin: 0;
  font-size: 0.9375rem;
  color: #595550;
}

.auth__lead strong {
  color: #0f0c0b;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.auth__field em {
  font-style: normal;
  color: #b3261e;
  margin-left: 0.125rem;
}

.auth__field--error input {
  border-color: #b3261e;
}

.auth__error {
  margin: 0;
  font-size: 0.875rem;
  color: #b3261e;
}

/* The promo box on the email step (brief 10-20 §5, Settings > Checkout > Sign-in). Only drawn
   when the store shows it, so a store that leaves it Hidden renders exactly as before. */
.auth__optin {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #595550;
  cursor: pointer;
}

.auth__optin input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  accent-color: #0f0c0b;
}

.auth__ok {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: #16a64b;
}

.auth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1px solid #0f0c0b;
  border-radius: 0;
  background: #0f0c0b;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.124rem);
  text-transform: var(--caps-transform, uppercase);
  cursor: pointer;
}

.auth__btn:hover {
  background: #2b2724;
}

/* The same button as a link (notice pages: "Sign in", "Request a new link"). */
a.auth__btn {
  color: #fff;
  text-decoration: none;
}

/* A button's second label (the busy "Sending…") waits in the HTML with [hidden]; the flex
   display above must not resurrect it. */
.auth__btn [hidden],
.auth__link [hidden] {
  display: none;
}

/* A field's helper line ("At least 8 characters.") — pulled up to sit under its input. */
.auth__hint {
  margin: -0.5rem 0 0;
  font-size: 0.8125rem;
  color: #595550;
}

/* A boxed message on the card: the reason a shopper was sent here, or the outcome of a submit. */
.auth__notice {
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid #dcdad8;
  background: #f8f8f7;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #0f0c0b;
}

.auth__notice strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.auth__notice--ok {
  border-color: #b9dfc6;
  background: #eef8f1;
  color: #11632f;
}

.auth__notice--error {
  border-color: #f0c2bd;
  background: #fdf1ef;
  color: #b3261e;
}

.auth__btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.auth__link {
  padding: 0;
  border: 0;
  background: none;
  color: #0f0c0b;
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.auth__link[disabled] {
  color: #595550;
  text-decoration: none;
  cursor: default;
}

.auth__link--strong {
  align-self: center;
  font-weight: 500;
}

.auth__resend {
  margin: 0;
  text-align: center;
}

/* The way forward when the right password meets an email that is not confirmed yet: the link
   again (an outlined button, so the black LOG IN above stays the main action), or a code. */
.auth__verify {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #dcdad8;
  background: #f8f8f7;
}

.auth__verify .auth__small {
  margin-top: 0.25rem;
}

.auth__btn--outline {
  width: 100%;
  background: #fff;
  color: #0f0c0b;
}

.auth__btn--outline:hover {
  background: #f1f0ee;
}

/* A hint under a pair of buttons (the confirmation link's "No" explained), not under a field. */
.auth__hint--center {
  margin: 0;
  text-align: center;
}

.auth__small {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: #595550;
}

.auth__terms {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid #dcdad8;
  font-size: 0.75rem;
  color: #595550;
  text-align: center;
}

.auth__terms a {
  color: inherit;
}

.auth__powered {
  margin: 0;
  font-size: 0.75rem;
  color: #595550;
}

.auth__powered strong {
  color: #0f0c0b;
  font-weight: 600;
}

/* The six code boxes (297:4221): 56px squares, black border on focus, red on a wrong code. */
.otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.otp__box {
  width: 100%;
  height: 3.5rem;
  padding: 0;
  border: 1px solid #dcdad8;
  border-radius: 0;
  background: #fff;
  color: #0f0c0b;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.otp__box:focus {
  outline: none;
  border-color: #0f0c0b;
}

.otp--error .otp__box {
  border-color: #b3261e;
}

@media (max-width: 480px) {
  .auth__card {
    padding: 1.5rem;
  }
}

/* ---------------------------------------------------------------- wishlist hearts */

.wish-form {
  margin: 0;
}

.wish-heart {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #0f0c0b;
  cursor: pointer;
}

.wish-heart__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.wish-heart__line {
  fill: currentColor;
}

.wish-heart__fill {
  fill: transparent;
  transition: fill 0.15s;
}

.wish-heart[aria-pressed="true"] .wish-heart__fill {
  fill: currentColor;
}

/* On a card: a 36px white disc, BOTTOM right of the image. The top corners are taken — the
   sale / sold-out badges sit top left (card.css) and the PRE-ORDER chip top right — and the
   design draws no heart on a card, so it goes where it covers neither. */
.product-card__wish {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
}

.product-card__wish .wish-heart {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.product-card__wish .wish-heart:hover {
  background: #fff;
}

/* On the product page: a 48px bordered square closing the buy row (311:3212). */
.product__wish {
  width: 3rem;
  height: 3rem;
  border: 1px solid #dcdad8;
  background: #fff;
}

.product__wish:hover {
  border-color: #0f0c0b;
}

/* ---------------------------------------------------------------- return evidence (round 18b CH) */

/* The return form's photos-and-video area (return-evidence.js) and the order page's "How your parcel
   arrived" (Part 3A / 3C). The file input is visually hidden inside a button-styled label, so the
   control reads as one of the area's buttons; each upload is a row with a thumbnail, its progress
   and a Remove link. */
.rq-evidence__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0.25rem 0;
}

.rq-evidence__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rq-evidence__pick:focus-within {
  outline: 2px solid var(--acct-ink);
  outline-offset: 2px;
}

.rq-evidence__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.rq-evidence__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--acct-line);
  background: #fff;
}

.rq-evidence__item[data-status="error"] {
  border-color: #b3261e;
}

.rq-evidence__thumb {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--acct-soft);
  color: var(--acct-muted);
}

.rq-evidence__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rq-evidence__text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.rq-evidence__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rq-evidence__state {
  font-size: 0.8125rem;
  color: var(--acct-muted);
}

.rq-evidence__item[data-status="error"] .rq-evidence__state {
  color: #b3261e;
}

.rq-evidence__bar {
  width: 100%;
  height: 0.375rem;
  accent-color: var(--acct-ink);
}

.rq-evidence__remove {
  flex: 0 0 auto;
}

/* "How your parcel arrived" stacks its lines (the callout it borrows lays them out in a row). */
.acct-callout.rq-receipt {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.rq-receipt__files {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rq-receipt__file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  border: 1px solid var(--acct-line);
  background: #fff;
  color: var(--acct-ink);
  text-decoration: none;
  font-size: 0.8125rem;
  text-align: center;
}

.rq-receipt__file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 10-16 pages parity: policy pages, Theme settings › Policy pages › Layout "Centred" -----------
   templates/policy.liquid prints .policy-page only for that layout. A colour-scheme band flush under the
   header and edge to edge (--sec-bleed, sections.css), the date line and a large title centred, the
   text in a 700px column. Sizes from the client site's legal pages (docs/clients/snifl/
   SITE_MEASUREMENTS.md §3.12): title 100/80/56, section headings 28 and 22, body as the theme's text. */
.policy-page {
  margin: -1rem calc(-1 * var(--sec-bleed, 0px)) -1rem;
  padding: 46px var(--sec-bleed, 1.25rem) 80px;
  background: var(--policy-bg);
  color: var(--policy-fg);
}

.policy-page__updated {
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
}

.policy-page__title {
  margin: 10px 0 0;
  text-align: center;
  font-size: 100px;
  line-height: 1;
  font-weight: 700;
}

.policy-page__column {
  max-width: 700px;
  margin: 32px auto 0;
  font-size: var(--text-size, 1rem);
  line-height: var(--text-line-height, 1.4);
}

.policy-page .policy-body p,
.policy-page .policy-body ul,
.policy-page .policy-body ol {
  margin: 0;
}

.policy-page .policy-body h2,
.policy-page__heading {
  margin: 40px 0 20px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
}

.policy-page .policy-body h3,
.policy-page .policy-body h4 {
  margin: 40px 0 20px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.policy-page .policy-body > :first-child {
  margin-top: 0;
}

.policy-page .policy-meta {
  margin: 0 0 20px;
  font-size: 14px;
  opacity: 0.8;
}

@media (max-width: 1199px) {
  .policy-page__title {
    font-size: 80px;
  }
}

@media (max-width: 749px) {
  .policy-page {
    padding-top: 19px;
  }

  .policy-page__title {
    font-size: 56px;
  }

  .policy-page .policy-body h2,
  .policy-page__heading {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------- welcome (first sign-in) */

/* The one-time card above the title (BUILD_BRIEF_2026-10-23 §1, account_welcome.go). Its colours
   follow the theme: a light wash of the theme's button colour behind, the button in the button
   colour itself. Forms, so the close button, the name box and the button all work without JS. */
.acct-welcome {
  position: relative;
  margin: 0 0 2rem;
  padding: 1.5rem 3.5rem 1.5rem 1.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-button, var(--acct-ink)) 10%, #fff);
  color: var(--acct-ink);
}

.acct-welcome__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.acct-welcome__text {
  margin: 0 0 1rem;
  color: var(--acct-muted);
}

.acct-welcome__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin: 0;
}

.acct-welcome__x {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--acct-muted);
  font-size: 1rem;
  cursor: pointer;
}

.acct-welcome__x:hover {
  color: var(--acct-ink);
}

.acct-welcome__name {
  margin: 0 0 1rem;
}

.acct-welcome__label {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.acct-welcome__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.acct-welcome__input {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 20rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--acct-line);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--acct-ink);
  font: inherit;
}

.acct-welcome__go {
  margin: 0;
}

/* The empty Orders list with "Belanja sekarang" under its line (until the first order). */
.acct-empty--shop p {
  margin: 0 0 1rem;
}

.acct-empty__shop {
  display: inline-block;
  text-decoration: none;
}

.acct-welcome__btn {
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: var(--button-radius, 999px);
  background: var(--color-button, var(--acct-ink));
  color: var(--color-button-text, #fff);
  font: inherit;
  font-weight: 500;
  text-transform: var(--button-text-transform, none);
  cursor: pointer;
}