/* ============================================================================
   Costco97 - seasonal Black Friday promo (inc/bf-promo.php)
   Ribbon above the nav on every page + pinned card in the homepage hero.
   Window colors match the banner colors in Costco's Black Friday ad.
   ========================================================================== */
.c97bf-c-w1 { --wc: #BFE9F5; --wi: #0B3954; }
.c97bf-c-w2 { --wc: #C3E6C6; --wi: #134A2A; }
.c97bf-c-w3 { --wc: #3D1B19; --wi: #ffffff; }
.c97bf-c-w4 { --wc: #C5414F; --wi: #ffffff; }
.c97bf-c-w5 { --wc: #343434; --wi: #ffffff; }

/* ---- Ribbon (scrolls away; the sticky nav keeps top: 0) ---- */
.c97bf-ribbon { position: relative; background: linear-gradient(90deg, #a50e26, #c4122e 50%, #a50e26); color: #fff; font-family: var(--c97-font); }
.c97bf-ribbon[hidden] { display: none; }
.c97bf-ribbon__in { max-width: var(--c97-container); margin: 0 auto; padding: 10px 56px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; line-height: 1.35; }
.c97bf-ribbon__msg strong { font-weight: 600; }
.c97bf-ribbon__note { color: #ffd9de; }
.c97bf-ribbon__cta { display: inline-flex; align-items: center; gap: 6px; flex: none; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--c97-r-pill); padding: 5px 13px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.c97bf-ribbon__cta:hover { background: rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }
.c97bf-ribbon__x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; line-height: 26px; padding: 0; cursor: pointer; }
.c97bf-ribbon__x:hover { background: rgba(255, 255, 255, .24); }
.c97bf-ribbon a:focus-visible, .c97bf-ribbon__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.c97bf-ribbon__short { display: none; }
@media (max-width: 640px) {
	.c97bf-ribbon__in { justify-content: flex-start; padding: 10px 48px 10px 16px; gap: 10px; font-size: 13px; }
	.c97bf-ribbon__long { display: none; }
	.c97bf-ribbon__short { display: inline; }
}

/* ---- Pinned hero card (homepage) ---- */
.c97h-brief__card[hidden] { display: none !important; }
.c97h-brief__card.c97bf-card { background: linear-gradient(160deg, #c4122e 0%, #8f0a20 100%); color: #fff; box-shadow: 0 18px 40px -22px rgba(143, 10, 32, .7); }
.c97bf-card .c97h-brief__body { display: flex; flex-direction: column; gap: 12px; }
.c97bf-card .c97h-brief__title { margin-top: 0; color: #fff; }
.c97bf-card .c97bf-card__tag { align-self: flex-start; background: #fff; color: #c4122e; }
.c97bf-strip { position: relative; display: flex; gap: 3px; height: 8px; margin-top: 2px; }
.c97bf-strip > i { display: block; height: 100%; background: var(--wc); }
.c97bf-strip > i:first-child { border-radius: 99px 0 0 99px; }
.c97bf-strip > i:nth-child(5) { border-radius: 0 99px 99px 0; }
.c97bf-strip__today { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(143, 10, 32, .55); }
.c97bf-strip__today[hidden] { display: none; }
.c97bf-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.c97bf-now { display: inline-flex; align-items: center; gap: 8px; background: var(--wc); color: var(--wi); border-radius: var(--c97-r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.c97bf-now > b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; animation: c97bfPulse 1.6s infinite; }
.c97bf-card__cta { font-size: 14px; font-weight: 600; color: #fff; }
/* The Black Friday red pill sits on a red card: a white hairline keeps it legible. */
.c97bf-card .c97bf-now.c97bf-c-w4 { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
@keyframes c97bfPulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .c97bf-now > b { animation: none; } }
/* On phones the hero cards stack below the subscribe box; lead with Black Friday. */
@media (max-width: 760px) { .c97bf-card { order: -1; } }