/* ==========================================================================
   Adesse — /shop device-chooser page stylesheet (extends styles.css, same
   tokens). The device rules below moved here verbatim from the homepage
   <style> block when the chooser became its own page; keep the two in step if
   either is ever restored to the homepage. Loaded AFTER styles.css, on
   /shop/ only.
   ========================================================================== */

/* ---- Breadcrumb (mirrors buy.css / defense.css .crumb) ---- */
.crumb { font-family: var(--sans); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.crumb a { color: var(--taupe); text-decoration: none; }
.crumb a:hover { color: var(--amber-ink); }

.begin-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem); }
.begin-hero h1 { max-width: 16ch; }
.begin-hero .lede { margin-top: 1.25rem; max-width: 46rem; }

/* One card since the 2026-08-05 ruling (10a only; the renewed and BYOD
   cards are gone), so the grid no longer breaks out of the page measure:
   it holds a single centered column at the width the old single-file
   breakpoint used. The two storage prices sit at equal weight, no badge,
   no anchor price, no urgency device: the anti-hijack promise applies to
   our own selling. */
.device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 34rem;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-inline: auto;
}
.device-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
/* No tile behind the phone: the renders are transparent PNGs, so a filled box
   only framed the empty margin around a portrait subject. Sized by HEIGHT, not
   by card width, because width-driven sizing left the phone small in a tall box.
   The two 600x1200 assets are normalised to one device height (the real 1.2%
   10a difference kept), so equal box height means equal phone size. */
.device-shot {
  display: block;
  width: 100%;
  height: clamp(420px, 46vw, 580px);
  object-fit: contain;
}
.device-shot + h3 { margin-top: 1.5rem; }   /* only when a photo precedes it */
/* Card headings and subtitles are each held to one line at every
   three-column width, which is what keeps the three prices level; a
   heading that wraps drops its price a full line below its neighbours.
   The binding case is the narrowest three-column layout, just above the
   1080px breakpoint (22px type, ~239px of room), NOT the widest. Measure
   there before lengthening any of these six strings. */
.device-sub {
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--taupe);
}
.device-price {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* The unit rides with the number: two stacked prices must never be
   scannable as bare $749 / $849 with the storage size lost. */
.device-price-unit {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--taupe);
}
/* The two storage tiers read as one price block, not two claims. */
.device-price + .device-price { margin-top: 0.25rem; }
.device-terms { margin-top: 0.35rem; }
.device-condition {
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--taupe);
}
/* The one honest difference between the two storage sizes, in prose. The
   spec list must not carry the comparison. */
.device-case {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 1rem;
}
.device-specs {
  margin-top: 1.5rem;
  list-style: none;
  font-family: var(--sans);
  font-size: 1rem;
}
.device-specs li {
  padding-block: 0.55rem;
  border-top: 1px solid var(--hairline);
}
/* Five lines carry the decision; the rest waits for whoever asks for it. */
.device-more {
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}
.device-more summary {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.device-more summary::-webkit-details-marker { display: none; }
.device-more summary::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--amber-ink);
}
.device-more[open] summary::before { content: "\2212"; }
.device-more summary:hover { color: var(--amber-ink); }
.device-full {
  margin-top: 0.85rem;
  padding-left: 1.6rem;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--taupe);
}
.device-full li { padding-block: 0.3rem; }
/* Bottom-pinned, so the two buttons stay on one line when an open expander
   lengthens the row. */
.device-cta {
  display: block;
  margin-top: auto;
  text-align: center;
}
.device-close { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* The chosen device follows the reader down to the form (see the script);
   the line stays hidden until a card is actually clicked. */
.waitlist-form .choice-note { flex-basis: 100%; margin: 0; }

/* Carried with the waitlist block from the homepage: the flex form stacks
   rather than wrapping a half-width button on a phone. */
@media (max-width: 620px) {
  .waitlist-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }
  .waitlist-form input[type="email"],
  .waitlist-form .btn { width: 100%; }
}