/* Promotions: product page banner and the Customize list of promo products (TC tokens, with fallbacks) */
.promo-row { margin-bottom: 12px; }
.promo-bn {
	--pb-blue: var(--brand-6, oklch(0.52 .18 252.56)); --pb-navy: oklch(0.30 .10 252.56); --pb-bg: oklch(0.96 .02 252.56);
	--pb-orange: var(--clr-orange-500, hsl(16, 93%, 52%)); --pb-green: var(--clr-green-500, hsl(137, 65%, 34%));
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px;
	background: var(--pb-bg); border: 2px solid var(--pb-blue); border-radius: 10px; font-size: 15px; line-height: 1.35; color: var(--pb-navy);
}
/* custom HTML banner: the promotion's own markup; only the standard Apply Offer row and the message are styled here */
.promo-custom { --pb-blue: var(--brand-6, oklch(0.52 .18 252.56)); --pb-orange: var(--clr-orange-500, hsl(16, 93%, 52%)); --pb-green: var(--clr-green-500, hsl(137, 65%, 34%)); display: grid; gap: 8px; }
.promo-row .promo-bn__rm { border: 0; background: none; box-shadow: none; min-height: 0; height: auto; padding: 0; }
.promo-custom .promo-html-on { display: none; }
.promo-custom.is-applied.has-on .promo-html-on { display: block; }
.promo-custom.is-applied.has-on .promo-html-off { display: none; }
.promo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.promo-custom.is-applied .promo-bn__btn { background: var(--pb-btn-on, var(--pb-green)); text-transform: uppercase; letter-spacing: .5px; cursor: default; filter: none; }
.promo-custom .promo-bn__msg { margin: 0; padding: 10px 14px; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .1); color: oklch(0.30 .03 252.56); font-size: 14px; }
.promo-custom .promo-bn__msg[hidden] { display: none; }
.promo-bn.is-applied { --pb-blue: var(--clr-green-500, hsl(137, 65%, 34%)); --pb-bg: var(--bg-light-green, hsl(137, 39%, 93%)); }
.promo-bn__ico { width: 44px; height: 44px; color: var(--pb-blue); display: grid; place-items: center; }
.promo-bn__ico svg, .promo-bn__ico img { width: 40px; height: 40px; }
.promo-bn__ico > span { display: grid; }
.promo-bn__ico .promo-ico-on, .promo-bn.is-applied .promo-bn__ico.has-on .promo-ico-off { display: none; }
.promo-bn.is-applied .promo-bn__ico.has-on .promo-ico-on { display: grid; }
.promo-bn p { margin: 0; }
.promo-bn__h { font: 700 25px/1.1 var(--ff-condensed, 'Roboto Condensed', sans-serif); text-transform: uppercase; letter-spacing: .2px; color: var(--pb-navy); }
.promo-bn__h em { font-style: normal; color: var(--pb-orange); }
.promo-bn .promo-bn__l { margin-top: 3px; font-size: 14px; color: oklch(0.35 .03 252.56); }
.promo-bn__l b { font-weight: 500; color: var(--pb-navy); }
.promo-bn__i { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; vertical-align: middle; transform: translateY(-1px); border: 1.5px solid var(--pb-blue); border-radius: 50%; color: var(--pb-blue); font: 700 11px/1 var(--ff-base, Roboto, sans-serif); cursor: help; }
.promo-bn__i > span { display: none; position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 300px; max-width: 80vw; padding: 10px 12px; border-radius: 8px; background: var(--gray-9, #1d2129); color: #fff; font: 400 14px/1.45 var(--ff-base, Roboto, sans-serif); text-align: left; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.promo-bn__i:hover > span, .promo-bn__i:focus > span { display: block; }
.promo-bn__side { display: grid; justify-items: center; gap: 4px; }
.promo-bn__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: var(--btn-border-radius, .4rem); background: var(--pb-btn, var(--pb-orange)); color: #fff; font: 700 16px var(--ff-base, Roboto, sans-serif); cursor: pointer; white-space: nowrap; }
.promo-bn__btn { font-weight: 500; }
.promo-chev { flex: none; margin-right: -4px; }
/* hover ring like the site's .btn: .25rem of a light tint of the button's own colour, never the gray default */
.promo-bn__btn { --_hl-size: 0; --_hl: hsl(from var(--pb-btn, var(--pb-orange)) h s calc(l + 27)); box-shadow: 0 0 0 var(--_hl-size) var(--_hl); outline: 0; transition: box-shadow 250ms ease, background-color 250ms ease; }
.promo-bn__btn:hover, .promo-bn__btn:focus-visible { --_hl-size: .25rem; }

.promo-bn.is-applied .promo-bn__btn, .promo-custom.is-applied .promo-bn__btn { background: var(--pb-btn-on, var(--pb-green)); text-transform: uppercase; letter-spacing: .5px; cursor: default; --_hl-size: 0; }
.promo-bn__rm { border: 0; background: none; padding: 0; color: oklch(0.35 .03 252.56); font-size: 13px; text-decoration: underline; cursor: pointer; }
.promo-bn__rm[hidden], .promo-bn__msg[hidden] { display: none; }
.promo-bn__l [hidden] { display: none; }
.promo-bn__msg strong { color: var(--clr-green, hsl(142, 77%, 22%)); font-weight: 500; }
.promo-bn__msg b { font-weight: 500; }
/* applied: the button and Remove offer stand in the side padding, so the banner keeps the height it had before Apply Offer */
@media (min-width: 701px) { .promo-bn.is-applied .promo-bn__side { gap: 2px; margin-block: -8px; } }
@media (max-width: 700px) {
	.promo-bn { grid-template-columns: auto minmax(0, 1fr); }
	.promo-bn__side { grid-column: 1 / -1; justify-items: stretch; }
	.promo-bn__btn { justify-content: center; }
	.promo-bn__h { font-size: 21px; }
}

/* the Customize list drawn over the native select (the select stays in the form, hidden) */
.promo-dd { position: relative; width: 100%; }
/* the button over the select looks exactly like the site's own Customize select (values taken from it):
   50px, 2px --gray-4 border, 14px/500 --gray-6 text, the site's soft shadow and its .3rem gray ring on hover;
   the arrow is the site's own, drawn by the .select-arrow wrapper */
.promo-dd__btn { width: 100%; height: 50px; border: 2px solid var(--gray-4, oklch(0.77 0.0145 252.56)); border-radius: var(--form-border-radius, .4rem); background: #fff; text-align: left; padding: 0 40px 0 14px; cursor: pointer; display: flex; align-items: center; gap: 8px;
	font: 500 14px/normal var(--ff-base, Roboto, sans-serif); color: var(--gray-6, oklch(0.43 0.0147 252.56)); position: relative; outline: 0;
	--_ring: 0; box-shadow: rgba(37, 38, 39, .04) 0 3px 5px -2px, rgba(37, 38, 39, .06) 0 7px 14px -5px, var(--gray-3, oklch(0.87 0.0106 252.56)) 0 1px 0 0, var(--gray-2, oklch(0.91 0.007 252.56)) 0 0 0 var(--_ring);
	transition: box-shadow .145s, outline .145s; }
.promo-dd__btn:hover, .promo-dd__btn:focus-visible { --_ring: .3rem; }
.promo-dd__btn.is-promo { border-color: var(--clr-green-500, hsl(137, 65%, 34%)); }
.promo-dd__list { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--gray-3, #d3d8df); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); max-height: 420px; overflow: auto; }
.promo-dd__list[hidden] { display: none; }
/* the site styles list items with borders/shadows; the options are plain rows 40px high with a 2px gap, so hover never touches the next one */
.promo-dd__list { display: grid; gap: 2px; }
.promo-dd__list li { min-height: 40px; margin: 0; padding: 0 12px; border: 0; box-shadow: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.25; }
.promo-dd__list li::before, .promo-dd__list li::after { content: none; }
.promo-dd__list li:hover, .promo-dd__list li.is-cur, .promo-dd__list li.is-focus { background: var(--brand-1, #eef3fb); }
.promo-dd__list li.is-promo { background: var(--bg-light-orange, hsl(16, 93%, 97%)); margin-bottom: 2px; border: 1px dashed var(--clr-orange-500, hsl(16, 93%, 52%)); }
.promo-dd__list li.is-promo:hover, .promo-dd__list li.is-promo.is-cur, .promo-dd__list li.is-promo.is-focus { background: hsl(16, 93%, 93%); }
.promo-dd__p { margin-left: auto; color: var(--gray-6, #6c7584); font-size: 14px; white-space: nowrap; }
.is-promo > .promo-dd__p { color: var(--clr-green, hsl(142, 77%, 22%)); font-weight: 500; }
.promo-dd__tag { display: inline-flex; border-radius: var(--btn-border-radius, .4rem); padding: 2px 10px; font: 700 13px var(--ff-condensed, 'Roboto Condensed', sans-serif); letter-spacing: 1px; text-transform: uppercase; background: var(--clr-orange-500, hsl(16, 93%, 52%)); color: #fff; }
.promo-sel-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.promo-note { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 15px; background: var(--bg-light-yellow, hsl(45, 100%, 93%)); color: hsl(35, 90%, 26%); }
.promo-note[hidden] { display: none; }
.promo-note button { margin-left: auto; flex: none; height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--btn-border-radius, .4rem); border: 1px solid currentColor; background: #fff; color: inherit; cursor: pointer; }