/*
 * Trendy By Assil storefront display fixes.
 * These rules are intentionally separate from the translation/RTL plugin.
 */

/* Hide estimated delivery dates only in WoodMart's cart sidebar. */
.cart-widget-side .wpced {
	display: none !important;
}

/* The two homepage editorial banners were restored after the server backup.
 * Keep WoodMart's mobile lazy-fade from leaving them invisible or oversized. */
@media (max-width: 767px) {
	.home .elementor-element-5d783e8 img,
	.home .elementor-element-90bb5cc img {
		display: block !important;
		height: auto !important;
		max-width: 100% !important;
		opacity: 1 !important;
		width: 100% !important;
	}
}

/* Safari/iOS can visually separate joined Arabic glyphs when letter spacing is
 * applied to a Latin-first font. Keep Arabic storefront copy naturally joined. */
html[lang="ar"] .tba-mobile-home-navigation {
	font-family: Tahoma, Arial, sans-serif;
}

html[lang="ar"] .tba-mobile-home-navigation * {
	letter-spacing: normal !important;
}

/* Homepage links below the header/language selector and above the hero. */
.tba-mobile-home-navigation {
	align-items: center;
	background: #fff;
	display: flex;
	gap: 42px;
	justify-content: center;
	padding: 10px 16px;
	position: relative;
	width: 100%;
	z-index: 38;
}

.tba-mobile-home-navigation[hidden] {
	display: none !important;
}

.tba-mobile-home-navigation a {
	color: #111 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 4px 10px;
	position: relative;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
}

.tba-mobile-home-navigation a::after {
	background: #111;
	bottom: 3px;
	content: '';
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: background-color .2s ease, width .2s ease;
	width: 20px;
}

.tba-mobile-home-navigation a:hover,
.tba-mobile-home-navigation a:focus-visible {
	color: #f39a00 !important;
}

.tba-mobile-home-navigation a:hover::after,
.tba-mobile-home-navigation a:focus-visible::after {
	background: #f39a00;
	width: 28px;
}

.tba-language-ar .tba-mobile-home-navigation {
	direction: rtl;
	flex-direction: row;
}

@media (min-width: 768px) {
	.tba-mobile-home-navigation a {
		font-size: 16px;
		font-weight: 600;
	}
}

@media (max-width: 767px) {
	.tba-mobile-home-navigation {
		gap: 0;
		justify-content: space-around;
		padding: 4px 10px 9px;
	}

	.tba-mobile-home-navigation a {
		font-size: 12px;
		padding-bottom: 8px;
	}

	.tba-mobile-home-navigation a::after {
		bottom: 2px;
		width: 16px;
	}
}

/* The former Elementor category strip is retained in Elementor for rollback,
 * but removed from the live homepage while the new merchandising section is active. */
body.home .elementor-element.elementor-element-378e60b {
	display: none !important;
}

/* Keep the homepage Hookah Bag CTA buttons on the same baseline even when
 * one product title occupies more lines than the other. */
body.home .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .wd-product-wrapper {
	height: 100%;
}

body.home .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .product-element-bottom {
	flex: 1 1 auto;
	justify-content: flex-end;
}

body.home .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .wd-add-btn {
	margin-top: 15px;
}

/* The combined Hookah Bags archive contains one variable product with color
 * swatches and one simple LV product. Stretch both cards and anchor their
 * purchase area so the prices and buttons share the same baselines. */
body.tax-product_cat.term-hookah-bags .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .wd-product-wrapper {
	height: 100%;
}

body.tax-product_cat.term-hookah-bags .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .product-element-bottom {
	flex: 1 1 auto;
	justify-content: flex-end;
}

body.tax-product_cat.term-hookah-bags .wd-product.product-grid-item:is(.product_cat-hookah-bags, .product_cat-hookah-bags-without-box) .wd-add-btn {
	margin-top: 15px;
}

/*
 * Keep the bag removal control and its package editor in one isolated action
 * column. Accessory lines intentionally receive no individual remove control.
 */
.tba-package-actions {
	align-items: center !important;
	display: inline-flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	justify-content: center !important;
	position: relative;
	z-index: 20;
}

.tba-package-actions > a,
.tba-package-actions .tba-edit-package-accessories {
	inset: auto !important;
	margin: 0 !important;
	position: static !important;
	transform: none !important;
}

.tba-edit-package-accessories,
.tba-edit-package-accessories:hover,
.tba-edit-package-accessories:focus,
.tba-edit-package-accessories span {
	color: #f28c00 !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 19px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1 !important;
        text-decoration: none !important;
}

.tba-edit-package-accessories__label {
        display: none;
}

.cart-widget-side .mini_cart_item .tba-package-actions {
	left: 9px !important;
	position: absolute !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.woocommerce-cart-form__cart-item .product-remove .tba-package-actions {
	min-width: 28px;
}

@media (max-width: 767px) {
        /*
         * Keep the bag remove X in its normal corner. JavaScript moves the
         * edit control into the bag subtotal cell, where it sits immediately
         * below the total-price number as a separate, reliable tap target.
         */
        .woocommerce-cart .woocommerce-cart-form__cart-item:has(.tba-package-actions) .product-remove .tba-package-actions {
                position: static !important;
        }

        .woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal:has(> .tba-edit-package-accessories) {
                padding-bottom: 38px !important;
                position: relative !important;
        }

        .woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal > .tba-edit-package-accessories {
                align-items: center !important;
                background: #fff8ec !important;
                border: 1px solid #f28c00 !important;
                border-radius: 5px !important;
                bottom: 2px !important;
                box-sizing: border-box !important;
                display: flex !important;
                gap: 5px !important;
                height: 30px !important;
                justify-content: center !important;
                min-height: 30px !important;
                padding: 4px 9px !important;
                position: absolute !important;
                right: 0 !important;
                top: auto !important;
                width: max-content !important;
                z-index: 25 !important;
        }

        .woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal > .tba-edit-package-accessories .tba-edit-package-accessories__icon {
                font-size: 14px !important;
        }

        .woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal > .tba-edit-package-accessories .tba-edit-package-accessories__label {
                display: inline !important;
                font-size: 11px !important;
                line-height: 1.2 !important;
        }

        .cart-widget-side .mini_cart_item .tba-package-actions {
                left: 5px !important;
        }

	.cart-widget-side .mini_cart_item .tba-package-actions a {
		align-items: center !important;
		display: flex !important;
		height: 24px !important;
		justify-content: center !important;
		min-height: 24px !important;
		min-width: 24px !important;
		width: 24px !important;
	}
}

/*
 * Visually group each Hookah Bag with the free WowAddons accessories that
 * follow it. Keep the final divider so the next bag or unrelated product
 * remains a clearly separate cart item/package.
 */
.cart-widget-side .mini_cart_item:has(+ .tba-bag-package-accessory) {
	border-bottom-color: transparent !important;
}

.cart-widget-side .tba-bag-package-accessory {
	border-top-color: transparent !important;
	margin-top: 0 !important;
}

/* Always close the package with a visible divider, even if it is last. */
.cart-widget-side .tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)) {
	border-bottom: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105)) !important;
}

/* Use the same visual package grouping in the full cart table. */
.woocommerce-cart-form__cart-item:has(+ .tba-bag-package-accessory) > td {
	border-bottom-color: transparent !important;
}

.woocommerce-cart-form__cart-item.tba-bag-package-accessory > td {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
}

.woocommerce-cart-form__cart-item.tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)) > td {
	border-bottom: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105)) !important;
}

/* Repeat the package grouping inside the checkout "Your order" table. */
.woocommerce-checkout-review-order-table .cart_item:has(+ .tba-bag-package-accessory),
.woocommerce-checkout-review-order-table .cart_item:has(+ .tba-bag-package-accessory) > td {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.woocommerce-checkout-review-order-table .cart_item.tba-bag-package-accessory,
.woocommerce-checkout-review-order-table .cart_item.tba-bag-package-accessory > td {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.woocommerce-checkout-review-order-table .cart_item.tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)) > td {
	border-bottom: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105)) !important;
}

.woocommerce-checkout-review-order-table .cart_item.tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)) {
	border-bottom: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105)) !important;
}

/*
 * Arabic mini-cart price order:
 *   335.00 ر.س × 1
 */
.tba-language-ar .cart-widget-side .mini_cart_item .quantity {
	direction: rtl !important;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.tba-language-ar .cart-widget-side .mini_cart_item .quantity .amount,
.tba-language-ar .cart-widget-side .mini_cart_item .quantity .amount bdi {
	direction: ltr !important;
	display: inline-block;
	unicode-bidi: isolate;
}

.tba-language-ar .cart-widget-side .mini_cart_item .quantity .woocommerce-Price-currencySymbol {
	display: inline-block;
	margin-left: 0;
}

.tba-language-ar .cart-widget-side .mini_cart_item .quantity .woocommerce-Price-currencySymbol::before {
	content: "\00a0";
}

.tba-language-ar .cart-widget-side .tba-ar-mini-cart-quantity {
	align-items: baseline;
	direction: ltr !important;
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 6px !important;
	justify-content: flex-start !important;
	width: auto !important;
	white-space: nowrap !important;
}

.tba-language-ar .cart-widget-side .tba-ar-mini-cart-quantity .tba-mini-cart-price,
.tba-language-ar .cart-widget-side .tba-ar-mini-cart-quantity .tba-mini-cart-multiplier {
	direction: ltr !important;
	display: inline-block;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.tba-language-ar .cart-widget-side .tba-ar-mini-cart-quantity .woocommerce-Price-currencySymbol {
	margin-left: 0;
}

.tba-language-ar .cart-widget-side .tba-ar-mini-cart-quantity .woocommerce-Price-currencySymbol::before {
	content: none;
}

/* Keep the Arabic package action column on the opposite (left) edge. */
.tba-language-ar .cart-widget-side .mini_cart_item {
	position: relative;
}

.tba-language-ar .cart-widget-side .mini_cart_item .tba-package-actions {
	left: 10px !important;
	position: absolute !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 20;
}

@media (max-width: 767px) {
	/*
	 * WoodMart draws mobile cart separators on the row as well as its cells.
	 * Remove both separators inside one bag package, then retain a divider
	 * after its final free accessory.
	 */
	.woocommerce-cart .woocommerce-cart-form__cart-item:has(+ .tba-bag-package-accessory),
	.woocommerce-cart .woocommerce-cart-form__cart-item:has(+ .tba-bag-package-accessory) > td {
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	.woocommerce-cart .woocommerce-cart-form__cart-item.tba-bag-package-accessory,
	.woocommerce-cart .woocommerce-cart-form__cart-item.tba-bag-package-accessory > td {
		border-top: 0 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

        .woocommerce-cart .woocommerce-cart-form__cart-item.tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)),
        .woocommerce-cart .woocommerce-cart-form__cart-item.tba-bag-package-accessory:not(:has(+ .tba-bag-package-accessory)) > td {
                border-bottom: 0 !important;
        }

        /*
         * The expected-delivery plugin renders its cart message in a narrow
         * table cell. Let that cell span the mobile cart and center the badge.
         */
        .woocommerce-cart tr:has(> td.wpced-cart) {
                box-sizing: border-box !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                width: 100% !important;
        }

        .woocommerce-cart td.wpced-cart {
                align-items: center !important;
                border-top: 1px solid #e2e2e2 !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex: 0 0 100% !important;
                justify-content: center !important;
                margin-top: 10px !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 14px !important;
                text-align: center !important;
                width: 100% !important;
        }

        .woocommerce-cart td.wpced-cart .wpced,
        .woocommerce-cart td.wpced-cart .wpced-inner {
                align-items: center !important;
                display: inline-flex !important;
                justify-content: center !important;
                margin-left: auto !important;
                margin-right: auto !important;
                text-align: center !important;
                white-space: nowrap !important;
        }
}

/*
 * Arabic single-product purchase layout:
 * - keep the WowAddons totals anchored to the right;
 * - show quantity, Add to cart, then Buy now when reading from the right.
 */
.tba-language-ar.single-product .prad-product-price-summary {
        box-sizing: border-box !important;
        direction: rtl !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: right !important;
        width: 100% !important;
}

.tba-language-ar.single-product .prad-product-price-summary .prad-price-row {
        align-items: baseline !important;
        direction: rtl !important;
        display: flex !important;
        gap: 4px !important;
        justify-content: flex-start !important;
        text-align: right !important;
        width: 100% !important;
}

.tba-language-ar.single-product form.cart > .quantity {
        order: 3 !important;
}

.tba-language-ar.single-product form.cart > .single_add_to_cart_button {
        order: 2 !important;
}

.tba-language-ar.single-product form.cart > .wd-buy-now-btn {
        order: 1 !important;
}

/*
 * Language-specific homepage hero CTA. The artwork remains untouched; this
 * is a real accessible link positioned inside each image's white space.
 */
.tba-home-hero-shell {
	position: relative !important;
}

.tba-home-hero-shell > img.trendy-language-hero,
.tba-home-hero-shell > img[src*="ChatGPT-Image-Aug-9-2026-07_07_06-PM"],
.tba-home-hero-shell > img[src*="ChatGPT-Image-Aug-9-2026-07_26_15-PM"] {
	display: block;
	width: 100%;
}

.tba-home-hero-shop {
	align-items: center;
	background: #111 !important;
	border: 1px solid #111 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: #fff !important;
	display: inline-flex !important;
	font-family: inherit;
	font-size: clamp(8px, 0.84vw, 14px);
	font-weight: 700;
	height: clamp(25px, 3vw, 46px);
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1 !important;
	min-width: clamp(76px, 10.5vw, 165px);
	padding: 0 clamp(10px, 1.5vw, 24px) !important;
	position: absolute;
	text-align: center;
	text-decoration: none !important;
	transform: translate(-50%, -50%);
	transition: background-color 160ms ease, color 160ms ease;
	white-space: nowrap;
	z-index: 5;
}

.tba-home-hero-shop:hover,
.tba-home-hero-shop:focus-visible {
	background: #fff !important;
	color: #111 !important;
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* English artwork: centered in the lower-left white space. */
.tba-home-hero-shell-en .tba-home-hero-shop {
	left: 15.5%;
	top: 70.5%;
}

/* Arabic artwork: centered in its separate lower-right white space. */
.tba-home-hero-shell-ar .tba-home-hero-shop {
	left: 83%;
	top: 68%;
}

@media (max-width: 767px) {
	.tba-home-hero-shop {
		font-size: clamp(7px, 2.15vw, 10px);
		height: clamp(20px, 6vw, 27px);
		letter-spacing: 0.04em;
		min-width: clamp(60px, 20vw, 86px);
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	.tba-home-hero-shell-en .tba-home-hero-shop {
		left: 16.5%;
		top: 70.5%;
	}

	.tba-home-hero-shell-ar .tba-home-hero-shop {
		left: 83%;
		top: 66%;
	}
}

@media (min-width: 1025px) {
	/*
	 * Product gallery:
	 * keep portrait product photos fully visible inside WoodMart's shorter
	 * desktop carousel instead of clipping their lower section.
	 */
	.single-product .woocommerce-product-gallery__image {
		height: min(700px, calc(100vh - 200px)) !important;
		overflow: hidden;
	}

	.single-product .woocommerce-product-gallery__image > a {
		align-items: center;
		display: flex !important;
		height: 100%;
		justify-content: center;
		width: 100%;
	}

	.single-product .woocommerce-product-gallery__image img {
		display: block !important;
		height: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center center !important;
		width: 100% !important;
	}

	/*
	 * Homepage WoodMart slider:
	 * display the complete artwork and override the grey background applied
	 * directly by the slider plugin to the slide background layer.
	 */
	.home #slider-51,
	.home #slider-51 .wd-slide,
	.home #slider-51 .wd-slide-bg {
		background-color: #fff !important;
	}

	/*
	 * Match every WoodMart carousel layer to the 16:9 banner.
	 * WoodMart otherwise collapses the internal carousel to about 70px when
	 * the outer slider uses aspect-ratio with an automatic height.
	 */
	.home #slider-51,
	.home #slider-51 .wd-carousel-wrap,
	.home #slider-51 .wd-carousel,
	.home #slider-51 .wd-slide {
		height: 56.25vw !important;
		min-height: 0 !important;
	}

	.home #slider-51 {
		max-width: none !important;
		width: 100% !important;
	}

	.home #slider-51 .wd-slide-bg {
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	/* Reveal the currently selected WoodMart color name on desktop. */
	.single-product .wd-swatches-single:has(.wd-swatch.wd-active) {
		padding-bottom: 25px;
	}

	.single-product .wd-swatches-single .wd-swatch.wd-active {
		position: relative;
	}

	.single-product .wd-swatches-single .wd-swatch.wd-active .wd-swatch-text {
		bottom: -24px;
		color: var(--color-gray-800, #333);
		display: block !important;
		font-size: 12px;
		font-weight: 600;
		left: 50%;
		line-height: 18px;
		position: absolute;
		transform: translateX(-50%);
		white-space: nowrap;
	}
}
