/* ============================================================
   BALOCH HOTEL — SINGLE PRODUCT PAGE
   ------------------------------------------------------------
   Markup: woocommerce/content-single-product.php
   Behaviour: assets/js/product.js

   Written against plain WooCommerce markup. ShopEngine and Elementor
   no longer render this page, so there are no per-widget hashes to
   out-specify and no !important anywhere in this file.

   MOBILE FIRST — ~90% of traffic. Base rules are the phone layout;
   the single media query steps up to two columns.

   Metrics come from the agreed reference (aljannatsweets.com),
   measured at 390px. Colours and faces are Baloch Hotel's own.
   ============================================================ */

.bh-product {
	font-family: var(--bh-font-body);
	font-size: var(--bh-body-size);
	line-height: var(--bh-body-lh);
	letter-spacing: var(--bh-body-ls);
	color: var(--bh-dark);
}

/* Hello Elementor caps `main.site-main` at 600px. That is fine for a blog
   post but it squeezed the two-column product layout into half a tablet
   screen (each column ended up 254px wide). Released here, scoped to the
   product page only so other templates keep the theme's measure. */
body.bh-product-page main.site-main {
	max-width: 100%;
}

.bh-product__top {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 16px 8px;
}


/* ------------------------------------------------------------
   1. GALLERY
   ------------------------------------------------------------ */

/* WooCommerce's gallery div also carries the legacy `images` class, so
   `.woocommerce div.product div.images { width: 48%; float: left }` applies
   at (0,3,2) and shrank the image to 266px inside a 554px column. This
   chain is (0,3,3) and also clears the float, which the flex layout here
   does not want. */
body.bh-product-page div.bh-product div.woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
}

.bh-product__media .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.bh-product__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* Thumbnail strip */
.bh-product__media .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.bh-product__media .flex-control-thumbs li {
	width: 72px;
	margin: 0;
	list-style: none;
}

.bh-product__media .flex-control-thumbs img {
	border-radius: 10px;
	border: 1px solid transparent;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.bh-product__media .flex-control-thumbs img.flex-active,
.bh-product__media .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--bh-gold);
}

/* WooCommerce's zoom/lightbox trigger */
.bh-product__media .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 2;
}


/* ------------------------------------------------------------
   2. SUMMARY
   ------------------------------------------------------------ */

.bh-product__summary {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bh-product__title {
	margin: 0 0 10px;
	font-family: var(--bh-font-display);
	font-size: var(--bh-h1-size);
	font-weight: var(--bh-h1-weight);
	line-height: var(--bh-h1-lh);
	letter-spacing: var(--bh-h1-ls);
	color: var(--bh-dark);
	text-wrap: balance;
}

.bh-product__rating {
	margin-bottom: 10px;
}

.bh-product__rating .star-rating span::before,
.bh-product__rating .star-rating::before {
	color: var(--bh-gold);
}

/* --- price --- */
.bh-product__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.bh-product__price .price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bh-dark);
}

.bh-product__price ins {
	background: none;
	text-decoration: none;
	color: var(--bh-dark);
}

.bh-product__price del {
	font-size: 17px;
	font-weight: 400;
	color: var(--bh-gold-dark);
	text-decoration: line-through;
	opacity: 1;
}

.bh-product__price del bdi,
.bh-product__price del .woocommerce-Price-amount {
	color: inherit;
}

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

.bh-save-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--bh-gold);
	color: var(--bh-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* --- stock --- */
.bh-product__stock {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.bh-product__stock.is-in {
	color: var(--bh-green);
}

.bh-product__stock.is-out {
	color: var(--bh-red);
}


/* ------------------------------------------------------------
   3. SIZE PILL
   ------------------------------------------------------------ */

.bh-size {
	margin: 0 0 20px;
}

.bh-size__label,
.bh-size__value {
	font-size: 15px;
	line-height: 24px;
	color: var(--bh-dark);
}

.bh-size__value {
	margin-left: 4px;
	font-weight: 500;
}

.bh-size__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.bh-size__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--bh-line);
	border-radius: 999px;
	background: var(--bh-white);
	font-size: 15px;
	font-weight: 500;
	color: var(--bh-dark);
}

.bh-size__pill.is-selected {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-dark);
}


/* ------------------------------------------------------------
   4. CART FORM
   ------------------------------------------------------------ */

.bh-product form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	width: 100%;
}

/* WooCommerce sets `.woocommerce div.product form.cart { margin-bottom: 2em }`
   at specificity (0,3,2). A plain `.bh-product form.cart` (0,2,1) loses, which
   left a 30px gap under the form and pushed the two CTAs 58px apart instead of
   the reference's ~14px. This chain is (0,3,3) — just enough to win. */
body.bh-product-page div.bh-product form.cart {
	margin: 0;
}

/* WooCommerce wraps some cart output in <p>; neutralise stray margins
   that would otherwise push the secondary CTA away. */
.bh-product form.cart > p:empty {
	display: none;
	margin: 0;
}

/* --- quantity stepper: one pill, no inner edges --- */
.bh-product .quantity {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: var(--bh-qty-height);
	border: 1px solid var(--bh-line);
	border-radius: 999px;
	background: var(--bh-white);
	overflow: hidden;
}

.bh-product .quantity label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

body.bh-product-page .bh-product .quantity button.bh-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bh-dark);
	font-family: var(--bh-font-body);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

body.bh-product-page .bh-product .quantity button.bh-qty__btn:hover {
	background: var(--bh-line-soft);
}

body.bh-product-page .bh-product .quantity button.bh-qty__btn:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: -3px;
}

.bh-product .quantity input.qty {
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--bh-font-body);
	/* 16px minimum, or iOS Safari zooms the page on focus. */
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	color: var(--bh-dark);
	-moz-appearance: textfield;
	appearance: textfield;
}

.bh-product .quantity input.qty::-webkit-outer-spin-button,
.bh-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bh-product .quantity input.qty:focus {
	outline: none;
}


/* ------------------------------------------------------------
   5. BUTTONS
   One pill geometry, two treatments — matching the reference's
   stacked primary/secondary pair.
   ------------------------------------------------------------ */

/* SPECIFICITY NOTE
   Two stylesheets fight for these buttons:
     - Elementor Kit 5 styles bare `button` (brand red, 3px radius)
     - WooCommerce styles `.woocommerce button.button.alt` (purple)
   Both landed after this file and won. These selectors are deliberately
   heavy enough to beat them without !important. Keep the full chain if
   you edit them. */
body.bh-product-page .bh-product form.cart button.single_add_to_cart_button,
body.bh-product-page .bh-product a.bh-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--bh-btn-height);
	padding: var(--bh-btn-pad);
	border: 0;
	border-radius: var(--bh-btn-radius);
	font-family: var(--bh-font-body);
	font-size: var(--bh-btn-size);
	font-weight: var(--bh-btn-weight);
	letter-spacing: var(--bh-btn-ls);
	line-height: var(--bh-btn-lh);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.08s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Primary — Add to cart */
body.bh-product-page .bh-product form.cart button.single_add_to_cart_button {
	background-color: var(--bh-red);
	color: var(--bh-white);
}

body.bh-product-page .bh-product form.cart button.single_add_to_cart_button:hover,
body.bh-product-page .bh-product form.cart button.single_add_to_cart_button:focus {
	background-color: var(--bh-red-dark);
	color: var(--bh-white);
}

/* Secondary — WhatsApp.
   Sits OUTSIDE form.cart, so it needs its own top margin; without it
   the two buttons touch. */
body.bh-product-page .bh-product a.bh-btn--whatsapp {
	/* The cart form leaves ~14px of trailing space, which is already the
	   gap the reference uses between its two stacked CTAs — so no extra
	   top margin here. */
	margin: 0 0 18px;
	background-color: var(--bh-green);
	color: var(--bh-white);
}

body.bh-product-page .bh-product a.bh-btn--whatsapp:hover,
body.bh-product-page .bh-product a.bh-btn--whatsapp:focus {
	background-color: var(--bh-green-dark);
	color: var(--bh-white);
}

.bh-product .single_add_to_cart_button:active,
.bh-product .bh-btn:active {
	transform: scale(0.985);
}

.bh-product .single_add_to_cart_button:focus-visible,
.bh-product .bh-btn:focus-visible {
	outline: 2px solid var(--bh-dark);
	outline-offset: 2px;
}

.bh-btn__icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* WooCommerce's "View cart" link after an AJAX add. */
.bh-product .added_to_cart {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	color: var(--bh-red);
}


/* ------------------------------------------------------------
   6. TRUST LINE / PAYMENT / META
   ------------------------------------------------------------ */

.bh-product__trust {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--bh-muted);
}

.bh-product__pay {
	margin: 0 0 20px;
}

.bh-product__pay-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.bh-product .product_meta {
	padding-top: 18px;
	border-top: 1px solid var(--bh-line);
	font-size: 14px;
	line-height: 22px;
	color: var(--bh-muted);
}

.bh-product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.bh-product .product_meta a {
	color: var(--bh-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--bh-line);
}

.bh-product .product_meta a:hover {
	color: var(--bh-red);
}


/* ------------------------------------------------------------
   7. ACCORDION
   <details>/<summary>: open/close with no JavaScript.
   ------------------------------------------------------------ */

.bh-accordion {
	max-width: 1200px;
	margin: 8px auto 0;
	padding: 0 16px;
}

.bh-accordion__item {
	border-top: 1px solid var(--bh-line);
}

.bh-accordion__item:last-child {
	border-bottom: 1px solid var(--bh-line);
}

.bh-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 2px;
	font-family: var(--bh-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--bh-dark);
	cursor: pointer;
	list-style: none;
}

/* Hide the native disclosure triangle in both engines. */
.bh-accordion__head::-webkit-details-marker {
	display: none;
}

.bh-accordion__head::marker {
	content: "";
}

.bh-accordion__chevron {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 1.8px solid var(--bh-dark);
	border-bottom: 1.8px solid var(--bh-dark);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.bh-accordion__item[open] .bh-accordion__chevron {
	transform: translateY(2px) rotate(-135deg);
}

.bh-accordion__body {
	padding: 0 2px 22px;
	font-size: 15px;
	line-height: 26px;
	color: var(--bh-dark);
}

.bh-accordion__body p {
	margin: 0 0 14px;
}

.bh-accordion__body p:last-child {
	margin-bottom: 0;
}

.bh-accordion__body h2,
.bh-accordion__body h3 {
	margin: 18px 0 8px;
	font-family: var(--bh-font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--bh-dark);
}

.bh-accordion__body table {
	width: 100%;
	border-collapse: collapse;
}

.bh-accordion__body th,
.bh-accordion__body td {
	padding: 8px 0;
	border-bottom: 1px solid var(--bh-line-soft);
	text-align: left;
	font-weight: 400;
}


/* ------------------------------------------------------------
   8. RELATED PRODUCTS
   ------------------------------------------------------------ */

.related.products {
	max-width: 1200px;
	margin: 40px auto 0;
	padding: 0 16px 40px;
}

.related.products > h2 {
	margin: 0 0 20px;
	font-family: var(--bh-font-display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.3px;
	color: var(--bh-dark);
}


/* ------------------------------------------------------------
   9. TABLET / DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 768px) {
	.bh-product__top {
		flex-direction: row;
		align-items: flex-start;
		gap: 44px;
		padding: 34px 24px 12px;
	}

	.bh-product__media,
	.bh-product__summary {
		flex: 1 1 50%;
		min-width: 0;
	}

	/* The gallery scrolls past while the buy box stays in view. */
	.bh-product__summary {
		position: sticky;
		top: calc(var(--bh-bar-h) + 20px);
	}

	.bh-product__title {
		font-size: 42px;
		letter-spacing: -0.4px;
	}

	.bh-product__price .price {
		font-size: 30px;
	}

	/* Quantity and the primary CTA share a row once there is space. */
	.bh-product form.cart {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.bh-product .quantity {
		flex: 0 0 auto;
	}

	body.bh-product-page .bh-product form.cart button.single_add_to_cart_button {
		flex: 1 1 240px;
		width: auto;
	}

	/* On mobile the column-direction form leaves ~14px of trailing space,
	   which doubles as the gap between the two CTAs. In row direction that
	   space disappears, so the gap has to be stated here. */
	body.bh-product-page .bh-product a.bh-btn--whatsapp {
		margin-top: 14px;
	}

	.bh-accordion,
	.related.products {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* ------------------------------------------------------------
   10. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bh-product .single_add_to_cart_button,
	.bh-product .bh-btn,
	.bh-qty__btn,
	.bh-accordion__chevron,
	.bh-product__media .flex-control-thumbs img {
		transition: none;
	}

	.bh-product .single_add_to_cart_button:active,
	.bh-product .bh-btn:active {
		transform: none;
	}
}


/* ------------------------------------------------------------
   11. REVIEWS
   comments_template() outputs bare WooCommerce markup with no
   container, so on desktop it ran the full 1440px viewport width
   while the rest of the page sat inside 1200px. The wrapper below
   (added in content-single-product.php) restores the measure; the
   rest is styling the default form to match the design system.
   ------------------------------------------------------------ */

.bh-reviews {
	max-width: 1200px;
	margin: 32px auto 0;
	padding: 0 16px;
}

.bh-reviews #reviews {
	padding-top: 28px;
	border-top: 1px solid var(--bh-line);
}

.bh-reviews .woocommerce-Reviews-title,
.bh-reviews #reply-title {
	margin: 0 0 18px;
	font-family: var(--bh-font-display);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.25;
	color: var(--bh-dark);
}

.bh-reviews #reply-title {
	font-size: 20px;
}

.bh-reviews .woocommerce-noreviews {
	margin: 0 0 24px;
	color: var(--bh-muted);
}

/* --- existing reviews --- */
.bh-reviews .commentlist {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.bh-reviews .commentlist li.review {
	padding: 20px 0;
	border-bottom: 1px solid var(--bh-line-soft);
	list-style: none;
}

.bh-reviews .commentlist .avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

.bh-reviews .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
}

.bh-reviews .star-rating span::before,
.bh-reviews .star-rating::before,
.bh-reviews .stars a::before {
	color: var(--bh-gold);
}

.bh-reviews .woocommerce-review__author {
	font-weight: 600;
	color: var(--bh-dark);
}

.bh-reviews .woocommerce-review__published-date {
	color: var(--bh-muted);
	font-size: 14px;
}

/* --- review form --- */
.bh-reviews .comment-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.bh-reviews .comment-form p {
	margin: 0;
}

.bh-reviews .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bh-dark);
}

.bh-reviews .comment-form input[type="text"],
.bh-reviews .comment-form input[type="email"],
.bh-reviews .comment-form input[type="url"],
.bh-reviews .comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--bh-line);
	border-radius: 12px;
	background: var(--bh-white);
	font-family: var(--bh-font-body);
	/* 16px minimum, or iOS Safari zooms on focus. */
	font-size: 16px;
	line-height: 24px;
	color: var(--bh-dark);
}

.bh-reviews .comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

.bh-reviews .comment-form input:focus,
.bh-reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--bh-gold);
	box-shadow: 0 0 0 3px var(--bh-gold-soft, rgba(232, 179, 64, 0.25));
}

.bh-reviews .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bh-reviews .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--bh-muted);
}

/* Star selector */
.bh-reviews .comment-form-rating .stars {
	margin: 0 0 6px;
}

.bh-reviews .comment-form-rating .stars a {
	font-size: 18px;
}

/* Submit — same pill as the page's other CTAs, sized for a form.
   WooCommerce styles this with `.woocommerce #respond input#submit`,
   which carries TWO ids and therefore outranks any class-only chain
   (2,1,1 beats 1,3,2). Matching both ids and adding classes puts this
   at (2,2,2), which finally wins without !important. */
body.bh-product-page .bh-reviews #respond input#submit,
body.bh-product-page .bh-reviews #respond button[type="submit"] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: var(--bh-btn-pad);
	border: 0;
	border-radius: var(--bh-btn-radius);
	background: var(--bh-red);
	color: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: var(--bh-btn-sec-size);
	font-weight: var(--bh-btn-sec-weight);
	line-height: var(--bh-btn-sec-lh);
	letter-spacing: var(--bh-btn-sec-ls);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.bh-product-page .bh-reviews #respond input#submit:hover,
body.bh-product-page .bh-reviews #respond button[type="submit"]:hover {
	background: var(--bh-red-dark);
}

@media (min-width: 768px) {
	.bh-reviews {
		padding: 0 24px;
	}

	.bh-reviews .woocommerce-Reviews-title {
		font-size: 28px;
	}

	/* Name and email share a row once there is space.
	   Grid rather than inline-block: the form is a flex column, so
	   inline-block children would still stack. Everything spans both
	   columns by default and only these two are placed side by side. */
	.bh-reviews .comment-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.bh-reviews .comment-form > * {
		grid-column: 1 / -1;
	}

	.bh-reviews .comment-form .comment-form-author {
		grid-column: 1;
	}

	.bh-reviews .comment-form .comment-form-email {
		grid-column: 2;
	}
}


/* ------------------------------------------------------------
   12. "YOU MAY ALSO LIKE" GRID
   Plain WooCommerce loop markup, styled to match the product cards
   used elsewhere on the site.
   ------------------------------------------------------------ */

.related.products ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.related.products ul.products::before,
.related.products ul.products::after {
	content: none; /* WooCommerce's float clearfix, unwanted in grid. */
}

.related.products ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	background: var(--bh-white);
	border: 1px solid var(--bh-line-soft);
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
}

.related.products ul.products li.product > a {
	display: block;
	text-decoration: none;
}

.related.products ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 12px 14px 4px;
	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bh-dark);
}

.related.products ul.products li.product .price {
	display: block;
	padding: 0 14px 14px;
	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--bh-dark);
}

.related.products ul.products li.product .price del {
	margin-right: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--bh-gold-dark);
	opacity: 1;
}

.related.products ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

/* WooCommerce's "Sale!" flash is absolutely positioned and was being
   clipped by the card's rounded corner. Repositioned inside the card
   and given the brand gold. */
.related.products ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bh-gold);
	color: var(--bh-dark);
	font-family: var(--bh-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.related.products ul.products li.product {
	position: relative;
}

/* Loop add-to-cart buttons are not part of this design. */
.related.products ul.products li.product .button,
.related.products ul.products li.product .added_to_cart {
	display: none;
}

/* WooCommerce's star rating in the loop */
.related.products ul.products li.product .star-rating {
	margin: 0 14px 8px;
	font-size: 13px;
}

@media (min-width: 768px) {
	.related.products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 22px;
	}
}