/* ==========================================================================
   Posh Buy 5 Get 1 Free
   All selectors scoped under #posh-b5g1-root / .posh-b5g1-* to stay theme-safe.
   Brand: Poppins. Pink #E0457B, Blue #375275, Teal #0ABAB5, Wash #FDF2F8.
   ========================================================================== */

#posh-b5g1-root,
#posh-b5g1-root * {
	box-sizing: border-box;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- One-line trigger inside the advocate bar -------------------- */
/* This element is injected INTO the theme header (the advocate bar), outside
   #posh-b5g1-root, so theme and Elementor button/link styles can override it.
   Everything below is scoped under the placeholder ID and forced with
   !important, with brand hex hardcoded, so the header cannot wash it out. */

#posh-b5g1-bar .posh-b5g1-bar {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 0;
	padding: 9px 18px !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	filter: none !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	line-height: 1 !important;
	color: #375275 !important;
	background: #EAA26D !important;
	box-shadow: 0 6px 16px -4px rgba(234,162,109,.7), inset 0 1px 0 rgba(255,255,255,.35) !important;
	transition: transform .18s ease, box-shadow .25s ease, background .3s ease;
}
#posh-b5g1-bar .posh-b5g1-bar:hover {
	transform: translateY(-1px);
	color: #375275 !important;
	box-shadow: 0 10px 24px -4px rgba(234,162,109,.9), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#posh-b5g1-bar .posh-b5g1-bar:active { transform: translateY(0); }
#posh-b5g1-bar .posh-b5g1-bar.is-unlocked {
	background: #EAA26D !important;
	box-shadow: 0 6px 18px -3px rgba(234,162,109,.95), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#posh-b5g1-bar .posh-b5g1-bar.is-unlocked:hover {
	box-shadow: 0 10px 26px -3px rgba(234,162,109,1), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* attention shine sweep */
#posh-b5g1-bar .posh-b5g1-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent) !important;
	transform: skewX(-20deg);
	z-index: 0;
	pointer-events: none;
	animation: posh-b5g1-shine 3.4s ease-in-out infinite;
}
#posh-b5g1-bar .posh-b5g1-bar__ico,
#posh-b5g1-bar .posh-b5g1-bar__txt {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	color: #375275 !important;
}
#posh-b5g1-bar .posh-b5g1-bar__ico svg { display: block; stroke: #375275; }

@keyframes posh-b5g1-shine {
	0%   { left: -75%; }
	60%  { left: 130%; }
	100% { left: 130%; }
}

@media (max-width: 600px) {
	#posh-b5g1-bar .posh-b5g1-bar { font-size: 12.5px !important; padding: 8px 14px !important; gap: 6px; }
}

/* ---------- Overlay + modal --------------------------------------------- */

.posh-b5g1-overlay {
	position: fixed;
	inset: 0;
	z-index: 99991;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(55, 82, 117, .38);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.posh-b5g1-overlay.is-open { opacity: 1; visibility: visible; }

.posh-b5g1-modal {
	position: relative;
	width: 100%;
	max-width: 470px;
	max-height: 92vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 26px;
	padding: 30px 28px 24px;
	box-shadow: 0 40px 80px -20px rgba(224,69,123,.4), 0 0 0 1px rgba(224,69,123,.06);
	transform: translateY(24px) scale(.96);
	transition: transform .4s cubic-bezier(.16,1,.3,1);
	background-image: radial-gradient(120% 80% at 50% -10%, var(--posh-wash) 0%, #fff 55%);
}
.posh-b5g1-overlay.is-open .posh-b5g1-modal { transform: translateY(0) scale(1); }

.posh-b5g1-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(234,162,109,.14);
	color: var(--posh-orange);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.posh-b5g1-close:hover { background: rgba(234,162,109,.28); }

/* ---------- Header ------------------------------------------------------- */

.posh-b5g1-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--posh-orange-ink);
	margin: 0 0 8px;
}
.posh-b5g1-title {
	margin: 0 0 6px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--posh-blue);
}
.posh-b5g1-sub {
	margin: 0 0 16px;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.5;
	color: #6b7280;
}

/* ---------- Repeating-rule line (Posh Orange) --------------------------- */

.posh-b5g1-rule {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 9px 14px;
	border-radius: 12px;
	background: rgba(234,162,109,.16);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--posh-orange-ink);
}
.posh-b5g1-rule b { color: var(--posh-orange-ink); }
.posh-b5g1-rule__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--posh-orange);
}

/* ---------- Gamified milestone track ------------------------------------ */

.posh-b5g1-progress { margin-bottom: 18px; }
.posh-b5g1-progress__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.posh-b5g1-progress__count { font-size: 14px; font-weight: 800; color: var(--posh-blue); }
.posh-b5g1-progress__hint { font-size: 12.5px; font-weight: 700; color: var(--posh-orange-ink); white-space: nowrap; }

.posh-b5g1-tiers { display: flex; align-items: center; gap: 7px; }
.posh-b5g1-tier { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.posh-b5g1-tier__bar {
	flex: 1;
	height: 10px;
	border-radius: 999px;
	background: rgba(234,162,109,.20);
	overflow: hidden;
}
.posh-b5g1-tier__fill {
	position: relative;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--posh-orange);
	overflow: hidden;
	transition: width .6s cubic-bezier(.16,1,.3,1);
}
/* spice: a light sweep across the active, filling segment */
.posh-b5g1-tier.is-active .posh-b5g1-tier__fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
	transform: translateX(-100%);
	animation: posh-b5g1-shimmer 1.8s ease-in-out infinite;
}
@keyframes posh-b5g1-shimmer {
	0% { transform: translateX(-100%); }
	60%, 100% { transform: translateX(240%); }
}
.posh-b5g1-tier__gift {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(234,162,109,.16);
	border: 2px dashed rgba(234,162,109,.55);
	color: var(--posh-orange-ink);
	transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease;
}
.posh-b5g1-tier__gift svg { width: 14px; height: 14px; }
.posh-b5g1-tier__gift.lit {
	background: var(--posh-orange);
	border: 2px solid var(--posh-orange);
	color: var(--posh-blue);
	box-shadow: 0 5px 13px -4px rgba(234,162,109,.95);
	animation: posh-b5g1-gift-pop .45s cubic-bezier(.16,1,.3,1);
}
.posh-b5g1-tier__gift.next {
	border-style: solid;
	border-color: var(--posh-orange);
	animation: posh-b5g1-breathe 2s ease-in-out infinite;
}
@keyframes posh-b5g1-gift-pop {
	0% { transform: scale(.5); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* ---------- Slots grid --------------------------------------------------- */

.posh-b5g1-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.posh-b5g1-slot {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.16,1,.3,1);
}
/* empty slot: dotted outline + faint plus */
.posh-b5g1-slot.is-empty {
	border: 2.5px dashed rgba(234,162,109,.50);
	background: rgba(234,162,109,.07);
}
.posh-b5g1-slot.is-empty::after {
	content: '+';
	font-size: 26px;
	font-weight: 300;
	color: rgba(181,101,29,.5);
}
/* the very next slot to fill gets a gentle invite */
.posh-b5g1-slot.is-next {
	border-color: var(--posh-orange);
	animation: posh-b5g1-breathe 2s ease-in-out infinite;
}
@keyframes posh-b5g1-breathe {
	0%,100% { box-shadow: 0 0 0 0 rgba(234,162,109,0); }
	50% { box-shadow: 0 0 0 5px rgba(234,162,109,.20); }
}
/* filled slot: product image with soft neutral ring (so the free one pops) */
.posh-b5g1-slot.is-filled {
	border: 2.5px solid rgba(55,82,117,.12);
	background: #fff;
	box-shadow: 0 6px 16px -8px rgba(55,82,117,.3);
	animation: posh-b5g1-pop .45s cubic-bezier(.16,1,.3,1);
}
.posh-b5g1-slot.is-filled img { width: 100%; height: 100%; object-fit: cover; }
@keyframes posh-b5g1-pop {
	0% { transform: scale(.4); opacity: 0; }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}
/* free slot: the reward. Built to be obvious from across the room. */
.posh-b5g1-slot.is-free {
	border: 4px solid var(--posh-orange);
	background: #fff;
	transform: scale(1.06);
	z-index: 2;
	box-shadow: 0 0 0 5px rgba(234,162,109,.28), 0 14px 30px -8px rgba(234,162,109,.75);
	animation: posh-b5g1-free-pop .5s cubic-bezier(.16,1,.3,1);
}
.posh-b5g1-slot.is-free img { width: 100%; height: 100%; object-fit: cover; }
.posh-b5g1-slot.is-free::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(234,162,109,.16);
	pointer-events: none;
}
@keyframes posh-b5g1-free-pop {
	0% { transform: scale(.6); }
	60% { transform: scale(1.14); }
	100% { transform: scale(1.06); }
}
/* the big FREE banner sitting on the reward slot */
.posh-b5g1-freeflag {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	padding: 5px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--posh-blue);
	background: var(--posh-orange);
	box-shadow: 0 5px 14px -3px rgba(234,162,109,.9);
}

/* ---------- Self-care message ------------------------------------------- */

.posh-b5g1-care {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(234,162,109,.12);
	margin-bottom: 20px;
}
.posh-b5g1-care__icon { font-size: 20px; line-height: 1.2; }
.posh-b5g1-care__text { font-size: 13px; line-height: 1.5; color: var(--posh-blue); }
.posh-b5g1-care__text b { font-weight: 700; }

/* ---------- Buttons ------------------------------------------------------ */

.posh-b5g1-actions { display: flex; flex-direction: column; gap: 10px; }
.posh-b5g1-btn {
	width: 100%;
	border: none;
	border-radius: 14px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.posh-b5g1-btn--primary {
	color: #fff;
	background: linear-gradient(135deg, var(--posh-pink), #c93a6c);
	box-shadow: 0 12px 24px -10px rgba(224,69,123,.7);
}
.posh-b5g1-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -10px rgba(224,69,123,.8); }
.posh-b5g1-btn--orange {
	color: var(--posh-blue);
	background: var(--posh-orange);
	box-shadow: 0 12px 24px -10px rgba(234,162,109,.85);
}
.posh-b5g1-btn--orange:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -10px rgba(234,162,109,.95); }
.posh-b5g1-optout {
	background: none;
	border: none;
	padding: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #9aa3af;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.posh-b5g1-optout:hover { color: var(--posh-blue); }

/* opted-out gentle state */
.posh-b5g1-reclaim {
	text-align: center;
	font-size: 13.5px;
	color: var(--posh-blue);
	background: var(--posh-wash);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 16px;
}

/* ---------- Empty slot is clickable ------------------------------------- */

.posh-b5g1-slot.is-empty { cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.posh-b5g1-slot.is-empty:hover { border-color: var(--posh-orange); background: rgba(234,162,109,.16); }

/* ---------- Decide view (choices + recommendations) --------------------- */

.posh-b5g1-back {
	background: none;
	border: none;
	padding: 0 0 8px;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--posh-blue);
	cursor: pointer;
}
.posh-b5g1-back:hover { color: var(--posh-orange-ink); }

.posh-b5g1-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.posh-b5g1-choice {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	padding: 16px 18px;
	border-radius: 16px;
	cursor: pointer;
	border: 2px solid rgba(55,82,117,.14);
	background: #fff;
	transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.posh-b5g1-choice:hover { transform: translateY(-1px); border-color: var(--posh-blue); }
.posh-b5g1-choice--accent { border-color: var(--posh-orange); background: rgba(234,162,109,.10); }
.posh-b5g1-choice--accent:hover { box-shadow: 0 10px 22px -12px rgba(234,162,109,.9); }
.posh-b5g1-choice__t { font-size: 16px; font-weight: 700; color: var(--posh-blue); }
.posh-b5g1-choice__s { font-size: 13px; color: #6b7280; }

.posh-b5g1-recs { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.posh-b5g1-recs__loading { text-align: center; color: #6b7280; font-size: 14px; padding: 26px 8px; }
.posh-b5g1-rec {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: 16px;
	border: 2px solid rgba(55,82,117,.10);
	background: #fff;
}
.posh-b5g1-rec__img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--posh-wash); }
.posh-b5g1-rec__img img { width: 100%; height: 100%; object-fit: cover; }
.posh-b5g1-rec__body { flex: 1; min-width: 0; }
.posh-b5g1-rec__name { font-size: 14px; font-weight: 700; color: var(--posh-blue); line-height: 1.2; }
.posh-b5g1-rec__reason { font-size: 12.5px; font-weight: 600; color: var(--posh-orange-ink); line-height: 1.4; margin: 3px 0 8px; }
.posh-b5g1-rec__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.posh-b5g1-rec__price { font-size: 14px; font-weight: 700; color: var(--posh-blue); }
.posh-b5g1-rec__add {
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--posh-blue);
	background: var(--posh-orange);
	box-shadow: 0 8px 16px -8px rgba(234,162,109,.9);
	transition: transform .15s ease;
}
.posh-b5g1-rec__add:hover { transform: translateY(-1px); }
.posh-b5g1-rec__add.is-added { background: rgba(234,162,109,.25); color: var(--posh-orange-ink); box-shadow: none; cursor: default; }

/* ---------- Cart line labels -------------------------------------------- */

.posh-b5g1-was { text-decoration: line-through; color: #b6bcc6; font-size: .9em; margin-right: 4px; }
.posh-b5g1-line-free { color: var(--posh-orange-ink); font-weight: 700; font-size: .85em; }

/* ---------- Mobile ------------------------------------------------------- */

@media (max-width: 480px) {
	.posh-b5g1-pill { right: 12px; bottom: 12px; padding: 10px 16px 10px 10px; }
	.posh-b5g1-pill__text { max-width: 150px; font-size: 12.5px; }
	.posh-b5g1-modal { padding: 26px 20px 20px; border-radius: 22px; }
	.posh-b5g1-title { font-size: 22px; }
	.posh-b5g1-slots { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.posh-b5g1-slot, .posh-b5g1-bar, .posh-b5g1-bar::after, .posh-b5g1-tier__fill::after, .posh-b5g1-tier__gift, .posh-b5g1-btn { animation: none !important; transition: none !important; }
}