/* =====================================================================
   PinBoostr site header (inc/site-nav.php). Sticky bar, mega panels on
   desktop (>= 1024px), a full-height drawer with accordions below that.
   Every class is .pbh-*, so Tailwind's purge and retro-brand.css never
   touch it. No icon font needed for anything visible on first paint.
   ===================================================================== */

.pbh {
  --pbh-ink: #111827;
  --pbh-ink-2: #374151;
  --pbh-mut: #6b7280;
  --pbh-soft: #9ca3af;
  --pbh-line: #eee7e3;
  --pbh-rose: #e11d48;
  --pbh-rose-dk: #be123c;
  --pbh-tint: #fff1f3;
  --pbh-wash: #fbf8f6;
  --pbh-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: sticky;
  top: 0;
  z-index: 60;
  font-family: var(--pbh-font);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--pbh-line);
}
@supports (backdrop-filter: blur(1px)) {
  .pbh { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
}
.pbh.is-open, .pbh.is-drawer { background: #fff; }
/* A backdrop-filter makes the header the containing block for fixed children, which would trap the
   drawer inside the 64px bar. Drop it while the drawer is open so the drawer covers the viewport. */
.pbh.is-drawer { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pbh *, .pbh *::before, .pbh *::after { box-sizing: border-box; }
.pbh a { text-decoration: none; }
.pbh :focus-visible { outline: 2px solid var(--pbh-rose); outline-offset: 2px; border-radius: 10px; }

.pbh-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  max-width: 80rem;
  margin: 0 auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .pbh-bar { padding-inline: 1.5rem; } }
@media (min-width: 1024px) {
  /* Logo left, menu centred on the page, buttons right. */
  .pbh-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-inline: 2rem; gap: 20px; }
  .pbh-brand { justify-self: start; }
  .pbh-actions { justify-self: end; margin-left: 0; }
}

.pbh-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; color: var(--pbh-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pbh-brand img { display: block; width: 32px; height: 32px; }
.pbh-brand b { font-weight: 700; color: var(--pbh-rose); }

/* ── Desktop menu ─────────────────────────────────────────────── */

.pbh-nav { display: none; }
@media (min-width: 1024px) { .pbh-nav { display: block; } }
.pbh-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pbh-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pbh-ink-2);
  font: 500 14.5px/1 var(--pbh-font);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pbh-top:hover, .pbh-top[aria-expanded="true"] { background: var(--pbh-tint); color: var(--pbh-ink); }
.pbh-top.is-current { color: var(--pbh-rose); }
.pbh-chev { width: 12px; height: 12px; flex: none; transition: transform 0.2s ease; }
.pbh-top-ico { margin-right: 2px; font-size: 15px; color: #1a73e8; }
.pbh-drow .pbh-top-ico { margin-right: 10px; font-size: 17px; }
/* Narrow desktops: the items tighten. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pbh-top { padding: 0 9px; font-size: 14px; }
}
[aria-expanded="true"] > .pbh-chev { transform: rotate(180deg); }

/* ── Deal item (only while a deal runs; inc/site-nav.php) ─────────
   A rose price tag that swings and a butter sticker that pops on the
   same beat, every few seconds. Hidden for subscribers by inc/deal.php. */
.pbh-deal { position: relative; color: var(--pbh-ink); font-weight: 600; }
.pbh-deal-ico { width: 16px; height: 16px; flex: none; color: var(--pbh-rose); transform-origin: 20% 20%; animation: pbh-deal-swing 4.2s 1.2s ease-in-out infinite; }
.pbh-deal-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 3px 6px 2px;
  border: 1.5px solid var(--pbh-ink);
  border-radius: 6px;
  background: #ffe06a;
  color: var(--pbh-ink);
  box-shadow: 2px 2px 0 var(--pbh-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: rotate(-4deg);
  animation: pbh-deal-pop 4.2s 1.2s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pbh-deal:hover { background: #fff7d1; color: var(--pbh-ink); }
.pbh-deal:hover .pbh-deal-tag { animation: none; transform: rotate(0) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--pbh-ink); }
.pbh-deal:hover .pbh-deal-ico { animation: none; transform: rotate(-12deg); }
.pbh-deal.is-current { color: var(--pbh-rose); }
@keyframes pbh-deal-swing {
  0%, 70%, 100% { transform: none; }
  76% { transform: rotate(-16deg); }
  82% { transform: rotate(11deg); }
  88% { transform: rotate(-6deg); }
  94% { transform: rotate(2deg); }
}
@keyframes pbh-deal-pop {
  0%, 70%, 100% { transform: rotate(-4deg) scale(1); }
  78% { transform: rotate(3deg) scale(1.16); }
  86% { transform: rotate(-6deg) scale(0.96); }
  93% { transform: rotate(-3deg) scale(1.03); }
}
/* Drawer row: the deal leads the list. */
.pbh-drawer .pbh-drow--deal { background: #fff7d1; border-radius: 12px; border-bottom: 0; margin: 6px 0 4px; padding: 0 12px; }
.pbh-drow--deal .pbh-deal { display: inline-flex; align-items: center; gap: 8px; }
.pbh-drow--deal .pbh-deal-ico { width: 18px; height: 18px; }
.pbh-drow--deal small { font-size: 13px; font-weight: 600; color: var(--pbh-rose-dk); }

/* Panels hang from the header (the nearest positioned box), full width. */
.pbh-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--pbh-line);
  border-bottom: 1px solid var(--pbh-line);
  box-shadow: 0 28px 48px -28px rgba(17, 24, 39, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.pbh-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 1023px) { .pbh-panel { display: none; } }

.pbh-panel-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 290px);
  gap: 28px;
  max-width: 80rem;
  margin: 0 auto;
  padding: 26px 2rem 28px;
}
.pbh-col { min-width: 0; }
.pbh-col-title { margin: 0 0 8px; padding: 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pbh-soft); }
.pbh-col:nth-child(1) .pbh-col-title { color: #e11d48; }
.pbh-col:nth-child(2) .pbh-col-title { color: #7c3aed; }
.pbh-col:nth-child(3) .pbh-col-title { color: #2563eb; }

.pbh-link { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--pbh-ink); transition: background-color 0.12s ease; }
.pbh-link:hover { background: var(--pbh-wash); }
.pbh-link:hover .pbh-ico { background: var(--c); color: #fff; }
.pbh-link[aria-current="page"] strong { color: var(--pbh-rose); }
.pbh-ico { --c: var(--pbh-rose); --t: var(--pbh-tint); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--t); color: var(--c); font-size: 14.5px; transition: background-color 0.12s ease, color 0.12s ease; }
/* Colourful tiles: a 7-colour walk (pinboostr_site_nav_tone), brand icons in their own colour. */
.pbh-ico.t1 { --c: #e11d48; --t: #fff1f3; }
.pbh-ico.t2 { --c: #7c3aed; --t: #f3efff; }
.pbh-ico.t3 { --c: #2563eb; --t: #eaf1ff; }
.pbh-ico.t4 { --c: #059669; --t: #e8faf2; }
.pbh-ico.t5 { --c: #d97706; --t: #fff5e3; }
.pbh-ico.t6 { --c: #c026d3; --t: #fcefff; }
.pbh-ico.t7 { --c: #0d9488; --t: #e5f8f5; }
.pbh-ico.is-wp { --c: #21759b; --t: #e8f3f9; }
.pbh-ico.is-li { --c: #0a66c2; --t: #e8f1fb; }
.pbh-ico.is-chrome { --c: #1a73e8; --t: #e8f0fe; }
.pbh-link strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.pbh-link small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--pbh-mut); }
.pbh-link.is-plain { padding: 8px 10px; }
.pbh-link.is-plain strong { font-weight: 500; color: var(--pbh-ink-2); }
.pbh-link.is-plain:hover strong { color: var(--pbh-ink); }

.pbh-feature {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background: #1f1418;
  color: #fff;
  transition: transform 0.15s ease;
}
.pbh-feature:hover { transform: translateY(-2px); }
/* One colour per menu: Product rose, Free tools violet, Resources blue. */
.pbh-feature--product { background: #e11d48; }
.pbh-feature--tools { background: #6d28d9; }
.pbh-feature--resources { background: #1d4ed8; }
.pbh-feature--product .pbh-kicker, .pbh-feature--tools .pbh-kicker, .pbh-feature--resources .pbh-kicker { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pbh-feature--product .pbh-feature-text, .pbh-feature--tools .pbh-feature-text, .pbh-feature--resources .pbh-feature-text { color: rgba(255, 255, 255, 0.86); }
.pbh-feature--product .pbh-more, .pbh-feature--tools .pbh-more, .pbh-feature--resources .pbh-more { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.pbh-kicker { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fecdd3; }
.pbh-feature strong { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.pbh-feature-text { font-size: 13px; line-height: 1.55; color: #d6c8cc; }
.pbh-more { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: #fda4af; }

.pbh-panel-foot { border-top: 1px solid var(--pbh-line); background: var(--pbh-wash); }
.pbh-panel-foot-in { display: flex; flex-wrap: wrap; gap: 8px 28px; max-width: 80rem; margin: 0 auto; padding: 12px 2rem 13px 2.6rem; }
.pbh-panel-foot a { font-size: 13.5px; font-weight: 600; color: var(--pbh-ink-2); }
.pbh-panel-foot a:hover { color: var(--pbh-rose); }

/* ── Right side ───────────────────────────────────────────────── */

.pbh-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pbh-guest { display: flex; align-items: center; gap: 6px; }
.pbh-signin { display: none; padding: 0 12px; white-space: nowrap; height: 40px; align-items: center; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--pbh-ink-2); }
.pbh-signin:hover { background: var(--pbh-wash); color: var(--pbh-ink); }
@media (min-width: 1024px) { .pbh-signin { display: inline-flex; } }
.pbh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--pbh-rose);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(190, 18, 60, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition: background-color 0.15s ease;
}
.pbh-cta:hover { background: var(--pbh-rose-dk); color: #fff; }
@media (max-width: 380px) { .pbh-actions .pbh-cta { padding: 0 12px; font-size: 13px; } }

.pbh-burger { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: -6px; border: 0; border-radius: 10px; background: none; color: var(--pbh-ink); cursor: pointer; }
.pbh-burger:hover { background: var(--pbh-wash); }
.pbh-burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pbh-burger path { transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: 12px 12px; }
.pbh-burger[aria-expanded="true"] .pbh-burger-a { transform: translateY(5px) rotate(45deg); }
.pbh-burger[aria-expanded="true"] .pbh-burger-b { opacity: 0; }
.pbh-burger[aria-expanded="true"] .pbh-burger-c { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 1024px) { .pbh-burger { display: none; } }

/* ── Mobile drawer ────────────────────────────────────────────── */

.pbh-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: var(--pbh-top, 64px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--pbh-line); }
.pbh-drawer[hidden] { display: none; }
@media (min-width: 1024px) { .pbh-drawer { display: none !important; } }
.pbh-drawer-in { max-width: 40rem; margin: 0 auto; padding: 8px 1rem 32px; }
.pbh-drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--pbh-line);
  background: none;
  color: var(--pbh-ink);
  font: 600 16px/1.2 var(--pbh-font);
  text-align: left;
  cursor: pointer;
}
.pbh-drow .pbh-chev { width: 14px; height: 14px; color: var(--pbh-soft); }
.pbh-acc-panel { padding: 8px 0 14px; border-bottom: 1px solid var(--pbh-line); }
.pbh-acc-panel[hidden] { display: none; }
.pbh-acc-panel .pbh-col-title { margin: 12px 0 4px; padding: 0 6px; }
.pbh-acc-panel .pbh-link { padding: 8px 6px; align-items: center; }
.pbh-acc-panel .pbh-ico { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.pbh-acc-panel .pbh-link strong { font-size: 15px; font-weight: 500; }
.pbh-acc-panel .is-foot strong { font-weight: 600; color: var(--pbh-rose); }
.pbh-drawer-cta { display: grid; gap: 10px; margin-top: 24px; }
.pbh-drawer-cta .pb-auth-guest { display: grid; gap: 10px; }
.pbh-drawer-cta .pbh-cta, .pbh-btn-line { height: 48px; font-size: 15px; }
.pbh-btn-line { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #e5dcd8; border-radius: 10px; color: var(--pbh-ink); font-weight: 600; }
html.pbh-lock, html.pbh-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pbh *, .pbh *::before, .pbh *::after { transition: none !important; }
  .pbh-deal-ico, .pbh-deal-tag { animation: none !important; }
}
.pbh .pb-auth-user.hidden { display: none; }

/* ── Top bar: the live deal or offer (header.php) ─────────────────────────────
   Solid brand rose, a butter sticker, flip-digit countdown boxes and an ink
   button — loud enough to be seen above a white header, no gradient or glow.
   The strike, price count-down and digit flip come from the deal script
   (inc/deal.php: [data-pb-deal-anim], [data-pb-deal-count], .is-tick). */

.pbt {
  --pbt-ink: #0b0b10;
  --pbt-butter: #ffe06a;
  position: relative;
  background: #e11d48;
  color: #fff;
  font: 500 13.5px/1.3 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pbt-in { max-width: 80rem; margin: 0 auto; padding: 9px 44px 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.pbt-tag { display: none; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border: 1.5px solid var(--pbt-ink); border-radius: 7px; background: var(--pbt-butter); color: var(--pbt-ink); box-shadow: 2px 2px 0 var(--pbt-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: rotate(-2deg); }
.pbt-tag svg { width: 14px; height: 14px; flex: none; }
.pbt-what { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; }
.pbt-name { font-weight: 600; }
.pbt-was { display: inline-block; color: rgba(255, 255, 255, .8); font-weight: 600; line-height: 1; }
.pbt .pbfx-strike::after { top: calc(50% - 1px); height: 2px; background: var(--pbt-butter); }
.pbt-price { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pbt-once { font-weight: 600; }
.pbt-save { display: none; align-self: center; padding: 2px 7px; border-radius: 6px; background: #fff; color: #be123c; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pbt-sep { display: none; width: 1px; height: 18px; background: rgba(255, 255, 255, .32); }
.pbt-cd { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbt-cd-l { display: none; margin-right: 4px; font-weight: 600; }
.pbt-u { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 36px; padding: 4px 6px; border-radius: 6px; background: rgba(11, 11, 16, .28); overflow: hidden; }
.pbt-u b { display: inline-block; font-size: 14px; font-weight: 800; }
.pbt-u i { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .8; }
.pbt-cd.is-ending .pbt-u { background: var(--pbt-ink); }
.pbt-cd.is-ending .pbt-u b { color: var(--pbt-butter); }
.pbt-spots { display: none; font-weight: 600; white-space: nowrap; }
.pbt-spots.is-low { color: var(--pbt-butter); font-weight: 800; }
.pbt .pbt-go { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; background: var(--pbt-ink); color: #fff; box-shadow: 2px 2px 0 var(--pbt-butter); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.pbt .pbt-go:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--pbt-butter); }
.pbt-go svg { width: 14px; height: 14px; animation: pbt-arrow 4s 2s ease-in-out infinite; }
.pbt-go:hover svg { animation: none; transform: translateX(2px); }
.pbt-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .8); font-size: 20px; line-height: 1; cursor: pointer; }
.pbt-x:hover { background: rgba(11, 11, 16, .2); color: #fff; }
.pbt-go:focus-visible, .pbt-x:focus-visible { outline: 2px solid var(--pbt-butter); outline-offset: 2px; }
@keyframes pbt-arrow { 0%, 82%, 100% { transform: none; } 88% { transform: translateX(4px); } 94% { transform: translateX(-1px); } }

@media (min-width: 640px) {
  .pbt-in { padding: 8px 52px; gap: 8px 16px; }
  .pbt-tag { display: inline-flex; }
  .pbt-x { top: 50%; transform: translateY(-50%); }
}
.pbt-sep.pbt-sep--spots { display: none; }
@media (min-width: 1180px) {
  .pbt-save, .pbt-sep { display: inline-block; }
  .pbt-cd-l { display: inline; }
}
@media (min-width: 1280px) { .pbt-spots, .pbt-sep.pbt-sep--spots { display: inline-block; } }
@media (prefers-reduced-motion: reduce) { .pbt-go svg { animation: none; } .pbt .pbt-go { transition: none; } }