﻿/* SENSUS / SIDE QUEST visual reset.
   This file is loaded last and is intentionally frontend-only: it does not
   touch Supabase, checkout, admin, affiliate, analytics, or Edge Function logic. */

:root {
  --sq-ink: #080808;
  --sq-white: #fbfaf7;
  --sq-paper: #f2eee8;
  --sq-muted: #777068;
  --sq-red: #d91f1f;
  --sq-gold: #c99648;
  --sq-line: rgba(8, 8, 8, 0.14);
  --sq-footer: #050505;
}

html {
  overflow-x: hidden;
}

body.sidequest-site,
body.sensus-site {
  background: var(--sq-white) !important;
}

body.sidequest-site a,
body.sidequest-site button,
body.sidequest-site [role="button"],
body.sensus-site a,
body.sensus-site button,
body.sensus-site [role="button"] {
  cursor: pointer !important;
}

body.sidequest-site .sq-mobile-promo,
body.sidequest-site .sq-mobile-bottom-nav,
body.sidequest-site .sq-mobile-benefit-strip,
body.sidequest-site .sq-mobile-campaign-image,
body.sidequest-site .sq-hero-mobile-img,
body.sidequest-site .sq-mobile-cart-link {
  display: none !important;
}

body.sidequest-site .sensus-nav.sq-nav {
  position: relative !important;
  inset: auto !important;
  z-index: 50 !important;
  display: grid !important;
  grid-template-columns: minmax(130px, 220px) 1fr minmax(80px, 150px) !important;
  align-items: center !important;
  min-height: 104px !important;
  padding: 18px clamp(26px, 3.6vw, 46px) !important;
  background: var(--sq-white) !important;
  color: var(--sq-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.sidequest-site .sq-logo {
  display: inline-grid !important;
  justify-self: start !important;
  align-items: start !important;
  margin: 0 !important;
  color: var(--sq-ink) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(2rem, 3.25vw, 3.55rem) !important;
  line-height: 0.74 !important;
  letter-spacing: -0.055em !important;
  text-decoration: none !important;
}

body.sidequest-site .sq-logo small {
  display: block !important;
  margin-top: 7px !important;
  color: var(--sq-ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 0.22em !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
}

body.sidequest-site .sq-logo::after {
  content: "* +" !important;
  display: block !important;
  margin: -2.05em 0 0 1.72em !important;
  color: var(--sq-red) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 0.62em !important;
  letter-spacing: 0 !important;
}

body.sidequest-site .sq-nav .nav-toggle {
  display: none !important;
}

body.sidequest-site .sq-nav .nav-links {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(30px, 4vw, 70px) !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.sidequest-site .sq-nav .nav-links a,
body.sidequest-site .sq-nav .nav-actions a {
  position: relative !important;
  min-height: auto !important;
  padding: 0 !important;
  color: var(--sq-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(0.66rem, 0.8vw, 0.86rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body.sidequest-site .sq-nav .nav-links a[aria-current="page"] {
  color: var(--sq-red) !important;
}

body.sidequest-site .sq-nav .nav-links a[aria-current="page"]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -9px !important;
  height: 2px !important;
  background: var(--sq-red) !important;
}

body.sidequest-site .sq-nav .nav-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 20px !important;
  transform: none !important;
  color: var(--sq-ink) !important;
}

body.sidequest-site .sq-nav .nav-actions a::before,
body.sidequest-site .sq-nav .nav-actions a::after {
  display: none !important;
  content: none !important;
}

body.sidequest-site .sensus-main {
  margin-top: 0 !important;
  background: var(--sq-white) !important;
}

body.sidequest-site .sq-hero {
  position: relative !important;
  display: block !important;
  min-height: clamp(520px, 54vw, 760px) !important;
  height: clamp(520px, 54vw, 760px) !important;
  overflow: hidden !important;
  background: #111 url("./images/sidequest-hero.png") center center / cover no-repeat !important;
  border-top: 0 !important;
  border-bottom: 8px solid var(--sq-white) !important;
  color: #fff !important;
}

body.sidequest-site .sq-hero::before,
body.sidequest-site .sq-hero::after {
  display: none !important;
  content: none !important;
}

body.sidequest-site .sq-hero-copy {
  position: absolute !important;
  left: clamp(28px, 3.8vw, 58px) !important;
  top: 18% !important;
  z-index: 2 !important;
  width: min(360px, 38vw) !important;
  max-width: 420px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

body.sidequest-site .sq-hero .eyebrow {
  display: none !important;
}

body.sidequest-site .sq-hero .sensus-title,
body.sidequest-site .sq-hero .hero-morph {
  display: block !important;
  min-height: 3.05em !important;
  margin: 0 0 24px !important;
  color: #fff !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(4.2rem, 7.2vw, 6.8rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-hero .morph-text {
  color: #fff !important;
  white-space: pre-line !important;
}

body.sidequest-site .sq-hero .morph-text-b {
  color: var(--sq-red) !important;
}

body.sidequest-site .sq-hero-copy > p:not(.eyebrow) {
  width: 300px !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;
  color: #fff !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(0.9rem, 1vw, 1rem) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

body.sidequest-site .sq-hero-actions {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

body.sidequest-site .sensus-cta,
body.sidequest-site .summary-btn,
body.sidequest-site .add-btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: 1px solid var(--sq-ink) !important;
  background: var(--sq-ink) !important;
  color: #fff !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-red-btn {
  border-color: var(--sq-red) !important;
  background: var(--sq-red) !important;
}

body.sidequest-site .sq-dark-btn {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(17, 17, 17, 0.74) !important;
}

body.sidequest-site .sq-bestsellers {
  padding: clamp(26px, 3.2vw, 48px) clamp(26px, 3.6vw, 46px) !important;
  background: var(--sq-white) !important;
}

body.sidequest-site .sq-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

body.sidequest-site .sq-section-head h2 {
  margin: 0 !important;
  color: var(--sq-ink) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(2rem, 3vw, 3.5rem) !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-section-head h2 span {
  color: var(--sq-red) !important;
}

body.sidequest-site .sq-view-link {
  color: var(--sq-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-product-strip,
body.sidequest-site .preview-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
}

body.sidequest-site .sensus-card,
body.sidequest-site .product-card {
  min-width: 150px !important;
  border: 1px solid rgba(8, 8, 8, 0.08) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sidequest-site .sensus-card img,
body.sidequest-site .product-card-img {
  width: 100% !important;
  aspect-ratio: 1 / 1.12 !important;
  object-fit: cover !important;
  background: #eee8de !important;
}

body.sidequest-site .product-universe {
  display: none !important;
}

body.sidequest-site .product-name,
body.sidequest-site .sensus-card h3 {
  margin: 12px 10px 4px !important;
  color: var(--sq-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(0.75rem, 0.95vw, 0.95rem) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  text-transform: uppercase !important;
}

body.sidequest-site .product-price {
  margin: 0 10px 12px !important;
  color: var(--sq-ink) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

body.sidequest-site .product-price.has-compare-price,
body.sidequest-site .price.has-compare-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.sidequest-site .compare-price {
  color: rgba(8, 8, 8, 0.48) !important;
  font-weight: 800 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: var(--sq-red) !important;
}

body.sidequest-site .sale-price {
  color: var(--sq-ink) !important;
  font-weight: 950 !important;
}

body.sidequest-site .story-triptych.sq-story-panel {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr 1fr !important;
  min-height: clamp(360px, 32vw, 520px) !important;
  background: var(--sq-footer) !important;
}

body.sidequest-site .sq-story-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(30px, 4vw, 58px) !important;
  color: #fff !important;
}

body.sidequest-site .sq-story-copy h2 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(2.5rem, 4vw, 5rem) !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-story-copy h2 span,
body.sidequest-site .sq-story-right h2 {
  color: #fff !important;
}

body.sidequest-site .sq-story-copy p {
  color: rgba(255, 255, 255, 0.84) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

body.sidequest-site .sq-story-image {
  min-height: clamp(360px, 32vw, 520px) !important;
  background: url("./images/sidequest-promo.png") center center / cover no-repeat !important;
}

body.sidequest-site .sensus-footer.sq-footer {
  display: block !important;
  padding: clamp(34px, 4vw, 56px) clamp(26px, 3.6vw, 46px) 28px !important;
  background: var(--sq-footer) !important;
  color: #fff !important;
}

body.sidequest-site .sensus-footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(120px, 1fr)) !important;
  gap: clamp(22px, 3vw, 48px) !important;
}

body.sidequest-site .sensus-footer a,
body.sidequest-site .sensus-footer p,
body.sidequest-site .sensus-footer span {
  color: rgba(255, 255, 255, 0.82) !important;
}

body.sidequest-site .sq-footer-logo {
  color: #fff !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(2rem, 3vw, 3.4rem) !important;
  line-height: 0.76 !important;
}

@media (max-width: 767px) {
  body.sidequest-site {
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  body.sidequest-site .sensus-nav.sq-nav {
    grid-template-columns: 44px 1fr auto !important;
    min-height: 68px !important;
    padding: 10px 14px !important;
    background: var(--sq-white) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle {
    display: inline-flex !important;
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 60 !important;
  }

  body.sidequest-site .sq-nav .nav-toggle span,
  body.sidequest-site .sq-nav .nav-toggle::before,
  body.sidequest-site .sq-nav .nav-toggle::after {
    content: "" !important;
    position: absolute !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--sq-ink) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle span {
    transform: translateY(0) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle::before {
    transform: translateY(-9px) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle::after {
    transform: translateY(9px) !important;
  }

  body.sidequest-site .sq-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
    text-align: left !important;
  }

  body.sidequest-site .sq-logo small {
    font-size: 0.2em !important;
  }

  body.sidequest-site .sq-logo::after {
    margin: -2.1em 0 0 1.85em !important;
    font-size: 0.55em !important;
  }

  body.sidequest-site .sq-nav .nav-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 68px !important;
    z-index: 55 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 10px 18px 18px !important;
    background: var(--sq-white) !important;
    border-top: 1px solid var(--sq-line) !important;
    border-bottom: 1px solid var(--sq-line) !important;
  }

  body.sidequest-site.nav-open .sq-nav .nav-links,
  body.nav-open.sidequest-site .sq-nav .nav-links {
    display: flex !important;
  }

  body.sidequest-site .sq-nav .nav-links li {
    display: block !important;
    border-bottom: 1px solid var(--sq-line) !important;
  }

  body.sidequest-site .sq-nav .nav-links li:last-child {
    border-bottom: 0 !important;
  }

  body.sidequest-site .sq-nav .nav-links a {
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
    font-size: 0.86rem !important;
  }

  body.sidequest-site .sq-nav .nav-links a[aria-current="page"]::after {
    display: none !important;
  }

  body.sidequest-site .sq-nav .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    justify-self: end !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 70 !important;
  }

  body.sidequest-site .sq-mobile-cart-link {
    display: inline-flex !important;
    position: fixed !important;
    right: 14px !important;
    top: 27px !important;
    z-index: 9999 !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    color: var(--sq-ink) !important;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  body.sidequest-site .sq-nav .nav-actions a {
    display: inline-flex !important;
    position: static !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    color: var(--sq-ink) !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    overflow: visible !important;
    font-size: 0 !important;
  }

  body.sidequest-site .sq-nav .nav-actions a::before {
    content: "CART" !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--sq-ink) !important;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
  }

  body.sidequest-site .sq-nav .nav-actions a::after {
    display: none !important;
    content: none !important;
  }

  body.sidequest-site .sq-hero {
    min-height: clamp(390px, 108vw, 570px) !important;
    height: clamp(390px, 108vw, 570px) !important;
    background-position: 58% center !important;
    border-bottom-width: 5px !important;
  }

  body.sidequest-site .sq-hero-copy {
    left: clamp(15px, 4vw, 24px) !important;
    top: 16% !important;
    width: min(36vw, 150px) !important;
  }

  body.sidequest-site .sq-hero .sensus-title,
  body.sidequest-site .sq-hero .hero-morph {
    min-height: 3.05em !important;
    margin-bottom: clamp(8px, 2vw, 14px) !important;
    font-size: clamp(1.76rem, 8.9vw, 3.05rem) !important;
  }

  body.sidequest-site .sq-hero-copy > p:not(.eyebrow) {
    width: min(35vw, 145px) !important;
    margin-bottom: clamp(10px, 2vw, 16px) !important;
    font-size: clamp(0.56rem, 2.15vw, 0.78rem) !important;
    line-height: 1.43 !important;
  }

  body.sidequest-site .sq-hero-actions {
    gap: 8px !important;
  }

  body.sidequest-site .sq-hero-actions .sensus-cta {
    min-width: clamp(72px, 20vw, 112px) !important;
    min-height: clamp(30px, 7.4vw, 38px) !important;
    padding: 0 clamp(8px, 2vw, 14px) !important;
    font-size: clamp(0.42rem, 1.7vw, 0.6rem) !important;
  }

  body.sidequest-site .sq-doodle {
    display: none !important;
  }

  body.sidequest-site .sq-bestsellers {
    padding: 20px 16px 24px !important;
  }

  body.sidequest-site .sq-section-head {
    margin-bottom: 16px !important;
  }

  body.sidequest-site .sq-section-head h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  body.sidequest-site .sq-view-link {
    font-size: 0.72rem !important;
  }

  body.sidequest-site .sq-product-strip,
  body.sidequest-site .preview-grid {
    grid-template-columns: repeat(5, minmax(116px, 1fr)) !important;
    gap: 12px !important;
  }

  body.sidequest-site .sensus-card,
  body.sidequest-site .product-card {
    min-width: 116px !important;
  }

  body.sidequest-site .story-triptych.sq-story-panel {
    grid-template-columns: 1fr 1.05fr 1fr !important;
    min-height: clamp(210px, 50vw, 320px) !important;
  }

  body.sidequest-site .sq-story-copy {
    padding: clamp(14px, 3.5vw, 24px) !important;
  }

  body.sidequest-site .sq-story-copy h2 {
    font-size: clamp(1.25rem, 5.4vw, 2rem) !important;
  }

  body.sidequest-site .sq-story-copy p {
    font-size: clamp(0.52rem, 2vw, 0.74rem) !important;
  }

  body.sidequest-site .sq-story-image {
    min-height: clamp(210px, 50vw, 320px) !important;
  }

  body.sidequest-site .sensus-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final responsive lock - keep this block last.
   Phone view is the desktop/laptop composition scaled down, with a hamburger nav. */
@media (max-width: 767px) {
  body.sidequest-site .sensus-nav.sq-nav {
    position: relative !important;
    grid-template-columns: 52px 1fr 58px !important;
    min-height: 78px !important;
    padding: 8px 18px !important;
    background: var(--sq-white) !important;
    border-bottom: 1px solid rgba(8, 8, 8, 0.08) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
  }

  body.sidequest-site .sq-logo {
    justify-self: center !important;
    font-size: clamp(1.82rem, 8.2vw, 2.45rem) !important;
  }

  body.sidequest-site .sq-nav .nav-actions {
    display: none !important;
  }

  body.sidequest-site .sq-mobile-cart-link {
    display: inline-flex !important;
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 48px !important;
    min-height: 42px !important;
    color: var(--sq-ink) !important;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  body.sidequest-site .sq-nav .nav-links {
    top: 78px !important;
  }

  body.sidequest-home .sq-hero {
    min-height: clamp(470px, 118vw, 650px) !important;
    height: clamp(470px, 118vw, 650px) !important;
    background-size: auto 116% !important;
    background-position: 54% 24% !important;
  }

  body.sidequest-home .sq-hero-copy {
    left: clamp(18px, 5vw, 30px) !important;
    top: clamp(92px, 26vw, 148px) !important;
    width: min(40vw, 162px) !important;
  }

  body.sidequest-home .sq-hero .sensus-title,
  body.sidequest-home .sq-hero .hero-morph {
    font-size: clamp(2.05rem, 9.6vw, 3.35rem) !important;
    line-height: 0.86 !important;
    min-height: 2.62em !important;
  }

  body.sidequest-home .sq-hero-copy > p:not(.eyebrow) {
    width: min(42vw, 168px) !important;
    font-size: clamp(0.62rem, 2.35vw, 0.82rem) !important;
    line-height: 1.35 !important;
  }

  body.sidequest-home .sq-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(40vw, 160px) !important;
  }

  body.sidequest-home .sq-hero-actions .sensus-cta {
    width: 100% !important;
    min-height: 38px !important;
    font-size: clamp(0.52rem, 2vw, 0.66rem) !important;
  }

  body.sidequest-site .sq-product-strip,
  body.sidequest-site .preview-grid {
    grid-template-columns: repeat(4, minmax(132px, 1fr)) !important;
    gap: 14px !important;
  }

  body.sidequest-site .sensus-card,
  body.sidequest-site .product-card {
    min-width: 132px !important;
  }

  body.sidequest-site .story-triptych.sq-story-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.sidequest-site .sq-story-image {
    min-height: 260px !important;
    order: 2 !important;
  }

  body.sidequest-site .sq-story-left {
    order: 1 !important;
  }

  body.sidequest-site .sq-story-right {
    order: 3 !important;
  }

  body.sidequest-site .sq-story-copy h2 {
    font-size: clamp(2.35rem, 10vw, 3.45rem) !important;
  }

  body.sidequest-site .sq-story-copy p {
    font-size: 0.86rem !important;
  }

  body.sidequest-site .sensus-footer.sq-footer {
    padding-bottom: 24px !important;
  }

  body.sidequest-site .sensus-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
  }
}

/* 2026-07-11 final visual repair pass.
   Frontend-only: keeps Supabase, Edge Functions, checkout, admin, affiliate,
   Telegram, Turnstile, Sentry, and PostHog logic untouched. */
body.sidequest-site .sq-nav .nav-toggle,
body.sidequest-site .sq-nav .nav-links a,
body.sidequest-site .sq-nav .nav-actions a,
body.sidequest-site .sq-mobile-cart-link,
body.sidequest-site .sensus-cta,
body.sidequest-site .summary-btn,
body.sidequest-site .summary-link,
body.sidequest-site .sq-view-link,
body.sidequest-site .product-card,
body.sidequest-site .sensus-card {
  cursor: pointer !important;
}

body.sidequest-site .sq-mobile-bottom-nav,
body.sidequest-site .sensus-footer nav[aria-label="Collection links"],
body.sidequest-site .sensus-footer nav[aria-label="Drop links"] {
  display: none !important;
}

body.sidequest-site .sensus-footer.sq-footer {
  padding: clamp(36px, 4vw, 58px) clamp(26px, 3.6vw, 52px) 30px !important;
}

body.sidequest-site .sensus-footer .footer-grid {
  grid-template-columns: minmax(190px, 1.2fr) repeat(2, minmax(140px, 0.6fr)) !important;
  align-items: start !important;
}

body.sidequest-site .sq-footer-logo,
body.sidequest-site .sensus-footer .summary-label {
  color: #fff !important;
}

body.sidequest-home .sq-hero {
  min-height: clamp(600px, 52vw, 780px) !important;
  height: clamp(600px, 52vw, 780px) !important;
  background: #101010 !important;
  isolation: isolate !important;
}

body.sidequest-home .sq-hero .sq-hero-mobile-img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
}

body.sidequest-home .sq-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.05) 64%, rgba(0, 0, 0, 0.18) 100%) !important;
}

body.sidequest-home .sq-hero-copy,
body.sidequest-home .sq-doodle {
  z-index: 2 !important;
}

body.sidequest-home .sq-hero-copy {
  top: 20% !important;
  width: min(390px, 35vw) !important;
}

body.sidequest-home .sq-hero-actions {
  margin-top: 2px !important;
}

body.sidequest-home .sq-hero-actions .sensus-cta {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

body.sidequest-home .sq-bestsellers {
  position: relative !important;
  z-index: 3 !important;
  clear: both !important;
  margin-top: 0 !important;
}

body.sidequest-site .story-triptych.sq-story-panel {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.78fr) minmax(240px, 1fr) !important;
  min-height: clamp(460px, 48vw, 780px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #050505 url("./images/sidequest-promo.png") center center / cover no-repeat !important;
}

body.sidequest-site .story-triptych.sq-story-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 28%, rgba(0, 0, 0, 0.08) 51%, rgba(0, 0, 0, 0.56) 100%) !important;
}

body.sidequest-site .sq-story-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  min-height: 100% !important;
  background: transparent !important;
}

body.sidequest-site .sq-story-copy {
  position: relative !important;
  z-index: 1 !important;
  min-height: 100% !important;
  background: transparent !important;
}

body.sidequest-site .sq-story-left {
  grid-column: 1 !important;
}

body.sidequest-site .sq-story-right {
  grid-column: 2 !important;
  justify-self: end !important;
  width: min(430px, 38vw) !important;
  padding-right: clamp(30px, 5vw, 86px) !important;
}

body.sidequest-site .sq-story-copy h2 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55) !important;
}

body.sidequest-site .sq-story-copy p {
  max-width: 330px !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65) !important;
}

body.sidequest-site .sq-collection-hero {
  position: relative !important;
  min-height: clamp(380px, 34vw, 540px) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #070707 url("./images/sidequest-collections-banner.png") center center / cover no-repeat !important;
  color: #fff !important;
}

body.sidequest-site .sq-collection-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0.08) 100%) !important;
}

body.sidequest-site .sq-collection-hero::after {
  display: none !important;
  content: none !important;
}

body.sidequest-site .sq-collection-hero > div {
  position: relative !important;
  z-index: 1 !important;
  max-width: min(900px, 84vw) !important;
}

body.sidequest-site .sq-collection-hero h1 {
  max-width: 100% !important;
  margin: 0 0 22px !important;
  color: #fff !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(5.4rem, 10vw, 10.5rem) !important;
  line-height: 0.85 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase !important;
  overflow-wrap: normal !important;
}

body.sidequest-site .sq-collection-hero p {
  max-width: 420px !important;
  color: #fff !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(1rem, 1.35vw, 1.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

body.sidequest-site .cart-page .page-hero,
body.sidequest-site .checkout-page .page-hero,
body.sidequest-site.cart-page .page-hero,
body.sidequest-site.checkout-page .page-hero {
  min-height: auto !important;
  padding: clamp(46px, 6vw, 84px) clamp(26px, 5vw, 78px) !important;
  background: var(--sq-white) !important;
  color: var(--sq-ink) !important;
  border-top: 1px solid var(--sq-line) !important;
  border-bottom: 1px solid var(--sq-line) !important;
}

body.sidequest-site .cart-page .page-hero::before,
body.sidequest-site .cart-page .page-hero::after,
body.sidequest-site .checkout-page .page-hero::before,
body.sidequest-site .checkout-page .page-hero::after,
body.sidequest-site.cart-page .page-hero::before,
body.sidequest-site.cart-page .page-hero::after,
body.sidequest-site.checkout-page .page-hero::before,
body.sidequest-site.checkout-page .page-hero::after {
  display: none !important;
  content: none !important;
}

body.sidequest-site.cart-page .page-hero h1,
body.sidequest-site.checkout-page .page-hero h1 {
  color: var(--sq-ink) !important;
  text-shadow: none !important;
}

@media (max-width: 767px) {
  body.sidequest-site .sensus-nav.sq-nav {
    position: relative !important;
    grid-template-columns: 56px 1fr 58px !important;
    min-height: 96px !important;
    padding: 10px 18px 12px !important;
    background: var(--sq-white) !important;
  }

  body.sidequest-site .sq-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    font-size: clamp(2.35rem, 10vw, 3.2rem) !important;
  }

  body.sidequest-site .sq-nav .nav-toggle {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
  }

  body.sidequest-site .sq-mobile-cart-link {
    grid-column: 3 !important;
    justify-self: end !important;
    color: var(--sq-ink) !important;
  }

  body.sidequest-site .sq-nav .nav-links {
    position: fixed !important;
    top: 96px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 100 !important;
    display: flex !important;
    width: min(78vw, 320px) !important;
    min-height: calc(100dvh - 96px) !important;
    padding: 28px 28px 34px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: var(--sq-white) !important;
    border-right: 1px solid var(--sq-line) !important;
    border-top: 1px solid var(--sq-line) !important;
    box-shadow: 28px 0 50px rgba(0, 0, 0, 0.16) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-104%) !important;
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease !important;
    pointer-events: none !important;
  }

  body.sidequest-site.nav-open .sq-nav .nav-links,
  body.nav-open.sidequest-site .sq-nav .nav-links {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  body.sidequest-site .sq-nav .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid var(--sq-line) !important;
  }

  body.sidequest-site .sq-nav .nav-links a {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 64px !important;
    color: var(--sq-ink) !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
  }

  body.sidequest-home .sq-hero {
    min-height: clamp(560px, 132vw, 760px) !important;
    height: clamp(560px, 132vw, 760px) !important;
    background: #101010 !important;
  }

  body.sidequest-home .sq-hero .sq-hero-mobile-img {
    display: block !important;
    object-fit: cover !important;
    object-position: 54% center !important;
  }

  body.sidequest-home .sq-hero::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 44%, rgba(0, 0, 0, 0.1) 100%) !important;
  }

  body.sidequest-home .sq-hero-copy {
    left: 22px !important;
    top: 16% !important;
    width: min(45vw, 176px) !important;
  }

  body.sidequest-home .sq-hero .sensus-title,
  body.sidequest-home .sq-hero .hero-morph {
    font-size: clamp(2.55rem, 11.2vw, 3.85rem) !important;
    line-height: 0.84 !important;
    min-height: 2.56em !important;
    margin-bottom: 18px !important;
  }

  body.sidequest-home .sq-hero-copy > p:not(.eyebrow) {
    width: min(43vw, 176px) !important;
    font-size: clamp(0.73rem, 2.8vw, 0.92rem) !important;
    line-height: 1.42 !important;
    color: #fff !important;
  }

  body.sidequest-home .sq-hero-actions {
    width: min(43vw, 176px) !important;
  }

  body.sidequest-home .sq-hero-actions .sensus-cta {
    min-height: 44px !important;
    font-size: 0.68rem !important;
  }

  body.sidequest-site .sq-section-head {
    align-items: center !important;
  }

  body.sidequest-site .sq-product-strip,
  body.sidequest-site .preview-grid {
    grid-template-columns: repeat(4, minmax(138px, 1fr)) !important;
    overflow-x: auto !important;
  }

  body.sidequest-site .sensus-card,
  body.sidequest-site .product-card {
    min-width: 138px !important;
  }

  body.sidequest-site .story-triptych.sq-story-panel {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
    background-position: center center !important;
  }

  body.sidequest-site .story-triptych.sq-story-panel::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.72) 100%) !important;
  }

  body.sidequest-site .sq-story-copy,
  body.sidequest-site .sq-story-left,
  body.sidequest-site .sq-story-right {
    grid-column: 1 !important;
    width: auto !important;
    min-height: 260px !important;
    justify-self: stretch !important;
    padding: 26px 22px !important;
  }

  body.sidequest-site .sq-story-image {
    display: none !important;
  }

  body.sidequest-site .sq-collection-hero {
    min-height: clamp(320px, 82vw, 430px) !important;
    align-items: center !important;
    padding: 42px 24px !important;
    background-size: cover !important;
    background-position: 58% center !important;
  }

  body.sidequest-site .sq-collection-hero h1 {
    font-size: clamp(3rem, 13vw, 4.6rem) !important;
    line-height: 0.82 !important;
    letter-spacing: -0.04em !important;
  }

  body.sidequest-site .sq-collection-hero p {
    max-width: 270px !important;
    font-size: 1.02rem !important;
    line-height: 1.52 !important;
  }

  body.sidequest-site .collection-top-filter.sq-tab-row {
    padding: 32px 24px 20px !important;
  }

  body.sidequest-site .cart-page .page-hero,
  body.sidequest-site .checkout-page .page-hero,
  body.sidequest-site.cart-page .page-hero,
  body.sidequest-site.checkout-page .page-hero {
    padding: 38px 22px !important;
  }

  body.sidequest-site .sensus-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-11 mobile polish patch: tighter hero crop, readable CTAs,
   larger collection cards, and no duplicate story CTA. */
body.sidequest-site .sq-story-right {
  display: none !important;
}

body.sidequest-site .story-triptych.sq-story-panel {
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1fr) !important;
}

@media (min-width: 768px) {
  body.sidequest-site .sq-story-left {
    grid-column: 1 !important;
  }
}

@media (max-width: 767px) {
  body.sidequest-home .sq-hero .sq-hero-mobile-img {
    width: 112% !important;
    height: 112% !important;
    left: -6% !important;
    top: -8% !important;
    object-fit: cover !important;
    object-position: 52% 22% !important;
    transform: none !important;
  }

  body.sidequest-home .sq-hero::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.08) 100%) !important;
  }

  body.sidequest-home .sq-hero-actions {
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
  }

  body.sidequest-home .sq-hero-actions .sensus-cta {
    width: fit-content !important;
    min-width: min(82vw, 255px) !important;
    padding-inline: 18px !important;
    white-space: nowrap !important;
  }

  body.sidequest-home .sq-hero-actions .sq-dark-btn {
    min-width: min(82vw, 305px) !important;
  }

  body.sidequest-site .sq-product-strip,
  body.sidequest-site .preview-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(178px, 45vw) !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    padding-inline: 2px 22px !important;
  }

  body.sidequest-site .sensus-card,
  body.sidequest-site .product-card {
    min-width: 178px !important;
    scroll-snap-align: start !important;
  }

  body.sidequest-site .sensus-card img,
  body.sidequest-site .product-card-img {
    aspect-ratio: 1 / 1.08 !important;
  }

  body.sidequest-site .story-triptych.sq-story-panel {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-11 final mobile asset/layout patch:
   phones use the dedicated hero crop, collection titles stay inside the banner,
   and collection cards no longer inherit the homepage strip min-width. */
body.sidequest-home .sq-hero-picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  body.sidequest-home .sq-hero {
    background: #111 !important;
    overflow: hidden !important;
  }

  body.sidequest-home .sq-hero .sq-hero-picture {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.sidequest-home .sq-hero .sq-hero-mobile-img {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  body.sidequest-site .sq-collection-hero {
    min-height: clamp(330px, 86vw, 430px) !important;
    align-items: flex-start !important;
    padding: 76px 22px 42px !important;
    background-position: 60% center !important;
  }

  body.sidequest-site .sq-collection-hero > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.sidequest-site .sq-collection-hero h1 {
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: clamp(3rem, 13.6vw, 3.75rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.07em !important;
  }

  body.sidequest-site .sq-collection-hero p {
    max-width: 300px !important;
    font-size: clamp(0.98rem, 4.3vw, 1.18rem) !important;
    line-height: 1.45 !important;
  }

  body.sidequest-site .sq-catalog-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }

  body.sidequest-site .sq-shop-grid,
  body.sidequest-site .shop-grid.sq-shop-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    overflow: visible !important;
  }

  body.sidequest-site .sq-shop-grid .product-card,
  body.sidequest-site .shop-grid.sq-shop-grid .product-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.sidequest-site .sq-shop-grid .product-card-img,
  body.sidequest-site .shop-grid.sq-shop-grid .product-card-img {
    width: 100% !important;
    aspect-ratio: 1 / 1.18 !important;
  }
}

@media (max-width: 380px) {
  body.sidequest-site .sq-collection-hero h1 {
    font-size: clamp(2.58rem, 12.8vw, 3.15rem) !important;
    letter-spacing: -0.075em !important;
  }

  body.sidequest-site .sq-catalog-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.sidequest-site .sq-shop-grid,
  body.sidequest-site .shop-grid.sq-shop-grid {
    gap: 16px 10px !important;
  }
}

/* Dynamic mobile Collection submenu.
   Desktop keeps the regular Collection link; phones expand into Supabase-driven filters. */
body.sidequest-site .sq-nav-collection-menu {
  display: none !important;
}

@media (max-width: 767px) {
  body.sidequest-site .sq-nav-collection-link {
    display: none !important;
  }

  body.sidequest-site .sq-nav-collection-menu {
    display: block !important;
    width: 100% !important;
  }

  body.sidequest-site .sq-nav-collection-menu summary {
    display: flex !important;
    min-height: 64px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: var(--sq-ink) !important;
    cursor: pointer !important;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    list-style: none !important;
    text-transform: uppercase !important;
  }

  body.sidequest-site .sq-nav-collection-menu summary::-webkit-details-marker {
    display: none !important;
  }

  body.sidequest-site .sq-nav-collection-menu summary::after {
    content: "+" !important;
    margin-left: auto !important;
    color: var(--sq-red) !important;
    font-family: "Space Mono", monospace !important;
  }

  body.sidequest-site .sq-nav-collection-menu[open] summary::after {
    content: "-" !important;
  }

  body.sidequest-site .sq-nav-subfilters {
    display: grid !important;
    gap: 0 !important;
    padding: 0 0 14px 16px !important;
  }

  body.sidequest-site .sq-nav-subfilters a {
    display: flex !important;
    min-height: 42px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-top: 1px solid var(--sq-line) !important;
    color: var(--sq-ink) !important;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  body.sidequest-site .sq-nav-subfilters a:first-child {
    color: var(--sq-red) !important;
  }
}

/* Keep the Collection submenu valid on legal/contact pages that use older nav shells. */
.sq-nav-collection-menu {
  display: none !important;
}

@media (max-width: 767px) {
  .sq-nav-collection-link {
    display: none !important;
  }

  .sq-nav-collection-menu {
    display: block !important;
    width: 100% !important;
  }
}

/* Product loading should never show a campaign/model placeholder before data arrives. */
body.sidequest-site .product-main-image.is-loading {
  background: #f7f4ee !important;
  border: 1px solid rgba(12, 12, 12, 0.08) !important;
}

body.sidequest-site .product-main-image.is-loading > img,
body.sidequest-site .product-main-image.is-loading .gallery-arrow {
  display: none !important;
}

body.sidequest-site .sq-product-loading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-content: center !important;
  gap: 12px !important;
  padding: 32px !important;
  color: var(--sq-ink) !important;
  text-align: center !important;
}

body.sidequest-site .sq-product-loading h2 {
  margin: 0 !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(2.5rem, 8vw, 6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.9 !important;
  text-transform: uppercase !important;
}

body.sidequest-site .sq-product-loading[hidden] {
  display: none !important;
}

body.sidequest-site .sq-catalog-tools {
  display: none !important;
}
