/* ==========================================================================
   SITE-WIDE FIXES (apply on every page, not just single product)
   ========================================================================== */

/* ---- Hide any Compare button/icon anywhere on the site ---- */
.compare,
.compare-button,
.compare-buttons,
.add_to_compare,
.added_to_compare,
.product-compare,
a[href*="compare"],
a[title*="Compare" i],
button[title*="Compare" i],
.yith-woocompare-add-to-compare,
.ti-woocompare-add-to-compare,
[class*="compare-button"],
[class*="woocompare"],
[class*="wc-compare"],
[data-toggle="compare"] {
	display: none !important;
}

/* ---- Header logo — stop it overlapping the content below it ---- */
.site-header .custom-logo,
.site-logo img,
.elementor-widget-theme-site-logo img,
header .custom-logo {
	max-width: 90px;
	height: auto;
	position: relative;
	z-index: 2;
}
.site-header,
header.site-header {
	position: relative;
	z-index: 10;
}
body.single-product .woocommerce-breadcrumb {
	margin-top: 12px;
	clear: both;
}

/* ---- Shop / archive page — uniform product image size ---- */
ul.products li.product a img,
.products .product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

/* ---- Shop / Home product cards — stop the title/price text sitting
   on top of the round basket/cart-icon button, and stop that button
   sitting on top of the title above it. Themes very often position
   this icon-button with `position:absolute`, which is what causes the
   overlap — so below we force EVERYTHING in the card into normal
   top-to-bottom flow (flex column, `order`), regardless of the order
   the theme originally printed the elements in the HTML. ---- */
ul.products li.product,
.products .product {
	overflow: visible !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Product image/link */
ul.products li.product > a:first-of-type,
.products .product > a:first-of-type {
	order: 1;
	position: static !important;
}

/* Title */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
.products .product .woocommerce-loop-product__title,
.products .product h2,
.products .product h3 {
	position: static !important;
	order: 2;
	margin: 10px 0 4px !important;
	padding-right: 0 !important;
}

/* Price */
ul.products li.product .price,
.products .product .price {
	position: static !important;
	order: 3;
	display: block;
	max-width: 100%;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	font-size: clamp(12px, 3vw, 15px) !important;
	margin-bottom: 6px;
	color: #6B3A1E !important;
}
ul.products li.product .price del,
.products .product .price del {
	color: #a6937a !important;
}
ul.products li.product .price ins,
.products .product .price ins,
ul.products li.product .price .woocommerce-Price-amount,
.products .product .price .woocommerce-Price-amount {
	color: #6B3A1E !important;
	text-decoration: none !important;
}

/* On-card quantity stepper (−, number, +) — force one consistent
   pink look instead of the mixed grey/peach/orange the theme's own
   default gives it. */
ul.products li.product .quantity,
.products .product .quantity {
	display: inline-flex !important;
	align-items: stretch !important;
	border: 1px solid #e8d9c3 !important;
	border-radius: 6px !important;
	background: #fff !important;
	overflow: hidden !important;
}
ul.products li.product .quantity .qty,
.products .product .quantity .qty {
	border: none !important;
	background: transparent !important;
	color: #3b2a1e !important;
	text-align: center !important;
}
ul.products li.product .quantity .plus,
ul.products li.product .quantity .minus,
.products .product .quantity .plus,
.products .product .quantity .minus,
ul.products li.product .quantity .plus:hover,
ul.products li.product .quantity .minus:hover,
.products .product .quantity .plus:hover,
.products .product .quantity .minus:hover {
	background: #F6DCE5 !important;
	color: #3b2a1e !important;
	border: none !important;
	opacity: 1 !important;
}

/* Any direct child of the card that none of the rules above specifically
   claimed (image / title / price / basket) — e.g. a leftover wrapper div
   around the basket button, before site-wide.js has moved it — falls
   here by default so it can never jump ahead of the image at the top of
   the card. More specific rules above always win over this. */
ul.products li.product > *,
.products .product > * {
	order: 5;
}

/* Basket / add-to-cart button or icon — force it out of any absolute
   position the theme gave it and into flow, below everything else,
   with breathing room above so it never sits on top of the price. */
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product .add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
ul.products li.product [class*="cart-icon"],
ul.products li.product [class*="basket"],
ul.products li.product [class*="loop-add-to-cart"],
ul.products li.product [class*="add-to-cart-wrap"],
.products .product a.button,
.products .product .add_to_cart_button,
.products .product [class*="cart-icon"],
.products .product [class*="basket"],
.products .product [class*="loop-add-to-cart"],
.products .product [class*="add-to-cart-wrap"] {
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	order: 4;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 8px !important;
}

/* ---- Price text that's too long for the card (a range like
   ₹1,200.00 – ₹7,200.00) — instead of cutting it off with "...",
   let it scroll gently so the full price is always readable.
   JS (site-wide.js) only turns this on for prices that actually
   overflow; short prices stay perfectly still. ---- */
ul.products li.product .price.tfl-marquee,
.products .product .price.tfl-marquee {
	position: relative !important;
}
.tfl-price-marquee-track {
	display: inline-flex;
	white-space: nowrap;
}
.tfl-price-marquee-item {
	display: inline-block;
	padding-right: 36px;
}
.price.tfl-marquee .tfl-price-marquee-track {
	animation: tfl-price-scroll 7s linear infinite;
}
.price.tfl-marquee:hover .tfl-price-marquee-track {
	animation-play-state: paused;
}
@keyframes tfl-price-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- If a theme/plugin renders the price twice inside the same card
   (a common conflict with quick-view/compare add-ons), keep only the
   first one and hide the rest. ---- */
ul.products li.product .price ~ .price,
.products .product .price ~ .price {
	display: none !important;
}

/* ---- Any leftover cart/basket buttons still showing the theme's own
   orange/peach default (e.g. a mobile "sticky add to cart" bar) —
   bring them onto the same no-orange brand color used everywhere
   else on the site. ---- */
ul.products li.product .add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
ul.products li.product a.button,
.products .product .add_to_cart_button,
.products .product .ajax_add_to_cart,
.products .product a.button,
.single_add_to_cart_button,
a.add_to_cart_button,
button.add_to_cart_button,
ul.products li.product .add_to_cart_button:hover,
ul.products li.product .ajax_add_to_cart:hover,
ul.products li.product a.button:hover,
.products .product .add_to_cart_button:hover,
.products .product .ajax_add_to_cart:hover,
.products .product a.button:hover,
.single_add_to_cart_button:hover,
a.add_to_cart_button:hover,
button.add_to_cart_button:hover {
	background-color: #6B3A1E !important;
	color: #fff !important;
	border-color: #6B3A1E !important;
}
ul.products li.product .add_to_cart_button svg,
ul.products li.product .add_to_cart_button i,
.products .product .add_to_cart_button svg,
.products .product .add_to_cart_button i,
.single_add_to_cart_button svg,
.single_add_to_cart_button i,
ul.products li.product .add_to_cart_button:hover svg,
ul.products li.product .add_to_cart_button:hover i,
.products .product .add_to_cart_button:hover svg,
.products .product .add_to_cart_button:hover i {
	fill: #fff !important;
	color: #fff !important;
}

/* ---- Card hover state — some themes tint the whole card (including
   the basket icon and price) orange on hover via a hover-only overlay
   element. Neutralise anything named like that so the tint can't show
   through even if we don't know the theme's exact class name. ---- */
ul.products li.product:hover [class*="hover-overlay" i],
ul.products li.product [class*="hover-overlay" i],
.products .product:hover [class*="hover-overlay" i],
.products .product [class*="hover-overlay" i],
ul.products li.product:hover [class*="hover-bg" i],
.products .product:hover [class*="hover-bg" i] {
	opacity: 0 !important;
	background: none !important;
}

/* ---- Quick View popup (clicking a product card on shop/home) ---- */
.tfl-qv-overlay {
	position: fixed;
	inset: 0;
	background: rgba(30, 20, 10, 0.55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.tfl-qv-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 760px;
	width: 100%;
	max-height: 88vh;
	overflow: hidden;
	position: relative;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tfl-qv-body {
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}
.tfl-qv-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: #fff;
	border: 1px solid #e8d9c3;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: #3b2a1e;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 2px 6px rgba(30,20,10,.12);
}
.tfl-qv-close:hover { background: #f8f2e6; }
.tfl-qv-loading { padding: 60px 30px; text-align: center; color: #8a7460; }
.tfl-qv-layout { display: grid; grid-template-columns: 1fr 1fr; }
.tfl-qv-image { background: #f8f2e6; position: relative; }
.tfl-qv-image img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.tfl-qv-image .tfl-vegnonveg-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: 26px; height: 26px; }
.tfl-qv-info { padding: 32px; }
.tfl-qv-title { font-family: Georgia, serif; font-size: 1.6rem; margin: 0 0 10px; color: #3b2a1e; }
.tfl-qv-price { font-family: Georgia, serif; font-size: 1.6rem; color: #6B3A1E; margin-bottom: 14px; }
.tfl-qv-desc { color: #8a7460; line-height: 1.7; margin-bottom: 18px; font-size: 14px; }

.tfl-qv-overlay .tfl-qv-add-heading {
	font-family: Georgia, serif;
	font-size: 15px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #3b2a1e;
	margin: 4px 0 12px;
	padding-top: 14px;
	border-top: 1px solid #e8d9c3;
}
.tfl-qv-overlay .tfl-qv-oos { color: #a3401c; font-weight: 600; margin-bottom: 14px; }

/* Weight / size variation pills */
.tfl-qv-overlay .tfl-qv-variations { margin-bottom: 16px; }
.tfl-qv-overlay .tfl-qv-variation-row { margin-bottom: 12px; }
.tfl-qv-overlay .tfl-qv-variation-label {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a7460;
	margin-bottom: 8px;
}
.tfl-qv-overlay .tfl-qv-variation-values { display: flex !important; flex-wrap: wrap; gap: 8px; }
.tfl-qv-overlay button.tfl-qv-var-pill,
.tfl-qv-overlay button.tfl-qv-var-pill:hover {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	width: auto !important;
	height: auto !important;
	padding: 9px 16px !important;
	border: 1px solid #e8d9c3 !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: #3b2a1e !important;
	font-size: 13px !important;
	font-weight: 400;
	text-transform: none;
	cursor: pointer;
}
.tfl-qv-overlay button.tfl-qv-var-pill.is-active,
.tfl-qv-overlay button.tfl-qv-var-pill.is-active:hover {
	border-color: #C9A227 !important;
	background: #C9A227 !important;
	color: #fff !important;
	font-weight: 600;
}
.tfl-qv-overlay .tfl-qv-variation-hint { font-size: 12px; color: #8a7460; margin: 4px 0 0; }

.tfl-qv-overlay .tfl-qv-add-row { display: flex !important; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tfl-qv-overlay .tfl-qv-add-form .quantity { display: inline-flex; align-items: stretch; border: 1px solid #e8d9c3; border-radius: 6px; height: 44px; overflow: hidden; background: #fff; }
.tfl-qv-overlay .tfl-qv-add-form .qty { border: none; background: transparent; width: 44px; height: 42px; margin: 0; padding: 0; box-shadow: none; text-align: center; font-size: 15px; color: #3b2a1e; -moz-appearance: textfield; }
.tfl-qv-overlay .tfl-qv-add-form .qty::-webkit-outer-spin-button,
.tfl-qv-overlay .tfl-qv-add-form .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tfl-qv-overlay .tfl-qty-btn { width: 38px; height: 42px; border: none; background: #F1E6D3; color: #3b2a1e; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.tfl-qv-overlay .tfl-qty-btn:hover { background: #e8dabf; }
.tfl-qv-overlay button.tfl-qv-add-btn,
.tfl-qv-overlay button.tfl-qv-add-btn:hover {
	background: #6B3A1E !important;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 0 22px;
	height: 44px;
	width: auto !important;
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px !important;
}
.tfl-qv-overlay button.tfl-qv-add-btn[disabled],
.tfl-qv-overlay button.tfl-qv-add-btn[disabled]:hover {
	background: #ac9c8e !important;
	color: #fff !important;
	opacity: 1;
	cursor: not-allowed;
}
.tfl-qv-overlay .tfl-qv-view-link { display: inline-block; color: #6B3A1E; text-decoration: underline; font-size: 14px; }
@media (max-width: 640px) {
	.tfl-qv-overlay { padding: 0; align-items: flex-end; }
	.tfl-qv-modal { max-width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
	.tfl-qv-layout { grid-template-columns: 1fr; }
	.tfl-qv-image img { min-height: 200px; max-height: 42vh; }
	.tfl-qv-info { padding: 18px; }
	.tfl-qv-title { font-size: 1.3rem; }
	.tfl-qv-price { font-size: 1.3rem; }
	.tfl-qv-overlay .tfl-qv-add-row { align-items: stretch; }
	.tfl-qv-overlay .tfl-qv-add-form .quantity { flex: 1 1 auto; }
	.tfl-qv-overlay button.tfl-qv-add-btn { flex: 1 1 auto; }
}


/* ---- Stop the theme's hover-reveal quick-add box. Some themes hide the
   quantity/add-to-cart row by default and only draw it in on :hover, which
   changes that one card's height and makes it visually spill over the
   product row below it. We force it to render the SAME way at all times
   (never hidden, never absolutely repositioned, no hover-only transition),
   so hovering a card can never change its height or overlap anything. ---- */
ul.products li.product .cart,
ul.products li.product form.cart,
ul.products li.product .quantity,
ul.products li.product .add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
.products .product .cart,
.products .product form.cart,
.products .product .quantity,
.products .product .add_to_cart_button,
.products .product .ajax_add_to_cart {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: static !important;
	inset: auto !important;
	transform: none !important;
	max-height: none !important;
	transition: none !important;
	margin-top: 8px !important;
}
ul.products li.product:hover .cart,
ul.products li.product:hover form.cart,
ul.products li.product:hover .quantity,
.products .product:hover .cart,
.products .product:hover form.cart,
.products .product:hover .quantity {
	position: static !important;
	transform: none !important;
	margin-top: 8px !important;
}

/* ---- Never let hover fade/hide the title, price or image — some themes
   dim or hide these while revealing their own quick-add row on :hover. ---- */
ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover h2,
ul.products li.product:hover h3,
ul.products li.product:hover .price,
ul.products li.product:hover > a:first-of-type,
ul.products li.product:hover > a:first-of-type img,
.products .product:hover .woocommerce-loop-product__title,
.products .product:hover h2,
.products .product:hover h3,
.products .product:hover .price,
.products .product:hover > a:first-of-type,
.products .product:hover > a:first-of-type img {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}
/* Some themes fade the title/price on hover by changing their TEXT COLOR
   (to match the background) rather than hiding them with opacity/display —
   the rules above don't catch that, so force a readable color explicitly. */
ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover h2,
ul.products li.product:hover h3,
.products .product:hover .woocommerce-loop-product__title,
.products .product:hover h2,
.products .product:hover h3 {
	color: #3b2a1e !important;
	-webkit-text-fill-color: #3b2a1e !important;
	text-shadow: none !important;
}
ul.products li.product:hover .price,
.products .product:hover .price,
ul.products li.product:hover .price .woocommerce-Price-amount,
.products .product:hover .price .woocommerce-Price-amount {
	color: #6B3A1E !important;
	-webkit-text-fill-color: #6B3A1E !important;
	text-shadow: none !important;
}

/* ---- Any on-card icon-only button (basket, buy-now, quick-add) that the
   theme only colors in on :hover — if we force it to always be visible
   (above) but never overrode ITS colors, its icon/text can end up the
   same color as its own background = looks blank. Cover every state. ---- */
ul.products li.product a.button,
ul.products li.product .add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
ul.products li.product [class*="buy-now" i],
ul.products li.product [class*="buynow" i],
ul.products li.product [class*="cart-icon" i],
ul.products li.product [class*="basket" i],
.products .product a.button,
.products .product .add_to_cart_button,
.products .product .ajax_add_to_cart,
.products .product [class*="buy-now" i],
.products .product [class*="buynow" i],
.products .product [class*="cart-icon" i],
.products .product [class*="basket" i],
ul.products li.product:hover a.button,
ul.products li.product:hover .add_to_cart_button,
ul.products li.product:hover .ajax_add_to_cart,
ul.products li.product:hover [class*="buy-now" i],
ul.products li.product:hover [class*="buynow" i],
ul.products li.product:hover [class*="cart-icon" i],
ul.products li.product:hover [class*="basket" i],
.products .product:hover a.button,
.products .product:hover .add_to_cart_button,
.products .product:hover .ajax_add_to_cart,
.products .product:hover [class*="buy-now" i],
.products .product:hover [class*="buynow" i],
.products .product:hover [class*="cart-icon" i],
.products .product:hover [class*="basket" i] {
	background-color: #6B3A1E !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
}
ul.products li.product a.button svg,
ul.products li.product .add_to_cart_button svg,
ul.products li.product [class*="buy-now" i] svg,
ul.products li.product [class*="cart-icon" i] svg,
ul.products li.product [class*="basket" i] svg,
.products .product a.button svg,
.products .product .add_to_cart_button svg,
.products .product [class*="buy-now" i] svg,
.products .product [class*="cart-icon" i] svg,
.products .product [class*="basket" i] svg {
	fill: #fff !important;
	color: #fff !important;
	opacity: 1 !important;
}
/* Only an explicitly `disabled` button (e.g. a variable product on the
   single-product page, before a variation is chosen) should look muted —
   never a plain hover/default state. */
ul.products li.product [disabled],
.products .product [disabled],
.tfl-buy-now-btn[disabled],
.tfl-mb-buy[disabled] {
	opacity: .55 !important;
	background-color: #ac9c8e !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* ---- Card button re-enabled by site-wide.js for variable (weight-based)
   products that have no weight picker on the card — it now opens Quick
   View on click, so it should look exactly like a normal, live, clickable
   button (solid brand brown), never the muted "disabled" grey above. ---- */
ul.products li.product .tfl-card-choose-options,
ul.products li.product .tfl-card-choose-options:hover,
.products .product .tfl-card-choose-options,
.products .product .tfl-card-choose-options:hover {
	opacity: 1 !important;
	cursor: pointer !important;
	background-color: #6B3A1E !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-color: #6B3A1E !important;
}
ul.products li.product .tfl-card-choose-options svg,
ul.products li.product .tfl-card-choose-options i,
.products .product .tfl-card-choose-options svg,
.products .product .tfl-card-choose-options i {
	fill: #fff !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Give the moved basket/cart-icon badge its own solid background so it's
   never just a bare icon sitting on a photo (invisible if the icon and a
   patch of the photo happen to be a similar colour, or if the theme relied
   on a hover-only dark overlay behind it that we've since neutralised).
   Kept white/black (no brand colour) so it matches the wishlist heart
   icon that already sits above it on the same image. */
.tfl-basket-badge {
	background: #fff !important;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(30,20,10,.25);
}
.tfl-basket-badge svg,
.tfl-basket-badge i {
	color: #000 !important;
	fill: #000 !important;
}

ul.products li.product .cart{display:flex!important;justify-content:space-between!important;align-items:center!important}
ul.products li.product .quantity{order:1!important;margin-right:auto!important;border:1px solid rgb(45,19,6)!important;border-radius:8px;overflow:hidden}
ul.products li.product .add_to_cart_button,ul.products li.product .button{order:2!important;margin-left:auto!important}
.quantity .minus,.quantity .plus{background:rgb(45,19,6)!important;color:#fff!important}
.quantity .qty{color:rgb(45,19,6)!important}


/* Custom fixes */
.quantity.buttons_added{float:left!important;display:inline-flex!important;border:1px solid rgb(45,19,6)!important}
.quantity.buttons_added .minus,.quantity.buttons_added .plus{background:rgb(45,19,6)!important;color:#fff!important}
.product .cart{display:flex!important;justify-content:space-between!important;align-items:center!important}
.product .quantity{order:1!important;margin-right:auto!important}
.product .add_to_cart_button,.product .button{order:2!important;margin-left:12px!important;background:rgb(45,19,6)!important;color:#fff!important}


/* Custom fixes */
.products .product img.hover-image,.products .product .hover-image{display:none!important}
.products .product a img:nth-child(2){display:none!important}
.products .product .price{color:rgb(45,19,6)!important}
.products .product .cart,.products .product form.cart{display:flex!important;flex-wrap:wrap!important}
.products .product .quantity{order:2!important;margin-top:8px!important;border-color:rgb(45,19,6)!important}
.products .product .quantity .plus,.products .product .quantity .minus{background:rgb(45,19,6)!important;color:#fff!important}
.products .product .button,.products .product .add_to_cart_button{background:rgb(45,19,6)!important;color:#fff!important}
*{--accent:#2d1306!important}

/* ---- Basket / cart-icon badge — pin it to the product IMAGE ONLY, the
   same way the wishlist / quick-view / compare ".shop-action" icons sit
   on the image and never touch the title below. Whatever class name the
   theme gave its round basket button, site-wide.js finds it (by its own
   position:absolute/fixed, since that's how the theme drew it in the
   first place) and moves it inside the image link, tagging it
   .tfl-basket-badge. This block only positions it once it's there —
   bottom-right corner of the picture, never over the text. ---- */
ul.products li.product > a:first-of-type,
.products .product > a:first-of-type {
	position: relative !important;
	display: block;
	overflow: visible;
}
.tfl-basket-badge {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	bottom: 10px !important;
	right: 10px !important;
	inset: auto 10px 10px auto !important;
	transform: none !important;
	margin: 0 !important;
	z-index: 5 !important;
}

/* ---- Veg / Non-Veg indicator — small square icon like the standard
   Indian FSSAI mark. Green square + dot = veg, brown square + triangle
   = non-veg. Shown on shop/home cards (top-left of image), on the single
   product page (next to the freshly-baked badges) and in quick view. ---- */
.tfl-vegnonveg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(30, 20, 10, .18);
}
.tfl-vegnonveg-badge svg { display: block; width: 100%; height: 100%; }
ul.products li.product .tfl-vegnonveg-badge,
.products .product .tfl-vegnonveg-badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 5 !important;
}

/* ---- Bakevo theme specific fixes (confirmed from actual page source) ---- */

/* .product-hover is an empty overlay div this theme draws on top of the
   WHOLE card (not just the image) and reveals/tints on :hover — this is
   the actual cause of "title/price fade out on hover". Kill it outright:
   it has no content of its own, so removing it changes nothing except the
   unwanted fade. */
.products .product .product-hover,
ul.products li.product .product-hover {
	display: none !important;
	pointer-events: none !important;
}

/* The image link sits inside .product-image, not as a direct child of the
   <li> — give it its own positioning context so the veg/non-veg badge
   (appended inside it by JS) pins correctly to the photo's corner instead
   of the whole card. */
.products .product .product-image,
ul.products li.product .product-image {
	position: relative !important;
	overflow: hidden !important;
}
.products .product .product-image .tfl-vegnonveg-badge,
ul.products li.product .product-image .tfl-vegnonveg-badge {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 6 !important;
}

/* Force the mobile column count on THIS theme's actual grid wrapper —
   Elementor prints its own "elementor-grid-mobile-1" class here, which is
   more specific than a generic ul.products rule and was winning. */
@media (max-width: 767px) {
	.bakevo-products-grid,
	.bakevo-products-grid.elementor-grid-mobile-1 {
		display: block !important;
	}
	.bakevo-products-grid ul.products,
	.bakevo-products-grid .bakevo-con ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.bakevo-products-grid ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
	}
	.bakevo-products-grid .product-block { height: 100%; }
}
@media (max-width: 991px) {
	body ul.products,
	body .products,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
		float: none !important;
	}
	body ul.products li.product,
	body .products .product,
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		margin: 0 !important;
		width: 100% !important;
		float: none !important;
		clear: none !important;
	}
}
@media (max-width: 480px) {
	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2,
	ul.products li.product h3,
	.products .product .woocommerce-loop-product__title,
	.products .product h2,
	.products .product h3 {
		font-size: 13px !important;
	}
	/* On very small screens the on-card cart row (qty + add button) can be
	   tight — stack it instead of squeezing everything into one line. */
	ul.products li.product .cart,
	.products .product .cart {
		flex-wrap: wrap !important;
	}
	ul.products li.product .quantity,
	.products .product .quantity {
		width: 100% !important;
		margin-bottom: 6px !important;
	}
	ul.products li.product .add_to_cart_button,
	.products .product .add_to_cart_button {
		width: 100% !important;
		text-align: center !important;
	}
}


/* Quick view isolation */
.woosq-popup .product,.mfp-content .product,.xoo-qv-container .product{display:block!important}
.woosq-popup .product *,.mfp-content .product *,.xoo-qv-container .product *{order:initial!important}
@media(max-width:767px){
ul.products{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
ul.products li.product,.products .product{min-height:320px}
.products .product img{aspect-ratio:1/1;object-fit:cover}
}