.app-header {
  position: sticky !important;
}

/* Quality-tier tabs (High-Quality / Active / Exclusive-VIP): vendor.css
   already ships the full, correct selection styling (tab gradient swap,
   colored ring on the panel, colored savings text, colored button
   gradient) keyed off the real buzzoid tab ids (#tab-hq/#tab-active/#tab-ci)
   and data-active-tab values (hq/active/ci) -- our markup previously used
   the wrong id ("tab-premium") for the VIP tier, which silently dropped it
   out of every one of those rules. Now that the ids/values match, no
   override is needed here at all. */

/* .badge--green (Best Selling) and the generic .badge (Bulk Price uses
   .badge--black, which vendor.css doesn't special-case -- it just falls
   back to .badge's own animated var(--badge-bulk-gradient) stripe, which
   is already tier-colored via .app-packages__tabpanel's --badge-bulk-gradient
   custom property) are both fully styled in vendor.css already. */

/* vendor.css only ships utility classes actually used on buzzoid.com; these
   section-padding sizes aren't present there but are used by our templates. */
.tw-py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.tw-py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.tw-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.tw-py-24 { padding-top: 6rem; padding-bottom: 6rem; }

@media (min-width: 800px) {
  .md\:tw-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:tw-py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.service-card__footer {
  margin-top: 20px;
}

@media (min-width: 400px) {
  .xs\:tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.platform-panel .tw-btn {
  white-space: normal;
  line-height: 1.3;
  padding-top: 14px;
  padding-bottom: 14px;
}

main {
  padding-top: 0 !important;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}

.trust-strip span {
  font-size: 13px;
  font-weight: 700;
  color: #484f5e;
}

.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
}

.feature-block:last-child { margin-bottom: 0; }

.feature-block__visual {
  border-radius: 24px;
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.feature-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-block__content h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1f2430;
  margin: 0 0 14px;
}

.feature-block__content .text {
  font-size: 15px;
  color: #2c323e;
  margin: 0 0 10px;
  font-weight: 500;
}

.feature-block__content .subtext {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

@media (min-width: 800px) {
  .feature-block { grid-template-columns: 1fr 1fr; }
  .feature-block--reverse .feature-block__visual { order: 2; }
  .feature-block--reverse .feature-block__content { order: 1; }
}

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}

.stats-bar .num {
  font-size: 32px;
  font-weight: 800;
  color: #1f2430;
}

.stats-bar .label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.app-accordion__item {
  margin-bottom: 10px;
  cursor: pointer;
}

.app-accordion__content {
  height: 0;
  /* vendor.css puts `transition: all` on this element, which would otherwise
     animate padding-top/padding-bottom too and race the JS height
     calculation below (the JS would measure the target height before the
     padding transition finished, clipping the last line permanently since
     the JS then locks in that too-short pixel height). Scope the transition
     to height only so padding changes apply instantly. */
  transition: height 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.app-accordion__item.open .app-accordion__content {
  padding-top: 10px;
  padding-bottom: 18px;
}

.app-accordion__icon-toggle::before,
.app-accordion__icon-toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}

.app-accordion__icon-toggle::before {
  width: 10px;
  height: 2px;
  top: 4px;
  left: 0;
}

.app-accordion__icon-toggle::after {
  width: 2px;
  height: 10px;
  top: 0;
  left: 4px;
  transition: transform 0.2s;
}

.app-accordion__item.open .app-accordion__icon-toggle::after {
  transform: scaleY(0);
}

@media (min-width: 900px) {
  .app-accordion--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
}

.site-wordmark {
  font-family: Rethink Sans, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #1f2430;
}

body.show-nav .app-nav {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  z-index: 20;
  padding-bottom: 24px;
  box-shadow: 0 20px 30px rgba(20, 22, 30, 0.08);
}

.app-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.app-nav-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-weight: 600;
  font-size: 14px;
  color: #484f5e;
}

.app-nav-list li a svg { color: #9095a6; flex-shrink: 0; }

.app-nav-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9095a6;
  margin: 18px 0 6px;
}

.app-packages__tabpanel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px 0;
}

.app-packages__tabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  /* flex-start (not center): a centered flex container that overflows can
     make browsers clip the start of the content when scrolled, since the
     centering offset is computed from the full (wider-than-container)
     content width. On desktop this is a no-op since the tabs already
     fill 100% of the row via flex:1 1 0% (see vendor.css). */
  justify-content: flex-start;
  margin-bottom: 10px;
  /* On mobile each .app-packages__tab has a fixed width (see vendor.css's
     own max-width:799px rule), same as real buzzoid — so on narrow screens
     this scrolls horizontally as a swipeable strip instead of wrapping
     the 3rd (VIP) tab onto its own line. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Setting overflow-x also makes the browser compute overflow-y as
     "auto" (per spec, an axis left "visible" next to a non-visible axis
     becomes "auto" too), which would otherwise clip the RECOMMENDED /
     EXCLUSIVE ribbon badges that sit at top:-10px on each tab. Reserve
     that space with padding so they stay inside the clipped box. */
  padding-top: 14px;
  margin-top: -14px;
}

.app-packages__tabs::-webkit-scrollbar {
  display: none;
}

.app-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  font-size: 13px;
  color: #2c323e;
  white-space: nowrap;
}

.pulser {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}

.pulser__large,
.pulser__small {
  position: absolute;
  border-radius: 50%;
  background: #38c793;
}

.pulser__small { inset: 0; }

.pulser__large {
  inset: -4px;
  opacity: 0.35;
  animation: pulserGrow 1.8s ease-out infinite;
}

@keyframes pulserGrow {
  0% { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Live-order ticker: only one .app-notification is visible at a time
   (container height == one item's height, overflow hidden); JS below
   translates the wrapper up by one item each interval. */
#home-ticker-wrapper {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* vendor.css is also missing .tw-text-4xl — used on the service (category)
   page hero. Without it the heading stayed stuck at the 24px mobile size on
   every screen (real buzzoid keeps it at a fixed 36px on both mobile and
   desktop, so no responsive variant is even needed here). */
.tw-text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

/* Service (category) page hero: "{Service} with {Highlight}" heading and
   the "**text**" highlight admins can use inside the short description.
   vendor.css's .tw-text-gradient-purple sets the gradient background but
   doesn't bundle the background-clip:text/color:transparent that actually
   clips it to the text shape, so that's defined here explicitly. */
.hero-gradient-text {
  background-image: linear-gradient(to right, #005CD9, #FF55F8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-highlight-green {
  color: #16a34a;
  font-weight: 700;
}

/* Platform tabs (Instagram/TikTok/YouTube) on the homepage hero use the
   real buzzoid wave-curve SVGs already in the markup (.tab-background) --
   vendor.css already styles/animates them correctly per [role=tab].active.
   No override needed here. */

/* Cart drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 31, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 200;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: #fff;
  box-shadow: -12px 0 40px rgba(20, 22, 31, 0.15);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 22, 31, 0.94);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(20, 22, 31, 0.28);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
}

.cart-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.cart-toast__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38c793;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
}

.cart-toast__text {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-toast__btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.cart-toast__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 480px) {
  .cart-toast__text {
    max-width: 130px;
  }
}

.app-packages__submit.added {
  background: #38c793 !important;
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.cart-drawer__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #14161f;
}

.cart-drawer__head button {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9095a6;
  cursor: pointer;
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.cart-drawer__empty {
  color: #9095a6;
  font-size: 14px;
  text-align: center;
  margin-top: 40px;
}

.cart-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f1f5;
}

.cart-drawer__item-name {
  font-size: 14px;
  font-weight: 700;
  color: #14161f;
}

.cart-drawer__item-meta {
  font-size: 12px;
  color: #9095a6;
  margin-top: 2px;
}

.cart-drawer__item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cart-drawer__item-price {
  font-size: 14px;
  font-weight: 700;
  color: #14161f;
}

.cart-drawer__remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #9095a6;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer__footer {
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
}

.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #14161f;
  margin-bottom: 14px;
}