/*
 * WebView mode styles
 * -------------------------------------------------------------------------
 * Active when <body> has the "webview-mode" class, set by
 * WebViewModeBeforeViewHandler when the session was authenticated via the
 * mobile app's WebView token (?wvt=...).
 *
 * Sub-variant "webview-mode-catalog" relaxes some restrictions so the
 * customer can browse categories without leaving the embedded flow.
 *
 * Two visibility utilities:
 *   - .hide-in-webview         → hidden in ALL webview modes
 *   - .hide-in-webview-cart    → hidden in cart/orders webview;
 *                                visible in catalog webview
 *
 * Strategy: keep CSS overrides MINIMAL. Trust the storefront's existing
 * responsive design (Bootstrap mobile breakpoints) — the WebView reports
 * a mobile viewport so those styles already apply naturally. We only
 * intervene to (a) hide escape routes, (b) kill desktop-only artifacts
 * that block the WebView (the gray overlay), and (c) fix things that
 * specifically don't work without intervention.
 *
 * Specificity: hide rules live at the END so they win !important ties.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 2. Kill desktop-only chrome and overlays that don't belong in the WebView.
 * ------------------------------------------------------------------------- */

/* Sidebar logo column (defined in pageWithoutLeftMenu / page templates). */
body.webview-mode #side-bar-container,
body.webview-mode .navigation-bar__container,
body.webview-mode #back-top {
    display: none !important;
}

/* The storefront's .wrapper__navigation.show creates a fullscreen gray
 * backdrop at z-index 1010 (saf-style-navigation-component.css:322-331) but
 * is disabled by an @media (max-width: 996px) rule. In catalog webview we
 * re-enable it (section 3a below) so the burger drawer has a proper
 * backdrop. Here we just make sure the default state stays hidden. */
body.webview-mode .wrapper__navigation {
    display: none;
}

/* Defensive: any Bootstrap modal-backdrop that may be added by collapse JS. */
body.webview-mode .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
}

/* The "add to cart" spinner has a 50% black background at z-index 999999;
 * make sure it stays hidden in the WebView (it should already be display:none
 * by default, but defensively enforce it). */
body.webview-mode #productAddCartSpinner {
    display: none !important;
}

/* The catalog "load more" infinite-scroll spinner (#productListSpinner,
 * rendered by productLister.tag:61 with the "Chargement des resultats,
 * veuillez patienter svp" message via text.e.liquid.loading).
 *
 * acc.productlisting.js:86 shows it when the waypoint at 80% of viewport
 * is crossed. In the narrow WebView the waypoint triggers almost
 * immediately, and the AJAX error handler (acc.productlisting.js:155)
 * forgets to call $('#productListSpinner').hide() — so if the background
 * /rechercher/results call fails (WebView session nuances / CORS) the
 * spinner stays forever on top of the product grid.
 *
 * Infinite-scroll loading of additional pages isn't useful inside the
 * WebView anyway, so hide the spinner outright. The initial page of
 * results renders normally. */
body.webview-mode #productListSpinner {
    display: none !important;
}

/* -------------------------------------------------------------------------
 * 4. Cart product link neutralizer.
 * ------------------------------------------------------------------------- */

body.webview-mode .disable-in-webview,
body.webview-mode a.disable-in-webview {
    pointer-events: none !important;
    cursor: default !important;
}

/* -------------------------------------------------------------------------
 * 5. Hide utilities — declared LAST so they win specificity ties.
 * ------------------------------------------------------------------------- */

body.webview-mode .hide-in-webview {
    display: none !important;
}

body.webview-mode:not(.webview-mode-catalog) .hide-in-webview-cart {
    display: none !important;
}

/* ASM (Assisted Service Module) toggle button and panel — never shown in
 * WebView. The agent session is already established via the wvt token
 * from the mobile app; the floating ASM UI is only relevant for agents
 * browsing the desktop storefront. */
body.webview-mode #asm_toggle,
body.webview-mode #_asm,
body.webview-mode .ASM_header,
body.webview-mode .ASM_session {
    display: none !important;
}

/* Header loyalty widget (.header-loyalty-widget) — the "Cagnotte" bonus
 * pill linking to /magasin/mon-compte/ma-fidelite. It's an account escape
 * route (and exposes the loyalty balance) that doesn't belong in the
 * embedded WebView flow, where the React Native shell owns account/loyalty
 * navigation. Hide it across all WebView modes. */
body.webview-mode .header-loyalty-widget {
    display: none !important;
}

/* Footer + pre-footer wrappers. The inner cms:pageSlot already carries
 * .hide-in-webview, but its parents (#footer / #pre-footer) still reserve
 * space and a container wrapper. Hide them entirely in WebView. */
body.webview-mode #footer,
body.webview-mode #pre-footer {
    display: none !important;
}

/* "Autres clients ont également acheté" cross-sell carousel.
 * Rendered via productcarouselcomponent.jsp inside a CMS Section5 slot
 * wrapped by #productCarousel-grid / #productCarousel-list /
 * #productCarousel-prod (depending on the page template). Hide the whole
 * block — wrapper, title (.title-section inside .scrollerProducRow) and
 * the carousel itself — in any WebView mode. */
body.webview-mode #productCarousel-grid,
body.webview-mode #productCarousel-list,
body.webview-mode #productCarousel-prod,
body.webview-mode .scrollerProducRow,
body.webview-mode .product-carousel {
    display: none !important;
}

/* Header — in cart/order mode the React Native shell provides the top bar,
 * so the entire Hybris header is useless weight (leaves a tall white strip
 * because the hidden children still occupy the row grid + wrapper padding).
 * Hide it outright in non-catalog WebView. */
body.webview-mode:not(.webview-mode-catalog) #header,
body.webview-mode:not(.webview-mode-catalog) .header-tablet-desktop {
    display: none !important;
}

/* The storefront reserves top margin/padding on content wrappers to
 * compensate for the fixed header that previously sat on top (see
 * saf-style-cart.css: .page-cartPage .container-wrapper { margin-top: 50px }
 * at <992px, and style.css: .fixed-margin-home-banners { padding-top: 50px }).
 * Now that the header is gone in cart/order WebView, that reserved space
 * just pushes the content down. Zero it out. */
body.webview-mode:not(.webview-mode-catalog) .container-wrapper,
body.webview-mode:not(.webview-mode-catalog) .fixed-margin-home,
body.webview-mode:not(.webview-mode-catalog) .fixed-margin-home-banners {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Catalog WebView: keep the .nav-nonlogged-container minimally visible so
 * the #addToCartLayer popup (injected into #listHeaderElements by
 * acc.product.js) has a positioned ancestor and can render. The cart icon
 * itself stays hidden — only the transient "added to cart" popup shows.
 * Everything else inside the wrapper is collapsed so we don't reintroduce
 * the empty band the previous "display:none on the whole wrapper" rule
 * was guarding against. */
body.webview-mode.webview-mode-catalog .nav-nonlogged-container {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cart icon container — keep hidden (carries .hide-in-webview already). */
body.webview-mode.webview-mode-catalog .list-header-grid {
    display: none !important;
}

/* Hide every other direct child of .nav-nonlogged-container (logo, search,
 * the small mobile logo, etc.) so the wrapper has zero rendered height
 * when no popup is active. */
body.webview-mode.webview-mode-catalog .nav-nonlogged-container > .logo-container,
body.webview-mode.webview-mode-catalog .nav-nonlogged-container > .col-md-8,
body.webview-mode.webview-mode-catalog #listHeaderElements > .logo__small-size {
    display: none !important;
}

/* #listHeaderElements is the <ul> wrapper that receives the injected
 * #addToCartLayer popup. Keep it positioned (zero size) so the popup
 * anchors correctly without producing visible height of its own. */
body.webview-mode.webview-mode-catalog #listHeaderElements {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    height: 0 !important;
}

/* The popup itself (#addToCartLayer) is positioned absolutely relative to
 * #listHeaderElements. Ensure it renders above WebView content, and constrain
 * it so it fits a phone screen.
 *
 * miniCart.css gives it `width:350px; right:16px; top:50px; box-sizing:content-box`
 * (+15px padding), and the all-webview rule below adds `margin-right:30px`. On a
 * ~360px phone that pushed the box off the LEFT edge and the 15px padding spilled
 * past `max-width`. Here we: pin it below the 60px fixed search bar (top:70px),
 * right-align it with an 8px gutter, zero the stray margin, and switch to
 * border-box so max-width:calc(100vw-16px) keeps the whole box (padding included)
 * inside the viewport — symmetric 8px gutters on phones, right-aligned 350px on
 * tablets. */
body.webview-mode.webview-mode-catalog #addToCartLayer {
    display: block !important;
    z-index: 3000 !important;
    /* position:fixed so top/right are measured from the VIEWPORT. As absolute
     * (miniCart.css) it anchored to #listHeaderElements, whose right edge sits
     * past the screen (Bootstrap row negative margins) — right:8px then shoved
     * the popup off the right edge. Fixed also keeps the transient toast in
     * view while the page scrolls. Same technique as .ui-autocomplete above. */
    position: fixed !important;
    top: 70px !important;
    right: 8px !important;
    left: auto !important;
    width: 350px !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Tablet-only: on wider screens the popup was clipping past the RIGHT edge.
 * Center it in the viewport with a capped width so it can never be cut off,
 * whatever the header containing-block width happens to be at tablet layout.
 * Phones (<768px) keep the right-aligned rule above unchanged. */
@media (min-width: 768px) {
    body.webview-mode.webview-mode-catalog #addToCartLayer {
        right: auto !important;
        left: 70% !important;
        transform: translateX(-50%) !important;
        width: 420px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Hide the "go to cart / checkout" button inside the popup — the React
 * Native shell owns cart navigation, so the in-WebView link is a dead end. */
body.webview-mode.webview-mode-catalog #addToCartLayer .links {
    display: none !important;
}

/* ...and reveal the app-only cart button in its place. It's hidden by an inline
 * style by default (so it never shows in a normal browser, where this stylesheet
 * isn't loaded); this !important rule overrides that inline style in the catalog
 * WebView. Bound in acc.product.js to postMessage the RN shell -> native Orders. */
body.webview-mode.webview-mode-catalog #addToCartLayer .links-app {
    display: block !important;
    /* .popupCartItem lays the product image (.itemThumb, float:left) and its
     * details (.itemDesc, float:right) as floats. The default checkout button
     * (.links) cleared them, but it's display:none here — so this replacement
     * button must clear the floats itself, otherwise it rides up on top of the
     * product photo. */
    clear: both !important;
}

/* Catalog WebView: reserve clearance for the fixed mobile search bar.
 *
 * On phones (style.css :4149 @media max-width:768px) only `.fixed-header`
 * flips to position:static — the `.header-1-wrapper` that actually holds the
 * mobile burger + search bar becomes `position: fixed; top: 0` (style.css
 * :4158-4164) and is ~60px tall. The storefront compensates with
 * `.fixed-margin-home { padding-top: 60px }` (style.css :4154-4156).
 *
 * A previous override zeroed this padding on the (incorrect) assumption the
 * whole header goes static on phones, treating the reserved space as an empty
 * band. That let the page content slide UP underneath the fixed search bar —
 * on the search/PLP page the top facet/filter pills (e.g. "Format",
 * "Categories") ended up clipped behind / overlapping the search bar.
 *
 * Reserve exactly the 60px the fixed bar occupies (the same value used for the
 * burger drawer offset above) so content starts just below it. `.container-
 * wrapper` is the grandparent and only needs its cart-style top margin reset. */
body.webview-mode.webview-mode-catalog .container-wrapper {
    margin-top: 0 !important;
}
body.webview-mode.webview-mode-catalog .fixed-margin-home,
body.webview-mode.webview-mode-catalog .fixed-margin-home-banners {
    margin-top: 0 !important;
    padding-top: 60px !important;
}

/* <header:bottomHeader/> is rendered right after <header:header/> in
 * page.tag. It's a CMS BottomHeaderSlot — not relevant in the WebView,
 * and may carry height if any component is assigned to it. Hide any
 * known marker for that slot across all WebView modes. */
body.webview-mode #BottomHeaderSlot,
body.webview-mode .bottomHeaderSlot,
body.webview-mode [class*="bottomHeader"] {
    display: none !important;
}

/* Zendesk / Zopim livechat floating widget (orange "?" launcher bubble).
 * The script is already gated in master.tag by !sessionScope.webviewMode,
 * but this defensive CSS covers cached pages, alternative widget versions,
 * and any other floating chat/help launchers that may have been injected. */
body.webview-mode iframe#launcher,
body.webview-mode iframe[name="zopim"],
body.webview-mode iframe[title*="chat" i],
body.webview-mode iframe[title*="messenger" i],
body.webview-mode iframe[data-product="web_widget"],
body.webview-mode .zopim,
body.webview-mode .zEWidget-launcher,
body.webview-mode [id^="zopim"],
body.webview-mode [id^="launcher"][class*="widget"],
body.webview-mode div[data-zopim-id],
body.webview-mode #webWidget {
    display: none !important;
    visibility: hidden !important;
}

body.webview-mode .PDP-product-details-row {
    margin-top: 60px;
    padding-bottom: 300px;
}

body.webview-mode .productList {
    padding-bottom: 150px;
}

/* Open bundle PDP bottom clearance. productPromotionPage.jsp has no
 * .PDP-product-details-row wrapper, so the rule above never applies and the
 * gifts well ends flush with the viewport, under the native tab bar
 * (60-78px + safe area, absolutely positioned over the WebView). Same
 * formula as the non-catalog rule further down. */
body.webview-mode .productPromotialDetails.openBundleDetails {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

body.webview-mode .PDP-button-ajouter,
body.webview-mode div.col-md-4.PDP-Button-qty-ajouter > div  {
    width: 100% !important;
}

body.webview-mode .ui-autocomplete {
    position: fixed !important;
    left: 50% !important;
    /* Pin just below the fixed mobile search bar (.header-1-wrapper, ~60px tall
     * at top:0). jQuery UI would normally set an inline `top` anchored to the
     * input, but `position: fixed` decouples it from the input; `top: auto`
     * let the menu fall back to the top of the viewport and overlap the search
     * bar. Anchor it to 60px so suggestions render directly under the bar. */
    top: 60px !important;
    right: auto !important;
    width: calc(100vw - 8px) !important;
    min-width: 0 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    transform: translateX(-50%) !important;
}

/* li wrapper: display block para float do X funcionar */
body.webview-mode .ui-autocomplete > li {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.webview-mode .autocomplete-wrapper {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    padding: 0 !important;
}

/* X: flutua para a direita dentro do bloco do título */
body.webview-mode .autocomplete-close {
    float: right !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    font-size: 20px !important;
    color: #888 !important;
    cursor: pointer !important;
    line-height: 40px !important;
    padding: 0 14px !important;
    background: #fff !important;
    display: block !important;
}

/* Título: sticky, deixa espaço à direita para o X flutuado */
body.webview-mode .autocomplete-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    line-height: 40px !important;
    border-bottom: 1px solid #f1f1f1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.webview-mode .autocomplete-left,
body.webview-mode .autocomplete-right {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

body.webview-mode .autocomplete-right {
    border-top: 1px solid #f1f1f1 !important;
}

body.webview-mode .autocomplete-block h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px 4px !important;
    margin: 0 !important;
}

body.webview-mode .autocomplete-suggestion {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #2800FF !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f8f8f8 !important;
}

body.webview-mode .autocomplete-products {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card: imagem à esq, grid de info à dir */
body.webview-mode .autocomplete-product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f1f1 !important;
    text-decoration: none !important;
}

body.webview-mode .autocomplete-product:last-child {
    border-bottom: none !important;
}

body.webview-mode .autocomplete-product-img {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    border: 1px solid #f1f1f1 !important;
    background: #fafafa !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

/* Grid: nome (linha 1), código esq + preço dir (linha 2) */
body.webview-mode .autocomplete-product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
}

body.webview-mode .autocomplete-product-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #000 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    margin: 0 !important;
}

body.webview-mode .autocomplete-product-code {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
    color: #999 !important;
    margin: 0 !important;
}

body.webview-mode .autocomplete-product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FF5900 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: right !important;
}

body.webview-mode .autocomplete-view-all {
    padding: 10px 14px !important;
    border-top: 1px solid #f1f1f1 !important;
}

body.webview-mode .view-all-button {
    display: block !important;
    width: 100% !important;
    padding: 10px !important;
    background: #FF5900 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
/* Mobile search bar layout fix — defensive mirror of style.css.
 *
 * The storefront's mobile fixes (burger `margin-right: 0`, .hide-in-webview-cart
 * `flex: 1 1 auto`, .fsearch `width: calc(100% - 36px)`, etc.) live behind
 * `@media (max-width: 415px)` in style.css. iPhone 14/15/16 Plus is 430px,
 * so the 992px tablet rules fire instead — `#burguer__button__mobile`
 * keeps its `-24px` negative right margin and `.search-bar-container` uses
 * `justify-content: space-between`, leaving a huge gap between the burger
 * and the search input.
 *
 * style.css has already been patched (415px → 480px) but Granule's bundled
 * CSS may need a Hybris restart to pick that up. These rules mirror the
 * fix inside webview-mode.css (loaded outside Granule with manual ?v=
 * cache-bust) so the WebView shows the corrected layout immediately. Once
 * Granule re-aggregates, the duplicate is harmless. */
body.webview-mode .webview-mobile-bar {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-right: 6px !important;
}
body.webview-mode .nav-collapse__container {
    top: 60px !important;
}

body.webview-mode .collapsed-container__menu, .list-items__dropdown-container {
    top: 60px !important;
}

/* Burger button (#burguer__button__mobile) — multiple sources widen it in
 * the WebView:
 *  - Bootstrap (.navbar-toggle, bootstrap.css:4335): float: right; padding: 9px 10px; margin-right: 15px;
 *  - saf-style-navigation-component.css:417 sets display: flex above 768px,
 *    which the WebView may hit depending on device DPI.
 *  - style.css:5018 (max-width 992px) adds padding-left: 24px and margin-right: -24px.
 *
 * Pin the burger to a fixed 44px box and kill float/extra padding so it
 * cannot expand and push the search bar to the right. .search-bar-container
 * is display:flex with justify-content:space-between, so a fixed-width
 * burger + the existing `.hide-in-webview-cart { flex: 1 1 auto }` rule
 * below lets the search input take the remaining width. */
body.webview-mode #burguer__button__mobile {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.webview-mode #burguer__button__mobile img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
}

body.webview-mode .search-bar-container .hide-in-webview-cart {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.webview-mode .search-bar-container .searchBoxContainer,
body.webview-mode .search-bar-container .fullSearch,
body.webview-mode .search-bar-container form {
    width: 100% !important;
}

body.webview-mode .search-bar-container .search-container {
    width: 100% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}
body.webview-mode .search-bar-container .fsearch {
    width: calc(100% - 36px) !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
}

/* Catalog WebView, tablet landscape (>= 992px): restore the search bar.
 *
 * header.tag renders the search box TWICE:
 *   - :61  .col-md-8.hidden-xs.hidden-sm  → desktop, shown only >= 992px
 *   - :103 .webview-mobile-bar (visible-xs visible-sm hidden-md) → < 992px
 *
 * The catalog WebView hides the desktop one (section 3a: `.nav-nonlogged-
 * container > .col-md-8 { display: none }`) and relies on the mobile bar.
 * On a Pixel Tablet that works in portrait (800px) but not in landscape
 * (1280px), where Bootstrap's visible-xs/visible-sm turn the mobile bar off
 * and nothing takes its place — no search input AND no burger/category menu.
 *
 * All the flex/width plumbing above is already unscoped, so only `display`
 * needs restoring here. The `.row` margin reset mirrors style.css:4174 (which
 * is gated at max-width:768px); without it Bootstrap's -15px row margins push
 * the bar 15px past the viewport and clip the search button. */
@media (min-width: 992px) {
    body.webview-mode.webview-mode-catalog .header-1-wrapper .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.webview-mode.webview-mode-catalog .webview-mobile-bar {
        display: block !important;
        float: none !important;
    }

    body.webview-mode.webview-mode-catalog .search-bar-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* "PurchaseOptions" CMS slot at the bottom of the cart page —
 * the value-prop card with "facilité de paiement / une offre complète /
 * rapidité de livraison". Rendered as <ul.purchase_options_container>
 * inside <section.resume-price__container> by cartDetails.tag:102-106.
 * Hide both the list and the wrapping section so it doesn't leave an
 * empty band at the bottom of the cart in the WebView. */
body.webview-mode .purchase_options_container,
body.webview-mode .resume-price__container:has(.purchase_options_container) {
    display: none !important;
}

/* Bottom clearance for the React Native tab bar.
 * The native shell renders a tab bar (Home / Customers / Orders / Account)
 * over the bottom ~80px of the WebView, so the last lines of the page
 * (e.g. "CONTINUER VOS ACHATS" link under the place-order button) get
 * clipped. Add enough padding so the user can scroll past the tab bar,
 * plus env(safe-area-inset-bottom) for the iOS home indicator. Scoped to
 * non-catalog WebView since only the cart/order/confirmation pages sit
 * inside an Orders tab; the catalog WebView is full-screen. */
body.webview-mode:not(.webview-mode-catalog) {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Cookie consent bar (#cookie-bar) is injected dynamically by
 * acc.common.js:showCookieNotification and faded in with jQuery's
 * .fadeIn(), which sets an inline `display: block` style — that beats any
 * non-!important external rule. The bar is irrelevant inside the WebView
 * (the native app handles consent), so kill it across all WebView modes.
 * !important is required to override the inline style set by .fadeIn(). */
body.webview-mode #cookie-bar {
    display: none !important;
    visibility: hidden !important;
}

/* Mobile-app only: single-step "back" arrow, rendered INSIDE the breadcrumb
 * (breadcrumb.tag) so it lives in the normal content flow BELOW the fixed
 * mobile search bar — it therefore never affects the search bar's fixed
 * positioning or the content top-clearance. Tapping it runs
 * window.history.back(). Hidden everywhere by default; shown only under
 * body.webview-mode (the same proven mechanism as .hide-in-webview). The
 * .is-root class, added by the inline script in master.tag when
 * history.length <= 1, hides it on the WebView entry page. */
.webview-back-inline {
    display: none !important;
}
/* Lay the breadcrumb line out as a single centered row so the back arrow
 * aligns vertically with the breadcrumb text. Scoped to webview mode only, so
 * the desktop breadcrumb layout is untouched. */
body.webview-mode .breadcumb-info-container .pull-left {
    display: flex !important;
    align-items: center !important;
}
body.webview-mode .breadcumb-info-container .breadcrumb-logista {
    /* .breadcrumb-logista has margin-top:20px (style.css) and Bootstrap adds
     * margin-bottom:20px. Zero BOTH so the ol's margin-box is symmetric and
     * align-items:center lines the text up with the back arrow. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.webview-mode .webview-back-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
}
body.webview-mode .webview-back-inline.is-root {
    display: none !important;
}
/* Left-pointing chevron drawn from two borders on a rotated box. */
body.webview-mode .webview-back-inline__chevron {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-left: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
}

/* Wishlist "Sélectionnez votre liste" dropdown (add-to-list selector on the PDP
 * and PLP). The star/list toggle sits near the right edge, and the default
 * Bootstrap .dropdown-menu opens left-aligned (left:0) with a 230px min-width,
 * so it overflowed the right edge and got clipped inside the narrow WebView.
 * Right-align it to the toggle so it opens leftward and stays on screen, cap its
 * width to the viewport, and move the arrow to match. WebView catalog only. */
body.webview-mode.webview-mode-catalog .wishlist-dropdown {
    position: relative !important;
}
body.webview-mode.webview-mode-catalog .wishlist-dropdown .dropdown-menu.arrowTop {
    left: auto !important;
    right: 0 !important;
    max-width: 92vw !important;
    overflow-x: hidden !important;
}
body.webview-mode.webview-mode-catalog .wishlist-dropdown .dropdown-menu.arrowTop::before,
body.webview-mode.webview-mode-catalog .wishlist-dropdown .dropdown-menu.arrowTop::after {
    left: auto !important;
    right: 14px !important;
    margin-left: 0 !important;
}