/* ==========================================================================
   PddFalcon storefront — the quiet pages

   Sign in, register, forgotten password, the account dashboard, orders,
   addresses, saved items and the merchant's own policy pages.

   These are the screens nobody designs twice: a shopper reaches them after
   they have already decided to trust the shop, and finding a plainer, looser,
   less finished website waiting for them is the moment that trust goes. This
   sheet makes them the same shop as the home page — same navy, same red, same
   card grammar, same curve — without moving one component out of its place.

   Loaded after snap-inner.css and before site-premium.css, so it refines the
   Snap layer without !important and never argues with the footer or the home
   bands, which site-premium.css and home-premium.css own.

   Every colour below is a token from tokens.css or an rgb()/color-mix() built
   from the six brand values. Every animation is transform and opacity only,
   and every one of them is cancelled by prefers-reduced-motion at the foot of
   the sheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Local values

   Named here rather than repeated: the account pages share one lift, one
   curve and one hairline, and a single place to change them is the reason
   they read as one set of screens.
   -------------------------------------------------------------------------- */
:root {
  --ap-ease: cubic-bezier(.22, 1, .36, 1);
  --ap-hair: rgb(13 36 84 / .08);
  --ap-hair-warm: rgb(196 38 12 / .28);
  --ap-lift: 0 22px 48px -26px rgb(13 36 84 / .38), 0 2px 6px -2px rgb(13 36 84 / .06);
  --ap-lift-sm: 0 12px 26px -18px rgb(13 36 84 / .34);
}

/* --------------------------------------------------------------------------
   One entrance, used by everything on these pages

   A CSS keyframe and not a scroll observer, deliberately. `motion.js` only
   stamps `data-motion` on the document when it finds a `.sp-reveal` on the
   page, and none of these pages carries one — so a JS-gated reveal here would
   leave the card at opacity 0 for a visitor with scripts blocked. These pages
   are also short enough that everything worth animating is on the first
   screen. The animation carries no `backwards` fill past its own delay and
   ends at exactly the value the stylesheet already sets, so a browser that
   ignores it shows the finished page.
   -------------------------------------------------------------------------- */
@keyframes ap-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ap-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The saved-items heart breathes, once the page has settled. */
@keyframes ap-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

/* ==========================================================================
   1. The auth card — sign in, register, forgotten password, reset, verify
   ========================================================================== */

/*
 * The stage.
 *
 * Measured at 1440: a 480px card alone in a 1440px white page, with 480px of
 * nothing on each side of it and the footer's navy starting underneath. It
 * read as a form that had been left somewhere rather than a door into the
 * shop. A wash the width of the page — navy at 4%, warmed with a breath of
 * the brand red on the far side — puts the card on something.
 *
 * Painted on the section rather than on the card so the colour runs edge to
 * edge; `:has()` keeps it to the pages that actually hold an auth card.
 */
.s-section:has(> .s-authbox) {
  position: relative;
  isolation: isolate;
}

.s-section:has(> .s-authbox)::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Out to the viewport edges: .s-wrap is capped at 84rem and gutter-padded,
     so an inset background would have drawn a second card behind the card. */
  /* Down past the section's own padding and into the gap above the footer,
     so the wash ends on white rather than drawing a seam across the page. */
  inset-block: -1.25rem -5rem;
  inset-inline: calc(50% - 50vw);
  background:
    radial-gradient(60% 65% at 22% 10%, rgb(13 36 84 / .07), transparent 72%),
    radial-gradient(40% 45% at 86% 62%, rgb(196 38 12 / .05), transparent 70%),
    linear-gradient(180deg, var(--s-cream), #fff 58%);
  pointer-events: none;
}

/*
 * The card.
 *
 * More air than the 2rem it had, a curve that matches the shelves on the home
 * page, and a shadow deep enough to be believed at 480px wide. The lit top
 * edge is the same three-ink hairline the footer uses, so the first and last
 * things on the page are drawn by the same hand.
 */
.s-authbox {
  position: relative;
  max-inline-size: 30.5rem;
  padding: 2.25rem 2rem 2rem;
  border-color: var(--ap-hair);
  border-radius: 24px;
  box-shadow: var(--ap-lift);
  overflow: hidden;
  animation: ap-rise .62s var(--ap-ease) both;
}

.s-authbox::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--s-accent-500), var(--s-cool-500) 52%, var(--s-brand-500));
  opacity: .9;
}

@media (min-width: 40rem) {
  .s-authbox { padding: 2.5rem 2.5rem 2.25rem; }
}

/* The title, its red tick and the sentence under it are one block; the form
   is the next. The gap between them was the same as the gap inside them. */
.s-authbox .s-head__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem); }
.s-authbox .s-note { margin-block-end: 1.5rem; line-height: 1.6; }
.s-authbox .s-fields { margin-block-start: 0; gap: 1.15rem 1.25rem; }

/* Everything under the form is an aside — the "no account yet", the "back to
   signing in" — so it is separated by a rule rather than by guesswork. */
.s-authbox .s-fields ~ .s-note:first-of-type,
.s-authbox form + .s-note {
  position: relative;
  padding-block-start: 1.25rem;
}
.s-authbox .s-fields ~ .s-note:first-of-type::before,
.s-authbox form + .s-note::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--sp-line) 18%, var(--sp-line) 82%, transparent);
}

/* Field rhythm: the label sits closer to the box it names than to the field
   above it, which is the whole of reading a form quickly. */
.s-authbox .s-field { gap: .45rem; }
.s-authbox .s-field label { letter-spacing: .005em; }
.s-authbox .s-field__help { margin-block-start: .1rem; font-size: var(--s-text-xs); }

/* An error is never colour alone: it takes a red rule beside it as well, so
   it survives a colour-blind reader and a greyscale print. Scoped to the auth
   card, which is also what both address forms are drawn in — the checkout's
   own fields belong to another sheet. */
.s-authbox .s-field__error {
  display: block;
  margin-block-start: .15rem;
  padding-inline-start: .6rem;
  border-inline-start: 2px solid var(--s-danger);
  font-size: var(--s-text-xs);
  line-height: 1.45;
}

/* A field the browser has flagged gets the same treatment on the box itself,
   again with a shape (the ring) and not only a hue. */
.s-authbox .s-field.is-invalid input,
.s-authbox .s-field input[aria-invalid="true"] {
  box-shadow: 0 0 0 4px rgb(180 35 24 / .10);
}

/*
 * A keyboard on a field.
 *
 * The shared sheets give a focused input a 4px navy glow, which reads at a
 * glance with a mouse but is thin for somebody driving the form from the
 * keyboard. A real outline outside the glow, only for `:focus-visible`, so a
 * pointer user still gets the quiet version.
 */
.s-authbox .s-field input:focus-visible,
.s-authbox .s-field select:focus-visible,
.s-authbox .s-field textarea:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 2px;
}

/* "Keep me signed in" is a control, so it gets a control's target: the whole
   row is 44px tall and the label is part of it. */
.s-authbox .s-check {
  min-block-size: 2.75rem;
  margin-block-start: -.15rem;
  /* The row's own 0.4rem of vertical padding came off the label's stretched
     height, which left the thing a thumb can hit at 31px inside a 44px row. */
  padding: 0 .1rem;
  border-radius: 10px;
}
/* The label carries the row's full height, so the target a thumb actually has
   is 44px tall and not the 19px box next to it. */
.s-authbox .s-check label {
  display: flex;
  align-items: center;
  align-self: stretch;
  cursor: pointer;
  font-weight: 600;
}
.s-authbox .s-check input { inline-size: 1.25rem; block-size: 1.25rem; }

/*
 * The links under the form.
 *
 * "I have forgotten my password" is a control on its own line, so it gets a
 * control's height. The ones inside a sentence cannot be 44px without
 * breaking the sentence, but vertical padding on an inline box grows what a
 * thumb can hit without moving a single line of type.
 */
.s-authbox .s-note a { padding-block: .45rem; }

/*
 * Named by where it goes, not by its position in the paragraph.
 *
 * `:only-child` was the obvious selector and it was wrong: text nodes are not
 * element children, so it also matched the telephone number inside "Forgotten
 * your password? Call us on … and we will help." and the "Sign in" inside
 * "Already have one? Sign in." — which turned a word in the middle of a
 * sentence into a 44px box and pushed that paragraph from 21px to 85px tall
 * (measured on /login with the mail switch off). Matching the destination
 * instead can only ever hit the standalone link.
 */
.s-authbox .s-note > a[href$="/forgot-password"] {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: 0;
}

/* The one action on the page. It is already red; give it the height and the
   settle-on-press that the buy button has. */
.s-authbox .s-btn--block {
  min-block-size: 3.25rem;
  margin-block-start: .35rem;
  font-size: var(--s-text-md);
  letter-spacing: .01em;
  transition: background .2s var(--ap-ease), box-shadow .25s var(--ap-ease), transform .16s var(--ap-ease);
}
.s-authbox .s-btn--primary:hover { transform: translate3d(0, -1px, 0); }
.s-authbox .s-btn--primary:active { transform: translate3d(0, 1px, 0); }

/* The social buttons and the "or" bar, kept level with the fields. */
.s-authbox .s-oauth { display: grid; gap: .6rem; }
.s-authbox .s-oauth__btn { min-block-size: 3rem; border-radius: 999px; }
.s-authbox .s-oauth__note { margin-block-start: .6rem; font-size: var(--s-text-xs); }

/* --------------------------------------------------------------------------
   1a. The password reveal

   Measured before: 35.2 × 35.2px — under the 44px this project promises, on
   the one control a shopper reaches for with a thumb while typing a password
   they cannot see. It is now 44px inside a 48px field, still centred, and it
   answers to hover, to press and to the keyboard.
   -------------------------------------------------------------------------- */
.s-reveal__btn {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  inset-inline-end: .15rem;
  border-radius: 12px;
  background: transparent;
  color: var(--s-muted);
  transition: background .2s var(--ap-ease), color .2s var(--ap-ease), transform .18s var(--ap-ease);
}
.s-reveal__btn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.s-reveal__btn:hover {
  background: rgb(13 36 84 / .07);
  color: var(--s-brand-800);
  transform: scale(1.06);
}
.s-reveal__btn:active { transform: scale(.94); }

/* Room for it, and a hair more so the dots never run under the icon. */
.s-reveal input { padding-inline-end: 3.4rem; }

/* While the field has focus the eye is worth noticing; it is the thing the
   person is about to press. */
.s-reveal:focus-within .s-reveal__btn { color: var(--s-brand-800); }

/* ==========================================================================
   2. The account dashboard
   ========================================================================== */

/*
 * Sign out.
 *
 * `.s-head__more` was written for a link, and this one is a <button> inside a
 * form because signing out changes state. The browser's own button chrome was
 * showing through — measured 56 × 35px with a grey border and a grey face, the
 * only unstyled control on the account pages. It is now a proper ghost pill,
 * 44px tall, with the red the rest of the page uses for an action.
 */
.s-head form > button.s-head__more,
button.s-head__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 2.75rem;
  padding-inline: 1.1rem;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--s-accent-500);
  font: 700 var(--s-text-sm)/1 var(--s-font-body);
  cursor: pointer;
  transition: border-color .22s var(--ap-ease), background .22s var(--ap-ease), color .22s var(--ap-ease), box-shadow .22s var(--ap-ease), transform .18s var(--ap-ease);
}
button.s-head__more:hover {
  border-color: var(--s-accent-500);
  background: var(--s-accent-500);
  color: #fff;
  box-shadow: var(--ap-lift-sm);
  transform: translate3d(0, -1px, 0);
}
button.s-head__more:active { transform: translate3d(0, 0, 0); }

/* The "Back to your account" links beside a page title get the same target,
   so the two head slots feel like one component across the four screens. */
.s-head a.s-head__more {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: .15rem;
}

/* --------------------------------------------------------------------------
   2a. The three cards

   They enter one after the other, left to right, which is the order a reader
   takes them in anyway.
   -------------------------------------------------------------------------- */
.s-accountgrid { gap: 1rem; }
@media (min-width: 62rem) { .s-accountgrid { gap: 1.25rem; } }

.s-accountcard {
  position: relative;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 1.35rem 1.35rem 1.25rem;
  border-color: var(--ap-hair);
  overflow: hidden;
  animation: ap-rise .55s var(--ap-ease) both;
  animation-delay: calc(var(--ap-i, 0) * 70ms + 40ms);
  transition:
    translate .35s var(--ap-ease),
    box-shadow .35s var(--ap-ease),
    border-color .35s var(--ap-ease);
}
.s-accountgrid > .s-accountcard:nth-child(1) { --ap-i: 0; }
.s-accountgrid > .s-accountcard:nth-child(2) { --ap-i: 1; }
.s-accountgrid > .s-accountcard:nth-child(3) { --ap-i: 2; }

/* The lit edge that arrives on hover. It is drawn always and revealed by
   opacity, so nothing is laid out twice. */
.s-accountcard::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--s-accent-500), var(--s-cool-500));
  opacity: 0;
  transition: opacity .3s var(--ap-ease);
}

.s-accountcard:hover,
.s-accountcard:focus-visible {
  translate: 0 -4px;
  border-color: var(--ap-hair-warm);
  box-shadow: var(--ap-lift);
}
.s-accountcard:hover::after,
.s-accountcard:focus-visible::after { opacity: 1; }
.s-accountcard:active { translate: 0 -1px; }

.s-accountcard:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 3px;
}

/*
 * The icon.
 *
 * A rounded square rather than a circle, so it agrees with the product tiles,
 * and it fills with the brand red as the card rises — the one moment of
 * colour on a page that is otherwise navy on white.
 */
.s-accountcard__mark {
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--s-accent-100), color-mix(in srgb, var(--s-accent-100) 55%, #fff));
  box-shadow: inset 0 0 0 1px rgb(196 38 12 / .12);
  transition: background .32s var(--ap-ease), color .32s var(--ap-ease), transform .32s var(--ap-ease), box-shadow .32s var(--ap-ease);
}
.s-accountcard__mark svg { inline-size: 1.4rem; block-size: 1.4rem; }
.s-accountcard:hover .s-accountcard__mark {
  background: linear-gradient(150deg, var(--s-accent-500), var(--s-accent-600));
  color: #fff;
  box-shadow: 0 10px 20px -12px rgb(196 38 12 / .8), inset 0 1px 0 rgb(255 255 255 / .25);
  transform: rotate(-3deg) scale(1.04);
}

/*
 * The words.
 *
 * `.s-accountcard__body` is a grid cell holding two spans, and nothing said
 * they were lines — measured 285 × 45px with "My orders" and "4 orders, and
 * where each one has got to" running together on one line and wrapping mid
 * sentence. They are a title and a note; now they read as one.
 */
.s-accountcard__body {
  display: grid;
  gap: .2rem;
  min-inline-size: 0;
}
.s-accountcard__title { font-size: var(--s-text-lg); line-height: 1.25; }
.s-accountcard__note {
  font-size: var(--s-text-sm);
  line-height: 1.45;
  color: var(--s-muted);
  overflow-wrap: anywhere;
}

/* The arrow becomes a chip and travels on hover — the smallest possible
   promise that the card goes somewhere. */
.s-accountcard__go {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: rgb(196 38 12 / .08);
  font-size: var(--s-text-md);
  line-height: 1;
  transition: background .3s var(--ap-ease), color .3s var(--ap-ease), transform .3s var(--ap-ease);
}
.s-accountcard:hover .s-accountcard__go {
  background: var(--s-accent-500);
  color: #fff;
  transform: translate3d(3px, 0, 0);
}

@media (max-width: 24.99rem) {
  .s-accountcard { padding: 1.1rem; gap: .85rem; }
  .s-accountcard__mark { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   2b. "Your details"
   -------------------------------------------------------------------------- */
.s-accountdetails {
  margin-block-start: 1.25rem;
  padding: 1.5rem;
  border-color: var(--ap-hair);
  animation: ap-rise .55s var(--ap-ease) both;
  animation-delay: .24s;
}
@media (min-width: 62rem) { .s-accountdetails { padding: 1.75rem; } }

.s-accountdetails .s-pdp__block-title {
  font-size: var(--s-text-md);
  letter-spacing: var(--s-tracking-caps);
  text-transform: uppercase;
  color: var(--s-muted);
}

/*
 * The address slabs.
 *
 * A full-width grey band per address, on a 1440 page, is 1200px of tile
 * holding one line of text. Capped to the measure the text actually needs and
 * laid out in a row where there is room, so two saved addresses sit side by
 * side instead of stacking down an empty page.
 */
.s-accountdetails .s-address,
.s-accountdetails > p.s-address {
  max-inline-size: 34rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sp-line);
  background: var(--sp-tile);
  line-height: 1.6;
}
/* The email and the telephone are things a person taps on a phone, so their
   hit box is grown with vertical padding — it does not move a line of type. */
.s-accountdetails .s-address a {
  padding-block: .4rem;
  color: var(--s-brand-500);
  font-weight: 600;
}
.s-accountdetails .s-address a:hover { color: var(--s-accent-500); }

/* "Manage your addresses" measured 36px tall; it is a control like any
   other. */
.s-accountdetails .s-btn {
  min-block-size: 2.75rem;
  padding-inline: 1.25rem;
}
.s-accountdetails .s-address + .s-address { margin-block-start: .75rem; }
.s-accountdetails .s-address strong { color: var(--s-brand-800); }

/*
 * "we suggest this one".
 *
 * `.s-address` is a grid, so the span became a row — measured 1204 × 17px, a
 * navy bar the width of the panel with six words in it. It is a pill again,
 * sized to its own words, and it sits on the label's line.
 */
.s-address__default {
  justify-self: start;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-block: .15rem .1rem;
  padding: .2rem .6rem;
  font-size: var(--s-text-2xs);
  font-weight: 800;
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
  line-height: 1.5;
}

/*
 * On a wide screen the panel was a column of bands down its left-hand half
 * with 700px of nothing beside them — measured at 1440. Laid out as two
 * columns with the headings spanning, the same content fills the panel and
 * the two saved addresses sit side by side, which is also how a person
 * compares them.
 */
@media (min-width: 62rem) {
  .s-accountdetails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.25rem;
    align-content: start;
  }
  .s-accountdetails > h2,
  .s-accountdetails > p:last-child { grid-column: 1 / -1; }
  .s-accountdetails > p.s-address { max-inline-size: none; }
  .s-accountdetails .s-address + .s-address { margin-block-start: 0; }

  /*
   * "Your details" is three short lines. In a two-column grid it took one
   * cell and left the other one empty — half a row of nothing, which is the
   * one thing the client has asked us never to leave on a page. Across the
   * full width instead, with the line breaks dropped, so the name, the email
   * and the telephone read as one row of facts and the row is full.
   */
  .s-accountdetails > h2:first-of-type + .s-address {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 2.5rem;
    row-gap: .35rem;
  }
  .s-accountdetails > h2:first-of-type + .s-address br { display: none; }
}

/* ==========================================================================
   3. The order rows and the address rows

   Both pages draw `.s-line`, which snap-inner.css sizes for the bag — a 6rem
   picture and then everything else. With no picture in the markup the first
   column still took its 6rem, so on /account/orders the order number sat in a
   96px box (measured) with the total floating in a 1092px column beside it,
   and on /account/addresses a whole address wrapped down 302px of a 96px
   column with 1150px of white to its right.

   The two selectors below are deliberately narrow. A bag line and an order
   line both carry `.s-line`, and the discriminators are exact: the orders
   list is the only place `.s-line__name` is a link, and the addresses list is
   the only place a line carries `.s-line__foot--actions`. Nothing on the bag,
   the checkout or the order page is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3a. Orders
   -------------------------------------------------------------------------- */
.s-panel > .s-line:has(> div > a.s-line__name) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-color: var(--ap-hair);
  animation: ap-fade .5s var(--ap-ease) both;
  animation-delay: calc(var(--ap-i, 0) * 55ms + 40ms);
  transition: border-color .28s var(--ap-ease), box-shadow .28s var(--ap-ease), transform .28s var(--ap-ease);
}
.s-panel > .s-line:has(> div > a.s-line__name):nth-child(1) { --ap-i: 0; }
.s-panel > .s-line:has(> div > a.s-line__name):nth-child(2) { --ap-i: 1; }
.s-panel > .s-line:has(> div > a.s-line__name):nth-child(3) { --ap-i: 2; }
.s-panel > .s-line:has(> div > a.s-line__name):nth-child(4) { --ap-i: 3; }
.s-panel > .s-line:has(> div > a.s-line__name):nth-child(n+5) { --ap-i: 4; }

/* The row answers the pointer even though only the number is a link — the
   hairline warms and the row lifts a hair, which is the affordance without
   pretending the whole row is clickable. */
.s-panel > .s-line:has(> div > a.s-line__name):hover {
  border-color: var(--ap-hair-warm);
  box-shadow: var(--ap-lift-sm);
  transform: translate3d(0, -2px, 0);
}

/*
 * The order number: bigger, navy, and it takes a red rule as you point at it
 * so it is plainly the way in.
 *
 * The rule is the text's own underline shown by colour rather than a bar that
 * grows, so pointing at a row costs the browser a repaint of two pixels and
 * never a layout.
 */
.s-line a.s-line__name {
  display: inline-block;
  font-family: var(--s-font-display);
  font-size: var(--s-text-md);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--s-brand-800);
  text-decoration: underline 2px transparent;
  text-underline-offset: .3em;
  transition: color .24s var(--ap-ease), text-decoration-color .24s var(--ap-ease);
}
.s-line a.s-line__name:hover {
  color: var(--s-accent-500);
  text-decoration-color: var(--s-accent-500);
}
.s-line a.s-line__name:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * The whole row is the target, not the 23px of type.
 *
 * The order number is the only link in the row, and a row 115px tall with a
 * 23px hit box in one corner is the difference between tapping an order and
 * tapping nothing. The link's own box is stretched over the row, so a thumb
 * anywhere on the card opens the order — while the focus ring stays on the
 * words, which is where a keyboard user is looking.
 *
 * The row is the positioned ancestor and the link is not, so the overlay
 * covers the card. The total on the right is text and not a control, so
 * nothing interactive is buried underneath it.
 */
.s-panel > .s-line:has(> div > a.s-line__name) { position: relative; }
.s-panel > .s-line:has(> div > a.s-line__name) a.s-line__name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.s-panel > .s-line:has(> div > a.s-line__name) .s-line__meta {
  margin-block-start: .3rem;
  font-size: var(--s-text-sm);
  line-height: 1.5;
}

/* The total: the number a shopper is scanning the page for. */
.s-panel > .s-line:has(> div > a.s-line__name) .s-line__price {
  justify-self: end;
  font-family: var(--s-font-display);
  font-size: var(--s-text-lg);
  font-weight: 800;
  color: var(--s-brand-800);
  white-space: nowrap;
}

@media (max-width: 26rem) {
  /* Under 416px the total drops under the number rather than squeezing it. */
  .s-panel > .s-line:has(> div > a.s-line__name) {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: .95rem 1rem;
  }
  .s-panel > .s-line:has(> div > a.s-line__name) .s-line__price { justify-self: start; }
}

/* --------------------------------------------------------------------------
   3b. Addresses
   -------------------------------------------------------------------------- */
.s-panel > .s-line:has(.s-line__foot--actions) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 1.15rem 1.25rem;
  border-color: var(--ap-hair);
  animation: ap-fade .5s var(--ap-ease) both;
  animation-delay: calc(var(--ap-i, 0) * 60ms + 40ms);
  transition: border-color .28s var(--ap-ease), box-shadow .28s var(--ap-ease);
}
.s-panel > .s-line:has(.s-line__foot--actions):nth-child(1) { --ap-i: 0; }
.s-panel > .s-line:has(.s-line__foot--actions):nth-child(2) { --ap-i: 1; }
.s-panel > .s-line:has(.s-line__foot--actions):nth-child(n+3) { --ap-i: 2; }
.s-panel > .s-line:has(.s-line__foot--actions):hover {
  border-color: var(--ap-hair-warm);
  box-shadow: var(--ap-lift-sm);
}

/* The label is the thing you look for when you have three saved addresses. */
.s-panel > .s-line:has(.s-line__foot--actions) .s-line__name {
  display: block;
  font-family: var(--s-font-display);
  font-size: var(--s-text-md);
  font-weight: 800;
  color: var(--s-brand-800);
}
.s-panel > .s-line:has(.s-line__foot--actions) .s-line__name .s-optional {
  font-family: var(--s-font-body);
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-accent-500);
  text-transform: none;
}
.s-panel > .s-line:has(.s-line__foot--actions) .s-line__meta {
  margin-block-start: .3rem;
  max-inline-size: 44rem;
  font-size: var(--s-text-sm);
  line-height: 1.55;
}

/*
 * The three actions.
 *
 * Update, Suggest this one and Remove were three underlined words of muted
 * grey — 20px tall, easy to miss and impossible to hit with a thumb. They are
 * pills now: same size, same target, and Remove is the only one that carries
 * the danger colour, and it carries a border as well as a hue.
 */
.s-line__foot--actions {
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: .9rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--sp-line);
}
.s-line__foot--actions form { display: contents; }

.s-line__foot--actions .s-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-inline: 1.05rem;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--s-brand-800);
  font: 700 var(--s-text-sm)/1 var(--s-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s var(--ap-ease), background .2s var(--ap-ease), color .2s var(--ap-ease), transform .16s var(--ap-ease);
}
.s-line__foot--actions .s-line__remove:hover {
  border-color: var(--s-brand-800);
  background: var(--s-brand-800);
  color: #fff;
  transform: translate3d(0, -1px, 0);
}
.s-line__foot--actions .s-line__remove:active { transform: none; }
.s-line__foot--actions .s-line__remove:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 2px;
}

/* Remove is destructive, so it is named in red and edged in red — never the
   hue on its own. It is the last pill in the row. */
.s-line__foot--actions form:last-of-type .s-line__remove {
  border-color: rgb(180 35 24 / .3);
  color: var(--s-danger);
}
.s-line__foot--actions form:last-of-type .s-line__remove:hover {
  border-color: var(--s-danger);
  background: var(--s-danger);
  color: #fff;
}
.s-line__foot--actions form:last-of-type .s-line__remove:focus-visible {
  outline-color: var(--s-danger);
}

/* "Add an address" ends the panel, so it gets a rule above it and real room. */
.s-section > .s-panel > .s-btn--primary {
  min-block-size: 2.9rem;
  margin-block-start: 1.25rem;
  padding-inline: 1.5rem;
}

/* The empty-list sentence on either page is a note, not a paragraph of body
   copy stranded in a panel. */
.s-section > .s-panel > .s-note {
  max-inline-size: 40rem;
  padding: 1.25rem 1.35rem;
  border: 1px dashed var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-tile);
  line-height: 1.6;
}

/*
 * The panel around the list.
 *
 * Each row is now a card, so a bordered, shadowed panel around them drew a
 * frame inside a frame. The bag page settled this same question the same way
 * (see the last rule in snap-inner.css): the list is a tray, and the cards
 * are the things in it.
 */
/* `:has()` may not be nested inside `:has()` — a selector that does is thrown
   away whole — so the panel is matched on the descendant instead. */
.s-panel:has(> .s-line .s-line__foot--actions),
.s-panel:has(> .s-line > div > a.s-line__name) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Two saved addresses side by side rather than two full-width bands with a
   thousand pixels of white beside them. "Add an address" keeps the full row,
   so it stays the end of the list rather than a third card. */
@media (min-width: 62rem) {
  .s-panel:has(> .s-line .s-line__foot--actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .s-panel:has(> .s-line .s-line__foot--actions) > .s-line + .s-line { margin-block-start: 0; }

  /* Two cards in a row are the same height whatever the addresses inside them
     say, and the actions sit on the bottom edge of both — a ragged pair of
     cards with their buttons at different heights is the thing that makes a
     list look unfinished. */
  .s-panel:has(> .s-line .s-line__foot--actions) > .s-line > div {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }
  /* The gap above the rule moves off the actions row and onto the address
     line, because `margin-block-start: auto` has to be free to eat the
     leftover height and would otherwise collapse the gap on the taller card. */
  .s-panel:has(> .s-line .s-line__foot--actions) .s-line__meta:last-of-type { margin-block-end: .9rem; }
  .s-panel:has(> .s-line .s-line__foot--actions) .s-line__foot--actions { margin-block-start: auto; }
  .s-panel:has(> .s-line .s-line__foot--actions) > .s-btn,
  .s-panel:has(> .s-line .s-line__foot--actions) > .s-note {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ==========================================================================
   4. Saved items — the empty state
   ========================================================================== */

/*
 * The empty saved list is the one screen on the site that exists only to be
 * empty, and it was a flat grey rectangle 1280px wide. It is now a tile with
 * a little depth, a heart that sits in a ring of its own, and a hint of the
 * brand behind it — enough to look like a page somebody drew.
 */
.s-wrap > .s-empty {
  position: relative;
  gap: .35rem;
  padding: 3.5rem 1.5rem;
  border: 1px solid var(--ap-hair);
  background:
    radial-gradient(50% 70% at 50% 0%, rgb(196 38 12 / .05), transparent 70%),
    linear-gradient(180deg, #fff, var(--sp-tile));
  overflow: hidden;
  animation: ap-rise .55s var(--ap-ease) both;
}

/* Two faint rings behind the mark, which give the middle of the tile a
   centre. Drawn with one element and a repeating gradient stop, so nothing is
   added to the markup and nothing paints outside the tile. */
.s-wrap > .s-empty::before {
  content: "";
  position: absolute;
  /* Centred on the mark, not on the tile: the rings are a halo round the
     heart, and a wider circle cut through the heading underneath it. */
  inset-block-start: 1rem;
  inset-inline-start: 50%;
  inline-size: 9.5rem;
  block-size: 9.5rem;
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 61%, rgb(13 36 84 / .05) 61.5%, transparent 63%),
    radial-gradient(closest-side, transparent 78%, rgb(13 36 84 / .035) 78.5%, transparent 80%);
  pointer-events: none;
}
.s-wrap > .s-empty > * { position: relative; }

.s-wrap > .s-empty .s-empty__mark {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  margin-block-end: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 30px -16px rgb(13 36 84 / .45), inset 0 0 0 1px rgb(196 38 12 / .14);
  animation: ap-float 5.5s var(--ap-ease) infinite;
}
.s-wrap > .s-empty .s-empty__mark svg { inline-size: 2rem; block-size: 2rem; }

.s-wrap > .s-empty .s-empty__title { font-size: var(--s-text-xl); }
.s-wrap > .s-empty .s-empty__body { max-inline-size: 26rem; font-size: var(--s-text-md); line-height: 1.6; }
.s-wrap > .s-empty .s-btn--primary { min-block-size: 2.9rem; padding-inline: 1.6rem; }

@media (max-width: 47.99rem) {
  .s-wrap > .s-empty { padding: 2.75rem 1.25rem; }
  .s-wrap > .s-empty::before { inset-block-start: .5rem; inline-size: 8.5rem; block-size: 8.5rem; }
}

/* The saved grid, when there is something in it, sits under the same head as
   the rest of the shop; nothing else to say. */
.s-grid--wide { gap: var(--sp-gap); }

/* ==========================================================================
   5. The merchant's pages — policies, About, Contact
   ========================================================================== */

.s-pagehead { padding-block: 1.75rem .5rem; }
.s-pagehead__title { position: relative; }
.s-pagehead__lede {
  max-inline-size: 46rem;
  font-size: var(--s-text-lg);
  line-height: 1.6;
  color: var(--s-ink-soft);
}

/* The date is a fact about the document, so it is set as one: small, boxed,
   and out of the way of the sentence above it. */
.s-pagehead__stamp {
  display: inline-flex;
  align-items: center;
  margin-block-start: .85rem;
  padding: .28rem .7rem;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: var(--sp-tile);
  font-size: var(--s-text-2xs);
  font-weight: 600;
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
  color: var(--s-muted);
}

/*
 * The document column.
 *
 * The article filled a 960px card and the paragraphs inside it were capped at
 * a readable measure, which left a 300px gutter of white inside the card —
 * the "empty space" the client keeps pointing at, only this time on the
 * inside. The card is sized to the measure instead.
 *
 * Left-aligned, not centred: the page title, the lede and the breadcrumb all
 * start at the page's own gutter, and a document that began 150px to the
 * right of its own heading read as two unrelated blocks. The index is pushed
 * to the far edge instead, so the white that is left is a gutter between two
 * things rather than a margin after everything.
 *
 * `minmax(0, …)` on both tracks, so between 62rem and 80rem the columns give
 * way rather than pushing the page sideways.
 */
.s-doc { gap: 1.5rem; padding-block-end: 3rem; }
@media (min-width: 62rem) {
  .s-doc {
    grid-template-columns: minmax(0, 42rem) minmax(0, 18rem);
    justify-content: space-between;
    column-gap: 3rem;
  }
  /* No index to sit beside: the card keeps the page's width and the measure
     is centred inside it, so the white falls evenly on both sides. */
  .s-doc--wide .s-prose > p,
  .s-doc--wide .s-prose > ul,
  .s-doc--wide .s-prose > ol,
  .s-doc--wide .s-prose > blockquote,
  .s-doc--wide .s-faq__a { margin-inline: auto; }
  .s-doc--wide .s-prose h2,
  .s-doc--wide .s-faqs__heading,
  .s-doc--wide .s-faq { max-inline-size: 68ch; margin-inline: auto; }
}

.s-doc__body {
  position: relative;
  border-color: var(--ap-hair);
  box-shadow: var(--sp-shadow);
  animation: ap-rise .55s var(--ap-ease) both;
}
@media (min-width: 62rem) { .s-doc__body { padding: 2.25rem 2.5rem; } }

/*
 * The measure.
 *
 * Measured at 1440: a paragraph ran 910px, which is about 115 characters a
 * line. A reader loses the start of the next line somewhere past 80, and a
 * refund policy is the one document on the shop people read carefully. Capped
 * at 68 characters, which is where the typography books put it, and the cap
 * is on the text and not on the card, so the panel keeps its width and the
 * page keeps its shape.
 */
.s-doc__body .s-prose > p,
.s-doc__body .s-prose > ul,
.s-doc__body .s-prose > ol,
.s-doc__body .s-prose > blockquote { max-inline-size: 68ch; }
.s-doc__body .s-prose { font-size: 1rem; line-height: 1.75; }
.s-doc__body .s-prose > * + * { margin-block-start: 1em; }

/* Headings get their own air and a red tick, the same mark the section titles
   carry everywhere else on the shop. */
.s-doc__body .s-prose h2,
.s-faqs__heading {
  position: relative;
  margin-block-start: 2em;
  padding-inline-start: .9rem;
  font-size: var(--s-text-xl);
  font-weight: 800;
  letter-spacing: -.005em;
  scroll-margin-block-start: 7rem;
}
.s-doc__body .s-prose h2::before,
.s-faqs__heading::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .18em .18em;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--s-accent-500);
}
.s-doc__body .s-prose > h2:first-child { margin-block-start: 0; }
.s-doc__body .s-prose h3 { margin-block-start: 1.6em; font-size: var(--s-text-lg); font-weight: 700; }

.s-doc__body .s-prose a {
  color: var(--s-accent-500);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ap-ease), text-decoration-color .2s var(--ap-ease);
}
.s-doc__body .s-prose a:hover { color: var(--s-accent-600); text-decoration-thickness: 2px; }

.s-doc__body .s-prose li { padding-inline-start: .2rem; }
.s-doc__body .s-prose li::marker { color: var(--s-accent-500); }
.s-doc__body .s-prose strong { color: var(--s-brand-800); }

/* A rule between the prose and the questions under it, so the two halves of
   the document do not run together. */
.s-faqs {
  margin-block-start: 2.5rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--sp-line);
}
.s-faqs__heading:first-child { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   5a. The questions
   -------------------------------------------------------------------------- */
.s-faq {
  margin-block-start: .6rem;
  padding-inline: 1.1rem;
  border-color: var(--ap-hair);
  background: var(--sp-tile);
  transition: background .25s var(--ap-ease), border-color .25s var(--ap-ease), box-shadow .25s var(--ap-ease);
}
.s-faq:hover { border-color: var(--ap-hair-warm); }
.s-faq[open] {
  background: #fff;
  border-color: var(--ap-hair-warm);
  box-shadow: var(--ap-lift-sm);
}

.s-faq__q {
  min-block-size: 3.25rem;
  padding-block: .9rem;
  font-family: var(--s-font-display);
  font-weight: 700;
  color: var(--s-brand-800);
}
.s-faq__q:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: -2px;
  border-radius: 10px;
}

/* The plus becomes a chip that turns into a minus. `content` still changes,
   so the state survives a stylesheet that never loads; the rotation is the
   part that is only decoration. */
.s-faq__q::after {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: rgb(196 38 12 / .08);
  color: var(--s-accent-500);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background .25s var(--ap-ease), color .25s var(--ap-ease), rotate .3s var(--ap-ease);
}
.s-faq:hover > .s-faq__q::after { background: rgb(196 38 12 / .14); }
.s-faq[open] > .s-faq__q::after {
  rotate: 180deg;
  background: var(--s-accent-500);
  color: #fff;
}
.s-faq__a { max-inline-size: 68ch; padding-block-end: 1.1rem; }

/* --------------------------------------------------------------------------
   5b. The side panel — "On this page" and "Our policies"
   -------------------------------------------------------------------------- */
.s-doc__aside { display: grid; gap: 1rem; align-content: start; }

.s-aside__card {
  border-color: var(--ap-hair);
  box-shadow: var(--sp-shadow);
  inset-block-start: calc(var(--sp-header-h, 4.6rem) + 3.25rem);
  animation: ap-rise .55s var(--ap-ease) both;
  animation-delay: .12s;
}
/* Two cards cannot both be sticky at the same offset without the second
   sliding under the first; the aside scrolls as one block instead. */
.s-doc__aside .s-aside__card + .s-aside__card { position: static; }

.s-aside__title {
  padding-block-end: .7rem;
  border-block-end: 1px solid var(--sp-line);
  font-weight: 800;
  color: var(--s-brand-800);
}

/*
 * The index links.
 *
 * The room for the marker bar is held permanently rather than opened on
 * hover: the same gesture the footer's links make, but the type never moves,
 * so pointing down a list of five policies costs no reflow and the words stay
 * exactly where the eye left them.
 */
.s-aside__list { gap: .1rem; margin-block-start: .3rem; }
.s-aside__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: 1.35rem .8rem;
  border-radius: 10px;
  font-weight: 600;
  transition: background .22s var(--ap-ease), color .22s var(--ap-ease);
}
.s-aside__list a::before {
  content: "";
  position: absolute;
  inset-inline-start: .5rem;
  inline-size: .55rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--s-accent-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s var(--ap-ease);
}
.s-aside__list a:hover {
  background: rgb(13 36 84 / .04);
  color: var(--s-brand-800);
}
.s-aside__list a:hover::before { transform: scaleX(1); }
.s-aside__list a:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: -2px;
}

/*
 * The page you are on.
 *
 * Marked by a solid bar and by weight as well as by colour, because a reader
 * who cannot separate the red from the navy still has to be able to tell
 * which of the five policies they are reading.
 */
.s-aside__list a[aria-current="page"],
.s-aside__here {
  background: color-mix(in srgb, var(--s-brand-100) 70%, #fff);
  color: var(--s-brand-800);
  font-weight: 800;
}
.s-aside__list a[aria-current="page"]::before,
.s-aside__here::before { transform: scaleX(1); }

@media (max-width: 61.99rem) {
  /* Under the article on a phone, so it is a footer to the document rather
     than a panel above the thing it indexes. */
  .s-doc__aside { gap: .85rem; }
  .s-aside__card { position: static; }
}

/* ==========================================================================
   6. Breadcrumbs on these pages
   ========================================================================== */
.s-crumbs a {
  padding-block: .2rem;
  transition: color .2s var(--ap-ease);
}
.s-crumbs a:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   7. Focus, everywhere on these pages

   A visible ring on every interactive thing, in the brand navy, at an offset
   that clears the rounded corners it sits on.
   ========================================================================== */
.s-authbox a:focus-visible,
.s-authbox button:focus-visible,
.s-accountdetails a:focus-visible,
.s-wrap > .s-empty a:focus-visible,
.s-doc a:focus-visible,
button.s-head__more:focus-visible,
.s-head a.s-head__more:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 2px;
  border-radius: 6px;
}
.s-authbox .s-btn--primary:focus-visible,
.s-wrap > .s-empty .s-btn--primary:focus-visible,
.s-section > .s-panel > .s-btn--primary:focus-visible {
  outline: 2px solid var(--s-brand-800);
  outline-offset: 3px;
}

/* ==========================================================================
   8. Reduced motion

   Every animation and every transition this sheet adds, cancelled. The end
   state of each one is the state the stylesheet already describes, so the
   pages arrive finished rather than mid-way.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s-authbox,
  .s-accountcard,
  .s-accountdetails,
  .s-wrap > .s-empty,
  .s-doc__body,
  .s-aside__card,
  .s-panel > .s-line:has(> div > a.s-line__name),
  .s-panel > .s-line:has(.s-line__foot--actions) {
    animation: none;
  }

  .s-wrap > .s-empty .s-empty__mark { animation: none; }

  .s-authbox .s-btn--block,
  .s-accountcard,
  .s-accountcard::after,
  .s-accountcard__mark,
  .s-accountcard__go,
  .s-reveal__btn,
  button.s-head__more,
  .s-line a.s-line__name,
  .s-panel > .s-line:has(> div > a.s-line__name),
  .s-panel > .s-line:has(.s-line__foot--actions),
  .s-line__foot--actions .s-line__remove,
  .s-faq,
  .s-faq__q::after,
  .s-aside__list a,
  .s-aside__list a::before,
  .s-doc__body .s-prose a,
  .s-crumbs a {
    transition: none;
  }

  /* The marker bar and the underline arrive rather than travel. */
  .s-aside__list a:hover::before { transform: scaleX(1); }

  /* Hover still says something — it just says it without moving. */
  .s-accountcard:hover,
  .s-panel > .s-line:has(> div > a.s-line__name):hover,
  .s-authbox .s-btn--primary:hover,
  button.s-head__more:hover,
  .s-line__foot--actions .s-line__remove:hover {
    translate: none;
    transform: none;
  }
  .s-accountcard:hover .s-accountcard__mark { transform: none; }
  .s-accountcard:hover .s-accountcard__go { transform: none; }
  .s-faq[open] > .s-faq__q::after { rotate: none; }
}