/* Enlarged text on a small phone (audit D-001, 9 October 2026).

   The owner: "With enlarged text on a 320px phone, the menu and cart stay on screen and reachable, and nothing forces
   sideways scrolling. Test at 150% and 200% text. Keep the text readable; don't solve it by shrinking text."

   With the phone's text size turned up, a few parts of the shop were as wide as their own words and ran past the edge of
   the screen or of their card. Each rule here lets one of those parts give way instead: a line wraps, a button goes under
   the words beside it, a card stops growing sideways. Nothing is made smaller, and at the phone's own text size every one
   of these parts looks as it did (checked at 320, 390, 768 and 1366 pixels: i4.cjs and i4-same.cjs in
   Astra-Smartnote-Audit/batch-3-evidence/scripts).

   The top bar's part is in mobile-navbar.css and navbar-studies.js (fitName); the "How buying works" steps in
   free-phone.css; the cart's total and button in cart-studies.css; the waiting "Remove" label in store.css.
   Loaded last by index-v2-enhanced.html. */
@media(max-width:600px){
 /* Smart Bundle cards: the foot of a card (price, "What's inside", Add) was sized by its words and ran out under the
    card's edge, taking Add with it. It keeps to the card's width; the link and the button may take two lines. */
 #smart .fcl-card footer{min-width:0}
 #smart .fcl-card .sbx-actions{flex-wrap:wrap}
 /* The large Smart Bundle card: the column with the bundle's name was never narrower than its longest word, so beside the
    SmartNote mark the two were wider than the card. The name's column takes the room that is left; a name too long for
    it carries on the next line. The mark's column is as it was. */
 #smart[data-card-study] .fcl-card.fcl-lead{grid-template-columns:minmax(0,1fr) auto}
 #smart .fcl-card.fcl-lead h3{overflow-wrap:break-word}
 /* Orders: an opened order's card was as wide as its longest line. */
 .os-cards{grid-template-columns:minmax(0,1fr)}
 .os-tail a{white-space:normal}
 /* The hero's changing word ("trigonometry.") was held on one line and cut off at the screen's edge. */
 .hs-word{white-space:normal}
 .hs-word>span{max-width:100%;overflow-wrap:break-word}
 /* The wishlist: a row's words were as wide as the longest word in the name ("Transformations"), which pushed Add off
    the side. My sheets: an opened subject's card was as wide as its longest line. Each keeps to the page's width, and a
    word too long for its line carries on the next. */
 .ws-copy{grid-template-columns:minmax(0,1fr)}
 .ws-copy b{overflow-wrap:break-word}
 .ls-subjects{grid-template-columns:minmax(0,1fr)}
 .ls-subject-head b,.ls-row-copy b{overflow-wrap:break-word}
 /* A page's heading: a word wider than the screen ("Conditions" at twice its size) carries on the next line. */
 .page-heading h1{overflow-wrap:break-word}
}
/* A small phone's shop rows: Add and Added share one fixed width so a row does not move when pressed. With the text size
   turned up "Added" was wider than that and spilled out of its button. The width is now the least the button may be. */
@media(max-width:350px){
 html.sp-shop #shopResults .product-row>.product-bottom .small-button{width:auto;min-width:84px}
}
/* Wider phones' shop rows: the price and Add have a column of 84px. With the text size turned up "Added" was wider than
   that and spilled out of its button. 84px is now the least the column may be; it is still 84px at the phone's own text
   size, where both words fit, so a name does not take another line when its sheet goes into the cart. */
@media(min-width:351px) and (max-width:600px){
 html.sp-shop #shopResults .product-list .product-row{grid-template-columns:58px minmax(0,1fr) minmax(84px,max-content)}
}