/* The public online shop (/shop/, templates/shop/).
 *
 * Loaded via {% block styles %}, which base.html puts AFTER style.css, so this
 * leans on style.css's --clr-* tokens throughout. Never console.css's --bg /
 * --orange: an undefined custom property drops the whole declaration, and the
 * page would still return 200 with every box transparent and borderless.
 *
 * The form furniture (.form-group, .wform__errors, .wform__field--error,
 * .form-honeypot, .btn--orange) is style.css's and shared with the contact and
 * gift-card forms. What is new here is the product cards, the colour and size
 * pickers and the bag lines.
 *
 * The public site is dark-only, which is the reason for the light outline on
 * every swatch dot and garment silhouette: a Black (#111111) swatch on the
 * gray-800 surface is about 1.3:1 without it, below the 3:1 a graphic that
 * carries meaning needs (WCAG 1.4.11).
 */

/* Visually hidden, still read aloud. style.css has no such class (only
 * console.css does, and its tokens do not resolve on this shell). */
.shop-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Staff preview banner ----------------------------------------------- */
/* Loud on purpose: production runs live Stripe keys and there is no staging,
 * so every order a staffer places while previewing is a real charge. */
/* ---- The bag bar: sticky at the foot of the index and item pages -------- */
.shop-cartbar {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 2rem 0 0;
  padding: 0.8rem 1rem 0.8rem 1.2rem;
  background: var(--clr-bg);
  border: 1px solid var(--clr-teal);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.shop-cartbar__sum {
  margin: 0;
  color: var(--clr-text-2);
}

.shop-cartbar__sum strong {
  color: var(--clr-text);
  margin-right: 0.35rem;
}

.shop-cartbar__go {
  min-height: 44px;
  white-space: nowrap;
  /* .btn is an inline-flex with an 8px gap for icons; here the "& pay" span
   * would become a second flex item 8px from "View bag". No gap, and a
   * non-breaking space inside the span that a flex item cannot collapse. */
  gap: 0;
}

/* A phone: one compact row, so the bar covers as little of the cards as it
 * can — the label over the count on the left, the button on the right. */
@media (max-width: 600px) {
  .shop-cartbar {
    flex-wrap: nowrap;
    bottom: 0.5rem;
    padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  }

  .shop-cartbar__sum {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .shop-cartbar__sum strong {
    display: block;
    margin-right: 0;
  }

  .shop-cartbar__go {
    padding-inline: 0.9rem;
  }
}

/* ---- Copy ---------------------------------------------------------------- */
.shop-lead {
  max-width: var(--measure);
}

/* ---- The index's intro: one line, then how buying works in three steps ---- */
.shop-intro {
  margin-bottom: 0.5rem;
}

.shop-intro .shop-lead {
  margin-bottom: 0.35rem;
}

.shop-made {
  margin: 0 0 1.25rem;
  color: var(--clr-teal-4);
  font-weight: 600;
}

/* The item page's blurb: the print, then the garment, as two paragraphs. */
.shop-blurb {
  margin-bottom: 1.25rem;
}

.shop-blurb p {
  margin: 0;
}

.shop-blurb p + p {
  margin-top: 0.75rem;
  font-size: 0.95em;
  color: var(--clr-muted-3);
}

.shop-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.shop-steps li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  line-height: 1.45;
}

.shop-steps li strong {
  display: block;
  color: var(--clr-text);
  margin-bottom: 0.15rem;
}

.shop-steps li span:not(.shop-steps__n) {
  color: var(--clr-muted-3);
  font-size: 0.92rem;
}

.shop-steps__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.16);
  color: var(--clr-teal-4);
  font-weight: 800;
  font-size: 0.9rem;
}

.shop-note {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--clr-muted);
}

.shop-fineprint {
  font-size: 0.9rem;
  color: var(--clr-muted);
  line-height: 1.6;
  max-width: var(--measure);
}

.shop-fineprint a,
.shop-panel a,
.shop-elsewhere a {
  color: var(--clr-teal-4);
}

.shop-panel {
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}

.shop-panel p + p {
  margin-top: 0.6rem;
}

/* Reports a payment that went through, so green — and the copy inside never
 * claims the receipt has ARRIVED, because at this moment the webhook may not
 * have landed. */
.shop-panel--good {
  border-color: var(--clr-teal);
  background: rgba(20, 184, 166, 0.08);
}

.shop-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}

/* ---- The index: product cards ------------------------------------------- */
.shop-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.shop-card {
  /* Add to bag comes back to #card-<pk>; land it clear of the sticky chrome,
   * which is the nav AND the visit-bar strip (2.5rem, as .flash-messages
   * allows in style.css) — --nav-h alone leaves the photo under the header. */
  scroll-margin-top: calc(var(--nav-h) + 3.5rem);
  display: flex;
  flex-direction: column;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
}

.shop-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.shop-card__link:hover .shop-card__name,
.shop-card__link:focus-visible .shop-card__name {
  color: var(--clr-teal-4);
}

.shop-card__link:focus-visible {
  outline: 3px solid var(--clr-orange);
  outline-offset: -3px;
}

.shop-card__body {
  flex: 1;
  padding: 1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 1.2rem 0;
  transition: color 0.15s;
}

.shop-card__colour {
  display: block;
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-muted-3);
}

/* Pushed to the foot of the card, so the Add to bag buttons in one row of the
 * grid line up whatever the state lines above them say. */
.shop-card__form {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Qty beside Add to bag: the two controls a buyer reaches for together. */
.shop-card__buy {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.shop-qtypick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--clr-muted-3);
}

.shop-qtypick select {
  min-height: 44px;
  min-width: 3.6rem;
  padding: 0 0.5rem;
  background: var(--clr-bg-dark);
  color: var(--clr-text);
  border: 2px solid var(--clr-border);
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
}

.shop-qtypick select:focus-visible {
  outline: 3px solid var(--clr-orange);
  outline-offset: 2px;
}

.shop-card__add {
  flex: 1;
  justify-content: center;
}

.shop-card__price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-orange-4);
}

.shop-state {
  color: var(--clr-muted-3);
  line-height: 1.5;
}

.shop-state--muted {
  color: var(--clr-muted);
}

/* ---- The gift card tile (shop/_gift_card_tile.html) --------------------- */
/* A card drawn in CSS rather than a photo — the real gift card is an email —
 * dark like the rest of the shop so the logo reads, edged in the brand teal
 * and tilted like one lying on the counter. */
.shop-giftcard {
  width: 74%;
  aspect-ratio: 1.586 / 1; /* a bank card's proportions */
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 85% 10%, rgba(45, 212, 191, 0.25), transparent 45%),
    linear-gradient(135deg, var(--clr-bg-alt), var(--clr-bg-dark));
  border: 2px solid var(--clr-teal);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(20, 184, 166, 0.25);
  transform: rotate(-6deg);
}

/* Beats .shop-frame img's fill-the-frame rule: the logo sits in a corner. */
.shop-frame .shop-giftcard img {
  width: auto;
  height: 42%;
  align-self: flex-start;
}

.shop-giftcard__label {
  align-self: flex-end;
  color: var(--clr-orange-4);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The tile's one button, at the foot of the card like the shirts' Add to bag. */
.shop-card__cta {
  margin-top: auto;
  justify-content: center;
}

/* ---- Photo frame and silhouette ----------------------------------------- */
.shop-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--clr-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Limited editions: a colour border that runs round the card --------- */
/* The owner asked for the pre-order-only colours to look like the special
 * thing they are (3 Oct 2026). A conic gradient in the brand colours drawn in
 * the border box under a solid padding box, turned by animating its start
 * angle. @property is what makes an angle animatable; a browser without it
 * shows the same gradient standing still, which still reads as special. */
@property --shop-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes shop-spin {
  to {
    --shop-spin: 360deg;
  }
}

.shop-card--limited,
.shop-item .shop-frame--limited {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--shop-fill), var(--shop-fill)) padding-box,
    conic-gradient(
        from var(--shop-spin),
        #f97316,
        #fbbf24,
        #14b8a6,
        #8b5cf6,
        #ec4899,
        #f97316
      )
      border-box;
  box-shadow:
    0 0 22px rgba(249, 115, 22, 0.22),
    0 0 48px rgba(139, 92, 246, 0.16);
  animation: shop-spin 5s linear infinite;
}

.shop-card--limited {
  --shop-fill: var(--clr-bg);
}

.shop-item .shop-frame--limited {
  --shop-fill: var(--clr-bg-dark);
}

/* Still for anyone who has asked their device for less motion. */
@media (prefers-reduced-motion: reduce) {
  .shop-card--limited,
  .shop-item .shop-frame--limited {
    animation: none;
  }
}

.shop-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f97316);
  color: #111111;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.shop-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-silhouette {
  width: 78%;
  height: 78%;
}

.shop-silhouette path,
.shop-silhouette rect {
  stroke: var(--clr-muted-3);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ---- Colour dots (the item page's swatches) ------------------------------ */
.shop-dot {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--clr-muted-3);
}

/* ---- The item page ------------------------------------------------------- */
.shop-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--clr-teal-4);
  margin-bottom: 0.5rem;
}

.shop-item {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .shop-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.shop-item .shop-frame {
  border-radius: 12px;
  border: 1px solid var(--clr-border);
}

.shop-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.shop-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clr-orange-4);
}

.shop-limited {
  border-left: 3px solid var(--clr-orange);
  padding-left: 0.8rem;
  color: var(--clr-text-2);
}

/* Scroll target for the swatch links' #choose and the return from Add to bag,
 * clear of the sticky chrome: the nav plus the visit-bar strip. */
.shop-choose {
  scroll-margin-top: calc(var(--nav-h) + 3.5rem);
  margin-top: 1.5rem;
}

.shop-choose h2,
.shop-choose legend {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  padding: 0;
}

/* Colour swatches: real links, each with its visible name. */
.shop-swatches {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shop-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  border: 2px solid var(--clr-border);
  border-radius: 999px;
  color: var(--clr-text);
  text-decoration: none;
}

.shop-swatch:hover {
  border-color: var(--clr-teal);
}

.shop-swatch[aria-current="true"] {
  border-color: var(--clr-teal);
  background: rgba(20, 184, 166, 0.12);
  font-weight: 600;
}

.shop-swatch:focus-visible {
  outline: 3px solid var(--clr-orange);
  outline-offset: 2px;
}

.shop-swatch .shop-dot {
  width: 1.6rem;
  height: 1.6rem;
}

/* Size tiles: real radios restyled, the giftcards.css pattern, so keyboard,
 * screen readers and a JavaScript-free browser all get a working picker. */
.shop-sizes {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shop-sizes legend {
  width: 100%;
}

.shop-size {
  flex: 0 1 5.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  min-width: 44px;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--clr-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Kept in the layout and made invisible rather than display:none — a hidden
 * input cannot be focused, and the ring below is how a keyboard user knows
 * which tile they are on. */
.shop-size input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.shop-size:hover {
  border-color: var(--clr-teal);
}

.shop-size:has(input:checked) {
  border-color: var(--clr-teal);
  background: rgba(20, 184, 166, 0.14);
}

.shop-size:has(input:focus-visible) {
  outline: 3px solid var(--clr-orange);
  outline-offset: 2px;
}

.shop-size__name {
  font-weight: 700;
}

.shop-size__why {
  font-size: 0.75rem;
  color: var(--clr-muted-3);
  line-height: 1.25;
  margin-top: 0.15rem;
}

/* Sold out / unavailable: dashed and dimmed, AND the reason in words beside
 * it — colour alone cannot carry "you can't have this" (WCAG 1.4.1). */
.shop-size--off {
  border-style: dashed;
  cursor: not-allowed;
  color: var(--clr-muted);
}

.shop-size--off:hover {
  border-color: var(--clr-border);
}

.shop-size--off input {
  cursor: not-allowed;
}

/* The same radios on an index card: all six tee sizes on one row of a 17rem
 * card rather than three, each still a 44px target. */
.shop-sizes--card {
  margin: 0;
  gap: 0.35rem;
  /* A grid rather than the item page's flex row: as many 44px columns as the
   * card holds, stretched to fill it, so a wrapped row lines up under the one
   * above instead of trailing off ragged. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.shop-sizes--card legend {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--clr-muted-3);
}

.shop-sizes--card .shop-size {
  min-width: 0;
  min-height: 44px;
  padding: 0.3rem 0.25rem;
}

.shop-qty input {
  max-width: 7rem;
}

.shop-add {
  margin-top: 1.25rem;
}

/* ---- The bag -------------------------------------------------------------- */
.shop-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--clr-border);
}

.shop-line {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.6rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--clr-border);
}

.shop-line__thumb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 8px;
  background: var(--clr-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shop-line__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-line__name {
  font-weight: 700;
}

.shop-line__meta {
  color: var(--clr-muted-3);
  font-size: 0.9rem;
}

.shop-line__problem {
  color: #fca5a5;
  font-weight: 600;
  font-size: 0.9rem;
}

.shop-line__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.shop-line__actions form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.shop-line__actions .form-group input {
  width: 5rem;
  padding: 8px 10px;
}

.shop-line__total {
  margin-left: auto;
  font-weight: 700;
}

/* A line that can't be bought has no price to total (bag.html); the slot says
   so without the weight of a figure. */
.shop-line__total--off {
  color: var(--clr-muted-3);
  font-weight: 400;
}

.shop-add,
.shop-pay {
  min-height: 44px;
}

.shop-btn-small {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

.shop-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

/* The subtotal and discount above a code's Total: the same row, lighter. */
.shop-total--sub {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* The discount code box under the totals (bag.html): one row, wrapping on a
   phone, like a bag line's quantity form. */
.shop-code {
  margin-bottom: 1.25rem;
}

.shop-code__form,
.shop-code__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}

.shop-code__form .form-group {
  margin-bottom: 0;
  min-width: 0;
}

.shop-code__form .form-group input {
  width: 12rem;
  max-width: 100%;
  padding: 8px 10px;
  text-transform: uppercase;
}

.shop-code__applied {
  align-items: center;
}

.shop-bag {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .shop-bag {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem;
  }
}

.shop-notice {
  font-size: 0.85rem;
  color: var(--clr-muted);
  line-height: 1.6;
}

.shop-notice a {
  color: var(--clr-teal-4);
}

.shop-empty {
  padding: 2rem 0;
}

/* "Continue to payment" / "Change your order" for a checkout still open on
   Stripe's page: side by side when they fit, stacked with a gap on a phone —
   as plain inline buttons they wrapped onto two lines touching each other. */
.shop-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.shop-elsewhere {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--clr-border);
}

.shop-elsewhere h2 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* The bag's "signed in as" / "log in" line above the contact form. */
.shop-account {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-teal);
  border-radius: 8px;
  color: var(--clr-text-2);
  line-height: 1.5;
}

.shop-account a {
  color: var(--clr-teal-4);
  font-weight: 700;
}

/* ---- On a phone ---------------------------------------------------------- */
/* Measured at 320-414px wide (3 Oct 2026). The site chrome (visit bar + nav)
 * already takes ~140px of a 640px screen, so every rule here buys back height:
 * the shirts should start on the first screen, not the third. */
@media (max-width: 600px) {
  /* The shop pages' own band: py-16 is 4rem a side, a quarter of a phone's
   * screen spent on nothing above the first line. */
  .shop-section {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
  }

  /* The title banner: a band, not a photo. style.css gives the --short hero
   * 18rem everywhere; the shop's reason to visit is below it. */
  .page-hero.shop-hero {
    height: 9.5rem;
  }

  .shop-hero .page-hero__content h1 {
    font-size: 2.4rem;
  }

  .shop-intro .shop-lead {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .shop-made {
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
  }

  /* The three steps as one panel of rows, not three boxes a screen tall. */
  .shop-steps {
    gap: 0;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
  }

  .shop-steps li {
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .shop-steps li + li {
    border-top: 1px solid var(--clr-border);
  }

  .shop-steps li span:not(.shop-steps__n) {
    font-size: 0.86rem;
  }

  .shop-steps__n {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
  }

  .shop-grid {
    gap: 1.25rem;
    margin-top: 1.5rem;
  }

  /* Denser cards: the same lines, less air between them. */
  .shop-card__name {
    font-size: 1.15rem;
    padding: 0.85rem 1rem 0;
  }

  .shop-card__body {
    gap: 0.4rem;
    padding: 0.7rem 1rem 1rem;
  }

  .shop-card .shop-state {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* The bag bar on one line: the count never wraps, the button is smaller. */
  .shop-cartbar__sum {
    white-space: nowrap;
    font-size: 0.85rem;
  }

  .shop-cartbar__go {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }

  /* The bag: quantity, Update and Remove on one row, the line's total under
   * them — four things in a row was 20px wider than a phone. */
  .shop-line__actions {
    gap: 0.5rem;
  }

  .shop-line__actions .form-group input {
    width: 4rem;
  }

  .shop-line__actions .shop-btn-small {
    padding: 0.5rem 0.75rem;
  }

  .shop-line__total {
    flex-basis: 100%;
    margin-left: 0;
    text-align: right;
  }
}

/* The narrowest phones (an SE at 320px): "View bag" says enough. And the bag
 * line's controls take the line's full width, under the thumb: beside it there
 * is 196px, and quantity, Update and Remove at 44px targets need 223. */
@media (max-width: 360px) {
  .shop-cartbar__more {
    display: none;
  }

  .shop-line__actions {
    grid-column: 1 / -1;
  }

  .shop-line__actions .form-group input {
    width: 3.5rem;
  }
}