/* 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; }
    /* COOKIE-004: Amasty's close button is a 66 x 65 px box over the first lines of text — 44 x 44 px (tap size) + text padding */
    .amgdprcookie-bar-container .action-close { width: 44px !important; height: 44px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }
    .amgdprcookie-bar-container .amgdprcookie-policy { padding-right: 34px !important; }
}
/* COOKIE-003 (owner, 2026-10-03): the bar was 305 px tall on desktop (a third of a laptop screen) — text capped
   at 640 px with three 18 px buttons centred under it. From 1024 px the text sits left and the buttons right
   (Accept on top, Settings / Reject side by side): 128-145 px at 1280 px and wider, 189 px for French at 1024.
   Tablets keep text above buttons, in the same compact sizes. The 72 px side padding keeps Amasty's close
   button (absolute, 10 px from the right edge) clear of the buttons and text at every width. */
@media (min-width: 768px) {
    body .amgdprcookie-bar-container { padding: 16px 72px !important; }
    body .amgdprcookie-bar-container > div { flex: 1 1 auto; max-width: 1180px; }
    body .amgdprcookie-bar-container .amgdprcookie-bar-block { width: auto !important; }
    body .amgdprcookie-bar-container h2 { font-size: 18px !important; margin: 0 0 6px !important; }
    body .amgdprcookie-bar-container .amgdprcookie-policy { max-width: none !important; margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; }
    body .amgdprcookie-bar-container .amgdprcookie-buttons-block { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; margin: 12px 0 0 !important; }
    body .amgdprcookie-bar-container .amgdprcookie-button { margin: 0 !important; padding: 10px 18px !important; font-size: 14px !important; min-height: 44px; white-space: nowrap; }
}
@media (min-width: 1024px) {
    body .amgdprcookie-bar-container .amgdprcookie-bar-block { display: flex !important; align-items: center; gap: 32px; }
    body .amgdprcookie-bar-container .amgdprcookie-policy { flex: 1 1 auto; }
    body .amgdprcookie-bar-container .amgdprcookie-buttons-block { flex: 0 0 auto; display: grid !important; grid-template-columns: auto auto; margin: 0 !important; }
    body .amgdprcookie-bar-container .amgdprcookie-button.-allow { grid-column: 1 / -1; }
}
/* COOKIE-004 (owner, 2026-10-03): Amasty GDPR Cookie's settings dialog and its cookie list ("More information").
   Settings: white dialog, one card per group (design-system card surface), ink text, site link colour, green
   toggles (#527316 on / #6b6963 off, >= 3:1); the locked Essential toggle shows ON (half opacity) instead of
   Amasty's pale grey that read as off; keyboard ring on the toggles; ink on the orange button (was white, 2.1:1).
   Layout: the dialog is a flex column, so title and button stay put and only the group list scrolls (Amasty
   caps it at 500 px — on a phone the list and the dialog both scrolled). Cookie list: readable table on desktop;
   on phones (<768 px) each cookie is a small card (name / provider, description, lifetime / type) instead of a
   5-column table crushed to letters, with the Done button kept in view. Texts: scripts/storefront/
   consent-dialog-content.php (CONSENT-002). */
/* Magento's modal moves focus to the close button when a dialog opens (needed: keyboard and screen-reader users
   start inside it), and Amasty rings .action-close on :focus, so every mouse / touch opening showed a highlighted
   close button. Ring on keyboard focus only (:focus-visible is false after a click or tap), in the site's style. */
body .amgdprcookie-groups-modal .action-close:focus:not(:focus-visible),
body .amgdprcookie-bar-container .action-close:focus:not(:focus-visible) { box-shadow: none !important; opacity: 1; }
body .amgdprcookie-groups-modal .action-close:focus-visible,
body .amgdprcookie-bar-container .action-close:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1b19 !important; }
body .amgdprcookie-groups-modal .modal-inner-wrap { background: #fff !important; border-radius: 18px; box-shadow: 0 20px 48px rgba(29,27,25,.18); }
body:has(.amgdprcookie-groups-modal._show) .crisp-client { display: none !important; }
body .amgdprcookie-cookie-settings-modal .modal-inner-wrap { max-width: 600px; display: flex; flex-direction: column; overflow: hidden !important; }
body .amgdprcookie-cookie-settings-modal .modal-header { flex: 0 0 auto; }
body .amgdprcookie-cookie-settings-modal .modal-content,
body .amgdprcookie-cookie-settings-modal .modal-component,
body .amgdprcookie-cookie-settings-modal .amgdprcookie-main-wrapper,
body .amgdprcookie-cookie-settings-modal .amgdprcookie-settings-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-form-container { flex: 1 1 auto; min-height: 0; max-height: none !important; }
body .amgdprcookie-groups-modal .modal-header { padding: 24px 64px 12px 24px !important; }
body .amgdprcookie-groups-modal .modal-header .amgdprcookie-description,
body .amgdprcookie-groups-modal .modal-header .modal-title { font-size: 22px !important; font-weight: 700 !important; line-height: 1.25; color: #1d1b19 !important; margin: 0 !important; }
body .amgdprcookie-groups-modal .modal-content { padding: 0 24px 24px !important; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-form-container { display: flex; flex-direction: column; gap: 12px; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container { margin: 0 !important; padding: 16px 18px !important; border: 1px solid #f3e9d8; border-radius: 18px; background: linear-gradient(180deg, #fffaf1 0%, #fff 72%); }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-header { align-items: center; gap: 16px; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie { flex: 0 0 50px; height: 29px; padding-left: 0 !important; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-caption { font-size: 17px !important; line-height: 1.3 !important; margin: 0 !important; color: #1d1b19 !important; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-text { font-size: 14px !important; line-height: 1.5 !important; color: #3d3a36 !important; margin: 8px 0 4px !important; }
body .amgdprcookie-cookie-settings-modal .amgdprcookie-text p { margin: 0; }
body .amgdprcookie-groups-modal .amgdprcookie-options { font-size: 14px !important; color: #9a5600 !important; text-decoration: underline; display: inline-block; padding: 4px 0; }
body .amgdprcookie-groups-modal .amgdprcookie-options:hover { color: #7a4400 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input + .amgdprcookie-label { background: #6b6963 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:checked + .amgdprcookie-label { background: #527316 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:checked + .amgdprcookie-label:after { left: 95% !important; transform: translateX(-100%) !important; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:disabled + .amgdprcookie-label { opacity: .5; cursor: default; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:focus + .amgdprcookie-label { box-shadow: none !important; }
body .amgdprcookie-groups-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:focus-visible + .amgdprcookie-label { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1b19 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-buttons-block.-settings { padding: 16px 0 0 !important; margin: 0 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-done { background-color: #ff9a02 !important; color: #1d1b19 !important; border-radius: 4px; font-size: 15px !important; letter-spacing: .08em !important; padding: 13px 24px !important; min-height: 48px; }
body .amgdprcookie-groups-modal .amgdprcookie-done:hover { background-color: #ffab2e !important; color: #1d1b19 !important; }
body .amgdprcookie-groups-modal .amgdprcookie-done:focus { background-color: #ffab2e !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1b19 !important; }
body .amgdprcookie-cookie-information-modal .modal-inner-wrap { max-width: 960px !important; min-width: 0 !important; }
body .amgdprcookie-cookie-information-modal .modal-content .amgdprcookie-description { font-size: 14px; line-height: 1.5; color: #3d3a36; margin: 0 0 12px; }
body .amgdprcookie-cookie-information-modal .amgdprcookie-description p { margin: 0; }
body .amgdprcookie-cookie-information-modal .amgdprcookie-title { font-size: 12px !important; font-weight: 700; letter-spacing: .06em; color: #6b6257 !important; padding: 8px 10px !important; border-bottom: 1px solid #eadfcd; }
body .amgdprcookie-cookie-information-modal .amgdprcookie-cell { font-size: 14px !important; line-height: 1.45; color: #1d1b19 !important; padding: 10px !important; vertical-align: top; }
body .amgdprcookie-cookie-information-modal .amgdprcookie-row { border-bottom: 1px solid #f3e9d8; }
body .amgdprcookie-cookie-information-modal .amgdprcookie-cell.-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px !important; }
@media (max-width: 767px) {
    /* iOS Safari: a fixed modal's 90 % includes the area under the floating bottom toolbar, so the button at the
       dialog's foot sat under it, out of reach. 100svh = the viewport with every browser bar shown. */
    body .amgdprcookie-groups-modal .modal-inner-wrap { border-radius: 0 0 18px 18px; max-height: 90%; max-height: calc(100svh - 24px); }
    body .amgdprcookie-cookie-information-modal .modal-inner-wrap { display: flex; flex-direction: column; overflow: hidden !important; }
    body .amgdprcookie-cookie-information-modal .modal-header { flex: 0 0 auto; }
    body .amgdprcookie-cookie-information-modal .modal-content,
    body .amgdprcookie-cookie-information-modal .modal-component { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    body .amgdprcookie-cookie-information-modal .modal-component > .amgdprcookie-main-wrapper { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    body .amgdprcookie-groups-modal .modal-header { padding: 20px 60px 10px 16px !important; }
    body .amgdprcookie-groups-modal .modal-header .amgdprcookie-description,
    body .amgdprcookie-groups-modal .modal-header .modal-title { font-size: 20px !important; }
    body .amgdprcookie-groups-modal .modal-content { padding: 0 16px 0 !important; }
    body .amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container { padding: 14px 14px !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-table thead { display: none !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-table { display: block !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-tbody { display: block !important; max-height: none !important; overflow: visible !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-row { display: grid !important; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; table-layout: auto !important; width: auto !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell { display: block !important; padding: 0 !important; width: auto !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell.-name { font-weight: 700; word-break: break-all; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell:nth-child(2),
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell:nth-child(5) { text-align: right; color: #6b6257 !important; font-size: 13px !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell.desc { grid-column: 1 / -1; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-cell.-lifetime { color: #6b6257 !important; font-size: 13px !important; }
    body .amgdprcookie-cookie-information-modal .amgdprcookie-buttons-block { flex: 0 0 auto; background: #fff; margin: 0 !important; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -10px 12px -10px rgba(29,27,25,.18); }
    /* the chat bubble sat on the bar's Accept button and on the dialogs' last lines */
    body:has(.amgdprcookie-bar-container._show) .crisp-client { display: none !important; }
}

/* 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; }
/* TOKENS-002 (2026-10-02, follows TOKENS-001): text buttons that still had white text on the secondary
   green (2.6:1) — review form "Send Review", FAQ "Back to Product", layered-nav Apply / Go, datepicker
   Done, the contact pages' chat button (plain <button> in a Page Builder HTML block). Targeted on purpose:
   a site-wide button{color} also recoloured icon buttons (Facebook sign-in 6.7 -> 2.5:1, slider dots).
   Amasty Custom Form painted its submit blue (#006bb4), where TOKENS-001's ink text gave 3.1:1: it is the
   site's orange primary now (hover as .action.primary). */
.review-form .action.submit, .am-back-to-product-widget .action.button, .amshopby-button, .am-filter-go,
.ui-datepicker .ui-datepicker-close, [data-content-type="html"] > button:not([class]) { color: #1d1b19 !important; }
.amform-form .action.primary, .amform-parent .action.primary { background: #ff9a02; }
.amform-form .action.primary:hover, .amform-parent .action.primary:hover { background: #ffb444; }
/* B2B-001 (2026-10-03): Amasty Company Account paints its .action.primary buttons blue (#3f6ad8, hover #1452f2,
   focus #1846be), where TOKENS-001's ink text gave 4.2 / 3.4 / 2.6 : 1. They become the site's orange primary,
   as TOKENS-002 did for Custom Form. Same for any payment-method toolbar button other than Place Order (Magento
   blue #006bb4 / #015690); One Step Checkout already paints Place Order (.action.checkout) orange. The body
   prefix outranks Amasty's own rules, also from styles-l.css, which loads after this file. */
body.amcompany-customer-account .page-main .action.primary,
body .checkout-payment-method .payment-methods .actions-toolbar .action.primary:not(.checkout) { background-color: #ff9a02; border-color: #ff9a02; }
body.amcompany-customer-account .page-main .action.primary:hover,
body.amcompany-customer-account .page-main .action.primary:focus,
body .checkout-payment-method .payment-methods .actions-toolbar .action.primary:not(.checkout):hover,
body .checkout-payment-method .payment-methods .actions-toolbar .action.primary:not(.checkout):focus { background-color: #ffb444; border-color: #ffb444; }
/* FOCUS-001 (2026-10-02): the homepage / category image cards set their own box-shadow, which replaced
   JetTheme's white + black focus ring, so a keyboard user saw no focus on them. Keyboard focus only. */
.ipatio-cat-card:focus-visible, a.ipatio-subcat-card:focus-visible, .ipatio-subcat-card a:focus-visible {
    outline: 3px solid #1d1b19; outline-offset: 3px;
}
/* PDP-PHOTO-001 (owner-approved 2026-10-02): JetTheme caps the product photo at 270 px below 640 px wide
   (the image file is 485 px), so a 412 px phone showed it at two thirds of the screen. Full width now;
   the image keeps its width/height attributes, so the box is reserved before it loads. */
@media (max-width: 639px) {
    .amtheme-product-wrap > .product.media { max-width: 100%; }
}
/* STICKY-001 (owner-approved 2026-10-02): JetTheme's "Horizontal Bar" sticky add-to-cart
   (amasty_jettheme/additional_elements/sticky_add_to_cart = horizontal) clones the whole buy box — promo
   banner, old price, shipping note — about 250 px on a phone. One row: price on the left, Buy on the right. */
.amsticky-cart-block .ambanners,
.amsticky-cart-block .old-price { display: none !important; }
.amsticky-cart-block .amtheme-add-form-bottom {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important; gap: 12px;
    max-width: 1200px; margin: 0 auto !important; padding: 8px 16px !important;
}
.amsticky-cart-block .product-info-price,
.amsticky-cart-block .product-options-bottom,
.amsticky-cart-block .box-tocart,
.amsticky-cart-block .price-box { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.amsticky-cart-block .product-info-price { flex: 1 1 auto !important; width: auto !important; text-align: left !important; }
.amsticky-cart-block .price-box { text-align: left !important; justify-content: flex-start !important; }
.amsticky-cart-block .product-options-bottom { flex: 0 0 auto !important; width: auto !important; }
.amsticky-cart-block .action.tocart { min-width: 150px; }
/* CARD-REVIEW-001 (owner-approved 2026-10-02): no "Be the first to review this product" line on product cards
   at any width (phones since CAT-002, the product page since PDP-BUY-001). */
.product-item .product-reviews-summary.empty { display: none !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; }
/* BRAND-001: brand slider as uniform logo tiles. The logos are normalised to one transparent 400x200 canvas at
   equal visual weight (scripts/storefront/brand-logo-normalize.py); each sits on a white 2:1 tile. Breakpoints:
   Ipatio_UiUxFix::amasty/shopbybrand/widget/brand-slider.phtml (3 / 4 / 5 tiles on phones / tablets). */
.am-widget-brand-slider .ambrands-slider-container { padding: 0 16px; }
.am-widget-brand-slider .ambrands-slider-container .splide.ambrands-slider { margin-top: 0; padding: 0 8px 32px; }
.am-widget-brand-slider .ambrands-slider-container .splide__track.ambrands-slider { margin-top: 0; padding: 8px 0; }
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .brand-splide-slide,
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link,
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand { height: auto; }
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link { width: 100%; }
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand {
  width: 100%; margin: 0; padding: 0 6px; box-sizing: border-box; }
/* min-height 0 + overflow: a lazy logo is a 1x1 placeholder until it loads, which would otherwise grow the tile square */
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand .ambrands-image-block {
  width: 100%; max-width: none; max-height: none; min-height: 0; flex: none; aspect-ratio: 2 / 1; overflow: hidden;
  box-sizing: border-box; padding: 6px 10px; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand .ambrands-image-block .ambrands-image {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (hover: hover) {
  .am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link:hover .ambrands-splide-brand .ambrands-image-block {
    border-color: #d4d4d4; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); }
}
@media (max-width: 767px) {
  .am-widget-brand-slider .ambrands-slider-container { padding: 0 6px; }
  .am-widget-brand-slider .ambrands-slider-container .splide.ambrands-slider { padding: 0 4px 30px; }
  .am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-widget-brand-slider .ambrands-slider-container .ambrands-slider .ambrands-slide-link .ambrands-splide-brand .ambrands-image-block {
    transition: none; transform: none !important; }
}
/* BRAND-003: pause / play button for the brand slider's autoplay (WCAG 2.2.2), at the right end of the dots row.
   44 px tap area around a 28 px white dot; Splide's own CSS shows .splide__toggle__pause while playing (is-active)
   and .splide__toggle__play while paused, so the svgs get no display rule here. */
.am-widget-brand-slider .ambrands-slider-container .splide.ambrands-slider { position: relative; }
/* Amasty lifts the dots 17 px above their row (position:relative; bottom:17px), 3 px under the tiles: back into the row,
   level with the button */
.am-widget-brand-slider .ambrands-slider-container .am-brand-splide-pagination .am-brand-splide-page { bottom: 0; }
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle,
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:hover,
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:active,
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:focus {
  position: absolute; right: 4px; bottom: -6px; z-index: 2; width: 44px; height: 44px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; outline: none;
  color: #4a4a4a; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; transform: none; }
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle__dot {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 1px solid #d4d4d4; transition: border-color .2s ease, color .2s ease; }
@media (hover: hover) {
  .am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:hover { color: #1d1b19; }
  .am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:hover .ipatio-brand-toggle__dot { border-color: #9a9a9a; }
}
.am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle:focus-visible .ipatio-brand-toggle__dot {
  outline: 3px solid #1d1b19; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .am-widget-brand-slider .ambrands-slider-container .ipatio-brand-toggle__dot { transition: none; }
}

/* A11Y-002 (2026-10-02): WCAG 2.1 AA pass (scripts/storefront/a11y-audit.mjs). Contrast: JetTheme's secondary
   grey #a8a69f (2.3-2.4:1 — filter counts, breadcrumbs, copyright, "Out of stock", SKU, cart labels and table
   heads, review dates …) becomes #6b6963 (5.1-5.5:1) and its sale red #f23b3b (3.7-3.8:1) #c62828 (5.5-5.6:1).
   The selectors are JetTheme's own, generated from the compiled styles-m/-l.css, each with a "body" prefix:
   styles-l.css loads after this file, and one extra type selector outranks the theme's rule without
   outranking its :hover / :focus variants. Disabled controls keep the light grey (exempt, and it reads as
   disabled). */
body .abs-actions-addto-gridlist:hover:before,
body .table-comparison .wishlist.split.button>.action.split:hover:before,
body .product-items .wishlist.split.button>.action.split:hover:before,
body form .label>.label-addon,
body .pages .action:hover,
body .pages .link:hover,
body .breadcrumbs a,
body .breadcrumbs a:visited,
body .tax-included .old-price .price,
body .modal-custom .action-close:hover:before,
body .modal-popup .action-close:hover:before,
body .modal-slide .action-close:hover:before,
body .amshopby-flyout-block .items.amshopby-fly-out-view .item [class*='am-filter-item-']:hover>.count,
body .wishlist.split.button .action.toggle:hover:after,
body .wishlist.split.button .action.toggle.active:hover:after,
body .table-comparison .wishlist.split.button>.action:active,
body .product-items .wishlist.split.button>.action:active,
body .table-comparison .wishlist.split.button>.action:focus,
body .product-items .wishlist.split.button>.action:focus,
body .table-comparison .wishlist.split.button>.action:hover,
body .product-items .wishlist.split.button>.action:hover,
body .product-item .stock.unavailable,
body .amtheme-comparsion-table .stock.unavailable,
body .amtheme-product-info .product-info-stock-sku,
body .amtheme-product-info .product.attribute.sku,
body .block.block-minicart .block-title .items-total,
body .opc-progress-bar>.opc-progress-bar-item,
body .authentication-wrapper>.amtheme-label,
body .opc-wrapper .shipping-information .action-edit,
body .cart .item-actions .action-delete,
body .amtheme-shipping-method .amtheme-method .amtheme-description,
body .file-uploader-meta,
body .amtheme-product-info .table.grouped .stock.unavailable,
body .filter-options .count,
body .amtheme-shipping-methods .amtheme-description,
body .review-list .review-date,
body .review-list .review-author,
body .copyright,
body .amtheme-icon.-hover-bg:hover,
body .amtheme-icon.-hover-bg.-selected,
body .limiter .label,
body .limiter .limiter-label,
body .filter-content .items.-am-multiselect [class*='am-filter-item']:hover .count,
body .amtheme-gift-options .title,
body .amtheme-gift-content .amtheme-gift-summary .action,
body .cart.item .amtheme-label-small,
body .block.filter .filter-clear,
body .cart.items>thead>tr>th,
body .amshopby-filter-current .amshopby-filter-value,
body .amshopby-filter-current .amshopby-filter-value .am-shopby-swatch-label,
body .opc-progress-bar>.opc-progress-bar-item:before { color: #6b6963; }
body .price-box>.minimal-price-link .price-wrapper,
body .special-price .price,
body .price-box.-am-special-price .normal-price .price-label+.price-wrapper>.price,
body .normal-price .price,
body .map-info-price .actual-price .price,
body .sidebar .product-item .price-box .special-price .price-wrapper.price-including-tax>.price,
body .column.main .block.widget.block-viewed-products-grid .product-item .price-box .special-price .price-wrapper.price-including-tax>.price,
body .block.block-minicart .product-info-price .special-price .price,
body .password-weak .password-strength-meter span { color: #c62828; }
body input::placeholder, body textarea::placeholder { color: #6b6963; opacity: 1; }
body .amtheme-select-block > .amtheme-placeholder, body .amtheme-select-block > .amtheme-placeholder > .amtheme-value:before { color: #6b6963; }
/* Layered navigation "Clear All": the green accent as text, 2.6:1 -> a darker green (5.5:1). */
body .block.filter .filter-actions .filter-clear { color: #527316; }
body .block.filter .filter-actions .filter-clear:hover, body .block.filter .filter-actions .filter-clear:focus { color: #3f5a10; }
/* Checkout order summary header on phones: white on the green bar, 2.6:1 (desktop draws it grey). */
body .amcheckout-step-container .amcheckout-summary-container .amcheckout-title { color: #1d1b19; }
body .amcheckout-step-container .amcheckout-summary-container .amcheckout-title > .amcheckout-icon { background: #1d1b19; }
/* Cookie bar: Amasty GDPR prints the configured orange (#FF9A02) / green hover (#86AF28) and leaves the text
   white, 2.1:1 / 2.6:1; the settings button's hover text is configured white on green. Ink on both. */
body .amgdprcookie-bar-container .amgdprcookie-button.-save, body .amgdprcookie-bar-container .amgdprcookie-button.-save:hover,
body .amgdprcookie-bar-container .amgdprcookie-button.-settings:hover { color: #1d1b19; }
/* Mega menu: Amasty writes the current category's colour inline (ammegamenu/color/current_category_color
   #ffffff), which is 2.6:1 on the green bar (#86af28, desktop bar and phone drawer). Ink 6.7:1 on the
   top level only: in the dark-green desktop submenus (#2E5902) the white stays right (8.3:1), and no single
   colour passes on both greens. Hover (-active) keeps Amasty's hover colour on its dark hover background. */
body .ammenu-items.-root > .ammenu-item > .ammenu-link.-current:not(.-active) { color: #1d1b19 !important; }
/* Checkout "Log in" (One Step Checkout modern layout): white on the secondary green, 2.6:1. */
body .am-checkout.-modern .authentication-wrapper .action-auth-toggle { color: #1d1b19; }
/* Focus: JetTheme draws a white + ink ring with box-shadow, but its own rules switch it off on these controls
   (search box and buttons, slider dots, qty +/-, product names in grids, Custom Form checkboxes, checkout
   "Log in", Place Order and field tooltips), so a keyboard user lost track there. Same ink, as an outline with a white
   halo so it shows on light and dark backgrounds; keyboard focus only (:focus-visible), except text inputs,
   where browsers show it on click too. */
.amsearch-button:focus-visible, .amsearch-input:focus-visible, .slick-dots li button:focus-visible,
.amtheme-minus:focus-visible, .amtheme-plus:focus-visible, input.qty:focus-visible, .product-item-link:focus-visible,
.amform-checkbox:focus-visible, .amform-radio:focus-visible, .action-auth-toggle:focus-visible,
.field-tooltip-action:focus-visible, [role="button"]:focus-visible, .ambanner-slider-dots button:focus-visible,
.action.primary:focus-visible {
    outline: 2px solid #1d1b19 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #fff !important;
}
/* Shop by Brand logo link beside the product title: the logo is floated inside an inline <a>, which collapses
   to 0x0, so its focus ring had nothing to go round. inline-block wraps the float; the layout is unchanged. */
.amshopby-option-link > a { display: inline-block; vertical-align: top; }
/* The sort control is a custom list over an invisible native <select>; the select takes the focus. */
.sorter-options.amtheme-select:focus-visible + .amtheme-select-block { outline: 2px solid #1d1b19; outline-offset: 2px; }
/* JetTheme popups are display:none until am-popup.js adds -amtheme-active, but the product page's review popup
   (a copy Amasty Advanced Review never opens: its own form sits in the reviews tab) is left display:flex at
   0 px height, so its 25 fields were invisible tab stops. Hidden content leaves the tab order. */
.amtheme-popup-block:not(.-amtheme-active) { visibility: hidden; }
/* Phone skip link (Ipatio_UiUxFix::skip-link.phtml): the theme's own one is in a header panel hidden on phones. */
a.ipatio-skip-link, a.ipatio-skip-link:visited {
    position: absolute; top: 8px; left: 8px; z-index: 100000; padding: 12px 16px; border-radius: 6px;
    background: #1d1b19; color: #fff; font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
a.ipatio-skip-link:focus { transform: none; color: #fff; outline: 2px solid #ff9a02; outline-offset: 2px; }
@media (min-width: 768px) { a.ipatio-skip-link { display: none; } }

/* HERO-005 (2026-10-02): hero slides 2+ out of the layout until slick starts (it adds .slick-initialized
   first thing). They are loading="lazy" but sat right under the first slide, inside Chrome's lazy-load
   distance, so their images (~175 KB on phones) downloaded with the first paint and competed with the hero
   image; nothing visible changes (they were clipped). */
.ambanner-slider-block:not(.slick-initialized) > .ambanner-item-block ~ .ambanner-item-block { display: none; }