.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) adib's spec for the phone footer, in order: logo / website description (Settings > SEO Description) / social links / "Payment options" + icons / "Download our app" + badges / dark background / tiny line / copyright text Markup: website/includes/footer/mobile_footer.blade.php, included at the top of footer_theme1. The desktop markup (.tt-footer-col / .tt-footer-custom) is hidden below 789px rather than rearranged, and this block is hidden from 790px up. 789px is the theme's own footer breakpoint - the width at which theme.css switches the columns into accordions - so the two layouts swap where the theme already changes behaviour. Categories, Important Links, Contact Us and Newsletter are deliberately absent on phones (adib's call): the sticky bottom nav already covers Home / Categories / Cart / Account. Alignment (round 3): everything aligns to the start of the reading direction - left in English, right in Arabic - via the .gw-mfooter--en / --ar modifier the blade sets. It cannot key off the document: this site's is always lang="en" with no dir="rtl", so :lang()/[dir] selectors never match. ========================================================================== */ .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; } /* Two things need explaining here: 1. `background` needs !important - theme.css carries a blanket `footer, footer > * { background-color: #fff !important }`, the same rule that was defeating the theme's own .f-mobile-dark styling. 2. The box-shadow + clip-path pair (round 3, adib: "there is a gap on right, dark background should cover the gaps"). Several pages scroll ~10px sideways - a bootstrap .row with negative margins on the details page, measured at 375px - and when the page is scrolled or rubber- banded right, a footer that is exactly 100% wide leaves the exposed strip white. A huge spread shadow in the same colour paints the band far past both edges; clip-path: inset(0 -100vmax) keeps that paint on the horizontal axis only so it cannot bleed above or below the footer. Chosen over `overflow-x: hidden` on html/body, which would fix the symptom globally but risks breaking the sticky header. */ #tt-footer .gw-mfooter { display: block; background: #1d1d1d !important; box-shadow: 0 0 0 100vmax #1d1d1d; clip-path: inset(0 -100vmax); padding: 30px 0 18px; text-align: left; } #tt-footer .gw-mfooter--ar { text-align: right; } #tt-footer .gw-mfooter .container { max-width: 420px; padding-left: 20px; padding-right: 20px; } #tt-footer .gw-mfooter__logo { display: inline-block; line-height: 0; } #tt-footer .gw-mfooter__logo img { height: 62px; width: auto; max-width: 200px; object-fit: contain; } #tt-footer .gw-mfooter__desc { margin: 16px auto 0 0; max-width: 340px; color: #a9a9a9; font-size: 12.5px; line-height: 1.65; } #tt-footer .gw-mfooter--ar .gw-mfooter__desc { margin: 16px 0 0 auto; } /* Rows. Each of these needs the #tt-footer prefix to outrank `footer .tt-social-icon { justify-content: center }` in gulfweb.css. */ #tt-footer .gw-mfooter__social, #tt-footer .gw-mfooter__payments .tt-payment-list, #tt-footer .gw-mfooter .gw-app-badges__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; } #tt-footer .gw-mfooter--ar .gw-mfooter__social, #tt-footer .gw-mfooter--ar .gw-mfooter__payments .tt-payment-list, #tt-footer .gw-mfooter--ar .gw-app-badges__row { justify-content: flex-end; } /* Social row. The coloured circle itself (.tt-social-badge) is styled in gulfweb.css and shared with the header - only placement is set here. */ #tt-footer .gw-mfooter__social { gap: 12px; margin: 20px 0 0 !important; padding: 0 !important; list-style: none; } #tt-footer .gw-mfooter__title { margin: 26px 0 12px; color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } #tt-footer .gw-mfooter__payments .tt-payment-list { gap: 8px; margin: 0; padding: 0; list-style: none; } #tt-footer .gw-mfooter__payments .tt-payment-list li { margin: 0 !important; padding: 0 !important; } #tt-footer .gw-mfooter__payments .tt-payment-list li a { display: block; line-height: 0; } #tt-footer .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. */ #tt-footer .gw-mfooter .gw-app-badges { display: block; } #tt-footer .gw-mfooter .gw-app-badges__row { flex-wrap: nowrap; gap: 12px; } #tt-footer .gw-mfooter .gw-app-badges__link img { height: 40px; } /* the "tiny line" */ #tt-footer .gw-mfooter__rule { margin: 26px 0 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .13); } #tt-footer .gw-mfooter__copy, #tt-footer .gw-mfooter__copy * { color: #8a8a8a !important; font-size: 12px; line-height: 1.6; margin: 0; } } @media only screen and (max-width: 359px) { #tt-footer .gw-mfooter .gw-app-badges__link img { height: 34px; } #tt-footer .gw-mfooter__payments .tt-payment-list img { height: 24px; } } /* Back-to-top removed everywhere (adib, 2026-09-13): "remove back to top icon from desktop everywhere", then "remove back to top" once he saw it still sitting under the new mobile footer. The element is rendered once for the whole site in website/includes/footer/index.blade.php (~line 368), so this one rule covers every page in both layouts. Left in the markup rather than deleted, so it is one line to bring back. */ .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; /* 1fr spacers above/below the qty+remove pair (rows 2-3) so that pair sits vertically centered against the taller title+price column, instead of stuck at the top (adib, 2026-09-14: "align qty and x button to mid not top"). */ grid-template-rows: 1fr auto auto 1fr; column-gap: 8px; row-gap: 6px; } .tt-shopcart-table-02 table td:has(.tt-product-img) { grid-column: 1; grid-row: 1 / -1; width: auto !important; padding-right: 0 !important; } .tt-shopcart-table-02 table td:has(.tt-title) { grid-column: 2; grid-row: 1 / -1; padding-left: 0 !important; padding-right: 0 !important; } .tt-shopcart-table-02 table td:has(.detach-quantity-desctope) { grid-column: 3; grid-row: 2; justify-self: center; padding: 0 !important; } .tt-shopcart-table-02 table td:has(.deleteFromCart) { grid-column: 3; grid-row: 3; justify-self: center; 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; } } /* Mini-cart dropdown (header cart icon popup) remove (X) button invisible on mobile (adib, 2026-09-14): "x button next to each item is not showing". Root cause: theme.css's rule for this exact context (header .tt-cart .tt-cart-layout .tt-cart-content .tt-cart-list .tt-item-close .tt-btn-close) never sets `display` on the button, so it falls back to the browser default for an tag: `display: inline`. The sitewide round-icon redesign (gulfweb.css's global .tt-btn-close rule, width/height/background-image all !important) relies entirely on width/height to size the circle - but width/height are ignored on `display: inline` elements, so with no text content the button collapsed to a near-zero box and rendered off to the left of the viewport. Confirmed live: getBoundingClientRect() showed width 2px, x -30 (off-screen) before this fix, 32x32px in the right place after. The cart page's own remove button (.tt-shopcart-table-02 .tt-btn-close) never had this problem because that context's theme.css rule already sets display:inline-block - this just brings the mini-cart dropdown's version in line with it. */ .tt-item-close .tt-btn-close { display: inline-block; }