/* shop.css (magazine) — the sheet of the SHOP package (design package S5:
   docs/design-kickoff/S5.md, the measures in S5_MASSE.md): the pages on which a reader chooses
   in the print shop. Built first, as the pattern (step 1), is the overview — the head with the
   note on the subscription, the product as a card in its arrangements, the box of a product with
   the quantity, and the three notes under the list. Then the product's page (step 2): its two
   pictures on a tinted ground, the box as a box of its own with the price preview, the two ways
   on, and "More issues". Then the cart (step 3), on the same parts — the quantity is a macro for
   both, its sums are the lines of the price preview, its notes the overview's in a second
   arrangement: the lines in ONE card, each arranged by the card's own width, and the box with
   the sums beside them. With it the shipping tables of "Shipping and payment". The checkout, the
   page of an order and the account's list are the checkout package's (checkout.css) and are not
   touched here.

   Load order in the magazine's layout: tailwind.css → the platform's components.css and shell.css →
   the magazine's components.css (the blocks its pages share) → article.css, issue.css, shows.css,
   checkout.css, THIS file → app.css. The admin has its own layout and loads none of them.

   ⚠️ Loaded on EVERY page of the magazine, like the sheets beside it. So:
   - every block is named `mag-shop…`, and a name belongs to ONE sheet;
   - a block of components.css — and an atom of the platform — is restyled only under a class of
     this package, never by its bare name. The head of the overview is the tinted head of the
     issue overview (its classes in the markup) under `mag-shop-head`; select and button are the
     platform's atoms with a class of this package beside theirs;
   - colours only as var(--mn-…).

   The select and the button are the platform's atoms (48 and 44 high) and keep their sizes. The
   quantity is a block of this package and as high as what it stands beside: the button in a
   card, the select in the box of the product's page (it reads the atoms' sizes and sets none).

   How LARGE the blocks are built stands in ONE place: the block "The scale" right below, in the
   form of components.css — the phone's values on the root, what differs from 1024 in one media
   query, in whole pixels, each under a name `--mag-shop-…`. Type is a step of the text scale
   and stands as a class in the markup; no rule here writes a size of type.

   Held by magazine/tests/test_shop_sheet.py (its table SIZES says what stands here) through
   magazine/tests/sheet_rules.py, and with the other sheets by test_package_sheets.py. */

/* ---------- The scale ---------- */
/* Built is "Stufe C" — about three quarters of what the frames draw (Figma 5434:7623, 5435:7486,
   on a phone 5443:8635 and 5444:8854; the product's page 5436:7890, on a phone 5440:8447; the
   cart 5437:8016, on a phone 5444:9435); every line says what the frame draws.
   Not named, because a change of scale leaves it alone: hairlines, radii, and a gap of up to 12
   between two small things. */
:root {
  /* A card, and the note on the subscription. */
  --mag-shop-pad: 12px;                                      /* inside: the narrow card all around, the wide one above, below and
                                                                at the right; the note on the subscription; the box of
                                                                the product's page — drawn 16, from 1024 drawn 24 */
  --mag-shop-cover-col: 180px;                               /* the column of the cover in the wide card — drawn 240 */
  --mag-shop-cover: 168px;                                   /* how HIGH the cover stands there, and on the band of the
                                                                tall card — drawn 225: the issue itself, in a box of 260 */
  --mag-shop-cover-compact: 80px;                            /* … and in the narrow card — drawn 98, in a box of 113 */

  /* The quantity. */
  --mag-shop-qty: 104px;                                     /* its width — drawn 112 */
  --mag-shop-qty-zone: 36px;                                 /* the minus and the plus, each — drawn 32; a finger's 36 */
  --mag-shop-qty-glyph: 14px;                                /* their icons — drawn 16 */

  /* The overview. */
  --mag-shop-offer: 320px;                                   /* the note on the subscription beside the head's words,
                                                                from 768 — drawn 400 */
  --mag-shop-cols: 16px;                                     /* note · note, and the notes · the link under them; the two
                                                                columns of the product's page, and the room above its
                                                                way back — drawn 24, from 1024 drawn 32 */
  --mag-shop-note-glyph: 20px;                               /* the icon of a note, and the one in the disc of a way
                                                                on — drawn 24 */

  /* The product's page. */
  --mag-shop-stack: 16px;                                    /* block · block of the page (the way back · the columns,
                                                                in the column of the words) and part · part in the
                                                                box — drawn 20, from 1024 drawn 24 */
  --mag-shop-stage-pad: 32px;                                /* above and below a picture on its tinted ground, up to
                                                                the issue itself — drawn about 47, from 1024 about 77 */
  --mag-shop-stage-cover: 208px;                             /* how HIGH the cover stands there — drawn about 273, from
                                                                1024 about 445: the issue itself, in boxes of 320 and 520 */
  --mag-shop-stage-motif: 200px;                             /* … and the issue lying open, from 1024 only — drawn
                                                                about 267, in a box of 300 */
  --mag-shop-ref-lead: 40px;                                 /* what a way on begins with: the disc with the icon, and
                                                                how high the small cover stands — drawn 56; and the
                                                                disc of a note in the box of the cart — drawn 40 */

  /* The cart. Everything else of it falls on the names above: the card of the lines, each line
     and the box are `--mag-shop-pad` inside; card · link and part · part of the box are
     `--mag-shop-stack`; title · columns and column · column `--mag-shop-cols`; "remove" is as
     large as an end of the quantity. */
  --mag-shop-aside: 376px;                                   /* the column of the box beside the lines, from 1024 —
                                                                drawn 376, built as drawn (the till's is as wide) */
  --mag-shop-line-cover: 44px;                               /* how HIGH the cover stands in a line of the cart — drawn
                                                                about 59, from 1024 about 74: the issue itself, in
                                                                boxes of 68 and 85 */
}
@media (min-width: 1024px) {
  :root {
    --mag-shop-pad: 20px;
    --mag-shop-cols: 24px;
    --mag-shop-stack: 20px;
    --mag-shop-stage-pad: 56px;
    --mag-shop-stage-cover: 336px;
    --mag-shop-line-cover: 56px;
  }
}

/* ---------- The overview: its head ---------- */
/* The tinted head of the issue overview (components.css, `.mag-head`), with the note on the
   subscription where that head has its covers: under the words below 768, 20 apart; from 768
   beside them, in a column of its own width. ⚠️ Without that head's least height (320 from 1024,
   made for three covers): this head is as high as its content, the note. */
.mag-shop-head__aside { margin-top: var(--mag-head-cta); }
@media (min-width: 768px) {
  .mag-shop-head__aside { width: var(--mag-shop-offer); margin-top: 0; }
}
@media (min-width: 1024px) {
  .mag-shop-head .mag-head__inner { min-height: 0; }
}

/* The note on the subscription (Figma 5435:7547): the surface of the teasers — white, the radius
   of a box, no border, the soft shadow that reaches up (the hairline first, for a browser that
   drops the mixed colour). A mark in the green of a link, capitals by CSS; a title; a sentence;
   the outlined button — as wide as the card up to 1023, as wide as its words from 1024. */
.mag-shop-offer {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--mag-shop-pad);
  background: var(--mn-surface); border-radius: var(--rounded-box);
  box-shadow: 0 0 0 1px var(--mn-gray-200);
  box-shadow: 0 -6px 32px color-mix(in srgb, var(--mn-gray-900) 8%, transparent);
}
.mag-shop-offer__words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* ONE mark for the package: the note's, the label over the price in the box of the product's
   page, and the small line of a way on (drawn there lighter and in a darker green; one mark is
   one mark). */
.mag-shop-offer__mark, .mag-shop-box__label, .mag-shop-ref__mark {
  font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mn-green-600);
}
@media (min-width: 1024px) {
  .mag-shop-offer__button { align-self: flex-start; }
}

/* ---------- The product as a card ---------- */
/* ONE card in three arrangements (shop/_parts.html, `product_card`; Figma 5434:7623; decisions
   S5-1, S5-10). Its surface is the teasers': white, the radius of a box, no border, the shadow
   that reaches up.

   The link to the product's page is the title; its `::after` is laid over the whole card, as on
   the teaser of an issue — so the address stands in a card once, and a click on cover or words is
   a click on the title. ⚠️ What that needs: the root is `position: relative` and NOTHING between
   it and the link carries a `position`; the box's form and its two small links are lifted above
   that layer (below, at the box), and nothing else is; the card does not clip, or the focus ring
   around it was cut.
   Hover and focus are not drawn; built as on the teasers: a deeper shadow and the title
   underlined, and a ring of 2 around the whole card.

   The arrangement follows the card's OWN width, not the window's: two of them share a row on a
   tablet (354 wide each: narrow), one alone has the row, and from about 1080 of the window two
   wide ones stand side by side. So the root is a container and its one child, the frame, is what
   the query rearranges (an element cannot ask about itself). 500 is the width from which the
   button beside the quantity still holds its words in the wide arrangement.
   ⚠️ `container-type: inline-size` takes the card's own width away: in a box that is sized by its
   content it collapses to nothing. It always stands in a column `minmax(0, 1fr)` or a box with a
   width. A browser without container queries keeps the narrow arrangement at every width. */
.mag-shop-card {
  position: relative; display: grid; container-type: inline-size; min-width: 0;
  background: var(--mn-surface); border-radius: var(--rounded-box);
  box-shadow: 0 0 0 1px var(--mn-gray-200);
  box-shadow: 0 -6px 32px color-mix(in srgb, var(--mn-gray-900) 8%, transparent);
}
.mag-shop-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--rounded-box); }
.mag-shop-card__link:focus-visible { outline: none; }
.mag-shop-card__link:focus-visible::after { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-shop-card:has(.mag-shop-card__link:hover) {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mn-gray-900) 12%, transparent);
  }
  .mag-shop-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- narrow (Figma 5443:8635): what a card is below 500 of its own width --- */
/* The small cover at the left, beside it title, facts and price; below both, in the whole width,
   what remains of the box — the edition, the quantity and the button, or the sentence of a
   product that is sold out. No description.
   The frame is a grid of two columns and the card's parts are its items: the box of a card is no
   box of its own (`mag-shop-box--card`, below), so its price can stand beside the cover and its
   form below it. The cover reaches over the first two rows; the second of them takes whatever
   room is left, so the price follows the facts directly — and where a row of the page makes the
   card higher than its content, that room lies under the price and the form stands at the foot.
   No gap between the rows: every part brings its distance to the one above as a margin, so a
   part that is missing leaves no gap behind. */
.mag-shop-card__frame {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  align-content: start; column-gap: 12px; padding: var(--mag-shop-pad);
}
.mag-shop-card__cover { display: flex; grid-column: 1; grid-row: 1 / span 2; align-self: start; align-items: flex-start; }
/* The cut-out: the standing cover without a ground, sized by its HEIGHT (the address asks for one
   axis as well). ⚠️ No box around it — no ground, no radius, no box shadow: they follow the
   picture's rectangle, and the cover's own corners are see-through. Its shadow is the shared
   filter of a cut-out (`mag-cutout`, in the markup). A photo on white — an issue without a
   cut-out, or a cover uploaded for the product — is a picture with its own ground and gets the
   radius of a box. Neither is ever wider than its place (a utility in the markup). */
.mag-shop-card__cutout, .mag-shop-card__photo { height: var(--mag-shop-cover-compact); width: auto; object-fit: contain; }
.mag-shop-card__photo { border-radius: var(--rounded-box); }
/* No picture at all: a tinted frame in the cover's shape rather than a hole. The product's title
   stands in it where the frame is large enough to hold it — not in the narrow card. */
.mag-shop-card__blank {
  display: flex; align-items: center; justify-content: center; height: var(--mag-shop-cover-compact);
  aspect-ratio: 7 / 10; padding: 8px; overflow: hidden; background: var(--mn-gray-200); border-radius: 2px;
  text-align: center; color: var(--mn-gray-800);
}
.mag-shop-card__blank-title { min-width: 0; overflow-wrap: break-word; visibility: hidden; }
/* ⚠️ `min-width: 0` on the whole column of the words: it is an item beside the cover, and by
   itself at least as wide as its longest word. */
.mag-shop-card__head { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; gap: 6px; min-width: 0; }
/* The description under a hairline: from 500 of the card's width only. The tall version names
   the block differently (`__always`): it shows it in the wide arrangement too and wherever it IS
   tall — so on a phone, in the narrow arrangement, it has none either. Three lines, then an
   ellipsis. */
.mag-shop-card__more { display: none; }
.mag-shop-card__always { display: none; }
.mag-shop-card__rule, .mag-shop-box__rule, .mag-shop-sum__rule { margin: 0; border: 0; border-top: 1px solid var(--mn-gray-200); }
.mag-shop-card__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: 12px; color: var(--mn-gray-900);
}
/* The parts of the box, as items of the card's grid. */
.mag-shop-card .mag-shop-box__price { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6px; }
.mag-shop-card .mag-shop-box__edition, .mag-shop-card .mag-shop-box__form, .mag-shop-card .mag-shop-box__gone {
  grid-column: 1 / -1; margin-top: 12px;
}
/* Sold out, in the narrow card: nothing parts the sentence from the price above it but a line. */
.mag-shop-card .mag-shop-box__gone { padding-top: 12px; border-top: 1px solid var(--mn-gray-200); }

/* --- wide (Figma 5434:7473): from 500 of the card's own width --- */
/* The cover in a column of its own at the left, in the middle of the card's height; at its right
   title, facts, the hairline with the description, the price, the edition, the quantity with the
   button — one under the other, in the order of the markup. The column of the cover is the drawn
   240 of 552 in the scale; it begins 8 from the card's edge, the words 12 after it. */
@container (min-width: 500px) {
  .mag-shop-card__frame {
    grid-template-columns: var(--mag-shop-cover-col) minmax(0, 1fr); grid-template-rows: none;
    padding: var(--mag-shop-pad) var(--mag-shop-pad) var(--mag-shop-pad) 0;
  }
  .mag-shop-card__cover { grid-row: 1 / span 6; align-self: center; justify-content: center; padding-left: 8px; }
  .mag-shop-card__cutout, .mag-shop-card__photo, .mag-shop-card__blank { height: var(--mag-shop-cover); }
  .mag-shop-card__blank-title { visibility: visible; }
  .mag-shop-card__head { gap: 12px; }
  .mag-shop-card__more { display: block; grid-column: 2; margin-top: 12px; }
  .mag-shop-card__always { display: block; grid-column: 2; margin-top: 12px; }
  .mag-shop-card .mag-shop-box__price { grid-row: auto; margin-top: 12px; }
  .mag-shop-card .mag-shop-box__edition, .mag-shop-card .mag-shop-box__form, .mag-shop-card .mag-shop-box__gone {
    grid-column: 2; margin-top: 8px;
  }
  .mag-shop-card .mag-shop-box__gone { padding-top: 0; border-top: 0; }
}

/* --- tall (Figma 5434:7549): from 768 of the WINDOW --- */
/* The cover on a tinted band over the whole width of the card, the words below it — "More issues"
   on a product's page (decision S5-N6), where three of them share a row from 768. The band is a
   part of the card and no box around the cover: a cut-out stands on it as on the cards of the
   subscription's offer.
   The ONE arrangement that hangs on the window and not on the card's own width: a tall card in a
   row of three is about as wide (237 to 363) as a narrow one alone on a phone (370), so its own
   width cannot tell the two apart. Below 768 the card is what it is without this class — one
   under the other, narrow on a phone, and without its description there.
   ⚠️ After the query above and with a class more: from 768 these win, whatever the card's width. */
@media (min-width: 768px) {
  .mag-shop-card--tall .mag-shop-card__frame {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 0 var(--mag-card-pad) var(--mag-card-pad);
  }
  .mag-shop-card--tall .mag-shop-card__cover {
    grid-column: 1; grid-row: auto; align-self: stretch; justify-content: center;
    margin: 0 calc(-1 * var(--mag-card-pad)); padding: var(--mag-card-pad);
    background: var(--mn-gray-100); border-radius: var(--rounded-box) var(--rounded-box) 0 0;
  }
  .mag-shop-card--tall .mag-shop-card__cutout, .mag-shop-card--tall .mag-shop-card__photo,
  .mag-shop-card--tall .mag-shop-card__blank { height: var(--mag-shop-cover); }
  .mag-shop-card--tall .mag-shop-card__blank-title { visibility: visible; }
  .mag-shop-card--tall .mag-shop-card__head { grid-column: 1; grid-row: auto; gap: 12px; margin-top: var(--mag-card-pad); }
  .mag-shop-card__always { display: block; }
  .mag-shop-card--tall .mag-shop-card__always, .mag-shop-card--tall .mag-shop-box__price,
  .mag-shop-card--tall .mag-shop-box__edition, .mag-shop-card--tall .mag-shop-box__form,
  .mag-shop-card--tall .mag-shop-box__gone { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .mag-shop-card--tall .mag-shop-box__gone { padding-top: 0; border-top: 0; }
  /* No hairline between the facts and the description: the tinted band parts the card already. */
  .mag-shop-card--tall .mag-shop-card__rule { display: none; }
}

/* ---------- The box of a product ---------- */
/* What is bought of ONE product (shop/_buy_box.html; Figma 5434:7493, sold out 5434:7539): the
   price with "plus shipping", the edition, the quantity beside the button — or, sold out, the
   mark at the price, a sentence and the way to the issue. On the product page a column of its
   own; in a card its parts are the card's (`--card`: the box itself makes no box, see above).
   The price is an amount: the text face, bold, a step of the prices (a class in the markup). */
.mag-shop-box { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mag-shop-box--card { display: contents; }
.mag-shop-box__price {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0;
  color: var(--mn-gray-900);
}
/* "plus shipping" is the link to the page that says what shipping costs: quiet, in gray, with a
   line under it — and lifted above the layer of the card's link. One line of 21, enlarged to 37
   for a finger at the element itself, a padding taken back by a margin. */
.mag-shop-box__shipping {
  position: relative; z-index: 1; padding: 8px 0; margin: -8px 0;
  color: var(--mn-gray-700); text-decoration: underline; text-underline-offset: 2px;
}
.mag-shop-box__shipping:focus-visible, .mag-shop-box__read:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-shop-box__shipping:hover { color: var(--mn-gray-900); }
}
/* Sold out: the sentence and "read the issue" — the platform's link atom (its class in the
   markup), lifted like the link above. Side by side where both fit, else one under the other. */
.mag-shop-box__gone {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; row-gap: 8px;
  min-width: 0;
}
.mag-shop-box__read { position: relative; z-index: 1; padding: 8px 0; margin: -8px 0; }
/* The form: the edition over the row of quantity and button, 8 apart. Lifted above the card's
   link as a whole — a click between its fields is no click on the title. The button fills what
   the quantity leaves; both are 44 high, so the row stands level. */
.mag-shop-box__form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-shop-box__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mag-shop-box__add { flex: 1 1 0; min-width: 0; }

/* ---------- The quantity ---------- */
/* A minus, the number, a plus in ONE frame (shop/_parts.html, `quantity`; Figma 5434:7464;
   decision S5-4): the frame carries border and radius of a field and is as high as the BUTTON it
   stands beside (44; a field is 48, and a row of 48 beside 44 has a step at its lower edge). The
   number is the form's own field, bare, in the middle — its type stays 16 (below that Safari on a
   phone zooms into it); the browser's own arrows are taken away, the two buttons count instead
   (shop.js). While the field or a button has the focus, the frame shows the green edge of a
   field; a button reached by keyboard shows a ring inside it. A button at its limit is gray. */
.mag-shop-qty {
  display: flex; flex: none; align-items: stretch; width: var(--mag-shop-qty); height: var(--atom-btn);
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: var(--rounded-btn);
}
.mag-shop-qty:focus-within { border-color: var(--mn-green-600); }
.mag-shop-qty__step {
  display: flex; flex: none; align-items: center; justify-content: center; width: var(--mag-shop-qty-zone);
  color: var(--mn-gray-900); border-radius: var(--rounded-btn);
}
.mag-shop-qty__step .icon { width: var(--mag-shop-qty-glyph); height: var(--mag-shop-qty-glyph); }
.mag-shop-qty__step:disabled { color: var(--mn-gray-400); }
.mag-shop-qty__step:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: -2px; }
.mag-shop-qty__field {
  flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: transparent;
  text-align: center; color: var(--mn-gray-900); appearance: textfield; -moz-appearance: textfield;
}
.mag-shop-qty__field::-webkit-inner-spin-button, .mag-shop-qty__field::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mag-shop-qty__field:focus { outline: none; }

/* ---------- The box on the product's page ---------- */
/* The same box as a box of its OWN (shop/_buy_box.html without `bare`; Figma 5436:8013; decisions
   S5-3, S5-N4): the quiet ground with a hairline around it, and its parts one under the other —
   label and price · a hairline · edition and quantity side by side · the price preview · the
   button with the link under it. ⚠️ After the rules of the box above, which these change by
   coming later and by a class more; the version of a card stays what it is.
   The label is the package's mark (above); the price is large here — the step of the amount on
   the subscription's offer, a class in the markup — and in the dark green of the brand. */
.mag-shop-box--page {
  gap: var(--mag-shop-stack); padding: var(--mag-shop-pad);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
}
.mag-shop-box__top { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mag-shop-box--page .mag-shop-box__price { color: var(--mn-green-700); }
.mag-shop-box--page .mag-shop-box__form { gap: var(--mag-shop-stack); }
/* Edition and quantity: two fields in a row, each under its caption (the platform's label, a
   class in the markup), level at their lower edge. The edition takes what the quantity leaves.
   The quantity stands beside a FIELD here and is as high as one (48, not the button's 44) — or
   the two captions stood 4 apart in height. */
.mag-shop-box__fields { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.mag-shop-box__field { display: flex; flex-direction: column; min-width: 0; }
.mag-shop-box__field--wide { flex: 1 1 0; }
.mag-shop-box--page .mag-shop-qty { height: var(--atom-field); }
/* The button over the whole width (it is stretched by its column; no width is set), and 8 under
   it the link to "Shipping and payment" — the platform's link atom, as wide as its words. */
.mag-shop-box__send { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-shop-box__info { align-self: flex-start; padding: 8px 0; margin: -8px 0; }
.mag-shop-box__info:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* Sold out (Figma 5439:8319): label and price gray, the mark in the middle of the price's height;
   under the hairline the sentence, and under that the way to the issue. */
.mag-shop-box--gone .mag-shop-box__label { color: var(--mn-gray-700); }
.mag-shop-box--gone .mag-shop-box__price { align-items: center; color: var(--mn-gray-600); }
.mag-shop-box--page .mag-shop-box__gone {
  flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: var(--mag-shop-stack);
}

/* ---------- The price preview ---------- */
/* What the chosen copies cost for the visitor's country (shop/_preview.html; Figma 5436:8038;
   decision S5-3): a line for the copies, one for the shipment, and — over a hairline, heavier —
   the sum; under them, small, the sentence that all of it is a preview. Words at the left, the
   amount at the right and never broken; a long title breaks under itself.
   The country in the line of the shipment is the platform's picker (step 4, decision S5-2;
   ui/_country_picker.html): a chip, 28 high, in the words of that line, and a list that hangs
   under it. Its rules are the shared sheet's ("Picker") — nothing of it is restyled here, and
   this sheet sets no layer and no place for the list: the line is only named to the picker as
   the frame its list must not reach past (the markup, `shipment_words`). */
.mag-shop-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-shop-preview__rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-shop-preview__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0;
  color: var(--mn-gray-800);
}
.mag-shop-preview__row--total { padding-top: 8px; border-top: 1px solid var(--mn-gray-200); color: var(--mn-gray-900); }
.mag-shop-preview__amount { flex: none; white-space: nowrap; color: var(--mn-gray-900); }

/* ---------- The product's page ---------- */
/* shop/product.html (Figma 5436:7890, on a phone 5440:8447): the way back, then — from 1024 —
   two columns of the same width, the pictures at the left and the words with the box at the
   right; below 1024 one column in the order of the markup. The page begins right under the
   header (a page with bands has no padding above), so the block brings its own room above. */
.mag-shop-page { padding-top: var(--mag-shop-cols); padding-bottom: var(--mag-section); }
/* The way back: the platform's link atom with its arrow in front — one line of 21, enlarged to 37
   for a finger at the element itself, a padding taken back by a margin. */
.mag-shop-page__back { display: flex; margin-bottom: var(--mag-shop-stack); }
.mag-shop-page__way { padding: 8px 0; margin: -8px 0; }
.mag-shop-page__way:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
.mag-shop-page__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-shop-stack) var(--mag-shop-cols); }
@media (min-width: 1024px) {
  .mag-shop-page__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.mag-shop-page__facts { display: flex; flex-direction: column; gap: var(--mag-shop-stack); min-width: 0; }
.mag-shop-page__mark { display: flex; }
.mag-shop-page__words { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-shop-page__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--mn-gray-900); }

/* The pictures (decision S5-9): each stands in the middle of a tinted ground of its own, the
   cover above the issue lying open. ⚠️ The ground is around the picture, never a box AT it: a
   cut-out has no ground, no radius and no box shadow of its own (the cover's shadow is the shared
   filter of a cut-out, a class in the markup; the open issue brings the one it was rendered with).
   Each is fitted by its HEIGHT, as its address asks for it, and never wider than its ground (a
   utility in the markup). A photo on white — an issue without a cut-out, a cover uploaded for
   the product — is a picture with a ground of its own and gets the radius of a box.
   The second ground is hidden below 1024 through the element around it (`__second`): on a phone
   the page shows the cover alone. */
.mag-shop-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mag-shop-stage__tile {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  padding: var(--mag-shop-stage-pad) var(--mag-shop-pad);
  background: var(--mn-gray-100); border-radius: var(--rounded-box);
}
.mag-shop-stage__cutout, .mag-shop-stage__photo { height: var(--mag-shop-stage-cover); width: auto; object-fit: contain; }
.mag-shop-stage__photo { border-radius: var(--rounded-box); }
.mag-shop-stage__open { height: var(--mag-shop-stage-motif); width: auto; object-fit: contain; }
.mag-shop-stage__second { display: none; }
@media (min-width: 1024px) {
  .mag-shop-stage__second { display: block; }
}
/* No picture at all: the product's title in the cover's shape, as in a card. */
.mag-shop-stage__blank {
  display: flex; align-items: center; justify-content: center; height: var(--mag-shop-stage-cover);
  aspect-ratio: 7 / 10; padding: 12px; overflow: hidden; overflow-wrap: break-word;
  background: var(--mn-gray-200); border-radius: 2px; text-align: center; color: var(--mn-gray-800);
}

/* The ways on under the box (shop/_parts.html, `shop_ref`; Figma 5436:8067, 5436:8078): a row in
   a card with a hairline around it that leads as a WHOLE — the card is the link. At its left a
   disc with an icon or the small cover, then the words, and at the right a chevron. The way to
   the subscription stands on the tint of the brand, the way to the issue on the quiet ground.
   Hover and focus are not drawn; built: a darker edge and the title underlined, and a ring of 2. */
.mag-shop-ref {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px;
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
  color: var(--mn-gray-900);
}
.mag-shop-ref--offer { background: var(--mn-green-50); border-color: var(--mn-green-200); }
.mag-shop-ref:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-shop-ref:hover { border-color: var(--mn-gray-400); }
  .mag-shop-ref--offer:hover { border-color: var(--mn-green-600); }
  .mag-shop-ref:hover .mag-shop-ref__title { text-decoration: underline; text-underline-offset: 3px; }
}
.mag-shop-ref__disc {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--mag-shop-ref-lead); height: var(--mag-shop-ref-lead);
  background: var(--mn-green-100); border-radius: 50%; color: var(--mn-green-600);
}
.mag-shop-ref__disc .icon { width: var(--mag-shop-note-glyph); height: var(--mag-shop-note-glyph); }
/* The small cover: fitted by its height like every cover, and never boxed (it may be a cut-out). */
.mag-shop-ref__cover { flex: none; height: var(--mag-shop-ref-lead); width: auto; object-fit: contain; }
.mag-shop-ref__words { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
.mag-shop-ref__arrow { display: flex; flex: none; }

/* "More issues" (Figma 5436:8085; decision S5-N6): the last band of the page, tinted, with three
   other products as cards without a box — one under the other below 768, three in a row from
   there, where the card stands tall (above). Not the grid of three teasers: that one has two
   columns between 768 and 1023, and the third card stood alone. */
.mag-shop-more { padding-top: var(--mag-section); padding-bottom: var(--mag-section); background: var(--mn-gray-75); }
.mag-shop-more__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-gap); }
@media (min-width: 768px) {
  .mag-shop-more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- The overview: the notes under the list ---------- */
/* Three notes (Figma 5435:8009; decision S5-11): an icon in the green of a link, a title, a
   sentence — one under the other, from 768 three side by side — and under them the link to
   "Shipping and payment". Not the grid of three cards: that one has two columns between 768 and
   1023, and the third note stood alone. */
.mag-shop-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-shop-cols); }
@media (min-width: 768px) {
  .mag-shop-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mag-shop-notes__note { min-width: 0; }
.mag-shop-notes__glyph { display: flex; margin-bottom: 8px; color: var(--mn-green-600); }
.mag-shop-notes__glyph .icon { width: var(--mag-shop-note-glyph); height: var(--mag-shop-note-glyph); }
.mag-shop-notes__more { margin-top: var(--mag-shop-cols); }

/* ---------- The cart ---------- */
/* shop/cart.html (Figma 5437:8016, on a phone 5444:9435; decisions S5-6, S5-N7): the title with
   the number of copies, what the cart has to say, then — from 1024 — two columns: the lines at
   the left, the box in a column of its own width at the right; below 1024 one column in the
   order of the markup, the box after the lines and open. Nothing on the page sticks.
   <main> brings 24 above and below; from 1024 the title stands 12 lower — where the till's
   stands: whoever goes on to the till finds the title in the same place —, and below, the page
   keeps the distance of every other page's last section. */
.mag-shop-cart { padding-bottom: var(--mag-section-end); }
@media (min-width: 1024px) {
  .mag-shop-cart { padding-top: 12px; }
}
/* The title and, on its baseline, the number of copies: a fact as large as the small facts under
   a title (the sizes of the meta row, read from components.css), with the bag in front of it.
   ⚠️ The WORDS give that fact its baseline: the icon is taken out of the alignment and stands in
   the middle of the line — as the first item it would lend its lower edge as the baseline, and
   the words stood above the title's. An empty cart has no columns below: its title keeps the
   distance of that page's parts. */
.mag-shop-cart__head {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; min-width: 0;
  margin-bottom: var(--mag-shop-cols);
}
.mag-shop-cart--empty .mag-shop-cart__head { margin-bottom: var(--mag-shop-stack); }
.mag-shop-cart__count {
  display: flex; align-items: baseline; gap: var(--mag-meta-gap);
  font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); font-weight: 500; color: var(--mn-gray-700);
}
.mag-shop-cart__count .icon { flex: none; align-self: center; width: var(--mag-meta-glyph); height: var(--mag-meta-glyph); }
/* What the cart has to say — a change that was refused, what fell out of it — over both columns:
   the platform's banners as they are (no rule here dresses them), 8 apart. */
.mag-shop-cart__said { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: var(--mag-shop-stack); }
.mag-shop-cart__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-shop-cols); }
@media (min-width: 1024px) {
  .mag-shop-cart__cols { grid-template-columns: minmax(0, 1fr) var(--mag-shop-aside); align-items: start; }
}
.mag-shop-cart__main { display: flex; flex-direction: column; gap: var(--mag-shop-stack); min-width: 0; }
/* Empty (Figma 5437:8291): a sentence and the filled button, as wide as its words. */
.mag-shop-cart__none { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mag-shop-stack); min-width: 0; }

/* The lines (shop/_parts.html, `cart_line`; Figma 5437:8082, on a phone 5444:9477): ONE card on
   the quiet ground with a hairline around it, the lines in it under one another with a hairline
   between two — as wide as the lines, not as the card.
   A line has five parts — the small cover with the words, the quantity, the amount, "remove" —
   in two arrangements by the card's OWN width, not the window's: narrow, cover and words stand
   above and the other three below them, the quantity at the left, amount and "remove" at the
   right; from 480 of the card's width all of it is one row. (480: the fixed parts of the row
   take about 300, and a title needs about 150.) So the card is a container and the list in it
   is what the query rearranges — an element cannot ask about itself. On a phone a line stands
   in two rows, on a tablet and beside the box from 1024 in one.
   ALL lines share the columns of the list: a line takes the list's columns over (`subgrid`), so
   the amounts stand under one another whatever their length, and the quantities with them. The
   columns written before that word are for a browser that does not know it: there every line
   has columns of its own, and only a longer amount moves its quantity.
   ⚠️ `container-type: inline-size` takes the card's own width away: it stands in a column
   `minmax(0, 1fr)`, never in a box sized by its content. A browser without container queries
   keeps the narrow arrangement at every width. */
.mag-shop-lines {
  container-type: inline-size; min-width: 0; padding: 0 var(--mag-shop-pad);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
}
.mag-shop-lines__list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; }
.mag-shop-line {
  display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-columns: subgrid;
  grid-template-areas: "what what what" "count amount drop"; align-items: center; column-gap: 12px; row-gap: 12px;
  padding: var(--mag-shop-pad) 0;
}
.mag-shop-line + .mag-shop-line { border-top: 1px solid var(--mn-gray-200); }
.mag-shop-line__what { display: flex; grid-area: what; align-items: center; gap: 12px; min-width: 0; }
/* The small cover: fitted by its HEIGHT, as its address asks for it. ⚠️ Never boxed — no ground,
   no radius, no shadow of a box (the frame draws a tinted tile behind it; decision S5-N7 takes
   it away): it may be a cut-out, and its corners are see-through. A line without a picture has
   no place kept for one: its words begin where the cover would. */
.mag-shop-line__cover { flex: none; height: var(--mag-shop-line-cover); width: auto; object-fit: contain; }
.mag-shop-line__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The title is the link back to the product's page: in the colour of a title, underlined under a
   pointer, with a ring when reached by keyboard. One line of 24 to 26 — enlarged for a finger at
   the element itself: the padding of a link in a line reaches above and below it without moving
   anything. */
.mag-shop-line__title { padding: 7px 0; color: var(--mn-gray-900); }
.mag-shop-line__title:focus-visible, .mag-shop-line__remove:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* The form of the quantity: the quantity, and — for a reader without a script only, in the
   markup — the button "update" beside it. */
.mag-shop-line__count { display: flex; grid-area: count; justify-self: start; align-items: center; gap: 8px; min-width: 0; }
.mag-shop-line__amount { grid-area: amount; text-align: right; white-space: nowrap; color: var(--mn-gray-900); }
.mag-shop-line__drop { display: flex; grid-area: drop; }
/* "Remove": a square button as large as an end of the quantity (36 — a finger's; drawn 40
   beside a quantity of 48), white with the edge of a field, its icon as large as the minus and
   the plus. Its word is the element's label for a screen reader. */
.mag-shop-line__remove {
  display: flex; align-items: center; justify-content: center; width: var(--mag-shop-qty-zone); height: var(--mag-shop-qty-zone);
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: var(--rounded-btn);
  color: var(--mn-gray-800);
}
.mag-shop-line__remove .icon { width: var(--mag-shop-qty-glyph); height: var(--mag-shop-qty-glyph); }
@media (hover: hover) {
  .mag-shop-line__title:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mag-shop-line__remove:hover { border-color: var(--mn-gray-500); color: var(--mn-gray-900); }
}
@container (min-width: 480px) {
  .mag-shop-lines__list { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .mag-shop-line {
    grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-columns: subgrid;
    grid-template-areas: "what count amount drop";
  }
}

/* The box beside the lines (shop/_parts.html, `cart_summary`; Figma 5437:8137, on a phone
   5444:9538; decisions S5-6, S5-N7): the quiet ground with a hairline around it, like the card of
   the lines, and nine parts one under the other, as far apart as the parts of the box of a
   product's page — the head · the amounts · a hairline · the sum · the sentence on the preview ·
   the button · a hairline · the notes · the link. The amounts are the lines of the price
   preview; the sum stands apart from them: after a hairline that is a part of its own (not the
   8 of the preview's last line), with a large amount and the legal line on the tax 4 below it.
   The button is as wide as the box — it is stretched by the column, no width is set. The link
   at the foot is the one under the button of a product's page (`mag-shop-box__info`, a class in
   the markup: as wide as its words, a finger's room above and below). Open at every width, and
   it does not stick. */
.mag-shop-sum {
  display: flex; flex-direction: column; gap: var(--mag-shop-stack); min-width: 0; padding: var(--mag-shop-pad);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
}
.mag-shop-sum__total { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mag-shop-sum__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0;
  color: var(--mn-gray-900);
}
/* The notes of that box (Figma 5437:8161): the SECOND arrangement of the notes under the list —
   one under the other at every width (the rule of three columns above is taken back: same
   weight, later), 12 apart, and in each the icon gray in a gray disc at the LEFT of its words
   instead of green above them. The disc and its icon are the pair of a way on (40 and 20: what
   the frame draws here — no second pair of sizes for one more disc). Word and sentences are a
   step smaller (classes in the markup), 2 apart. */
.mag-shop-notes--aside { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mag-shop-notes__note--beside { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 2px; }
.mag-shop-notes__note--beside .mag-shop-notes__glyph {
  grid-row: 1 / span 2; align-items: center; justify-content: center;
  width: var(--mag-shop-ref-lead); height: var(--mag-shop-ref-lead); margin-bottom: 0;
  background: var(--mn-gray-200); border-radius: 50%; color: var(--mn-gray-800);
}

/* ---------- "Shipping and payment": the shipping tables ---------- */
/* shop/info.html (decision S5-11: of that page only its tables get a look). The table is the
   text page's (components.css, `mag-prose__table`, beside this class in the markup: hairlines,
   the head on a ground, 14/20, and a box that scrolls sideways where a phone is narrower than
   the table — the page never does), with what a table of AMOUNTS needs on top: its heading at
   the left above it, the amounts at the right under their columns and never broken, and the
   countries at the left as plain words — the ground and the weight are the column heads' alone.
   ⚠️ No `display` on the table and no width here: it is as wide as the text by a utility. */
.mag-shop-rates caption { padding-bottom: 8px; text-align: left; font-weight: 600; color: var(--mn-gray-900); }
.mag-shop-rates thead th + th, .mag-shop-rates td { text-align: right; }
.mag-shop-rates td { white-space: nowrap; }
.mag-shop-rates tbody th { background: none; font-weight: 400; }

/* ---------- Hidden stays hidden ---------- */
/* This sheet loads after the build: a `display` set above would beat the build's hiding class and
   the attribute of the same name (same weight, later file). So every block that sets one says the
   closed state again. ⚠️ So none of them is hidden by a class with a variant in front — it is
   hidden through an element around it. */
.mag-shop-offer[hidden], .mag-shop-offer.hidden, .mag-shop-offer__words[hidden], .mag-shop-offer__words.hidden,
.mag-shop-card[hidden], .mag-shop-card.hidden, .mag-shop-card__frame[hidden], .mag-shop-card__frame.hidden,
.mag-shop-card__cover[hidden], .mag-shop-card__cover.hidden, .mag-shop-card__blank[hidden], .mag-shop-card__blank.hidden,
.mag-shop-card__head[hidden], .mag-shop-card__head.hidden, .mag-shop-card__more[hidden], .mag-shop-card__more.hidden,
.mag-shop-card__text[hidden], .mag-shop-card__text.hidden,
.mag-shop-box[hidden], .mag-shop-box.hidden, .mag-shop-box--card[hidden], .mag-shop-box--card.hidden,
.mag-shop-box__price[hidden], .mag-shop-box__price.hidden, .mag-shop-box__gone[hidden], .mag-shop-box__gone.hidden,
.mag-shop-box__form[hidden], .mag-shop-box__form.hidden, .mag-shop-box__row[hidden], .mag-shop-box__row.hidden,
.mag-shop-qty[hidden], .mag-shop-qty.hidden, .mag-shop-qty__step[hidden], .mag-shop-qty__step.hidden,
.mag-shop-notes[hidden], .mag-shop-notes.hidden, .mag-shop-notes__glyph[hidden], .mag-shop-notes__glyph.hidden,
.mag-shop-card__always[hidden], .mag-shop-card__always.hidden,
.mag-shop-box__top[hidden], .mag-shop-box__top.hidden, .mag-shop-box__fields[hidden], .mag-shop-box__fields.hidden,
.mag-shop-box__field[hidden], .mag-shop-box__field.hidden, .mag-shop-box__send[hidden], .mag-shop-box__send.hidden,
.mag-shop-preview[hidden], .mag-shop-preview.hidden, .mag-shop-preview__rows[hidden], .mag-shop-preview__rows.hidden,
.mag-shop-preview__row[hidden], .mag-shop-preview__row.hidden,
.mag-shop-page__back[hidden], .mag-shop-page__back.hidden, .mag-shop-page__cols[hidden], .mag-shop-page__cols.hidden,
.mag-shop-page__facts[hidden], .mag-shop-page__facts.hidden, .mag-shop-page__mark[hidden], .mag-shop-page__mark.hidden,
.mag-shop-page__words[hidden], .mag-shop-page__words.hidden, .mag-shop-page__text[hidden], .mag-shop-page__text.hidden,
.mag-shop-stage[hidden], .mag-shop-stage.hidden, .mag-shop-stage__tile[hidden], .mag-shop-stage__tile.hidden,
.mag-shop-stage__second[hidden], .mag-shop-stage__second.hidden, .mag-shop-stage__blank[hidden], .mag-shop-stage__blank.hidden,
.mag-shop-ref[hidden], .mag-shop-ref.hidden, .mag-shop-ref__disc[hidden], .mag-shop-ref__disc.hidden,
.mag-shop-ref__words[hidden], .mag-shop-ref__words.hidden, .mag-shop-ref__arrow[hidden], .mag-shop-ref__arrow.hidden,
.mag-shop-more__grid[hidden], .mag-shop-more__grid.hidden,
.mag-shop-cart__head[hidden], .mag-shop-cart__head.hidden, .mag-shop-cart__count[hidden], .mag-shop-cart__count.hidden,
.mag-shop-cart__said[hidden], .mag-shop-cart__said.hidden, .mag-shop-cart__cols[hidden], .mag-shop-cart__cols.hidden,
.mag-shop-cart__main[hidden], .mag-shop-cart__main.hidden, .mag-shop-cart__none[hidden], .mag-shop-cart__none.hidden,
.mag-shop-lines__list[hidden], .mag-shop-lines__list.hidden, .mag-shop-line[hidden], .mag-shop-line.hidden,
.mag-shop-line__what[hidden], .mag-shop-line__what.hidden, .mag-shop-line__words[hidden], .mag-shop-line__words.hidden,
.mag-shop-line__count[hidden], .mag-shop-line__count.hidden, .mag-shop-line__drop[hidden], .mag-shop-line__drop.hidden,
.mag-shop-line__remove[hidden], .mag-shop-line__remove.hidden,
.mag-shop-sum[hidden], .mag-shop-sum.hidden, .mag-shop-sum__total[hidden], .mag-shop-sum__total.hidden,
.mag-shop-sum__row[hidden], .mag-shop-sum__row.hidden,
.mag-shop-notes__note--beside[hidden], .mag-shop-notes__note--beside.hidden { display: none; }