/*
 * LightPhotos — defensive mobile-first overrides for legacy stylesheet.v1.38.css
 *
 * Intentionally NOT wrapped in @layer: the monolith has no @layer, so an
 * unlayered stylesheet always beats layered CSS regardless of load order.
 * To win at equal specificity we mirror the monolith's exact selectors here
 * and rely on load order (this file is included after stylesheet.v1.38.css
 * in header.tpl) — normal cascade rules, no !important needed.
 *
 * Desktop (>=1024px) must render pixel-identical to before this file existed.
 * Every rule below is scoped to a max-width media query.
 */

/*
 * ---- D.2: review-form rating row base layout, intentionally NOT media-scoped ----
 * product.tpl's "Оценка" radios had no <label> at all — five bare
 * <input type=radio> spaced apart only by literal &nbsp; text nodes between
 * "Плохо" and "Хорошо" (A.3 finding #9: crooked wrap on 320px, no per-radio
 * tap target). Re-marked-up as <label class="review-rating__opt"> per radio
 * + <span class="review-rating__hint"> for the two hint words. Since the
 * &nbsp; spacing was removed along with the old markup, this base layout
 * (flex row + gap replacing the &nbsp; gaps) has to apply at every width,
 * including desktop — without it 1024/1440 would render the radios jammed
 * together with zero spacing. The 44px tap-target padding and the
 * caption-stacks-above-row change are mobile-only (≤1023px block below);
 * placed here, BEFORE that block, on purpose — .review-rating's margin-left
 * is set both here (45px, desktop) and there (0, mobile) and CSS breaks a
 * specificity tie by source order, so the ≤1023px override has to come
 * *after* this rule in the file to actually win on narrow viewports.
 */
.review-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: 45px;
}

.review-rating__hint {
  white-space: nowrap;
}

.review-rating__opt {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/*
 * ---- E.2: product.tpl .full-size-photo img — CLS defense, NOT media-scoped ----
 * Separate hidden (visibility:hidden, monolith line ~3585) itemprop="image"
 * block for Product schema — NOT the visible gallery (that's .lp-gallery,
 * see gallery.css — Fotorama replaced in the "vanilla-галерея" pass; this
 * hidden block is untouched, it's independent Schema.org markup). This block's
 * <img> tags had no width/height at all; size comes from a DB-configurable
 * pair (config_image_additional_width/height, square in every config_image_*
 * pair checked) so a hardcoded px value would drift if the setting changes.
 * aspect-ratio 1/1 is config-agnostic and prevents the in-flow (though
 * invisible) box from collapsing to 0 before the image decodes and nudging
 * whatever follows it — measured trace CLS was already 0.00 on this page,
 * so this is defensive completeness per the brief's ask, not a fix for an
 * observed regression.
 */
.full-size-photo img {
  aspect-ratio: 1 / 1;
}

/*
 * ---- E.7: product.tpl .mail-request-wrap h2 — heading-order fix, NOT media-scoped ----
 * Lighthouse a11y "heading-order": these were <h4> right after the page <h1>
 * with nothing in between (skips h2/h3) — on the in-stock branch
 * (.mail-request-wrap .pr, "Уведомить о снижении цены") and, latently, the
 * same bug on the out-of-stock branch ("Уведомить о поступлении", not
 * rendered for every product but same class of issue). Retagged both to
 * <h2> (correct next level after h1) — markup only, no monolith edit.
 * Monolith's generic h2{} rule (font-size:24px, bold, color:#3366cc) would
 * otherwise visibly reskin this text, since the current 14px/700/
 * rgb(64,67,74) look comes from a narrower selector
 * (.mail-request-wrap h4{margin:0;margin-bottom:5px} + inherited color/
 * size, not from the h4 tag itself) — mirrored here so retagging is
 * visually a no-op at every width.
 */
.mail-request-wrap h2 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(64, 67, 74);
}

/*
 * ---- #search-fix на ДЕСКТОПЕ: кнопка «Искать» налезала на поле ----
 * Монолит верстает бар поиска абсолютным позиционированием с жёсткими числами:
 * .container width:958px + padding:20px, input width:780px, кнопка width:160px
 * прибита к right:20px. Раньше это сходилось, потому что 958px были шириной
 * КОНТЕНТА (padding добавлялся сверху). После глобального box-sizing:border-box
 * из reset.css те же 958px стали внешней шириной, внутри осталось 918px, а
 * 780 + 160 = 940 — кнопка заехала на поле на 22px (замерено на 1440px:
 * правый край input 1041, левый край кнопки 1019).
 *
 * Чиню не подгонкой чисел, а снятием самой причины: бар становится flex-строкой,
 * поле тянется по остатку, кнопка сохраняет свои 160px. Это то же решение, что
 * уже применено для мобильных ниже (там колонка), только в строку — и оно
 * переживёт любые будущие изменения ширины контейнера.
 */
#search-fix .container {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  box-sizing: border-box;
}

#search-fix #search {
  position: relative; /* остаётся якорем для выпадашки автокомплита */
  top: auto;
  left: auto;
  flex: 1 1 auto;
  min-width: 0;       /* без него flex-элемент не сжимается ниже ширины инпута */
}

#search-fix #search input {
  width: 100%;
  box-sizing: border-box;
}

#search-fix .button-search {
  position: static;
  right: auto;
  flex: 0 0 auto;
}

#search-fix #quick_search_results {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px !important;
}

/* ---- Structural: fixed widths that force horizontal scroll below 1024px ---- */
@media (max-width: 1023px) {
  /* safety net: product-filter drawer (assets/css/product-filter.css .pf__drawer,
     built by assets/js/product-filter.js:initDrawer) uses position:fixed +
     translateX(-100%) which phantom-overflows the root box even while visually
     off-screen — do not edit product-filter.css, clip here instead */
  html {
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 1000px;
    padding-inline: 12px;
    margin-inline: auto;
  }

  header {
    min-width: 0;
  }

  footer {
    min-width: 0;
    height: auto;
  }

  #column-left {
    float: none;
    width: 100%;
  }

  #column-right {
    float: none;
    width: 100%;
  }

  #column-left + #column-right + #content,
  #column-left + #content {
    margin-left: 0;
  }

  #column-right + #content {
    margin-right: 0;
  }

  .product-info > .left {
    float: none;
    width: 100%;
  }

  .product-info > .right {
    float: none;
  }

  .product-info > .left + .right {
    width: 100%;
  }

  .product-info .image-additional {
    width: 100%;
    position: static;
  }

  /* product page buy-box: desktop rule ".product-info > #column-right{margin-left:50px}"
     assumed a fixed-width image column to its left; stacked layout doesn't need the gap */
  .product-info > #column-right {
    margin-left: 0;
  }

  /*
   * A.7: #search-fix (search results page's own "Искать по сайту" bar,
   * product/search.tpl only — there is no site-wide header search box,
   * grep confirmed common/header.tpl never renders one). Phase 2 only set
   * width:100% on the outer .container and the input — not enough: the
   * monolith positions #search and .button-search with position:absolute
   * (top/left resp. right, no width on #search itself). An absolutely
   * positioned box with only one inset set (left, no right) is
   * shrink-to-fit; a percentage width on the *input* inside it can't
   * resolve against that undefined width, so it falls back to the
   * browser's intrinsic text-input size (~206px) instead of 100%. Below
   * ~750px available width that leaves #search and .button-search
   * overlapping each other (confirmed via getBoundingClientRect on
   * 320/375: input right edge 238px past button's left edge 128-183px)
   * — not just "squeezed", genuinely unreadable/unclickable. Switching
   * the bar to a static flex column (input above button, both 100%)
   * removes the absolute positioning that caused the shrink-to-fit dead
   * end, in the same spirit as the header #cart fix in A.4.
   */
  #search-fix .container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
  }

  #search-fix #search {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  #search-fix #search input {
    width: 100%;
    height: auto;
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }

  #search-fix .button-search {
    position: static;
    width: 100%;
    height: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*
   * Autocomplete dropdown (quick_search.v1.00.js, home-grown — not jQuery
   * UI, do not replace, only keep it from breaking the layout). Appended
   * inside #search via `$('#search').append(eList)`; monolith hardcodes
   * width:720px unconditionally. #search is now the positioned ancestor
   * (position:relative above) and spans the real container width, so the
   * dropdown can just match it — 720px caused a genuine page-level
   * horizontal scroll (confirmed: scrollWidth 752 vs clientWidth 320
   * after typing into the field and letting the AJAX suggestion list
   * render).
   */
  #search-fix #quick_search_results {
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * D.3: #search-min — a SECOND, separate quick-search widget from #search-fix
   * above: not a .tpl at all, an admin-authored html_block module (dm_setting,
   * position=content_top_right) rendered by common/content_top_right on
   * layouts where an editor placed it — confirmed present on /flashlights
   * (product/category) and other category layouts, absent on the homepage.
   * Flagged in inventory-d.md as the single worst offender ("ОЧЕНЬ МАЛО"):
   * stylesheet.v1.38.css:743-756 sets the input to font-size:11px/height:22px
   * and the button (line 701-707) to height:21.5px — same iOS-zoom/touch-target
   * bug A.7 already fixed for #search-fix, different ID because it's a
   * different widget instance. Unlike #search-fix, #search-min was never
   * position:absolute (already flex in the monolith), so only font-size/
   * min-height are needed here — no positioning rewrite.
   */
  #search-min #search input {
    height: auto;
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }

  #search-min .button-search {
    height: auto;
    min-height: 44px;
  }

  /* same hardcoded-width autocomplete dropdown bug as #search-fix above,
     353px this time (stylesheet.v1.38.css:758-771) — same fix */
  #search-min #quick_search_results {
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * "Не нашли, что искали? Напишите нам" mini-form — renders identically
   * on both the results and the empty-state branch of search.tpl. Both
   * fields carry inline `style="height:22px..."` in the .tpl (not a
   * stylesheet rule), which beats any non-!important external CSS
   * regardless of selector specificity — !important is the only way to
   * win here without editing the .tpl, same reasoning as #button-review
   * in A.3.
   */
  #zhaloba input#mail {
    height: auto !important;
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  #zhaloba textarea#send {
    height: auto !important;
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  /* home info block ("#fix-column-left .box-column-left") — fixed 480px 2-col text,
     discovered via overflow testing, not in original brief */
  #fix-column-left .box-column-left {
    width: 100%;
    float: none;
  }

  #fix-column-left .box-column-left + .box-column-left {
    float: none;
  }

  /*
   * header top band (#logo, #logged, #cart badge, .info-contact) — all four are
   * desktop float:left/float:right with a hardcoded `header{height:70px}`. Below
   * 1024px they don't fit on one line, wrap, and overflow past the fixed 70px —
   * same float/fixed-height clash as .product-filter/.htabs elsewhere in this file.
   * Worse here: header's dark background (#3d4046) stays clipped to 70px while
   * content spills onto the white body below it, so #logged's white links
   * (color:#fff) and #cart's first line (color:#fff) render white-on-white —
   * invisible, not just visually broken. Confirmed on every page, not cart-specific;
   * fixing the whole band here because A.4 (corzина) needs the #cart badge legible.
   * height:auto lets header grow to wrap the now block-stacked children instead of
   * clipping them, so the dark background naturally follows the stacked content.
   */
  header {
    height: auto;
  }

  header .container {
    min-height: 0;
  }

  header #logo {
    float: none;
  }

  header #logged {
    float: none;
    width: 100%;
  }

  header #logged > div {
    float: none;
    position: static;
    left: 0;
    top: 0;
  }

  header #logged a {
    display: block;
    min-height: 44px;
    padding-block: 12px;
    box-sizing: border-box;
  }

  #header #cart .heading a {
    display: block;
    min-height: 44px;
  }

  /* desktop rule "#header #cart{position:absolute;margin-left:540px}" pushes it
     off-canvas below 1024px; float:right + fixed padding also overflowed the
     container on its own (min-width:150px + padding:0 40px exceeded ~296px
     available at 320px) — same fix direction as the rest of this band. */
  #header #cart {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 12px 0;
    box-sizing: border-box;
  }

  header .info-contact {
    float: none;
    width: 100%;
    margin: 0;
    padding-block: 12px;
  }

  header .info-contact a.mail,
  header .info-contact span.hidden-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  /*
   * mini-cart dropdown (#header #cart .content, module/cart.tpl) — the item
   * table has no column widths, so auto table-layout squeezes the qty/total
   * cells once the (now full-width) card still isn't wide enough for a long
   * product name + "x 1" + "19 690р." + remove icon on one row: the price
   * itself wrapped mid-number ("19" / "690р."). Not a horizontal-scroll case
   * (brief's fallback for A.4) — the card doesn't overflow its own width, the
   * *text inside a cell* was wrapping. nowrap on the numeric cells is enough;
   * the name cell is left free to wrap across lines like before.
   */
  #header #cart .mini-cart-info td.quantity,
  #header #cart .mini-cart-info td.total {
    white-space: nowrap;
  }

  /* "Оформить заказ" — scoped to the cart dropdown only: .button-small-purple
     (height:34px, line-height:32px) is a shared class used by other small CTAs
     sitewide that A.4 didn't audit, so this doesn't touch the class globally. */
  #header #cart .checkout a {
    height: auto;
    min-height: 44px;
    line-height: 44px;
  }

  #header #cart .mini-cart-info .remove img {
    /* remove.png is a 16x16 glyph — pad the hit area instead of min-width/
       min-height, which would stretch the replaced <img> itself to 44px.
       Explicit width/height needed: reset.css's `img{max-width:100%}` resolves
       to a near-zero percentage inside this auto-layout table cell otherwise. */
    display: inline-block;
    width: 16px;
    height: 16px;
    max-width: none;
    padding: 14px;
    box-sizing: content-box;
    margin: -14px;
  }

  /* #nav-top-min (breadcrumb + content-top-right search box, site-wide flex row):
     nowrap by default + #content-top-right{width:50%} forces overflow on narrow pages */
  #nav-top-min {
    flex-wrap: wrap;
  }

  #content-top-right {
    width: 100%;
  }

  /*
   * D.6: breadcrumb links ("Главная" + any intermediate crumb) — plain
   * inline text link, ~54x17px (14px font, no padding). Tested live before
   * committing: min-height via inline-flex only grows the row by the height
   * of the <a> itself — sibling "»"/current-page <span>s stay their own
   * small size, so a 1-2-crumb trail (the common case) doesn't visually
   * balloon, confirmed via screenshot on /flashlights.
   */
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .breadcrumb {
    flex-shrink: 1;
    flex-basis: 100%;
    white-space: normal;
  }

  /*
   * .product-filter (display + sort + limit + pagination bar above the product
   * list) is a fixed "height:35px" box whose children are float:left with no
   * clearfix. At desktop widths they all fit on one line so the fixed height
   * is never exceeded; below ~700px they don't fit and wrap, overflowing past
   * the 35px box while the box itself stays 35px tall (floats don't grow a
   * non-BFC parent). The very next sibling, .product-list > div (which has
   * overflow:auto → its own BFC), then has to avoid overlapping that still-
   * floating remainder and shrinks to the leftover width instead of spanning
   * the full row — this broke the FIRST product card into a squeezed ~60px
   * column with a hugely inflated height. Confirmed present down to 320px,
   * already gone by 768px — kept at the 1023px breakpoint anyway (matches
   * this block, harmless when everything already fits in one row).
   */
  .product-filter {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    column-gap: 16px;
  }

  .product-filter > div {
    float: none;
    margin-right: 0;
  }

  .product-filter .pagination {
    float: none !important;
    margin-right: 0 !important;
  }

  /* sort/limit selects: legacy ~28px tall, below the 44px touch target.
     768px (iPad-width touch devices) needs this too, hence the 1023px
     breakpoint rather than the phone-only 767px one below. */
  .product-filter select {
    padding-block: 10px;
    min-height: 44px;
  }

  /*
   * D: .icon-display (list/grid switcher inside .product-filter .display —
   * category.tpl, search.tpl, manufacturer_info.tpl, category_fishay.tpl,
   * category_sort_price.tpl all share this same widget, JS-rendered by the
   * inline display()/quick_search scripts) is a 36x32 sprite tile
   * (icon-sprit-mini.png, one <span> for the active state + one clickable <a>
   * for the other), flagged for D back in A.2. box-sizing:content-box keeps
   * the sprite's own box at its original 36x32; background-origin:content-box
   * anchors background-position math to that unchanged box (not the padded
   * border-box), so the visible icon doesn't shift. background-clip:content-box
   * is required alongside it — without it the browser paints the sprite sheet
   * across the *whole* (now 44x44) border box, bleeding the neighbouring icon
   * into the new padding. Net effect: 44x44 tap target, pixel-identical sprite.
   */
  .product-filter .display .icon-display {
    box-sizing: content-box;
    padding: 6px 4px;
    background-origin: content-box;
    background-clip: content-box;
  }

  /* pagination number links (top bar + .pagination-bottom): bare text glyphs
     with no padding (~8×16px) — give them a real touch target */
  .pagination .links a,
  .pagination .links b {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
  }

  /* list-view "В корзину" button: legacy height ~40px */
  .product-list button {
    min-height: 44px;
  }

  /*
   * D.6: grid-view sibling of the rule above — same button-big-dark-blue
   * class, same 40px legacy height, but display('grid') (category.tpl/
   * search.tpl/manufacturer_info.tpl's shared inline script, see A.2) swaps
   * the container's class from .product-list to .product-grid, so the rule
   * above stops matching. `display` is a plain cookie the moment a visitor
   * ever clicks the grid icon (persists across every listing page/session),
   * not a per-page edge case — caught while re-verifying the A.2 .icon-
   * display fix left the site in grid mode. A.1 already hit this same class
   * of gap for the home carousels (.box-product, see below); this is the
   * listing-page counterpart.
   */
  .product-grid button {
    min-height: 44px;
  }

  /*
   * .htabs (product page tab nav: Описание/Доставка/Гарантия/Характеристики/Отзывы)
   * is a fixed "height:42px" box whose children (.htabs a, float:left, width:180px)
   * only fit on one row when the container is >=~900px (5*180px). Below that they
   * wrap onto 2+ rows — same float/fixed-height clash as .product-filter above:
   * floats don't grow a non-BFC parent, so row 2+ spills out of the 42px box and
   * visually overlaps .tab-content (the panel right below), landing tab labels on
   * top of the product description text. display:flow-root gives .htabs its own
   * BFC so it grows to contain every row. Each tab's own box is also legacy
   * height:22px (border-box, mostly eaten by its 10px/10px padding) — well under
   * the 44px touch target, fixed alongside since it's the same element.
   */
  .htabs {
    height: auto;
    display: flow-root;
  }

  .htabs a {
    height: auto;
    min-height: 44px;
  }

  /*
   * Write-a-review form (#review-form, product page): the name input inherits the
   * legacy 14px font (iOS Safari auto-zooms on focus below 16px). #button-review
   * ("Оставить отзыв" submit) has TWO rules in the monolith — the second one
   * (height:22px !important) wins over the first (46px) and clamps the tap target
   * to ~22px on every viewport; matching !important here (mobile-only) is the only
   * way to outrank it without touching the read-only stylesheet.v1.38.css. Desktop
   * keeps the legacy 22px button untouched (out of scope — task requires 1024/1440
   * pixel-identical), even though the same bug is visible there too.
   */
  #review-form input[name="name"] {
    font-size: 16px;
  }

  #button-review {
    height: auto !important;
    min-height: 44px !important;
  }

  /*
   * D.2: review form "Оценка" row (re-marked-up in product.tpl — see
   * .review-rating base rule below for the unconditional flex layout that
   * replaced the old &nbsp;-spaced inline text). #tab-review .entry-rating
   * ("Оцените товар:" caption) is a legacy float:left/width:150px label —
   * on ≤1023px there isn't enough room left beside it for the radio row to
   * lay out straight (confirmed crooked wrap on 320px, A.3 finding #9), so
   * stack the caption above the row instead of squeezing beside it. Each
   * <label class="review-rating__opt"> gets a real 44x44 tap target (padding
   * around the 13px native radio, not a stretched radio) — matches the
   * table.form input min-height treatment used elsewhere in this file.
   */
  #tab-review .entry-rating {
    float: none;
    width: auto;
    display: block;
  }

  .review-rating {
    margin-left: 0;
  }

  .review-rating__opt {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    box-sizing: border-box;
  }

  /*
   * Account pages (A.6: login/register/order/address/edit/password/wishlist) —
   * every one of them uses this shared small-CTA class family for its primary
   * button ("Войти", "Продолжить", "Оформить заказ", "Редактировать", "Удалить",
   * "Новый адрес"...). stylesheet.v1.38.css hardcodes height:34px sitewide; A.4
   * already bumped it point-by-point for the header mini-cart's "Оформить заказ"
   * without touching the shared class ("used by other small CTAs sitewide that
   * A.4 didn't audit"). A.6 now covers essentially every other place this class
   * appears (product.tpl was closed in A.3; affiliate/* is a dead, unlinked
   * feature; header.tpl's own rule for this class is defensive CSS for markup
   * that isn't actually rendered) — safe to fix once, globally, mobile-only.
   */
  .button-small-blue,
  .button-small-purple,
  .button-small-dark-blue {
    height: auto;
    min-height: 44px;
    line-height: 44px;
  }

  /*
   * Bare class="button" (register/edit-account "Назад"/"Продолжить" buttons) —
   * has no rule of its own anywhere in stylesheet.v1.38.css, pure browser
   * default <input>/<a> styling, computes to ~26px tall. Scoped to the
   * .buttons wrapper these always sit in (account form footer), not the bare
   * class sitewide, in case "button" is reused elsewhere with different markup.
   * The <a class="button"> variant ("Назад") defaults to display:inline, which
   * ignores min-height entirely — needs an explicit inline-flex too.
   * D.6: min-width added — "Назад" alone (no padding, just the word + border)
   * measured 42.56px wide once height was fixed, just under the 44px target;
   * "Продолжить" already cleared it on text length alone.
   */
  .buttons .button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  /*
   * table.form (register/edit-account/change-password/address-book forms) —
   * OpenCart-default 2-cell label|input row. Fixing font-size/touch-height here
   * (font-size prevents iOS auto-zoom on focus; row STACKING to fix the actual
   * horizontal overflow is phone-only, see the 767px block below — at 768px
   * the 150px label + 200px input already fit their container, no overflow).
   */
  table.form input[type="text"],
  table.form input[type="password"],
  table.form input[type="email"],
  table.form select {
    font-size: 16px;
    min-height: 44px;
  }

  /*
   * D.6: .radio-yn — register.tpl's newsletter Yes/No and address_form.tpl's
   * "adress by default" Yes/No were bare <input type=radio> immediately
   * followed by a raw text echo, no <label> at all (same bug class as the
   * review-form "Оценка" radios fixed elsewhere in this file, different
   * pages) — the surrounding 276px-wide <td> LOOKS clickable but only the
   * 13px circle itself is; re-marked-up in both .tpl files to wrap each
   * radio+word in its own <label class="radio-yn">. inline-flex (not the
   * unconditional default) is mobile-only on purpose: this component didn't
   * lose any whitespace-based gap the way the review radios did (the .tpl's
   * own newline between the two <label>s still collapses to one space), so
   * desktop needs no base-layout rule, only the ≤1023px touch-target padding.
   */
  .radio-yn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
  }

  /*
   * Login page (account/login.tpl "Зарегистрированный клиент" form) — plain
   * <input>s, not table.form, so they need the same font-size/touch-height
   * fix spelled out separately here.
   */
  .login-content input[type="text"],
  .login-content input[type="password"] {
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /*
   * account/return_form.tpl (форма оформления возврата, Волна C2) — plain
   * <input>/<textarea>, никакой особой обёртки типа table.form/.login-content,
   * так что достаются им только сайтвайд-правила монолита (input[type=text]
   * {height:25px;font-size:14px}, stylesheet.v1.38.css:167-183) — риск iOS-
   * автозума на фокусе + тач-высота ниже 44px. Датапикер (.date) заменён на
   * нативный <input type="date"> в этой же волне — тот же монолитный селектор
   * его тоже ловит (input[type=date] в списке), фикс актуален и для него.
   */
  .return-form input[type="text"],
  .return-form input[type="date"] {
    font-size: 16px;
    min-height: 44px;
  }
  .return-form textarea {
    font-size: 16px;
  }

  /*
   * Account sidebar menu (module/account.tpl, .box-category box — rendered on
   * every account/* page except the dashboard itself, which uses its own tile
   * grid instead). Each <li> is a comfortable 40px row, but the <a> inside is
   * a shrink-to-fit text link (~20px tall) — most of the row's height/width
   * isn't part of the clickable element. Make the link fill its row.
   */
  .box-category > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * Dashboard tiles (#content .content ul div, account.tpl inline <style>,
   * dashboard-only selector): <a> wraps a float:left icon + text, same
   * float/non-BFC-parent clash as .htabs/.product-filter elsewhere in this
   * file — the anchor's own box (and hence its real click area) collapses to
   * just the text line, excluding the 64x64 icon floated above it. flow-root
   * gives the anchor a new BFC so it grows to contain the icon too, turning
   * the whole tile into one continuous touch target.
   */
  #content .content ul div a {
    display: flow-root;
    min-height: 44px;
  }

  /*
   * Wishlist row actions (account/wishlist.tpl "add to cart"/"remove" glyphs) —
   * same invisible-padding + negative-margin technique as the mini-cart remove
   * icon in A.4 (min-width/height would stretch the replaced <img> itself).
   * Only the <img> gets the treatment, not the <a> wrapping the remove icon —
   * padding both would double up and misalign (the img's own negative margin
   * already expands its effective hit area within the anchor).
   */
  .wishlist-info .action img {
    display: inline-block;
    padding: 14px;
    margin: -14px;
    box-sizing: content-box;
  }

  /*
   * A.8 (contact.html, information/contact.tpl): the actual feedback form —
   * name/email/subject <input>s have no font-size rule of their own in
   * stylesheet.v1.38.css (only .contact-i textarea and the shared
   * .button-small-purple submit are covered elsewhere), so they inherit the
   * browser default ~14px on mobile — iOS auto-zoom risk on focus. The
   * enquiry textarea is already 16px via a different legacy rule; listed
   * here anyway so all four fields read as one deliberate fix.
   */
  #content form input[name="name"],
  #content form input[name="email"],
  #content form input[name="subject"],
  #content form textarea[name="enquiry"] {
    font-size: 16px;
  }

  /*
   * A.8 (predmet.html, information/predmet.tpl "Расчёт стоимости" form) —
   * table#predmet's own <input>s/textarea inherit the same ~14px default as
   * contact.html above (own OpenCart legacy table, not table.form/.contact-i
   * so neither existing rule reaches it), and the "Отправить" <button> has no
   * height rule at all (~37px). See the unscoped #predmet overflow-x fix
   * further down for the real page-overflow bug on this same table.
   */
  #predmet input,
  #predmet textarea {
    font-size: 16px;
  }

  .predmet-button {
    min-height: 44px;
  }

  /*
   * A.9 (blog listing, catalog/controller/record/blog.php -> record/blog.tpl):
   * "Подробнее→" excerpt links and the items-per-page <select> are styled by
   * image/seocms.css — a SeoCMS vendor-module CSS file that's regenerated by
   * the admin CSS editor (ascp_settings css_dir=image), not
   * stylesheet.v1.38.css. Same reasoning as elsewhere in this file: mirror
   * the fix here instead of hand-editing a file the admin panel can silently
   * overwrite. a.seocms_further has no height of its own (~14px, just its
   * 0.8em text line, float:right); select.form-control is ~28px. Scoped to
   * .seocmspro_content (the shared blog/article content wrapper, confirmed
   * present on both the listing and single-record templates) so this doesn't
   * touch .form-control elsewhere (admin panel reuses the same class name).
   */
  .seocmspro_content .seocms_further {
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }

  .seocmspro_content select.form-control {
    min-height: 44px;
  }

  /*
   * A.10 originally block-ified every footer link here (#nav-bottom,
   * #nav-bottom-two, .pvz, .webmaster, #copy, .logo — legacy ~17px text
   * lines). Фаза 3.1 (footer.css) rebuilt the footer markup: #nav-bottom-two
   * and .webmaster no longer exist (grep-confirmed 0 matches), and
   * #nav-bottom/.pvz/#copy tap-target sizing now lives in footer.css
   * (`.ftr-list a, #nav-bottom a`, `#copy a` — same 44px rule, unscoped to
   * all widths). Only .logo a has no equivalent there, so it's the one
   * survivor.
   */
  footer .logo a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * A.4 flagged these as footer's own copy of the header's Telegram/WhatsApp
   * pseudo-links (footer.tpl:7, same .hidden-link/data-link click handler as
   * header, common.v1.02.js) but explicitly left them for A.10 ("footer тоже
   * использует класс .info-contact... вне периметра A.4"). Unlike header's
   * icon-only glyphs (which needed min-width too), footer's spans already
   * carry visible text ("@lightphotos", "+7 (495)...") wider than 44px — only
   * the 17px height needs raising.
   */
  footer .info-contact span.hidden-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * A.1 (home, module/latest.tpl + module/bestseller.tpl — "Новинки"/"Самые
   * продаваемые товары" owl-carousels): "В корзину" is button.button-big-
   * dark-blue{height:40px}, a class also shared by category/search/product
   * listings elsewhere — those are already covered by the more specific
   * .product-list button{min-height:44px} rule above (A.2), which doesn't
   * reach these two home carousels (different wrapper, .box-product, not
   * .product-list). Scoped to .box-product rather than the bare class
   * sitewide, same reasoning as A.4/A.6 did for other shared small-CTA
   * classes. The carousel itself (#owl-latest/#owl-bestseller,
   * .owl-carousel{overflow:hidden}) already clips its own off-screen slides
   * cleanly — confirmed no page-level horizontal scroll at 320/414 with the
   * legacy owl.owlCarousel({items:4}) config untouched (out of scope, block C).
   */
  .box-product .button-big-dark-blue {
    height: auto;
    min-height: 44px;
  }
}

/*
 * ---- Pre-existing bug fix, intentionally NOT media-scoped ----
 * .pagination-bottom{width:745px} (stylesheet.v1.38.css) predates the
 * .cat-layout CSS-grid refactor (assets/css/product-filter.css, off-limits).
 * On any category page with a facet sidebar, .cat-layout__main's grid column
 * is ~688-708px — narrower than the hardcoded 745px — so this already
 * overflowed at desktop widths (confirmed reproducible with this whole file
 * disabled, e.g. right at 1024px). Unrelated to viewport/mobile-first work;
 * fixing it here since a fixed px width is strictly worse than 100% in any
 * container context.
 */
.pagination-bottom {
  width: 100%;
}

/*
 * ---- Pre-existing bug fix, intentionally NOT media-scoped ----
 * account/wishlist.tpl renders a plain 6-column <table> (image/name/model/
 * stock/price/action) with no width constraints of its own — at 320-414px it
 * measures ~420px, well past its container, and .wishlist-info has no
 * overflow handling so it's a genuine page-level horizontal scroll (not a
 * hidden one like .login-content below). Per brief: wrap legacy tables in a
 * scroll container rather than rebuilding as cards ("перенос вида, не
 * редизайн"). Unscoped like .pagination-bottom above — overflow-x:auto is a
 * pure safety net, inert at 1024/1440 where the table already fits.
 */
.wishlist-info {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * ---- Pre-existing bug fix, intentionally NOT media-scoped ----
 * A.8: #content h1/p/li (information/*.tpl and every other template sharing
 * the same #content wrapper — confirmed on confidential.html and, as a side
 * effect, product/manufacturer's manufacturers.html) has no overflow-wrap.
 * A single long word that doesn't fit the ~296px content box at 320-375px
 * (e.g. confidential.html's own h1 "Политика конфиденциальности" — the word
 * "конфиденциальности" alone measures 322px at the h1's 32px font-size)
 * isn't squeezed or wrapped, it's silently CLIPPED by the html{overflow-x:
 * hidden} safety net above — confirmed visually via screenshot, the last
 * letters are cut off at the viewport edge, not just present-but-scrolled.
 * overflow-wrap only engages when a word doesn't fit, so this is inert on
 * every page/width where text already fits, including desktop.
 */
#content h1,
#content p,
#content li {
  overflow-wrap: anywhere;
}

/*
 * ---- Pre-existing bug fix, intentionally NOT media-scoped ----
 * A.8 (predmet.html, information/predmet.tpl): table#predmet has an inline
 * style="width:500px" — real page-level overflow on any viewport narrower
 * than ~500px+padding (confirmed scrollWidth 512px in a 320px viewport).
 * Per brief: wrap legacy tables in a horizontal scroll container rather than
 * squeezing them into cards. display:block turns the <table> itself into the
 * scroll container (rows/cells keep their table rendering via the UA
 * stylesheet) — max-width:100% caps the visible box while the inline
 * width:500px keeps the table's own content at its natural layout, so it
 * scrolls instead of being clipped or squeezed unreadable. Inert at
 * 1024/1440 where 500px already fits its container.
 */
#predmet {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Phone-density fixes: tighter grids, background separators ---- */
@media (max-width: 767px) {
  .category-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--space-3, 12px);
  }

  .category-list ul li {
    float: none;
    width: auto;
    margin-right: 0;
  }

  /*
   * Login page (account/login.tpl) two-column "new customer / returning
   * customer" layout: .left/.right are float:left/right at width:48% — never
   * stacks, just squeezes. Below ~460px the squeezed column can't fit its own
   * heading text ("Зарегистрированный клиент") at 48%, so .login-content's
   * own overflow:auto (not visible, not hidden) traps a REAL horizontal
   * overflow (confirmed scrollWidth 392px in a 296px box at 320px) — nobody
   * scrolls a form column sideways, so part of the heading is effectively
   * invisible. Gone by 768px (48% column is wide enough there), hence the
   * phone-only breakpoint rather than the 1023px structural block above.
   */
  .login-content .left,
  .login-content .right {
    float: none;
    width: 100%;
  }

  /*
   * table.form (register/edit-account/change-password/address-book) — see
   * the ≤1023px block above for the touch/font-size half of this fix. The
   * fixed 150px label column + fixed 200px inputs (stylesheet.v1.38.css)
   * need >=350px to lay out side by side; confirmed real page-level overflow
   * on register (table 315px/462px scrollWidth) and address-book (440px) at
   * 320px, gone by 768px (744px container). Stack label above input instead
   * of shrinking either fixed dimension.
   */
  table.form,
  table.form tbody,
  table.form tr {
    display: block;
    width: 100%;
  }

  table.form td {
    display: block;
    width: 100% !important;
    padding: 4px 0;
    box-sizing: border-box;
  }

  table.form input[type="text"],
  table.form input[type="password"],
  table.form input[type="email"],
  table.form select,
  table.form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}