/* ============================================================================= mobile-resilience.css — mobile-only defensive overlay for the Ninja Pro storefront. PURPOSE / SCOPE ---------------- This file is loaded AFTER styles.css, mobile-dock.css, orders.css, support.css and social-proof.css. Everything here is wrapped in `@media (max-width: 800px)`, so the desktop layout (>= 801px) is never touched. It is deliberately DEFENSIVE: it does not rely on the JavaScript layer marking a node with a specific class. It hardens the responsive contract against the systemic causes found in a Playwright audit at 320/360/390/414/430px in both EN (dir=ltr) and FA (dir=rtl): * hard-coded 1.875rem + `white-space:nowrap` on `.card-price strong` (the long sentence "This plan is currently unavailable." bled ~250px outside the card and pushed document.scrollWidth to 534 at 320px EN and caused an ~11px left-bleed in FA/RTL); * flex/grid children without `min-width:0` could not shrink below their content size, so an unbreakable string widened the whole page; * icon-only controls dropped below the 44px minimum tap target (`.history-refresh` = 40px, `#supportLanguage` = 34.7px); * `white-space:nowrap` on status/period text that must wrap on mobile; * fixed bottom dock / safe-area padding assumptions; * images and inline SVG without a max-width guard. `!important` is intentionally NOT used: this stylesheet is authored to win the cascade by load order + equal-or-higher specificity against the rules it overrides. Where a value must beat an inline `style=""` or an existing higher-specificity rule, the reason is documented inline. Owner: mobile resilience overlay (2026-10-09). ========================================================================== */ @media (max-width: 800px) { /* --------------------------------------------------------------------------- 1) TEXT-BREAKING SAFETY Headings, card copy, prices/status and identifiers must wrap instead of forcing the document wider than the viewport. `overflow-wrap:anywhere` (not just `break-word`) is used so that an unbreakable run of characters can also shrink a flex/grid track — this is what stops the long "currently unavailable" sentence from escaping the card in both LTR & RTL. --------------------------------------------------------------------------- */ .store-intro h1, .product-detail-copy h1, .history-heading h1, .support-page h1, .section-heading h2, .info-block h2, .product-card h3, .product-card p, .card-heading, .card-heading > *, .card-price, .card-price strong, .card-price-from, .card-plan-count, .detail-variant b, .detail-variant small, .detail-variant strong, .detail-total > strong, .price-equivalent, .billing-note, .checkout-summary-card, .checkout-summary-card *, .payment-method-details, .account-profile > div:last-child, .merge-confirmation strong, .auth-message, .purchase-heading, .purchase-summary, .support-message, #supportPreviewText, #supportNotice, .demo-receipt code, .delivery-value { min-width: 0; overflow-wrap: anywhere; word-break: break-word; /* legacy WebViews (Telegram in-app browser) */ } /* Long identifiers (order ids, product ids, delivery keys/codes) must not create a horizontal scrollbar; they may be broken mid-token. */ .demo-receipt code, .delivery-field code, .purchase-summary code, .pairing-code { white-space: pre-wrap; overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- 2) FLEX / GRID CHILDREN MUST BE ALLOWED TO SHRINK A flex/grid item defaults to min-width:auto, i.e. it refuses to shrink below its content. That is the mechanism that turned one long string into a page-wide overflow. This is the single most important systemic fix. --------------------------------------------------------------------------- */ .site-header > *, .header-actions > *, .section-heading > *, .catalog-controls > *, .filter-interaction > *, .card-bottom > *, .card-topline > *, .detail-variant > *, .variant-pricing, .detail-total > *, .checkout-summary-card > div > *, .payment-method > *, .account-profile > *, .account-orders-link > span, .history-heading > *, .history-toolbar > *, .history-tabs, .history-filters, .support-toolbar > *, .support-layout > *, .purchase-summary > *, .delivery-field > *, .product-layout > *, .steps-section > *, footer > * { min-width: 0; } /* The catalog grid/cards are the concrete surface where the audit found the overflow; re-assert the guards here for extra safety. */ .product-grid, .product-grid.compact { grid-template-columns: minmax(0, 1fr); } .product-card { min-width: 0; /* No `overflow:hidden` here on purpose: clipping would merely MASK an overflow (and would cut focus outlines with outline-offset). The wrapping rules above are the real fix. */ } .card-pricing, .card-price, .card-bottom { min-width: 0; max-width: 100%; } /* --------------------------------------------------------------------------- 3) WRAP LONG STATUS TEXT INSTEAD OF `nowrap` `.card-price strong` is the exact production defect: 1.875rem + nowrap. When a whole sentence is injected there it overflows the card AND the page. We let it wrap and scale the type to fit, which also neutralises the RTL left-bleed seen in FA. Short prices ("$15.98") are unaffected — they still sit on one line, only the font ceiling is lower on mobile. --------------------------------------------------------------------------- */ .card-price strong { white-space: normal; overflow-wrap: anywhere; font-size: clamp(1.375rem, 6.5vw, 1.875rem); line-height: 1.3; letter-spacing: -0.02em; } /* When the price slot holds a sentence rather than a number, drop the display sizing entirely so the message reads as body copy. */ .card-price strong.price-message, .card-price strong[dir="auto"] { font-size: 0.9375rem; font-weight: 600; line-height: 1.6; letter-spacing: 0; color: var(--muted); font-variant-numeric: normal; } /* These were `nowrap` in the base stylesheet; on a 320px screen a longer translation must be allowed to wrap under the price. */ .card-price-period, .card-cta, .detail-variant strong, .catalog-result { white-space: normal; } .card-cta { /* keep the CTA comfortably tappable when it wraps to its own line */ display: inline-flex; align-items: center; min-height: 44px; } /* --------------------------------------------------------------------------- 4) 44px MINIMUM TAP TARGETS Audit found `.history-refresh` at 40px and `#supportLanguage` at 34.7px wide (icon-only / two-letter buttons). Enforce the 44px floor in BOTH axes on mobile without stretching full-width buttons. --------------------------------------------------------------------------- */ button, [role="button"], .button, a.button, summary { min-height: 44px; } .history-refresh, #supportLanguage, #historyLanguage, .language-button, .filter-orb, .activity-toggle, .modal-close, .account-trigger, .dialog-language { min-width: 44px; } /* Text buttons get a little inline padding so a 2-char label still clears 44px after the box-sizing border-box padding is applied. */ #supportLanguage, #historyLanguage { padding-inline: 12px; } /* --------------------------------------------------------------------------- 5) BOTTOM DOCK / SAFE-AREA OVERLAP The floating `.mobile-nav` dock (mobile-dock.css) is position:fixed at the bottom. Any page that renders it needs enough trailing space that the last card / footer link can scroll clear of the dock, including the OS gesture bar via env(safe-area-inset-bottom). mobile-dock.css already does this for index.html; we repeat it here so this stylesheet is self-sufficient and so the toast also clears the dock + inset. --------------------------------------------------------------------------- */ body:has(.mobile-nav) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* --------------------------------------------------------------------------- 6) RTL-SAFE SPACING Use logical properties only; never a bare left/right that mirrors wrongly. In RTL the flex row of `.card-bottom` / `.detail-total` can otherwise keep the label and value glued to the wrong edge when the value wraps. --------------------------------------------------------------------------- */ .card-bottom, .detail-total, .checkout-summary-card > div, .purchase-summary { gap: 8px 12px; } [dir="rtl"] .card-bottom, [dir="rtl"] .detail-variant, [dir="rtl"] .detail-total, [dir="rtl"] .purchase-summary { /* when content wraps, keep the value on its own start-aligned line instead of being pushed past the mirrored inline edge */ align-items: flex-start; } [dir="rtl"] .variant-pricing { align-items: flex-start; } /* --------------------------------------------------------------------------- 7) IMAGE / SVG / MEDIA GUARDS Nothing may render wider than its container. SVG keeps its intrinsic size but can never exceed 100% of the parent (important for icon rows inside narrow cards and for RTL flips). --------------------------------------------------------------------------- */ img, svg, video, canvas, iframe { max-width: 100%; } .brand-mark img, .product-symbol img, .product-icon, .account-trigger-avatar img, .account-avatar img { max-width: 100%; height: auto; object-fit: contain; } } /* =========================================================================== Narrowest phones (<= 380px): the audit's tightest viewport was 320px. Reduce display type one more notch and allow the catalog controls to stack so nothing has to overflow. =========================================================================== */ @media (max-width: 380px) { .store-intro h1, .product-detail-copy h1, .history-heading h1 { font-size: clamp(1.75rem, 8.5vw, 2.125rem); } .card-price strong { font-size: clamp(1.25rem, 7vw, 1.625rem); } .card-bottom { gap: 10px; } .detail-total > strong { font-size: 1.5rem; } /* Let the filter row use the full width instead of squeezing to a scroll. */ .catalog-controls .filter-interaction { width: 100%; } .catalog-controls .filter-toggle { flex: 1; width: auto; min-width: 0; } }