/** Shopify CDN: Minification failed

Line 2121:0 Expected "}" to go with "{"

**/
/* ============================================================
   FG Paws — Brand layer on top of Horizon
   Ported from website-design/assets/style.css (2026-04-28)
   Loaded after base.css. Adds: motion, marquee, hero,
   editorial sections, eyebrow style, paper grain, Fraunces axes,
   product card hover, ATC button rust override.
   ============================================================ */

/* ── Brand tokens — "Quiet Luxury" (2026-06-02) ──
   Warm greige backgrounds, soft-charcoal text, OCHRE accent, charcoal CTAs.
   Minimal, premium, photography-led. Single type family: Schibsted Grotesk. */
:root {
  --fg-hand: 'Caveat', cursive;
  --fg-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --fg-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --fg-display-serif: 'Schibsted Grotesk', system-ui, sans-serif;

  /* Backgrounds — warm greige */
  --fg-paper:      #F4F1EC;   /* greige page background */
  --fg-paper-soft: #FBFAF7;   /* lighter cards / alt sections */
  --fg-paper-deep: #E6DFD3;   /* product image wells / soft blocks */
  --fg-bone:       #FBFAF7;

  /* Text — soft charcoal */
  --fg-ink:        #232323;
  --fg-ink-deep:   #111111;
  --fg-ink-line:   rgba(35, 35, 35, 0.12);
  --fg-ink-faint:  rgba(35, 35, 35, 0.72);   /* was 0.58 — failed WCAG AA on greige */

  /* Accents — ochre accent, sage secondary, charcoal CTAs */
  --fg-teal:       #232323;   /* primary CTA = charcoal */
  --fg-teal-deep:  #111111;
  --fg-teal-soft:  rgba(35, 35, 35, 0.06);
  --fg-orange:     #A67C2A;   /* accent = ochre (darkened from #B98A3E for WCAG text contrast) */
  --fg-orange-deep:#8A6720;
  --fg-yellow:     #C9A86A;
  --fg-sage:       #9AA89C;
  --fg-greige:     #E6DFD3;

  /* Legacy var names re-pointed (so existing CSS doesn't break) */
  --fg-brass:      #A67C2A;   /* ochre, darkened from #B98A3E for WCAG text contrast */
  --fg-brass-deep: #8A6720;
  --fg-rust:       #232323;   /* now charcoal — ATC / primary */
  --fg-rust-deep:  #111111;
  --fg-ember:      #A67C2A;
  --fg-moss:       #9AA89C;

  /* Motion */
  --fg-ease:       cubic-bezier(.2, .8, .2, 1);
  --fg-ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --fg-dur:        .55s;
  --fg-dur-slow:   .9s;
  --fg-shade-1:    0 1px 3px rgba(26,26,26,.04), 0 6px 24px rgba(26,26,26,.04);
  --fg-shade-2:    0 16px 48px -16px rgba(26,26,26,.15);
  /* Darker brass for SMALL text on paper/greige — #A67C2A is 3.4:1 (AA-fail at small sizes); #8A6720 is 4.6:1 */
  --fg-brass-text: #8A6720;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fg-dur: .01s; --fg-dur-slow: .01s; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ── Body refinements ── */
body {
  font-feature-settings: "ss01", "cv05", "cv11", "kern";
  letter-spacing: 0.005em;
}

/* Paper-grain overlay REMOVED — Mungo & Maud uses clean flat backgrounds.
   Texture was reading as "rustic editorial template". */

::selection { background: var(--fg-ink); color: var(--fg-paper); }

/* ── TYPOGRAPHY SYSTEM: Schibsted Grotesk (single family, "Quiet Luxury") ──
   Clean modern grotesk for display + body. Weight is the hierarchy tool:
   400 display → 800/900 for <em> accent words. No serif. (2026-06-08) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--fg-display) !important;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-variation-settings: normal;
}

h1, .h1 { font-weight: 800; letter-spacing: -0.04em; }
h2, .h2 { font-weight: 700; letter-spacing: -0.035em; }
h3, .h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
h4, .h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }

/* Italic em words = the one Fraunces moment per heading (high contrast) */
h1 em, h2 em, h3 em, h4 em,
.fg-hero__h1 em, .fg-shop-hero__h1 em,
.fg-section-head h2 em,
em.fg-serif, .fg-serif em {
  font-family: var(--fg-display-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--fg-brass);
  font-variation-settings: "opsz" 144 !important;
  letter-spacing: -0.01em;
}

/* Body em = subtle italic, not the dramatic serif (darker brass: small-text AA contrast) */
p em, li em, .rte em {
  font-family: inherit !important;
  font-style: italic;
  color: var(--fg-brass-text, #8A6720);
  font-variation-settings: normal;
}

/* ── Eyebrow (small caps with brass rule) ── */
.fg-eyebrow {
  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-ink);   /* was --fg-brass (#B98A3E = 2.75:1, failed AA); gold kept on the rule below */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fg-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--fg-brass);   /* keep the gold accent rule even though label is now ink */
  opacity: .9;
}
.fg-eyebrow--no-rule::before { display: none; }
.fg-eyebrow--ink { color: var(--fg-ink); }
.fg-eyebrow--bone { color: var(--fg-bone); }

/* ── Lede (large supporting paragraph) ── */
.fg-lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--fg-ink-faint);
  max-width: 56ch;
  font-weight: 400;
}

/* ── Button refinements (arrow on hover, lift) ── */
.button,
.btn,
button[type="submit"]:not(.shopify-payment-button__button) {
  transition: transform .35s var(--fg-ease), color .25s var(--fg-ease),
              background .25s var(--fg-ease), border-color .25s var(--fg-ease);
}
.button:hover,
.btn:hover {
  transform: translateY(-1px);
}

/* Add-to-cart — teal accent (GoldPet primary CTA pattern) */
.product-form__submit,
button[name="add"],
.shopify-payment-button__button {
  background-color: var(--fg-teal) !important;
  color: var(--fg-bone) !important;
  border-color: var(--fg-teal) !important;
}
.product-form__submit:hover,
button[name="add"]:hover,
.shopify-payment-button__button:hover {
  background-color: var(--fg-teal-deep) !important;
  border-color: var(--fg-teal-deep) !important;
}

/* Sale badges, discount tags, urgency moments — orange */
.badge--sale,
.product-badge--sale,
[class*="sale"]:not(button) {
  color: var(--fg-orange);
}
.badge--sale,
.product-badge--sale {
  background: var(--fg-orange) !important;
  color: var(--fg-bone) !important;
}

/* ── Marquee announcement bar ── */
.fg-marquee {
  background: var(--fg-ink);
  color: var(--fg-paper);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(237, 227, 208, 0.15);
}
.fg-marquee__track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: fgMarquee 38s linear infinite;
  width: max-content;
}
.fg-marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.fg-marquee__track .fg-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-brass);
  display: inline-block;
}
@keyframes fgMarquee { to { transform: translateX(-50%); } }
/* Reduced motion: the static track would clip items past the viewport edge — wrap instead */
@media (prefers-reduced-motion: reduce) {
  .fg-marquee__track { white-space: normal; flex-wrap: wrap; width: auto; justify-content: center; }
  .fg-marquee__track > span { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .fg-marquee__track > span[aria-hidden="true"] { display: none; }
}

/* ── Reveal-on-scroll animations ── */
[data-fg-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--fg-dur-slow) var(--fg-ease),
              transform var(--fg-dur-slow) var(--fg-ease);
}
[data-fg-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-fg-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--fg-ease), transform .8s var(--fg-ease);
}
[data-fg-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-fg-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-fg-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-fg-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-fg-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-fg-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-fg-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-fg-reveal-stagger].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-fg-reveal-stagger].is-in > *:nth-child(8) { transition-delay: .49s; }

[data-fg-mask] {
  display: inline-block;
  overflow: hidden;
}
[data-fg-mask] > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--fg-ease);
}
[data-fg-mask].is-in > span { transform: none; }

/* ── Editorial hero (image background, copy left, meta-aside right) ── */
.fg-hero {
  position: relative;
  min-height: clamp(620px, 92vh, 920px);
  display: grid;
  align-items: end;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
  background: var(--fg-ink);
  color: var(--fg-bone);
}
.fg-hero__bg {
  position: absolute;
  inset: 0;
}
.fg-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: fgHeroZoom 14s var(--fg-ease-soft) forwards;
  opacity: 0.7;
}
.fg-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 30% 90%, rgba(0,0,0,0) 30%, rgba(10,22,18,0.85) 100%),
    linear-gradient(180deg, rgba(10,22,18,.25) 0%, rgba(10,22,18,.0) 30%, rgba(10,22,18,.7) 100%);
}
@keyframes fgHeroZoom { to { transform: scale(1.0); } }

.fg-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  max-width: var(--wide-page-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5.5vw, 72px);
}
.fg-hero__copy {
  color: var(--fg-bone);
  border-radius: 12px;
  transition: background .3s var(--fg-ease, ease);
}
/* CARD: translucent dark panel behind text — readable over any photo (DEFAULT) */
.fg-hero__copy--card {
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}
/* INK: solid panel max contrast */
.fg-hero__copy--ink {
  background: var(--fg-ink, #1A1A1A);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
/* OVERLAY: no panel, heavier section gradient + text-shadow */
.fg-hero__copy--overlay {
  background: transparent;
  padding: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.fg-hero:has(.fg-hero__copy--overlay) .fg-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(20,18,15,.82) 0%, rgba(20,18,15,.55) 42%, rgba(20,18,15,.12) 68%, transparent 82%),
    linear-gradient(180deg, rgba(20,18,15,.32) 0%, transparent 26%, transparent 72%, rgba(20,18,15,.32) 100%) !important;
}
@media (max-width: 749px) {
  .fg-hero:has(.fg-hero__copy--overlay) .fg-hero__bg::after {
    background: linear-gradient(180deg, rgba(20,18,15,.35) 0%, rgba(20,18,15,.78) 100%) !important;
  }
}
/* RAW: original behaviour, no panel */
.fg-hero__copy--raw { background: transparent; padding: 0; }
.fg-hero__h1 {
  color: var(--fg-bone);
  margin: 22px 0 26px;
  font-size: clamp(56px, 9vw, 148px);
  font-weight: 250;
  line-height: 1.02;
  font-family: var(--font-heading--family);
}
.fg-hero__h1 em {
  color: var(--fg-brass);
}
.fg-hero__copy .fg-lede {
  color: rgba(248, 242, 229, 0.78);
  margin-bottom: 38px;
  max-width: 50ch;
}
.fg-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fg-hero__meta {
  align-self: end;
  border-left: 1px solid rgba(248, 242, 229, 0.2);
  padding-left: 28px;
  font-size: 13px;
  color: rgba(248, 242, 229, 0.75);
  display: grid;
  gap: 16px;
}
.fg-hero__meta strong {
  color: var(--fg-bone);
  display: block;
  font-weight: 500;
}
.fg-hero__counter {
  font-family: var(--font-heading--family);
  font-size: 56px;
  font-weight: 250;
  line-height: 1;
  color: var(--fg-brass);
  letter-spacing: -0.03em;
}

.fg-hero__inner--solo { grid-template-columns: 1fr; }

/* Newsletter form feedback messages */
.fg-newsletter__msg { flex-basis: 100%; width: 100%; font-size: 14px; margin: 10px 0 0; }
.fg-newsletter__msg--ok { color: var(--fg-bone, #F8F2E5); }
.fg-newsletter__msg--err { color: #E8A87C; }

@media (max-width: 900px) {
  .fg-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .fg-hero__meta {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(248, 242, 229, 0.18);
    padding-top: 24px;
  }
}

/* ── Numbered manifesto (3-column "three rules") ── */
.fg-manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--fg-ink-line);
}
.fg-manifesto__item {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 48px);
  border-right: 1px solid var(--fg-ink-line);
  position: relative;
}
.fg-manifesto__item:last-child { border-right: 0; }
.fg-manifesto__num {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: 60px;
  line-height: 1;
  color: var(--fg-brass);
  font-weight: 300;
  display: block;
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.fg-manifesto__item h3 { margin-bottom: 14px; }
.fg-manifesto__item p {
  font-size: 15px;
  color: var(--fg-ink-faint);
  line-height: 1.55;
  max-width: 36ch;
}
@media (max-width: 800px) {
  .fg-manifesto { grid-template-columns: 1fr; }
  .fg-manifesto__item {
    border-right: 0;
    border-bottom: 1px solid var(--fg-ink-line);
  }
  .fg-manifesto__item:last-child { border-bottom: 0; }
}

/* ── Section head (eyebrow + h2 + lede in a 2-col layout) ── */
.fg-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.fg-section-head__title { max-width: 24ch; }
.fg-section-head h2 { margin-top: 16px; }
.fg-section-head p {
  margin-top: 18px;
  max-width: 48ch;
  color: var(--fg-ink-faint);
  font-size: 17px;
}
@media (max-width: 720px) {
  .fg-section-head { grid-template-columns: 1fr; }
}

/* ── Asymmetric category grid (1 big + 4 small) ── */
.fg-cats-asym {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 560px;
}
.fg-cats-asym .fg-cat:nth-child(1) { grid-row: span 2; }
.fg-cat {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--fg-paper-soft);
  display: block;
  isolation: isolate;
  color: var(--fg-ink);
  box-shadow: var(--fg-shade-1);
}
.fg-cat__bg {
  position: absolute;
  inset: 0;
  background: var(--fg-paper-soft);
  transition: transform 1s var(--fg-ease-soft);
}
.fg-cat__bg img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 1;
  padding: clamp(24px, 3vw, 60px);
  padding-bottom: clamp(72px, 8vw, 104px);
}
.fg-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,250,247,0) 58%, rgba(251,250,247,0.92) 100%);
  z-index: 1;
}
.fg-cat__label {
  position: absolute;
  left: 28px; bottom: 28px; right: 28px;
  z-index: 2;
  color: var(--fg-ink);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}
.fg-cat__label h3 {
  color: var(--fg-ink);
  font-size: clamp(22px, 2.6vw, 36px);
}
.fg-cat__label .fg-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--fg-ink-line);
  color: var(--fg-ink);
  display: grid;
  place-items: center;
  transition: transform .4s var(--fg-ease), background .3s var(--fg-ease),
              color .3s var(--fg-ease);
}
.fg-cat:hover .fg-cat__bg { transform: scale(1.04); }
.fg-cat:hover .fg-cat__label .fg-arrow {
  background: var(--fg-ink);
  color: var(--fg-paper);
  border-color: var(--fg-ink);
  transform: rotate(-45deg);
}
.fg-cat__count {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-ink-faint);
  display: block;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .fg-cats-asym {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .fg-cats-asym .fg-cat:nth-child(1) {
    grid-column: span 2;
    grid-row: auto;
    min-height: 380px;
  }
  .fg-cat { min-height: 280px; }
}

/* ── Pullquote / editorial ── */
.fg-pullquote {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.15;
  font-weight: 300;
  color: var(--fg-ink);
  max-width: 22ch;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.018em;
}
.fg-pullquote--bone { color: var(--fg-bone); }
.fg-pullquote em { color: var(--fg-brass); }

.fg-editorial {
  position: relative;
  background: var(--fg-ink);
  color: var(--fg-paper);
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
}
.fg-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: saturate(0.7) contrast(1.05);
}
.fg-editorial__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--wide-page-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5.5vw, 72px);
}
.fg-editorial__inner h2 { color: var(--fg-bone); }
.fg-editorial__inner p {
  color: rgba(237, 227, 208, 0.78);
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 52ch;
}
.fg-editorial__sig {
  font-family: var(--font-heading--family);
  font-style: italic;
  color: var(--fg-brass);
  margin-top: 24px;
}
@media (max-width: 800px) {
  .fg-editorial__inner { grid-template-columns: 1fr; }
}

/* ── Editor's pick badge (replaces "Bestseller" tag) ── */
.fg-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-brass);
  font-weight: 500;
}
.fg-pick::before {
  content: "★";
  font-size: 14px;
}
.fg-pick--badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--fg-bone);
  color: var(--fg-ink);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: var(--fg-shade-1);
}

/* ── FG Paws product card override (distinctive, not generic Shopify) ── */
.product-card,
.card-product,
.card--product {
  position: relative;
  transition: transform .4s var(--fg-ease), box-shadow .4s var(--fg-ease);
  border-radius: 18px;
  overflow: visible;
}

/* Media area: cream background, padded image, subtle inner shadow */
.product-card .product-card__image,
.card-product .card__media,
.card__media,
.card-product .product-card-gallery {
  background: var(--fg-paper-soft);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--fg-ink-line);
}
.product-card .product-card__image::before,
.card-product .card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(248, 242, 229, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(181, 142, 90, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.product-card img,
.card-product img,
.card__media img {
  transition: transform .8s var(--fg-ease-soft);
  position: relative;
  z-index: 0;
}
.product-card:hover img,
.card-product:hover img,
.card:hover img {
  transform: scale(1.06) rotate(-0.5deg);
}

/* Vendor / brand name in brass small-caps eyebrow */
.product-card .product-card__vendor,
.card-product .card__vendor,
.card-product .vendor,
.card-information .vendor {
  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-brass);
  margin-bottom: 6px;
}

/* Title in Fraunces 18px */
.product-card .product-card__title,
.product-card .card__title,
.card-product .card__heading a,
.card-product .product-title,
.card-product h3 a,
.card-information .card__heading {
  font-family: var(--font-heading--family);
  font-size: clamp(16px, 1.5vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--fg-ink) !important;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

/* Price block */
.product-card .price,
.card-product .price,
.card-information .price,
.card-product .product-card-price {
  font-family: var(--font-body--family) !important;
  font-size: 15px !important;
  color: var(--fg-ink) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}
.product-card .price del,
.card-product .price del,
.card-information .price del {
  color: var(--fg-ink-faint) !important;
  margin-right: 8px;
  font-weight: 400 !important;
  text-decoration-color: var(--fg-rust);
  text-decoration-thickness: 2px;
}
.product-card .price--sale,
.card-product .price--sale {
  color: var(--fg-rust) !important;
}

/* Hover: lift card + brass shadow + quick-add slides up */
.product-card:hover,
.card-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -25px rgba(181, 142, 90, 0.5),
              0 8px 28px -10px rgba(17, 33, 27, 0.2);
}

/* Quick add button override — pill, rust */
.product-card .product-card__quick-add,
.card-product .quick-add__submit,
button.quick-add-button {
  background: var(--fg-ink) !important;
  color: var(--fg-bone) !important;
  border-radius: 999px !important;
  font-family: var(--font-body--family) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 13px 18px !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--fg-ease), transform .35s var(--fg-ease), background .25s var(--fg-ease) !important;
}
.product-card:hover .product-card__quick-add,
.card-product:hover .quick-add__submit {
  opacity: 1;
  transform: translateY(0);
}
.product-card .product-card__quick-add:hover,
.card-product .quick-add__submit:hover {
  background: var(--fg-rust) !important;
}

/* Sale badge override — pill, rust, italic */
.product-card .badge,
.card-product .badge,
.product-card .product-badge,
.card-product .product-badge {
  background: var(--fg-rust) !important;
  color: var(--fg-bone) !important;
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  text-transform: none !important;
}

/* ── Header polish (translucent at top of page, sticky on scroll) ── */
header-component {
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(237, 227, 208, 0.85);
  transition: background .3s var(--fg-ease);
}

/* When header is transparent over hero, no backdrop until scrolled */
header-component[transparent] {
  background: rgba(17, 33, 27, 0.0);
  backdrop-filter: none;
}
header-component[transparent].is-scrolled {
  background: rgba(237, 227, 208, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
}

/* ── Logo treatment (FG mark in circle) ── */
.fg-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-ink);
}
.fg-logo__mark {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-heading--family);
  font-size: 15px;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: 0.02em;
  transition: all .35s var(--fg-ease);
}
.fg-logo:hover .fg-logo__mark {
  background: var(--fg-ink);
  color: var(--fg-paper);
}
.fg-logo__word {
  font-family: var(--font-heading--family);
  font-size: 22px;
  font-weight: 350;
  letter-spacing: 0.04em;
}

/* ── Newsletter dark section ── */
.fg-newsletter {
  background: var(--fg-ink-deep);
  color: var(--fg-paper);
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
}
.fg-newsletter h2 {
  color: var(--fg-bone);
  margin-bottom: 18px;
}
.fg-newsletter h2 em { color: var(--fg-brass); }
.fg-newsletter p {
  color: rgba(237, 227, 208, 0.7);
  max-width: 48ch;
  margin: 0 auto 32px;
}
.fg-newsletter form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 22px;
  align-items: stretch;
}
.fg-newsletter input[type="email"] {
  flex: 1;
  background: rgba(248, 242, 229, 0.08);
  border: 1px solid rgba(248, 242, 229, 0.2);
  color: var(--fg-bone);
  padding: 14px 18px;
  border-radius: 999px;
  font-family: var(--font-body--family);
  font-size: 14px;
}
.fg-newsletter input[type="email"]::placeholder {
  color: rgba(248, 242, 229, 0.5);
}
.fg-newsletter button[type="submit"] {
  background: var(--fg-bone);
  color: var(--fg-ink);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--fg-ease), color .25s var(--fg-ease);
}
.fg-newsletter button[type="submit"]:hover {
  background: var(--fg-brass);
  color: var(--fg-ink);
}
.fg-newsletter__stamp {
  font-family: var(--font-heading--family);
  font-style: italic;
  color: var(--fg-brass);
  font-size: 14px;
  margin-top: 22px;
}

/* ── Footer band tagline ── */
.fg-footer-tagline {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 22px);
  color: var(--fg-ink-faint);
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid var(--fg-ink-line);
  margin-top: 48px;
}
.fg-footer-tagline em { color: var(--fg-brass); }

/* ── Smooth scroll for in-page anchors ── */
html { scroll-behavior: smooth; }

/* ── Image fade-in on load (no FOUC) ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .6s var(--fg-ease);
}
img[loading="lazy"].fg-img-loaded { opacity: 1; }

/* ── Hero parallax: ensure transform doesn't fight default ── */
.fg-hero__bg img[data-fg-parallax] {
  will-change: transform;
  transition: transform .1s linear;
  /* Disable the keyframe zoom when parallax JS takes over */
  animation: none !important;
}

/* ── Marquee hover slow-down hint (also accessibility — paused on focus) ── */
.fg-marquee:focus-within .fg-marquee__track { animation-play-state: paused; }

/* ── Buttons: magnetic baseline (transform handled by JS, smooth return) ── */
.fg-hero__cta .button,
.button-primary[data-fg-magnetic] {
  transition: transform .4s var(--fg-ease), background .25s var(--fg-ease), color .25s var(--fg-ease), border-color .25s var(--fg-ease);
}

/* ── Smooth scroll-driven section entrance (modern) ── */
@supports (animation-timeline: view()) {
  .section > .page-width > * {
    animation: fgFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  @keyframes fgFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ── Counter (hero stat) — slight number-shift to feel alive ── */
.fg-hero__counter {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

/* ── Focus visibility (accessibility, brass ring) ── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fg-brass);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ── Smoother card hover (lift + shadow + scale image) ── */
.product-card,
.card-product,
.card {
  transition: transform .4s var(--fg-ease), box-shadow .4s var(--fg-ease);
}
.product-card:hover,
.card-product:hover,
.card:hover {
  transform: translateY(-3px);
}

/* ── Refined Fraunces optical sizing per heading size ── */
h1, .h1 { font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 280; }
h2, .h2 { font-variation-settings: "opsz" 96,  "SOFT" 40; font-weight: 320; }
h3, .h3 { font-variation-settings: "opsz" 48,  "SOFT" 50; font-weight: 380; }
h4, .h4 { font-variation-settings: "opsz" 24,  "SOFT" 60; font-weight: 420; }

/* Italic em inside headings — italic axis, brass, slightly heavier soft */
h1 em, h2 em, h3 em, h4 em {
  color: var(--fg-brass);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

/* ── Section utility — tighter padding ── */
.section-tight {
  padding-top: clamp(56px, 8vw, 120px) !important;
  padding-bottom: clamp(56px, 8vw, 120px) !important;
}

/* ── Smarter mobile: reduce padding, tighter type ── */
@media (max-width: 640px) {
  .fg-hero { min-height: 80vh; }
  .fg-hero__h1 { font-size: clamp(44px, 12vw, 78px); }
  .fg-hero__counter { font-size: 44px; }
  .fg-section-head { margin-bottom: 32px; }
  .fg-pullquote { font-size: clamp(24px, 7vw, 36px); }
}

/* ── Better link underline (subtle, brass on hover) ── */
.rte a, .fg-story__rte a {
  position: relative;
  color: var(--fg-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  text-decoration: none;
  transition: color .2s var(--fg-ease), background-size .25s var(--fg-ease);
}
.rte a:hover, .fg-story__rte a:hover {
  color: var(--fg-brass);
  background-size: 100% 2px;
}

/* ── Smoother all-element transitions for color-scheme switches ── */
body { transition: background-color .3s var(--fg-ease), color .3s var(--fg-ease); }

/* ── Selection states (more theatrical) ── */
::selection { background: var(--fg-brass); color: var(--fg-ink); }

/* ── Custom paw cursor (desktop only, hidden by JS on touch) ── */
.fg-cursor {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 28px;
  height: 28px;
  will-change: transform;
  transition: opacity .2s var(--fg-ease);
}
.fg-cursor__paw {
  width: 100%;
  height: 100%;
  fill: var(--fg-ink);
  filter: drop-shadow(0 1px 2px rgba(248, 242, 229, 0.5));
  transform-origin: 50% 65%;
  transition: transform .25s var(--fg-ease), fill .2s var(--fg-ease);
}
.fg-cursor.is-hovering .fg-cursor__paw {
  transform: scale(1.6) rotate(-15deg);
  fill: var(--fg-rust);
}
.fg-cursor.is-clicking .fg-cursor__paw {
  transform: scale(0.85);
}

/* On dark sections (color-scheme-5 etc), cursor goes bone */
.color-scheme-5 .fg-cursor__paw,
[class*="scheme-5"] .fg-cursor__paw,
.fg-hero .fg-cursor__paw,
.fg-editorial .fg-cursor__paw,
.fg-newsletter .fg-cursor__paw,
.fg-footer .fg-cursor__paw {
  fill: var(--fg-bone);
  filter: drop-shadow(0 1px 2px rgba(17, 33, 27, 0.6));
}

/* Native cursor restored (2026-06-08): custom paw cursor removed for usability + perf. */
.fg-cursor { display: none !important; }

/* ── Product card image hover swap (crossfade to second image) ── */
.product-card, .card-product {
  position: relative;
}
.product-card .fg-img-hover, .card-product .fg-img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--fg-ease);
  pointer-events: none;
}
.product-card.is-img-hover .fg-img-hover,
.card-product.is-img-hover .fg-img-hover {
  opacity: 1;
}

/* ── Section dividers (branded SVG paw-trail between sections) ── */
.fg-divider {
  display: block;
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.fg-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'><path d='M0,30 Q250,5 500,30 T1000,30' stroke='%23B58E5A' stroke-width='0.6' fill='none' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* ── Loading skeleton (used while images/products fetch) ── */
.fg-skeleton {
  background: linear-gradient(90deg,
    var(--fg-paper-soft) 0%,
    var(--fg-paper-deep) 50%,
    var(--fg-paper-soft) 100%);
  background-size: 200% 100%;
  animation: fgSkeleton 1.8s ease-in-out infinite;
  border-radius: 14px;
}
@keyframes fgSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Product card lift + brass shadow ── */
.product-card:hover, .card-product:hover {
  box-shadow: 0 20px 50px -25px rgba(181, 142, 90, 0.45),
              0 6px 24px -10px rgba(17, 33, 27, 0.18);
}

/* ============================================================
   SHOP HERO REFINEMENT — more arresting, less safe
   ============================================================ */

.fg-shop-hero {
  padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 8vw, 100px) !important;
}

/* Pre-headline label removed per Justin's directive — no more "Vol. 01" */
.fg-shop-hero__copy { position: relative; }

/* Hero heading: Manrope 800, very tight, with Fraunces italic em moment */
.fg-shop-hero__h1 {
  font-family: var(--fg-display) !important;
  font-size: clamp(56px, 9vw, 132px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.045em !important;
  margin-top: 8px !important;
  font-weight: 800 !important;
  color: var(--fg-ink);
  font-variation-settings: normal !important;
}
.fg-shop-hero__h1 em {
  font-family: var(--fg-display-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--fg-rust) !important;
  font-variation-settings: "opsz" 144 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  padding: 0 !important;
}

/* Sub: bigger, more readable */
.fg-shop-hero__sub {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.5 !important;
  max-width: 44ch !important;
}

/* CTA row: primary button gets pulse halo */
.fg-shop-hero__btn--primary {
  position: relative;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  padding: 18px 32px !important;
}
.fg-shop-hero__btn--primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--fg-rust);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .3s var(--fg-ease), transform .3s var(--fg-ease);
}
.fg-shop-hero__btn--primary:hover::after {
  opacity: 0.4;
  transform: scale(1);
}

/* Trust row: hairline rule, restrained (Mungo & Maud) */
.fg-shop-hero__trust {
  padding-top: 28px !important;
  margin-top: 8px;
  border-top: 1px solid var(--fg-ink-line) !important;
}
.fg-shop-hero__trust::before { display: none; }
.fg-shop-hero__trust strong {
  font-size: 13px !important;
  font-family: var(--fg-display);
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
.fg-shop-hero__trust span {
  font-family: var(--fg-mono);
  font-size: 11px !important;
  letter-spacing: 0 !important;
  color: var(--fg-ink-faint);
}

/* Tile labels — vendor in mono caps for editorial feel */
.fg-shop-hero__tile-label {
  padding: 12px 16px 16px !important;
}

/* ============================================================
   COLOR PALETTE EXPANSION — break the brass-only monotony
   ============================================================ */

/* Category accent colors — each category page gets its own accent */
[data-category="toys"]      { --fg-accent: var(--fg-ember); --fg-accent-soft: rgba(212, 104, 58, 0.12); }
[data-category="beds"]      { --fg-accent: var(--fg-moss);  --fg-accent-soft: rgba(45, 74, 62, 0.12); }
[data-category="treats"]    { --fg-accent: var(--fg-rust);  --fg-accent-soft: rgba(161, 74, 40, 0.12); }
[data-category="grooming"]  { --fg-accent: var(--fg-brass); --fg-accent-soft: rgba(181, 142, 90, 0.12); }
[data-category="bowls"]     { --fg-accent: var(--fg-rust-deep); --fg-accent-soft: rgba(126, 58, 31, 0.12); }
[data-category="health"]    { --fg-accent: var(--fg-moss);  --fg-accent-soft: rgba(45, 74, 62, 0.14); }
[data-category="food"]      { --fg-accent: var(--fg-brass-deep); --fg-accent-soft: rgba(142, 110, 64, 0.14); }
[data-category="flea"]      { --fg-accent: #6B5B3A;         --fg-accent-soft: rgba(107, 91, 58, 0.12); }

/* Eyebrow rust variant — alternate sections use rust instead of brass */
.fg-section--rust .fg-eyebrow,
.fg-eyebrow--rust {
  color: var(--fg-rust) !important;
}
.fg-section--rust .fg-eyebrow::before,
.fg-eyebrow--rust::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23A14A28'><ellipse cx='9' cy='11' rx='2.6' ry='3.4'/><ellipse cx='23' cy='11' rx='2.6' ry='3.4'/><ellipse cx='13' cy='6' rx='2.2' ry='3'/><ellipse cx='19' cy='6' rx='2.2' ry='3'/><path d='M16,15 C10,15 6,20 6,24 C6,27 8,28 10.5,28 C12.5,28 14,27 16,27 C18,27 19.5,28 21.5,28 C24,28 26,27 26,24 C26,20 22,15 16,15 Z'/></svg>") !important;
}

/* Moss callout — used for "natural / good for them" moments */
.fg-callout-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fg-moss);
  color: var(--fg-bone);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--fg-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.fg-callout-tag--rust { background: var(--fg-rust); }
.fg-callout-tag--ember { background: var(--fg-ember); color: var(--fg-ink); }
.fg-callout-tag--brass { background: var(--fg-brass); color: var(--fg-ink); }

/* ============================================================
   MONO TYPEFACE — prices, SKUs, specs, stats (third font breaks
   the Fraunces+Inter predictability)
   ============================================================ */

/* All prices site-wide get JetBrains Mono */
.price,
.price__regular,
.price__sale,
.product-card .price,
.card-product .price,
.fg-trio__price,
.fg-spotlight__price,
.fg-shop-hero__tile-price,
.fg-bento__stat-num,
[class*="price"]:not(.fg-shop-hero__btn):not(.fg-callout-tag) {
  font-family: var(--fg-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.02em;
}

/* Stat numbers in mono — counter, hero counter, bento stats */
.fg-hero__counter,
.fg-bento__stat-num,
[data-fg-counter] {
  font-family: var(--fg-mono) !important;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* SKU / product codes / spec values */
.product-sku,
.fg-pdp-meta__body code,
.fg-spec-mono {
  font-family: var(--fg-mono);
  font-size: 12px;
  color: var(--fg-ink-faint);
  letter-spacing: -0.01em;
}

/* Vendor / brand names in caps mono (replaces brass tracked sans) */
.fg-trio__vendor,
.fg-shop-hero__tile-label span:first-child {
  font-family: var(--fg-mono) !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  font-size: 10px !important;
}

/* ============================================================
   PERSONALITY LAYER — pulls the design out of "standard theme"
   ============================================================ */

/* Sticker stamps removed — too rustic for Mungo & Maud aesthetic.
   Pick badges stay but as clean rectangles, not dashed rotated stickers. */
.fg-stamp { display: none !important; }
.product-card[data-tags*="pick"]::after,
.card-product[data-tags*="pick"]::after,
.fg-pick-card::after {
  content: "EDITOR'S PICK";
  white-space: normal !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  background: var(--fg-ink) !important;
  color: var(--fg-bone) !important;
  border: 0 !important;
  font-family: var(--fg-mono) !important;
  font-style: normal !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  padding: 4px 9px !important;
  border-radius: 2px !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

/* DUMMY — keeps old class working without rendering */
.fg-stamp-old-was {
.fg-stamp {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--fg-bone);
  border: 1.5px dashed var(--fg-rust);
  color: var(--fg-rust);
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.05;
  padding: 12px;
  transform: rotate(-8deg);
  box-shadow: 0 4px 14px rgba(17, 33, 27, 0.12),
              0 0 0 4px var(--fg-bone) inset;
  z-index: 5;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  transition: transform .4s var(--fg-ease);
}
.fg-stamp:hover { transform: rotate(-4deg) scale(1.04); }
.fg-stamp--top-right { top: -20px; right: -20px; }
.fg-stamp--top-left  { top: -20px; left: -20px; transform: rotate(8deg); }
.fg-stamp--bottom-right { bottom: -20px; right: -20px; transform: rotate(6deg); }
.fg-stamp em { display: block; font-weight: 700; font-size: 14px; margin: 2px 0 -1px; }

/* Auto-stamp on product cards tagged "pick" via metafield or class */
.product-card[data-tags*="pick"]::after,
.card-product[data-tags*="pick"]::after,
.fg-pick-card::after {
  content: "★ Top\APick";
  white-space: pre;
  position: absolute;
  top: -16px;
  right: -16px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fg-bone);
  border: 1.5px dashed var(--fg-rust);
  color: var(--fg-rust);
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.15;
  transform: rotate(-8deg);
  box-shadow: 0 4px 14px rgba(17, 33, 27, 0.12);
  z-index: 5;
  pointer-events: none;
}

/* ── Hand-drawn scribble underline ── */
.fg-scribble {
  position: relative;
  display: inline-block;
}
.fg-scribble::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -10px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2,7 Q40,2 80,7 T160,7 T200,5' stroke='%23A14A28' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}
.fg-scribble--brass::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2,7 Q40,2 80,7 T160,7 T200,5' stroke='%23B58E5A' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
}

/* Auto-scribble: italic em inside fg-section-head h2 gets it */
.fg-section-head h2 em,
.fg-hero__h1 em,
.fg-bento__quote em {
  position: relative;
  z-index: 1;
}

/* ── Polaroid photo frame (white border + handwritten caption + tilt) ── */
.fg-polaroid {
  background: var(--fg-bone);
  padding: 16px 16px 56px;
  display: inline-block;
  box-shadow: 0 10px 30px -10px rgba(17, 33, 27, 0.25),
              0 0 0 1px rgba(17, 33, 27, 0.04);
  transform: rotate(-2deg);
  transition: transform .4s var(--fg-ease), box-shadow .4s var(--fg-ease);
  position: relative;
}
.fg-polaroid:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 20px 50px -15px rgba(17, 33, 27, 0.35);
}
.fg-polaroid--right { transform: rotate(2deg); }
.fg-polaroid--right:hover { transform: rotate(0deg) scale(1.02); }
.fg-polaroid img {
  display: block;
  width: 100%;
  height: auto;
}
.fg-polaroid figcaption,
.fg-polaroid__caption {
  font-family: var(--fg-hand);
  font-size: 22px;
  color: var(--fg-ink);
  text-align: center;
  margin-top: 14px;
  line-height: 1.1;
  font-weight: 500;
}
.fg-polaroid::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 90px;
  height: 22px;
  background: rgba(181, 142, 90, 0.4);
  border-radius: 2px;
}

/* Story figure — clean editorial photo, no tape/rotation/handwriting */
.fg-story__figure {
  text-align: center;
  margin: clamp(40px, 6vw, 80px) auto !important;
}
.fg-story__figure img {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 24px -10px rgba(26, 26, 26, 0.18);
  transform: none;
}
.fg-story__figure figcaption {
  font-family: var(--fg-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-ink-faint);
  font-style: normal;
  margin-top: 12px;
  text-transform: uppercase;
}

/* ── Handwritten helper class ── */
.fg-handwritten {
  font-family: var(--fg-hand);
  font-weight: 500;
  font-style: normal;
}
.fg-handwritten--accent { color: var(--fg-brass); }
.fg-handwritten--rust { color: var(--fg-rust); }

/* Hero stamp moved to .fg-shop-hero__stamp inside section markup (was here as ::after) */

.fg-editorial__sig,
.fg-story__signoff {
  font-family: var(--fg-hand) !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-style: normal !important;
  color: var(--fg-brass) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── More rust — eyebrows alternating, callouts, divider variants ── */
.fg-eyebrow--rust { color: var(--fg-rust); }
.fg-eyebrow--rust::before { background: currentColor; }

/* Dot before brass eyebrows replaced with paw-print silhouette */
.fg-eyebrow::before {
  background: currentColor;
  opacity: .7;
}

/* Section head — Manrope tight, dramatic */
.fg-section-head h2 {
  font-family: var(--fg-display) !important;
  font-size: clamp(40px, 6vw, 88px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  font-weight: 700 !important;
}
.fg-section-head h2 em {
  font-family: var(--fg-display-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--fg-rust);
  letter-spacing: -0.02em;
}
.fg-section-head .fg-eyebrow {
  font-family: var(--fg-mono) !important;
  font-size: 11px;
  letter-spacing: 0.16em !important;
  font-weight: 500;
}

/* ── Spotlight: huge italic number behind product image (dramatic) ── */
.fg-spotlight__num {
  font-size: clamp(100px, 14vw, 200px) !important;
  top: -20px !important;
  left: -10px !important;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}
.fg-spotlight__media {
  position: relative;
  z-index: 2;
}

/* ── Cinematic hero: huge type, overlapping accents ── */
.fg-hero__h1 {
  font-variation-settings: "opsz" 144, "SOFT" 20 !important;
}
.fg-hero__h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100 !important;
}

/* ── Manifesto: bigger italic numbers, brass diagonal accent ── */
.fg-manifesto__num {
  font-size: clamp(72px, 8vw, 120px) !important;
  position: relative;
}
.fg-manifesto__num::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 60%;
  height: 1px;
  background: var(--fg-rust);
  opacity: 0.5;
}

/* ── Brass dots between marquee items — make them paws ── */
.fg-marquee__track .fg-dot,
.fg-dot {
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23B58E5A'><ellipse cx='9' cy='11' rx='2.6' ry='3.4'/><ellipse cx='23' cy='11' rx='2.6' ry='3.4'/><ellipse cx='13' cy='6' rx='2.2' ry='3'/><ellipse cx='19' cy='6' rx='2.2' ry='3'/><path d='M16,15 C10,15 6,20 6,24 C6,27 8,28 10.5,28 C12.5,28 14,27 16,27 C18,27 19.5,28 21.5,28 C24,28 26,27 26,24 C26,20 22,15 16,15 Z'/></svg>") !important;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0 !important;
}

/* ── Tape effect (kraft tape stripe across editorial moments) ── */
.fg-tape {
  position: absolute;
  width: 110px;
  height: 28px;
  background: rgba(181, 142, 90, 0.35);
  border-left: 1px dashed rgba(181, 142, 90, 0.6);
  border-right: 1px dashed rgba(181, 142, 90, 0.6);
}
.fg-tape--top { top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.fg-tape--corner-tl { top: -10px; left: -20px; transform: rotate(-30deg); }
.fg-tape--corner-tr { top: -10px; right: -20px; transform: rotate(30deg); }

/* ── Pullquote refinement — bigger, more theatrical ── */
.fg-pullquote {
  font-size: clamp(32px, 5vw, 72px) !important;
  max-width: 18ch !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
}
.fg-pullquote em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ── Hero counter: number with handwritten "objects" label below ── */
.fg-hero__counter {
  font-size: clamp(64px, 7vw, 92px) !important;
  font-variation-settings: "opsz" 144, "SOFT" 30 !important;
}

/* Eyebrows: clean rule only (no paw print). Mungo & Maud restraint —
   ornament every section was reading as overdesigned. */
.fg-eyebrow:not(.fg-eyebrow--no-rule)::before {
  width: 24px !important;
  height: 1px !important;
  background: currentColor !important;
  background-image: none !important;
  opacity: 0.5 !important;
}

/* ============================================================
   AGGRESSIVE ASYMMETRY — break the balanced grid feel
   ============================================================ */

/* Trio: middle item dropped, third item lifted (broken horizontal) */
@media (min-width: 901px) {
  .fg-trio__item--2 { margin-top: 48px; }
  .fg-trio__item--3 { margin-top: -24px; }
  /* Tile 1 (the big feature) gets a small intentional rotate on hover */
  .fg-trio__item--1 .fg-trio__media {
    transform: rotate(-0.4deg);
    transition: transform .5s var(--fg-ease);
  }
  .fg-trio__item--1:hover .fg-trio__media { transform: rotate(0deg); }
}

/* Shop hero: first tile escapes baseline; collage gets random rotates */
@media (min-width: 901px) {
  .fg-shop-hero__tile--1 { transform: translateY(12px); }
  .fg-shop-hero__tile--2 { transform: rotate(0.5deg) translateY(-8px); }
  .fg-shop-hero__tile--3 { transform: rotate(-0.5deg); }
  .fg-shop-hero__tile--4 { transform: rotate(0.3deg) translateY(8px); }
  .fg-shop-hero__tile:hover {
    transform: translateY(-3px) rotate(0deg) !important;
  }
}

/* Reviews: card-stack effect — each card slightly rotated and offset */
@media (min-width: 901px) {
  .fg-review:nth-child(1) { transform: rotate(-0.5deg); }
  .fg-review:nth-child(2) { transform: rotate(0.3deg) translateY(20px); }
  .fg-review:nth-child(3) { transform: rotate(-0.2deg) translateY(-12px); }
}

/* Manifesto numbers escape their column on the right edge */
.fg-manifesto__num {
  position: relative;
  display: inline-block;
  margin-left: -8px;
}
@media (min-width: 800px) {
  .fg-manifesto__item:nth-child(2) .fg-manifesto__num { transform: translateY(14px); }
  .fg-manifesto__item:nth-child(3) .fg-manifesto__num { transform: translateY(-10px); }
}

/* Brand callout: photo overlaps the copy column by 40px */
@media (min-width: 901px) {
  .fg-callout {
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
  }
  .fg-callout__media {
    margin-right: -40px;
    z-index: 2;
    box-shadow: 0 24px 60px -20px rgba(17, 33, 27, 0.25);
  }
  .fg-callout__copy {
    padding-left: 64px;
    background: var(--fg-paper-soft);
    padding-right: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
    border-radius: 0 18px 18px 0;
    z-index: 1;
    max-width: none;
  }
}

/* Editorial-quote: signature floats outside the column */
@media (min-width: 801px) {
  .fg-editorial__sig {
    position: absolute;
    right: clamp(40px, 5vw, 80px);
    bottom: clamp(40px, 5vw, 60px);
    transform: rotate(-4deg);
    font-size: clamp(32px, 3.4vw, 44px) !important;
  }
  .fg-editorial { position: relative; }
}

/* Section padding rhythm — alternate sections compress vertical spacing
   so the page feels organic, not uniform 120px-everywhere */
.section:nth-child(odd):not(.section-tight) { padding-block-start: clamp(52px, 6vw, 96px); padding-block-end: clamp(52px, 6vw, 96px); }
.section:nth-child(even):not(.section-tight) { padding-block-start: clamp(52px, 6vw, 96px); padding-block-end: clamp(52px, 6vw, 96px); }

/* ============================================================
   PRODUCT-UI PATTERNS — modern e-commerce conventions
   ============================================================ */

/* Wishlist heart on product cards (top-left, opposite quick-add) */
.fg-wishlist {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  max-width: 36px;
  flex: 0 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fg-bone);
  border: 1px solid var(--fg-ink-line);
  cursor: pointer;
  color: var(--fg-ink);
  transition: all .25s var(--fg-ease);
  opacity: 0;
  transform: translateY(-4px);
}
.product-card:hover .fg-wishlist,
.card-product:hover .fg-wishlist,
.fg-trio__media:hover .fg-wishlist,
.product-card:focus-within .fg-wishlist,
.card-product:focus-within .fg-wishlist,
.fg-trio__media:focus-within .fg-wishlist,
.fg-wishlist:focus-visible,
.fg-wishlist.is-saved {
  opacity: 1;
  transform: translateY(0);
}
.fg-wishlist svg { width: 18px !important; height: 18px !important; flex: none; transition: transform .2s var(--fg-ease); }
.fg-wishlist:hover { background: var(--fg-rust); color: var(--fg-bone); border-color: var(--fg-rust); }
.fg-wishlist:hover svg { transform: scale(1.15); }
.fg-wishlist.is-saved {
  background: var(--fg-rust);
  color: var(--fg-bone);
  border-color: var(--fg-rust);
}
.fg-wishlist.is-saved svg { fill: currentColor; }

/* Stock count badge on product cards */
.fg-stock {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  background: var(--fg-ink);
  color: var(--fg-bone);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--fg-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fg-stock--low { background: var(--fg-rust); }
.fg-stock--out { background: var(--fg-ink-faint); }
.fg-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ED660;
  display: inline-block;
}
.fg-stock--low::before { background: var(--fg-ember); }
.fg-stock--out::before { background: var(--fg-bone); }

/* Sticky ATC bar on PDP (appears when scrolled past main product info) */
.fg-sticky-atc {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 120%);
  z-index: 100;
  background: var(--fg-ink);
  color: var(--fg-bone);
  padding: 12px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 40px -10px rgba(17, 33, 27, 0.4),
              0 4px 12px -2px rgba(17, 33, 27, 0.2);
  transition: transform .4s var(--fg-ease);
  max-width: 92vw;
  width: max-content;
}
.fg-sticky-atc.is-visible { transform: translate(-50%, 0); }
.fg-sticky-atc__thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fg-paper-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.fg-sticky-atc__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fg-sticky-atc__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fg-sticky-atc__title {
  font-family: var(--font-heading--family);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.fg-sticky-atc__price {
  font-family: var(--fg-mono);
  font-size: 12px;
  color: var(--fg-brass);
  letter-spacing: -0.02em;
}
.fg-sticky-atc__btn {
  background: var(--fg-rust);
  color: var(--fg-bone);
  border: 0;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body--family);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--fg-ease);
}
.fg-sticky-atc__btn:hover { background: var(--fg-rust-deep); }
@media (max-width: 560px) {
  .fg-sticky-atc__title { max-width: 100px; font-size: 12px; }
  .fg-sticky-atc__btn { padding: 10px 16px; font-size: 11px; }
}

/* ATC pulse on click */
@keyframes fgAtcPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.product-form__submit.is-pulsing,
button[name="add"].is-pulsing {
  animation: fgAtcPulse .4s var(--fg-ease);
}

/* ── Cart drawer override (FG Paws styling on Horizon's drawer) ── */
cart-drawer-component,
.cart-drawer {
  --color-background: var(--fg-paper);
  --color-foreground: var(--fg-ink);
}
.cart-drawer__header,
[data-cart-drawer] .drawer__header {
  border-bottom: 1px solid var(--fg-ink-line);
  padding: clamp(20px, 3vw, 28px);
}
.cart-drawer__header h2,
.cart-drawer h2,
[data-cart-drawer] h2 {
  font-family: var(--font-heading--family);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 380;
  color: var(--fg-ink);
  margin: 0;
}
.cart-drawer__items, .cart-items {
  background: var(--fg-paper);
}
.cart-drawer__footer, .cart__footer {
  background: var(--fg-paper-soft);
  border-top: 1px solid var(--fg-ink-line);
  padding: clamp(20px, 3vw, 28px);
}
.cart-drawer .price, .cart .price {
  font-family: var(--font-heading--family);
  font-weight: 400;
  color: var(--fg-ink);
}
.cart-drawer .button[type="submit"],
.cart .button[type="submit"],
button[name="checkout"] {
  background: var(--fg-rust) !important;
  color: var(--fg-bone) !important;
  border-color: var(--fg-rust) !important;
  font-family: var(--font-body--family);
  letter-spacing: 0.06em;
  text-transform: none;
}
button[name="checkout"]:hover {
  background: var(--fg-rust-deep) !important;
  border-color: var(--fg-rust-deep) !important;
}

/* Cart shipping progress (built into drawer top) */
.fg-cart-progress {
  background: var(--fg-paper-soft);
  border: 1px solid var(--fg-ink-line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--fg-ink-faint);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fg-cart-progress strong { color: var(--fg-ink); font-weight: 500; }
.fg-cart-progress__bar {
  height: 4px;
  background: var(--fg-ink-line);
  border-radius: 999px;
  overflow: hidden;
}
.fg-cart-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--fg-rust);
  border-radius: 999px;
  transition: width .5s var(--fg-ease);
}
.fg-cart-progress--unlocked .fg-cart-progress__fill { background: var(--fg-moss); }

/* ── Header: COMPRESSED + SOLID (was 100px+, now ~56px) ──
   Justin: "header is too large and blocking the images" */
header-component {
  background: var(--fg-paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--fg-ink-line);
  transition: box-shadow .3s var(--fg-ease);
  min-height: 0 !important;
}
header-component .header__row--top,
header-component .header__row,
header-component .header__inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
}
header-component .header-section {
  padding: 0 !important;
}
/* Logo: smaller */
header-component .logo,
header-component .header__heading,
header-component .header__heading-link img {
  max-height: 28px !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  font-family: var(--fg-display) !important;
}
/* Nav text: smaller, tighter */
header-component nav a,
header-component .header__menu a {
  font-family: var(--fg-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  padding: 6px 10px !important;
}
/* Icon buttons: smaller */
header-component button,
header-component .header__icons button,
header-component .icon-btn {
  width: 36px !important;
  height: 36px !important;
}
header-component svg { width: 18px !important; height: 18px !important; }
header-component.is-scrolled {
  box-shadow: 0 6px 24px -16px rgba(17, 33, 27, 0.15);
}
header-component[transparent],
header-component[transparent].is-scrolled {
  background: var(--fg-paper) !important;
  color: var(--fg-ink) !important;
  min-height: 0 !important;
}
header-component[transparent] a,
header-component[transparent] .header__heading,
header-component[transparent] button {
  color: var(--fg-ink) !important;
}
.header__row--top,
.header__row {
  padding-top: clamp(14px, 1.8vw, 22px);
  padding-bottom: clamp(14px, 1.8vw, 22px);
}
header-component a {
  font-family: var(--font-body--family);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 13px;
}
header-component nav a {
  position: relative;
}
header-component nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--fg-ease);
}
header-component nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* Header logo refinement */
header-component .logo,
.header__heading {
  font-family: var(--font-heading--family);
  font-weight: 350;
  letter-spacing: 0.04em;
}
header-component .logo svg,
header-component .logo img {
  transition: transform .35s var(--fg-ease);
}
header-component .logo:hover svg,
header-component .logo:hover img {
  transform: scale(1.04);
}

/* Mobile drawer override */
.drawer-menu,
.menu-drawer {
  background: var(--fg-paper);
  border-right: 1px solid var(--fg-ink-line);
}
.drawer-menu a, .menu-drawer a {
  font-family: var(--font-heading--family);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 380;
  color: var(--fg-ink);
}

/* ── Free shipping progress bar (cart) ── */
.fg-shipping-progress {
  background: var(--fg-paper-soft);
  border: 1px solid var(--fg-ink-line);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--fg-ink-faint);
}
.fg-shipping-progress__bar {
  height: 4px;
  background: var(--fg-ink-line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.fg-shipping-progress__fill {
  height: 100%;
  background: var(--fg-rust);
  border-radius: 999px;
  transition: width .4s var(--fg-ease);
}
.fg-shipping-progress--unlocked .fg-shipping-progress__fill {
  background: var(--fg-moss);
}