/* Product of the Week — structural styles (plugin-owned, theme-independent).
   Colors read the Tik Tok Bling brand tokens with literal fallbacks:
   onyx #0B0B0F · champagne gold #D4AF5A · deep gold #A8843C · frost #F6F8FA */

.tb-potw {
	border-radius: var(--tb-radius, 10px);
	overflow: hidden;
	background: var(--tb-ink, #0B0B0F);
	color: #fff;
}
.tb-potw--hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 2rem 0; }
.tb-potw--card { max-width: 380px; }
.tb-potw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-potw__body { padding: 2rem; }
.tb-potw__kicker {
	color: var(--tb-accent, #D4AF5A); font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; font-size: .8rem; margin-bottom: .5rem;
}
.tb-potw__title { color: #fff; margin: 0 0 .75rem; font-size: 1.6rem; }
.tb-potw__price { font-size: 1.25rem; margin-bottom: .5rem; }
.tb-potw__price del { opacity: .55; margin-right: .5em; }
.tb-potw__price ins { text-decoration: none; font-weight: 700; color: var(--tb-accent, #D4AF5A); }
.tb-potw__deadline { font-size: .85rem; opacity: .75; margin-bottom: 1rem; }
/* Label colour is the ink, not #fff: white on champagne gold is 1.9:1, while
   onyx on champagne gold is 10.4:1 and matches every other button on the
   storefront. */
.tb-potw__cta {
	display: inline-block; background: var(--tb-accent, #D4AF5A); color: var(--tb-ink, #0B0B0F);
	padding: .7rem 1.4rem; border-radius: var(--tb-radius, 10px); font-weight: 600; text-decoration: none;
}
.tb-potw__cta:hover { background: var(--tb-accent-dark, #A8843C); color: var(--tb-ink, #0B0B0F); }
.tb-potw--empty { background: var(--tb-frost, #F6F8FA); color: var(--tb-ink, #0B0B0F); padding: 2rem; text-align: center; }
/* The kicker inherits --tb-accent, which is correct on the DARK card (gold on
   onyx, 10.4:1) but fails on the light empty band (#D4AF5A on #F6F8FA = 1.9: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. Deep gold on frost is 4.6:1. */
.tb-potw--empty .tb-potw__kicker { margin-bottom: .25rem; color: var(--tb-accent-text, #8A6A2C); }
@media (max-width: 720px) { .tb-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 .tb-potw__body because this variant has no
   body wrapper — it is two lines, not a card. */
.tb-potw--banner { padding: .9rem 1.15rem; margin: 0 0 1.25rem; }
.tb-potw--banner .tb-potw__kicker { margin-bottom: .15rem; }
.tb-potw--banner .tb-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.tb-potw-flash,
.tb-potw-flash.tb-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;
}