/* Al Habib Departmental Store: tablet responsive corrections. */

@media screen and (min-width: 641px) and (max-width: 1100px) {
	/* Keep the logo, search and account controls inside the tablet viewport. */
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner {
		box-sizing: border-box;
		width: 100%;
		max-width: 1360px;
		gap: clamp(12px, 2vw, 24px);
		padding: 14px clamp(18px, 4vw, 50px);
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner > a:first-child {
		flex: 0 0 clamp(128px, 16vw, 168px);
		min-width: 0;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner > a:first-child img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 92px;
		object-fit: contain;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form {
		flex: 1 1 220px;
		width: auto;
		min-width: 180px;
		max-width: none;
		box-sizing: border-box;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form input {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools {
		flex: 0 0 auto;
		gap: 8px;
		white-space: nowrap;
	}

	/* Long category menus scroll within their own bar instead of widening the page. */
	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		justify-content: flex-start;
		padding-right: clamp(16px, 3vw, 38px);
		padding-left: clamp(16px, 3vw, 38px);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav > ul {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		gap: clamp(14px, 2vw, 24px);
		white-space: nowrap;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav > ul > li {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	body.alhabib-premium-home header > nav > a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Give tablet product thumbnails a consistent frame without stretching photos. */
	body.alhabib-emerald .woocommerce-shell {
		--alhabib-photo-height: clamp(170px, 22vw, 205px);
		box-sizing: border-box;
		width: 100%;
		max-width: 1240px;
		padding-right: clamp(16px, 3vw, 36px);
		padding-left: clamp(16px, 3vw, 36px);
	}

	body.alhabib-emerald .woocommerce-shell ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product,
	body.alhabib-emerald .woocommerce-shell ul.products li.product > a.woocommerce-LoopProduct-link {
		min-width: 0;
		box-sizing: border-box;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product > a.woocommerce-LoopProduct-link > img {
		object-fit: contain !important;
		object-position: center center !important;
	}

	/* Lay out the single product page in balanced columns and cap the gallery height. */
	body.alhabib-emerald.single-product .woocommerce-shell div.product {
		position: relative;
		display: grid !important;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: start;
		column-gap: clamp(20px, 3vw, 36px);
		row-gap: 34px;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product::before,
	body.alhabib-emerald.single-product .woocommerce-shell div.product::after {
		display: none !important;
		content: none !important;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product > .woocommerce-product-gallery,
	body.alhabib-emerald.single-product .woocommerce-shell div.product > .summary {
		float: none !important;
		width: 100% !important;
		min-width: 0;
		max-width: 100%;
		margin: 0 !important;
		box-sizing: border-box;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery {
		position: relative;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__wrapper {
		display: block !important;
		width: 100%;
		height: clamp(340px, 46vw, 520px) !important;
		max-height: 520px;
		margin: 0;
		padding: 12px;
		box-sizing: border-box;
		background: #f7f3e9;
		border: 1px solid rgba(223, 197, 139, 0.35);
		border-radius: 10px;
		overflow: hidden;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image > a:not(.woocommerce-product-gallery__trigger) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image img.wp-post-image {
		display: block;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center center;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product .summary {
		overflow-wrap: anywhere;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product .summary > .product_title {
		font-size: clamp(28px, 3.2vw, 38px);
		line-height: 1.2;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product .summary .product_meta > span {
		overflow-wrap: anywhere;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .variations,
	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .variations select {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .single_add_to_cart_button,
	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .alhabib-buy-now {
		max-width: 100%;
		white-space: normal;
	}

	body.alhabib-emerald.single-product .woocommerce-shell .woocommerce-tabs,
	body.alhabib-emerald.single-product .woocommerce-shell .related {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Size the new text-only homepage welcome banner for tablet widths. */
	body.alhabib-premium-home .store-welcome {
		box-sizing: border-box;
		width: calc(100% - clamp(36px, 6vw, 72px));
		min-height: clamp(300px, 36vw, 360px);
		margin: 20px auto 0;
		padding: clamp(42px, 5vw, 58px) clamp(30px, 6vw, 70px);
	}

	body.alhabib-premium-home .store-welcome h1 {
		max-width: 16ch;
		font-size: clamp(42px, 5.2vw, 56px);
		line-height: 1.12;
		text-wrap: balance;
	}

	body.alhabib-premium-home .store-welcome p {
		max-width: 42rem;
		font-size: clamp(20px, 2.5vw, 24px);
	}

	/* Keep the relocated promo carousel aligned with the product showcase. */
	body.alhabib-premium-home .product-showcase + .banner-carousel {
		width: calc(100% - clamp(36px, 6vw, 72px));
		box-sizing: border-box;
		margin-top: clamp(28px, 4vw, 42px);
	}
}

@media screen and (min-width: 641px) and (max-width: 820px) {
	/* Move the search to its own row on portrait tablets. */
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner > a:first-child {
		order: 1;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools {
		order: 2;
		margin-left: auto;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form {
		order: 3;
		flex: 1 0 100%;
		width: 100%;
		min-width: 0;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form input {
		width: 100%;
	}

	/* Stack the homepage banner and feature panels where two columns get cramped. */
	body.alhabib-premium-home .banner-stage {
		min-height: 0 !important;
		aspect-ratio: auto;
	}

	body.alhabib-premium-home .banner-slide {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0 !important;
		height: auto !important;
	}

	/* The tablet grid layout must not unhide inactive carousel slides. */
	body.alhabib-premium-home .banner-slide[hidden] {
		display: none !important;
	}

	body.alhabib-premium-home .store-welcome {
		width: calc(100% - clamp(32px, 6vw, 52px));
		min-height: clamp(270px, 34vw, 320px);
		margin-top: 18px;
		padding: 40px clamp(24px, 6vw, 48px);
	}

	body.alhabib-premium-home .store-welcome h1 {
		max-width: 14ch;
		font-size: clamp(36px, 5.8vw, 47px);
	}

	body.alhabib-premium-home .store-welcome p {
		font-size: clamp(18px, 2.5vw, 21px);
	}

	body.alhabib-premium-home .product-showcase + .banner-carousel {
		width: calc(100% - clamp(32px, 6vw, 52px));
	}

	body.alhabib-premium-home .banner-slide img {
		grid-row: 1;
		width: 100%;
		height: auto !important;
		max-height: clamp(260px, 46vw, 380px);
		object-fit: contain;
	}

	body.alhabib-premium-home .banner-details {
		grid-row: 2;
		order: 2;
		min-width: 0;
		padding: 26px clamp(20px, 6vw, 44px);
	}

	body.alhabib-premium-home .banner-details h2 {
		font-size: clamp(30px, 5vw, 42px);
		line-height: 1.15;
	}

	body.alhabib-premium-home .feature,
	body.alhabib-premium-home .fresh {
		grid-template-columns: minmax(0, 1fr);
		margin-right: clamp(18px, 4vw, 34px);
		margin-left: clamp(18px, 4vw, 34px);
	}

	body.alhabib-premium-home .feature-image img,
	body.alhabib-premium-home .fresh img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 340px;
		object-fit: cover;
	}

	body.alhabib-premium-home .feature-copy,
	body.alhabib-premium-home .fresh > div {
		padding: 28px clamp(22px, 6vw, 44px);
	}

	body.alhabib-premium-home .contact {
		gap: 24px;
		align-items: flex-start;
	}

	/* Two wider cards are easier to scan than three narrow related-product cards. */
	body.alhabib-emerald .woocommerce-shell ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.alhabib-emerald .woocommerce-shell {
		--alhabib-photo-height: clamp(160px, 24vw, 195px);
	}

	/* Portrait tablets use one readable column for product image and buying details. */
	body.alhabib-emerald.single-product .woocommerce-shell div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__wrapper {
		height: clamp(300px, 62vw, 480px) !important;
		max-height: 480px;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart > :is(.quantity, .single_add_to_cart_button, .alhabib-buy-now) {
		float: none !important;
		margin: 0 !important;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart > :is(.single_add_to_cart_button, .alhabib-buy-now) {
		flex: 1 1 170px;
	}
}

@media screen and (max-width: 640px) {
	/* Phone header: brand and three quick actions share the first row. */
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand tools"
			"search search";
			align-items: center;
			column-gap: 12px;
			row-gap: 12px;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
			padding: 12px clamp(12px, 5vw, 20px);
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner > a:first-child {
		grid-area: brand;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: clamp(108px, 35vw, 148px);
		max-width: 100%;
		min-width: 0;
		flex: none;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner > a:first-child img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-height: 76px;
		object-fit: contain;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools {
		grid-area: tools;
		justify-self: end;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(6px, 2vw, 10px);
		width: auto;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		white-space: nowrap;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools .wallet-link {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0 !important;
		flex: 0 1 auto;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools .account-link,
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools .cart-link {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		min-width: 40px;
		padding: 0;
		flex: 0 0 40px;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form {
		grid-area: search;
		display: flex;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		flex: none;
		box-sizing: border-box;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner form input {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex: 1 1 auto;
		box-sizing: border-box;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav {
		justify-content: flex-start;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav > ul,
	body.alhabib-premium-home header > nav > a {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav > ul > li {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Compact WooCommerce cards so reserved title and price rows do not leave a tall blank area. */
	body.alhabib-emerald .woocommerce-shell {
		--alhabib-photo-height: clamp(145px, 42vw, 200px);
		padding-right: 14px;
		padding-left: 14px;
	}

	body.alhabib-emerald .woocommerce-shell ul.products {
		gap: 14px !important;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product {
		align-self: start;
		min-height: 0;
		height: auto;
		padding: 12px !important;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product > a.woocommerce-LoopProduct-link {
		grid-template-rows: var(--alhabib-photo-height) auto auto auto !important;
		row-gap: 8px !important;
		height: auto !important;
		align-content: start;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product > a.woocommerce-LoopProduct-link > img {
		height: var(--alhabib-photo-height) !important;
		min-height: var(--alhabib-photo-height) !important;
		max-height: var(--alhabib-photo-height) !important;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product .woocommerce-loop-product__title {
		display: -webkit-box !important;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		height: auto !important;
		min-height: 0 !important;
		max-height: 4.5em !important;
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
		overflow: hidden;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product .star-rating {
		align-self: start;
		margin: 0 !important;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product .price {
		min-height: 0 !important;
		margin: 0 !important;
		font-size: 14px;
		line-height: 1.45;
	}

	body.alhabib-emerald .woocommerce-shell ul.products li.product > a.button,
	body.alhabib-emerald .woocommerce-shell ul.products li.product > .woosc-btn,
	body.alhabib-emerald .woocommerce-shell ul.products li.product :is(.tinv-wraper, .tinv-wishlist) {
		margin-top: 8px !important;
	}

	/* Keep the full product image visible inside a shorter phone-sized frame. */
	body.alhabib-emerald.single-product .woocommerce-shell {
		width: 100%;
		max-width: 100%;
		padding-right: 14px;
		padding-left: 14px;
		box-sizing: border-box;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		width: 100%;
		min-width: 0;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product::before,
	body.alhabib-emerald.single-product .woocommerce-shell div.product::after {
		display: none !important;
		content: none !important;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product > .woocommerce-product-gallery,
	body.alhabib-emerald.single-product .woocommerce-shell div.product > .summary {
		float: none !important;
		width: 100% !important;
		min-width: 0;
		max-width: 100%;
		margin: 0 !important;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__wrapper {
		display: block !important;
		width: 100%;
		height: clamp(230px, 70vw, 350px) !important;
		max-height: 350px;
		padding: 10px;
		box-sizing: border-box;
		background: #f7f3e9;
		border: 1px solid rgba(223, 197, 139, 0.35);
		border-radius: 10px;
		overflow: hidden;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image > a:not(.woocommerce-product-gallery__trigger) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	body.alhabib-emerald.single-product .woocommerce-product-gallery__image img.wp-post-image {
		display: block;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center center;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product .summary > .product_title {
		font-size: clamp(24px, 7vw, 32px);
		line-height: 1.2;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart > :is(.quantity, .single_add_to_cart_button, .alhabib-buy-now) {
		float: none !important;
		margin: 0 !important;
	}

	body.alhabib-emerald.single-product .woocommerce-shell div.product form.cart .woocommerce-variation-add-to-cart > :is(.single_add_to_cart_button, .alhabib-buy-now) {
		flex: 1 1 145px;
	}

	body.alhabib-emerald.single-product .woocommerce-shell .woocommerce-tabs,
	body.alhabib-emerald.single-product .woocommerce-shell .related {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	/* The homepage carousel keeps its photos and titles compact on phones too. */
	body.alhabib-premium-home .product-showcase {
		--alhabib-photo-height: clamp(145px, 48vw, 190px);
		margin-top: 38px;
		margin-bottom: 38px;
		padding-right: 14px;
		padding-left: 14px;
	}

	body.alhabib-premium-home .product-showcase .product-track .product-card > a > img {
		height: var(--alhabib-photo-height) !important;
		min-height: var(--alhabib-photo-height) !important;
		max-height: var(--alhabib-photo-height) !important;
	}

	body.alhabib-premium-home .product-showcase .product-track .product-card h3 {
		-webkit-line-clamp: 3;
		height: auto !important;
		min-height: 0 !important;
		max-height: 4.8em !important;
		margin-bottom: 12px !important;
	}
}

@media screen and (max-width: 360px) {
	/* On very narrow phones, show the wallet icon without its text label. */
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .wallet-title,
	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .wallet-balance {
		display: none !important;
	}

	body:is(.alhabib-emerald, .alhabib-premium-home) .header-inner .tools .wallet-link {
		width: 40px;
		flex: 0 0 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:is(.alhabib-emerald, .alhabib-premium-home) header > nav {
		scroll-behavior: auto;
	}
}