/*
 * INTENTIONAL DEVIATIONS FROM THE REFERENCE THEME.
 *
 * Everything else in the port reproduces the audited theme exactly, and
 * `theme-resolved.css` next to this file is a machine extraction that must stay
 * that way. This file is the one place where the port knowingly renders
 * something the reference does not, and each entry has to say why.
 *
 * Anything here WILL show up as a difference in the visual parity diff. That is
 * expected. Do not "fix" the diff by reverting an entry; either the entry is
 * still justified or it should be deleted outright.
 *
 * Loaded after `theme-resolved.css` in `app/layout.tsx`.
 */

/*
 * 1. Mobile horizontal overflow — user-authorised fix to a theme defect.
 *
 * At 390px these two blocks are 390px wide inside a 358px column, pushing 16px
 * of horizontal overflow onto the document. The cause is that they carry
 * padding and a border under the initial `box-sizing: content-box`: the theme
 * ships no universal reset, and no rule in any of its 80 stylesheets sets
 * `box-sizing` on either selector. (`base.css` does contain
 * `details > * { box-sizing: border-box }`, which is not a universal reset and
 * does not reach these.) The reference overflows by 22px for the same reason.
 *
 * Kept because it was proven not to reflow anything. Applying `border-box`
 * experimentally to both pages left document height unchanged on each (5172px
 * reference, 8719px port) and moved no element's y or height; the only
 * measured change was `.guarantee-container` narrowing 390px → 358px, i.e. the
 * blocks stop protruding and line up with every sibling in the column.
 *
 * Deliberately NOT extended to `.reviews-transformation-section` /
 * `.reviews-container`: their `@media (max-width: 480px) { margin: 0 -15px }`
 * is a full-bleed gutter escape for a horizontally scrolling carousel, so their
 * overflow is the design.
 */
.guarantee-container,
[class*='custom-text-block-'] {
  box-sizing: border-box;
}