/*
 * CW Store Promos
 *
 * Two jobs: badge a branch-restricted deal, and show a hamper component's
 * promo price against its normal one.
 *
 * The badge is rendered for EVERY shopper (it states a fact about the product,
 * so it caches), and only gains `.is-unavailable` once the browser knows which
 * branch the shopper is on. So the default state must read as informative, not
 * as a warning — the warning styling is the exception.
 */

:root {
	/* Aliased with literal fallbacks so this works before cw-tokens.css loads
	   and on pages that never load it (FunnelKit, some Bricks layouts). */
	--cwsp-amber: var(--cw-campaign-amber, #fc881d);
	--cwsp-amber-ink: var(--cw-promo-deep, #a8530a);
	--cwsp-muted: #52575a;
}

.cwsp-branch-badge {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: .5em 0;
	padding: .3em .7em;
	border-radius: 999px;
	background: rgba(252, 136, 29, .12);
	color: var(--cwsp-amber-ink);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.cwsp-branch-badge__dot {
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--cwsp-amber);
	flex: 0 0 auto;
}

/* Set only by JS, once the shopper's own branch is known. */
.cwsp-branch-badge.is-unavailable {
	background: rgba(82, 87, 90, .1);
	color: var(--cwsp-muted);
}

.cwsp-unavailable-note {
	display: block;
	margin: .5em 0;
	color: var(--cwsp-muted);
	font-size: .875rem;
}

/* A blocked add-to-cart stays visible and legible rather than disappearing —
   the shopper needs to understand why, and how to fix it. */
.cwsp-blocked .cw-hamper-add-to-cart,
.cwsp-blocked .cw-hamper-loop-add-to-cart,
.cwsp-blocked .single_add_to_cart_button {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed;
}

.cwsp-was {
	color: var(--cwsp-muted);
	text-decoration: line-through;
	margin-right: .35em;
}

.cwsp-now {
	color: var(--cwsp-amber-ink);
	font-weight: 600;
}

/* Hamper price on the product page / grid: the saving is stated, not implied
   by a smaller number the shopper has nothing to compare against. */
.cwsp-hamper-price del {
	color: var(--cwsp-muted);
	opacity: .8;
	margin-right: .35em;
}

.cwsp-hamper-price ins {
	text-decoration: none;
	font-weight: 700;
}

.cwsp-saving {
	display: inline-block;
	margin-left: .4em;
	padding: .15em .5em;
	border-radius: 999px;
	background: var(--cwsp-amber);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
}

/* The promo header sits above a hamper's component list, which is the only
   place this site's custom product template gives us — and the only place the
   hamper's own price appears at all, since that template's bundle branch
   renders a name and a button but no price. */
.cwsp-promo-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .9em;
	margin: 0 0 1em;
}

.cwsp-promo-header .cwsp-branch-badge {
	margin: 0;
}

.cwsp-promo-header__price {
	font-size: 1.25rem;
	line-height: 1.3;
}

/* ── Hamper card disclosure ──────────────────────────────────────────────────
   The card expands in place rather than opening a layer: the shop grid is CSS
   grid, so a taller card simply makes its own row taller, which survives every
   breakpoint without measuring anything. An absolutely-positioned dropdown
   would have to escape .cwsg-shot's overflow:hidden and would clip at the
   bottom row. */

.cwsp-card-branch {
	margin: .35em 0 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--cwsp-amber-ink);
}

.cwsp-card-elsewhere .cwsp-card-branch {
	color: var(--cwsp-muted);
}

/* A caret that states the disclosure's direction without needing an icon file. */

.cwsp-inside {
	margin-top: .6em;
	padding-top: .6em;
	border-top: 1px solid rgba(82, 87, 90, .18);
	text-align: left;
}


.cwsp-inside__list {
	margin: 0 0 .6em;
	padding: 0;
	list-style: none;
}

.cwsp-inside__item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: .5em;
	padding: .3em 0;
	font-size: .8125rem;
}

.cwsp-inside__item img,
.cwsp-inside__noimg {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	object-fit: contain;
	background: rgba(82, 87, 90, .07);
}

.cwsp-inside__name {
	color: inherit;
	line-height: 1.3;
}

.cwsp-inside__qty {
	font-weight: 700;
	color: var(--cwsp-muted);
}

.cwsp-inside__price {
	white-space: nowrap;
	color: var(--cwsp-muted);
}


.cwsp-inside__add {
	width: 100%;
	padding: .55em .8em;
	border: 0;
	border-radius: 8px;
	background: var(--cwsp-amber-ink);
	color: #fff;
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
}

.cwsp-inside__add:hover:not(:disabled) {
	filter: brightness(1.1);
}

.cwsp-inside__add:disabled {
	background: rgba(82, 87, 90, .35);
	cursor: not-allowed;
}

.cwsp-inside__msg {
	display: block;
	margin-top: .4em;
	min-height: 1.2em;
	font-size: .75rem;
	color: var(--cwsp-muted);
}

/* The card's own View button doubles as the contents disclosure — see
   hamper-cards.js for why it replaces a second control rather than sitting
   beside one. The arrow states the direction; the label stays one word. */
.cwsp-view {
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

.cwsp-view__arrow {
	width: .42em;
	height: .42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.06em, -.06em);
	transition: transform .15s ease;
}

.cwsp-view[aria-expanded='true'] .cwsp-view__arrow {
	transform: rotate(-135deg) translate(-.12em, -.12em);
}

.cwsp-inside__head {
	margin: 0 0 .2em;
	font-size: .8125rem;
	font-weight: 700;
}

/* ── Image-less hamper: the contents ARE the picture ─────────────────────────
   `.cwsg-shot` is a locked 1:1 square with overflow:hidden — fine for a photo,
   impossible for a list. It is kept (not removed) because the promo strip is
   absolutely positioned against it, so it collapses to just the strip's height
   and the contents sit directly beneath, in the space the image occupied. */


/* Nothing to zoom into any more, and the hover scale would jitter the strip. */

.cwsp-card-inline .cwsp-inside {
	margin-top: 0;
	padding-top: .5em;
	border-top: 0;
}

/* Always open, so the head would just repeat the card. The branch line stays —
   it is the one thing a shopper must not miss. */
.cwsp-card-inline .cwsp-inside__head {
	display: none;
}


/* The "+" inherits .cwsg-btn.cwsg-addbtn wholesale; it only needs to refuse
   interaction when the shopper is at another branch. */
.cwsp-addall:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* The theme pins the price row to the card's bottom with
   `.cwsg-cta { margin-top: auto }`, so on a short hamper every bit of slack
   lands BETWEEN the name and the price — the name ends up stranded under the
   contents list with a gap beneath it.

   Move the auto margin to the name instead. The slack then sits above the
   name, and name + price + "+" stay together as one block at the foot of the
   card, which is how they read on every other card in the grid. Inline mode
   only: a card with a photo has an image absorbing that space already. */
.cwsp-card-inline .cwsg-name {
	margin-top: auto;
}

.cwsp-card-inline .cwsg-cta {
	margin-top: 0;
}

/* The promo strip is moved out of `.cwsg-shot` (which inline mode deletes) and
   placed directly under the contents, so it captions the list instead of
   banding an absent photo.

   Three classes deep to beat the theme's own `.cwsg .cwsg-promo`, which pins it
   absolute to the image's bottom edge — equal specificity would leave this to
   source order. The offsets are cleared explicitly: `position: static` alone
   leaves left/right/bottom set, which a later `position` change would honour. */
.cwsg .cwsp-card-inline .cwsg-promo {
	position: static;
	right: auto;
	bottom: auto;
	left: auto;
	margin: 0 0 10px;
	border-radius: 6px;
}