/* I18N-001: Fix FR "Ajouter au panier" button truncation */
.amtheme-tabs-widget .product-item .action.tocart,
.products-grid .product-item .actions-primary .action.tocart {
    font-size: 13px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* MOB-001: Fix banner slider overflow on mobile */
@media (max-width: 767px) {
    .ambanner-slider-block {
        overflow: hidden;
        max-width: 100vw;
    }
    .ambanner-slider-block .ambanner-image-block,
    .ambanner-slider-block .ambanner-image {
        max-width: 100%;
    }

    /* MOB-002: Touch targets minimum 44x44px */
    .ammenu-button.-hamburger {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .amsearch-button.-loupe {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .action.showcart {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* CAT-001: Collapse empty CMS block containers */
.category-cms:empty {
    display: none;
}

/* MOB-003 / CWV-001b (revised 2026-06-09): Position the Google Customer Reviews
   badge bottom-right, ABOVE the back-to-top button (Ipatio/BackToTop).

   REGRESSION FIX: the prior CWV-001b rule force-sized the badge container AND its
   iframe to 88x64 with overflow:hidden, intending to clip an "expanded teaser". But
   Google's merchantverse badge is 300x150 and now renders directly at that size (no
   teaser/collapse), so the clamp only sliced ~70% of the badge off (showed a
   "...n Google" sliver with the icon cut). CLS is already handled by the idle-deferred
   load (google-reviews/badge-deferred.phtml, CWV-001a) — the badge appears at its
   final size => ~0 layout shift (measured 0.005) — so the size clamp was pure
   breakage. Removed it; let Google render its natural 300x150. */
div[id^="___ratingbadge_"] {
    position: fixed !important;
    /* Google renders a compact ~86px icon badge here on BOTH breakpoints. right:6 puts
       the visible Google icon (sits ~34px in from the container's right edge) over the
       53px back-to-top button's center (14 + 26.5 ≈ 40.5px from the right) on mobile AND
       desktop — one value, no per-breakpoint override. */
    right: 6px !important;
    bottom: 80px !important;      /* sits above the 53px back-to-top button (button top edge at 69px) */
    z-index: 997 !important;      /* above JetTheme product cards (z:996), below modals (999); hidden during minicart/modal (rule below) */
}

/* Hide the floating badge + back-to-top while the minicart or a Magento modal is open.
   The minicart panel is z:110 — BELOW the floats (997/998) — so it can't cover them by
   stacking; hiding is the only correct fix. (Floats sit above product cards z:996 but the
   minicart/modal must win, so they're hidden, not merely under-stacked.) */
body:has(.minicart-wrapper.active) div[id^="___ratingbadge_"],
body:has(.minicart-wrapper.active) .amtheme-backtotop-wrap,
html._has-modal div[id^="___ratingbadge_"],
html._has-modal .amtheme-backtotop-wrap {
    display: none !important;
}

/* LIGHTBOX-001 (2026-09-30): the Crisp chat launcher is z-index 1000001, above the product
   image lightbox (fancyBox, z 99992), so on phones it sat on the image caption. fancyBox puts
   .fancybox-active on <body> while it is open; the badge and back-to-top are already under it. */
body.fancybox-active .crisp-client {
    display: none !important;
}

/* CWV-007 (2026-09-23): no Google reviews badge on phones. Measured on a mobile PDP with
   Playwright: the fixed-position badge iframe renders 150px tall, collapses to 64px and
   shifts again ~6s in = 0.26 of the page's 0.37 CLS, on every page type (mobile field CLS
   p75 had risen to 0.30, "poor"). The badge is optional for Google Customer Reviews (the
   opt-in survey on the success page is what matters); desktop keeps it (~0.005 CLS). */
@media (max-width: 767px) {
    div[id^="___ratingbadge_"] {
        display: none !important;
    }
}

/* PRINT-002: floating, screen-only widgets must not appear in printed pages */
@media print {
    div[id^="___ratingbadge_"],   /* Google reviews badge */
    .amtheme-backtotop-wrap,       /* back-to-top button */
    .crisp-client {                /* Crisp chat launcher container */
        display: none !important;
    }
}

/* SOCIAL-001: official X branding for the Amasty Social Login "Twitter" button.
   Amasty ships the legacy blue bird (vendor _variables.less @amsl-twitter-icon__background).
   This swaps it for the black-button + white-X mark.
   NOTE: the X login button is currently DISABLED (amsociallogin/twitter/enabled=0) because the
   credentials were an OAuth 2.0 Client ID pasted into the OAuth 1.0a API Key field, and X's
   API tier likely gates this flow — see CLAUDE.md. So this rule is a NO-OP until X login is
   re-enabled; kept in source so the branding is correct if/when that happens. (2026-06-24) */
.amsl-button.-twitter { background: #000 !important; }
.amsl-button.-twitter:hover { background: #222 !important; }
.amsl-button.-twitter .amsl-social-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguMjQ0IDIuMjVoMy4zMDhsLTcuMjI3IDguMjYgOC41MDIgMTEuMjRIMTYuMTdsLTUuMjE0LTYuODE3TDQuOTkgMjEuNzVIMS42OGw3LjczLTguODM1TDEuMjU0IDIuMjVIOC4wOGw0LjcxMyA2LjIzMXptLTEuMTYxIDE3LjUyaDEuODMzTDcuMDg0IDQuMTI2SDUuMTE3eiIvPjwvc3ZnPg==") !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* SOCIAL-002: blank Google / Facebook squares under the empty cart and on the login page.
   JetTheme's generic `button { padding: 15px 35px }` also pads the icon-only social buttons, so a
   70 px button keeps a 0 px content box and the logo (a background on the full-size inner span)
   has no room. The popup copies already reset the padding. (2026-09-29) */
.amsl-button-wrapper:not(.with-label) .amsl-button:not(.-clear) {
    padding: 0;
}

/* SEO-HOME-H1: real H1 on the CMS home page, visually hidden (accessible + crawlable, no layout change) */
.page-title-wrapper.ipatio-home-h1,
.cms-index-index .page-title-wrapper.ipatio-home-h1 .page-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* CWV-005: the hero <img> now carries intrinsic width/height (template override), so the browser reserves the
   correct box per served image. No container aspect-ratio: Amasty picks desktop (3:1) vs mobile (1:1) art by
   server-side UA, not viewport width, so a fixed ratio mis-reserves for narrow desktop-UA viewports. */
.ambanner-slider-block .ambanner-image { width: 100%; height: auto; }

/* BLOG-001: make an incomplete final row of the blog listing grid read as deliberate.
   Amasty's grid is flex with fixed-width items (31% at >=1024px, 47% at >=768px), so when the post
   count is not a multiple of the column count the leftovers sit flush left and the empty cells to
   their right look like missing cards (reported 2026-09-14). Centring the orphan row keeps every
   card the same size; stretching the leftovers instead would blow a lone card up to full width and
   distort its 3:2 thumbnail.
   Inert whenever the last row is already full, so it costs nothing at counts divisible by 3 (or 2).
   Scope: blog LISTING pages only (index/category/tag/search). :not(.amblog-index-post) keeps
   post-page related-product grids out, and `.column.main >` plus the child combinator keep the
   featured slick sliders out (.slick-slide .amblog-item is never a direct child of the list).
   A grid with only one row is left flush left (:not(:first-child)) — a lone centred card on an
   otherwise empty result page reads as a bug rather than a finish. */

/* 3-up grid. Matches the vendor's own `min-width:1024px, print` so printing stays 3-up too. */
@media all and (min-width: 1024px), print {
    /* count % 3 == 1 -> the last card is alone on its row */
    body[class*="amblog-index-"]:not(.amblog-index-post) .column.main > .amblog-grid-list > .amblog-item:last-child:nth-child(3n+1):not(:first-child) {
        margin-left: auto;
        margin-right: auto;
    }
    /* count % 3 == 2 -> the last two cards share the row; keep the 3% gutter between them */
    body[class*="amblog-index-"]:not(.amblog-index-post) .column.main > .amblog-grid-list > .amblog-item:nth-last-child(2):nth-child(3n+1):not(:first-child) {
        margin-left: auto;
    }
    body[class*="amblog-index-"]:not(.amblog-index-post) .column.main > .amblog-grid-list > .amblog-item:nth-last-child(2):nth-child(3n+1):not(:first-child) + .amblog-item {
        margin-right: auto;
    }
}

/* 2-up grid (tablet). Bounded above so it never fights the 3-up rules, and excludes print. */
@media all and (min-width: 768px) and (max-width: 1023px) {
    /* count % 2 == 1 -> the last card is alone on its row */
    body[class*="amblog-index-"]:not(.amblog-index-post) .column.main > .amblog-grid-list > .amblog-item:last-child:nth-child(2n+1):not(:first-child) {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================================
   OOS-001 — out-of-stock buy box (organic growth plan Phase 2 / WS6a, 2026-09-21)
   JetTheme renders nothing in .box-tocart for a non-saleable product. Ipatio_JetThemeFix now renders
   an explicit message + the back-in-stock alert as a primary button in that slot
   (templates product/view/addtocart.phtml + product/alert/stock.phtml). The button reuses JetTheme's
   .action.primary colours; the rules below only size and space it (44px touch target, full width on
   phones) and style the message. The theme-moved alert copy at the bottom of the column prints nothing.
   ========================================================================== */
.box-tocart.ipatio-oos {
    margin: 0 0 20px;
}
.box-tocart.ipatio-oos .ipatio-oos__message {
    margin: 0 0 12px;
}
.box-tocart.ipatio-oos .ipatio-oos__label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #c62828;
}
.box-tocart.ipatio-oos .ipatio-oos__hint {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #555;
}
.product.alert.stock.ipatio-stock-alert {
    margin: 0;
}
.product.alert.stock.ipatio-stock-alert .ipatio-stock-alert__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    text-decoration: none;
}
.product.alert.stock.ipatio-stock-alert .ipatio-stock-alert__note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}
@media (max-width: 767px) {
    .product.alert.stock.ipatio-stock-alert .ipatio-stock-alert__button {
        width: 100%;
    }
}

/* CHIP-001 (2026-09-22): close the gap between a quick-filter chip block and the category title.
   Measured on the gazebo page at 390 px: 95 px of empty space, none of it the block's own margin —
   that one collapses away. It is `.category-view .page-main` (40 px bottom) + `.category-view`
   (15 px bottom) + `.wrapper-description` (20 px top margin + 20 px top padding). Scoped with :has()
   to pages that actually carry a chip block, so every other category keeps the theme's spacing. */
body:has(.ipatio-size-links) .category-view > .page-main {
    margin-bottom: 10px;
}
body:has(.ipatio-size-links) .category-view {
    margin-bottom: 6px;
}
body:has(.ipatio-size-links) .wrapper-description {
    margin-top: 6px;
    padding-top: 6px;
}

/* CHK-TAX-001 (2026-09-29): checkout order summary tax lines. JetTheme collapses the breakdown with
   `.totals-tax-summary + .totals-tax-details:not(.shown)`; `+` reaches only the first rate, so in
   two-tax provinces (QC GST + QST, BC, MB, SK) the collapsed summary hid GST while the second rate
   stayed visible under "Tax". `~` collapses and styles every rate line alike; the last line keeps
   JetTheme's 20px gap before the order total. */
.opc-block-summary .table-totals .totals-tax-summary ~ .totals-tax-details:not(.shown) {
    display: none;
}
.opc-block-summary .table-totals .totals-tax-summary ~ .totals-tax-details > .mark,
.opc-block-summary .table-totals .totals-tax-summary ~ .totals-tax-details > .amount {
    color: #4a4948;
    padding-top: 5px;
    padding-bottom: 20px;
}
.opc-block-summary .table-totals .totals-tax-summary ~ .totals-tax-details > .amount {
    padding-right: 43px;
    padding-inline-end: 43px;
}
.opc-block-summary .table-totals .totals-tax-details:has(+ .totals-tax-details) > .mark,
.opc-block-summary .table-totals .totals-tax-details:has(+ .totals-tax-details) > .amount {
    padding-bottom: 0;
}

/* SEARCH-MOB-001 (2026-09-30): on phones the search popup shows the product cards first. Amasty Xsearch
   puts the other sections (FAQ, categories, ideas, brands, recent searches) before the products in one
   flex container; from 768px they sit side by side, below it they wrapped with products last, starting
   ~1,100px down. Visual order only: the markup and the desktop layout are unchanged. */
@media (max-width: 767.98px) {
    .amsearch-result-section > .amsearch-products-section {
        order: -1;
    }
}

/* CAT-002 (owner-approved 2026-10-01): two compact product cards per row on phones. JetTheme's
   products_per_line_mobile = 2 becomes .-col-sm-2, which only applies from its "sm" breakpoint up, so a
   360-430 px phone listed one card per screen (gazebos: 24 products = 19,984 px). Short description and
   the empty review line are hidden on phone cards; names wrap to three lines. */
@media (max-width: 639px) {
    .products-grid .product-items.-col-sm-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin: 0 !important; }
    .products-grid .product-items.-col-sm-2 > .product-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .products-grid .product-items.-col-sm-2 .product-item-info { padding: 6px !important; height: 100%; display: flex; flex-direction: column; }
    .products-grid .product-items.-col-sm-2 .product-item-details { padding: 8px 2px 0 !important; flex: 1 1 auto; }
    .products-grid .product-items.-col-sm-2 .hover-images-slider,
    .products-grid .product-items.-col-sm-2 .product-item-description,
    .products-grid .product-items.-col-sm-2 .product-reviews-summary.empty { display: none !important; }
    .products-grid .product-items.-col-sm-2 .product-item-name { font-size: 14px !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
    .products-grid .product-items.-col-sm-2 .product-item-link { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; }
    .products-grid .product-items.-col-sm-2 .price-box { margin: 0 0 8px !important; }
    .products-grid .product-items.-col-sm-2 .price-box .price { font-size: 16px !important; }
    .products-grid .product-items.-col-sm-2 .old-price .price { font-size: 12px !important; }
    .products-grid .product-items.-col-sm-2 .action.tocart { padding: 10px 4px !important; font-size: 13px !important; min-height: 44px; width: 100%; }
    .products-grid .product-items.-col-sm-2 .amtheme-icons-position { bottom: 4px !important; }
}

/* PDP-BUY-001 (owner-approved 2026-10-01): price first in the buy box (it sat below quantity and the
   shipping note), a smaller brand logo, and no "Be the first to review" line while a product has none.
   The free-shipping / returns box is Ipatio_UiUxFix::product/view/trust.phtml. */
.catalog-product-view .amtheme-add-form-bottom { display: flex; flex-direction: column; }
.catalog-product-view .amtheme-add-form-bottom > .product-info-price { order: -1; margin: 0 0 14px; }
.catalog-product-view .page-title-wrapper .amshopby-option-link img { max-height: 40px; width: auto; }
.catalog-product-view .amtheme-short-info .product-reviews-summary.empty { display: none; }

/* COOKIE-001 (owner-approved 2026-10-01): compact cookie bar on phones — it covered ~40 % of the screen.
   Same wording and choices; buttons side by side. */
@media (max-width: 767px) {
    .amgdprcookie-bar-container, .amgdprcookie-bar-template { padding: 10px 12px !important; }
    .amgdprcookie-bar-container h2, .amgdprcookie-bar-template h2 { font-size: 15px !important; margin: 0 0 2px !important; }
    .amgdprcookie-bar-container .amgdprcookie-policy, .amgdprcookie-bar-template .amgdprcookie-policy { font-size: 12.5px !important; line-height: 1.35 !important; max-height: none !important; }
    .amgdprcookie-bar-container .amgdprcookie-buttons-block, .amgdprcookie-bar-template .amgdprcookie-buttons-block { display: flex !important; flex-direction: row !important; gap: 8px !important; margin-top: 10px !important; }
    .amgdprcookie-bar-container .amgdprcookie-button, .amgdprcookie-bar-template .amgdprcookie-button { flex: 1 1 0 !important; margin: 0 !important; padding: 10px 6px !important; font-size: 13px !important; min-height: 44px; }
}

/* TOKENS-001 (owner-approved 2026-10-01): contrast. JetTheme's colour scheme gave white text on the orange
   primary buttons (2.1:1) and on the green tab pills (2.6:1), purple links (#6b26fd, off-palette) and
   error / notice / success messages whose text colour equals their background (invisible). Values follow
   .claude/skills/ui-ux-audit/references/block-design-system.md: ink #1d1b19 on orange 8.1:1, links #9a5600
   (5.7:1 on white). The rules restate JetTheme's own selectors, so only elements that took the theme
   default change. */
a, a:visited, .alink, .alink:visited { color: #9a5600; }
a:hover, a:focus, .alink:hover { color: #7a4400; }
.action.primary, .action.primary:visited, button.action.primary, .action.tocart, #product-addtocart-button,
.action.primary:hover, .action.tocart:hover, #product-addtocart-button:hover { color: #1d1b19 !important; }
.action.primary span, .action.tocart span, #product-addtocart-button span { color: #1d1b19 !important; }
.action.secondary, button.action.secondary, .action.secondary:hover { color: #1d1b19 !important; }
.amtheme-tabs-buttons .amtheme-title.-am-active .title { color: #1d1b19 !important; }
.message.error, .message-error { color: #8a1c1c !important; }
.message.warning, .message.notice, .message-warning, .message-notice { color: #5c4400 !important; }
.message.success, .message-success { color: #2f5a12 !important; }
.amgdprcookie-bar-container a, .amgdprcookie-bar-template a { color: #9a5600 !important; }
/* PDP-TRUST-001: the trust box renders inside JetTheme's (unused) Amazon Pay container, which drew a grey frame. */
.amtheme-amazon-product { background: none !important; padding: 0 !important; }