/* ==========================================================================
   Sense Wellness: shared styles

   Values match what sensewellness.life renders today. Breakpoints are the
   original site's: 750px (tablet) and 990px (desktop).

   Contents
     1. Fonts            6. Header            11. Text pages (FAQ, Contact…)
     2. Design tokens    7. Footer            12. Policy pages
     3. Base             8. Cursor bubble     13. Rich text section
     4. Typography       9. Motion            14. Guide promo card
     5. Rich text (rte) 10. Buttons           15. 404 page
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, SIL Open Font License; see fonts/OFL-*.txt) */

@font-face {
  font-family: "Assistant";
  src: url("/assets/fonts/assistant-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Same file as 400: it's a variable font. Only 400 and 700 are declared, as on
   the original site, so text styled 300 or 500 renders at 400 there and here. */
@font-face {
  font-family: "Assistant";
  src: url("/assets/fonts/assistant-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Only the regular weight, as on the original: bold Josefin Sans text is
   synthesized by the browser there and here. */
@font-face {
  font-family: "Josefin Sans";
  src: url("/assets/fonts/josefin-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design tokens */

:root {
  --font-body: Assistant, sans-serif;
  --font-heading: "Josefin Sans", sans-serif;
  /* Plain <button>s on the original use the browser's own font. */
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-page: #f6f5f3;        /* page background on every section */
  --fg: 75, 73, 73;             /* default scheme: #4b4949 */
  --link: 219, 211, 199;        /* default scheme links: #dbd3c7 */
  --header-ink: #000;

  --body-size: 18px;
  --body-line: 1.6667;
  --body-tracking: 0.72px;
  --heading-line: 1.2667;
  --heading-tracking: 0.81px;
  --h0-size: 54px;
  --h1-size: 40.5px;
  --h2-size: 27px;
  --h3-size: 22.95px;
  --h4-size: 20.25px;
  --h5-size: 16.2px;
  --grid-gap: 4px;
}

@media (min-width: 750px) {
  :root {
    --body-size: 19.2px;
    --h0-size: 70.2px;
    --h1-size: 54px;
    --h2-size: 32.4px;
    --h3-size: 24.3px;
    --h5-size: 17.55px;
    --grid-gap: 8px;
  }
}

/* Colour schemes from the original theme. Backgrounds always stay the shared
   page colour, as on the live site; only text and link colours change. */
.scheme-white {
  --fg: 18, 18, 18;
  --link: 18, 18, 18;
}

.scheme-alt {
  --fg: 31, 31, 31;
  --link: 140, 123, 106;
}

/* ---------- 3. Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-page);
}

body {
  margin: 0;
  background: var(--color-page);
  color: rgba(var(--fg), 0.75);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-tracking);
}

/* The skip link moves focus to <main>; the original shows no ring there. */
main:focus,
main:focus-visible {
  outline: 0;
  box-shadow: none;
}

.scheme-white,
.scheme-alt {
  color: rgba(var(--fg), 0.75);
}

img,
video,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2.4px solid rgba(var(--fg), 0.5);
  outline-offset: 3.6px;
  box-shadow: 0 0 0 3.6px var(--color-page), 0 0 6px 4.8px rgba(var(--fg), 0.3);
}

::selection {
  background-color: rgba(var(--fg), 0.2);
}

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

hr {
  display: block;
  height: 1.2px;
  margin: 60px 0;
  border: none;
  background-color: rgba(var(--fg), 0.2);
}

@media (min-width: 750px) {
  hr {
    margin: 84px 0;
  }
}

/* Two site-wide link rules from the original, below 990px wide: links to
   the Unscented product never wrap, and links to Contact get 2px of space. */
@media (max-width: 989px) {
  a[href*="/products/grass-fed-beef-tallow-balm"] {
    white-space: nowrap;
  }

  a[href*="/pages/contact"] {
    display: inline-block;
    margin-left: 2px;
  }
}

.page-width {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 18px;
}

@media (min-width: 750px) {
  .page-width {
    padding: 0 60px;
  }

  .page-width--narrow {
    padding: 0 108px;
  }
}

@media (min-width: 990px) {
  .page-width--narrow {
    max-width: 871.2px;
    padding: 0;
  }
}

.center {
  text-align: center;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content": hidden until focused with the keyboard, then shown as
   the theme's black button in the top-left corner. */
.skip-link.button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  margin: -1px;
}

.skip-link:not(:focus) {
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media (min-width: 750px) {
  .medium-up-hide {
    display: none !important;
  }
}

@media (max-width: 549px) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ---------- 4. Typography */

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line);
  color: rgb(var(--fg));
  overflow-wrap: break-word;
}

h1,
.h1 {
  font-size: var(--h1-size);
}

h2,
.h2 {
  font-size: var(--h2-size);
}

h3,
.h3 {
  font-size: var(--h3-size);
}

h4,
.h4 {
  font-size: var(--h4-size);
}

h5,
.h5 {
  font-size: var(--h5-size);
}

.h0 {
  font-size: var(--h0-size);
}

h6 {
  color: rgba(var(--fg), 0.75);
  margin-block: 1.67em;
}

.caption-with-letter-spacing {
  font-size: 12px;
  letter-spacing: 1.56px;
  line-height: 1.1667;
  text-transform: uppercase;
}

/* ---------- 5. Rich text (page, article and policy bodies) */

.rte::after {
  content: "";
  display: block;
  clear: both;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 24px;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--link), 0.85);
  text-underline-offset: 3.6px;
  text-decoration-thickness: 1.2px;
  transition: text-decoration-thickness 0.1s ease;
}

.rte a:hover {
  color: rgb(var(--link));
  text-decoration-thickness: 2.4px;
}

.rte img {
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(var(--fg), 0.05);
}

.rte blockquote {
  display: inline-flex;
}

.rte table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 16.8px;
  border-style: hidden;
  box-shadow: 0 0 0 1.2px rgba(var(--fg), 0.2);
}

.rte td,
.rte th {
  padding: 1em;
  border: 1.2px solid rgba(var(--fg), 0.2);
}

@media (min-width: 750px) {
  .rte table td {
    padding-left: 14.4px;
    padding-right: 14.4px;
  }
}

/* ---------- 6. Header: transparent, laid over the top of every page */

.site-header {
  --fg: 18, 18, 18;             /* the theme's white scheme: only focus rings use it */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Header and footer sit in white colour schemes, so focus rings get a white
   halo there. */
.site-header :focus-visible,
.site-footer :focus-visible {
  box-shadow: 0 0 0 3.6px #fff, 0 0 6px 4.8px rgba(var(--fg), 0.3);
}

.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
}

.site-nav a,
.site-header__social a {
  color: var(--header-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-header__social a:hover {
  opacity: 0.7;
}

.site-header__wordmark {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--header-ink);
  white-space: nowrap;
}

.site-header__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.site-header__social svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: var(--header-ink);
}

@media (max-width: 989px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    padding: 18px;
    gap: 14px;
  }

  .site-header__wordmark {
    display: none;
  }

  .site-nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  .site-nav a {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .site-header__social {
    gap: 14px;
  }

  .site-header__social svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- 7. Footer */

.site-footer {
  padding-bottom: 27px;
  background: var(--color-page);
}

.site-footer__top {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 40px 36px;
}

.footer-menu {
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.footer-menu a {
  display: inline-block;
  padding: 12px 0;
  font-size: 16.8px;
  color: rgba(var(--fg), 0.75);
  text-decoration: underline;
  text-underline-offset: 3.6px;
}

/* The link to the page you're on (About, Contact or Shipping Policy). */
.footer-menu a[aria-current="page"] {
  color: rgb(var(--fg));
}

.footer-follow {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: flex;
  align-items: center;
  padding: 10px;
  color: rgb(var(--fg));
}

.footer-social svg {
  display: block;
  width: 26.4px;
  height: 26.4px;
  fill: currentColor;
  transition: transform 0.1s ease;
}

.footer-social a:hover svg {
  transform: scale(1.07);
}

.site-footer__bottom {
  border-top: 1px solid rgba(var(--fg), 0.08);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 18px;
}

.footer-copyright {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5833;
  letter-spacing: 0.84px;
}

.footer-copyright small {
  font-size: 13.2px;
}

.footer-copyright a {
  color: currentColor;
  text-decoration: none;
}

.footer-policies {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-policies li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.footer-policies li::before {
  content: "\00B7";
  padding: 0 9.6px;
}

.footer-policies a {
  display: block;
  padding: 7.2px 0;
}

@media (min-width: 750px) {
  .site-footer {
    padding-bottom: 36px;
  }

  .site-footer__top {
    padding: 0 60px 60px;
  }

  .footer-menu {
    max-width: 912px;
    margin: 0 auto;
    text-align: center;
  }

  .footer-menu li {
    display: inline;
  }

  .footer-menu li:not(:last-child) {
    margin-right: 18px;
  }

  .footer-menu li:first-child a {
    padding-top: 0;
  }

  .footer-menu a:hover,
  .footer-copyright a:hover {
    color: rgb(var(--fg));
    text-decoration: underline;
    text-underline-offset: 3.6px;
  }

  .footer-menu a[aria-current="page"]:hover {
    text-decoration-thickness: 2.4px;
  }

  /* The social icons keep their place at the right-hand end of this row,
     where they sat beside the newsletter form on the original site. */
  .footer-follow,
  .footer-social {
    justify-content: flex-end;
  }

  .site-footer__bottom {
    padding-top: 36px;
  }

  .site-footer__bottom-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0 60px;
  }

  .footer-copyright {
    font-size: 14.4px;
    text-align: right;
  }

  .footer-policies a {
    padding: 0;
  }
}

@media (min-width: 990px) {
  .footer-menu a,
  .footer-menu li:first-child a {
    padding: 0;
  }
}

/* ---------- 8. "SENSE" cursor bubble (desktop only, purely decorative) */

.brand-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  color: #111;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.18s ease;
}

.brand-cursor.is-hidden {
  opacity: 0;
}

@media (max-width: 989px) {
  .brand-cursor {
    display: none;
  }
}

/* ---------- 9. Motion. Both effects are turned on by site.js and never run
   for people who prefer less motion. */

/* Each top-level section eases up 20px as it comes into view. */
html.js-motion [data-reveal] {
  transform: translateY(20px);
  transition: transform 0.7s ease;
}

html.js-motion [data-reveal].is-visible {
  transform: none;
}

/* Text pages, blog and collection: headings fade in and blocks slide up
   24px, staggered 75ms apart. Content already on screen animates at once;
   the rest waits until it is scrolled into view. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-fade,
  .reveal-slide {
    opacity: 0.01;
  }

  .reveal-slide {
    transform: translateY(24px);
  }

  .reveal-fade:not(.is-offscreen) {
    opacity: 1;
    animation: reveal-fade 600ms cubic-bezier(0, 0, 0.3, 1);
  }

  .reveal-slide:not(.is-offscreen) {
    animation: reveal-slide 600ms cubic-bezier(0, 0, 0.3, 1) forwards;
    animation-delay: calc(var(--animation-order, 0) * 75ms);
  }
}

@keyframes reveal-slide {
  from {
    transform: translateY(24px);
    opacity: 0.01;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

/* On phones the footer's bottom row doesn't slide in, as on the original. */
@media (max-width: 749px) {
  .site-footer__bottom.reveal-slide {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 10. Buttons. The original theme's rounded button outline sits
   inside a square black button; both are kept so the button looks the same. */

.button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 148px;
  min-height: 58px;
  padding: 15px 40px;
  border: 0;
  border-radius: 0;
  background-color: #000;
  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.1667;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 40px;
  box-shadow: 0 0 0 2px #9e968e;
  transition: box-shadow 0.1s ease;
  pointer-events: none;
}

.button:hover::after {
  box-shadow: 0 0 0 3px #9e968e;
}

/* ---------- 11. Text pages: FAQ, Contact, Shipping Policy, Privacy Choices */

.main-page {
  padding-top: 75px;
  padding-bottom: 21px;
}

.main-page__title {
  margin-top: 0;
  margin-bottom: 36px;
}

@media (min-width: 750px) {
  .main-page {
    padding-top: 100px;
    padding-bottom: 28px;
  }

  .main-page__title {
    margin-bottom: 48px;
  }
}

/* ---------- 12. Policy pages (Shopify's own policy layout) */

.policy {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 20px;
}

.policy__title {
  text-align: center;
}

/* ---------- 13. Rich text section ("Our Story" on the product pages) */

.rich-text-section {
  padding: 30px 0 39px;
}

.rich-text {
  position: relative;
  z-index: 0;
}

.rich-text__wrapper {
  display: flex;
  justify-content: center;
  width: calc(100% - 40px);
}

.rich-text__blocks {
  width: 100%;
  text-align: center;
}

.rich-text__blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.rich-text__blocks > * + * {
  margin-top: 24px;
}

@media (min-width: 750px) {
  .rich-text-section {
    padding: 40px 0 52px;
  }

  .rich-text__wrapper {
    width: 100%;
  }

  .rich-text__blocks {
    max-width: 600px;
  }
}

@media (min-width: 990px) {
  .rich-text__blocks {
    max-width: 936px;
  }
}

/* ---------- 14. Guide promo card ("Want a deeper breakdown?") */

.guide-promo {
  max-width: 820px;
  margin: 42px auto 70px;
  padding: 0 20px;
}

.guide-promo__box {
  padding: 34px 30px;
  border-radius: 22px;
  background: #f7f3ed;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.guide-promo p {
  max-width: 620px;
  margin: 0 auto 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

/* On the live site the eyebrow takes its size and colour from the paragraph
   rule above, so it renders 15px grey, not small and bronze. Kept that way. */
.guide-promo p.guide-promo__eyebrow {
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.guide-promo h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  color: #2f2f2f;
}

.guide-promo__button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: #2f2f2f;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-promo__button:hover {
  opacity: 0.88;
}

/* ---------- Review mode (npm run review only): highlights text that still
   needs the owner's approval. Has no effect on the normal site. */

.review-mode .needs-approval {
  background: #fff1a8;
  box-shadow: 0 0 0 2px #fff1a8;
  outline: 1px dashed #a07c00;
}

.review-mode .needs-approval::before {
  content: "APPROVE " attr(data-approval) ": ";
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a5c00;
}

/* ---------- 15. 404 page */

.not-found {
  margin: 84px auto;
}

.not-found .title {
  margin: 36px 0 24px;
}

.not-found .title + * {
  margin-top: 12px;
}

@media (min-width: 750px) {
  .not-found .title + * {
    margin-top: 24px;
  }
}

@media (min-width: 990px) {
  .not-found .title {
    margin: 60px 0 36px;
  }
}