/* ============================================================
   Social Fame — shared site chrome: sticky header + footer.
   Loaded by EVERY public page (homepage included) on top of
   home.css or styles.css.

   Everything is namespaced `sf-` so it can't collide with the
   two older stylesheets. The three class names that are NOT
   namespaced — .cart-link, .account-link, .cart-count — are
   deliberate: cart.js finds the badge by those selectors.

   Colours are literal rather than var() for the same reason
   prompt.css uses literals: this file has to drop onto pages
   that define different token sets.
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.sf-hd {
  position: sticky; top: 0; z-index: 400;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
  padding-top: env(safe-area-inset-top, 0px);
}
.sf-hd.is-stuck { border-bottom-color: rgba(11,11,15,.08); box-shadow: 0 6px 24px rgba(11,11,15,.05); }

.sf-hd-in {
  max-width: 1140px; margin: 0 auto;
  padding: 11px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; gap: 18px;
}

.sf-logo { flex: none; display: block; transition: opacity .2s; }
.sf-logo:hover { opacity: .8; }
.sf-logo img { height: 32px; width: auto; display: block; }

/* ---- desktop nav ---- */
.sf-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.sf-nav a {
  font-size: 13.5px; color: rgba(11,11,15,.62);
  text-decoration: none; white-space: nowrap;
  padding: 7px 11px; border-radius: 999px;
  transition: color .18s, background .18s;
}
.sf-nav a:hover { color: #0B0B0F; background: #F3F2F6; }
.sf-nav a[aria-current="page"] { color: #E0201B; font-weight: 500; }

/* ---- right cluster ---- */
.sf-hd-r { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.sf-hd-r .cart-link,
.sf-hd-r .account-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: #E0201B; flex: none;
  transition: color .2s, transform .2s;
}
.sf-hd-r .cart-link svg,
.sf-hd-r .account-link svg { width: 21px; height: 21px; display: block; }
.sf-hd-r .cart-link:hover,
.sf-hd-r .account-link:hover { color: #A80056; transform: scale(1.08); }
.sf-hd-r .cart-link:focus-visible,
.sf-hd-r .account-link:focus-visible { outline: 2px solid #E0201B; outline-offset: 2px; border-radius: 8px; }
/* badge — cart.js writes data-count on .cart-count */
.sf-hd-r .cart-count { display: none; }
.sf-hd-r .cart-count:not([data-count="0"]):not(:empty) {
  position: absolute; top: -2px; right: -3px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #0B0B0F; color: #fff;
  font-size: 10px; line-height: 1;
}

.sf-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  color: #fff; background: #E0201B;
  border-radius: 999px; padding: 8px 17px;
  box-shadow: 0 6px 16px rgba(224,32,27,.26);
  transition: background .18s;
}
.sf-cta:hover { background: #A80056; }

/* ---- hamburger (mobile only) ---- */
.sf-burger {
  display: none; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(11,11,15,.12); border-radius: 11px;
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.sf-burger span {
  display: block; position: relative;
  width: 17px; height: 1.5px; border-radius: 2px; background: #0B0B0F;
  transition: transform .22s ease, opacity .18s ease;
}
.sf-burger span + span { margin-top: 4px; }
.sf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.sf-burger:focus-visible { outline: 2px solid #E0201B; outline-offset: 2px; }

/* ---- slide-down mobile panel ---- */
.sf-menu {
  display: none;
  border-top: 1px solid rgba(11,11,15,.08);
  background: #fff;
  padding: 8px clamp(16px, 4vw, 32px) calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100svh - 62px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sf-menu[hidden] { display: none; }
.sf-menu a {
  display: block; text-decoration: none;
  font-size: 16px; color: #0B0B0F;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(11,11,15,.06);
}
.sf-menu a:last-of-type { border-bottom: 0; }
.sf-menu a[aria-current="page"] { color: #E0201B; font-weight: 500; }
.sf-menu .sf-cta {
  display: flex; justify-content: center;
  margin-top: 12px; padding: 13px 18px; font-size: 15px;
}

@media (max-width: 1000px) {
  .sf-nav { display: none; }
  .sf-hd-r > .sf-cta { display: none; }
  .sf-burger { display: inline-flex; }
  .sf-menu:not([hidden]) { display: block; }
}
@media (min-width: 1001px) {
  /* never leave the panel open when the desktop nav comes back */
  .sf-menu { display: none !important; }
}
@media (max-width: 420px) {
  .sf-logo img { height: 27px; }
  .sf-hd-in { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .sf-hd-r { gap: 3px; }
  .sf-hd-r .cart-link, .sf-hd-r .account-link { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-burger span { transition: none; }
}

/* ============================================================
   PAGE SHELL
   Body is the flex column that keeps the footer at the bottom of
   short pages. The old wrappers each carried min-height:100vh,
   which would have pushed the footer a full screen below the
   fold now that it is no longer the last thing in the wrapper.
   ============================================================ */
body { display: flex; flex-direction: column; min-height: 100svh; }
.sl2-page, .sl3-faq, .sl4-page, .rv-page, .bp, .ct-page { min-height: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.sf-ft {
  background: #fff;
  border-top: 1px solid rgba(11,11,15,.10);
  padding: clamp(24px, 4vw, 40px) 0 calc(clamp(24px, 4vw, 40px) + env(safe-area-inset-bottom, 0px));
  margin-top: auto;
}
.sf-ft-in {
  max-width: 1140px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 32px;
}
.sf-ft-links { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 20px; }
.sf-ft-links a { font-size: 13px; color: rgba(11,11,15,.62); text-decoration: none; transition: color .2s; }
.sf-ft-links a:hover { color: #E0201B; }
.sf-ft-copy { font-size: 12px; color: rgba(11,11,15,.45); }
.sf-ft-social { display: flex; align-items: center; gap: 15px; }
.sf-ft-social a {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: rgba(11,11,15,.45); text-decoration: none;
  transition: color .2s, transform .2s;
}
.sf-ft-social a:hover { color: #E0201B; transform: scale(1.15); }
.sf-ft-social svg { display: block; }

@media (max-width: 760px) {
  .sf-ft-in { justify-content: center; text-align: center; }
  .sf-ft-links { justify-content: center; gap: 8px 15px; }
  .sf-ft-links a { font-size: 12.5px; }
  .sf-ft-copy { width: 100%; }
  .sf-ft-social { justify-content: center; }
}

/* ============================================================
   RETIRE THE PER-PAGE CHROME
   Every page used to draw its own back-arrow bar and one-line
   footer. The shared header/footer replace both. Where the old
   bar also carried the page title (platform + product pages),
   only its duplicated halves are hidden.
   ============================================================ */
.sl3-nav, .sl4-nav, .rv-nav, .ct-nav { display: none !important; }
.sl2-nav .nav-right, .bp-nav .nav-right,
.sl2-nav .back-arrow, .bp-nav .back-arrow { display: none !important; }
.sl2-foot, .sl3-foot, .sl4-foot, .rv-foot, .bp-foot, .ct-foot { display: none !important; }

/* the old bars sat at the very top of the page; without their
   nav row the first real content needs its own breathing room */
.sl3-head, .sl4-article, .rv-head { padding-top: clamp(28px, 5vw, 46px); }
.sl2-nav, .bp-nav { padding-top: clamp(20px, 4vw, 34px); }

/* ============================================================
   FULL-WIDTH PAGES
   Every page's content column now matches the homepage's 1140px.
   Running prose stays capped at a readable measure — a 1140px
   line of body copy is ~150 characters, roughly double what is
   comfortable to read.
   ============================================================ */
.sl2-nav, .sl2-hero, .sl2-services, .sl2-filter, .sl2-products,
.sl3-nav, .sl3-head, .sl3-list,
.sl4-nav, .sl4-article,
.rv-nav, .rv-head,
.bp-nav, .bp-wrap,
.ct-reserve { max-width: 1140px; }

/* prose keeps a reading measure, centred in the wider column */
.sl4-rte, .sl2-rte { max-width: 75ch; margin-left: auto; margin-right: auto; }
.sl3-ans { max-width: 75ch; }

/* wider columns can carry more cards per row */
@media (min-width: 1100px) {
  .sl2-products { grid-template-columns: repeat(4, 1fr); }
  .sl3-list { max-width: 940px; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
  .sl2-hero, .sl2-services, .sl2-filter, .sl2-products,
  .sl3-head, .sl3-list, .sl4-article, .rv-head, .bp-wrap {
    padding-left: 16px; padding-right: 16px;
  }
  /* the old page titles were locked to one line and clipped */
  .sl2-title, .rv-title, .sl2-navtitle { white-space: normal; }
  .sl3-title, .sl4-title, .sl2-title, .rv-title { font-size: clamp(23px, 6.4vw, 32px); }
  .sl4-card { padding: 18px 18px 20px; }
  .sl3-q { padding: 16px 18px; }
  .sl3-ans { padding: 0 18px 18px; }
}