/* ============================================================
   BALOCH HOTEL — PRODUCT CARD (Elementor Loop Item 578)
   ------------------------------------------------------------
   Used by every Loop Grid on the site: both homepage grids, the
   shop archive and category archives. Styled to match the agreed
   reference's card — rounded image, sale badge, centred title,
   sale price with the old price struck through in gold.

   Card markup (loop item 578):
       .e-loop-item
         └ container
             ├ widget:shortcode   → [baloch_product_hover_image]
             └ container
                 ├ widget:theme-post-title
                 ├ widget:woocommerce-product-price
                 └ widget:button  → WhatsApp

   SELECTOR POLICY: widget-TYPE classes only, with `body` +
   `.elementor-element` added to out-specify Elementor's own
   per-widget rules (which sit at 0,4,0). See home.css for detail.
   (.elementor-widget-theme-post-title etc). Those are stable across
   rebuilds; `.elementor-element-<hash>` is not.
   ============================================================ */


/* ------------------------------------------------------------
   1. GRID
   Two columns on mobile, as the reference uses.
   ------------------------------------------------------------ */

/* Reference, measured at 375px: two 163.5px columns in a 335px content
   column — an 8px column gap — with 32px between rows. The narrow column
   gap is deliberate; the cards' own rounded images provide the
   separation, and the extra width goes to the product photograph.

   SPECIFICITY: `widget-loop-grid.min.css` sets
     .elementor-widget-loop-grid .elementor-grid {
       column-gap: var(--grid-column-gap, 30px); row-gap: var(--grid-row-gap, 30px) }
   at exactly (0,2,0) — the same weight as the natural selector here — and
   Elementor's stylesheet is enqueued after this one, so an identical
   selector loses the tie and the grid silently stayed on Elementor's 30px
   default. `body` breaks the tie at (0,2,1). */
body .elementor-widget-loop-grid .elementor-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 8px;
}

@media (min-width: 768px) {
	body .elementor-widget-loop-grid .elementor-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px 22px;
	}
}


/* ------------------------------------------------------------
   2. CARD SHELL
   The reference's cards have no border or panel — the rounded
   image does the work and the text sits on the page background.
   ------------------------------------------------------------ */

/* Elementor gives every container a default inline padding from the Kit
   (16px here), which inset the card image inside its own card — 122px of
   image in a 154px card. The template's own padding is already 0; this
   clears the inherited default. */
body .e-loop-item > .elementor-element.e-con,
body .e-loop-item > .elementor-element {
	background: transparent;
	border: 0;
	padding: 0;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	gap: 0;
}


/* ------------------------------------------------------------
   3. IMAGE
   ------------------------------------------------------------ */

/* 30px, measured on the reference's card image at 375px. */
.e-loop-item .elementor-widget-shortcode,
.e-loop-item .bh-product-hover-image {
	display: block;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	/* Clips the hover image's scale transform to the rounded corner. */
	isolation: isolate;
}

.e-loop-item .bh-product-hover-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
}


/* ------------------------------------------------------------
   4. TITLE
   ------------------------------------------------------------ */

.e-loop-item .elementor-widget-theme-post-title {
	margin: 12px 0 0;
}

body .e-loop-item .elementor-element .elementor-widget-theme-post-title .elementor-heading-title,
body .e-loop-item .elementor-element .elementor-widget-theme-post-title h1,
body .e-loop-item .elementor-element .elementor-widget-theme-post-title h2,
body .e-loop-item .elementor-element .elementor-widget-theme-post-title h3 {
	margin: 0;
	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: var(--bh-body-ls);
	/* The template had this set to `end`, which right-aligned every
	   product name against the card edge. */
	text-align: center;
	text-transform: none;
	color: var(--bh-dark);
}

.e-loop-item .elementor-widget-theme-post-title a {
	color: inherit;
	text-decoration: none;
}


/* ------------------------------------------------------------
   5. PRICE + SAVE BADGE
   ------------------------------------------------------------ */

.e-loop-item .elementor-widget-woocommerce-product-price {
	margin: 6px 0 0;
}

body .e-loop-item .elementor-element .elementor-widget-woocommerce-product-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: var(--bh-dark);
}

/* WooCommerce wraps the amount in <bdi>/<span> and Elementor's price
   widget styles those descendants directly, so setting the face on
   `.price` alone left the currency symbol — and the Save badge, which
   is emitted inside the price — rendering in the template's Georgia. */
body .e-loop-item .elementor-element .price,
body .e-loop-item .elementor-element .price *,
body .e-loop-item .bh-save-badge {
	font-family: var(--bh-font-body);
}

/* Prices must never break mid-number — "Rs2,900.00" was wrapping to
   "Rs2,900.0 / 0" in the narrow two-column grid. */
body .e-loop-item .elementor-element .price ins,
body .e-loop-item .elementor-element .price del,
body .e-loop-item .elementor-element .price bdi,
body .e-loop-item .elementor-element .price .woocommerce-Price-amount {
	white-space: nowrap;
}

body .e-loop-item .elementor-element .price ins {
	background: none;
	text-decoration: none;
	color: var(--bh-dark);
	font-weight: 600;
}

body .e-loop-item .elementor-element .price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--bh-gold-dark);
	text-decoration: line-through;
	opacity: 1;
}

.e-loop-item .price del bdi,
.e-loop-item .price del .woocommerce-Price-amount {
	color: inherit;
}

/* WooCommerce appends screen-reader price restatements. */
.e-loop-item .price .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The badge is emitted inside the price widget, but the reference places
   it over the top-left of the image. Absolutely positioning it against
   the card (rather than the price) puts it there without needing to
   restructure the Elementor loop item — and it frees the price row,
   which was wrapping onto three lines in a 154px column. */
.e-loop-item {
	position: relative;
}

/* Elementor sets `position: relative` on widgets, so an absolutely
   positioned badge would anchor to the price widget (measured: it landed
   260px down the card). Making just that chain static hands the
   containing block back to the card.
   Deliberately narrow: `.bh-product-hover-image` must keep its own
   relative positioning or the hover image loses its stacking. */
.e-loop-item .e-con,
.e-loop-item .elementor-widget-woocommerce-product-price,
.e-loop-item .elementor-widget-woocommerce-product-price .elementor-widget-container,
.e-loop-item .elementor-widget-woocommerce-product-price .price {
	position: static;
}

.e-loop-item .bh-save-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--bh-gold);
	color: var(--bh-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.5;
	white-space: nowrap;
}


/* ------------------------------------------------------------
   6. WHATSAPP BUTTON
   The reference puts a circular cart button on the image. Here the
   action is "Order on WhatsApp", which needs its label to be
   understood — so it stays a compact pill beneath the price rather
   than becoming an unlabelled icon.
   ------------------------------------------------------------ */

.e-loop-item .elementor-widget-button {
	margin: 10px 0 0;
	width: 100%;
}

body .e-loop-item .elementor-element .elementor-widget-button .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	border: 0;
	border-radius: 999px;
	background-color: var(--bh-green);
	color: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none;
	/* Keeps "Order On Whatsapp" on one line in the narrow grid. */
	white-space: nowrap;
	transition: background-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

body .e-loop-item .elementor-element .elementor-widget-button .elementor-button:hover,
body .e-loop-item .elementor-element .elementor-widget-button .elementor-button:focus {
	background-color: var(--bh-green-dark);
	color: var(--bh-white);
}

.e-loop-item .elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid var(--bh-dark);
	outline-offset: 2px;
}

.e-loop-item .elementor-widget-button .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.e-loop-item .elementor-widget-button .elementor-button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}


/* ------------------------------------------------------------
   7. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body .e-loop-item .elementor-element .elementor-widget-button .elementor-button {
		transition: none;
	}
}