.containerHome {
    text-align: center;
    width: 100%;
    position: relative;
    padding-bottom: 79px;
    padding-top: 70px;
}




/* Search Bar Styles */
.search-bar {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Position relative to contain the loop icon */
    margin-bottom: 33px;
    max-width: 479px;
    margin-left: auto;
    margin-right: auto;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 44px;
    font-size: 0.875rem;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    outline: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    padding-right: 40px;
    height: 48px;
    color: #7C8084;
    background-position: 7px 12px;
    background-color: #FFF;
    position: relative;
}

    /* Adding shadow effect on hover */
    .search-input:hover {
        border-color: #a8b0b6; /* Optional: Change border color on hover */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    }

    /* Adding shadow effect when focused */
    .search-input:focus {
        border-color: #4d90fe; /* Change border color on focus */
        box-shadow: 0 0 8px rgba(72, 133, 237, 0.6); /* Blue shadow on focus */
    }

/* Search Buttons */
.search-buttons {
    margin: 0 14px 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-btn {
    padding: 10px 20px;
    font-size: 0.8rem;
    background-color: #F4F4F4;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
    color: #3c4043;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 18%;
    gap: 10px;
    font-family: 'SF Pro Regular';
    font-weight: bold;
}

    .search-btn:hover {
        box-shadow: 0 0px 2px rgb(0 0 0 / 11%), 0 1px 10px rgb(0 0 0 / 6%);
        background-color: #f8f9fa;
        color: #202124;
    }

.content_body_home .search-buttons .search-btn.lg1 {
    text-transform: uppercase;
    border-radius: 21.96px !important;
    background-color: #ffffff !important;
    border: 1px solid #D5DFE4 !important;
}

.search-btn.lg {
    font-size: 1.9rem;
    position: relative;
    width: 48.7% !important;
    height: 96px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    min-width: 360px;
}

@media (max-width: 768px) {
    .search-btn.lg {
        min-width: 100% !important;
    }

    .btn-buyDeviceWithInstallment {
        min-width: 100% !important;
    }
}


.search-bar svg {
    position: absolute;
    left: 14px;
    z-index: 333;
    top: 15px;
}

.h_80 {
    height: 84px;
}

.search-btn.lg.h_80 {
    padding: 10px;
    text-align: left;
}

.search-buttons .search-btn .img {
    position: relative;
    width: 41px;
    height: 40px;
    background-image: url(../imgs/bag.png);
    background-repeat: no-repeat;
}

.search-buttons .search-btn:nth-child(1) .img {
    background-image: url(../imgs/buy.svg);
}

.search-buttons .search-btn:nth-child(2) .img {
    background-image: url(../imgs/bag.svg);
}

.preorder .img {
    background-image: url(../imgs/preorder.svg) !important;
    background-size:contain;

}

.img_ico {
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-size: cover;
    position: absolute;
    top: 8px;
    left: 162px;
}

.search-input::placeholder {
    color: #A9A9A9;
}

.search-bar .iconchart {
    right: 15px;
    top: 12px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url(../imgs/icon.svg);
    position: absolute
}

img.ico {
    display: block;
    margin: 0px auto 5px;
    height: 32px;
}

.w_182_63 .search-btn {
    min-width: 184px; /*182px*/
    height: 63px;
}

.w_182_63 img {
    max-height: 24px;
}
/* Footer Styles */
/*footer {
    width: 100%;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
}*/


/*.logo {
    padding-top: 80px;
}
*/
.logo img {
    width: 185px;
}



.per_line {
    margin-bottom: 35px;
}

    .per_line.search-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

.title_line {
    text-align: left;
    font-size: 1rem;
    margin-left: 8px;
    font-family: 'SF Pro Bold';
}

    .title_line.mb_10 {
        margin: 0 19px 10px;
        color: #000;
    }

.btn_seeall {
    cursor: pointer;
    font-size: 0.8rem;
    margin-right: 8px;
}

.bottom_per_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0px 0px;
}

.d_187_99 {
    height: 99px;
    flex-direction: column;
    font-weight: normal;
}

.search-btn.lg.h_80 {
    font-size: 0.8rem;
    width: 48%; /* Set each button to take up 50% of the available width */
    margin: 5px 1%; /* Optional: Adds space between the buttons */
}

.nline svg {
    float: left;
}

.search-btn .nline {
    position: relative;
    display: block;
    width: 100%;
    font-family: 'SF Pro Regular';
    font-weight: normal;
    text-align: left;
}

    .search-btn .nline:nth-child(1) {
        height: 38px;
    }

    .search-btn .nline:nth-child(2), .search-btn .nline:nth-child(3) {
        height: 22px;
        font-weight: normal;
    }

    .search-btn .nline:nth-child(2) {
        font-family: 'SF Pro Bold';
    }

    .search-btn .nline:nth-child(1) div {
        font-size: 0.7rem;
        float: right;
        color: #4C5157;
    }

    .search-btn .nline:nth-child(2) div:nth-child(1) {
        font-size: 0.9rem;
        text-align: left;
        float: left;
        color: #4C5157;
    }

    .search-btn .nline:nth-child(2) div:nth-child(2) {
        font-size: 0.9rem;
        float: right;
        color: #4C5157;
    }

    .search-btn .nline:nth-child(3) div:nth-child(1) {
        font-size: 0.7rem;
        text-align: left;
        float: left;
        color: #4C5157;
    }

    .search-btn .nline:nth-child(3) div:nth-child(2) {
        font-size: 0.7rem;
        float: right;
        color: #4C5157;
    }

.xdevice {
    display: block;
}
.header .main-header .header-left .header-search .box-header-search {
    position: relative !important;
}

/* Autocomplete suggestions popup */
.autocomplete-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    box-sizing: border-box;
    max-height: 360px;
    overflow-y: auto;
    background-color: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(25, 25, 25, 0.06), 0 16px 40px rgba(25, 25, 25, 0.12);
    z-index: 1000;
    padding: 6px;
    animation: acFadeIn 0.18s ease-out;
}

@keyframes acFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom scrollbar */
.autocomplete-suggestions::-webkit-scrollbar {
    width: 6px;
}
.autocomplete-suggestions::-webkit-scrollbar-track {
    background: transparent;
}
.autocomplete-suggestions::-webkit-scrollbar-thumb {
    background: #D4D8DF;
    border-radius: 4px;
}
.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
    background: #B0B6C2;
}

/* Suggestion row */
.autocomplete-suggestion {
    padding: 10px 12px;
    cursor: pointer;
    background-color: #FFFFFF;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}

    .autocomplete-suggestion + .autocomplete-suggestion {
        margin-top: 2px;
    }

    /* Thumbnail */
    .autocomplete-suggestion img {
        width: 44px;
        height: 44px;
        margin-right: 12px;
        border-radius: 8px;
        border: 1px solid #EEF0F3;
        background-color: #FAFBFD;
        object-fit: contain;
        padding: 3px;
        flex-shrink: 0;
    }

    /* Label */
    .autocomplete-suggestion span {
        flex-grow: 1;
        text-align: left;
        color: #1A1D24;
        font-weight: 500;
        font-family: 'DM Sans', 'SF Pro Regular', sans-serif;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Trailing chevron */
    .autocomplete-suggestion::after {
        content: "";
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        margin-left: 8px;
        border-top: 1.5px solid #C5CAD3;
        border-right: 1.5px solid #C5CAD3;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    /* Hover / keyboard-active state */
    .autocomplete-suggestion:hover {
        background-color: #EEF4FE !important;
        box-shadow: inset 3px 0 0 #4285f4;
    }

        .autocomplete-suggestion:hover span {
            color: #1565d8;
        }

        .autocomplete-suggestion:hover::after {
            opacity: 1;
            border-color: #4285f4;
            transform: rotate(45deg) translate(2px, -2px);
        }

        .autocomplete-suggestion:hover img {
            border-color: #C9DDFB;
        }


/* ========== Promo carousel (Swiper, 2 cols × 2 rows, autoplay + loop) ========== */
.promo-grid-section {
    width: calc(100vw - var(--sbw, 0px));
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw + var(--sbw, 0px) / 2);
    margin-right: calc(-50vw + var(--sbw, 0px) / 2);
    padding: 28px 0 8px;
    background: transparent;
}
.promo-grid-section .container,
.promo-grid-section .promo-carousel,
.promo-grid-section .promo-swiper,
.promo-grid-section .swiper-wrapper,
.promo-grid-section .swiper-slide,
.promo-grid-section .promo-col {
    background: transparent !important;
    box-shadow: none;
}
/* Kill the global `.swiper-wrapper { gap: 10px }` from site.css for this carousel —
   row/column gaps are now owned by .promo-grid below. */
.promo-grid-section .swiper-wrapper {
    gap: 0 !important;
}
/* Each swiper-slide is a full-width page now. Strip the global .swiper-slide chrome
   (padding/white-space/text-align/background from site.css) so .promo-grid is the sole
   owner of every gap and edge inside the page. Vertical margins are forced to 0; the
   horizontal margin is left alone so Swiper's spaceBetween (8px) can apply between pages. */
.promo-grid-section .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    text-align: initial !important;
    white-space: normal !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Kill ALL hover animations across the promo carousel — no bounce, scale, jump, transition.
   (Border-color change on .promo-card:hover still works because it has no transition timing.) */
.promo-grid-section .swiper-slide,
.promo-grid-section .promo-col,
.promo-grid-section .promo-card,
.promo-grid-section .promo-card *,
.promo-grid-section .promo-card-media,
.promo-grid-section .promo-card-body,
.promo-grid-section .promo-card-title,
.promo-grid-section .promo-card-eyebrow,
.promo-grid-section .promo-card-cta,
.promo-grid-section .promo-card-cta svg {
    transition: none !important;
    animation: none !important;
}
.promo-grid-section .promo-card:hover,
.promo-grid-section .promo-card:hover *,
.promo-grid-section .promo-card-media:hover,
.promo-grid-section .promo-card-cta:hover {
    transform: none !important;
}
/* Override site.css `.swiper-slide:hover { transform: scale(1.05); background: #ddd }` */
.promo-grid-section .swiper-slide,
.promo-grid-section .swiper-slide:hover {
    transform: none !important;
    background: transparent !important;
}
.promo-grid-section .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (min-width: 768px) {
    .promo-grid-section .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
.promo-carousel {
    position: relative;
}
.promo-swiper {
    overflow: hidden;
    padding: 4px 16px 8px;
}

@media (min-width: 768px) {
 .promo-swiper {
     padding: 4px 64px 8px;
}

}

/* Each .swiper-slide is a pre-chunked page of up to 8 items. The grid enforces
   the row count, so we never get the extra-row artifact Swiper's slidesPerColumn
   produces with uneven totals. */
.promo-grid-section .promo-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    .promo-grid-section .promo-grid {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}

.promo-swiper .promo-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* gap removed: .promo-col only wraps the .promo-card now, so flex-gap had nothing to apply to
       but still contributed to box sizing in some browsers. */
    gap: 0 !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
}
@media (min-width: 768px) {
    .promo-swiper .promo-col {
        gap: 0 !important;
    }
}
.promo-grid-section .promo-card {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 768px) {
    .promo-grid-section .promo-card {
        width: 100% !important;
    }
}
.promo-grid-section .swiper-slide {
    transition: none !important;
}
.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #ECEFF4;
    color: #1A1D24;
    text-decoration: none;
    transition: none !important;
    isolation: isolate;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .promo-card {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0;
        border-radius: 16px;
    }
}
.promo-card:hover {
    border-color: var(--accent, #4285f4);
    color: #1A1D24;
    text-decoration: none;
}
.promo-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
}
.promo-card:hover .promo-card-media {
    transform: none;
}
.promo-card::before {
    display: none;
}
.promo-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    padding: 10px 4px 12px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    flex: 1;
}
@media (min-width: 768px) {
    .promo-card-media {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        opacity: 1;
        inset: auto;
        z-index: auto;
    }
    .promo-card::before {
        display: none;
    }
    .promo-card-body {
        gap: 6px;
        padding: 12px 6px 14px;
        margin: 0;
        max-width: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex: 1;
    }
}
/* RTL: promo cards keep the LTR stacked + centered layout (media on top, body centered below).
   Only flip directional icons inside the card. */
[dir="rtl"] .promo-card-cta svg {
    transform: scaleX(-1) !important;
}
@media (min-width: 768px) {
    .promo-card-title {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}
.promo-card-eyebrow {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--accent, #4285f4);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .promo-card-eyebrow {
        font-size: 0.78rem;
        white-space: normal;
    }
}
.promo-grid-section .promo-card-title {
    font-family: 'SF Pro Bold', 'DM Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1A1D24;
    margin: 0 !important;
    text-align: center;
    /* Flex container that vertically centers the inner span within 2 lines of reserved height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(1.2em * 2) !important;
    min-height: calc(1.2em * 2) !important;
    max-height: calc(1.2em * 2) !important;
    overflow: hidden !important;
    white-space: normal !important;
}
/* Inner span does the actual 2-line clamp with ellipsis */
.promo-grid-section .promo-card-title > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}
@media (min-width: 768px) {
    .promo-grid-section .promo-card-title {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        min-height: calc(1.25em * 2) !important;
        max-height: calc(1.25em * 2) !important;
    }
}
.promo-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 4px auto 0;
    padding: 6px 10px;
    background: var(--accent, #4285f4);
    color: #FFFFFF;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    transition: none !important;
    width: fit-content;
    align-self: center;
    box-shadow: 0 3px 8px rgba(66, 133, 244, 0.22);
}
.promo-card-cta svg {
    width: 11px;
    height: 11px;
}
@media (min-width: 768px) {
    .promo-card-cta {
        gap: 8px;
        margin: 8px auto 0;
        padding: 10px 18px;
        font-size: 0.85rem;
        align-self: center;
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
    }
    .promo-card-cta svg {
        width: 14px;
        height: 14px;
    }
}
.promo-card:hover .promo-card-cta,
.promo-card:hover .promo-card-cta:hover {
    color: #FFFFFF !important;
}
.promo-card:hover .promo-card-eyebrow {
    color: var(--accent, #4285f4) !important;
}
.promo-card:hover .promo-card-title {
    color: #1A1D24 !important;
}
/* Don't reset the SVG transform on hover — the [dir="rtl"] scaleX(-1) needs to persist */
.promo-card-cta svg {
    transition: transform 0.2s ease;
}

.promo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E6EAF0;
    color: #1A1D24;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    z-index: 5;
}
.promo-nav:hover:not(:disabled) {
    background: #4285f4;
    color: #FFFFFF;
    border-color: #4285f4;
    box-shadow: 0 8px 22px rgba(66, 133, 244, 0.30);
}
.promo-nav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.promo-nav.prev { left: 12px; }
.promo-nav.next { right: 12px; }
/* RTL: swap the prev/next button positions and mirror their chevron icons */
[dir="rtl"] .promo-nav.prev { left: auto; right: 12px; }
[dir="rtl"] .promo-nav.next { right: auto; left: 12px; }
[dir="rtl"] .promo-nav svg { transform: scaleX(-1); }
@media (min-width: 768px) {
    .promo-nav { display: inline-flex; }
}


/* ========== Mobile hamburger + category drawer ========== */
.mobile-menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus-visible {
    background-color: #F2F4F8;
    outline: none;
}
.mobile-menu-trigger svg {
    display: block;
}

@media (max-width: 991.98px) {
    .mobile-menu-trigger {
        display: inline-flex;
    }
}

/* ========== Desktop category bar (under header) ========== */
.category-bar {
    display: none;
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid #ECEFF4;
    border-bottom: 1px solid #E6EAF0;
    position: relative;
    z-index: 998;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
@media (min-width: 992px) {
    .category-bar {
        display: block;
    }
}

/* The header is position:fixed on every page (see .sticky-bar.stick in style.css), so it's
   lifted out of the document flow and would sit on top of the page body. Reserve its height
   as top padding so content always clears it — on EVERY page and EVERY width, not just the
   desktop category-bar case this used to cover.

   --header-pad is kept synced to the live (collapsing) header height by home.js.
   :has(header.header) scopes the rule to pages that actually render a header, so header-less
   pages (WithHAndF=false) get no phantom top gap; the home page (.bg) is excluded because it
   manages its own hero offset. */
body:has(header.header):not(.bg) main.main {
    padding-top: var(--header-pad, 76px);
}
.category-bar-inner {
    max-width: inherit;
    padding: 0 24px;
    height: 50px;
    display: flex;
    align-items: stretch;
    gap: 0;
}
.cat-bar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-block: 0;
    padding-inline: 0 18px;   /* end-side padding only; logical so it flips for RTL */
    background: transparent;
    border: none;
    color: #1A1D24;
    font-family: 'DM Sans', 'SF Pro Bold', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-right: 1px solid #ECEFF4;
    position: relative;
    transition: color 0.15s ease;
}
/* underline-grow hover (matches .cat-bar-link) — no background fill */
.cat-bar-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background: #3C50E0;
    border-radius: 0 0 3px 3px;
    transition: width 0.2s ease-out;
}
.cat-bar-trigger:hover,
.cat-bar-trigger:focus-visible {
    color: #3C50E0;
    background-color: transparent;
    outline: none;
}
.cat-bar-trigger:hover::before,
.cat-bar-trigger:focus-visible::before {
    width: 100%;
}
[dir="rtl"] .cat-bar-trigger::before {
    left: auto;
    right: 0;
}
.cat-bar-trigger svg {
    flex-shrink: 0;
}
.cat-bar-links {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-bar-links::-webkit-scrollbar {
    display: none;
}
.cat-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    color: #1A1D24;
    font-family: 'DM Sans', 'SF Pro Regular', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: color 0.15s ease, background-color 0.15s ease;
    position: relative;
}
/* NextMerce-style hover: a blue bar that grows from the left edge along the top */
.cat-bar-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background: #3C50E0;
    border-radius: 0 0 3px 3px;
    transition: width 0.2s ease-out;
}
.cat-bar-link:hover,
.cat-bar-link:focus-visible {
    color: #3C50E0;
    background-color: transparent;
    outline: none;
}
.cat-bar-link:hover::before,
.cat-bar-link:focus-visible::before {
    width: 100%;
}
[dir="rtl"] .cat-bar-link::before {
    left: auto;
    right: 0;
}
.cat-bar-link svg {
    flex-shrink: 0;
    color: #8B92A1;
    transition: color 0.15s ease, transform 0.15s ease;
}
.cat-bar-link:hover svg {
    color: #3C50E0;
    transform: translateY(1px);
}

/* ========== Desktop mega-menu panel (categories drill-down) ========== */
.category-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid #ECEFF4;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 999;
}
@media (min-width: 992px) {
    .category-mega {
        display: block;
    }
}
.category-mega.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.category-mega-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 32px 28px;
}
.category-mega-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ECEFF4;
}
.cmega-title {
    flex: 1;
    font-family: 'DM Sans', 'SF Pro Bold', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1A1D24;
    letter-spacing: 0.2px;
}
.cmega-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #5A6273;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cmega-close:hover {
    background: #F5F8FE;
    color: #4285f4;
    border-color: #DDE7F8;
}
/* Two-pane body: left rail with all top-level categories, right panel with the selected category's columns */
.cmega-body {
    display: flex;
    align-items: stretch;
    gap: 24px;
    min-height: 420px;
    max-height: calc(100vh - 220px);
}
.cmega-rail {
    flex: 0 0 240px;
    border-right: 1px solid #ECEFF4;
    padding-right: 16px;
    overflow-y: auto;
}
.cmega-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmega-rail-item {
    margin: 0;
    padding: 0;
}
.cmega-rail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #1A1D24;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cmega-rail-link:hover,
.cmega-rail-link:focus-visible {
    background: #F5F8FE;
    color: #1565d8;
    outline: none;
}
.cmega-rail-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Category icons (leading the label) ===== */
.cmega-rail-icon,
.mobile-menu-icon,
.cat-bar-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5A6273;
}
.cmega-rail-arrow {
    flex-shrink: 0;
    color: #8B92A1;
    transition: color 0.15s ease, transform 0.15s ease;
}
.cmega-rail-item.active .cmega-rail-link {
    background: #EAF1FE;
    color: #1565d8;
    font-weight: 600;
}
.cmega-rail-item.active .cmega-rail-arrow {
    color: #1565d8;
    transform: translateX(2px);
}
.cmega-rail-link:hover .cmega-rail-arrow {
    color: #1565d8;
    transform: translateX(2px);
}
.cmega-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.cmega-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 32px;
}
@media (min-width: 1200px) {
    .cmega-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.cmega-col {
    min-width: 0;
    animation: cmegaItemIn 0.22s ease-out both;
}
.cmega-col-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cmega-col-heading {
    display: block;
    font-family: 'DM Sans', 'SF Pro Bold', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1A1D24;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 1px solid #ECEFF4;
    transition: color 0.15s ease;
}
a.cmega-col-heading:hover {
    color: #1565d8;
}
.cmega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmega-col-list li {
    margin: 0;
    padding: 0;
}
.cmega-col-list a {
    display: block;
    padding: 6px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.3;
    color: #5A6273;
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.cmega-col-list a:hover,
.cmega-col-list a:focus-visible {
    color: #1565d8;
    padding-left: 4px;
    outline: none;
}
@keyframes cmegaItemIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.category-mega-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 990;
}
@media (min-width: 992px) {
    .category-mega-backdrop {
        display: block;
    }
}
.category-mega-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1099;
}
.mobile-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;                 /* visible viewport (excl. mobile chrome) so the footer never falls below the fold */
    width: min(85vw, 340px);
    background: #FFFFFF;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    background: linear-gradient(135deg, #4285f4 0%, #2b6fdb 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
    position: relative;
    z-index: 1;
}
.mobile-menu-title {
    flex: 1;
    font-family: 'DM Sans', 'SF Pro Bold', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    color: #FFFFFF;
}
.mobile-menu-back,
.mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
.mobile-menu-back:hover,
.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't chain-scroll (or rubber-band) to the page behind the drawer */
    -webkit-overflow-scrolling: touch;
    background: #FFFFFF;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0px 0;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    color: #1A1D24;
    font-family: 'DM Sans', 'SF Pro Regular', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid #F1F3F7;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mobile-menu-item:last-child {
    border-bottom: none;
}
.mobile-menu-item:hover,
.mobile-menu-item:active {
    background-color: #EEF4FE;
    color: #1565d8;
}

.mobile-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-chevron {
    flex-shrink: 0;
    color: #8B92A1;
    transition: color 0.15s ease, transform 0.15s ease;
}
.mobile-menu-item:hover .mobile-menu-chevron {
    color: #4285f4;
    transform: translateX(2px);
}

/* One lightweight fade on the whole list per render (re-triggered from JS via .mm-animate),
   replacing the old per-item stagger that left items hidden/unclickable for ~1s on every
   drill-in and Back tap. */
.mobile-menu-list.mm-animate {
    animation: mobileMenuListIn 0.18s ease-out;
}
@keyframes mobileMenuListIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* iOS-safe scroll lock: pin the body in place (JS sets `top` to -scrollY) so the
   page can't rubber-band behind the drawer and get stuck mid-overscroll. */
body.mobile-menu-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Accordion: inline children sub-list */
.mobile-menu-children {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #F1F3F7;
}

/* Depth-1 child items */
.mobile-menu-item--child {
    padding-left: 32px;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Depth-2+ grandchild items */
.mobile-menu-item.mm-depth-2 {
    padding-left: 48px;
    font-size: 0.875rem;
}
.mobile-menu-item.mm-depth-2 ~ .mobile-menu-children .mobile-menu-item {
    padding-left: 60px;
}

/* Chevron rotates down when expanded */
.mobile-menu-chevron.mm-expanded {
    transform: rotate(90deg);
    color: #4285f4;
}
.mobile-menu-item:hover .mobile-menu-chevron.mm-expanded {
    transform: rotate(90deg);
}

/* "View All" row at the bottom of an expanded accordion group */
.mobile-menu-item--view-all {
    color: #1565d8;
    font-size: 0.8rem;
    font-weight: 500;
}
.mobile-menu-item--view-all:hover,
.mobile-menu-item--view-all:active {
    color: #0d47a1;
}



/* Add to Favorite Button */
.addfavorite {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    color: #202124;
    font-size: 0.875rem;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    margin: 10px;
    transition: background-color 0.3s ease;
}

    .addfavorite:hover {
        background-color: #f1f3f4;
    }

/* Popup Overlay */
/* Overlay (dark background) */
.add-shortcut-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
    z-index: 1000; /* Ensure it sits on top of other content */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

/* Popup Content */
.add-shortcut-popup-content {
    background-color: #fff;
    width: 400px;
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* Soft shadow */
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Close Button (�) */
.add-shortcut-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #5f6368;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .add-shortcut-popup .close-btn:hover {
        color: #202124;
    }

/* Title */
.add-shortcut-popup h3 {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #202124;
    font-weight: normal;
}

/* Form Elements */
.add-shortcut-popup label {
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-weight: 500;
    display: block;
}

.add-shortcut-popup select {
    width: 100%;
    border: none;
    background-color: rgb(241, 243, 244);
    border-bottom: 1px solid #474747;
    padding: 6px;
    margin-bottom: 20px;
}

.add-shortcut-popup input[type="text"]:focus, .add-shortcut-popup input[type="url"]:focus {
    border-color: #4285f4;
    box-shadow: 0 0 5px rgba(66, 133, 244, 0.3);
}

/* Button Container */
.add-shortcut-popup .popup-buttons {
    display: flex;
    justify-content: end;
    gap: 10px;
}

/* Button Styles */
.add-shortcut-popup .popup-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid #4285f4;
    background-color: #357ae8;
    color: #FFF;
    border-radius: 24px;
}

.add-shortcut-popup .cancel-btn {
    border: 1px solid #4285f4;
    background-color: #f1f3f4;
    color: #4285f4;
}

    .add-shortcut-popup .popup-btn:hover,
    .add-shortcut-popup .cancel-btn:hover {
        transform: scale(1.03);
    }

.hideimg {
    display: none !important;
}

.top_17 {
    top: -17px;
    position: relative;
}

.d_187_99 i {
    font-size: 1.8em;
    display: block;
    color: blue;
    margin-bottom: 12px;
}

.content_body_home {
    position: relative;
    max-width: 1019px;
    margin: 0 auto;
    display: inline-block;
}



/* Responsive Design */
@media (max-width: 768px) {


    .search-bar {
        width: 94%;
    }

    .search-btn {
        width: calc(49% - 10px);
        font-size: 0.75rem;
    }

        .search-btn.lg {
            width: calc(49% - 10px) !important;
        }

    .search-buttons {
        max-width: 94vw;
    }

    .search-btn.lg.h_80 {
        width: 98% !important;
    }
}



@media (max-width: 670px) {


    .search-btn .nline:nth-child(2) div {
        font-size: 0.8rem !important;
    }

    .xdevice {
        height: auto !important;
        padding: 10px 11px !important;
    }

    .search-btn .nline:nth-child(2) div, .search-btn .nline:nth-child(3) div {
        float: inherit !important;
        text-align: left;
    }

    .search-btn .nline:nth-child(2), .search-btn .nline:nth-child(3) {
        height: auto;
    }

    .search-btn.lg {
        font-size: 1.3rem;
    }

    .search-btn {
        padding: 10px 7px;
        box-sizing: border-box;
        flex-basis: 41%;
    }
}


@media (max-width: 598px) {
    .xdevice.search-btn.lg {
        width: 100% !important;
        margin-bottom: 15px;
        box-sizing: border-box;
        flex-basis: 100%;
    }

    .sugg.per_line.search-buttons {
        /*display: block !important;*/
    }
}

/* ============================================================
   RTL adjustments — flip directional icons, swap left/right
   positions, and reverse hover translates so right-pointing
   affordances become left-pointing.
   ============================================================ */

/* Mega panel: rail arrow flips and reverses its hover slide */
[dir="rtl"] .cmega-rail-arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .cmega-rail-link:hover .cmega-rail-arrow,
[dir="rtl"] .cmega-rail-item.active .cmega-rail-arrow {
    transform: scaleX(-1) translateX(2px);
}

/* Cat-bar link chevron (the small down-arrow flips too if the bar items were nested-toggles;
   for the current "redirect-only" links it's a no-op but kept for completeness) */
[dir="rtl"] .cat-bar-link svg {
    transform: scaleX(-1);
}

/* Carousel section header arrows ( <div class="slick-next slick-arrow"><i class="fa fa-arrow-right"></i> )
   The header indicator next to "Mobile Phones" / "WorldCup Offer" etc. */
[dir="rtl"] .carousel-header-controls .slick-next.slick-arrow,
[dir="rtl"] .carousel-header-controls .slick-next.slick-arrow i.fa-arrow-right {
    transform: scaleX(-1);
}

/* Hero banner swiper: swap prev/next absolute positions so "next" stays on the leading edge
   (visually on the left in RTL). Also flip the arrow glyphs. */
[dir="rtl"] .home-hero-swiper .swiper-button-prev {
    left: auto;
    right: 12px;
}
[dir="rtl"] .home-hero-swiper .swiper-button-next {
    right: auto;
    left: 12px;
}
@media (min-width: 768px) {
    [dir="rtl"] .home-hero-swiper .swiper-button-prev {
        left: auto;
        right: 24px;
    }
    [dir="rtl"] .home-hero-swiper .swiper-button-next {
        right: auto;
        left: 24px;
    }
}
[dir="rtl"] .home-hero-swiper .swiper-button-prev::after,
[dir="rtl"] .home-hero-swiper .swiper-button-next::after {
    transform: scaleX(-1);
    display: inline-block;
}

/* Promo carousel section nav arrows */
[dir="rtl"] .promo-nav svg {
    transform: scaleX(-1);
}