/* Product of the Week — structural styles (plugin-owned, theme-independent).
   Colors read the Home Gym Shop brand tokens with literal fallbacks, so the
   block is correct before the theme layer defines them and stays correct after:
   Iron #1A1D23 · Signal #FF5A1F · Signal Deep #C9430F ·
   orange-on-light #B03A16 · mist #F5F6F8 */

.hgs-potw {
	border-radius: var(--hgs-radius, 10px);
	overflow: hidden;
	background: var(--hgs-ink, #1A1D23);
	color: #fff;
}
.hgs-potw--hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 2rem 0; }
.hgs-potw--card { max-width: 380px; }
.hgs-potw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hgs-potw__body { padding: 2rem; }
.hgs-potw__kicker {
	color: var(--hgs-accent, #FF5A1F); font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; font-size: .8rem; margin-bottom: .5rem;
}
.hgs-potw__title { color: #fff; margin: 0 0 .75rem; font-size: 1.6rem; }
.hgs-potw__price { font-size: 1.25rem; margin-bottom: .5rem; }
.hgs-potw__price del { opacity: .55; margin-right: .5em; }
.hgs-potw__price ins { text-decoration: none; font-weight: 700; color: var(--hgs-accent, #FF5A1F); }
.hgs-potw__deadline { font-size: .85rem; opacity: .75; margin-bottom: 1rem; }
/* Label colour is the ink, not #fff: white on signal orange is 2.9:1, while
   graphite on signal orange is 6.4:1 and matches every other button on the
   storefront. The hover shade is darkened only as far as ink text still clears
   4.5:1 on it (Iron on #C9430F clears 4.5:1 comfortably) — a "just a bit darker" hover that drops the
   label below the floor is a regression nobody notices in review. */
.hgs-potw__cta {
	display: inline-block; background: var(--hgs-accent, #FF5A1F); color: var(--hgs-ink, #1A1D23);
	padding: .7rem 1.4rem; border-radius: var(--hgs-radius, 10px); font-weight: 600; text-decoration: none;
}
.hgs-potw__cta:hover { background: var(--hgs-accent-dark, #C9430F); color: var(--hgs-ink, #1A1D23); }
.hgs-potw--empty { background: var(--hgs-frost, #F5F6F8); color: var(--hgs-ink, #1A1D23); padding: 2rem; text-align: center; }
/* The kicker inherits --hgs-accent, which is correct on the DARK card (signal
   orange on graphite, 6.4:1) but fails on the light empty band (#FF5A1F on
   #F5F6F8 = 2.6:1, under even the 3:1 large-text floor). The empty state renders
   whenever no deal is scheduled — i.e. most of the time — so this is the variant
   actually on screen. The darker orange on mist is 5.6:1. */
.hgs-potw--empty .hgs-potw__kicker { margin-bottom: .25rem; color: var(--hgs-accent-text, #B03A16); }
@media (max-width: 720px) { .hgs-potw--hero { grid-template-columns: 1fr; } }

/* Banner: the POTW product's OWN page, between the price and add-to-cart.
   Padding lives here rather than on .hgs-potw__body because this variant has no
   body wrapper — it is two lines, not a card. */
.hgs-potw--banner { padding: .9rem 1.15rem; margin: 0 0 1.25rem; }
.hgs-potw--banner .hgs-potw__kicker { margin-bottom: .15rem; }
.hgs-potw--banner .hgs-potw__deadline { margin-bottom: 0; opacity: .85; }

/* The POTW product's storefront badge reads "Product of the Week" instead of
   "Sale!". The class is appended to whatever badge the theme rendered, so this
   only has to undo the fixed sizing themes give a one-word badge.
   `.woocommerce` + doubled class beats Astra's circular single-product badge
   (border-radius:100%, height:56px) without !important; both selectors are kept
   because the archive badge and the single badge share no ancestor. */
.woocommerce span.onsale.hgs-potw-flash,
.hgs-potw-flash.hgs-potw-flash {
	/* NOT `width: auto`. Astra's badge is position:absolute, where `auto`
	   resolves against the offsets rather than shrink-wrapping — a 19-character
	   label then stretched the pill across the whole content column.
	   `fit-content` is what "size to the text" means here; `right: auto` keeps
	   it anchored to its left offset whatever the theme sets downstream. */
	width: fit-content;
	right: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	line-height: 1.2;
	padding: .45em .95em;
	border-radius: 999px;
	white-space: nowrap;
}