.tt-desktop-header a[href$="track-order"],
.tt-stuck-parent-menu a[href$="track-order"],
.tt-desktop-header a[href$="contactus"],
.tt-stuck-parent-menu a[href$="contactus"] {
    display: none !important;
}
.tt-col-list:not(.brands-dropdown) {
    flex-wrap: wrap;
}
.tt-col-list:not(.brands-dropdown) .col-sm-4 {
    min-width: 33.3% !important;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
/* Removed (adib, 2026-09-13): this block used to hide every footer column
   below 490px, which is why the mobile footer had no Categories / Important
   Links / Contact Us / Newsletter at all - just a logo, copyright and payment
   icons stacked down the page. Replaced by the two-column dark mobile footer
   at the bottom of this file. */

/* Listing video preview (adib, 2026-09-13) - play badge + hover preview on
   product card thumbnails that have a YouTube video attached. Markup:
   website/includes/productCard.blade.php. Hover behavior: main.js
   (delegated mouseenter/mouseleave on .tt-image-box). */
.tt-image-box {
    position: relative;
}
/* Restyled (adib, 2026-09-14): "change play button keep it without circle
   and in white color only and a bit bigger" - dropped the circular dark
   background, kept solid white, bumped the icon up from 11px to 22px. A
   subtle dark drop-shadow is kept (not a background shape) purely so the
   white glyph stays visible over light/white product photos - without it
   the badge would vanish on most of this store's product images. */
.tt-product-video-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    width: 28px;
    height: 28px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .5);
    pointer-events: none;
}
.tt-product-video-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    background: #000;
    pointer-events: none;
}
.tt-product-video-preview.is-active {
    display: block;
}
.tt-product-video-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Mobile footer (adib, 2026-09-13)

   Second pass. The first attempt reflowed the desktop footer's four accordion
   columns into a two-column dark grid; adib then specified the mobile footer
   exactly:

       logo / website description (Settings > SEO Description) / social links /
       "Payment options" + icons / "Download our app" + badges / dark
       background / tiny line / copyright

   So mobile now renders its own block - website/includes/footer/
   mobile_footer.blade.php, included at the top of footer_theme1 - and the
   desktop markup is hidden below 789px instead of being rearranged. Categories,
   Important Links, Contact Us and Newsletter are deliberately gone from the
   phone footer (adib's call): the sticky bottom nav already covers Home /
   Categories / Cart / Account.

   789px is the theme's own footer breakpoint (the width at which theme.css
   switches the columns into accordions), so the two layouts swap at exactly the
   point the theme already changes behaviour.
   ========================================================================== */
.gw-mfooter {
    display: none;
}

@media only screen and (max-width: 789px) {

    /* Desktop footer off, mobile footer on. */
    #tt-footer .tt-footer-col,
    #tt-footer .tt-footer-custom {
        display: none !important;
    }

    /* background needs !important: theme.css carries a blanket
       `footer, footer > * { background-color: #fff !important }`, which is the
       same rule that was defeating the theme's own .f-mobile-dark styling. */
    #tt-footer .gw-mfooter {
        display: block;
        background: #1d1d1d !important;
        padding: 30px 0 18px;
        text-align: center;
    }

    .gw-mfooter .container {
        max-width: 420px;
    }

    .gw-mfooter__logo {
        display: inline-block;
        line-height: 0;
    }

    .gw-mfooter__logo img {
        height: 62px;
        width: auto;
        max-width: 200px;
        object-fit: contain;
    }

    .gw-mfooter__desc {
        margin: 16px auto 0;
        max-width: 340px;
        color: #a9a9a9;
        font-size: 12.5px;
        line-height: 1.65;
    }

    /* Social row. .tt-social-badge itself (the coloured circle) is styled in
       gulfweb.css and shared with the header - only the row placement is set
       here. */
    .gw-mfooter__social {
        justify-content: center;
        gap: 12px;
        margin: 20px 0 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .gw-mfooter__title {
        margin: 26px 0 12px;
        color: #fff !important;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .gw-mfooter__payments .tt-payment-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gw-mfooter__payments .tt-payment-list li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .gw-mfooter__payments .tt-payment-list li a {
        display: block;
        line-height: 0;
    }

    .gw-mfooter__payments .tt-payment-list img {
        height: 28px;
        width: auto;
        display: block;
    }

    /* The badge partial is included with variant 'mfooter', so neither the
       --desktop nor the --mobile visibility rule in gulfweb.css applies and the
       partial's own label is skipped in favour of .gw-mfooter__title above. */
    .gw-mfooter .gw-app-badges {
        display: block;
    }

    .gw-mfooter .gw-app-badges__row {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
    }

    .gw-mfooter .gw-app-badges__link img {
        height: 40px;
    }

    /* the "tiny line" */
    .gw-mfooter__rule {
        margin: 26px 0 16px;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .13);
    }

    .gw-mfooter__copy,
    .gw-mfooter__copy * {
        color: #8a8a8a !important;
        font-size: 12px;
        line-height: 1.6;
        margin: 0;
    }
}

@media only screen and (max-width: 359px) {
    .gw-mfooter .gw-app-badges__link img {
        height: 34px;
    }

    .gw-mfooter__payments .tt-payment-list img {
        height: 24px;
    }
}

/* Back-to-top removed on desktop (adib, 2026-09-13): "remove back to top icon
   from desktop everywhere". The element is rendered once for the whole site in
   website/includes/footer/index.blade.php, so hiding it here covers every
   page. Kept on mobile, where it is the small chevron above the bottom nav and
   pages are much longer to scroll back up. */
@media only screen and (min-width: 790px) {
    .tt-back-to-top {
        display: none !important;
    }
}

/* Add-to-cart confirmation modal close (X) barely visible on mobile
   (adib, 2026-09-14): reported as "not very clear... showing only 1 line".
   Root cause: theme.css's base rule (.modal .modal-header .close) sets
   color:#ffffff for the close icon, meant for modals with a colored header
   background - #modalDefaultBox (this add-to-cart popup, addtocart_modal.
   blade.php) has no header background (transparent), so a white "X" on a
   white modal is nearly invisible, only the anti-aliased edge of one
   stroke shows. Two other modals in this same theme.css already hit the
   same problem and were fixed the same way (#ModalVerifyAge,
   #ModalMessage - both override to a visible gray) - this just applies
   the same established fix to the add-to-cart modal, which never got it. */
#modalDefaultBox .modal-header .close:not(:hover) {
    color: #999999;
}

/* Mobile shopping-cart row reorganize (adib, 2026-09-14): "qty and x button
   taking lots of spaces, maybe you can make them smaller and below each
   other and use more width for image and name qty and price".
   Root cause of the crowding: theme.css's responsive JS (main.js
   ttShopCart()/insertDesctopeObj()) is supposed to move the qty stepper out
   of its desktop-sized table cell into a compact slot next to the price on
   narrow screens - checked live, this isn't firing on page load (the
   .detach-quantity-mobile slot stays empty), so the full 132x52px desktop
   qty stepper and a 32x32px round remove button both sit in their own
   un-hidden table cells side by side, squeezing the product title column
   down to ~72px (one word per line, per adib's screenshot). Rather than
   depend on that JS, this restyles the row directly with CSS grid at the
   same <= 789px breakpoint the theme already uses for this table - image,
   then title+price (now free to use the reclaimed width), then a single
   narrow column that stacks a shrunk qty stepper above a shrunk remove
   button. Uses :has() instead of :nth-child() so this keeps working if a
   tax column is ever turned on for this store (which would shift index
   numbers). */
@media (max-width: 789px) {
    .tt-shopcart-table-02 table tr {
        display: grid;
        grid-template-columns: 82px 1fr 68px;
        grid-template-rows: 34px auto;
        column-gap: 8px;
        row-gap: 6px;
        align-items: start;
    }
    .tt-shopcart-table-02 table td:has(.tt-product-img) {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: auto !important;
        padding-right: 0 !important;
    }
    .tt-shopcart-table-02 table td:has(.tt-title) {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .tt-shopcart-table-02 table td:has(.detach-quantity-desctope) {
        grid-column: 3;
        grid-row: 1;
        justify-self: center;
        align-self: start;
        padding: 0 !important;
    }
    .tt-shopcart-table-02 table td:has(.deleteFromCart) {
        grid-column: 3;
        grid-row: 2;
        justify-self: center;
        align-self: start;
        padding: 0 !important;
    }
    .tt-shopcart-table-02 .tt-product-img img {
        max-width: 100%;
    }
    /* Smaller qty stepper - scoped to this table only, so the mini-cart
       dropdown and the product-details page (which use this same
       .tt-input-counter.style-01 class in their own separate containers)
       are untouched. */
    .tt-shopcart-table-02 .tt-input-counter.style-01 {
        min-width: 66px;
        max-width: 66px;
    }
    .tt-shopcart-table-02 .tt-input-counter.style-01 input {
        height: 30px;
        font-size: 12px;
    }
    .tt-shopcart-table-02 .tt-input-counter.style-01 span {
        width: 19px;
    }
    .tt-shopcart-table-02 .tt-input-counter.style-01 .minus-btn:before,
    .tt-shopcart-table-02 .tt-input-counter.style-01 .plus-btn:before {
        line-height: 30px;
    }
    /* Smaller remove (X) button - .tt-btn-close is styled globally
       (gulfweb.css, the round icon used for every close/X button sitewide)
       at a fixed 32x32px with !important, so this needs matching
       specificity + !important to win just here on the cart page. */
    .tt-shopcart-table-02 .tt-btn-close.deleteFromCart {
        width: 22px !important;
        height: 22px !important;
        background-size: 9px 9px !important;
    }
}