/*
 * Listing-tile corrections for the "Buy on TKR Group NA" switcher button
 * (.tkr-na-switcher-form / .tkr-na-buy), which the theme LESS
 * (category-listings.less) styles identically to the native
 * .tocart.primary button but does not fully equalise.
 *
 * Shipped as a module asset (not theme LESS) because
 * web/css/source/category-listings.less exists as a separate, NOT
 * inherited, full copy in tkr-base-red, tkr-base-green and tkr-base-grey --
 * anything added there would need to be triplicated and needs a static
 * deploy per theme. These rules are additive corrections layered on top of
 * the existing theme colour/size styling for .tkr-na-buy, which is left
 * alone.
 */

/*
 * Fix 1 -- mobile label wrap ("BUY ON TKR" / "GROUP NA").
 *
 * At mobile widths the button is ~149px wide (2-column grid). The native
 * button label is "Add" and always fits on one line; ours is the much
 * longer "Buy on TKR Group NA" and wraps to two lines at the theme's
 * 14px font-size, making the button (and its tile) visibly taller than a
 * normal Add-to-Cart tile.
 *
 * Measured in a real browser (390x844, button clientWidth 149px): at
 * 14px/pad 10px 15px the label's natural (unwrapped) width is ~172.6px,
 * which does not fit. Reducing to 12px font-size and 10px horizontal
 * padding brings the natural width to ~142px, comfortably under 149px
 * (confirmed via the live DOM: scrollWidth === clientWidth once
 * white-space is forced to nowrap), so nowrap no longer clips the label --
 * it now renders resolved on one line.
 *
 * !important is required: category-listings.less styles this same button
 * via `button.action.tkr-na-buy.primary` (element + 3 classes), which is
 * MORE specific than a plain 3-class selector, so without !important the
 * theme rule silently wins and font-size/padding never apply (verified
 * live -- omitting !important left font-size at 14px and the label
 * overflowing the button once nowrap took effect).
 */
@media (max-width: 767px) {
    .product-item .tkr-na-switcher-form .tkr-na-buy {
        font-size: 12px !important;
        padding: 10px 10px !important;
        white-space: nowrap !important;
    }
}

/*
 * Fix 2 -- gated tile height vs normal tile height.
 *
 * Root cause identified by measuring both buttons' full box model: the
 * native .tocart button gets an extra ~4px of rendered height from
 * _extend.less's `button.action.tocart.primary span:before { content:
 * url(shopping.png); }` cart-icon glyph, which .tkr-na-buy never
 * receives (it has no icon). With identical padding/font/line-height
 * otherwise, that icon alone accounts for the .tocart button always
 * rendering ~4px taller than .tkr-na-buy (measured 41.5px vs 37.5px at
 * desktop). Because the grid uses a flex row that stretches items within
 * the SAME row to match, this is invisible when a gated and a normal tile
 * share a row, but rows made up entirely of gated tiles render shorter
 * than rows containing a normal tile, making the grid ragged. The mobile
 * label wrap (Fix 1) compounded this further by adding a whole extra text
 * line (~17.5px) on top.
 *
 * Pin .tkr-na-buy to the native button's measured height (41.5px, stable
 * across breakpoints since the theme applies no responsive sizing to
 * .tocart) so every listing button -- gated or not -- renders the same
 * height regardless of which tiles happen to share a grid row.
 */
.product-item .tkr-na-switcher-form .tkr-na-buy {
    min-height: 41.5px;
}