/*
 * Phone and tablet polish shared by every BigDeal theme and store page. Loaded last, after the theme stylesheets.
 * Sections: page width, sticky header + bottom bar, one menu button, the side menu panel, scrolling chip rows,
 * services, side-by-side product rows, product card actions, footer.
 */

/* ---------- Page width: nothing may push the page sideways (an RTL page otherwise shows a blank strip on one side) ---------- */
html { overflow-x: hidden; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }

/* ---------- Sticky header ---------- */
/* The bottom icon bar (".mobile-fix-option" and the ".mobile-*" icons) is position: fixed inside the header. The sticky header's
   slide-in used a transform (kept by "fill-mode: both") and "will-change: transform", which turn the header into the bar's containing
   block, so the bar jumped to the top of the screen once the page scrolled. Below desktop the header slides in with "top" instead. */
@media (max-width: 1199px) {
    .store-header-is-sticky { animation-name: storeHeaderDropIn; will-change: auto; }
}
@keyframes storeHeaderDropIn { from { top: -90px; } to { top: 0; } }

/* ---------- One menu button, on the reading-start side (right in Arabic, left in English) ---------- */
@media (max-width: 1199px) {
    .bigdeal-template-header [data-template-menu-open]:not(.store-menu-toggle) { display: none !important; }
    .bigdeal-template-header .sm-nav-block:has(.store-menu-toggle) { margin: 0 !important; }
    /* No forced display: the template still decides which header row shows the button (megastore.html repeats it in the sticky bar). */
    .bigdeal-template-header .store-menu-toggle {
        width: 42px; height: 42px; flex: 0 0 42px; place-items: center; text-align: center; line-height: 42px;
        margin: 0 !important; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bigdeal-template-header .store-menu-toggle i { font-size: 22px !important; line-height: 1; }
    .bigdeal-template-header .store-menu-toggle:focus-visible { outline: 2px solid var(--store-primary); outline-offset: 2px; }
    /* layout-3.html: the logo row keeps its dark background when sticky, where the template turns icons dark grey. */
    .bigdeal-template-header--layout3 .layout-header3 .store-menu-toggle,
    .bigdeal-template-header--layout3 .layout-header3 .store-menu-toggle i { color: #ffffff !important; }
}
@media (min-width: 1200px) {
    .bigdeal-template-header .store-menu-toggle--phone { display: none !important; }
}
/* layout-4.html: the phone icon bar is drawn from the logo row's icons, which the template hides on phones. */
@media (max-width: 575px) {
    .bigdeal-template-header--layout4 .layout-header4 .icon-block { display: block !important; }
    .bigdeal-template-header--layout4 .layout-header4 .icon-block .cart-item { display: none !important; }
}

/* ---------- Phone header: the page starts with the logo row (no top bar above it); menu button at the reading start, logo at the end ---------- */
@media (max-width: 767px) {
    .bigdeal-template-header :is(.top-header, .top-header2),
    .cosmetic-store-header .top-header2 { display: none !important; }
}
@media (max-width: 577px) {
    /* The template centres the logo ("logo-sm-center": absolute, left 50%); it moves to the inline end instead. */
    .bigdeal-template-header .logo-sm-center { margin: 0 !important; transform: none !important; }
    [dir=rtl] .bigdeal-template-header .logo-sm-center { left: 15px !important; right: auto !important; }
    [dir=ltr] .bigdeal-template-header .logo-sm-center { right: 15px !important; left: auto !important; }
    .cosmetic-store-header .logo-block { flex: 1 1 auto; justify-content: space-between; }
}

/* ---------- Phone bottom bar: the icons share the full width evenly, whatever their number ---------- */
/* The template pins each icon on its own ("position: fixed; right: 16% / 32% / ..."), which leaves wide gaps at the sides.
   Instead the list holding them becomes the fixed bar and each icon takes an equal share of it. */
@media (max-width: 575px) {
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) {
        position: fixed !important; inset: auto 0 0 0 !important; z-index: 10 !important;
        display: flex !important; align-items: stretch; justify-content: space-around;
        width: 100% !important; height: 45px; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom) !important;
        background: transparent; transform: none !important;
    }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li:not([class*="mobile-"]),
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li.mobile-setting { display: none !important; }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li[class*="mobile-"] {
        position: relative !important; inset: auto !important; display: flex !important; flex: 1 1 0; flex-direction: column;
        align-items: center; justify-content: center; width: auto !important; height: 100%; margin: 0 !important; padding: 0 !important;
        border: 0 !important; background: transparent !important; transform: none !important;
    }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li[class*="mobile-"] > :is(a, button) {
        position: static !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
        width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
        background: transparent !important; box-shadow: none !important;
    }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li[class*="mobile-"] :is(.cart-item, .cart-item-main, .cart-block .cart-item) { display: none !important; }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li[class*="mobile-"] .cart-block { display: contents !important; }
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) > li[class*="mobile-"] svg { width: 18px !important; height: 18px !important; margin: 0 !important; }
    /* Count badges at the top corner of each icon (mirrored between Arabic and English). */
    .bigdeal-template-header .icon-block ul:has(> li.mobile-cart) .item-count-contain {
        position: absolute !important; top: 5px !important; bottom: auto !important; left: auto !important; right: auto !important;
        inset-inline-end: calc(50% + 2px) !important; margin: 0 !important; transform: none !important;
    }
}

/* Cosmetic theme on phones: its round icons become the same kind of bottom bar (and the account link, otherwise in the hidden top bar, joins them). */
.cosmetic-store-header .theme-color .cosmetic-mobile-only { display: none; }
@media (max-width: 575px) {
    .cosmetic-store-header .icon-block .theme-color {
        position: fixed !important; inset: auto 0 0 0; z-index: 10; display: flex !important; align-items: center; justify-content: space-around;
        gap: 0 !important; height: 58px; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom) !important;
        background: #ffffff; box-shadow: 0 -6px 24px rgba(15, 23, 42, .12);
    }
    .cosmetic-store-header .icon-block .theme-color > li { display: flex !important; flex: 1 1 0; justify-content: center; }
    .cosmetic-store-header .theme-color .cosmetic-mobile-only { display: flex; }
    body.cosmetic-store-layout { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ---------- Side menu panel (template "#main-menu" below desktop) ---------- */
@media (max-width: 1199px) {
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) {
        position: fixed !important; top: 0 !important; bottom: 0; left: auto !important; right: 0 !important;
        display: block !important; width: min(340px, 86vw) !important; height: 100% !important; height: 100dvh !important;
        margin: 0 !important; padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: contain;
        border: 0 !important; border-radius: 0 !important; background: #ffffff !important;
        box-shadow: none; z-index: 1102 !important; visibility: hidden;
        transform: translateX(105%); transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s, box-shadow .32s;
    }
    html[dir=ltr] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) { left: 0 !important; right: auto !important; transform: translateX(-105%); }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal).is-open {
        visibility: visible; transform: none; box-shadow: 0 0 60px rgba(15, 23, 42, .28) !important;
        transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s, box-shadow .32s;
    }

    /* Title row with the close button, pinned while the list scrolls. */
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li:first-child { position: sticky; top: 0; z-index: 2; border: 0; background: #ffffff; }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) :is(.mobile-back, .desc-back) {
        display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
        margin: 0; padding: 18px 20px !important; border-bottom: 1px solid #eeeeee !important;
        color: #1f2937 !important; font-size: 17px !important; font-weight: 700; letter-spacing: 0; text-transform: none !important;
        cursor: pointer;
    }
    .mobile-back:hover .store-menu-close, .desc-back:hover .store-menu-close { background: var(--store-primary) !important; color: var(--theme-on-primary, #fff) !important; }

    /* Top-level links. */
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li { position: relative; display: block !important; float: none !important; width: 100%; border-bottom: 1px solid #f2f2f2; }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li:last-child { border-bottom: 0; }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li > a {
        display: flex !important; align-items: center; min-height: 52px; margin: 0;
        padding: 12px 20px !important; padding-inline-end: 62px !important;
        color: #1f2937 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.5;
        letter-spacing: 0 !important; text-align: start !important; text-transform: none !important; background: transparent;
    }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li > a:hover,
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) > li > a.highlighted { color: var(--store-primary) !important; }

    /* "+" / "−" button of the links with a sub menu. */
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) a .sub-arrow {
        position: absolute !important; top: 50% !important; left: auto !important; right: auto !important; inset-inline-end: 16px !important;
        display: grid !important; width: 30px !important; height: 30px !important; margin: -15px 0 0 !important; padding: 0 !important;
        place-items: center; border: 0 !important; border-radius: 50% !important; background: #f3f4f6 !important; color: #4b5563 !important;
        font: 600 17px/1 system-ui, sans-serif !important; transform: none !important; transition: background .2s, color .2s;
    }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) a.highlighted .sub-arrow { background: var(--store-primary) !important; color: var(--theme-on-primary, #fff) !important; }

    /* Sub menus. */
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) ul {
        position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
        padding: 4px 0 10px !important; border: 0 !important; border-radius: 0 !important; background: #fafafa !important; box-shadow: none !important;
    }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) ul li { float: none !important; border: 0 !important; }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) ul a {
        display: block !important; padding: 9px 20px !important; padding-inline-start: 34px !important;
        color: #4b5563 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55;
        letter-spacing: 0 !important; text-align: start !important; text-transform: none !important; background: transparent !important;
    }
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal) ul a:hover { color: var(--store-primary) !important; }
}

/* ---------- Cosmetic theme: the same side panel for its own menu ---------- */
.cosmetic-menu-head { display: none; }
@media (max-width: 991px) {
    .cosmetic-store-header .menu-block[data-cosmetic-menu] {
        position: fixed !important; top: 0 !important; bottom: 0; left: auto !important; right: 0 !important;
        display: block !important; width: min(340px, 86vw) !important; height: 100%; height: 100dvh;
        margin: 0 !important; padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        border: 0; border-radius: 0; background: #ffffff; box-shadow: none !important; z-index: 1102 !important; visibility: hidden;
        transform: translateX(105%); transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
    }
    html[dir=ltr] .cosmetic-store-header .menu-block[data-cosmetic-menu] { left: 0 !important; right: auto !important; transform: translateX(-105%); }
    .cosmetic-store-header .menu-block[data-cosmetic-menu].is-open {
        visibility: visible; transform: none; box-shadow: 0 0 60px rgba(15, 23, 42, .28) !important;
        transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s;
    }
    .cosmetic-store-header .cosmetic-menu-head {
        position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 18px 20px; border-bottom: 1px solid #eeeeee; background: #ffffff; color: #1f2937; font-size: 17px; font-weight: 700;
    }
    .cosmetic-store-header .cosmetic-menu-head .store-menu-close { border: 0; cursor: pointer; }
    .cosmetic-store-header .cosmetic-menu-head .store-menu-close:hover { background: var(--store-primary); color: var(--theme-on-primary, #fff); }
    .cosmetic-store-header .cosmetic-main-menu { display: block !important; margin: 0; padding: 0; }
    .cosmetic-store-header .cosmetic-main-menu > li { display: block; margin: 0; border-bottom: 1px solid #f2f2f2; }
    .cosmetic-store-header .cosmetic-main-menu > li > a {
        display: flex !important; align-items: center; justify-content: space-between; min-height: 52px;
        padding: 12px 20px !important; color: #1f2937; font-size: 15px; font-weight: 600; text-align: start;
    }
    .cosmetic-store-header .cosmetic-main-menu > li > a:hover { color: var(--store-primary); }
    /* Categories stay listed under their link inside the panel. */
    .cosmetic-store-header .cosmetic-category-dropdown {
        position: static !important; display: block !important; width: auto !important; max-height: none !important;
        margin: 0; padding: 0 0 10px !important; border: 0 !important; background: #fafafa !important; box-shadow: none !important;
    }
    .cosmetic-store-header .cosmetic-category-dropdown a { padding: 8px 20px !important; padding-inline-start: 26px !important; color: #4b5563; font-size: 14px; }
    .cosmetic-store-header .cosmetic-category-dropdown img,
    .cosmetic-store-header .cosmetic-category-dropdown > a > i { width: 32px; height: 32px; flex-basis: 32px; }
    .cosmetic-store-header .cosmetic-category-item > a > .fa-angle-down { display: none; }
}

/* Round close button of the side panels: the "x" sits in the exact centre (the menu row is right-aligned text, which pulled it aside). */
html body .store-menu-close {
    display: inline-flex !important; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 !important; border: 0; border-radius: 50%; background: #f3f4f6 !important; color: #374151 !important;
    font-size: 16px; line-height: 1; text-align: center; transition: background .2s, color .2s;
}
html body .store-menu-close i { display: block !important; color: inherit !important; font-size: 16px !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; line-height: 1 !important; }

/* Dimmed page behind the open menu (added by the header script; clicking it closes the menu). */
.store-menu-backdrop {
    position: fixed; inset: 0; z-index: 1101; background: rgba(15, 23, 42, .45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
    -webkit-tap-highlight-color: transparent;
}
.store-menu-backdrop.is-visible { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
html.store-menu-locked, html.store-menu-locked body { overflow: hidden; }
@media (min-width: 1200px) { .store-menu-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) {
    html[dir] body .bigdeal-template-header #main-menu:is(.sm-horizontal, .desc-horizontal), .store-menu-backdrop { transition: none !important; }
}

/* ---------- Rows of buttons and chips: one line that scrolls sideways instead of wrapping ---------- */
.brand-panel .brand-panel-contain > ul,
.tab-product-main .tab-prodcut-contain > ul.tabs,
ul.tabs.tab-title,
[data-product-tabs] .nav-tabs.nav-material {
    display: flex !important; flex-wrap: nowrap !important; align-items: center;
    max-width: 100%; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--row-fade-left, 0px), #000 calc(100% - var(--row-fade-right, 0px)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--row-fade-left, 0px), #000 calc(100% - var(--row-fade-right, 0px)), transparent 100%);
}
.brand-panel .brand-panel-contain > ul::-webkit-scrollbar,
.tab-product-main .tab-prodcut-contain > ul.tabs::-webkit-scrollbar,
ul.tabs.tab-title::-webkit-scrollbar,
[data-product-tabs] .nav-tabs.nav-material::-webkit-scrollbar { display: none; }
.brand-panel .brand-panel-contain > ul > li,
.tab-product-main .tab-prodcut-contain > ul.tabs > li,
ul.tabs.tab-title > li,
[data-product-tabs] .nav-tabs.nav-material > * { flex: 0 0 auto; float: none !important; white-space: nowrap; scroll-snap-align: start; }
/* Centered while everything fits; once the row overflows the automatic margins collapse and it starts at the reading edge
   ("justify-content: center" would push the first items out of reach). */
.brand-panel .brand-panel-contain > ul,
.tab-product-main .tab-prodcut-contain > ul.tabs,
ul.tabs.tab-title { justify-content: flex-start !important; }
.brand-panel .brand-panel-contain > ul > li:first-child,
.tab-product-main .tab-prodcut-contain > ul.tabs > li:first-child,
ul.tabs.tab-title > li:first-child { margin-inline-start: auto !important; }
.brand-panel .brand-panel-contain > ul > li:last-child,
.tab-product-main .tab-prodcut-contain > ul.tabs > li:last-child,
ul.tabs.tab-title > li:last-child { margin-inline-end: auto !important; }
/* Brand rows: the "top brands" title leads the row, the brand names follow on the same line. */
.brand-panel .brand-panel-contain > ul { gap: 8px; padding-block: 4px; }
.brand-panel .brand-panel-contain > ul > li { margin-block: 0 !important; }
.brand-panel .brand-panel-contain > ul > li:not(:first-child):not(:last-child) { margin-inline: 0 !important; }
.brand-panel .brand-panel-contain > ul > li:first-child { width: auto !important; padding-inline: 0 6px !important; }
.brand-panel .brand-panel-contain > ul > li:nth-child(2):has(> a:not([href])) { display: none; }
@media (max-width: 767px) {
    .brand-panel .brand-panel-box { padding-inline: 12px; }
    .brand-panel .brand-panel-contain { justify-content: flex-start !important; }
    .brand-panel .brand-panel-contain > ul > li > a { padding: 6px 14px !important; font-size: 13px; }
    .tab-product-main .tab-prodcut-contain > ul.tabs { gap: 8px 22px !important; padding-inline: 16px !important; }
    ul.tabs.tab-title > li > a { white-space: nowrap; }
}

/* ---------- Services strip: two by two on phones instead of four tall rows ---------- */
@media (max-width: 767px) {
    .services .row.service-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; }
    .services .row.service-block > [class*="col-"] { width: auto; max-width: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
    .services .row.service-block .media {
        height: 100%; flex-direction: column; justify-content: center; gap: 8px;
        margin: 0 !important; padding: 18px 10px !important; border: 0 !important; text-align: center;
    }
    .services .row.service-block > [class*="col-"]:nth-child(odd) { border-inline-end: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important; }
    .services .row.service-block > [class*="col-"]:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important; }
    .services .row.service-block .media svg { width: 34px; height: 34px; margin: 0 !important; }
    .services .row.service-block .media .media-body { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
    .services .row.service-block .media .media-body h5 { margin: 0; font-size: 14px; line-height: 1.5; }
    .services .row.service-block .media .media-body p { margin: 2px 0 0; font-size: 12px; }
    /* Cosmetic footer services. */
    .cosmetic-footer-services { padding-block: 28px; }
    .cosmetic-footer-services .cosmetic-footer-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 12px; }
    .cosmetic-footer-service-icon { margin-bottom: 10px; }
    .cosmetic-footer-service h4 { font-size: 15px; }
    .cosmetic-footer-service p { font-size: 12px; line-height: 1.6; }
}

/* ---------- Side-by-side product rows ("media-banner"): image at the reading start, details beside it ---------- */
.media-banner .media-banner-box .media { gap: 14px; }
.media-banner .media-banner-box .media > a { flex: 0 0 auto; }
.media-banner .media-banner-box .media img { border-radius: 8px; }
/* The text column is a size container: the action buttons below take their size from it, so they never push into the image. */
.media-banner .media-banner-box .media .media-body { flex: 1 1 auto; min-width: 0; padding: 0 !important; container-type: inline-size; }
.media-banner .media-banner-box .media .media-body .media-contant { margin: 0 !important; text-align: start !important; }
.media-banner .media-banner-box .media .media-body .media-contant > div,
.media-banner .media-banner-box .media .media-body .product-detail { min-width: 0; max-width: 100%; }
/* The template's RTL rules order the text before the image; on a right-to-left page that puts the image on the left. */
[dir=rtl] .media-banner .media-banner-box .media .media-body { order: 0 !important; }
.media-banner .media-banner-box .media .media-body .media-contant .cart-info {
    position: static !important; display: flex !important; align-items: center; gap: 6px; margin-top: 8px; opacity: 1 !important; visibility: visible !important;
}
.media-banner .media-banner-box .media .media-body .media-contant .cart-info form { display: contents; }
.media-banner .media-banner-box .media .media-body .media-contant .cart-info :is(button, a) {
    --media-action: clamp(24px, calc((100cqi - 18px) / 4), 32px);
    display: inline-grid; width: var(--media-action); height: var(--media-action); flex: 0 0 var(--media-action); place-items: center; margin: 0 !important; padding: 0;
    border: 1px solid #ececec; border-radius: 50%; background: #ffffff; color: #4b5563; cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.media-banner .media-banner-box .media .media-body .media-contant .cart-info :is(button, a):hover { border-color: var(--store-primary); background: var(--store-primary); color: var(--theme-on-primary, #fff); }
.media-banner .media-banner-box .media .media-body .media-contant .cart-info svg { width: 45% !important; height: 45% !important; margin: 0 !important; stroke: currentColor; }
@media (max-width: 575px) {
    .media-banner .media-banner-box .media img { width: 84px !important; height: 104px !important; margin: 0 !important; object-fit: cover; }
    .media-banner .media-banner-box .media .media-body .media-contant { justify-content: flex-start !important; }
}

/* ---------- Product card actions on phones and touch screens: a row of round buttons along the bottom of the image ---------- */
/* The buttons take their size from the image width (container units), so all four fit even on narrow two-column cards. */
@media (max-width: 767px), (hover: none) {
    .product-box .product-imgbox { container-type: inline-size; }
    .product-box .product-imgbox .product-icon {
        --card-action: clamp(26px, calc((100cqi - 30px) / 4), 36px);
        position: absolute !important; top: auto !important; bottom: 10px !important; left: 0 !important; right: 0 !important;
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px !important;
        width: max-content !important; max-width: calc(100% - 12px); height: auto !important; margin: 0 auto !important; padding: 0 !important;
        border: 0 !important; background: transparent !important; box-shadow: none !important;
        opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 3 !important;
    }
    /* Cards with their own "add to cart" bar over the image (tools.html): the round buttons sit just above it. */
    .product-box .product-imgbox:has(> .btn-cart, > div > .btn-cart) .product-icon { bottom: 58px !important; }
    .product-box .product-imgbox .product-icon > div { display: contents !important; }
    .product-box .product-imgbox .product-icon form { display: contents !important; }
    .product-box .product-imgbox .product-icon :is(button, a) {
        position: static !important; display: grid !important;
        width: var(--card-action) !important; height: var(--card-action) !important; flex: 0 0 var(--card-action);
        place-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
        background: rgba(255, 255, 255, .96) !important; color: #374151 !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .16) !important;
        opacity: 1 !important; transform: none !important; -webkit-tap-highlight-color: transparent;
    }
    .product-box .product-imgbox .product-icon :is(button, a):active { background: var(--store-primary) !important; color: var(--theme-on-primary, #fff) !important; }
    .product-box .product-imgbox .product-icon svg {
        width: calc(var(--card-action) * .44) !important; height: calc(var(--card-action) * .44) !important;
        margin: 0 !important; stroke: currentColor !important; fill: none !important;
    }
    .product-box .product-imgbox .product-icon :is(button, a)::before,
    .product-box .product-imgbox .product-icon :is(button, a)::after { display: none !important; }
}

/* ---------- Footer on phones: compact sections, links side by side ---------- */
@media (max-width: 767px) {
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer1 { padding-block: 26px 10px; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-main { display: flex; flex-direction: column; gap: 6px; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-box { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 16px !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-box + .footer-box { padding-top: 16px !important; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-title { display: block !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-title::after, :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-title::before { display: none !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-title h5 { margin: 0; font-size: 15px; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant { display: block !important; margin: 0 !important; padding: 0 !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant .footer-logo { margin: 0 !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant > ul:not(.contact-list):not(.paymant):not([class*="social"]) {
        display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
    }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant > ul:not(.contact-list):not(.paymant):not([class*="social"]) > li {
        display: block; margin: 0 !important; padding: 0 !important; border: 0 !important;
    }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant > ul:not(.contact-list):not(.paymant):not([class*="social"]) > li::before { display: none !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant > ul:not(.contact-list):not(.paymant):not([class*="social"]) > li > a {
        display: inline-block; padding: 6px 13px !important; border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
        border-radius: 999px; font-size: 13px; line-height: 1.5; text-transform: none; transition: border-color .2s, color .2s;
    }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .footer-contant > ul:not(.contact-list):not(.paymant):not([class*="social"]) > li > a:hover { border-color: var(--store-primary); color: var(--store-primary) !important; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .contact-list { margin: 0; padding: 0; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .contact-list li { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; padding: 0 !important; font-size: 13px; }
    :is(.bigdeal-template-footer, .cosmetic-store-footer) .contact-list li i { position: static !important; margin: 0 !important; }
}