.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; } /* ========================================================================== Homepage product rows - full width + equal-height cards (adib, 2026-09-14) -------------------------------------------------------------------------- Scoped to #tt-pageContent.tt-home, a class added only on the homepage (website/theme/theme1.blade.php), so product grids on category, search and product-detail pages are untouched. This file is loaded only by this store, so nothing here can reach another tenant on the shared codebase. Measured on the live site before writing any of this: 1. FULL WIDTH. Every product row - carousel or static grid, in all 21 sections - was rendering inside `.container`, capped at max-width:1200px. On a 1440px screen that wasted 225px; on 1920px, 720px. (The outer wrappers differ per section type and some *look* full-width in the DOM, but the cap is always the same inner `.container`.) Removing the cap at >=1025px took cards from 220px to 261px wide at 1440 and 357px at 1920 - the number of products per row is unchanged, because that comes from the per-section data-item/-sm/-md/-lg attributes set in admin, which this does not touch. Bigger product images, same item counts. 2. EQUAL-HEIGHT CARDS. Card heights varied within a row - measured spreads of 12px, 20px and 34px on mobile. Three causes, each fixed below: a. product images overflowed their square box (a 267x280 image made a 218px-tall box where the square is 208px), so rows went ragged; b. `.tt-price` is one line normally but two when a product shows a struck-through "was" price, a 20px difference; c. in "RECOMMENDED FOR YOU" at 115px card width, the "ADD TO CART" button wraps to two lines while an out-of-stock "Details" button does not - a 12px difference. After these rules all 21 sections measure a height spread of exactly 0, at both 375px and 1440px. NOTE ON WHAT IS DELIBERATELY *NOT* HERE: the obvious way to equalise card heights is `display:flex` on `.slick-track` with `align-items:stretch`. That was tried and rejected - it works in English but silently REVERSES carousel order on the Arabic (dir="rtl") homepage, because flex lays items out along the inline axis, which slick does not expect while it positions the track with its own transforms. Verified directly: slide positions went from descending (correct RTL) to ascending after the rule was added. The min-height approach below equalises the same cards with no effect on direction. Do not "simplify" this back to flex on the track. ========================================================================== */ /* Square, non-overflowing product image box (cause 2a) */ .tt-card-ui .tt-product:not(.tt-view) .tt-img { aspect-ratio: 1 / 1; overflow: hidden; display: block; } .tt-card-ui .tt-product:not(.tt-view) .tt-img img { width: 100%; height: 100%; object-fit: contain; } /* Reserve the two-line price slot on every card, discounted or not (cause 2b) */ .tt-card-ui .tt-product:not(.tt-view) .tt-price { min-height: 40px; } /* Reserve the two-line button slot so "ADD TO CART" and "Details" match (cause 2c) */ .tt-card-ui .tt-product:not(.tt-view) .tt-product-inside-hover .tt-row-btn:first-child { min-height: 47px; } /* Full-width product rows on desktop (point 1). Matches carousels and static grids alike via :has(.tt-product) - already used elsewhere in this file and supported in every current browser. Below 1025px the theme's own mobile padding applies and this does nothing. */ @media (min-width: 1025px) { #tt-pageContent.tt-home .container-indent > .container:has(.tt-product) { max-width: none; width: 100%; padding-left: 20px; padding-right: 20px; } } /* ========================================================================== Homepage UI pass 2 (adib, 2026-09-14) - card styling, spacing, headings -------------------------------------------------------------------------- Companion to the full-width / equal-height block above; same #tt-pageContent .tt-home scoping, so category, search and product pages are untouched. The half-card "peek" that goes with this is JS, in theme1.blade.php. ========================================================================== */ /* Slightly darker page so the now-white cards read as separate surfaces. Set on the page-content wrapper rather than so the header and footer keep their own backgrounds. */ .tt-card-ui { background-color: #eef0f2; } /* Rounded white cards. The radius is repeated on .tt-image-box because the product image is the top edge of the card - without it the image's square corners poke through the rounded card corner. overflow:hidden is kept on the image box only, never on .tt-product itself, so the wishlist tooltip and the hover video preview can still escape the card bounds. */ .tt-card-ui .tt-product:not(.tt-view) { background: #fff; border-radius: 12px; padding-bottom: 8px; } .tt-card-ui .tt-product:not(.tt-view) .tt-image-box { border-radius: 12px 12px 0 0; overflow: hidden; } .tt-card-ui .tt-product:not(.tt-view) .tt-description { padding-left: 8px; padding-right: 8px; } /* Tighter gutters: was 10px of padding each side of every slide (a 20px gap between cards), now 5px each side (10px gap). The negative margin on the carousel row has to match, or the first and last cards sit inset from the section edge. The second selector catches the static-grid sections (BEST SELLER, SHAPE WEAR, ISLAMIC) which are Bootstrap rows, not carousels. */ #tt-pageContent.tt-home .tt-carousel-products { margin-left: -5px; margin-right: -5px; } #tt-pageContent.tt-home .tt-carousel-products .slick-slide, .tt-card-ui .row:has(.tt-product) > [class*="col-"] { padding-left: 5px; padding-right: 5px; } /* Match the row's negative margin to the tighter column padding, or the first and last cards in a grid sit inset from the section edge. :has(.tt-product) keeps this off the filter sidebar and every other row on these pages. */ .tt-card-ui .row:has(.tt-product) { margin-left: -5px; margin-right: -5px; } /* Section heading: smaller, aligned to the start of the row, with "View all" pushed to the far side. justify-content:space-between and text-align:start are direction-agnostic, so this mirrors correctly on the Arabic homepage with no RTL-specific rule. The link itself is added, gated to this store, in livewire/product/list-section.blade.php. */ #tt-pageContent.tt-home .tt-block-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #tt-pageContent.tt-home .tt-block-title .tt-title { font-size: 17px; line-height: 24px; text-align: start; margin: 0; flex: 1 1 auto; } /* Renamed from .tt-view-all (2026-09-14): the theme already uses that class for the search dropdown's "View all products" button (#viewallsearchresult), so these section links were inheriting its styling - which is where the washed-out #777 came from. Darker and bolder now, as asked. */ #tt-pageContent.tt-home .tt-block-title .tt-section-view-all { flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: underline; color: #191919; } #tt-pageContent.tt-home .tt-block-title .tt-section-view-all:hover { color: var(--primary-color); } /* Keep "View All" clear of the carousel arrows. From 1025px up the theme moves .arrow-location-tab01 arrows to top:-43px, i.e. up into the heading row at the right-hand edge, which is where this link sits - hence adib's "view all is behind next and previous button". Two 38px arrows plus their gaps occupy about 95px, so the heading row reserves 100px on that side. The z-index is belt and braces: the arrows are z-index 7, so this keeps the link above them at any width where they do still coincide. (Adjust the 100px if the link should sit closer to the edge.) */ @media (min-width: 1025px) { #tt-pageContent.tt-home .tt-block-title { padding-right: 100px; } #tt-pageContent.tt-home .tt-block-title .tt-section-view-all { position: relative; z-index: 8; } } /* Mobile: leave only the call to action in the card's button row (adib: "on mobile version just show add to cart button, or view item button if item has option to select"). That behaviour already exists in website/includes/productCard.blade.php - it renders "Details" when $prod->is_attribute or per_pair_item_count > 1, "Add to cart" (or "Pre-order") otherwise, and nothing at all when out of stock - so the only thing to remove is the wishlist heart sitting next to it. NOTE: the other wishlist button, the one overlaid on the image, is opacity:0 until hover, so hiding this one removes wishlist from mobile entirely. That is what was asked for; delete this rule to get it back. */ @media (max-width: 767px) { .tt-card-ui .tt-product:not(.tt-view) .tt-row-btn .tt-btn-wishlist { display: none !important; } } /* ========================================================================== Homepage UI round 3 (adib, 2026-09-14, from a mobile screenshot) Mobile card CTA: a real worded button on every section, and the dead space under it removed. -------------------------------------------------------------------------- Why the button looked different per section: theme.css has .cart-sm-btn{background-color:transparent!important;max-width:30px!important; padding:.1rem!important;aspect-ratio:1/1;font-size:0px!important} Every section built from website/includes/productCard.blade.php puts `cart-sm-btn` on its CTA, so that CTA collapses to a 30px transparent icon-only square. "RECOMMENDED FOR YOU" uses its own inline markup without that class, which is why it was the only row showing a worded button - exactly what adib reported. The label: productCard.blade.php already picks the right destination per product - `addtocartsingle` for a direct add, and a plain link to the product page when `is_attribute` or `per_pair_item_count > 1` (i.e. the customer has to choose something first). Both carry `.tt-btn-addtocart`, so the two are told apart here by `.addtocartsingle` and given short labels via ::after. The full "ADD TO CART" / "Details" text stays in the DOM at font-size:0, so screen readers still announce the real label - only the visible text is shortened. ========================================================================== */ @media (max-width: 767px) { /* A real, full-width button instead of the 30px icon. */ /* Icon + label on one row. flex keeps them side by side and centred; the button is 73px wide in a 93px card and the content measures 73px, so it fits on a single line with no wrap. */ .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart { display: flex !important; align-items: center; justify-content: center; gap: 4px; max-width: none !important; width: 100%; aspect-ratio: auto; height: 32px; line-height: 1; padding: 0 6px !important; font-size: 0 !important; border-radius: 6px; background-color: var(--primary-color) !important; color: #fff !important; } /* The glyphs come from the theme's "wokiee" icon font: \e9ed is the cart (used elsewhere for add-to-cart) and \e9a8 the eye (the theme's own quick-view icon). The button sets font-size:0 to hide its real text label, so the pseudo-elements need their own explicit size. */ .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart:before { display: inline-block !important; font-family: wokiee !important; font-size: 13px !important; line-height: 1 !important; color: #fff !important; margin: 0 !important; position: static !important; top: auto !important; } .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart.addtocartsingle:before { content: '\e9ed'; } .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart:not(.addtocartsingle):before { content: '\e9a8'; } .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart:after { font-size: 12px; font-weight: 600; line-height: 1; color: #fff; } .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart.addtocartsingle:after { content: "Buy"; } .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart:not(.addtocartsingle):after { content: "View"; } html[dir="rtl"] .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart.addtocartsingle:after { content: "اشتر"; } html[dir="rtl"] .tt-card-ui .tt-product:not(.tt-view) .tt-btn-addtocart:not(.addtocartsingle):after { content: "عرض"; } /* The gap under the button that was left only in "RECOMMENDED FOR YOU". That section (website/includes/recommended_for_you.blade.php) renders a SECOND .tt-row-btn without the `d-none d-md-inline-block` that productCard.blade.php puts on its equivalent, so once the wishlist inside it was hidden on mobile an empty 29px row was left behind. Hiding every row after the first is a no-op for the other sections (theirs is already hidden by those Bootstrap classes) and removes the stray row here. Measured after: RECOMMENDED now matches the rest exactly - button row 32px, inside-hover 61px, identical card bottom spacing. */ .tt-card-ui .tt-product:not(.tt-view) .tt-product-inside-hover .tt-row-btn:not(:first-child) { display: none !important; } /* The button row has to be full width itself, or width:100% on the button resolves against a 34px-wide inline parent and the button stays tiny. */ .tt-card-ui .tt-product:not(.tt-view) .tt-product-inside-hover { width: 100%; } .tt-card-ui .tt-product:not(.tt-view) .tt-product-inside-hover .tt-row-btn { display: block; width: 100%; } /* The gap under the icon adib spotted. The 47px min-height added last round existed only to absorb "ADD TO CART" wrapping onto a second line; with a fixed-height button that wrap cannot happen. Dropped to exactly the button height rather than to 0, because out-of-stock products render no button at all (see productCard.blade.php) - at 0 those cards came out 32px shorter than their neighbours. Measured: gap under the button is now 0px and every section is back to a height spread of 0. */ .tt-card-ui .tt-product:not(.tt-view) .tt-product-inside-hover .tt-row-btn:first-child { min-height: 32px; } /* Keep the price to its two intended lines. The half-card peek makes each card ~93px wide at 3.5-up, narrow enough that "2.750 KWD" over a struck-through "5.500 KWD" wrapped to 100px on some products and 40px on others - which was the entire remaining cause of uneven card heights. nowrap plus a slightly smaller size keeps each price on its own line; verified no price overflows its card and no horizontal scrollbar. */ .tt-card-ui .tt-product:not(.tt-view) .tt-price { white-space: nowrap; font-size: 12px; line-height: 20px; min-height: 40px; } .tt-card-ui .tt-product:not(.tt-view) .tt-price .new-price, .tt-card-ui .tt-product:not(.tt-view) .tt-price .old-price { font-size: 12px; line-height: 20px; } /* Give the product title the full card width. The half-card peek makes each card ~30% narrower than before, which is what turned titles into one word per line. Both the description padding and any padding the theme puts on the heading itself are cleared here. */ .tt-card-ui .tt-product:not(.tt-view) .tt-description { padding-left: 4px; padding-right: 4px; } .tt-card-ui .tt-product:not(.tt-view) .tt-description .tt-title, .tt-card-ui .tt-product:not(.tt-view) .tt-description .tt-title > a { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } } /* ========================================================================== Card styling beyond the homepage (adib, 2026-09-14): "on product details page we have related item listing, can we do same edits / also on category listing". -------------------------------------------------------------------------- All four of these render the same partial, website/includes/productCard.blade.php, so the card rules above needed only a shared hook rather than duplication. `tt-card-ui` is now on: website/theme/theme1.blade.php - homepage sections website/details/details1.blade.php - the related-products block website/products.blade.php - category listing (/products/{cat}/{slug}) website/sections.blade.php - section listing (/allsections/...), where the new "View All" links point Everything page-level stays scoped to #tt-pageContent.tt-home: the full-width sections, the heading row with its "View All" link, and the carousel gutters. Those are homepage furniture and do not apply to a grid with a filter sidebar. Two deliberate exclusions: - `:not(.tt-view)` on every card rule. The category listing has a column-count switcher (.tt-col-one ... .tt-col-six) and the theme uses a different `.tt-product.tt-view` layout for the list view, where a full-width flex button and a square image box would be wrong. - No half-card peek anywhere here. Related products and both listing pages are plain Bootstrap grids, not slick carousels - there is nothing to peek. ========================================================================== */ /* Tighter card gutters on mobile only (adib, 2026-09-14: "on mobile version can we decrease a bit more spaces between each cards - everywhere including home, categories, related items, search"). Desktop keeps the 10px gap set above; phones go to 6px, which buys ~4px of extra image width per card at the ~93px card sizes the half-card peek produces. Row margins are matched to the padding, or the first and last card in every row sit inset from the edge. */ @media (max-width: 767px) { #tt-pageContent.tt-home .tt-carousel-products .slick-slide, .tt-card-ui .row:has(.tt-product) > [class*="col-"] { padding-left: 3px; padding-right: 3px; } #tt-pageContent.tt-home .tt-carousel-products, .tt-card-ui .row:has(.tt-product) { margin-left: -3px; margin-right: -3px; } } /* ========================================================================== Mobile search experience (adib, 2026-09-14) -------------------------------------------------------------------------- Measured on the live mobile autocomplete before changing anything: each result was 166px tall (20px li padding + an 82px image/title/price row + a 10px gap + a 42px full-width Add-to-cart row), so four results came to 641px of content inside a ~528px panel and always scrolled. The "View all products" button (#viewallsearchresult) was computed display:none, so it never appeared at all. After: the Add button moves beside the description instead of onto its own row, padding and line-height tighten, and the button is shown. Results are ~94-114px, four plus the button total 468px - which fits without scrolling on any phone from roughly 667px tall upward, given the panel's calc(100vh - 180px) height. NOT done, deliberately: forcing the panel to the full 375px screen width. It already spans 355px of 375 (the theme's own 10px gutters). The width is pinned by `.header-compact .tt-search .tt-dropdown-menu{width:100%!important}`, and overriding it with 100vw plus a negative margin produced a horizontal scrollbar on the page for 20px of gain - not worth the regression. Raised with adib rather than shipped. ========================================================================== */ @media (max-width: 767px) { .tt-search .search-results { padding: 8px !important; max-height: calc(100vh - 180px) !important; } /* Result row: thumbnail + description + action side by side */ .tt-search .tt-quicksearch-list > li { padding: 6px !important; flex-direction: row !important; align-items: center !important; gap: 8px; } .tt-search .tt-quicksearch-list > li > a { flex: 1 1 auto; min-width: 0; } .tt-search .tt-quicksearch-list .tt-title { line-height: 18px !important; max-height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tt-search .tt-quicksearch-action { margin-top: 0 !important; height: auto !important; flex: 0 0 auto; width: 78px; } .tt-search .tt-quicksearch-addtocart { height: 28px !important; line-height: 28px !important; width: 100%; font-size: 11px; } /* "View all products" - was display:none, so it never rendered */ .tt-search #viewallsearchresult { display: block !important; width: 100%; margin: 6px 0 0; padding: 9px 0; font-size: 12px; font-weight: 600; border: 0; border-radius: 6px; background: var(--primary-color); color: #fff; } } /* Clear (X) button inside the search input. Hidden until the field has text; gulfweb.js toggles .is-visible. Positioned against .tt-col, which is the input's own wrapper in header_theme_1.blade.php. */ .tt-search .tt-col { position: relative; } .tt-search .tt-search-clear { display: none; position: absolute; top: 50%; transform: translateY(-50%); /* 55px clears both the input's own right edge (measured: input ends at 283px, .tt-col at 333px) and the camera button that starts at 292px - the X now sits fully inside the field at 252-278px, touching neither. */ right: 55px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: #555; line-height: 26px; text-align: center; font-size: 15px; z-index: 3; } .tt-search .tt-search-clear:before { content: "\00d7"; } .tt-search .tt-search-clear.is-visible { display: block; } /* Mirror it for Arabic, where the input's controls sit on the other side. */ html[dir="rtl"] .tt-search .tt-search-clear { right: auto; left: 55px; } /* Product page: Share / Favorite / Return & Refund on one row on mobile (adib, 2026-09-14). Measured at 375px: the row is 327px wide but the three buttons needed 367px (13px text, 16px side padding, 10px gaps), so "RETURN & REFUND" wrapped to a second line. Trimming the side padding to 8px, the text to 12px and the gap to 6px brings it to 316px in English and 304px in Arabic - both fit, with no text clipping and all three still 40px tall. Deliberately NOT using flex-wrap:nowrap. Some products also render a fourth "Catalogue" button (when $productDetails->attachfile is set); nowrap would force all four onto one line and overflow the row. Leaving the theme's own flex-wrap:wrap in place means three fit on one line and a fourth simply wraps, which is the existing behaviour - verified by cloning a fourth button and confirming it wraps rather than overflowing. */ @media (max-width: 767px) { .tt-product-actions-row { gap: 6px !important; } .tt-product-actions-row .tt-action-btn { padding: 8px 8px !important; font-size: 12px !important; justify-content: center; } } /* Thumbnail tag/badge shimmer animation (adib, 2026-09-14): "can we animate these tags instead of showing fixed... any type of animated so it capture user attention" - applies to the New/Sale/% off/caption badges shown top-left on product thumbnails across the homepage, listing and search grid cards (.tt-label-location [class^="tt-label-"] inside .tt-product/.tt-product-design02, the "not(.tt-view)" grid-card variant - list-view toggle, compare-table and product-detail gallery badges are untouched, out of scope for this request). adib chose the "shimmer sweep" style: a soft diagonal light streak passes across each badge every 2.6s, pauses off-screen, then repeats - verified live via getComputedStyle on the ::after pseudo-element cycling through its sweep range on a real "70% Off" badge before deploying. Pure addition, position/overflow only set on the badge itself, doesn't affect layout of surrounding cards. */ .tt-product:not(.tt-view) .tt-image-box .tt-label-location [class^="tt-label-"], .tt-product-design02:not(.tt-view) .tt-image-box .tt-label-location [class^="tt-label-"] { position: relative; overflow: hidden; } .tt-product:not(.tt-view) .tt-image-box .tt-label-location [class^="tt-label-"]::after, .tt-product-design02:not(.tt-view) .tt-image-box .tt-label-location [class^="tt-label-"]::after { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: kashTagShimmer 2.6s ease-in-out infinite; pointer-events: none; } @keyframes kashTagShimmer { 0% { left: -75%; } 30% { left: 130%; } 100% { left: 130%; } } /* Desktop nav bar (the category menu above the slideshow): was capped and centered, leaving a large gap on both sides (adib, 2026-09-14: "use full width to show the menu... currently it's aligned to center and there is a gap from right and left"). adib chose "spread evenly" when asked how the items should use the extra width (vs. left-aligned, vs. just widening the bar with items still centered). Two separate things were capping it, found by measuring live: 1. The standard Bootstrap `.container` wrapping the nav row (`.my_menu > .container` for the normal header, `.tt-stuck-nav > .container` for the sticky header shown while scrolling - the same menu element is physically moved between these two positions by the theme's own JS, not cloned) - max-width:1200px, auto-centered, leaving ~112px empty on each side of a 1440px window. 2. The menu's own