/*
 * themefaisalkw skin overlay
 * Loaded after assets/css/theme.css + assets/css/gulfweb.css (see includes/css.blade.php).
 * Only theme-specific overrides belong here — the shared Wokiee engine stays untouched.
 * Colors/fonts are otherwise inherited as-is from the shared engine, which already ships
 * the same font stack (Hind / Open Sans / Oswald) as the index-04 source template, so
 * inner pages (they load the same includes/css.blade.php block) match automatically.
 *
 * Logo sizing and the CATEGORIES flyout's nested (2nd-level) submenu are both handled
 * correctly by the shared engine already (.tt-logo img caps at 80px; the nested
 * .dropdown-menu is intentionally position:absolute; left:105% outside its parent panel,
 * shown via pure CSS :hover) — don't add overrides here without checking against those
 * rules first, an earlier max-height/overflow override broke both.
 */

/* theme.css pulls .tt-tab-wrapper up -65px (desktop) to sit inline with a preceding
   .tt-block-title, tuned to the demo's exact title/tab spacing. With our real "SHOP" tabs
   block it instead overlaps the tab-content down onto the title. Drop the pull-up. */
.tt-block-title + .tt-tab-wrapper {
	margin-top: 0;
}

.tt-block-title {
    text-align:left;
}

.tt-logo img {
    height: auto;
    max-height: 110px;
}
/* themefaisalkw.blade.php "SHOP" tabbed collections: index-04's demo puts the block title and
   its tab list on one row (title left, tabs right, carousel arrows pulled up to sit on that
   same row) via theme.css's -65px pull-up above, tuned to the demo's short single-line tab
   labels. Our real labels ("MOST VISITED PRODUCTS") sit inside a narrower 130px-gutter tab
   list, and pulling the whole wrapper up by a fixed px amount overlapped the title itself
   (see override above + git history on this file). Rebuild the same one-row look with flexbox
   instead of a magic-number negative margin: title and tab list become explicit flex siblings
   (via display:contents on the wrapper, so its children escape into the flex row without
   touching the blade markup) and the tab-content is forced onto its own line after them via
   flex-basis:100%. This scopes to .tt-shop-tabs only — .container.container-fluid-custom-
   mobile-padding is reused by other sections (e.g. best_seller_by_brands.blade.php) that must
   keep the default stacked/centered layout. */
@media (min-width: 1025px) {
	.tt-shop-tabs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.tt-shop-tabs .tt-block-title {
		flex: 0 0 auto;
		padding-bottom: 0;
		margin-right: 24px;
	}
	.tt-shop-tabs .tt-tab-wrapper {
		display: contents;
	}
	.tt-shop-tabs .tt-tabs-default {
		flex: 1 1 auto;
		justify-content: flex-end;
		/* right gutter clears the carousel's slick-arrow pair (theme.css positions them
		   absolute, ~100px wide including gap, over the tab row on wide screens) */
		padding: 0 250px 0 0 !important;
		margin: 0 !important;
	}
	.tt-shop-tabs .tab-content {
		flex: 1 1 100%;
		min-width: 0;
		margin-top: 40px;
	}
	/* theme.css pulls the carousel up -51px to land under the demo's tighter stacked
	   title/tabs; our flex row already accounts for that gap via tab-content's margin-top. */
	.tt-shop-tabs .tab-content .arrow-location-tab {
		margin-top: 0;
	}

	    .arrow-location-tab .slick-arrow {
        top: -87px;
    }
}

/* theme.css sets footer .tt-color-scheme-02's background to plain var(--primary-color) with
   no fallback — if that custom property isn't resolving cleanly for this store's color config,
   the newsletter row silently renders with no background at all instead of erroring visibly. */
footer .tt-color-scheme-02 {
	background: var(--primary-color, #191919) !important;
}

/* theme.css only whitens .tt-color-scheme-02's text (title, body copy) inside its
   min-width:790px block (~L18421/18448) — below that it falls through to the plain
   .tt-mobile-collapse defaults (#191919 title, #777777 body), both near-invisible on this
   red background. Apply the same white text at every width instead of just desktop. */
footer .tt-color-scheme-02,
footer .tt-color-scheme-02 .tt-collapse-title {
	color: #ffffff !important;
}

footer .tt-color-scheme-02 .tt-collapse-title:before {
	color: #ffffff;
}

/* Same gap as above, on the Subscribe button: theme.css only gives it a dark #303030
   background inside the min-width:790px block (~L18480) — below that it keeps the base
   .btn background (var(--primary-color), the site's red), same red as this section's own
   background, so the button reads as a borderless gap instead of a button. */
footer .tt-color-scheme-02 .tt-newsletter .btn {
	background: #303030 !important;
	color: #ffffff;
}

footer .tt-color-scheme-02 .tt-newsletter .btn:hover {
	background: #000000 !important;
	color: #ffffff;
}

/* theme.css's mobile newsletter/social stack (<=789px) gives the collapse content a
   16px top margin but never gives the row itself any bottom padding, so on mobile —
   where the social column drops below the newsletter form instead of sitting beside it
   (its "col-md-auto" has no mobile-width class, so it stacks full-width like everything
   else below 768px) — the icons land flush against the section's own edge instead of
   sitting inside it. Desktop's inline single-row layout doesn't have this gap. */
@media (max-width: 789px) {
	footer .tt-footer-default.tt-color-scheme-02 {
		padding-bottom: 30px;
	}
}

/* theme.css never puts position:relative on the CATEGORIES flyout's <li> itself (only on its
   child <a>, which is a sibling of the nested .dropdown-menu, so that doesn't establish a
   containing block). The nested flyout's top:0 then resolves against the outer panel's top
   instead of the hovered row, so every submenu opens pinned near the top regardless of which
   item is hovered. Applies at every recursion depth, not just the top level. */
.tt-menu-categories .tt-dropdown-menu li {
	position: relative;
}

/* Top-level CATEGORIES flyout rows: theme.css's own nav>ul>li>a img rule (~L34627) already
   absolute-positions an icon at a hardcoded left:20px/top:9px with img+span{margin-left:24px}
   on the label, sized for its 13px demo icons — built LTR-only, and rtl.css never covers this
   CATEGORIES flyout component. Bump size for our uploaded icons, then mirror position/spacing
   under dir=rtl so an icon row reads right-started like every icon-less row (Home, Offers, ...)
   instead of pinning left regardless of direction. */
.tt-menu-categories .tt-dropdown-menu nav > ul > li > a .tt-category-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul > li > a .tt-category-icon {
	left: auto;
	right: 20px;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul > li > a .tt-category-icon + span {
	margin-left: 0;
	margin-right: 24px;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-toggle  {
	text-align: right;
}
html[dir="rtl"] .tt-title  {
	text-align: right;
}
html[dir="rtl"] .tt-description  {
	text-align: right;
}

/* CATEGORIES flyout 2nd-level nested submenu: theme.css opens it via left:105% (and
   li:hover .dropdown-menu's left:100%) and marks expandable rows with a right-pointing
   arrow glyph pinned at right:20px (~L34708-34758, see file header comment) — both LTR-only,
   same gap as the icon rule above. Under RTL the nested panel should expand toward the visual
   left (the direction the row's own text already reads) and the row arrow should point the
   same way instead of always right. */
html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .dropdown-menu {
	left: auto;
	right: 105%;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul > li:hover .dropdown-menu {
	left: auto;
	right: 100%;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul > li.tt-submenu > a:after {
	right: auto;
	left: 20px;
	transform: scaleX(-1);
}

/* CATEGORIES flyout mega-menu columns (3rd-level rows, e.g. "بطاريات محمولة" under a category
   column): theme.css draws the expand indicator as a CSS border-triangle pointing right
   (border-left solid, others transparent) floated right at right:13px, with a further
   right:-13px nudge on direct <li> children (~L34975-35002) — again LTR-only. Flip the
   triangle itself (swap which border side is solid) and mirror both position rules so it
   points/sits left, matching the mega-menu's own text direction. */
html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu li a:not(:only-child):after {
	right: auto;
	left: 13px;
	float: left;
	border-left: 4px solid transparent;
	border-right: 4px solid #191919;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li > a:not(:only-child):after {
	right: auto;
	left: -13px;
}

/* CATEGORIES flyout mega-menu columns, 3rd level and deeper: theme.css's ">li ul" selector
   (no depth limit past the first <li>) recursively covers every nested popup regardless of how
   many levels deep, opening each at left:100% by default, with a JS-driven .right-popup /
   .left pair of escape-hatch classes (bundle.js "check popup past viewport", ~L5490) that flip
   between left:100%/right:100% purely by available viewport space — direction-agnostic, so it
   still works once the two states are mirrored. Swap which state is the RTL default so every
   level opens toward the visual left (this panel's reading direction) instead of right. */
html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li ul {
	left: auto;
	right: 100%;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li ul.right-popup,
html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li ul.right-popup ul {
	left: 100%;
	right: auto;
}

html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li ul.right-popup .left,
html[dir="rtl"] .tt-menu-categories .tt-dropdown-menu nav > ul .tt-megamenu-submenu > li ul.right-popup .left ul {
	left: auto;
	right: 100%;
}

/* Quick-nav row under the logo (Home / category shortcuts / Contact us): theme.css zeroes
   out the edge-facing padding on the first and last <li> (~L15948-15954 and the more specific
   L17136-17142 .tt-header-holder variant this row actually matches) so the row's outer edges
   sit flush with the container instead of wasting a 12px gap there — written assuming the
   first <li> is the visual-left one (padding-left:0) and the last is visual-right
   (padding-right:0). Under RTL flex reverses the row so the first <li> ("Home") renders
   rightmost and the last renders leftmost, but the zeroed side doesn't reverse with it — it
   stays physically left/right, which zeroes the GAP toward the next item instead of the outer
   edge. Swap which physical side each rule zeroes so the flush edge follows the reversed row. */
html[dir="rtl"] .tt-desctop-menu:not(.tt-hover-02) li.dropdown:first-child > a {
	padding-left: 12px;
	padding-right: 0;
}

html[dir="rtl"] .tt-desctop-menu:not(.tt-hover-02) li.dropdown:last-child > a {
	padding-right: 12px;
	padding-left: 0;
}

html[dir="rtl"] .tt-header-holder .tt-desctop-menu:not(.tt-hover-02) nav > ul li.dropdown:first-child > a {
	padding-left: 12px;
	    padding-right: 12px;
}

html[dir="rtl"] .tt-header-holder .tt-desctop-menu:not(.tt-hover-02) nav > ul li.dropdown:last-child > a {
	padding-right: 12px;
	padding-left: 0;
}

/* theme.css has a blanket ".tt-desctop-menu a { color: #fff !important; }" (for header
   variants with a dark small-header row). Our small-header row uses tt-color-scheme-02
   (light background), so that !important leaves the nav links white-on-white. Only
   !important beats !important regardless of selector specificity, so re-assert dark
   text here, scoped to the scheme-02 header. */
header .tt-color-scheme-02 .tt-desctop-menu a {
	color: #191919 !important;
}

header .tt-color-scheme-02 .tt-desctop-menu a:hover {
	color: var(--primary-color) !important;
}

/* theme.css only ever gives *top* margin between #tt-pageContent's sections (the
   .container-indent0/1 rules key off the following sibling, see theme.css ~L36258).
   Nothing gives the LAST section any bottom space, because the shared engine assumes
   there's always another section (or at least popular brands) closing out the page.
   On a store with no active home sections and no products for the tabs/vertical
   listing, the slideshow becomes that last child and sits flush against — visually
   crossing into — the footer's newsletter bar. padding-bottom (not margin) so it's
   unconditional regardless of which section ends up last, and doesn't depend on
   margin-collapse still working if #tt-pageContent ever gains overflow/display rules. */
#tt-pageContent {
	padding-bottom: 32px;
}
@media (max-width: 1024px) {
	#tt-pageContent {
		padding-bottom: 43px;
	}
}
@media (max-width: 575px) {
	#tt-pageContent {
		padding-bottom: 33px;
	}
}

/* header_theme_faisalkw.blade.php desktop row: theme.css gives .tt-obj-search-type2 a fixed
   650px input plus obj-move-right's margin-left:auto !important (theme.css ~L17057), which lets
   the auto margin eat all the row's free space before flex-grow ever sees it — the box stays
   pinned at a fixed size flush against the container's right edge instead of filling the row
   next to the (up to 110px tall) logo. Pin margin-left ourselves via a more specific selector so
   flex-grow gets the space instead, and bulk up the input/button height to match the row instead
   of the thin 4px/2px padding tuned to theme.css's shorter demo logo. */
.tt-header-holder .tt-col-obj.tt-obj-search-type2.obj-move-right {
	flex: 1 1 auto;
	max-width: 900px;
	margin-left: 40px !important;
}

/* input+button are plain inline-level siblings in theme.css (fixed 650px input + auto-width
   button just happened to fit on one line). Widening the input to fill the container pushed the
   combined width past the row and wrapped the button onto its own line — make the form itself
   the flex row so the input can grow while the button keeps its own auto width alongside it. */
.tt-search-type2 form {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.tt-search-type2 .tt-search-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 50px;
	padding: 0 10px 0 34px;
	box-sizing: border-box;
	font-size: 15px;
}

.tt-search-type2 .tt-btn-search {
	flex: 0 0 auto;
	height: 50px;
	padding: 0 28px;
}

.tt-search-type2 [class^="icon"] {
	top: 16px;
}

/* slideshow_theme_faisalkw.blade.php: bootstrap's .row already stretches both promo columns
   to equal height, but .tt-promo-box itself is height:auto (image's own intrinsic ratio), so
   whichever side is naturally shorter (single large slide vs. the 3-box grid) sits top-aligned
   inside its (already-tall) column, leaving a gap below it. Fill that column with the image
   instead of the image's own ratio, cropping via object-fit so it still reads as a photo
   rather than stretching it. Every .tt-promo-box carries a 20px margin-top (theme.css), so
   each height:100% here is offset by calc(-20px) to cancel it out — otherwise content+margin
   exceeds the stretched column and the box overflows its own column by 20px. */
@media (min-width: 768px) {
	.tt-home-slideshow .tt-slide-main {
		height: calc(100% - 20px);
	}
	.tt-home-slideshow .tt-slide-main img {
		height: 100%;
		object-fit: cover;
	}

	.tt-home-slideshow > div:first-child > .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		height: 100%;
	}
	.tt-home-slideshow > div:first-child > .row > div {
		max-width: none;
	}
	.tt-home-slideshow > div:first-child > .row > .col-sm-12 {
		grid-column: 1 / -1;
	}
	.tt-home-slideshow > div:first-child > .row > .col-sm-12 .tt-promo-box {
		height: calc(100% - 20px);
	}
	.tt-home-slideshow > div:first-child > .row > .col-sm-12 .tt-promo-box img {
		height: 100%;
		object-fit: cover;
	}
}

/* header_theme_faisalkw.blade.php top search bar (.tt-search-type2): theme.css's live-search
   results styling (thumbnail/title/price grid, "view all" button) only targets the icon-toggle
   .tt-search component, which this theme hides on desktop (tt-obj-desktop-hidden) in favor of
   this always-visible bar. gulfweb.js already fills #search_child_results via AJAX site-wide —
   this just gives that markup a styled place to land, mirroring theme.css's header .tt-search
   .search-results rules (positioned relative to .tt-search-type2 instead of .tt-dropdown-menu). */
.tt-search-type2 .search-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	padding: 15px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	z-index: 20;
	border-radius: 6px;
}

.tt-search-type2 .search-results ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.tt-search-type2 .search-results ul > li {
	width: calc(33.333% - 10px);
}

.tt-search-type2 .search-results ul > li a {
	display: flex;
	align-items: center;
	color: #777777;
}

.tt-search-type2 .search-results ul > li a .thumbnail {
	width: 50px;
	flex: 0 0 50px;
}

.tt-search-type2 .search-results ul > li a .thumbnail img {
	width: 100%;
	height: auto;
}

.tt-search-type2 .search-results ul > li a .tt-description {
	padding-left: 12px;
	font-size: 14px;
	line-height: 20px;
	overflow: hidden;
}

.tt-search-type2 .search-results ul > li a .tt-description .tt-title {
	color: #333333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tt-search-type2 .search-results ul > li a .tt-description .tt-price {
	font-weight: 500;
	color: #191919;
}

.tt-search-type2 .search-results ul > li a .tt-description .tt-price .old-price {
	text-decoration: line-through;
	color: #999999;
	margin-left: 6px;
	font-weight: 400;
}

.tt-search-type2 .search-results ul > li a:hover .tt-title {
	color: var(--primary-color);
}

.tt-search-type2 .search-results .tt-view-all {
	display: inline-block;
	margin-top: 10px;
	background: none;
	border: none;
	padding: 0;
	color: var(--primary-color);
	cursor: pointer;
}

.tt-search-type2 .search-results .tt-view-all:hover {
	color: #191919;
}

@media (max-width: 767px) {
	.tt-search-type2 .search-results ul > li {
		width: 100%;
	}
}

.tt-menu-categories .tt-dropdown-menu nav > ul > li > a svg.tt-static-menu-icon {
	width: 18px;
	height: 18px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 767px) {
	#tt-home-services, .tt-offset-35 {
		display: none !important;
	}
}