/**
 * Single product page — Discount Pet Food
 *
 * Covers the tiered ("buy more, pay less") pricing block, which is a core part
 * of this business but was rendering below the add-to-cart form in the plugin's
 * default styling: a coral accent, the browser default sans-serif and 3px
 * corners, none of which belong to this design.
 *
 * The block has been moved above the form in the plugin settings, so it now
 * sits between the price and the Add to Cart button — at the decision point.
 *
 * NOTE ON THE ACCENT COLOUR: the plugin prints an inline <style> block scoped
 * to the widget's generated id, e.g.
 *   #olkjaoqhtwgeftqaj .tiered-pricing--active { border-color: ... }
 * That is (1,1,0), so no rule in this file can override it. The active-tier
 * colour is therefore set through the plugin option
 * `tier_pricing_table_selected_quantity_color`, not here. Changing it in CSS
 * will not work — don't try.
 *
 * Tokens come from header.css, which is enqueued globally.
 */

/* ------------------------------------------------------------- heading */

.dpf-bulk-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
	font-family: "Montserrat", Sans-serif;
	line-height: 1.35;
}

.dpf-bulk-heading__title {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--dpf-yellow);
	color: var(--dpf-ink);
	font-size: 13px;
	font-weight: 700;
}

.dpf-bulk-heading__hint {
	color: var(--dpf-muted);
	font-size: 13px;
	font-weight: 500;
}

/* --------------------------------------------------------- tier options */

.tpt__tiered-pricing {
	margin: 0 0 20px;
}

/* Rows are clickable (clickable_table_rows is on), so they need a pointer and
   a focus ring like any other control. */
.tiered-pricing-options .tiered-pricing-option {
	cursor: pointer;
	padding: 12px 14px;
	border-radius: 10px;
	font-family: "Montserrat", Sans-serif;
	font-size: 15px;
	transition: border-color var(--dpf-speed) ease, background-color var(--dpf-speed) ease;
}

.tiered-pricing-options .tiered-pricing-option + .tiered-pricing-option {
	margin-top: 8px;
}

/* The saving is the whole point of the row, so let it carry weight. */
.tiered-pricing-options .tiered-pricing-option strong {
	font-weight: 700;
}

.tiered-pricing-options .tiered-pricing-option .tiered-pricing-option__price {
	font-weight: 700;
}

/* The superseded unit price, shown struck through next to the tier price. */
.tiered-pricing-options .tiered-pricing-option del,
.tiered-pricing-options .tiered-pricing-option del .amount {
	color: var(--dpf-muted);
	font-weight: 500;
}

.tiered-pricing-options .tiered-pricing-option:hover {
	border-color: var(--dpf-green-mid);
}

.tiered-pricing-options .tiered-pricing-option:focus,
.tiered-pricing-options .tiered-pricing-option:focus-visible {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: -3px;
}

.tiered-pricing-options .tiered-pricing-option:focus:not(:focus-visible) {
	outline: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tiered-pricing-options .tiered-pricing-option {
		transition: none;
	}
}

/* --------------------------------------------------------- out of stock */

/*
 * Make the out-of-stock state visible again.
 *
 * WooCommerce does output `<p class="stock out-of-stock">Out of stock</p>`
 * inside the add-to-cart widget, in exactly the right place. The parent theme
 * then hides it:
 *
 *   .woocommerce div.product .out-of-stock { display: none }
 *   (jupiterx/lib/assets/dist/css/frontend.min.css)
 *
 * It does that because JupiterX shows its own badge instead, markup it renders
 * from lib/templates/fragments/product-page.php. This product page is built
 * from Elementor widgets, so that fragment never runs and the badge is not on
 * the page at all — leaving neither indicator. The customer sees a price, no
 * button, and no explanation.
 *
 * (0,5,2) to clear the parent's (0,3,1) without depending on load order.
 */
.woocommerce div.product .elementor-add-to-cart p.stock.out-of-stock {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid #f0c7c4;
	border-left: 4px solid #b3261e;
	border-radius: 10px;
	background: #fdf3f2;
	color: #8c1d16;
	font-family: "Montserrat", Sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	display: block;
}

/* A status dot, drawn rather than pulled from an icon font that may not be
   loaded on every product template. The panel sits where the Add to Cart
   button would be, so the eye lands on the reason the button is missing
   rather than on empty space. */
.woocommerce div.product .elementor-add-to-cart p.stock.out-of-stock::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #b3261e;
}