/* ============================================================================
   Costco97 — theme-specific additions on top of the master stylesheet.
   Only rules that the master sheet (costco97-theme.css) doesn't carry:
   nav internals, mobile drawer, search overlay scaffolding, ad-slot wrappers.
   ========================================================================== */

/* ---- Nav internals ---- */
.c97-nav__right { display: flex; gap: 6px; align-items: center; }
.c97-nav__linklist { display: flex; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; }
.c97-nav__icon { background: transparent; border: none; cursor: pointer; color: var(--c97-ink); }
/* Logo — constrain to 30px whether it's the WP custom logo or the fallback. */
.c97-nav__brand, .c97-nav .custom-logo-link { display: flex; align-items: center; line-height: 0; text-decoration: none; }
.c97-nav__brand img, .c97-nav .custom-logo { height: 30px; width: auto; display: block; }
.c97-nav .c97-nav__cta:hover { text-decoration: none; }

/* Eyebrow dot (category color comes from the .c97-cat--* helper) */
.c97-eyebrow__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 2px; }

/* ---- Share row (shared component — renders on every single template) ---- */
.c97-sharerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--c97-line-faint); }
.c97-sharerow__label { font-size: 13px; font-weight: 600; color: var(--c97-ink); }
.c97-sharerow a,
.c97-sharerow button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c97-line-soft); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--c97-ink); cursor: pointer; }
.c97-sharerow a:hover,
.c97-sharerow button:hover { background: var(--c97-blue-tint); color: var(--c97-blue); text-decoration: none; }

/* "Written by" kicker in the author-bio box. */
.c97-bio__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c97-muted); }

/* ---- Prose bullets — blue-dot treatment matching the key-features box.
   (Positioned identically to .c97d-features li::before so the two rules
   overlap invisibly when both apply inside the box.) ---- */
.c97-prose ul { list-style: none; padding-left: 2px; }
.c97-prose ul li { position: relative; padding-left: 19px; margin: 0 0 10px; }
.c97-prose ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c97-blue); }
.c97-prose ul ul { margin-top: 10px; padding-left: 6px; }

/* ---- Mobile drawer ---- */
.c97-drawer { border-top: 1px solid var(--c97-line-soft); background: #fff; padding: 8px 22px 18px; animation: c97fade .2s ease; }
.c97-drawer__links { list-style: none; margin: 0; padding: 0; }
.c97-drawer__links a { display: block; font-size: 17px; color: var(--c97-ink); padding: 13px 4px; border-bottom: 1px solid var(--c97-line-faint); }
.c97-drawer__links a:hover { text-decoration: none; color: var(--c97-blue); }
.c97-drawer__cta { width: 100%; margin-top: 16px; padding: 13px; font-size: 16px; }
@media (min-width: 901px) { .c97-drawer { display: none !important; } }

/* ---- Search overlay scaffolding (visual styles live in the master sheet) ----
   The master sheet sets display:flex on .c97-search-overlay, which overrides
   the UA's [hidden]{display:none} — re-assert it or the closed overlay blocks
   every click on the page. Same guard for the drawer. */
.c97-search-overlay[hidden],
.c97-drawer[hidden] { display: none !important; }

.c97-search-shade__inner { max-width: 820px; margin: 0 auto; padding: 26px 22px 22px; }
.c97-search-form { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--c97-ink); padding-bottom: 12px; }
.c97-search-close { background: transparent; border: none; cursor: pointer; color: var(--c97-muted); font-size: 15px; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.c97-search-close:hover { color: var(--c97-ink); }
.c97-search-close span { font-size: 20px; line-height: 1; }
.c97-search-popular { padding-top: 20px; }
.c97-search-popular__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c97-muted); margin-bottom: 14px; }
.c97-search-popular__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.c97-search-popular__chips .c97-chip:hover { text-decoration: none; }
.c97-no-scroll { overflow: hidden; }

/* ---- Footer internals (master sheet covers cols/links; these are ours) ---- */
.c97-footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.c97-footer__brand { max-width: 300px; }
.c97-footer__brand p { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--c97-footer-txt); }
.c97-footer__insta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--c97-ink) !important; font-size: 12px; font-weight: 500; }
.c97-footer__insta:hover { color: var(--c97-blue) !important; text-decoration: none; }

/* ---- Subscribe forms (native, per the mockups; Beehiiv API wired later) ---- */
.c97-subform { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.c97-subform input { border: 1px solid var(--c97-line); border-radius: 10px; background: #fff; padding: 14px 18px; font-size: 17px; width: 320px; max-width: 100%; color: var(--c97-ink); outline: none; font-family: inherit; }
.c97-subform input:focus { border-color: var(--c97-blue); }
.c97-subform button { background: var(--c97-blue); color: #fff; border: none; border-radius: 10px; padding: 14px 28px; font-size: 17px; font-weight: 500; cursor: pointer; font-family: inherit; }
.c97-subform button:hover { background: var(--c97-blue-press); }
.c97-subform--black input { border-color: #424245; background: var(--c97-ink); color: var(--c97-wash); width: 300px; padding: 13px 16px; }
.c97-subform--black input::placeholder { color: #6e6e73; }
.c97-subform--black button { background: var(--c97-wash); color: var(--c97-blue); border-radius: var(--c97-r-pill); padding: 13px 26px; }
.c97-subform--black button:hover { background: #fff; }
.c97-subdone { margin-top: 14px; font-size: 15px; font-weight: 500; }
.c97-subdone--box { max-width: 420px; margin: 14px auto 0; background: var(--c97-blue-tint); border: 1px solid #cfe0f2; border-radius: 12px; padding: 18px 22px; font-size: 17px; color: var(--c97-blue); }

/* ---- Ad bands (c97_ad_bar) — sitewide, so live here not in home.css ---- */
.c97-adbar { background: #fff; border-top: 1px solid var(--c97-line-faint); border-bottom: 1px solid var(--c97-line-faint); padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c97-adbar__label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #adadb4; }
/* Size to the served creative (728-970 wide) — a fixed width shifts wider
   units off-center. The flex column's align-items:center does the centering. */
.c97-adbar .c97-adslot { width: auto; max-width: 100%; min-height: 90px; }

/* ---- Ad slots (TPD-compatible containers; see inc/ad-slots.php) ----
   Device split is ours to enforce — don't rely on the ad partner's CSS. */
.c97-adslot .tpd-banner-desktop { display: block; }
.c97-adslot .tpd-banner-mobile  { display: none; }
/* Rail slots are box units (dsk-box-ad-*, max 300 wide) — clamp so an
   oversized or misconfigured creative can never blow out the 300px rail. */
.c97-rail .c97-adslot { max-width: var(--c97-rail-w); overflow: hidden; }
/* Top sticky banner (rebuild of the old theme's tpd_sticky_banner):
   off-screen until main.js adds .is-on after the slot fills; dismissible. */
.c97-topsticky { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.14); display: flex; justify-content: center; align-items: center; padding: 5px 44px; transform: translateY(-110%); transition: transform .35s ease; }
.c97-topsticky.is-on { transform: translateY(0); }
.c97-topsticky__x { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: #f0f0f2; color: #6e6e73; font-size: 16px; line-height: 1; cursor: pointer; }
.c97-topsticky__x:hover { background: #e4e4e8; }

/* In-content box units (c97_ad_incontent): zero footprint until an ad iframe
   renders — then spacing + the "Advertisement" label appear. Slots must stay
   display:flex (not none) or lazy-load observers would never fire. */
.c97-ad--incontent { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c97-ad--incontent .c97-adbar__label { display: none; }
.c97-ad--incontent:has(iframe) { margin: 26px auto; }
.c97-ad--incontent:has(iframe) .c97-adbar__label { display: block; }
@media (max-width: 760px) {
	.c97-adslot .tpd-banner-desktop { display: none; }
	.c97-adslot .tpd-banner-mobile  { display: block; }
}

/* Full-width template: one 768px reading column, no rail (mockup "full" mode). */
.c97-layout--full { display: block; max-width: 768px; margin: 0 auto; padding: 44px 22px 20px; }

/* The master sheet hides every .c97-btn in the nav on mobile - the drawer CTA must survive. */
@media (max-width: 900px) { .c97-nav .c97-btn.c97-drawer__cta { display: inline-flex !important; } }

/* Team bubbles show the staff avatar on the right (the mockup hid it). */
.cskin-imessage #comments .bypostauthor > .comment-body { padding-right: 40px; }
.cskin-imessage #comments .bypostauthor > .comment-body .avatar { display: block; left: auto; right: 0; }

/* Load-more buttons: spinner while a fetch is in flight (JS disables them). */
[data-ra-loadmore]:disabled svg, [data-rc-loadmore]:disabled svg, [data-dg-loadmore]:disabled svg,
[data-np-loadmore]:disabled svg, [data-la-loadmore]:disabled svg, [data-ar-loadmore]:disabled svg { display: none; }
[data-ra-loadmore]:disabled::after, [data-rc-loadmore]:disabled::after, [data-dg-loadmore]:disabled::after,
[data-np-loadmore]:disabled::after, [data-la-loadmore]:disabled::after, [data-ar-loadmore]:disabled::after {
	content: ""; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-top-color: transparent;
	border-radius: 50%; animation: c97spin .7s linear infinite; }
@keyframes c97spin { to { transform: rotate(360deg); } }

/* The avatar lives inside .comment-meta, which the skin hides for team
   bubbles - restore the whole meta row (name, date, avatar) right-aligned. */
.cskin-imessage #comments .bypostauthor > .comment-body .comment-meta { display: block; margin: 0 6px 3px 0; }

/* Load-more spinner, Costco edition: a spinning shopping cart in the theme
   color (currentColor via mask, so it matches each button's text). */
[data-ra-loadmore]:disabled::after, [data-rc-loadmore]:disabled::after, [data-dg-loadmore]:disabled::after,
[data-np-loadmore]:disabled::after, [data-la-loadmore]:disabled::after, [data-ar-loadmore]:disabled::after {
	border: none; border-radius: 0; width: 19px; height: 17px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.9 107.5'%3E%3Cpath d='M3.9 7.9C1.8 7.9 0 6.1 0 3.9 0 1.8 1.8 0 3.9 0h10.2c.1 0 .3 0 .4 0 3.6.1 6.8.8 9.5 2.5 3 1.9 5.2 4.8 6.4 9.1 0 .1 0 .2.1.3l1 4H119c2.2 0 3.9 1.8 3.9 3.9 0 .4-.1.8-.2 1.2l-10.2 41.1c-.4 1.8-2 3-3.8 3H44.7c1.4 5.2 2.8 8 4.7 9.3 2.3 1.5 6.3 1.6 13 1.5h45.3c2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.8 3.9-3.9 3.9H62.5c-8.3.1-13.4-.1-17.5-2.8-4.2-2.8-6.4-7.6-8.6-16.3L23 13.9c0-.1 0-.1-.1-.2-.6-2.2-1.6-3.7-3-4.5-1.4-.9-3.3-1.3-5.5-1.3-.1 0-.2 0-.3 0H3.9zM96 88.3c5.3 0 9.6 4.3 9.6 9.6 0 5.3-4.3 9.6-9.6 9.6-5.3 0-9.6-4.3-9.6-9.6 0-5.3 4.3-9.6 9.6-9.6zM53.9 88.3c5.3 0 9.6 4.3 9.6 9.6 0 5.3-4.3 9.6-9.6 9.6-5.3 0-9.6-4.3-9.6-9.6 0-5.3 4.3-9.6 9.6-9.6zM33.7 23.7l8.9 33.5h63.1l8.3-33.5H33.7z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.9 107.5'%3E%3Cpath d='M3.9 7.9C1.8 7.9 0 6.1 0 3.9 0 1.8 1.8 0 3.9 0h10.2c.1 0 .3 0 .4 0 3.6.1 6.8.8 9.5 2.5 3 1.9 5.2 4.8 6.4 9.1 0 .1 0 .2.1.3l1 4H119c2.2 0 3.9 1.8 3.9 3.9 0 .4-.1.8-.2 1.2l-10.2 41.1c-.4 1.8-2 3-3.8 3H44.7c1.4 5.2 2.8 8 4.7 9.3 2.3 1.5 6.3 1.6 13 1.5h45.3c2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.8 3.9-3.9 3.9H62.5c-8.3.1-13.4-.1-17.5-2.8-4.2-2.8-6.4-7.6-8.6-16.3L23 13.9c0-.1 0-.1-.1-.2-.6-2.2-1.6-3.7-3-4.5-1.4-.9-3.3-1.3-5.5-1.3-.1 0-.2 0-.3 0H3.9zM96 88.3c5.3 0 9.6 4.3 9.6 9.6 0 5.3-4.3 9.6-9.6 9.6-5.3 0-9.6-4.3-9.6-9.6 0-5.3 4.3-9.6 9.6-9.6zM53.9 88.3c5.3 0 9.6 4.3 9.6 9.6 0 5.3-4.3 9.6-9.6 9.6-5.3 0-9.6-4.3-9.6-9.6 0-5.3 4.3-9.6 9.6-9.6zM33.7 23.7l8.9 33.5h63.1l8.3-33.5H33.7z'/%3E%3C/svg%3E") no-repeat center / contain;
	animation: c97spin .9s linear infinite;
}

/* Polished subscribe validation: theme-red error pill + input shake. */
.c97-suberr { display: inline-flex; align-items: center; margin-top: 10px; background: #fdeceb; border: 1px solid #f4cfcd; border-radius: 10px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: #8a2c28; animation: c97fade .2s ease; }
.c97-subform input.is-invalid, .c97-subform--rail input.is-invalid { border-color: #B4231F !important; box-shadow: 0 0 0 3px rgba(180,35,31,.12); animation: c97shake .3s; }
@keyframes c97shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }