:root {
  --f420-orange: #ff5100;
  --f420-logo-yellow: #f7e100;
  --f710-yellow: #fcc629;
  --f710-blue: #29a8e0;
  --f420-ink: #111111;
  --f420-charcoal: #1a1a1a;
  --f420-dark: #292929;
  --f420-medium: #5f5f5f;
  --f420-muted: #767676;
  --f420-border: #e6e6e6;
  --f420-border-strong: #d4d4d4;
  --f420-surface: #f4f4f4;
  --f420-surface-light: #fafafa;
  --f420-white: #ffffff;
  --f420-soft-orange: #fff1eb;
  --f420-soft-yellow: #fff7d8;
  --f420-soft-blue: #eaf7fc;
  --f420-success: #087a46;
  --f420-error: #b42318;
  --f420-warning: #8a5700;
  --f420-container: 80rem;
  --f420-wide: 90rem;
  --f420-display: 100rem;
  --f420-reading: 46rem;
  --f420-header: 76px;
  --f420-mobile-header: 64px;
  --f420-mobile-bar: 56px;
  --f420-radius: 8px;
  --f420-shadow: 0 8px 24px rgba(0,0,0,.12);
  --f420-font-display: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --f420-font-body: Arial, Helvetica, sans-serif;
  --f420-ease: cubic-bezier(.2,0,0,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--f420-header) + 20px); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--f420-white);
  color: var(--f420-ink);
  font-family: var(--f420-font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
body.f420-menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .35em;
  font-family: var(--f420-font-display);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.028em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); }
h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); }
h3 { font-size: clamp(1.65rem, 2.9vw, 2.6rem); }
h4 { font-size: clamp(1.35rem, 2vw, 1.9rem); }
p { margin: 0 0 1.15em; }
strong { font-weight: 800; }

.f420-top-rule { height: 5px; background: var(--f420-orange); }
.f420-container { width: min(var(--f420-container), calc(100% - clamp(32px, 7vw, 96px))); margin-inline: auto; }
.f420-container--wide { width: min(var(--f420-wide), calc(100% - clamp(32px, 6vw, 80px))); margin-inline: auto; }
.f420-reading { max-width: var(--f420-reading); }
.f420-main { min-height: 50vh; overflow: clip; }
.f420-section { padding-block: clamp(64px, 8vw, 120px); position: relative; }
.f420-section--tight { padding-block: clamp(48px, 6vw, 80px); }
.f420-section--soft { background: var(--f420-surface-light); }
.f420-section--orange-soft { background: var(--f420-soft-orange); }
.f420-section--dark { background: var(--f420-charcoal); color: var(--f420-white); }
.f420-section--orange { background: var(--f420-orange); color: var(--f420-white); }
.f420-section--yellow { background: var(--f710-yellow); color: var(--f420-ink); }
.f420-section--blue { background: var(--f710-blue); color: var(--f420-ink); }
.f420-section--gradient { background: linear-gradient(130deg, #ff5100 0%, #ff7b1a 55%, #ef2e2e 100%); color: #fff; }
.f420-copy { max-width: 680px; }
.f420-lead { font-size: clamp(1.1rem, 1.65vw, 1.38rem); line-height: 1.45; color: #303236; }
.f420-section--dark .f420-lead, .f420-section--orange .f420-lead, .f420-section--gradient .f420-lead { color: inherit; }
.f420-kicker { display: block; font-family: var(--f420-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.f420-accent { color: var(--f420-orange); }
.f420-accent-yellow { color: var(--f710-yellow); }
.f420-accent-blue { color: var(--f710-blue); }
.f420-eyebrow { margin: 0 0 14px; font-family: var(--f420-font-display); font-size: .9rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.f420-eyebrow--orange { color: var(--f420-orange); }
.f420-eyebrow--yellow { color: var(--f710-yellow); }
.f420-eyebrow--blue { color: var(--f710-blue); }
.f420-eyebrow--white { color: var(--f420-white); }
.f420-center { text-align: center; }
.f420-center .f420-copy { margin-inline: auto; }
.f420-section-heading { max-width: 900px; margin: 0 auto clamp(34px, 5vw, 64px); text-align: center; }
.f420-section-heading p { max-width: 720px; margin-inline: auto; }

.f420-skip-link {
  position: fixed; left: 16px; top: 10px; z-index: 1000;
  transform: translateY(-180%); padding: 12px 18px; background: #fff; border: 3px solid #000; font-weight: 800;
}
.f420-skip-link:focus { transform: translateY(0); }

.f420-site-header {
  position: sticky; top: 0; z-index: 40; height: var(--f420-header); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--f420-border); backdrop-filter: blur(10px);
}
.f420-header-inner { height: 100%; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 22px; }
.f420-brand { display: inline-flex; align-items: center; min-width: 0; }
.f420-brand__logo { width: 132px; max-height: 52px; object-fit: contain; }
.f420-desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.65vw, 26px); min-width: 0; }
.f420-desktop-nav > a, .f420-brands-disclosure > summary {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; font-family: var(--f420-font-display); font-size: clamp(.68rem, .78vw, .86rem); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.f420-desktop-nav > a:hover, .f420-desktop-nav > a:focus-visible, .f420-brands-disclosure > summary:hover, .f420-brands-disclosure > summary:focus-visible { color: var(--f420-orange); }
.f420-brands-disclosure { position: relative; }
.f420-brands-disclosure > summary { list-style: none; }
.f420-brands-disclosure > summary::-webkit-details-marker { display: none; }
.f420-brands-disclosure > summary::after { content: "⌄"; margin-left: 4px; font-size: .8em; }
.f420-brands-panel { position: absolute; left: -14px; top: calc(100% + 8px); width: 220px; padding: 10px; background: #fff; border: 1px solid var(--f420-border-strong); box-shadow: var(--f420-shadow); }
.f420-brands-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-bottom: 1px solid var(--f420-border); font-family: var(--f420-font-display); font-size: .86rem; font-weight: 900; text-transform: uppercase; }
.f420-brands-panel a:last-child { border-bottom: 0; }
.f420-header-actions { display: flex; align-items: center; gap: 8px; }
.f420-header-actions .f420-btn { min-height: 44px; padding-inline: 14px; font-size: .72rem; }
.f420-menu-toggle { display: none; align-items: center; gap: 9px; min-width: 88px; min-height: 48px; justify-content: flex-end; border: 0; background: transparent; font-family: var(--f420-font-display); font-weight: 900; font-size: .8rem; cursor: pointer; }
.f420-menu-icon, .f420-menu-icon::before, .f420-menu-icon::after { width: 26px; height: 2px; background: var(--f420-ink); display: block; position: relative; }
.f420-menu-icon::before, .f420-menu-icon::after { content: ""; position: absolute; left: 0; }
.f420-menu-icon::before { top: -7px; }
.f420-menu-icon::after { top: 7px; }

.f420-mobile-nav { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); opacity: 0; transition: opacity 160ms var(--f420-ease); }
.f420-mobile-nav.is-open { opacity: 1; }
.f420-mobile-nav__panel { margin-left: auto; width: min(100%, 430px); height: 100%; display: flex; flex-direction: column; background: var(--f420-charcoal); color: #fff; padding: max(20px, env(safe-area-inset-top)) 24px calc(18px + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform 240ms var(--f420-ease); overflow-y: auto; }
.f420-mobile-nav.is-open .f420-mobile-nav__panel { transform: translateX(0); }
.f420-mobile-nav__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #444; }
.f420-mobile-nav__logo { width: 124px; }
.f420-mobile-nav__close { min-height: 44px; border: 0; background: none; color: #fff; font-family: var(--f420-font-display); font-size: .8rem; font-weight: 900; cursor: pointer; }
.f420-mobile-nav nav { display: flex; flex-direction: column; padding: 18px 0 24px; }
.f420-mobile-nav nav a, .f420-mobile-nav__group { min-height: 42px; display: flex; align-items: center; font-family: var(--f420-font-display); font-size: 1.22rem; line-height: 1; font-weight: 900; text-transform: uppercase; }
.f420-mobile-nav nav a.is-child { min-height: 32px; padding-left: 18px; font-size: .82rem; color: #d4d4d4; }
.f420-mobile-nav__group { border-left: 4px solid var(--f420-orange); padding-left: 8px; }
.f420-mobile-nav__actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.f420-mobile-nav__actions .f420-btn { font-size: .72rem; padding-inline: 8px; }

.f420-btn {
  min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 2px solid var(--f420-ink); border-radius: 4px; font-family: var(--f420-font-display); font-size: .82rem; font-weight: 900; letter-spacing: .025em; line-height: 1; text-align: center; text-transform: uppercase; transition: transform 100ms var(--f420-ease), box-shadow 160ms var(--f420-ease), background 160ms var(--f420-ease), color 160ms var(--f420-ease); cursor: pointer;
}
.f420-btn:hover { transform: translateY(-1px); }
.f420-btn:active { transform: translateY(1px); }
.f420-btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--f710-blue); outline-offset: 3px; }
.f420-btn--primary { background: var(--f420-orange); border-color: var(--f420-orange); color: #fff; }
.f420-btn--dark { background: var(--f420-ink); border-color: var(--f420-ink); color: #fff; }
.f420-btn--light { background: #fff; border-color: #fff; color: #000; }
.f420-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.f420-btn--accent { background: var(--f710-yellow); border-color: var(--f710-yellow); color: #000; }
[data-route-status="pending"] { cursor: not-allowed; opacity: .72; }
[data-route-status="pending"]::after { content: none; display: none; }
.is-pending-pulse { animation: f420-pending-pulse 420ms ease; }
@keyframes f420-pending-pulse { 50% { transform: scale(.97); box-shadow: 0 0 0 4px rgba(180,35,24,.25); } }
.f420-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.f420-mobile-bar { display: none; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-height: calc(var(--f420-mobile-bar) + env(safe-area-inset-bottom)); grid-template-columns: 1fr 1fr; background: var(--f420-charcoal); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px rgba(0,0,0,.16); }
.f420-mobile-bar .f420-btn { border-radius: 0; border: 0; min-height: var(--f420-mobile-bar); padding-inline: 8px; font-size: .7rem; }
.f420-mobile-bar[aria-hidden="true"] { display: none !important; }

.f420-site-footer { background: var(--f420-charcoal); color: #fff; padding: clamp(48px, 6vw, 78px) 0 calc(24px + env(safe-area-inset-bottom)); border-top: 5px solid var(--f420-orange); }
.f420-footer-grid { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(120px, 1fr)); gap: clamp(24px, 4vw, 52px); }
.f420-footer-logo-wrap { min-height: 82px; display: flex; align-items: center; margin-bottom: 22px; }
.f420-footer-logo { display: block; width: min(220px, 100%); max-height: 72px; object-fit: contain; object-position: left center; }
.f420-footer-brand p { max-width: 340px; color: #cfcfcf; font-size: .9rem; }
.f420-footer-grid h2 { color: var(--f710-yellow); font-size: .8rem; letter-spacing: .08em; margin-bottom: 16px; }
.f420-footer-grid > div:not(.f420-footer-brand) a { display: block; min-height: 32px; font-size: .84rem; color: #eee; }
.f420-footer-grid a:hover, .f420-footer-grid a:focus-visible { color: var(--f710-yellow); }
.f420-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.f420-footer-actions .f420-btn { font-size: .7rem; }
.f420-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 18px; border-top: 1px solid #444; color: #bbb; font-size: .74rem; }
.f420-footer-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.f420-footer-utility a { color: inherit; text-underline-offset: 3px; }
.f420-footer-utility a:hover, .f420-footer-utility a:focus-visible { text-decoration: underline; }
.f420-utility-page { padding: 56px 0 64px; }
.f420-utility-copy { max-width: 860px; margin: 0 auto; font-size: 1rem; line-height: 1.65; }
.f420-utility-copy h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.05; margin: 0 0 24px; }
.f420-utility-copy h2 { font-size: 1.5rem; line-height: 1.2; margin: 28px 0 10px; }
.f420-utility-copy p { margin: 0 0 16px; }
.f420-utility-copy .f420-utility-effective {
    margin-top: 34px;
    color: #68717e;
    font-size: .85rem;
}
.f420-home-signup { padding: 48px 0 56px; background: var(--f420-orange, #ff5000); color: #fff; }
.f420-home-signup__inner { display: grid; grid-template-columns: max-content max-content; justify-content: center; align-items: center; gap: 40px; }
.f420-home-signup h2 { margin: 0 !important; color: inherit; font-size: 3rem !important; line-height: 1.1; }
.f420-home-signup__form { width: 100%; max-width: 560px; }
.f420-home-signup__form form { position: static !important; display: flex !important; flex-wrap: nowrap !important; align-items: center; width: max-content !important; max-width: 100% !important; gap: 4px !important; margin: 0; padding: 0 !important; }
.f420-home-signup__form form p { display: flex !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.f420-home-signup__controls { display: flex !important; flex-wrap: nowrap; align-items: flex-start; gap: 4px; width: max-content; max-width: 100%; }
.f420-home-signup__email-column { display: flex; flex: 0 0 auto; flex-direction: column; width: auto; min-width: 0; }
.f420-home-signup__controls > p { display: block !important; width: auto !important; margin: 0 !important; }
.f420-home-signup__email-column > p { display: flex !important; width: auto !important; max-width: none !important; margin: 0 !important; }
/* The message fills the email column without contributing to its intrinsic width. */
.f420-home-signup__email-column > .mc4wp-response { contain: inline-size; width: 0; min-width: 100%; max-width: 100%; margin: 8px 0 0; color: #fff; line-height: 1.35; overflow-wrap: anywhere; }
.f420-home-signup__form label { display: flex; align-items: center; flex: 1 1 auto; gap: 12px; color: #fff; font-size: .9rem; font-weight: 700; }
.f420-home-signup__form input[type="email"] { display: block; width: 260px !important; max-width: 260px !important; min-height: 46px; min-width: 0; border: 0; border-radius: 3px; padding: 0 14px; color: #171717; background: #fff; font: inherit; }
.f420-home-signup__form input[type="submit"], .f420-home-signup__form button { position: static !important; width: 100px !important; min-height: 46px; margin: 0 !important; border: 0; border-radius: 3px; padding: 0; background: #171717; color: #fff; font: 700 .9rem/1 inherit; letter-spacing: .04em; cursor: pointer; }
.f420-home-signup__form .mc4wp-response { margin-top: 10px; color: #fff; }
@media (max-width: 700px) {
    .f420-home-signup { padding: 36px 0 40px; }
    .f420-home-signup__inner { display: block; }
    .f420-home-signup h2 { margin-bottom: 20px; }
    .f420-home-signup__form form { display: block !important; width: 100% !important; max-width: none !important; }
    .f420-home-signup__form form p { display: block; }
    .f420-home-signup__form label { display: block; }
    .f420-home-signup__controls { display: block !important; width: 100%; }
    .f420-home-signup__email-column { flex: none; width: 100%; }
    .f420-home-signup__email-column > .mc4wp-response { width: 100%; max-width: 100%; margin-top: 10px; }
    .f420-home-signup__controls > p,
    .f420-home-signup__controls label { width: 100% !important; }
    .f420-home-signup__form input[type="email"], .f420-home-signup__form input[type="submit"], .f420-home-signup__form button { width: 100% !important; }
    .f420-home-signup__form input[type="email"] { max-width: 100% !important; flex: none; }
    .f420-home-signup__form input[type="submit"], .f420-home-signup__form button { position: static !important; width: 100% !important; margin-top: 10px !important; }
}
.f420-utility-copy a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .f420-utility-page { padding: 32px 0 40px; } }

.f420-hero { position: relative; min-height: clamp(640px, 62vw, 840px); display: flex; align-items: center; overflow: hidden; }
.f420-hero::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -80px; height: 175px; background: var(--hero-accent, var(--f420-orange)); transform: skewY(-3deg); z-index: 0; }
.f420-hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; position: relative; z-index: 2; padding-block: clamp(54px, 7vw, 96px) clamp(120px, 13vw, 180px); }
.f420-hero__copy { max-width: 660px; }
.f420-hero__copy h1 { max-width: 800px; }
.f420-hero__copy p { max-width: 610px; }
.f420-hero__stage { min-height: 520px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.f420-hero__shape { position: absolute; inset: 0 -15% -4% 8%; border-radius: 46% 0 0 46%; background: linear-gradient(145deg, var(--hero-accent, var(--f420-orange)), var(--hero-accent-2, #ff8b42)); }
.f420-product-stage { position: relative; z-index: 2; width: 100%; height: 520px; display: flex; align-items: flex-end; justify-content: center; }
.f420-product-stage img { position: absolute; bottom: 10px; width: auto; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(0,0,0,.22)); }
.f420-product-stage .p1 { height: 92%; z-index: 5; left: 38%; }
.f420-product-stage .p2 { height: 74%; z-index: 3; left: 5%; transform: rotate(-3deg); }
.f420-product-stage .p3 { height: 78%; z-index: 4; left: 24%; transform: rotate(-1deg); }
.f420-product-stage .p4 { height: 74%; z-index: 4; right: 14%; transform: rotate(3deg); }
.f420-product-stage .p5 { height: 69%; z-index: 2; right: -1%; transform: rotate(5deg); }
.f420-product-stage--pair .p1 { height: 82%; left: 15%; }
.f420-product-stage--pair .p2 { height: 82%; left: auto; right: 12%; }
.f420-product-stage--single .p1 { height: 92%; left: 50%; transform: translateX(-50%); }
.f420-product-stage--support .p1 { height: 90%; left: 27%; }
.f420-product-stage--support .p2 { height: 62%; left: auto; right: 14%; }
.f420-hero--710 { --hero-accent: var(--f710-yellow); --hero-accent-2: #ffe35d; }
.f420-hero--710 .f420-hero__shape { background: linear-gradient(145deg, #111 0%, #2c2c2c 68%, var(--f710-yellow) 68%); }
.f420-hero--bling { --hero-accent: var(--f420-orange); --hero-accent-2: #ff7540; }
.f420-hero--smog { --hero-accent: var(--f420-orange); --hero-accent-2: #1d54a6; }
.f420-hero--story { --hero-accent: var(--f420-orange); --hero-accent-2: #ef2e2e; }
.f420-hero--routing { --hero-accent: var(--f420-orange); --hero-accent-2: #f7e100; }
.f420-hero--wholesale { --hero-accent: var(--f710-yellow); --hero-accent-2: #222; background: #111; color: #fff; }
.f420-hero--wholesale .f420-lead { color: #eee; }

.f420-proof-strip { position: relative; z-index: 5; background: #fff; }
.f420-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--f420-border-strong); border-radius: 12px; overflow: hidden; transform: translateY(-44px); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.f420-proof { min-height: 138px; padding: 24px; border-right: 1px solid var(--f420-border); }
.f420-proof:last-child { border-right: 0; }
.f420-proof__icon { width: 24px; height: 24px; display: block; border: 2px solid var(--f420-orange); border-radius: 50%; margin-bottom: 12px; }
.f420-proof strong { display: block; font-family: var(--f420-font-display); font-size: 1rem; line-height: 1.08; text-transform: uppercase; }
.f420-proof p { margin: 7px 0 0; color: var(--f420-medium); font-size: .78rem; line-height: 1.4; }
.f420-proof-strip--yellow .f420-proof__icon { border-color: var(--f710-yellow); }
.f420-proof-strip--blue .f420-proof__icon { border-color: var(--f710-blue); }

.f420-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 86px); align-items: center; }
.f420-split--reverse .f420-copy { order: 2; }
.f420-split--reverse .f420-media-card { order: 1; }
.f420-split--balanced { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.f420-media-card { min-height: 440px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--f420-border); background: #fff; }
.f420-media-card--orange { background: linear-gradient(145deg, #ef2e2e, var(--f420-orange) 62%, #ff9d19); }
.f420-media-card--dark { background: var(--f420-charcoal); }
.f420-media-card--soft { background: var(--f420-surface-light); }
.f420-media-card__image { max-height: 520px; width: auto; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.18)); }
.f420-media-card--wide { aspect-ratio: 16/10; min-height: 0; }
.f420-media-card--square { aspect-ratio: 1; min-height: 0; }
.f420-media-placeholder { min-height: 320px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--f420-border-strong); background: repeating-linear-gradient(135deg,#fafafa,#fafafa 12px,#f4f4f4 12px,#f4f4f4 24px); color: var(--f420-medium); text-align: center; padding: 30px; }
.f420-media-placeholder span { font-family: var(--f420-font-display); font-size: 1.2rem; font-weight: 900; letter-spacing: .04em; }
.f420-media-placeholder small { font-size: .72rem; letter-spacing: .08em; }

.f420-product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.f420-product-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 38px); }
.f420-product-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.f420-product-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.f420-product-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--f420-border); overflow: hidden; }
.f420-product-card::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 6px; background: var(--product-accent); }
.f420-product-card__media { min-height: 310px; display: flex; align-items: flex-end; justify-content: center; padding: 24px 14px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--product-accent) 10%, white), #fff 80%); }
.f420-product-card__image { width: auto; height: 290px; object-fit: contain; filter: drop-shadow(0 13px 12px rgba(0,0,0,.14)); }
.f420-product-card__body { flex: 1; padding: 20px; }
.f420-product-code { display: block; margin-bottom: 4px; color: var(--product-accent); font-family: var(--f420-font-display); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.f420-product-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.f420-product-card p { font-size: .88rem; color: #383b3f; }
.f420-product-tag { padding-left: 8px; border-left: 3px solid var(--product-accent); font-family: var(--f420-font-display); font-weight: 900; font-size: .72rem !important; letter-spacing: .04em; text-transform: uppercase; color: var(--product-accent) !important; }
.f420-product-highlight { margin: -2px 0 10px; color: var(--f420-orange) !important; font-family: var(--f420-font-display); font-size: .72rem !important; font-weight: 900; letter-spacing: .035em; line-height: 1.15; text-transform: uppercase; }
.f420-product-facts { margin-top: auto; font-weight: 800; color: var(--f420-ink) !important; }
.f420-product-card--dark { background: var(--f420-dark); color: #fff; border-color: #444; }
.f420-product-card--dark .f420-product-card__media { background: #1f1f1f; }
.f420-product-card--dark p, .f420-product-card--dark .f420-product-facts { color: #eee !important; }

.f420-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #111; border-radius: 12px; }
.f420-comparison__item { min-width: 0; background: #292929; color: #fff; padding: clamp(24px, 4vw, 54px); border-top: 7px solid var(--comparison-accent); }
.f420-comparison__media { min-height: 390px; display: flex; align-items: center; justify-content: center; }
.f420-comparison__media img { max-height: 370px; width: auto; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.38)); }
.f420-comparison__item p { color: #eee; }
.f420-comparison__facts { padding-top: 18px; border-top: 1px solid #555; font-size: .88rem; }

.f420-accessory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--f420-border-strong); }
.f420-accessory-item { min-height: 220px; padding: 24px; border-right: 1px solid var(--f420-border); border-bottom: 1px solid var(--f420-border); }
.f420-accessory-item:nth-child(4n) { border-right: 0; }
.f420-accessory-item__mark { width: 70px; height: 62px; margin-bottom: 22px; border: 2px solid var(--accessory-accent, var(--f420-orange)); border-top-width: 8px; background: #fff; }
.f420-accessory-item h3 { font-size: 1.3rem; }
.f420-accessory-item p { font-size: .86rem; color: var(--f420-medium); }

.f420-brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--f420-border); border: 1px solid var(--f420-border); }
.f420-brand-card { min-height: 410px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 20px; padding: clamp(28px, 4vw, 58px); background: #fff; }
.f420-brand-card__media { min-height: 290px; display: flex; align-items: center; justify-content: center; }
.f420-brand-card__media img { max-height: 300px; width: auto; object-fit: contain; filter: drop-shadow(0 15px 16px rgba(0,0,0,.16)); }
.f420-brand-card--bling { border-top: 5px solid #f0bb1a; }
.f420-brand-card--smog { border-top: 5px solid #14804f; }

.f420-route-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--f420-border); }
.f420-route-panel { min-height: 390px; padding: clamp(34px, 5vw, 64px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.f420-route-panel h3 { font-size: clamp(2rem, 3.5vw, 3.4rem); }
.f420-route-panel p { max-width: 520px; }
.f420-route-panel--online { background: var(--f420-charcoal); color: #fff; }
.f420-route-panel--local { background: var(--f420-soft-orange); border-left: 6px solid var(--f420-orange); color: var(--f420-ink); }
.f420-local-instruction { margin: 20px 0 0 !important; padding-top: 12px; border-top: 2px solid currentColor; font-family: var(--f420-font-display); font-size: .76rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }

.f420-authority-band { background: var(--f710-yellow); padding-block: clamp(46px, 7vw, 90px); text-align: center; }
.f420-authority-band h2 { margin: 0; color: #000; }
.f420-authority-band--orange { background: var(--f420-orange); color: #fff; }
.f420-authority-band--orange h2 { color: #fff; }
.f420-authority-card { padding: clamp(34px, 4vw, 56px); background: #111; color: #fff; border-radius: 12px; }
.f420-authority-card small { display: block; color: var(--f710-yellow); font-family: var(--f420-font-display); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.f420-authority-card strong { display: block; margin-top: 14px; font-family: var(--f420-font-display); font-size: clamp(2rem, 4vw, 4rem); line-height: .95; text-transform: uppercase; }
.f420-authority-list { display: grid; gap: 14px; }
.f420-authority-list div { padding: 18px 20px; border-left: 5px solid var(--f420-orange); background: #fff; border-top: 1px solid var(--f420-border); border-right: 1px solid var(--f420-border); border-bottom: 1px solid var(--f420-border); font-family: var(--f420-font-display); font-weight: 900; text-transform: uppercase; }

.f420-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.f420-process-step { min-height: 160px; padding: 22px; background: #fff; border: 1px solid var(--f420-border); border-top: 5px solid var(--f420-orange); }
.f420-process-step span { display: block; margin-bottom: 8px; color: var(--f420-orange); font-family: var(--f420-font-display); font-weight: 900; font-size: .72rem; letter-spacing: .08em; }
.f420-process-step h3 { font-size: 1.5rem; }
.f420-process-step p { margin: 0; font-size: .84rem; }

.f420-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.f420-size-card { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 30px; border: 1px solid var(--f420-border); border-top: 5px solid var(--size-accent, var(--f420-orange)); background: #fff; text-align: center; }
.f420-size-card__media { height: 250px; display: flex; align-items: flex-end; justify-content: center; }
.f420-size-card__media img { width: auto; max-height: 240px; object-fit: contain; filter: drop-shadow(0 13px 12px rgba(0,0,0,.15)); }
.f420-size-card--medium .f420-size-card__media img { max-height: 190px; }
.f420-size-card--small .f420-size-card__media img { max-height: 145px; }
.f420-size-card h3 { margin-top: 18px; }
.f420-size-card p { margin-bottom: 0; color: var(--f420-medium); font-size: .88rem; }

.f420-story-stack { display: grid; gap: 1px; background: var(--f420-border); border: 1px solid var(--f420-border); }
.f420-story-section { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); background: #fff; min-height: 520px; }
.f420-story-section:nth-child(even) .f420-story-media { order: 2; }
.f420-story-copy { padding: clamp(40px, 6vw, 82px); display: flex; flex-direction: column; justify-content: center; }
.f420-story-media { min-height: 440px; display: flex; align-items: center; justify-content: center; background: var(--f420-surface-light); overflow: hidden; }
.f420-story-media img { max-height: 480px; width: auto; object-fit: contain; }
.f420-story-media--dark { background: #111; }
.f420-story-media--orange { background: linear-gradient(145deg, #ef2e2e, var(--f420-orange)); }
.f420-story-media--orange img { filter: drop-shadow(0 20px 18px rgba(0,0,0,.2)); }
.f420-history-note { display: inline-block; margin-top: 18px; padding: 10px 12px; background: var(--f420-soft-yellow); border-left: 4px solid var(--f710-yellow); font-size: .78rem; }

.f420-wholesale-teaser { background: #f6f6f3; }
.f420-wholesale-teaser .f420-media-card { min-height: 390px; }
.f420-wholesale-teaser .f420-media-card__image { max-height: 340px; }
.f420-wholesale-router { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.f420-wholesale-route { min-height: 260px; padding: 28px; border: 1px solid var(--f420-border-strong); background: #fff; }
.f420-wholesale-route h3 { font-size: 1.7rem; }
.f420-wholesale-route .f420-btn { width: 100%; margin-top: 12px; }
.f420-wholesale-contact-shell { background: var(--f420-surface-light); border: 1px solid var(--f420-border); padding: clamp(28px, 5vw, 64px); }

.f420-admin-note { max-width: var(--f420-container); margin: 24px auto; padding: 14px 18px; border: 2px solid var(--f420-warning); background: #fff8df; color: #523400; font-size: .85rem; }
.f420-utility-hero { min-height: 50vh; display: flex; align-items: center; padding-block: clamp(80px, 10vw, 150px); }

@media (max-width: 1179px) {
  :root { --f420-header: var(--f420-mobile-header); }
  .f420-header-inner { grid-template-columns: 1fr auto; }
  .f420-brand__logo { width: 126px; }
  .f420-desktop-nav, .f420-header-actions { display: none; }
  .f420-menu-toggle { display: inline-flex; }
  .f420-footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .f420-footer-grid > div:nth-child(4), .f420-footer-grid > div:nth-child(5) { margin-top: 10px; }
  .f420-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .f420-product-grid .f420-product-card:nth-child(n+4) { }
  .f420-accessory-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .f420-accessory-item:nth-child(4n) { border-right: 1px solid var(--f420-border); }
  .f420-accessory-item:nth-child(3n) { border-right: 0; }
}

@media (max-width: 900px) {
  body { padding-bottom: calc(var(--f420-mobile-bar) + env(safe-area-inset-bottom)); }
  .f420-mobile-bar { display: grid; }
  .f420-site-footer { padding-bottom: calc(42px + var(--f420-mobile-bar) + env(safe-area-inset-bottom)); }
  .f420-hero { min-height: auto; }
  .f420-hero::after { height: 110px; bottom: -55px; }
  .f420-hero__grid { grid-template-columns: 1fr; padding-top: 46px; padding-bottom: 110px; }
  .f420-hero__copy { max-width: none; }
  .f420-hero__stage { min-height: 430px; }
  .f420-product-stage { height: 420px; }
  .f420-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f420-proof:nth-child(2) { border-right: 0; }
  .f420-proof:nth-child(-n+2) { border-bottom: 1px solid var(--f420-border); }
  .f420-split, .f420-split--balanced { grid-template-columns: 1fr; }
  .f420-split--reverse .f420-copy, .f420-split--reverse .f420-media-card { order: initial; }
  .f420-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .f420-product-grid--three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .f420-product-grid--four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .f420-comparison { grid-template-columns: 1fr; }
  .f420-accessory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .f420-accessory-item:nth-child(3n) { border-right: 1px solid var(--f420-border); }
  .f420-accessory-item:nth-child(2n) { border-right: 0; }
  .f420-brand-grid, .f420-route-split { grid-template-columns: 1fr; }
  .f420-route-panel--local { border-left: 0; border-top: 6px solid var(--f420-orange); }
  .f420-story-section { grid-template-columns: 1fr; }
  .f420-story-section:nth-child(even) .f420-story-media { order: initial; }
  .f420-story-copy { order: 2; }
  .f420-story-media { min-height: 360px; }
  .f420-wholesale-router { grid-template-columns: 1fr; }
  .f420-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .f420-footer-brand { grid-column: 1 / -1; }
  .f420-footer-logo-wrap { min-height: 68px; margin-bottom: 18px; }
  .f420-footer-logo { width: min(190px, 100%); max-height: 62px; }
}

@media (max-width: 620px) {
  .f420-container, .f420-container--wide { width: calc(100% - 32px); }
  .f420-section { padding-block: 64px; }
  .f420-actions { display: grid; grid-template-columns: 1fr; }
  .f420-actions .f420-btn { width: 100%; }
  .f420-hero__grid { gap: 22px; }
  .f420-hero__stage { min-height: 340px; margin-inline: -10px; }
  .f420-product-stage { height: 330px; }
  .f420-product-stage .p1 { left: 38%; }
  .f420-product-stage .p2 { left: 1%; }
  .f420-product-stage .p3 { left: 21%; }
  .f420-product-stage .p4 { right: 12%; }
  .f420-product-stage .p5 { right: -6%; }
  .f420-product-stage--pair .p1 { left: 5%; height: 80%; }
  .f420-product-stage--pair .p2 { right: 2%; height: 80%; }
  .f420-product-stage--single .p1 { left: 50%; }
  .f420-product-stage--support .p1 { left: 20%; height: 88%; }
  .f420-product-stage--support .p2 { right: 2%; height: 58%; }
  .f420-proof-grid { transform: translateY(-26px); }
  .f420-proof { min-height: 130px; padding: 18px; }
  .f420-product-grid, .f420-product-grid--two, .f420-product-grid--three, .f420-product-grid--four { grid-template-columns: 1fr; }
  .f420-product-card { display: grid; grid-template-columns: 120px 1fr; }
  .f420-product-card::before { top: 0; bottom: 0; width: 6px; height: auto; right: auto; }
  .f420-product-card__media { min-height: 220px; padding: 18px 8px; }
  .f420-product-card__image { height: 190px; }
  .f420-product-card__body { padding: 20px 16px; }
  .f420-product-card h3 { font-size: 1.35rem; }
  .f420-comparison__media { min-height: 300px; }
  .f420-comparison__media img { max-height: 285px; }
  .f420-accessory-grid { grid-template-columns: 1fr; }
  .f420-accessory-item, .f420-accessory-item:nth-child(n) { min-height: 150px; border-right: 0; display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: center; }
  .f420-accessory-item__mark { margin: 0; }
  .f420-brand-card { grid-template-columns: 1fr; }
  .f420-brand-card__media { min-height: 220px; }
  .f420-route-panel { min-height: 330px; padding: 32px 24px; }
  .f420-process-grid { grid-template-columns: 1fr; }
  .f420-size-grid { grid-template-columns: 1fr; }
  .f420-size-card { min-height: 320px; }
  .f420-story-copy { padding: 34px 24px; }
  .f420-footer-grid { grid-template-columns: 1fr 1fr; }
  .f420-footer-bottom { flex-direction: column; }
}

@media (max-width: 390px) {
  h1 { font-size: clamp(2.45rem, 13vw, 3.4rem); }
  h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .f420-product-card { grid-template-columns: 104px 1fr; }
  .f420-product-card__media { min-height: 210px; }
  .f420-product-card__image { height: 176px; }
  .f420-footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .f420-btn, .f420-product-card, .f420-route-panel, .f420-proof-grid, .f420-media-card, .f420-accessory-item, .f420-wholesale-route { border: 2px solid CanvasText; }
  .f420-product-card::before, .f420-proof__icon, .f420-local-instruction, .f420-route-panel--local { forced-color-adjust: auto; }
  [data-route-status="pending"] { opacity: 1; text-decoration: line-through; }
}

@media print {
  .f420-site-header, .f420-mobile-nav, .f420-mobile-bar, .f420-site-footer, .f420-admin-note { display: none !important; }
  body { padding: 0; }
  .f420-section { break-inside: avoid; }
}

/* ==============================================================
   v0.1.2 — Homepage visual refinement from approved Page 01 HTML
   ============================================================== */
.f420-site-header { min-height: 68px; background: rgba(255,255,255,.98); }
.f420-header-inner { min-height: 68px; }
.f420-brand__logo { width: 112px; }
.f420-desktop-nav { gap: clamp(13px,1.35vw,23px); }
.f420-desktop-nav > a, .f420-brands-disclosure > summary { font-size: .68rem; }
.f420-header-actions .f420-btn { min-height: 44px; padding-inline: 17px; font-size: .68rem; }

@media (min-width: 1081px) {
  .f420-header-inner { grid-template-columns: 190px 1fr auto; }
  .f420-brand__logo { width: 168px; max-height: 60px; }
  .f420-desktop-nav > a, .f420-brands-disclosure > summary { font-size: calc(.68rem + 2px); }
}

.f420-site-footer { background: var(--f420-orange); border-top: 0; color: #fff; padding-top: 42px; }
.f420-footer-logo { filter: none; }
.f420-footer-brand p, .f420-footer-grid > div:not(.f420-footer-brand) a, .f420-footer-bottom { color: #fff; }
.f420-footer-grid h2 { color: #fff; }
.f420-footer-grid a:hover, .f420-footer-grid a:focus-visible { color: var(--f420-logo-yellow); }
.f420-footer-bottom { border-top-color: rgba(255,255,255,.28); }
.f420-footer-actions .f420-btn--primary { background: #fff; border-color: #fff; color: #111; }
.f420-footer-actions .f420-btn--light { background: #111; border-color: #111; color: #fff; }

.f420-home-refined { --home-max: 1320px; }
.f420-home-refined .f420-eyebrow { font-size: .78rem; letter-spacing: .08em; margin-bottom: 12px; }
.f420-home-refined .f420-btn { min-height: 44px; font-size: .7rem; padding: 12px 18px; }
.f420-home-refined h2 { font-size: clamp(2.8rem,4.7vw,5rem); line-height: .91; }

/* Bebas Neue display system: major homepage titles. */
.f420-home-refined h1,
.f420-home-refined h2,
.f420-home-support-card h3,
.f420-home-story__copy h3 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
}

/* Sitewide major-title typography. Card labels and small utility headings keep their existing condensed style. */
.f420-main h1,
.f420-main h2,
.f420-hero__copy > h3,
.f420-copy > h3,
.f420-story-copy > h3,
.f420-route-panel > h3,
.f420-brand-card h3 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
}

/* Hero */
.f420-home-hero { position: relative; padding: clamp(42px,5.4vw,78px) 0 16px; overflow: hidden; }
.f420-home-hero__grid { display: grid; grid-template-columns: minmax(350px,.72fr) minmax(620px,1.28fr); gap: clamp(26px,4vw,70px); align-items: center; }
.f420-home-hero__copy { position: relative; z-index: 3; max-width: 550px; }
.f420-home-hero__copy h1 { font-size: clamp(3.6rem,5.15vw,5.65rem); line-height: .91; letter-spacing: -.038em; }
.f420-home-hero__copy h1 span { color: var(--f420-orange); }
.f420-home-hero__copy p { max-width: 510px; color: #3e3e3e; font-size: 1rem; line-height: 1.45; }
.f420-home-hero__visual { position: relative; min-height: 0; aspect-ratio: 1672 / 941; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.f420-home-hero__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

.f420-home-proof .f420-proof-grid { transform: none; margin-block: 14px 58px; box-shadow: none; border-radius: 10px; }
.f420-home-proof .f420-proof { min-height: 116px; padding: 20px 22px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; }
.f420-home-proof .f420-proof__icon { grid-row: 1/3; margin: 0; align-self: center; }
.f420-home-proof .f420-proof strong { font-size: .82rem; }
.f420-home-proof .f420-proof p { font-size: .66rem; margin-top: 5px; }

/* Formula 420 lineup */
.f420-home-family { background: #fff; padding-block: 76px 92px; }
.f420-home-family__grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(760px,2.28fr); gap: 32px; align-items: center; }
.f420-home-family__intro .f420-eyebrow { font-size: calc(.9rem + 2px); }
.f420-home-family__intro h2 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: calc(clamp(4.25rem,5vw,5.8rem) + 3px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: .005em;
  white-space: nowrap;
  text-wrap: nowrap;
  margin-bottom: 14px;
}
.f420-home-family__intro p { max-width: 300px; color: #555; font-size: calc(.95rem + 2px); margin-top: 0; }
.f420-home-family__products { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: end; }
.f420-home-product { min-width: 0; padding: 0 14px 8px; text-align: center; border-right: 1px solid #eee; }
.f420-home-product:last-child { border-right: 0; }
.f420-home-product__media { height: 360px; display: flex; align-items: flex-end; justify-content: center; }
.f420-home-product__media img { max-height: 340px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 11px rgba(0,0,0,.13)); }

/* Formula 420 lineup alignment correction */
.f420-home-family__products .f420-home-product:nth-child(3) .f420-home-product__media img { transform: translateY(-8px); }
.f420-home-product__copy {
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.f420-home-product__code {
  color: var(--home-product-accent);
  font-family: var(--f420-font-display);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  margin-bottom: 10px;
}
.f420-home-product h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: .94;
  min-height: 2.1em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.f420-home-product p {
  min-height: 72px;
  margin: 0 auto;
  color: #4b4b4b;
  font-size: .68rem;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 94%;
}
.f420-home-product strong {
  display: block;
  font-size: .67rem;
  margin-top: 16px;
  line-height: 1.15;
}

/* Formula 710 */
.f420-home-710 { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding-block: 86px; }
.f420-home-710__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 78px; align-items: center; }
.f420-home-710__visual {
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  padding: 28px 34px 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 76%, rgba(245, 194, 53, 0.12), transparent 28%),
    radial-gradient(circle at 71% 77%, rgba(39, 165, 223, 0.11), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fcfcfc 62%, #f5f5f5 100%);
}
.f420-home-710__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 14%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 14%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 14%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 14%, rgba(255,255,255,0) 32%),
    linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, rgba(255,255,255,0.9) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 11%, rgba(255,255,255,0) 86%, rgba(255,255,255,0.9) 100%);
}
.f420-home-710__visual::after {
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:118px;
  height:52px;
  background: radial-gradient(ellipse at center, rgba(231,231,231,.62) 0%, rgba(244,244,244,.28) 46%, rgba(245,245,245,0) 80%);
  opacity: .95;
}
.f420-home-710__line { position:absolute; width:72%; height:230px; border:2px solid; border-left-color:transparent; border-right-color:transparent; border-radius:50%; opacity:.18; }
.f420-home-710__line--gold { border-color:#f3bc19; transform:rotate(-11deg); top:70px; left:5%; }
.f420-home-710__line--blue { border-color:#27a5df; transform:rotate(7deg); top:116px; right:1%; }
.f420-home-710__bottle { position: relative; z-index: 2; width: 228px; text-align: center; }
.f420-home-710__bottle img { height: 400px; width: auto; margin-inline: auto; object-fit: contain; filter: none; }
.f420-home-710__bottle strong { display:block; margin-top:14px; font-family:var(--f420-font-display); font-size:1.05rem; }
.f420-home-710__bottle small { display:block; font-size:.65rem; }
.f420-home-710__accent-bar { display:block; width:48px; height:5px; border-radius:999px; margin:14px auto 0; }
.f420-home-710__bottle--advanced .f420-home-710__accent-bar { background: var(--f710-yellow); }
.f420-home-710__bottle--instant .f420-home-710__accent-bar { background: var(--f710-blue); }
.f420-home-710__copy { max-width: 500px; }
.f420-home-710__copy .f420-eyebrow { color: #ffc629; font-size: calc(.9rem + 2px); }
.f420-home-710__copy h2 { font-size: clamp(3.5rem,5vw,5.6rem); }
.f420-home-710__copy p { max-width: 450px; color:#555; }

/* Accessories */
.f420-home-accessories { padding-block: 82px 88px; }
.f420-home-accessories__grid { display:grid; grid-template-columns:minmax(315px,.78fr) 1.62fr; gap:54px; align-items:center; }
.f420-home-accessories__copy .f420-eyebrow { font-size: calc(.9rem + 2px); }
.f420-home-accessories__copy h2 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: calc(clamp(4.25rem,5vw,5.8rem) + 3px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: .005em;
  white-space: nowrap;
  text-wrap: nowrap;
  margin-bottom: 14px;
}
.f420-home-accessories__copy p { max-width:380px; color:#555; font-size: calc(.95rem + 2px); margin-top: 0; }
.f420-home-accessories__visual { display:block; }
.f420-home-accessories__visual img { width:100%; max-height:620px; object-fit:contain; }

/* Supporting brands */
.f420-home-supporting { border-top:1px solid #eee; }
.f420-home-supporting__heading { text-align:center; margin-bottom:34px; }
.f420-home-supporting__heading h2 { font-size:clamp(2.2rem,3.2vw,3.6rem); margin-bottom:3px; }
.f420-home-supporting__heading p { color:var(--f420-orange); font-family:var(--f420-font-display); font-size:.72rem; font-weight:900; letter-spacing:.06em; }
.f420-home-supporting__grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; }
.f420-home-support-card { min-height:370px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:20px; padding:44px 38px; }
.f420-home-support-card + .f420-home-support-card { border-left:1px solid #e2e2e2; }
.f420-home-support-card h3 { font-size:2rem; margin-bottom:4px; }
.f420-home-support-card--bling h3,
.f420-brand-card--bling h3 { color:#f07b22; }
.f420-home-support-card--smog h3,
.f420-brand-card--smog h3 { color:#1ac3f4; }
.f420-home-support-card strong { display:block; margin-bottom:18px; font-family:var(--f420-font-display); font-size:.78rem; line-height:1.05; }
.f420-home-support-card p { color:#555; font-size:.78rem; line-height:1.45; }
.f420-home-support-card__media { min-height:250px; display:flex; align-items:center; justify-content:center; }
.f420-home-support-card__media img { max-height:245px; width:auto; filter:drop-shadow(0 15px 12px rgba(0,0,0,.13)); }

/* Availability band */
.f420-home-availability { background:#fff4ec; border-top:1px solid #f0ddd0; border-bottom:1px solid #f0ddd0; }
.f420-home-availability__grid { min-height:128px; display:grid; grid-template-columns:1fr 1fr 300px; gap:34px; align-items:center; }
.f420-home-availability__item { display:grid; grid-template-columns:52px 1fr; align-items:center; gap:18px; }
.f420-home-availability__item + .f420-home-availability__item { border-left:1px solid #dac9bc; padding-left:34px; }
.f420-home-availability__item > span { width:46px; height:46px; display:grid; place-items:center; border:2px solid var(--f420-orange); border-radius:50%; color:var(--f420-orange); font-size:1.35rem; }
.f420-home-availability__item > span svg { width:24px; height:24px; display:block; }
.f420-home-availability__item strong { font-family:var(--f420-font-display); font-size:.82rem; line-height:1.2; }
.f420-home-availability__item em { color:var(--f420-orange); font-style:normal; }
.f420-home-availability__display { height:128px; overflow:hidden; }
.f420-home-availability__display img { width:100%; height:100%; object-fit:cover; object-position:center 53%; mix-blend-mode:multiply; }

/* Where to Buy + Wholesale cards */
.f420-home-routes { padding-block:46px 34px; }
.f420-home-routes__grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.f420-home-route-card { min-height:410px; display:grid; grid-template-columns:48% 52%; border:1px solid #dedede; overflow:hidden; background:#fff; }
.f420-home-route-card__copy { padding:44px 32px; display:flex; flex-direction:column; justify-content:center; }
.f420-home-route-card h2 { font-size:clamp(2.35rem,3vw,3.65rem); line-height:.94; }
.f420-home-route-card h2 span { color:var(--f420-orange); }
.f420-home-route-card p { color:#4d4d4d; font-size:.85rem; line-height:1.45; }
.f420-home-route-card__media {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.f420-home-route-card__media img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  padding:24px;
  box-sizing:border-box;
}

/* 1997 story */
.f420-home-story { padding:16px 0 0; }
.f420-home-story__grid { display:grid; grid-template-columns:46% 54%; min-height:570px; }
.f420-home-story__media { position:relative; overflow:hidden; background:#111; }
.f420-home-story__media > img { width:100%; height:100%; object-fit:cover; object-position:center; }
.f420-home-story__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.62)); }
.f420-home-story__history { position:absolute; z-index:2; left:34px; right:28px; bottom:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; color:#fff; }
.f420-home-story__history small { display:block; font-family:var(--f420-font-display); font-size:.78rem; font-weight:900; letter-spacing:.12em; }
.f420-home-story__history strong { display:block; color:var(--f420-orange); font-family:var(--f420-font-display); font-size:5rem; line-height:.8; }
.f420-home-story__history > span { max-width:190px; font-family:var(--f420-font-display); font-size:.85rem; font-weight:900; line-height:1.1; letter-spacing:.05em; }
.f420-home-story__copy { display:flex; flex-direction:column; justify-content:center; padding:64px 68px; background:#fbf7f2; }
.f420-home-story__copy h2 { font-size:clamp(3.1rem,4.3vw,5rem); margin-bottom:4px; }
.f420-home-story__copy h3 { color:var(--f420-orange); font-size:clamp(2rem,2.7vw,3rem); }
.f420-home-story__copy p { max-width:600px; margin:22px 0 0; color:#3f3f3f; font-size:1.05rem; line-height:1.5; }

/* Homepage approved orange eyebrow treatments. */
.f420-home-family__intro .f420-eyebrow,
.f420-home-accessories__copy .f420-eyebrow,
.f420-home-routes__grid > .f420-home-route-card:first-child .f420-eyebrow,
.f420-home-story__copy .f420-eyebrow {
  color: #ff5100;
}

/* Keep the Our Story CTA compact and give it comfortable separation from copy. */
.f420-home-story__copy > .f420-btn {
  align-self: flex-start;
  width: auto;
  min-width: 210px;
  max-width: 280px;
  margin-top: 34px;
}

@media (max-width: 1179px) {
  .f420-home-hero__grid { grid-template-columns:minmax(300px,.72fr) minmax(500px,1.28fr); }
  .f420-home-hero__visual { min-height:0; }
  .f420-home-family__grid { grid-template-columns:1fr; }
  .f420-home-family__intro { max-width:600px; }
  .f420-home-family__products { width:100%; }
  .f420-home-product__media { height:300px; }
  .f420-home-product__media img { max-height:285px; }
  .f420-home-family__products .f420-home-product:nth-child(3) .f420-home-product__media img { transform: translateY(-4px); }
  .f420-home-route-card { grid-template-columns:1fr; }
  .f420-home-route-card__media { min-height:280px; }
}

@media (max-width: 900px) {
  .f420-home-hero { padding-top:34px; }
  .f420-home-hero__grid { grid-template-columns:1fr; gap:10px; }
  .f420-home-hero__copy { max-width:none; }
  .f420-home-hero__visual { min-height:0; }
  .f420-home-proof .f420-proof-grid { margin-bottom:28px; }
  .f420-home-family { padding-top:58px; }
  .f420-home-family__products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .f420-home-product { position:relative; display:grid; grid-template-columns:130px 1fr; min-height:230px; padding:0; text-align:left; border:1px solid #e5e5e5; border-left:0; border-radius:18px; overflow:hidden; }
  .f420-home-product::before { content:""; position:absolute; left:8px; top:14px; bottom:14px; width:8px; background:var(--home-product-accent); border-radius:999px; }
  .f420-home-product:last-child { grid-column:1/-1; }
  .f420-home-product__media { height:220px; align-items:center; }
  .f420-home-product__media img { max-height:200px; }
  .f420-home-product__copy { padding:28px 16px 18px 0; align-items:flex-start; }
  .f420-home-product p { min-height:0; margin:0 0 10px; }
  .f420-home-710__grid { grid-template-columns:1fr; gap:35px; }
  .f420-home-710__visual { order:2; min-height:440px; gap:24px; padding:24px 28px 34px; }
  .f420-home-710__copy { order:1; max-width:none; }
  .f420-home-accessories__grid { grid-template-columns:1fr; }
  .f420-home-accessories__visual img { max-height:none; }
  .f420-home-supporting__grid, .f420-home-routes__grid { grid-template-columns:1fr; }
  .f420-home-support-card + .f420-home-support-card { border-left:0; border-top:1px solid #e2e2e2; }
  .f420-home-availability__grid { grid-template-columns:1fr 1fr; padding-block:20px; }
  .f420-home-availability__display { grid-column:1/-1; height:110px; }
  .f420-home-story__grid { grid-template-columns:1fr; }
  .f420-home-story__media { min-height:430px; }
}

@media (max-width: 620px) {
  .f420-header-inner { min-height:62px; }
  .f420-brand__logo { width:116px; }
  .f420-home-refined .f420-actions { grid-template-columns:1fr 1fr; gap:8px; }
  .f420-home-refined .f420-actions .f420-btn { width:100%; }
  .f420-home-hero__copy h1 { font-size:clamp(2.85rem,13vw,4.2rem); }
  .f420-home-hero__copy p { font-size:.9rem; }
  .f420-home-hero__copy .f420-actions .f420-btn:last-child { grid-column:1/-1; }
  .f420-home-hero__visual { min-height:0; margin-inline:-10px; }
  .f420-home-hero__image { width:100%; height:auto; aspect-ratio:auto; }
  .f420-home-proof .f420-proof-grid { grid-template-columns:1fr 1fr; }
  .f420-home-proof .f420-proof { min-height:124px; padding:16px 12px; grid-template-columns:24px 1fr; }
  .f420-home-proof .f420-proof strong { font-size:.72rem; }
  .f420-home-proof .f420-proof p { font-size:.61rem; }
  .f420-home-family { padding-block:54px 64px; }
  .f420-home-family__intro h2 { font-size:clamp(3.5rem,16vw,4.8rem); white-space:nowrap; }
  .f420-home-family__intro p { font-size: .95rem; }
  .f420-home-family__intro .f420-btn { width:100%; }
  .f420-home-family__products { grid-template-columns:1fr; }
  .f420-home-product, .f420-home-product:last-child { grid-column:auto; grid-template-columns:108px 1fr; min-height:190px; border-radius:20px; }
  .f420-home-product::before { left:7px; top:12px; bottom:12px; width:7px; }
  .f420-home-product__media { height:185px; }
  .f420-home-product__media img { max-height:165px; }
  .f420-home-family__products .f420-home-product:nth-child(3) .f420-home-product__media img { transform: translateY(0); }
  .f420-home-product__copy { padding:24px 13px 16px 0; }
  .f420-home-product h3 { font-size:1.22rem; min-height:0; justify-content:flex-start; }
  .f420-home-product p { min-height:0; justify-content:flex-start; max-width:none; }
  .f420-home-product strong { margin-top:8px; }
  .f420-home-710 { padding-block:62px; }
  .f420-home-710__visual { min-height:355px; gap:12px; padding:18px 14px 24px; }
  .f420-home-710__bottle { width:46%; }
  .f420-home-710__bottle img { height:285px; max-width:100%; }
  .f420-home-710__accent-bar { width:42px; margin-top:12px; }
  .f420-home-710__copy h2 { font-size:clamp(3rem,14vw,4.4rem); }
  .f420-home-710__copy .f420-btn { width:100%; }
  .f420-home-accessories { padding-block:58px; }
  .f420-home-accessories__copy h2 { font-size:clamp(3rem,14vw,4.3rem); white-space:nowrap; }
  .f420-home-accessories__copy p { font-size: .95rem; }
  .f420-home-accessories__copy .f420-btn { width:100%; }
  .f420-home-supporting__heading h2 { font-size:2rem; }
  .f420-home-support-card { grid-template-columns:1fr; padding:32px 22px; }
  .f420-home-support-card__media { min-height:230px; }
  .f420-home-availability__grid { grid-template-columns:1fr; gap:14px; }
  .f420-home-availability__item + .f420-home-availability__item { border-left:0; border-top:1px solid #dac9bc; padding:14px 0 0; }
  .f420-home-availability__display { grid-column:auto; height:100px; }
  .f420-home-routes { padding-top:30px; }
  .f420-home-route-card { min-height:0; }
  .f420-home-route-card__copy { padding:32px 22px; }
  .f420-home-route-card h2 { font-size:2.55rem; }
  .f420-home-route-card__media { min-height:240px; }
  .f420-home-story { padding-top:8px; }
  .f420-home-story__media { min-height:350px; }
  .f420-home-story__history { left:20px; right:18px; bottom:18px; }
  .f420-home-story__history strong { font-size:4rem; }
  .f420-home-story__copy { padding:40px 24px; }
  .f420-home-story__copy h2 { font-size:3.1rem; }
  .f420-home-story__copy h3 { font-size:2rem; }
}

/* v0.1.2 asset visibility refinements */
.f420-home-accessories__image--mobile { display:none; }
@media (max-width: 720px) {
  .f420-home-accessories__image--desktop { display:none; }
  .f420-home-accessories__image--mobile { display:block; width:100%; }
}
@media (max-width: 620px) {
  .f420-home-support-card { grid-template-columns:minmax(0,1fr) 128px; align-items:center; }
  .f420-home-support-card__media { min-height:190px; }
  .f420-home-support-card__media img { max-height:190px; }
}


/* ==============================================================
   v0.1.4 — Oversized, more prominent homepage hero artwork
   ============================================================== */
@media (min-width: 1180px) {
  .f420-home-hero {
    padding-top: clamp(24px, 3vw, 44px);
    padding-bottom: 8px;
  }
  .f420-home-hero__grid {
    width: min(96rem, calc(100% - clamp(24px, 3.5vw, 54px)));
    grid-template-columns: minmax(350px, .66fr) minmax(760px, 1.74fr);
    gap: clamp(0px, 1vw, 16px);
    min-height: clamp(560px, 43vw, 680px);
  }
  .f420-home-hero__copy {
    max-width: 500px;
    padding-left: clamp(0px, 1vw, 16px);
  }
  .f420-home-hero__visual {
    min-height: clamp(540px, 42vw, 660px);
    aspect-ratio: auto;
    overflow: visible;
    margin-left: clamp(-48px, -3vw, -20px);
    margin-right: clamp(-130px, -8vw, -60px);
  }
  .f420-home-hero__image {
    width: calc(100% + clamp(90px, 8vw, 150px));
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center right;
    transform: translateY(6px);
  }
}

@media (min-width: 901px) and (max-width: 1179px) {
  .f420-home-hero {
    padding-top: 28px;
    padding-bottom: 8px;
  }
  .f420-home-hero__grid {
    grid-template-columns: minmax(290px, .72fr) minmax(540px, 1.48fr);
    gap: 0;
  }
  .f420-home-hero__visual {
    aspect-ratio: auto;
    overflow: visible;
    margin-left: -28px;
    margin-right: -64px;
  }
  .f420-home-hero__image {
    width: calc(100% + 88px);
    max-width: none;
    height: auto;
    object-position: center right;
  }
}

@media (max-width: 900px) {
  .f420-home-hero__grid { gap: 0; }
  .f420-home-hero__visual {
    margin-inline: -32px;
    overflow: visible;
  }
  .f420-home-hero__image {
    width: calc(100% + 64px);
    max-width: none;
    height: auto;
    object-position: center;
  }
}

@media (max-width: 620px) {
  .f420-home-hero {
    padding-top: 26px;
    padding-bottom: 4px;
  }
  .f420-home-hero__visual { margin-inline: -24px; }
  .f420-home-hero__image { width: calc(100% + 48px); }
}

/* =========================================================
   Homepage motion + rollover trial — v0.3.5
   Scoped to the homepage and progressively enhanced by JS.
   ========================================================= */
.f420-home-refined.f420-motion-ready .f420-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 720ms cubic-bezier(.22, 1, .36, 1),
    transform 820ms cubic-bezier(.22, 1, .36, 1),
    filter 720ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--f420-reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.f420-home-refined.f420-motion-ready .f420-reveal.is-visible {
  will-change: auto;
}

.f420-home-refined.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-42px, 0, 0);
}

.f420-home-refined.f420-motion-ready .f420-reveal--right {
  transform: translate3d(42px, 0, 0);
}

.f420-home-refined.f420-motion-ready .f420-reveal--scale {
  transform: scale(.965);
}

.f420-home-refined.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Decorative motion stays deliberately slow and subtle. */
.f420-home-refined.f420-motion-ready .f420-home-710__line--gold {
  animation: f420-home-orbit-gold 9s ease-in-out infinite alternate;
}

.f420-home-refined.f420-motion-ready .f420-home-710__line--blue {
  animation: f420-home-orbit-blue 10.5s ease-in-out infinite alternate;
}

@keyframes f420-home-orbit-gold {
  from { transform: rotate(-11deg) translate3d(-5px, 0, 0); }
  to { transform: rotate(-8deg) translate3d(8px, -4px, 0); }
}

@keyframes f420-home-orbit-blue {
  from { transform: rotate(7deg) translate3d(5px, 0, 0); }
  to { transform: rotate(4deg) translate3d(-8px, 5px, 0); }
}

@media (hover: hover) and (pointer: fine) {


  /* Header rollovers shown only while the homepage animation trial is active. */
  .f420-home-motion-page .f420-brand__logo {
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  }

  .f420-home-motion-page .f420-brand:hover .f420-brand__logo {
    transform: scale(1.02);
  }

  .f420-home-motion-page .f420-desktop-nav > a,
  .f420-home-motion-page .f420-brands-disclosure > summary {
    position: relative;
  }

  .f420-home-motion-page .f420-desktop-nav > a::before,
  .f420-home-motion-page .f420-brands-disclosure > summary::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: var(--f420-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
  }

  .f420-home-motion-page .f420-desktop-nav > a:hover::before,
  .f420-home-motion-page .f420-desktop-nav > a:focus-visible::before,
  .f420-home-motion-page .f420-brands-disclosure > summary:hover::before,
  .f420-home-motion-page .f420-brands-disclosure > summary:focus-visible::before {
    transform: scaleX(1);
  }
  /* Buttons: lift + restrained light sweep. */
  .f420-home-refined .f420-btn:not([data-route-status="pending"]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      transform 220ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 220ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }

  .f420-home-refined .f420-btn:not([data-route-status="pending"])::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -60%;
    bottom: -60%;
    left: -34%;
    width: 24%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.33), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }

  .f420-home-refined .f420-btn:not([data-route-status="pending"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
  }

  .f420-home-refined .f420-btn:not([data-route-status="pending"]):hover::before {
    transform: translateX(640%) skewX(-18deg);
  }

  /* Proof strip. */
  .f420-home-refined .f420-home-proof .f420-proof {
    transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
  }

  .f420-home-refined.f420-motion-ready .f420-home-proof .f420-proof.f420-reveal.is-visible:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 14px 32px rgba(0,0,0,.09);
    z-index: 2;
  }

  .f420-home-refined .f420-home-proof .f420-proof__icon {
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), color 180ms ease;
  }

  .f420-home-refined .f420-home-proof .f420-proof:hover .f420-proof__icon {
    transform: rotate(-7deg) scale(1.1);
    color: var(--f420-orange);
  }

  /* Formula 420 product lineup. */
  .f420-home-refined .f420-home-product {
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }

  .f420-home-refined .f420-home-product__media {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .f420-home-refined .f420-home-product:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(247,247,247,.88) 100%);
    box-shadow: inset 0 -3px 0 var(--home-product-accent);
  }

  .f420-home-refined .f420-home-product:hover .f420-home-product__media {
    transform: translateY(-7px);
  }

  .f420-home-refined .f420-home-product__code {
    transition: letter-spacing 220ms ease, transform 220ms ease;
  }

  .f420-home-refined .f420-home-product:hover .f420-home-product__code {
    letter-spacing: .16em;
    transform: translateY(-2px);
  }

  /* Formula 710 visual. */
  .f420-home-refined .f420-home-710__bottle {
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .f420-home-refined .f420-home-710__bottle--advanced:hover {
    transform: translate3d(-4px, -8px, 0) rotate(-.7deg);
  }

  .f420-home-refined .f420-home-710__bottle--instant:hover {
    transform: translate3d(4px, -8px, 0) rotate(.7deg);
  }

  .f420-home-refined .f420-home-710__accent-bar {
    transition: width 240ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  }

  .f420-home-refined .f420-home-710__bottle:hover .f420-home-710__accent-bar {
    width: 72px;
    opacity: .9;
  }

  /* Accessories. */
  .f420-home-refined .f420-home-accessories__visual {
    overflow: hidden;
  }

  .f420-home-refined .f420-home-accessories__visual img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .f420-home-refined .f420-home-accessories__visual:hover img {
    transform: scale(1.022);
  }

  /* Supporting-brand cards. */
  .f420-home-refined .f420-home-support-card {
    transition: background-color 260ms ease, box-shadow 260ms ease;
  }

  .f420-home-refined .f420-home-support-card:hover {
    background: #fff;
    box-shadow: 0 18px 42px rgba(0,0,0,.09);
    z-index: 2;
  }

  .f420-home-refined .f420-home-support-card__media img {
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease;
  }

  .f420-home-refined .f420-home-support-card:hover .f420-home-support-card__media img {
    transform: translateY(-7px) scale(1.025);
    filter: drop-shadow(0 19px 15px rgba(0,0,0,.17));
  }

  /* Availability band. */
  .f420-home-refined .f420-home-availability__item > span {
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease, color 200ms ease;
  }

  .f420-home-refined .f420-home-availability__item:hover > span {
    transform: scale(1.08) rotate(-5deg);
    background: var(--f420-orange);
    color: #fff;
  }

  .f420-home-refined .f420-home-availability__display img {
    transition: transform 460ms cubic-bezier(.22, 1, .36, 1);
  }

  .f420-home-refined .f420-home-availability__display:hover img {
    transform: scale(1.02);
  }

  /* Where-to-buy and wholesale route cards. */
  .f420-home-refined .f420-home-route-card {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 200ms ease;
  }

  .f420-home-refined.f420-motion-ready .f420-home-route-card.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
    border-color: rgba(255,78,0,.36);
    box-shadow: 0 22px 48px rgba(0,0,0,.12);
  }

  .f420-home-refined .f420-home-route-card__media img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  }

  .f420-home-refined .f420-home-route-card:hover .f420-home-route-card__media img {
    transform: scale(1.02);
  }

  /* Story closeout. */
  .f420-home-refined .f420-home-story__media > img {
    transition: transform 760ms cubic-bezier(.22, 1, .36, 1), filter 420ms ease;
    will-change: transform;
  }

  .f420-home-refined .f420-home-story__media:hover > img {
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.03);
  }

  .f420-home-refined .f420-home-story__history strong {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), text-shadow 260ms ease;
    transform-origin: left bottom;
  }

  .f420-home-refined .f420-home-story__media:hover .f420-home-story__history strong {
    transform: scale(1.04);
    text-shadow: 0 0 24px rgba(255,78,0,.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-home-refined .f420-reveal,
  .f420-home-refined .f420-reveal.is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .f420-home-refined .f420-home-710__line,
  .f420-home-refined .f420-home-hero__image {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   Formula 420 page motion + rollover trial — v0.4.2
   Applies homepage-style motion language to page-formula-420.php only
   ========================================================= */
.f420-page-formula420.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition:
    transform 660ms cubic-bezier(.2,.68,.18,1),
    opacity 660ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-formula420.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.f420-page-formula420.f420-motion-ready .f420-reveal--left { transform: translate3d(-34px, 0, 0); }
.f420-page-formula420.f420-motion-ready .f420-reveal--right { transform: translate3d(34px, 0, 0); }
.f420-page-formula420.f420-motion-ready .f420-reveal--scale { transform: translate3d(0, 18px, 0) scale(.965); }
.f420-page-formula420.f420-motion-ready .f420-reveal.is-visible { transform: translate3d(0, 0, 0) scale(1); }

.f420-page-formula420 .f420-hero__shape {
  transform-origin: 72% 50%;
  animation: f420Formula420HeroShape 11s ease-in-out infinite;
}
@keyframes f420Formula420HeroShape {
  0%,100% { transform: scale(1) translate3d(0,0,0); }
  50% { transform: scale(1.02) translate3d(0,-6px,0); }
}

@media (hover: hover) and (pointer: fine) {
  .f420-formula420-motion-page .f420-brand__logo {
    transition: transform 240ms var(--f420-ease), filter 240ms var(--f420-ease);
    transform-origin: center;
  }
  .f420-formula420-motion-page .f420-brand:hover .f420-brand__logo {
    transform: translateY(-1px) scale(1.025);
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.06));
  }
  .f420-formula420-motion-page .f420-desktop-nav > a,
  .f420-formula420-motion-page .f420-brands-disclosure > summary {
    position: relative;
    transition: color 180ms var(--f420-ease), transform 180ms var(--f420-ease);
  }
  .f420-formula420-motion-page .f420-desktop-nav > a::before,
  .f420-formula420-motion-page .f420-brands-disclosure > summary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: var(--f420-orange);
    transform: scaleX(.18);
    transform-origin: center;
    opacity: 0;
    transition: transform 220ms var(--f420-ease), opacity 220ms var(--f420-ease);
  }
  .f420-formula420-motion-page .f420-desktop-nav > a:hover::before,
  .f420-formula420-motion-page .f420-desktop-nav > a:focus-visible::before,
  .f420-formula420-motion-page .f420-brands-disclosure > summary:hover::before,
  .f420-formula420-motion-page .f420-brands-disclosure > summary:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
  }

  .f420-page-formula420 .f420-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .f420-page-formula420 .f420-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.36) 50%, rgba(255,255,255,.12) 58%, transparent 100%);
    transform: translateX(-140%);
    transition: transform 520ms cubic-bezier(.2,.68,.18,1);
    pointer-events: none;
    z-index: 0;
  }
  .f420-page-formula420 .f420-btn > span { position: relative; z-index: 1; }
  .f420-page-formula420 .f420-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.09);
  }
  .f420-page-formula420 .f420-btn:hover::before { transform: translateX(140%); }

  .f420-page-formula420 .f420-hero__stage img {
    transition: transform 300ms var(--f420-ease), filter 300ms var(--f420-ease);
  }
  .f420-page-formula420 .f420-hero__stage:hover .p1 { transform: translate3d(0,-8px,0) scale(1.02); }
  .f420-page-formula420 .f420-hero__stage:hover .p2 { transform: rotate(-3deg) translate3d(-2px,-6px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p3 { transform: rotate(-1deg) translate3d(-2px,-7px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p4 { transform: rotate(3deg) translate3d(2px,-6px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p5 { transform: rotate(5deg) translate3d(2px,-5px,0); }

  .f420-page-formula420 .f420-media-card,
  .f420-page-formula420 .f420-process-step,
  .f420-page-formula420 .f420-product-card,
  .f420-page-formula420 .f420-route-panel,
  .f420-page-formula420 .f420-authority-card {
    transition: transform 250ms var(--f420-ease), box-shadow 250ms var(--f420-ease), border-color 200ms var(--f420-ease), background-color 200ms var(--f420-ease);
  }

  .f420-page-formula420 .f420-media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(0,0,0,.08);
  }
  .f420-page-formula420 .f420-media-card img {
    transition: transform 320ms var(--f420-ease), filter 320ms var(--f420-ease);
  }
  .f420-page-formula420 .f420-media-card:hover img {
    transform: scale(1.03);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  }

  .f420-page-formula420 .f420-process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 28px rgba(0,0,0,.08);
    border-color: rgba(255,81,0,.18);
  }
  .f420-page-formula420 .f420-process-step:hover h3,
  .f420-page-formula420 .f420-process-step:hover span { color: var(--f420-orange); }

  .f420-page-formula420 .f420-authority-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 18px 34px rgba(0,0,0,.16);
  }

  .f420-page-formula420 .f420-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 30px rgba(0,0,0,.08);
  }
  .f420-page-formula420 .f420-product-card__media,
  .f420-page-formula420 .f420-product-code {
    transition: transform 220ms var(--f420-ease), color 220ms var(--f420-ease);
  }
  .f420-page-formula420 .f420-product-card__image {
    transition: transform 280ms var(--f420-ease), filter 280ms var(--f420-ease);
  }
  .f420-page-formula420 .f420-product-card:hover .f420-product-card__image {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 18px 16px rgba(0,0,0,.16));
  }
  .f420-page-formula420 .f420-product-card:hover .f420-product-code {
    color: color-mix(in srgb, var(--product-accent) 82%, black 18%);
    transform: translateY(-1px);
  }

  .f420-page-formula420 .f420-route-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px rgba(0,0,0,.07);
  }

  .f420-page-formula420 .f420-wholesale-teaser .f420-media-card:hover img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-formula420 .f420-reveal,
  .f420-page-formula420 .f420-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .f420-page-formula420 .f420-hero__shape { animation: none !important; }
}


/* =========================================================
   Formula 420 page hero refinement — v0.4.3
   Cleaner, more balanced hero bottle presentation
   ========================================================= */
.f420-page-formula420 {
  --hero-accent: #ff5a00;
  --hero-accent-2: #ff8f1f;
}
.f420-page-formula420 .f420-hero::after {
  background: linear-gradient(90deg, #ff5400 0%, #ff6200 46%, #ff7a00 100%);
}
.f420-page-formula420 .f420-hero__stage {
  min-height: 540px;
}
.f420-page-formula420 .f420-hero__shape {
  inset: 3% -14% 2% 10%;
  border-radius: 42% 0 0 42% / 50% 0 0 50%;
  background:
    radial-gradient(circle at 52% 58%, rgba(255,178,96,.55) 0%, rgba(255,178,96,0) 22%),
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(135deg, #ff5200 0%, #ff6600 45%, #ff8b1f 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 26px 40px rgba(255,102,0,.15);
  overflow: hidden;
}
.f420-page-formula420 .f420-hero__shape::before {
  content: "";
  position: absolute;
  width: 38%;
  height: 52%;
  left: 26%;
  top: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,190,116,.32) 0%, rgba(255,190,116,0) 68%);
  filter: blur(2px);
}
.f420-page-formula420 .f420-hero__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,120,25,.12) 100%);
}
.f420-page-formula420 .f420-product-stage {
  height: 540px;
}
.f420-page-formula420 .f420-product-stage img {
  bottom: 8px;
  filter: drop-shadow(0 24px 20px rgba(0,0,0,.22));
}
.f420-page-formula420 .f420-product-stage .p1 {
  height: 93%;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
}
.f420-page-formula420 .f420-product-stage .p2,
.f420-page-formula420 .f420-product-stage .p5 {
  height: 72%;
  z-index: 2;
}
.f420-page-formula420 .f420-product-stage .p3,
.f420-page-formula420 .f420-product-stage .p4 {
  height: 79%;
  z-index: 3;
}
.f420-page-formula420 .f420-product-stage .p2 {
  left: 6%;
  transform: none;
}
.f420-page-formula420 .f420-product-stage .p3 {
  left: 24%;
  transform: none;
}
.f420-page-formula420 .f420-product-stage .p4 {
  right: 24%;
  transform: none;
}
.f420-page-formula420 .f420-product-stage .p5 {
  right: 6%;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-formula420 .f420-hero__stage:hover .p1 { transform: translateX(-50%) translate3d(0,-8px,0) scale(1.02); }
  .f420-page-formula420 .f420-hero__stage:hover .p2 { transform: translate3d(-2px,-5px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p3 { transform: translate3d(-1px,-7px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p4 { transform: translate3d(1px,-7px,0); }
  .f420-page-formula420 .f420-hero__stage:hover .p5 { transform: translate3d(2px,-5px,0); }
}

@media (max-width: 900px) {
  .f420-page-formula420 .f420-hero__stage { min-height: 450px; }
  .f420-page-formula420 .f420-product-stage { height: 440px; }
  .f420-page-formula420 .f420-hero__shape { inset: 4% -12% 2% 7%; }
  .f420-page-formula420 .f420-product-stage .p2 { left: 5%; }
  .f420-page-formula420 .f420-product-stage .p3 { left: 23%; }
  .f420-page-formula420 .f420-product-stage .p4 { right: 23%; }
  .f420-page-formula420 .f420-product-stage .p5 { right: 5%; }
}

@media (max-width: 620px) {
  .f420-page-formula420 .f420-hero__stage { min-height: 360px; margin-inline: -6px; }
  .f420-page-formula420 .f420-product-stage { height: 342px; }
  .f420-page-formula420 .f420-hero__shape { inset: 6% -14% 3% 6%; border-radius: 32% 0 0 32% / 44% 0 0 44%; }
  .f420-page-formula420 .f420-product-stage .p1 { height: 91%; }
  .f420-page-formula420 .f420-product-stage .p2, .f420-page-formula420 .f420-product-stage .p5 { height: 67%; }
  .f420-page-formula420 .f420-product-stage .p3, .f420-page-formula420 .f420-product-stage .p4 { height: 74%; }
  .f420-page-formula420 .f420-product-stage .p2 { left: 0; }
  .f420-page-formula420 .f420-product-stage .p3 { left: 16%; }
  .f420-page-formula420 .f420-product-stage .p4 { right: 16%; }
  .f420-page-formula420 .f420-product-stage .p5 { right: 0; }
}


/* =========================================================
   Formula 420 original section refinement — v0.4.4
   Adds complete 1-minute cleaner callout and larger original media field
   ========================================================= */
.f420-split--original {
  grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
.f420-media-card--original {
  aspect-ratio: 1.1 / 1;
  min-height: 0;
  padding: clamp(20px, 3.5vw, 34px);
  align-items: stretch;
  justify-content: stretch;
}
.f420-product-stage--original {
  width: 100%;
  height: 100%;
  min-height: 560px;
}
.f420-media-card--original .f420-product-stage--single .p1 {
  height: 76%;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
}
.f420-copy--original .f420-kicker {
  margin: 22px 0 0;
  font-size: .84rem;
  letter-spacing: .02em;
}
.f420-original-process {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--f420-border-strong);
}
.f420-original-process .f420-eyebrow {
  margin-bottom: 8px;
}
.f420-original-process h3 {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: .92;
}
.f420-benefit-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.f420-benefit-chip {
  min-height: 62px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #f4e7de;
  border-top: 4px solid var(--f420-orange);
  font-family: var(--f420-font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .f420-product-stage--original {
    min-height: 500px;
  }
  .f420-media-card--original .f420-product-stage--single .p1 {
    height: 73%;
  }
}

@media (max-width: 900px) {
  .f420-split--original {
    grid-template-columns: 1fr;
  }
  .f420-media-card--original {
    aspect-ratio: auto;
    min-height: 420px;
  }
  .f420-product-stage--original {
    min-height: 420px;
  }
  .f420-original-process h3 {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}

@media (max-width: 620px) {
  .f420-media-card--original {
    min-height: 360px;
    padding: 18px;
  }
  .f420-product-stage--original {
    min-height: 360px;
  }
  .f420-media-card--original .f420-product-stage--single .p1 {
    height: 70%;
  }
  .f420-benefit-chips,
  .f420-process-grid {
    grid-template-columns: 1fr;
  }
  .f420-benefit-chip {
    min-height: 58px;
  }
}


/* =========================================================
   Formula 420 original section refinement — v0.4.5
   Rebalances typography and enlarges the original media composition
   ========================================================= */
.f420-page-formula420 .f420-copy--original > h2 {
  font-size: clamp(2.55rem, 4vw, 4.2rem);
  line-height: .92;
  margin-bottom: 18px;
}
.f420-page-formula420 .f420-copy--original > p {
  font-size: clamp(1rem, 1.32vw, 1.1rem);
  line-height: 1.58;
}
.f420-page-formula420 .f420-copy--original .f420-kicker {
  margin-top: 18px;
  font-size: .78rem;
  letter-spacing: .055em;
}
.f420-page-formula420 .f420-split--original {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 4vw, 56px);
  align-items: start;
}
.f420-page-formula420 .f420-media-card--original {
  position: relative;
  min-height: 700px;
  padding: 0;
  aspect-ratio: auto;
  background: linear-gradient(180deg, #ff2c23 0%, #ff4e09 54%, #ff8a12 100%);
}
.f420-page-formula420 .f420-media-card--original::before {
  content: "420";
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 1;
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(8rem, 14vw, 12rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: rgba(255, 138, 116, .38);
  pointer-events: none;
}
.f420-page-formula420 .f420-media-card--original::after {
  content: "THE FORMULA 420 ORIGINAL";
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 3;
  font-family: var(--f420-font-display);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .07em;
  color: #fff;
  text-transform: uppercase;
  pointer-events: none;
}
.f420-page-formula420 .f420-product-stage--original {
  position: relative;
  min-height: 700px;
  height: 100%;
}
.f420-page-formula420 .f420-product-stage--original::before,
.f420-page-formula420 .f420-product-stage--original::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 28px;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 173, 142, .72);
  transform: rotate(-8deg);
  transform-origin: left center;
  pointer-events: none;
}
.f420-page-formula420 .f420-product-stage--original::before {
  bottom: 164px;
}
.f420-page-formula420 .f420-product-stage--original::after {
  bottom: 82px;
  left: 30px;
  right: 18px;
}
.f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
  z-index: 2;
  height: 62%;
  left: auto;
  right: 10%;
  bottom: 18px;
  transform: none;
}
.f420-page-formula420 .f420-original-process {
  margin-top: 20px;
  padding-top: 18px;
}
.f420-page-formula420 .f420-original-process .f420-eyebrow {
  margin-bottom: 6px;
  font-size: .86rem;
}
.f420-page-formula420 .f420-original-process h3 {
  font-size: clamp(2.1rem, 3.5vw, 3.3rem);
  line-height: .93;
  margin-bottom: 16px;
}
.f420-page-formula420 .f420-benefit-chips {
  gap: 8px;
  margin-bottom: 14px;
}
.f420-page-formula420 .f420-benefit-chip {
  min-height: 58px;
  padding: 14px 16px;
  font-size: clamp(.98rem, 1.12vw, 1.14rem);
  line-height: 1.05;
}
.f420-page-formula420 .f420-process-grid {
  gap: 10px;
  margin-top: 0;
}
.f420-page-formula420 .f420-process-step {
  min-height: 186px;
  padding: 18px 20px 20px;
}
.f420-page-formula420 .f420-process-step span {
  margin-bottom: 10px;
  font-size: .72rem;
}
.f420-page-formula420 .f420-process-step h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1;
  margin-bottom: 10px;
}
.f420-page-formula420 .f420-process-step p {
  font-size: .8rem;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 620px;
  }
  .f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
    height: 60%;
    right: 8%;
  }
}

@media (max-width: 900px) {
  .f420-page-formula420 .f420-split--original {
    grid-template-columns: 1fr;
  }
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 560px;
  }
  .f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
    height: 64%;
    right: 11%;
  }
}

@media (max-width: 620px) {
  .f420-page-formula420 .f420-copy--original > h2 {
    font-size: clamp(2.1rem, 11vw, 2.8rem);
  }
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 440px;
  }
  .f420-page-formula420 .f420-media-card--original::before {
    top: 14px;
    left: 12px;
    font-size: clamp(6.1rem, 24vw, 8rem);
  }
  .f420-page-formula420 .f420-media-card--original::after {
    left: 14px;
    bottom: 16px;
    font-size: .8rem;
  }
  .f420-page-formula420 .f420-product-stage--original::before {
    bottom: 124px;
  }
  .f420-page-formula420 .f420-product-stage--original::after {
    bottom: 64px;
  }
  .f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
    height: 58%;
    right: 10%;
    bottom: 18px;
  }
  .f420-page-formula420 .f420-original-process h3 {
    font-size: clamp(1.95rem, 9.5vw, 2.5rem);
  }
}


/* =========================================================
   Formula 420 original section refinement — v0.4.6
   Fine-tunes callout typography and extends media block height
   ========================================================= */
.f420-page-formula420 .f420-media-card--original,
.f420-page-formula420 .f420-product-stage--original {
  min-height: 792px;
}
.f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
  height: 64%;
  right: 9%;
}
.f420-page-formula420 .f420-original-process h3 {
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 2.6vw, 2.7rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.f420-page-formula420 .f420-benefit-chip {
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(.9rem, 1vw, 1.02rem);
}
.f420-page-formula420 .f420-process-step span {
  font-size: .7rem;
}
.f420-page-formula420 .f420-process-step h3 {
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.2vw, 1.22rem);
  letter-spacing: -.01em;
}
.f420-page-formula420 .f420-process-step p {
  font-size: .77rem;
  line-height: 1.46;
}

@media (max-width: 1180px) {
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 720px;
  }
  .f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
    height: 62%;
  }
}

@media (max-width: 900px) {
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 620px;
  }
  .f420-page-formula420 .f420-original-process h3 {
    font-size: clamp(1.8rem, 5vw, 2.35rem);
  }
}

@media (max-width: 620px) {
  .f420-page-formula420 .f420-media-card--original,
  .f420-page-formula420 .f420-product-stage--original {
    min-height: 470px;
  }
  .f420-page-formula420 .f420-media-card--original .f420-product-stage--single .p1 {
    height: 59%;
    right: 9%;
  }
  .f420-page-formula420 .f420-original-process h3 {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }
}


/* =========================================================
   Formula 420 page refinements — v0.4.9
   Authority title, accessories image, and online shopping panel
   ========================================================= */
.f420-page-formula420 .f420-authority-card small {
  color: #ff5100;
}

.f420-page-formula420 .f420-media-card--accessories {
  background: #fff;
  overflow: hidden;
}
.f420-page-formula420 .f420-media-card--accessories .f420-media-card__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: scale(1.025);
}

.f420-page-formula420 .f420-route-panel--online {
  background: #ff5100;
  color: #fff;
}
.f420-page-formula420 .f420-route-panel--online .f420-eyebrow--yellow {
  color: #fff;
}
.f420-page-formula420 .f420-route-panel--online .f420-btn--accent {
  background: #fff;
  border-color: #fff;
  color: #111;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-formula420 .f420-media-card--accessories:hover .f420-media-card__image {
    transform: scale(1.055);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  }
  .f420-page-formula420 .f420-route-panel--online .f420-btn--accent:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
  }
}

@media (max-width: 620px) {
  .f420-page-formula420 .f420-media-card--accessories .f420-media-card__image {
    transform: scale(1.01);
  }
}


/* =========================================================
   Formula 420 original section editable composite — v0.4.10
   Restores the dedicated full-composition image control
   ========================================================= */
.f420-page-formula420 .f420-media-card--original {
  min-height: 0;
  aspect-ratio: 828 / 1131;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #fff;
}
.f420-page-formula420 .f420-media-card--original::before,
.f420-page-formula420 .f420-media-card--original::after {
  content: none;
  display: none;
}
.f420-page-formula420 .f420-original-composite-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
}
@media (hover: hover) and (pointer: fine) {
  .f420-page-formula420 .f420-media-card--original:hover .f420-original-composite-image {
    transform: none;
    filter: none;
  }
}
@media (max-width: 900px) {
  .f420-page-formula420 .f420-media-card--original {
    aspect-ratio: 828 / 1131;
  }
}

/* =========================================================
   Formula 420 wholesale media refinement — v0.4.11
   Makes the wholesale display image fill its entire media container
   ========================================================= */
.f420-page-formula420 .f420-wholesale-teaser .f420-media-card {
  background: #fff;
  overflow: hidden;
}
.f420-page-formula420 .f420-wholesale-teaser .f420-media-card__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: scale(1.025);
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-formula420 .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    transform: scale(1.055);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  }
}

@media (max-width: 620px) {
  .f420-page-formula420 .f420-wholesale-teaser .f420-media-card__image {
    transform: scale(1.01);
  }
}


/* =========================================================
   Formula 420 Original mobile benefit row — v0.4.12
   Keep only the three benefit chips side by side on mobile
   ========================================================= */
@media (max-width: 620px) {
  .f420-page-formula420 .f420-original-process .f420-benefit-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .f420-page-formula420 .f420-original-process .f420-benefit-chip {
    min-width: 0;
    min-height: 72px;
    padding: 12px 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(.66rem, 2.8vw, .78rem);
    line-height: 1.08;
    white-space: nowrap;
  }
}

/*
   v0.4.13
   Formula 420 hero now uses a single replaceable composite image
*/
.f420-page-formula420 .f420-hero__stage--single-image {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 0;
}
.f420-page-formula420 .f420-hero-composite-image {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 26px rgba(0,0,0,.18));
  transform: translateY(0);
  transition: transform .5s ease, filter .5s ease;
}
.f420-page-formula420 .f420-hero__stage--single-image:hover .f420-hero-composite-image {
  transform: translateY(-8px) scale(1.01);
  filter: drop-shadow(0 32px 30px rgba(0,0,0,.22));
}
@media (max-width: 1100px) {
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 450px;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    max-width: 860px;
  }
}
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 360px;
    margin-inline: -6px;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    max-width: none;
    width: 100%;
  }
}

/* =========================================================
   Formula 420 hero scale refinement — v0.4.14
   Makes the single composite artwork fill the hero vertically
   ========================================================= */
@media (min-width: 1101px) {
  .f420-page-formula420 .f420-hero__grid {
    grid-template-columns: minmax(420px, .8fr) minmax(0, 1.2fr);
    gap: clamp(36px, 4.2vw, 78px);
  }
  .f420-page-formula420 .f420-hero__copy {
    position: relative;
    z-index: 2;
  }
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 620px;
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 108%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    transform: none;
  }
  .f420-page-formula420 .f420-hero__stage--single-image:hover .f420-hero-composite-image {
    transform: scale(1.01);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .f420-page-formula420 .f420-hero__grid {
    gap: clamp(28px, 4vw, 48px);
  }
  .f420-page-formula420 .f420-hero__copy {
    position: relative;
    z-index: 2;
  }
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 520px;
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 106%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    transform: none;
  }
}

@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 315px;
    overflow: hidden;
    align-items: stretch;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 132%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}


/* =========================================================
   Formula 420 hero final cleanup — v0.4.17
   Removes residual hero shadow, avoids cropping, and improves fit
   ========================================================= */
.f420-page-formula420 .f420-hero__copy {
  position: relative;
  z-index: 2;
}
.f420-page-formula420 .f420-hero__stage--single-image {
  margin-inline: 0;
  background: transparent;
  box-shadow: none;
}
.f420-page-formula420 .f420-hero-composite-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: none !important;
  box-shadow: none !important;
  transform: none;
  transition: transform .35s ease;
}
.f420-page-formula420 .f420-hero__stage--single-image:hover .f420-hero-composite-image {
  transform: translateY(-4px);
  filter: none !important;
  box-shadow: none !important;
}
@media (min-width: 1101px) {
  .f420-page-formula420 .f420-hero__grid {
    grid-template-columns: minmax(400px, .76fr) minmax(0, 1.24fr);
    gap: clamp(28px, 3vw, 54px);
  }
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 520px;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 100%;
    max-width: 1100px;
    height: auto;
    object-fit: contain;
    object-position: right center;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .f420-page-formula420 .f420-hero__grid {
    gap: clamp(24px, 3vw, 40px);
  }
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 470px;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 100%;
    max-width: 940px;
    height: auto;
    object-fit: contain;
    object-position: right center;
  }
}
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero__stage--single-image {
    min-height: 320px;
    margin-inline: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .f420-page-formula420 .f420-hero-composite-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }
}

/* =========================================================
   Formula 710 page redesign — v0.4.18
   Matches the approved working draft while preserving site-wide styling
   ========================================================= */
.f420-page-formula710 {
  --f710-yellow: #ffc629;
  --f710-blue: #1aa8e0;
  --f710-ink: #111111;
}
.f420-page-formula710 .f710-yellow { color: var(--f710-yellow); }
.f420-page-formula710 .f710-blue { color: var(--f710-blue); }
.f420-page-formula710 .f420-eyebrow--blue { color: var(--f710-blue); }

.f710-hero {
  position: relative;
  min-height: clamp(650px, 54vw, 780px);
  overflow: hidden;
  background: #f1f1f1;
}
.f710-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 6.5vw, 92px);
}
.f710-hero__copy { max-width: min(48%, 610px); position: relative; z-index: 2; }
.f710-hero__copy h1 { font-size: clamp(4rem, 6.3vw, 7rem); line-height: .83; letter-spacing: -.035em; }
.f710-hero__copy h3 { margin-top: 24px; max-width: 590px; font-size: clamp(1.6rem, 2.35vw, 2.7rem); line-height: .95; }
.f710-hero__copy .f420-lead { max-width: 560px; font-size: 1.02rem; color: #4b4b4b; }
.f710-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.f710-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(241,241,241,.94) 0%, rgba(241,241,241,.9) 20%, rgba(241,241,241,.64) 37%, rgba(241,241,241,.14) 55%, rgba(241,241,241,0) 70%);
  pointer-events: none;
}
.f710-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}
.f710-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: none;
}

.f710-authority-band { padding-block: clamp(58px, 7vw, 94px); background: var(--f710-yellow); text-align: center; }
.f710-authority-band h2 { margin: 0; color: #111; font-size: clamp(3rem, 5.8vw, 6.4rem); line-height: .88; }
.f710-authority-band .f420-eyebrow { color: #111; }

.f710-products-section { background: #fff; }
.f710-section-heading { max-width: 900px; margin-inline: auto; text-align: center; }
.f710-section-heading h2 { font-size: clamp(3rem, 5vw, 5.6rem); line-height: .9; }
.f710-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(46px, 8vw, 130px); margin-top: clamp(46px, 6vw, 90px); }
.f710-product-card { position: relative; min-width: 0; }
.f710-product-method { display: inline-flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 4px solid var(--f710-yellow); font-family: var(--f420-font-display); text-transform: uppercase; }
.f710-product-card--instant .f710-product-method { border-left-color: var(--f710-blue); }
.f710-product-method strong { font-size: 1.25rem; line-height: 1; }
.f710-product-method span { color: #666; font-size: .66rem; font-weight: 900; letter-spacing: .04em; }
.f710-product-media { min-height: 520px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 16px 20px 0; }
.f710-product-media::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 2px; width: 42%; height: 28px; border-radius: 50%; background: rgba(0,0,0,.22); transform: translateX(-50%); filter: blur(7px); }
.f710-product-image { position: relative; z-index: 1; display: block; width: auto; max-width: 78%; max-height: 500px; object-fit: contain; filter: none; transition: transform .3s ease, filter .3s ease; }
.f710-product-copy { padding-top: 24px; border-top: 1px solid #e5e5e5; }
.f710-product-copy h3 { font-size: clamp(2rem, 3vw, 3.15rem); }
.f710-product-tag { margin: 20px 0 18px; padding-left: 14px; border-left: 4px solid var(--f710-yellow); color: #111; font-family: var(--f420-font-display); font-size: .8rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.f710-product-card--instant .f710-product-tag { border-left-color: var(--f710-blue); }
.f710-product-copy p { color: #404040; }
.f710-product-facts { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e5e5; font-family: var(--f420-font-display); font-size: .78rem; font-weight: 900; letter-spacing: .035em; color: #111 !important; }
.f710-products-actions { justify-content: center; margin-top: clamp(44px, 6vw, 82px); }

.f710-accessories-section { border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; }
.f710-accessories-grid { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.f710-accessories-grid .f420-copy h2 { font-size: clamp(3.2rem, 5vw, 5.4rem); line-height: .88; }
.f710-accessories-visual { min-height: 430px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.f710-accessories-image { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: center; filter: none; transition: transform .35s ease, filter .35s ease; }

.f710-buy-section { background: #fff; }
.f710-route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 44px; border: 1px solid #dedede; }
.f710-route-panel { min-height: 410px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(38px, 5vw, 72px); }
.f710-route-panel h3 { font-size: clamp(3rem, 4.8vw, 5.2rem); }
.f710-route-panel p { max-width: 520px; }
.f710-route-panel--online { position: relative; overflow: hidden; background: #171717; color: #fff; }
.f710-route-panel--online::after { content: "ONLINE"; position: absolute; right: 18px; bottom: -30px; color: rgba(255,255,255,.04); font-family: var(--f420-font-display); font-size: clamp(7rem, 14vw, 12rem); }
.f710-route-panel--online p { color: #e8e8e8; }
.f710-route-panel--local { position: relative; overflow: hidden; border-left: 7px solid var(--f710-blue); background: #fff; }
.f710-route-panel--local::after { content: "LOCAL"; position: absolute; right: 18px; bottom: -30px; color: rgba(26,168,224,.07); font-family: var(--f420-font-display); font-size: clamp(7rem, 14vw, 12rem); }
.f710-route-panel .f420-btn { min-width: min(100%, 420px); }
.f710-btn-blue { background: var(--f710-blue) !important; border-color: var(--f710-blue) !important; color: #fff !important; }

.f710-wholesale-section { border-top: 1px solid #e9e9e9; }
.f710-wholesale-grid { display: grid; grid-template-columns: minmax(340px,.82fr) minmax(0,1.18fr); gap: clamp(44px, 7vw, 110px); align-items: center; }
.f710-wholesale-grid .f420-copy h2 { font-size: clamp(3.2rem, 5vw, 5.5rem); line-height: .9; }
.f710-wholesale-visual { min-height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.f710-wholesale-image { display: block; width: 100%; height: 100%; min-height: 500px; object-fit: contain; object-position: center; filter: none; transition: transform .35s ease, filter .35s ease; }

/* Formula 710 motion and rollover language */
.f420-page-formula710.f420-motion-ready .f420-reveal { opacity: 0; transform: translate3d(0,28px,0); will-change: transform,opacity; transition: transform 660ms cubic-bezier(.2,.68,.18,1), opacity 660ms ease; transition-delay: var(--f420-reveal-delay,0ms); }
.f420-page-formula710.f420-motion-ready .f420-reveal--left { transform: translate3d(-34px,0,0); }
.f420-page-formula710.f420-motion-ready .f420-reveal--right { transform: translate3d(34px,0,0); }
.f420-page-formula710.f420-motion-ready .f420-reveal--scale { transform: translate3d(0,16px,0) scale(.97); }
.f420-page-formula710.f420-motion-ready .f420-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); }

@media (hover:hover) and (pointer:fine) {
  .f420-page-formula710 .f420-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
  .f710-hero__image { transition: transform .4s ease; }
  .f710-hero__visual:hover .f710-hero__image { transform: translateY(-7px) scale(1.01); }
  .f710-product-card:hover .f710-product-image { transform: translateY(-9px) scale(1.02); filter: drop-shadow(0 18px 16px rgba(0,0,0,.15)); }
  .f710-accessories-visual:hover .f710-accessories-image { transform: scale(1.025); filter: drop-shadow(0 16px 18px rgba(0,0,0,.12)); }
  .f710-route-panel { transition: transform .25s ease, box-shadow .25s ease; }
  .f710-route-panel:hover { transform: translateY(-5px); box-shadow: 0 18px 32px rgba(0,0,0,.08); }
  .f710-wholesale-visual:hover .f710-wholesale-image { transform: scale(1.035); filter: drop-shadow(0 18px 18px rgba(0,0,0,.15)); }
}

@media (max-width: 1100px) {
  .f710-hero__copy { max-width: min(50%, 560px); }
  .f710-hero__image { object-position: 70% center; }
  .f710-product-media { min-height: 440px; }
  .f710-product-image { max-height: 420px; }
  .f710-accessories-grid, .f710-wholesale-grid { gap: 42px; }
}
@media (max-width: 900px) {
  .f710-hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  .f710-accessories-grid, .f710-wholesale-grid { grid-template-columns: 1fr; }
  .f710-hero__visual {
    order: 1;
    position: relative;
    inset: auto;
    min-height: clamp(320px, 52vw, 470px);
    height: clamp(320px, 52vw, 470px);
    margin-inline: 0;
    overflow: hidden;
  }
  .f710-hero__visual::before { display: none; }
  .f710-hero__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 68% center;
  }
  .f710-hero__overlay {
    order: 2;
    min-height: auto;
    display: block;
    padding-top: 52px;
    padding-bottom: 20px;
  }
  .f710-hero__copy { max-width: none; }
  .f710-route-grid { grid-template-columns: 1fr; }
  .f710-route-panel--local { border-left: 0; border-top: 7px solid var(--f710-blue); }
  .f710-accessories-visual, .f710-accessories-image { min-height: 360px; }
  .f710-wholesale-visual, .f710-wholesale-image { min-height: 430px; }
}
@media (max-width: 680px) {
  .f710-hero__visual {
    min-height: clamp(300px, 76vw, 430px);
    height: clamp(300px, 76vw, 430px);
  }
  .f710-hero__copy h1 { font-size: clamp(3.4rem,15vw,5rem); }
  .f710-hero__copy h3 { font-size: clamp(1.35rem,6vw,1.85rem); }
  .f710-product-grid { grid-template-columns: 1fr; gap: 70px; }
  .f710-product-media { min-height: 370px; }
  .f710-product-image { max-height: 355px; max-width: 82%; }
  .f710-route-panel { min-height: 340px; padding: 34px 26px; }
  .f710-accessories-visual, .f710-accessories-image { min-height: 280px; }
  .f710-wholesale-visual, .f710-wholesale-image { min-height: 360px; }
}
@media (prefers-reduced-motion:reduce) {
  .f420-page-formula710 .f420-reveal, .f420-page-formula710 .f420-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.f420-page-formula710 .f420-eyebrow--dark { color: #111; }


/* =========================================================
   Formula 710 product section tightening, v0.4.19
   Reduces excess whitespace and narrows the product copy cards
   ========================================================= */
.f420-page-formula710 .f710-products-section {
  padding-block: clamp(62px, 6vw, 88px);
}
.f420-page-formula710 .f710-products-section > .f420-container--wide {
  width: min(1280px, calc(100% - clamp(32px, 6vw, 80px)));
}
.f420-page-formula710 .f710-products-section .f420-section-heading {
  margin-bottom: clamp(30px, 3.5vw, 46px);
}
.f420-page-formula710 .f710-product-grid {
  max-width: 1160px;
  margin: clamp(30px, 3.5vw, 48px) auto 0;
  gap: clamp(48px, 5.5vw, 84px);
  align-items: start;
}
.f420-page-formula710 .f710-product-card {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}
.f420-page-formula710 .f710-product-method {
  margin-bottom: 6px;
}
.f420-page-formula710 .f710-product-media {
  min-height: 390px;
  padding: 8px 14px 0;
}
.f420-page-formula710 .f710-product-image {
  max-width: 72%;
  max-height: 380px;
}
.f420-page-formula710 .f710-product-media::after {
  width: 38%;
  height: 22px;
}
.f420-page-formula710 .f710-product-copy {
  padding-top: 20px;
}
.f420-page-formula710 .f710-product-copy h3 {
  font-size: clamp(1.9rem, 2.35vw, 2.65rem);
  line-height: .95;
}
.f420-page-formula710 .f710-product-tag {
  margin: 16px 0 14px;
}
.f420-page-formula710 .f710-product-copy > p:not(.f710-product-tag):not(.f710-product-facts) {
  max-width: 470px;
  line-height: 1.5;
}
.f420-page-formula710 .f710-product-facts {
  margin-top: 18px;
  padding-top: 14px;
}
.f420-page-formula710 .f710-products-actions {
  margin-top: clamp(34px, 4vw, 52px);
}

@media (max-width: 1100px) {
  .f420-page-formula710 .f710-product-grid {
    gap: 44px;
  }
  .f420-page-formula710 .f710-product-card {
    max-width: 470px;
  }
  .f420-page-formula710 .f710-product-media {
    min-height: 350px;
  }
  .f420-page-formula710 .f710-product-image {
    max-height: 340px;
  }
}

@media (max-width: 680px) {
  .f420-page-formula710 .f710-products-section {
    padding-block: 54px 64px;
  }
  .f420-page-formula710 .f710-product-grid {
    gap: 52px;
    margin-top: 28px;
  }
  .f420-page-formula710 .f710-product-card {
    max-width: 520px;
  }
  .f420-page-formula710 .f710-product-media {
    min-height: 330px;
  }
  .f420-page-formula710 .f710-product-image {
    max-height: 320px;
    max-width: 78%;
  }
}

/* =========================================================
   Formula 710 product bottle position + method rollover, v0.4.20
   Centers bottles vertically, tightens shadows, and animates method labels
   ========================================================= */
.f420-page-formula710 .f710-product-media {
  align-items: center;
  justify-content: center;
}
.f420-page-formula710 .f710-product-image {
  transform: translateY(-28px);
}
.f420-page-formula710 .f710-product-media::after {
  width: 27%;
  height: 14px;
  bottom: 46px;
  background: rgba(0,0,0,.18);
  filter: blur(5px);
}
.f420-page-formula710 .f710-product-method {
  position: relative;
  transform: translate3d(0,0,0);
  transition: transform .26s cubic-bezier(.22,1,.36,1), padding-left .26s ease, filter .26s ease;
}
.f420-page-formula710 .f710-product-method strong,
.f420-page-formula710 .f710-product-method span {
  transition: color .24s ease, letter-spacing .24s ease, transform .24s ease;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-formula710 .f710-product-card:hover .f710-product-image {
    transform: translateY(-38px) scale(1.02);
    filter: drop-shadow(0 16px 14px rgba(0,0,0,.13));
  }
  .f420-page-formula710 .f710-product-card:hover .f710-product-method {
    transform: translate3d(7px,-2px,0);
    padding-left: 18px;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.06));
  }
  .f420-page-formula710 .f710-product-card--advanced:hover .f710-product-method strong,
  .f420-page-formula710 .f710-product-card--advanced:hover .f710-product-method span {
    color: #d99f00;
  }
  .f420-page-formula710 .f710-product-card--instant:hover .f710-product-method strong,
  .f420-page-formula710 .f710-product-card--instant:hover .f710-product-method span {
    color: var(--f710-blue);
  }
  .f420-page-formula710 .f710-product-card:hover .f710-product-method strong {
    letter-spacing: .025em;
    transform: translateX(2px);
  }
}

@media (max-width: 1100px) {
  .f420-page-formula710 .f710-product-image {
    transform: translateY(-24px);
  }
  .f420-page-formula710 .f710-product-media::after {
    width: 28%;
    bottom: 40px;
  }
}

@media (max-width: 680px) {
  .f420-page-formula710 .f710-product-image {
    transform: translateY(-20px);
  }
  .f420-page-formula710 .f710-product-media::after {
    width: 30%;
    height: 13px;
    bottom: 36px;
  }
}


/* =========================================================
   Formula 710 Where To Buy typography alignment — v0.4.21
   Matches the Formula 420 section scale and treatment while
   retaining Formula 710 yellow, blue, black, and white colors.
   ========================================================= */
.f420-page-formula710 .f710-buy-section > .f420-container--wide {
  width: min(var(--f420-container), calc(100% - clamp(32px, 7vw, 96px)));
}
.f420-page-formula710 .f710-buy-section .f710-section-heading {
  max-width: 900px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  text-align: center;
}
.f420-page-formula710 .f710-buy-section .f710-section-heading h2 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: .94;
  letter-spacing: -.028em;
}
.f420-page-formula710 .f710-buy-section .f710-section-heading p {
  max-width: 720px;
  margin-inline: auto;
}
.f420-page-formula710 .f710-buy-section .f710-route-grid {
  margin-top: 0;
}
.f420-page-formula710 .f710-buy-section .f710-route-panel {
  min-height: 390px;
  padding: clamp(34px, 5vw, 64px);
}
.f420-page-formula710 .f710-buy-section .f710-route-panel h3 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: .94;
  letter-spacing: -.028em;
}
.f420-page-formula710 .f710-buy-section .f710-route-panel p {
  max-width: 520px;
}
.f420-page-formula710 .f710-buy-section .f710-route-panel .f420-btn {
  min-width: 0;
  width: auto;
}

@media (max-width: 760px) {
  .f420-page-formula710 .f710-buy-section .f710-route-panel {
    min-height: 330px;
    padding: 32px 24px;
  }
}


/* =========================================================
   Formula 710 consistency refinements — v0.4.22
   Aligns Where To Buy and Wholesale with Formula 420 treatment
   while preserving Formula 710 colors.
   ========================================================= */
.f420-page-formula710 .f710-route-panel--online::after,
.f420-page-formula710 .f710-route-panel--local::after {
  content: none;
  display: none;
}

.f420-page-formula710 .f710-buy-section .f710-route-grid {
  border: 1px solid var(--f420-border);
}
.f420-page-formula710 .f710-buy-section .f710-route-panel {
  min-height: 390px;
  padding: clamp(34px, 5vw, 64px);
  transition: transform 250ms var(--f420-ease), box-shadow 250ms var(--f420-ease);
}
.f420-page-formula710 .f710-buy-section .f710-route-panel--online {
  background: #171717;
  color: #fff;
}
.f420-page-formula710 .f710-buy-section .f710-route-panel--local {
  background: #fff;
  border-left: 6px solid var(--f710-blue);
  color: var(--f420-ink);
}
.f420-page-formula710 .f710-buy-section .f710-route-panel h3 {
  font-family: var(--f420-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: .94;
  letter-spacing: -.028em;
}
.f420-page-formula710 .f710-buy-section .f710-route-panel .f420-btn {
  min-width: 0;
  width: auto;
}

.f420-page-formula710 .f710-wholesale-section {
  background: #f6f6f3;
  border-top: 0;
}
.f420-page-formula710 .f710-wholesale-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.f420-page-formula710 .f710-wholesale-grid .f420-copy h2 {
  font-family: var(--f420-font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.2vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.028em;
}
.f420-page-formula710 .f710-wholesale-grid .f420-copy p {
  max-width: 680px;
}
.f420-page-formula710 .f710-wholesale-visual {
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.f420-page-formula710 .f710-wholesale-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  max-height: 390px;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
  transition: transform 280ms var(--f420-ease), filter 280ms var(--f420-ease);
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-formula710 .f710-buy-section .f710-route-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px rgba(0,0,0,.07);
  }
  .f420-page-formula710 .f710-wholesale-visual:hover .f710-wholesale-image {
    transform: scale(1.04);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  }
}

@media (max-width: 900px) {
  .f420-page-formula710 .f710-buy-section .f710-route-panel--local {
    border-left: 0;
    border-top: 6px solid var(--f710-blue);
  }
  .f420-page-formula710 .f710-wholesale-grid {
    grid-template-columns: 1fr;
  }
  .f420-page-formula710 .f710-wholesale-visual,
  .f420-page-formula710 .f710-wholesale-image {
    min-height: 360px;
    max-height: 360px;
  }
}

@media (max-width: 620px) {
  .f420-page-formula710 .f710-buy-section .f710-route-panel {
    min-height: 330px;
    padding: 32px 24px;
  }
  .f420-page-formula710 .f710-wholesale-grid .f420-copy h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }
  .f420-page-formula710 .f710-wholesale-visual,
  .f420-page-formula710 .f710-wholesale-image {
    min-height: 320px;
    max-height: 320px;
  }
}


/* =========================================================
   Formula 710 wholesale parity refinement — v0.4.23
   Matches Formula 420 wholesale scale, typography, layout, and motion
   while preserving Formula 710 colors.
   ========================================================= */
.f420-page-formula710 .f710-wholesale-section {
  background: #f6f6f3;
  border-top: 0;
}
.f420-page-formula710 .f710-wholesale-section > .f420-container {
  width: min(var(--f420-container), calc(100% - clamp(32px, 7vw, 96px)));
}
.f420-page-formula710 .f710-wholesale-section .f420-split--balanced {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}
.f420-page-formula710 .f710-wholesale-section .f420-copy .f420-eyebrow {
  color: var(--f420-ink);
}
.f420-page-formula710 .f710-wholesale-section .f420-copy h2 {
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: .94;
  letter-spacing: -.028em;
  margin-bottom: .35em;
}
.f420-page-formula710 .f710-wholesale-section .f420-copy p {
  max-width: none;
  margin-bottom: 1.15em;
  font-size: 1rem;
  line-height: 1.6;
}
.f420-page-formula710 .f710-wholesale-section .f420-btn {
  margin-top: 0;
}
.f420-page-formula710 .f710-wholesale-visual {
  aspect-ratio: 7 / 5;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}
.f420-page-formula710 .f710-wholesale-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: scale(1.025);
  transition: transform 280ms var(--f420-ease), filter 280ms var(--f420-ease);
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-formula710 .f710-wholesale-visual:hover .f710-wholesale-image {
    transform: scale(1.055);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  }
}

@media (max-width: 900px) {
  .f420-page-formula710 .f710-wholesale-section .f420-split--balanced {
    grid-template-columns: 1fr;
  }
  .f420-page-formula710 .f710-wholesale-visual {
    aspect-ratio: 7 / 5;
  }
}

@media (max-width: 620px) {
  .f420-page-formula710 .f710-wholesale-section .f420-copy h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .f420-page-formula710 .f710-wholesale-section .f420-copy p {
    font-size: .95rem;
    line-height: 1.55;
  }
  .f420-page-formula710 .f710-wholesale-image {
    transform: scale(1.01);
  }
}


/* =========================================================
   Formula 710 typography + section background refinement, v0.4.24
   Uses the approved Bebas Neue title system and rebalances section colors
   ========================================================= */
.f420-page-formula710 h1,
.f420-page-formula710 h2,
.f420-page-formula710 h3,
.f420-page-formula710 h4,
.f420-page-formula710 h5,
.f420-page-formula710 h6,
.f420-page-formula710 .f710-product-method strong {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
}

.f420-page-formula710 .f710-buy-section {
  background: #f6f6f3;
}

.f420-page-formula710 .f710-wholesale-section {
  background: #fff;
}

.f420-page-formula710 .f710-wholesale-visual {
  background: #fff;
  border-color: transparent;
}


/* =========================================================
   Formula 710 missed title font correction — v0.4.25
   Ensures the remaining route and wholesale titles use Bebas Neue
   ========================================================= */
.f420-page-formula710 .f710-buy-section .f710-route-panel h3,
.f420-page-formula710 .f710-wholesale-section .f420-copy h2,
.f420-page-formula710 .f710-wholesale-section .f420-copy h2 span {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
}

/* =========================================================
   Accessories page editable media + eyebrow treatment — v0.4.26
   ========================================================= */
.f420-page-accessories .f420-accessories-hero-eyebrow__710 {
  color: #ffc629;
}

.f420-page-accessories .f420-accessory-item__visual {
  width: 118px;
  height: 96px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.f420-page-accessories .f420-accessory-item__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: none;
  transition: transform 240ms var(--f420-ease), filter 240ms var(--f420-ease);
}

.f420-page-accessories .f420-accessory-item__visual .f420-media-placeholder {
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
  gap: 3px;
  border: 2px dashed var(--accessory-accent, var(--f420-orange));
  background: #fff;
}

.f420-page-accessories .f420-accessory-item__visual .f420-media-placeholder span {
  font-size: .72rem;
  line-height: 1;
}

.f420-page-accessories .f420-accessory-item__visual .f420-media-placeholder small {
  font-size: .5rem;
  line-height: 1.15;
}

.f420-page-accessories .f420-section--dark .f420-accessory-item__visual .f420-media-placeholder {
  background: #1f1f1f;
  color: #fff;
  border-color: #ffc629;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-accessories .f420-accessory-item:hover .f420-accessory-item__image {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 12px 12px rgba(0,0,0,.12));
  }
}

@media (max-width: 760px) {
  .f420-page-accessories .f420-accessory-item__visual {
    width: 78px;
    height: 78px;
    margin-bottom: 0;
  }
}


/* =========================================================
   Accessories showcase top spacing refinement — v0.4.29
   Removes the hero card shadow and rebuilds the Formula 420 accessory
   section with larger visuals, orange accents, and no grid lines.
   ========================================================= */
.f420-page-accessories .f420-hero__grid {
  grid-template-columns: minmax(400px, .76fr) minmax(0, 1.24fr);
  gap: clamp(28px, 3vw, 54px);
  align-items: center;
}

.f420-page-accessories .f420-accessories-hero__stage {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.f420-page-accessories .f420-accessories-hero__image {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  object-fit: contain;
  object-position: center center;
  filter: none !important;
  box-shadow: none !important;
  transform: none;
  transition: transform .35s ease;
}

.f420-page-accessories .f420-accessory-grid--showcase {
  border-top: 0;
  gap: 56px 24px;
  align-items: start;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item,
.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:nth-child(n) {
  position: relative;
  min-height: 0;
  padding: 30px 4px 6px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 36px);
  max-width: 300px;
  height: 5px;
  border-radius: 999px;
  background: var(--accessory-accent, var(--f420-orange));
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual {
  width: 100%;
  height: 168px;
  margin: 0 0 18px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__image {
  width: 100%;
  height: 100%;
  max-width: 92%;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual .f420-media-placeholder {
  width: min(100%, 138px);
  height: 128px;
  min-height: 0;
  padding: 10px;
  gap: 4px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  box-shadow: none;
  position: relative;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual .f420-media-placeholder::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 10px;
  border-radius: 4px 4px 0 0;
  background: var(--accessory-accent, var(--f420-orange));
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual .f420-media-placeholder span {
  font-size: .78rem;
  line-height: 1;
  margin-top: 14px;
}

.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual .f420-media-placeholder small {
  font-size: .54rem;
  line-height: 1.15;
}

.f420-page-accessories .f420-accessory-grid--showcase h3 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: .92;
}

.f420-page-accessories .f420-accessory-grid--showcase p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: #3b3b3b;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-accessories .f420-accessories-hero__stage:hover .f420-accessories-hero__image {
    transform: translateY(-4px);
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:hover .f420-accessory-item__image {
    transform: translateY(-6px) scale(1.04);
    filter: none;
  }
}

@media (max-width: 1100px) {
  .f420-page-accessories .f420-hero__grid {
    grid-template-columns: minmax(320px, .84fr) minmax(0, 1.16fr);
    gap: 34px;
  }

  .f420-page-accessories .f420-accessories-hero__stage {
    min-height: 460px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .f420-page-accessories .f420-hero__grid {
    grid-template-columns: 1fr;
  }

  .f420-page-accessories .f420-accessories-hero__stage {
    min-height: 400px;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .f420-page-accessories .f420-accessories-hero__stage {
    min-height: 310px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 18px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item,
  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:nth-child(n) {
    display: flex;
    grid-template-columns: unset;
    align-items: flex-start;
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual {
    width: 100%;
    height: 122px;
    margin-bottom: 14px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual .f420-media-placeholder {
    width: min(100%, 110px);
    height: 102px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase h3 {
    font-size: 1.15rem;
  }

  .f420-page-accessories .f420-accessory-grid--showcase p {
    font-size: .72rem;
  }
}

@media (max-width: 520px) {

  .f420-ourstory-products__media,
  .f420-ourstory-products__overlay {
    min-height: 560px;
  }

  .f420-ourstory-products__overlay {
    padding-top: 16px;
  }

  .f420-ourstory-products__heading p {
    max-width: 96%;
    margin-top: 18px;
    font-size: .98rem;
    line-height: 1.45;
  }


  .f420-page-accessories .f420-accessory-grid--showcase {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Accessories 710 showcase parity — v0.4.30
   Applies the same showcase layout treatment used for Formula 420
   accessories while preserving Formula 710 colors.
   ========================================================= */
.f420-page-accessories .f420-accessory-grid--showcase-710 {
  gap: 56px 24px;
  align-items: start;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item,
.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item:nth-child(n) {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 30px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item::before {
  background: var(--accessory-accent, #FCC629);
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual {
  width: 100%;
  height: 168px;
  margin: 0 0 18px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__image {
  width: 100%;
  height: 100%;
  max-width: 92%;
  object-fit: contain;
  object-position: center center;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder {
  width: min(100%, 138px);
  height: 128px;
  min-height: 0;
  padding: 10px;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #1f1f1f 0%, #191919 100%);
  box-shadow: none;
  color: #ffffff;
  position: relative;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 10px;
  border-radius: 4px 4px 0 0;
  background: var(--accessory-accent, #FCC629);
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder span {
  font-size: .78rem;
  line-height: 1;
  margin-top: 14px;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder small {
  font-size: .54rem;
  line-height: 1.15;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 h3 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: .92;
  color: #ffffff;
}

.f420-page-accessories .f420-accessory-grid--showcase-710 p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item:hover .f420-accessory-item__image {
    transform: translateY(-6px) scale(1.04);
    filter: none;
  }
}

@media (max-width: 1100px) {
  .f420-page-accessories .f420-accessory-grid--showcase-710 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .f420-page-accessories .f420-accessory-grid--showcase-710 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 18px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item,
  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item:nth-child(n) {
    display: flex;
    grid-template-columns: unset;
    align-items: flex-start;
  }

  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual {
    width: 100%;
    height: 122px;
    margin-bottom: 14px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder {
    width: min(100%, 110px);
    height: 102px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase-710 h3 {
    font-size: 1.15rem;
  }

  .f420-page-accessories .f420-accessory-grid--showcase-710 p {
    font-size: .72rem;
  }
}

@media (max-width: 520px) {
  .f420-page-accessories .f420-accessory-grid--showcase-710 {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Formula 710 accessories white section — v0.4.31
   Keeps the Formula 710 yellow accent treatment while switching
   the section background to white and all readable copy to black.
   ========================================================= */
.f420-page-accessories .f420-accessories-710-section {
  background: #ffffff;
  color: #111111;
}

.f420-page-accessories .f420-accessories-710-section .f420-section-heading h2,
.f420-page-accessories .f420-accessories-710-section .f420-accessory-grid--showcase-710 h3 {
  color: #111111;
}

.f420-page-accessories .f420-accessories-710-section .f420-accessory-grid--showcase-710 p {
  color: #3b3b3b;
}

.f420-page-accessories .f420-accessories-710-section .f420-accessory-grid--showcase-710 .f420-accessory-item__visual .f420-media-placeholder {
  border-color: #d5d5d5;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  color: #111111;
}


/* =========================================================
   Accessories accent-bar hover animation — v0.4.32
   Keeps the existing product zoom and shortens each Formula 420
   and Formula 710 accent bar by 75% on mouse rollover.
   ========================================================= */
.f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item::before {
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(.2,.68,.18,1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:hover::before {
    transform: scaleX(.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item::before,
  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:hover::before {
    transform: none;
    transition: none;
  }
}


/* =========================================================
   Accessories wholesale media cleanup — v0.4.33
   Removes the framed card look and image shadow from the
   WHOLESALE image on the Accessories page only.
   ========================================================= */
.f420-page-accessories .f420-wholesale-teaser .f420-media-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.f420-page-accessories .f420-wholesale-teaser .f420-media-card__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: none !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-accessories .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    filter: none !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   Accessories hero eyebrow color split — v0.4.34
   ========================================================= */
.f420-page-accessories .f420-accessories-hero-eyebrow {
  color: #111111;
}

.f420-page-accessories .f420-accessories-hero-eyebrow__420 {
  color: #ff5100;
}

.f420-page-accessories .f420-accessories-hero-eyebrow__plus {
  color: inherit;
}

.f420-page-accessories .f420-accessories-hero-eyebrow__710 {
  color: #ffc629;
}


/* =========================================================
   Accessories page section reveal motion — v0.4.35
   Matches the established Home, Formula 420, and Formula 710
   intro-animation language while preserving existing rollovers.
   ========================================================= */
.f420-page-accessories.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition:
    transform 660ms cubic-bezier(.2, .68, .18, 1),
    opacity 660ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-accessories.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-34px, 0, 0);
}

.f420-page-accessories.f420-motion-ready .f420-reveal--right {
  transform: translate3d(34px, 0, 0);
}

.f420-page-accessories.f420-motion-ready .f420-reveal--scale {
  transform: translate3d(0, 16px, 0) scale(.97);
}

.f420-page-accessories.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}


/* =========================================================
   BLING page navy text + dark accent palette — v0.4.36
   Replaces the page's black/ink treatments with BLING navy
   while preserving all existing orange, yellow, white, and
   supporting colors.
   ========================================================= */
.f420-page-bling {
  --f420-ink: #002d58;
  --f420-charcoal: #002d58;
  --f420-dark: #002d58;
  color: #002d58;
}

.f420-page-bling .f420-section--dark,
.f420-page-bling .f420-route-panel--online,
.f420-page-bling .f420-btn--dark {
  background-color: #002d58;
}

.f420-page-bling .f420-btn--dark {
  border-color: #002d58;
}


/* =========================================================
   BLING reusable-cleaner guidance panel — v0.4.37
   Replaces the single placeholder media card with a three-card
   guidance panel inspired by the approved reference direction.
   ========================================================= */
.f420-page-bling .f420-bling-reuse-section {
  overflow: hidden;
}

.f420-page-bling .f420-bling-usage-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
  border-radius: 12px;
  background: #f4f4f4;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}

.f420-page-bling .f420-bling-usage-panel::before,
.f420-page-bling .f420-bling-usage-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.f420-page-bling .f420-bling-usage-panel::before {
  width: 220px;
  height: 220px;
  top: -110px;
  right: -70px;
  background: rgba(0,45,88,.18);
}

.f420-page-bling .f420-bling-usage-panel::after {
  width: 340px;
  height: 140px;
  left: 24px;
  bottom: -86px;
  background: rgba(0,45,88,.12);
}

.f420-page-bling .f420-bling-usage-step {
  position: relative;
  z-index: 1;
  min-height: 220px;
  padding: 18px 16px 16px;
  border-radius: 8px;
  background: #f7f7f7;
  border: 1px solid #d7d7d7;
  color: #002d58;
}

.f420-page-bling .f420-bling-usage-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.f420-page-bling .f420-bling-usage-step__badge {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--f420-font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
}

.f420-page-bling .f420-bling-usage-step--orange .f420-bling-usage-step__badge { background: #ff5100; }
.f420-page-bling .f420-bling-usage-step--yellow .f420-bling-usage-step__badge { background: #f0bb1a; color: #002d58; }
.f420-page-bling .f420-bling-usage-step--navy .f420-bling-usage-step__badge { background: #002d58; }

.f420-page-bling .f420-bling-usage-step__icon {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 42px;
  color: #002d58;
  flex: 0 0 auto;
}

/* Bottle icon */
.f420-page-bling .f420-bling-usage-step__icon--bottle::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 7px;
  width: 16px;
  height: 26px;
  border: 3px solid currentColor;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.f420-page-bling .f420-bling-usage-step__icon--bottle::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 1px;
  width: 8px;
  height: 8px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.f420-page-bling .f420-bling-usage-step__icon--bottle {
  background:
    radial-gradient(circle at 4px 17px, currentColor 0 1.5px, transparent 1.7px),
    radial-gradient(circle at 38px 17px, currentColor 0 1.5px, transparent 1.7px),
    linear-gradient(currentColor, currentColor) 4px 17px/7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 31px 17px/7px 2px no-repeat;
  background-repeat: no-repeat;
}

/* Store / plus icon */
.f420-page-bling .f420-bling-usage-step__icon--store::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.f420-page-bling .f420-bling-usage-step__icon--store::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 11px;
  width: 3px;
  height: 20px;
  background: currentColor;
  box-shadow: -8px 8.5px 0 -8px currentColor;
}
.f420-page-bling .f420-bling-usage-step__icon--store {
  background:
    linear-gradient(currentColor, currentColor) center/20px 3px no-repeat,
    linear-gradient(currentColor, currentColor) center/3px 20px no-repeat;
}

/* Reuse / faucet-drop icon */
.f420-page-bling .f420-bling-usage-step__icon--reuse::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 22px;
  height: 3px;
  background: currentColor;
  border-radius: 3px;
  box-shadow: 13px -6px 0 0 currentColor;
}
.f420-page-bling .f420-bling-usage-step__icon--reuse::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 14px;
  width: 3px;
  height: 11px;
  background: currentColor;
  border-radius: 3px;
}
.f420-page-bling .f420-bling-usage-step__icon--reuse {
  background:
    radial-gradient(ellipse at center, currentColor 0 55%, transparent 58%) 20px 28px/12px 14px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 22px/15px 3px no-repeat;
}

.f420-page-bling .f420-bling-usage-step h3 {
  margin: 0 0 8px;
  color: #002d58;
  font-size: 1.45rem;
}

.f420-page-bling .f420-bling-usage-step p {
  margin: 0;
  color: rgba(0,45,88,.82);
  font-size: .94rem;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .f420-page-bling .f420-bling-usage-panel {
    grid-template-columns: 1fr;
  }

  .f420-page-bling .f420-bling-usage-step {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .f420-page-bling .f420-bling-reuse-section .f420-split--balanced {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-bling-usage-panel,
  .f420-page-bling .f420-bling-usage-step,
  .f420-page-bling .f420-bling-usage-step__icon {
    transition: none !important;
  }
}


/* =========================================================
   BLING reusable cleaner fine-tuning — v0.4.38
   Updated step copy, improved icon silhouettes, removed the
   lower decorative circle, and tuned the cards for longer copy.
   ========================================================= */
.f420-page-bling .f420-bling-usage-panel::after {
  display: none;
}

.f420-page-bling .f420-bling-usage-step {
  min-height: 268px;
}

.f420-page-bling .f420-bling-usage-step__icon {
  width: 46px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.f420-page-bling .f420-bling-usage-step__icon::before,
.f420-page-bling .f420-bling-usage-step__icon::after {
  content: none !important;
}

.f420-page-bling .f420-bling-usage-step__icon--bottle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23002d58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7h10'/%3E%3Cpath d='M21 7v5l-2 2v18c0 4 3 7 7 7s7-3 7-7V14l-2-2V7'/%3E%3Cpath d='M8 18c-2 1-2 4 0 5'/%3E%3Cpath d='M12 14c-3 2-3 7 0 9'/%3E%3Cpath d='M40 18c2 1 2 4 0 5'/%3E%3Cpath d='M36 14c3 2 3 7 0 9'/%3E%3C/svg%3E");
}

.f420-page-bling .f420-bling-usage-step__icon--cover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23002d58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14h28'/%3E%3Cpath d='M16 14v5'/%3E%3Cpath d='M32 14v5'/%3E%3Cpath d='M12 20c3 0 4-2 6-2s3 2 6 2 4-2 6-2 3 2 6 2'/%3E%3Ccircle cx='17' cy='30' r='5'/%3E%3Ccircle cx='31' cy='30' r='5'/%3E%3Cpath d='M17 25v-3'/%3E%3Cpath d='M31 25v-3'/%3E%3C/svg%3E");
}

.f420-page-bling .f420-bling-usage-step__icon--rinse {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23002d58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h22'/%3E%3Cpath d='M26 12v6'/%3E%3Cpath d='M20 18h14'/%3E%3Cpath d='M30 18v8'/%3E%3Cpath d='M27 31c0-3 3-5 3-8 0 3 3 5 3 8a3 3 0 1 1-6 0Z' fill='%23002d58' stroke='none'/%3E%3Cpath d='M13 22c0 2 1 3 2 4'/%3E%3Cpath d='M17 24c0 2 1 3 2 4'/%3E%3C/svg%3E");
}

.f420-page-bling .f420-bling-usage-step h3 {
  margin-bottom: 10px;
}

.f420-page-bling .f420-bling-usage-step p {
  font-size: .96rem;
  line-height: 1.48;
}


/* =========================================================
   BLING reusable cleaner width refinement — v0.4.39
   Make the 3-card panel wider and let the cards use more
   of the available section width without becoming oversized.
   ========================================================= */
.f420-page-bling .f420-bling-reuse-section .f420-split--balanced {
  grid-template-columns: minmax(0, .88fr) minmax(700px, 1.12fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.f420-page-bling .f420-bling-usage-panel {
  width: 100%;
  max-width: none;
  padding: 28px;
  gap: 16px;
  border-radius: 14px;
}

.f420-page-bling .f420-bling-usage-step {
  min-height: 286px;
  padding: 22px 20px 18px;
}

.f420-page-bling .f420-bling-usage-step__top {
  margin-bottom: 16px;
}

.f420-page-bling .f420-bling-usage-step h3 {
  font-size: 1.6rem;
}

.f420-page-bling .f420-bling-usage-step p {
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 1360px) {
  .f420-page-bling .f420-bling-reuse-section .f420-split--balanced {
    grid-template-columns: minmax(0, .95fr) minmax(620px, 1.05fr);
  }
}

@media (max-width: 1120px) {
  .f420-page-bling .f420-bling-reuse-section .f420-split--balanced {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .f420-page-bling .f420-bling-usage-panel {
    padding: 22px;
    gap: 14px;
  }

  .f420-page-bling .f420-bling-usage-step {
    min-height: 0;
    padding: 20px 18px 16px;
  }
}

/* =========================================================
   BLING reusable cleaner heading scale — v0.4.40
   Makes the SHAKE. RINSE & ENJOY! title more prominent while
   preserving the current section balance and responsive layout.
   ========================================================= */
.f420-page-bling .f420-bling-reuse-section .f420-copy > h2 {
  font-size: clamp(4rem, 5.4vw, 6rem);
  line-height: .88;
  letter-spacing: -.035em;
  max-width: 7.2ch;
}

@media (max-width: 1120px) {
  .f420-page-bling .f420-bling-reuse-section .f420-copy > h2 {
    font-size: clamp(3.8rem, 8vw, 5.4rem);
    max-width: 8ch;
  }
}

@media (max-width: 620px) {
  .f420-page-bling .f420-bling-reuse-section .f420-copy > h2 {
    font-size: clamp(3.2rem, 15vw, 4.35rem);
    max-width: 7.5ch;
  }
}


/* =========================================================
   BLING reusable cleaner top-right star — v0.4.41
   Replaces the circular decorative outline with a 5-point star
   while preserving the same subtle scale and visual weight.
   ========================================================= */
.f420-page-bling .f420-bling-usage-panel::before {
  width: 260px;
  height: 260px;
  top: -112px;
  right: -88px;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cpath d='M130 18 156.7 91.8 234.6 94.4 173.1 142.4 194.8 217.2 130 173.5 65.2 217.2 86.9 142.4 25.4 94.4 103.3 91.8Z' fill='%23ffffff' fill-opacity='0.05' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* =========================================================
   BLING reusable cleaner star and card icons — v0.4.42
   Enlarges the decorative star by 25% and replaces the
   three step-card icons with the provided approved SVGs.
   ========================================================= */
.f420-page-bling .f420-bling-usage-panel::before {
  width: 325px;
  height: 325px;
  top: -140px;
  right: -110px;
}

.f420-page-bling .f420-bling-usage-step__icon {
  width: 48px;
  height: 48px;
}

.f420-page-bling .f420-bling-usage-step__icon--bottle {
  background-image: url("../images/bling/bling-step-1-shake.svg");
}

.f420-page-bling .f420-bling-usage-step__icon--cover {
  background-image: url("../images/bling/bling-step-2-cover.svg");
}

.f420-page-bling .f420-bling-usage-step__icon--rinse {
  background-image: url("../images/bling/bling-step-3-rinse.svg");
}


/* =========================================================
   BLING merchandising support section + page motion - v0.4.43
   Adds the new merchandising-support card section, introduces
   refined hover motion for each card, and brings section intro
   reveals to the BLING page for consistency.
   ========================================================= */
.f420-page-bling .f420-bling-merch-section {
  padding-top: clamp(54px, 6vw, 84px);
}

.f420-page-bling .f420-bling-merch-heading {
  margin-bottom: clamp(28px, 4vw, 40px);
  text-align: center;
}

.f420-page-bling .f420-bling-merch-heading h2 {
  margin: 0 auto;
  font-size: clamp(3rem, 5.2vw, 5rem);
  line-height: .94;
  letter-spacing: -.035em;
  max-width: 12ch;
}

.f420-page-bling .f420-bling-merch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.f420-page-bling .f420-bling-merch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 45, 88, .08);
  background: linear-gradient(180deg, #fafafa 0%, #f3f0ec 100%);
  box-shadow: 0 12px 28px rgba(0, 45, 88, .08);
  transition: transform 340ms cubic-bezier(.2, .8, .2, 1), box-shadow 340ms ease, border-color 340ms ease;
  transform-origin: center bottom;
}

.f420-page-bling .f420-bling-merch-card::after {
  content: "";
  position: absolute;
  inset: -20% auto auto -35%;
  width: 48%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translate3d(-180%, 0, 0) rotate(16deg);
  transition: transform 580ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  opacity: .55;
}

.f420-page-bling .f420-bling-merch-card__visual {
  position: relative;
  min-height: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(247,243,238,.98) 100%);
  overflow: hidden;
}

.f420-page-bling .f420-bling-merch-card__visual::before {
  content: "";
  position: absolute;
  inset: auto -8% 0 auto;
  width: 78%;
  height: 58%;
  background: linear-gradient(135deg, rgba(255, 81, 0, .10), rgba(240, 187, 26, .08));
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  transition: transform 340ms cubic-bezier(.2, .8, .2, 1), opacity 340ms ease;
}

.f420-page-bling .f420-bling-merch-card__image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 248px;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 45, 88, .10));
  transition: transform 340ms cubic-bezier(.2, .8, .2, 1), filter 340ms ease;
}

.f420-page-bling .f420-bling-merch-card__visual .f420-media-placeholder {
  position: relative;
  z-index: 1;
  width: min(100%, 250px);
  min-height: 176px;
  padding: 22px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 45, 88, .16);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 24px rgba(0, 45, 88, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.f420-page-bling .f420-bling-merch-card__visual .f420-media-placeholder span {
  font-size: 1.1rem;
  line-height: 1;
}

.f420-page-bling .f420-bling-merch-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 12px 16px;
  background: #ff5100;
  text-align: center;
  transition: background 340ms ease, transform 340ms cubic-bezier(.2, .8, .2, 1);
}

.f420-page-bling .f420-bling-merch-card__footer h3 {
  margin: 0;
  font-family: var(--f420-font-display);
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  line-height: .94;
  color: #fff;
  letter-spacing: -.015em;
}

.f420-page-bling .f420-bling-merch-card:hover,
.f420-page-bling .f420-bling-merch-card:focus-within {
  box-shadow: 0 24px 42px rgba(0, 45, 88, .18);
  border-color: rgba(0, 45, 88, .18);
}

.f420-page-bling .f420-bling-merch-card:nth-child(odd):hover,
.f420-page-bling .f420-bling-merch-card:nth-child(odd):focus-within {
  transform: translateY(-10px) rotate(-.8deg);
}

.f420-page-bling .f420-bling-merch-card:nth-child(even):hover,
.f420-page-bling .f420-bling-merch-card:nth-child(even):focus-within {
  transform: translateY(-10px) rotate(.8deg);
}

.f420-page-bling .f420-bling-merch-card:hover::after,
.f420-page-bling .f420-bling-merch-card:focus-within::after {
  transform: translate3d(320%, 0, 0) rotate(16deg);
}

.f420-page-bling .f420-bling-merch-card:hover .f420-bling-merch-card__visual::before,
.f420-page-bling .f420-bling-merch-card:focus-within .f420-bling-merch-card__visual::before {
  transform: translate3d(10px, -8px, 0) scale(1.06);
  opacity: 1;
}

.f420-page-bling .f420-bling-merch-card:hover .f420-bling-merch-card__image,
.f420-page-bling .f420-bling-merch-card:focus-within .f420-bling-merch-card__image {
  transform: translateY(-6px) scale(1.045);
  filter: drop-shadow(0 16px 24px rgba(0, 45, 88, .16));
}

.f420-page-bling .f420-bling-merch-card:hover .f420-bling-merch-card__footer,
.f420-page-bling .f420-bling-merch-card:focus-within .f420-bling-merch-card__footer {
  background: linear-gradient(90deg, #ff5100 0%, #ff6d22 100%);
  transform: translateY(-1px);
}

.f420-page-bling.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition: transform 660ms cubic-bezier(.2, .68, .18, 1), opacity 660ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-bling.f420-motion-ready .f420-reveal--left { transform: translate3d(-34px, 0, 0); }
.f420-page-bling.f420-motion-ready .f420-reveal--right { transform: translate3d(34px, 0, 0); }
.f420-page-bling.f420-motion-ready .f420-reveal--scale { transform: translate3d(0, 18px, 0) scale(.965); }
.f420-page-bling.f420-motion-ready .f420-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

@media (max-width: 1180px) {
  .f420-page-bling .f420-bling-merch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .f420-page-bling .f420-bling-merch-heading h2 {
    max-width: 9.8ch;
  }

  .f420-page-bling .f420-bling-merch-grid {
    grid-template-columns: 1fr;
  }

  .f420-page-bling .f420-bling-merch-card__visual {
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-bling-merch-card,
  .f420-page-bling .f420-bling-merch-card::after,
  .f420-page-bling .f420-bling-merch-card__visual::before,
  .f420-page-bling .f420-bling-merch-card__image,
  .f420-page-bling .f420-bling-merch-card__footer,
  .f420-page-bling .f420-reveal,
  .f420-page-bling .f420-reveal.is-visible {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   BLING reusable cleaner card hover motion - v0.4.44
   Adds tasteful mouse rollover animation to the three reusable
   cleaner step cards while preserving the current layout.
   ========================================================= */
.f420-page-bling .f420-bling-usage-step {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), box-shadow 320ms ease, border-color 320ms ease, background 320ms ease;
  transform-origin: center bottom;
}

.f420-page-bling .f420-bling-usage-step::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,45,88,.16) 0%, rgba(0,45,88,0) 72%);
  opacity: 0;
  transform: scale(.78);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.f420-page-bling .f420-bling-usage-step__badge,
.f420-page-bling .f420-bling-usage-step__icon,
.f420-page-bling .f420-bling-usage-step h3,
.f420-page-bling .f420-bling-usage-step p {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), color 320ms ease, opacity 320ms ease;
}

.f420-page-bling .f420-bling-usage-step:hover,
.f420-page-bling .f420-bling-usage-step:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 30px rgba(0,45,88,.14);
  border-color: rgba(0,45,88,.16);
  background: #fbfbfb;
}

.f420-page-bling .f420-bling-usage-step:hover::after,
.f420-page-bling .f420-bling-usage-step:focus-within::after {
  opacity: 1;
  transform: scale(1);
}

.f420-page-bling .f420-bling-usage-step:hover .f420-bling-usage-step__badge,
.f420-page-bling .f420-bling-usage-step:focus-within .f420-bling-usage-step__badge {
  transform: scale(1.08);
}

.f420-page-bling .f420-bling-usage-step:hover .f420-bling-usage-step__icon,
.f420-page-bling .f420-bling-usage-step:focus-within .f420-bling-usage-step__icon {
  transform: translateY(-2px) scale(1.06);
}

.f420-page-bling .f420-bling-usage-step:hover h3,
.f420-page-bling .f420-bling-usage-step:focus-within h3 {
  transform: translateY(-1px);
}

.f420-page-bling .f420-bling-usage-step:hover p,
.f420-page-bling .f420-bling-usage-step:focus-within p {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-bling-usage-step,
  .f420-page-bling .f420-bling-usage-step::after,
  .f420-page-bling .f420-bling-usage-step__badge,
  .f420-page-bling .f420-bling-usage-step__icon,
  .f420-page-bling .f420-bling-usage-step h3,
  .f420-page-bling .f420-bling-usage-step p {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   BLING size cards + merchandising label typography - v0.4.45
   Applies Bebas Neue to the requested titles, adds size-type
   labels, and introduces levitating hover motion for the
   ONE CLEANER. THREE SIZES. cards while preserving layout.
   ========================================================= */
.f420-page-bling .f420-size-card {
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), box-shadow 320ms ease, border-color 320ms ease;
  transform-origin: center bottom;
}

.f420-page-bling .f420-size-card__media {
  position: relative;
  overflow: visible;
}

.f420-page-bling .f420-size-card__media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: min(72%, 180px);
  height: 18px;
  transform: translateX(-50%) scale(.9);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(10, 49, 90, .20) 0%, rgba(10, 49, 90, .10) 38%, rgba(10, 49, 90, 0) 72%);
  opacity: .42;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 320ms ease, filter 320ms ease;
  pointer-events: none;
}

.f420-page-bling .f420-size-card__media img {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), filter 320ms ease;
}

.f420-page-bling .f420-size-card__kicker {
  display: block;
  margin-top: 16px;
  color: var(--size-accent, #0A315A);
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .08em;
}

.f420-page-bling .f420-size-card h3 {
  margin-top: 4px;
  margin-bottom: 8px;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.5rem, 3vw, 3.4rem);
  line-height: .92;
  letter-spacing: .01em;
}

.f420-page-bling .f420-bling-merch-card__footer h3 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(1.55rem, 1.95vw, 2rem);
  letter-spacing: .015em;
}

.f420-page-bling .f420-size-card:hover,
.f420-page-bling .f420-size-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 18px 32px rgba(0, 45, 88, .10);
  border-color: rgba(0, 45, 88, .14);
}

.f420-page-bling .f420-size-card:hover .f420-size-card__media img,
.f420-page-bling .f420-size-card:focus-within .f420-size-card__media img {
  transform: translateY(-12px);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.12));
}

.f420-page-bling .f420-size-card:hover .f420-size-card__media::after,
.f420-page-bling .f420-size-card:focus-within .f420-size-card__media::after {
  opacity: .62;
  transform: translateX(-50%) scale(.76);
  filter: blur(.2px);
}

@media (max-width: 900px) {
  .f420-page-bling .f420-size-card__kicker {
    font-size: .95rem;
  }

  .f420-page-bling .f420-size-card h3 {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-size-card,
  .f420-page-bling .f420-size-card__media img,
  .f420-page-bling .f420-size-card__media::after {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   BLING typography + size-card hierarchy refinements - v0.4.46
   - Forces Bebas Neue on merchandising footer titles
   - Makes FULL SIZE / TRAVEL SIZE / MINI the primary headings
   - Makes 16 OZ / 4 OZ / 2 OZ smaller secondary size labels
   - Enhances the bottle levitation hover effect
   ========================================================= */
.f420-page-bling .f420-bling-merch-card__footer h3 {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.15vw, 2.35rem);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.f420-page-bling .f420-size-card {
  justify-content: flex-start;
}

.f420-page-bling .f420-size-card__media {
  margin-bottom: 18px;
}

.f420-page-bling .f420-size-card__kicker {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--size-accent, #0A315A);
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 2.9vw, 3rem);
  line-height: .92;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.f420-page-bling .f420-size-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--size-accent, #0A315A);
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .96;
}

.f420-page-bling .f420-size-card p {
  max-width: 18ch;
  margin-inline: auto;
}

.f420-page-bling .f420-size-card__media::after {
  bottom: 6px;
  width: min(74%, 190px);
  height: 22px;
  transform: translateX(-50%) scale(.82);
  background: radial-gradient(ellipse at center, rgba(10, 49, 90, .22) 0%, rgba(10, 49, 90, .12) 42%, rgba(10, 49, 90, 0) 74%);
  opacity: .50;
}

.f420-page-bling .f420-size-card:hover,
.f420-page-bling .f420-size-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 32px rgba(0, 45, 88, .10);
  border-color: rgba(0, 45, 88, .14);
}

.f420-page-bling .f420-size-card:hover .f420-size-card__media img,
.f420-page-bling .f420-size-card:focus-within .f420-size-card__media img {
  transform: translateY(-18px);
  filter: drop-shadow(0 26px 22px rgba(0,0,0,.10));
}

.f420-page-bling .f420-size-card:hover .f420-size-card__media::after,
.f420-page-bling .f420-size-card:focus-within .f420-size-card__media::after {
  opacity: .72;
  transform: translateX(-50%) scale(.60);
  filter: blur(.35px);
}

@media (max-width: 900px) {
  .f420-page-bling .f420-size-card__kicker {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .f420-page-bling .f420-size-card h3 {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }

  .f420-page-bling .f420-bling-merch-card__footer h3 {
    font-size: clamp(1.45rem, 5vw, 1.9rem);
  }
}


/* =========================================================
   BLING single composite hero image - v0.4.47
   Replaces the separate staged product images with one large,
   editable hero composition, matching the approved homepage
   single-image workflow.
   ========================================================= */
.f420-page-bling .f420-bling-hero__stage {
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-inline: 0;
}

.f420-page-bling .f420-bling-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1040px;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-bling .f420-bling-hero__stage:hover .f420-bling-hero__image {
    transform: translateY(-5px) scale(1.006);
  }
}

@media (max-width: 900px) {
  .f420-page-bling .f420-bling-hero__stage {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .f420-page-bling .f420-bling-hero__stage {
    aspect-ratio: auto;
    min-height: 300px;
    margin-inline: -10px;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 100%;
    height: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-bling-hero__image,
  .f420-page-bling .f420-bling-hero__stage:hover .f420-bling-hero__image {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   BLING massive composite hero + separate size media slots - v0.4.48
   Makes the single BLING hero composition substantially larger while
   preserving a practical balance with the copy. The size cards now use
   independent editable image slots.
   ========================================================= */
.f420-page-bling .f420-hero__grid {
  grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr);
  gap: clamp(18px, 3vw, 46px);
}

.f420-page-bling .f420-hero__copy {
  max-width: 580px;
}

.f420-page-bling .f420-bling-hero__stage {
  width: calc(100% + clamp(72px, 8vw, 150px));
  margin-right: calc(clamp(72px, 8vw, 150px) * -1);
  margin-left: clamp(-30px, -2vw, -12px);
  aspect-ratio: 16 / 9;
  min-height: 560px;
}

.f420-page-bling .f420-bling-hero__image {
  width: 114%;
  height: auto;
  max-width: 1320px;
  max-height: 700px;
  object-fit: contain;
}

.f420-page-bling .f420-bling-hero__stage .f420-media-placeholder {
  width: min(100%, 1180px);
  min-height: 560px;
}

@media (max-width: 1180px) {
  .f420-page-bling .f420-hero__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 24px;
  }

  .f420-page-bling .f420-bling-hero__stage {
    width: calc(100% + 60px);
    margin-right: -60px;
    margin-left: -12px;
    min-height: 480px;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 110%;
    max-height: 610px;
  }
}

@media (max-width: 900px) {
  .f420-page-bling .f420-hero__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .f420-page-bling .f420-bling-hero__stage {
    width: 100%;
    margin-inline: 0;
    min-height: 440px;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 100%;
    max-width: none;
    max-height: 560px;
  }
}

@media (max-width: 620px) {
  .f420-page-bling .f420-bling-hero__stage {
    min-height: 330px;
    margin-inline: -10px;
    width: calc(100% + 20px);
  }

  .f420-page-bling .f420-bling-hero__stage .f420-media-placeholder {
    min-height: 310px;
  }
}


/* =========================================================
   BLING hero containment refinement - v0.4.49
   Slightly reduces the composite hero footprint and contains
   the artwork so it no longer overlaps the orange hero shape
   or the CTA buttons at mobile widths.
   ========================================================= */
.f420-page-bling .f420-bling-hero__stage {
  width: calc(100% + clamp(28px, 4vw, 72px));
  margin-right: calc(clamp(28px, 4vw, 72px) * -1);
  margin-left: -8px;
  min-height: 520px;
  overflow: hidden;
  align-items: center;
}

.f420-page-bling .f420-bling-hero__image {
  width: 106%;
  height: 100%;
  max-width: 1200px;
  max-height: 620px;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 1180px) {
  .f420-page-bling .f420-bling-hero__stage {
    width: calc(100% + 30px);
    margin-right: -30px;
    margin-left: -6px;
    min-height: 440px;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 103%;
    height: 100%;
    max-height: 510px;
  }
}

@media (max-width: 900px) {
  .f420-page-bling .f420-hero__grid {
    gap: 34px;
  }

  .f420-page-bling .f420-hero__copy .f420-actions {
    position: relative;
    z-index: 3;
    margin-bottom: 4px;
  }

  .f420-page-bling .f420-bling-hero__stage {
    width: 100%;
    margin: 0;
    min-height: 380px;
    aspect-ratio: 16 / 10;
    z-index: 1;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 96%;
    height: 100%;
    max-height: 420px;
  }
}

@media (max-width: 620px) {
  .f420-page-bling .f420-hero__grid {
    gap: 30px;
  }

  .f420-page-bling .f420-bling-hero__stage {
    width: 100%;
    min-height: 300px;
    margin: 0;
    aspect-ratio: 16 / 11;
  }

  .f420-page-bling .f420-bling-hero__image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 300px;
  }

  .f420-page-bling .f420-bling-hero__stage .f420-media-placeholder {
    min-height: 280px;
  }
}


/* =========================================================
   BLING merchandising support card refinement - v0.4.51
   - Reduces merchandising support footer title size
   - Forces consistent card sizing and footer treatment
   - Unifies hover behavior so all cards feel visually consistent
   ========================================================= */
.f420-page-bling .f420-bling-merch-grid {
  align-items: stretch;
}

.f420-page-bling .f420-bling-merch-card {
  height: 100%;
}

.f420-page-bling .f420-bling-merch-card__visual {
  min-height: 268px;
}

.f420-page-bling .f420-bling-merch-card__footer {
  min-height: 74px;
  padding: 10px 16px;
}

.f420-page-bling .f420-bling-merch-card__footer h3 {
  margin: 0 auto;
  max-width: 12ch;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 400;
  font-size: clamp(1.32rem, 1.42vw, 1.62rem);
  line-height: .92;
  letter-spacing: .008em;
  text-transform: uppercase;
  text-wrap: balance;
}

.f420-page-bling .f420-bling-merch-card:hover,
.f420-page-bling .f420-bling-merch-card:focus-within,
.f420-page-bling .f420-bling-merch-card:nth-child(odd):hover,
.f420-page-bling .f420-bling-merch-card:nth-child(odd):focus-within,
.f420-page-bling .f420-bling-merch-card:nth-child(even):hover,
.f420-page-bling .f420-bling-merch-card:nth-child(even):focus-within {
  transform: translateY(-10px);
}

@media (max-width: 900px) {
  .f420-page-bling .f420-bling-merch-card__footer {
    min-height: 70px;
  }

  .f420-page-bling .f420-bling-merch-card__footer h3 {
    font-size: clamp(1.2rem, 4.4vw, 1.55rem);
    max-width: 13ch;
  }
}


/* =========================================================
   BLING merchandising support footer alignment - v0.4.52
   - Pins every orange footer bar to the bottom edge of the card
   - Keeps all four merchandising cards visually identical
   - Forces FULL SIZE COUNTER DISPLAYS onto two lines
   ========================================================= */
.f420-page-bling .f420-bling-merch-card__footer {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
}

.f420-page-bling .f420-bling-merch-card:nth-child(2) .f420-bling-merch-card__footer h3 {
  max-width: 15ch;
}


/* =========================================================
   BLING wholesale image shadow removal - v0.4.54
   Removes the drop shadow from the editable wholesale image
   on the BLING page only, without changing other pages.
   ========================================================= */
.f420-page-bling .f420-wholesale-teaser .f420-media-card__image {
  filter: none !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-bling .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    filter: none !important;
    box-shadow: none !important;
  }
}


/* v0.4.57 Smog-Out blue-gradient correction */
.f420-page-smogout h1,
.f420-page-smogout h2,
.f420-page-smogout h3,
.f420-page-smogout .f420-authority-list > div,
.f420-page-smogout .f420-size-card h3,
.f420-page-smogout .f420-route-card h3,
.f420-page-smogout .f420-wholesale-teaser h2 {
  color: #0b4a8b;
}
.f420-page-smogout .f420-accent {
  color: var(--f420-orange);
}
.f420-page-smogout .f420-section--gradient {
  background: linear-gradient(105deg, #004b73 0%, #005ca8 52%, #2f2b7d 100%);
  color: #fff;
}
.f420-page-smogout .f420-section--gradient h2,
.f420-page-smogout .f420-section--gradient h3,
.f420-page-smogout .f420-section--gradient .f420-copy,
.f420-page-smogout .f420-section--gradient .f420-copy p,
.f420-page-smogout .f420-section--gradient .f420-lead {
  color: #fff;
}
.f420-page-smogout .f420-section--smog-portfolio {
  padding-block: clamp(58px, 6.8vw, 104px);
}
.f420-page-smogout .f420-split--smog-portfolio {
  grid-template-columns: minmax(0, 1.08fr) max-content;
  gap: clamp(42px, 7vw, 130px);
  align-items: center;
}
.f420-page-smogout .f420-split--smog-portfolio .f420-copy {
  max-width: 700px;
}
.f420-page-smogout .f420-actions--smog-portfolio {
  justify-self: end;
  align-self: center;
}
@media (max-width: 900px) {
  .f420-page-smogout .f420-split--smog-portfolio {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .f420-page-smogout .f420-actions--smog-portfolio {
    justify-self: start;
  }
}


/* =========================================================
   Smog-Out where-to-buy refinement - v0.4.58
   - Removes extra helper sentence above the route panels
   - Replaces the online route panel black background with the
     approved blue-to-purple gradient used on the Smog-Out page
   ========================================================= */
.f420-page-smogout .f420-route-panel--online {
  background: linear-gradient(105deg, #004b73 0%, #005ca8 52%, #2f2b7d 100%);
  color: #fff;
}

.f420-page-smogout .f420-route-panel--online h3,
.f420-page-smogout .f420-route-panel--online p {
  color: #fff;
}

.f420-page-smogout .f420-route-panel--online .f420-eyebrow--yellow {
  color: #f5c323;
}


/* =========================================================
   Smog-Out benefits section refinement - v0.4.60
   Reduces card scale, keeps titles single-line in Bebas Neue,
   and updates the callout pill with rounded corners + blue accent.
   ========================================================= */
.f420-page-smogout .f420-smog-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .84fr);
  gap: clamp(34px, 5.2vw, 66px);
  align-items: start;
}

.f420-page-smogout .f420-smog-benefits__copy h2 {
  margin-bottom: 26px;
}

.f420-page-smogout .f420-smog-benefits__copy p {
  max-width: 920px;
  font-size: clamp(1.15rem, 1.25vw, 1.45rem);
  line-height: 1.55;
  color: #46505a;
}

.f420-page-smogout .f420-smog-benefits__callout {
  margin-top: clamp(26px, 3vw, 38px);
  padding: 22px 28px 22px 34px;
  background: #f6ede8;
  border-left: 8px solid #0b4a8b;
  border-radius: 18px;
  color: #103d72;
  font-family: var(--f420-font-display);
  font-size: clamp(1.16rem, 1.65vw, 1.52rem);
  font-weight: 900;
  line-height: 1.08;
}

.f420-page-smogout .f420-smog-benefits__cards {
  display: grid;
  gap: 18px;
}

.f420-page-smogout .f420-smog-info-card {
  padding: clamp(22px, 2.5vw, 28px) clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--f420-border);
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.f420-page-smogout .f420-smog-info-card--accent {
  border-color: rgba(255,81,0,.32);
}

.f420-page-smogout .f420-smog-info-card__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}

.f420-page-smogout .f420-smog-info-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b4a8b;
  flex: 0 0 auto;
}

.f420-page-smogout .f420-smog-info-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f420-page-smogout .f420-smog-info-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.f420-page-smogout .f420-smog-info-card h3 {
  margin: 0;
  color: #0b4a8b;
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(1.45rem, 1.7vw, 2rem);
  line-height: .92;
  letter-spacing: .01em;
  white-space: nowrap;
}

.f420-page-smogout .f420-smog-info-card p {
  margin: 0;
  font-size: clamp(.98rem, 1vw, 1.12rem);
  line-height: 1.42;
  color: #5c6875;
}

@media (max-width: 1100px) {
  .f420-page-smogout .f420-smog-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .f420-page-smogout .f420-smog-info-card {
    border-radius: 18px;
    padding: 22px;
  }
  .f420-page-smogout .f420-smog-info-card__header {
    gap: 12px;
  }
  .f420-page-smogout .f420-smog-info-card__icon {
    width: 34px;
    height: 34px;
  }
  .f420-page-smogout .f420-smog-info-card h3 {
    white-space: normal;
    font-size: 1.5rem;
  }
  .f420-page-smogout .f420-smog-benefits__callout {
    font-size: 1.05rem;
    line-height: 1.18;
    border-radius: 16px;
  }
}

/* =========================================================
   Smog-Out hero pills + dual CTAs - v0.4.64
   Restores the approved compact v0.4.62 pill treatment.
   ========================================================= */
.f420-page-smogout .f420-smog-hero__contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(18px, 2vw, 24px);
  margin-bottom: clamp(22px, 2.5vw, 30px);
}

.f420-page-smogout .f420-smog-hero__context-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #1d54a6;
  color: #fff;
  font-family: var(--f420-font-display);
  font-size: clamp(.74rem, .84vw, .86rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
}

.f420-page-smogout .f420-smog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  align-items: center;
}

.f420-page-smogout .f420-smog-hero__actions .f420-btn {
  min-width: 220px;
}

@media (max-width: 780px) {
  .f420-page-smogout .f420-smog-hero__contexts {
    gap: 10px;
    margin-bottom: 20px;
  }

  .f420-page-smogout .f420-smog-hero__context-pill {
    min-height: 34px;
    padding: 8px 14px;
    font-size: .72rem;
  }

  .f420-page-smogout .f420-smog-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .f420-page-smogout .f420-smog-hero__actions .f420-btn {
    min-width: 0;
    width: 100%;
  }
}


/* =========================================================
   Smog-Out single editable composite hero - v0.4.64
   Replaces the separate staged bottles and CSS shape with one
   large image slot, matching the approved page workflow.
   ========================================================= */
.f420-page-smogout .f420-hero__grid {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(22px, 3.6vw, 54px);
}

.f420-page-smogout .f420-hero__copy {
  max-width: 620px;
}

.f420-page-smogout .f420-smog-hero__stage {
  width: calc(100% + clamp(30px, 4vw, 76px));
  min-height: 520px;
  margin-right: calc(clamp(30px, 4vw, 76px) * -1);
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.f420-page-smogout .f420-smog-hero__image {
  display: block;
  width: 106%;
  height: 100%;
  max-width: 1240px;
  max-height: 650px;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.f420-page-smogout .f420-smog-hero__stage .f420-media-placeholder {
  width: min(100%, 1160px);
  min-height: 500px;
}

@media (max-width: 1180px) {
  .f420-page-smogout .f420-hero__grid {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 26px;
  }

  .f420-page-smogout .f420-smog-hero__stage {
    width: calc(100% + 30px);
    min-height: 450px;
    margin-right: -30px;
    margin-left: -6px;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 103%;
    max-height: 540px;
  }
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .f420-page-smogout .f420-smog-hero__stage {
    width: 100%;
    min-height: 390px;
    margin: 0;
    aspect-ratio: 16 / 10;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 98%;
    max-width: none;
    max-height: 440px;
  }
}

@media (max-width: 620px) {
  .f420-page-smogout .f420-smog-hero__stage {
    width: 100%;
    min-height: 300px;
    margin: 0;
    aspect-ratio: 16 / 11;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 310px;
  }

  .f420-page-smogout .f420-smog-hero__stage .f420-media-placeholder {
    min-height: 280px;
  }
}


/* =========================================================
   Smog-Out hero scale + gradient base refinement - v0.4.65
   Makes the single editable hero artwork larger without
   intruding on the copy column, and updates the bottom
   accent shape to match the approved blue-to-purple gradient.
   ========================================================= */
.f420-page-smogout .f420-hero::after {
  background: linear-gradient(105deg, #004b73 0%, #005ca8 52%, #2f2b7d 100%);
}

.f420-page-smogout .f420-hero__grid {
  grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr);
  gap: clamp(22px, 3vw, 44px);
}

.f420-page-smogout .f420-hero__copy {
  max-width: 560px;
}

.f420-page-smogout .f420-smog-hero__stage {
  width: calc(100% + clamp(82px, 7.5vw, 156px));
  min-height: 600px;
  margin-right: calc(clamp(82px, 7.5vw, 156px) * -1);
  margin-left: 0;
  justify-content: flex-end;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
}

.f420-page-smogout .f420-smog-hero__image {
  width: 118%;
  max-width: 1500px;
  max-height: 760px;
  object-fit: contain;
  object-position: center bottom;
}

.f420-page-smogout .f420-smog-hero__stage .f420-media-placeholder {
  width: min(100%, 1280px);
  min-height: 560px;
}

@media (max-width: 1180px) {
  .f420-page-smogout .f420-hero__grid {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
    gap: 24px;
  }

  .f420-page-smogout .f420-smog-hero__stage {
    width: calc(100% + 78px);
    min-height: 520px;
    margin-right: -78px;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 112%;
    max-height: 660px;
  }
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-hero__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .f420-page-smogout .f420-hero__copy {
    max-width: 100%;
  }

  .f420-page-smogout .f420-smog-hero__stage {
    width: 100%;
    min-height: 430px;
    margin: 0;
    justify-content: center;
    aspect-ratio: 16 / 10;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 104%;
    max-width: none;
    max-height: 500px;
  }
}

@media (max-width: 620px) {
  .f420-page-smogout .f420-smog-hero__stage {
    min-height: 320px;
    aspect-ratio: 16 / 11;
  }

  .f420-page-smogout .f420-smog-hero__image {
    width: 100%;
    max-height: 360px;
  }

  .f420-page-smogout .f420-smog-hero__stage .f420-media-placeholder {
    min-height: 280px;
  }
}


/* =========================================================
   Smog-Out wholesale background + editable media refinement - v0.4.66
   Gives the section a subtle light-blue tone, adds support for an
   editable wholesale image slot, and removes image drop shadows.
   ========================================================= */
.f420-page-smogout .f420-wholesale-teaser {
  background: #f4f8fd;
}

.f420-page-smogout .f420-wholesale-teaser .f420-media-card {
  background: #f8fbff;
  box-shadow: none;
}

.f420-page-smogout .f420-wholesale-teaser .f420-media-card__image {
  filter: none !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-smogout .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    filter: none !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   Smog-Out size cards refinement - v0.4.67
   Narrows the two size cards, rounds the card corners,
   applies Bebas Neue to 4 OZ / 2 OZ titles, and increases
   separation between the bottle images and the titles.
   ========================================================= */
.f420-page-smogout .f420-section--soft .f420-product-grid--two {
  grid-template-columns: repeat(2, minmax(280px, 460px));
  justify-content: center;
  gap: clamp(26px, 3.8vw, 40px);
}

.f420-page-smogout .f420-size-card {
  width: 100%;
  max-width: 460px;
  min-height: 430px;
  padding: 28px 26px 34px;
  border-radius: 22px;
  overflow: hidden;
}

.f420-page-smogout .f420-size-card__media {
  height: 240px;
  margin-bottom: 28px;
  align-items: flex-end;
}

.f420-page-smogout .f420-size-card__media img {
  max-height: 210px;
}

.f420-page-smogout .f420-size-card h3 {
  margin-top: 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.9rem, 4.3vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .9;
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-section--soft .f420-product-grid--two {
    grid-template-columns: 1fr;
  }

  .f420-page-smogout .f420-size-card {
    max-width: 460px;
    margin-inline: auto;
  }
}


/* =========================================================
   Smog-Out size cards spacing + scale refinement - v0.4.68
   Thickens the accent bars, makes the size cards slightly taller,
   and increases the separation between the two cards.
   ========================================================= */
.f420-page-smogout .f420-section--soft .f420-product-grid--two {
  gap: clamp(40px, 5vw, 64px);
}

.f420-page-smogout .f420-size-card {
  min-height: 455px;
  border-top-width: 8px;
}

.f420-page-smogout .f420-size-card__media {
  height: 250px;
  margin-bottom: 30px;
}

.f420-page-smogout .f420-size-card__media img {
  max-height: 216px;
}


/* =========================================================
   Smog-Out size card visual style update - v0.4.69
   Makes the ONE ODOR NEUTRALIZER. TWO SIZES. cards feel closer
   to the approved product-card style while keeping them as two
   separate cards. Also reduces the 4 OZ / 2 OZ title scale and
   updates the palette to blue and purple.
   ========================================================= */
.f420-page-smogout .f420-section--soft .f420-product-grid--two {
  grid-template-columns: repeat(2, minmax(300px, 420px));
  gap: clamp(56px, 6vw, 82px);
}

.f420-page-smogout .f420-size-card {
  width: 100%;
  max-width: 420px;
  min-height: 520px;
  padding: 0 0 34px;
  border: 1px solid var(--f420-border);
  border-top-width: 8px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(10, 32, 73, 0.05);
  text-align: left;
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:first-child {
  border-top-color: #1D54A6;
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child {
  border-top-color: #6252C9;
}

.f420-page-smogout .f420-size-card__media {
  height: 300px;
  margin-bottom: 0;
  padding: 34px 30px 0;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, rgba(29, 84, 166, 0.07) 0%, rgba(255, 255, 255, 0) 86%);
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media {
  background: linear-gradient(180deg, rgba(98, 82, 201, 0.08) 0%, rgba(255, 255, 255, 0) 86%);
}

.f420-page-smogout .f420-size-card__media img {
  max-height: 224px;
}

.f420-page-smogout .f420-size-card h3 {
  margin: 24px 30px 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.2rem, 2.7vw, 2.85rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.94;
  color: #1D54A6;
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child h3 {
  color: #6252C9;
}

.f420-page-smogout .f420-size-card p {
  margin: 14px 30px 0;
  max-width: 290px;
  color: #4E5763;
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-section--soft .f420-product-grid--two {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .f420-page-smogout .f420-size-card {
    max-width: 420px;
    margin-inline: auto;
  }
}


/* =========================================================
   Smog-Out size card alignment cleanup - v0.4.70
   Removes the bottle backdrop, keeps both titles blue,
   reduces size title scale, and improves horizontal alignment.
   ========================================================= */
.f420-page-smogout .f420-size-card {
  min-height: 500px;
}

.f420-page-smogout .f420-size-card__media {
  height: 300px;
  padding: 34px 30px 0;
  background: transparent;
  align-items: flex-end;
  justify-content: center;
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media {
  background: transparent;
}

.f420-page-smogout .f420-size-card__media img {
  display: block;
  max-height: 214px;
  width: auto;
  margin: 0 auto;
}

.f420-page-smogout .f420-size-card h3,
.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child h3 {
  margin: 20px 30px 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(1.7rem, 2vw, 2.1rem);
  line-height: 0.96;
  color: #1D54A6;
  text-align: center;
}

.f420-page-smogout .f420-size-card p {
  margin: 14px auto 0;
  max-width: 290px;
  text-align: center;
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-size-card__media {
    height: 280px;
  }

  .f420-page-smogout .f420-size-card__media img {
    max-height: 200px;
  }
}


/* =========================================================
   Smog-Out size card alignment refinement - v0.4.71
   Fixes the 4 OZ / 2 OZ alignment, moves both bottles higher,
   aligns title baselines and paragraph tops, and updates the
   second card accent from purple to orange.
   ========================================================= */
.f420-page-smogout .f420-section--soft .f420-product-grid--two {
  align-items: start;
}

.f420-page-smogout .f420-size-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child {
  border-top-color: #FF5100;
}

.f420-page-smogout .f420-size-card__media,
.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media {
  height: 320px;
  padding: 26px 30px 0;
  background: transparent;
  align-items: center;
  justify-content: center;
}

.f420-page-smogout .f420-size-card__media img {
  display: block;
  width: auto;
  max-height: 200px;
  margin: 0 auto;
}

.f420-page-smogout .f420-size-card h3,
.f420-page-smogout .f420-product-grid--two .f420-size-card:last-child h3 {
  margin: 8px 30px 0;
  min-height: 2.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(1.45rem, 1.7vw, 1.75rem);
  line-height: 0.95;
  color: #1D54A6;
  text-align: center;
}

.f420-page-smogout .f420-size-card p {
  margin: 14px auto 0;
  min-height: 3.4rem;
  max-width: 300px;
  display: block;
  color: #4E5763;
  font-size: 1rem;
  line-height: 1.38;
  text-align: center;
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-size-card {
    min-height: 480px;
  }

  .f420-page-smogout .f420-size-card__media {
    height: 292px;
    padding-top: 22px;
  }

  .f420-page-smogout .f420-size-card__media img {
    max-height: 186px;
  }
}


/* =========================================================
   Smog-Out page motion and rollover system - v0.4.73
   Matches the approved Home page motion language while keeping
   the page restrained, readable, and free of pointer-follow effects.
   ========================================================= */
.f420-page-smogout.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition:
    transform 660ms cubic-bezier(.2, .68, .18, 1),
    opacity 660ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-smogout.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-34px, 0, 0);
}

.f420-page-smogout.f420-motion-ready .f420-reveal--right {
  transform: translate3d(34px, 0, 0);
}

.f420-page-smogout.f420-motion-ready .f420-reveal--scale {
  transform: translate3d(0, 18px, 0) scale(.965);
}

.f420-page-smogout.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.f420-page-smogout .f420-btn,
.f420-page-smogout .f420-smog-hero__context-pill,
.f420-page-smogout .f420-smog-info-card,
.f420-page-smogout .f420-size-card,
.f420-page-smogout .f420-route-panel,
.f420-page-smogout .f420-media-card {
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease,
    border-color 220ms ease,
    background-color 220ms ease;
}

.f420-page-smogout .f420-smog-hero__actions .f420-btn:not([data-route-status="pending"]),
.f420-page-smogout .f420-actions--smog-portfolio .f420-btn:not([data-route-status="pending"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.f420-page-smogout .f420-smog-hero__actions .f420-btn:not([data-route-status="pending"])::before,
.f420-page-smogout .f420-actions--smog-portfolio .f420-btn:not([data-route-status="pending"])::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  bottom: -60%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.33), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-page-smogout .f420-smog-hero__image,
.f420-page-smogout .f420-smog-info-card__icon,
.f420-page-smogout .f420-size-card__media img,
.f420-page-smogout .f420-wholesale-teaser .f420-media-card__image {
  transition:
    transform 320ms cubic-bezier(.22, 1, .36, 1),
    filter 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-smogout .f420-btn:not([data-route-status="pending"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 45, 88, .14);
  }

  .f420-page-smogout .f420-smog-hero__actions .f420-btn:not([data-route-status="pending"]):hover::before,
  .f420-page-smogout .f420-actions--smog-portfolio .f420-btn:not([data-route-status="pending"]):hover::before {
    transform: translateX(640%) skewX(-18deg);
  }

  .f420-page-smogout .f420-smog-hero__stage:hover .f420-smog-hero__image {
    transform: translateY(-8px) scale(1.018);
  }

  .f420-page-smogout .f420-smog-hero__context-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 18px rgba(29, 84, 166, .18);
  }

  .f420-page-smogout .f420-smog-info-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29, 84, 166, .28);
    box-shadow: 0 18px 34px rgba(0, 45, 88, .09);
  }

  .f420-page-smogout .f420-smog-info-card:hover .f420-smog-info-card__icon {
    transform: translateY(-2px) scale(1.08);
  }

  .f420-page-smogout.f420-motion-ready .f420-size-card.f420-reveal.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 42px rgba(0, 45, 88, .11);
  }

  .f420-page-smogout .f420-size-card:hover .f420-size-card__media img {
    transform: translateY(-10px) scale(1.025);
    filter: drop-shadow(0 19px 16px rgba(0, 45, 88, .17));
  }

  .f420-page-smogout .f420-section--smog-portfolio .f420-actions:hover {
    transform: translateY(-2px);
  }

  .f420-page-smogout.f420-motion-ready .f420-route-panel.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 38px rgba(0, 45, 88, .10);
  }

  .f420-page-smogout .f420-route-panel--online:hover {
    background-position: 100% 50%;
  }

  .f420-page-smogout .f420-wholesale-teaser .f420-media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(0, 45, 88, .07);
  }

  .f420-page-smogout .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    transform: scale(1.025);
    filter: none !important;
  }
}

.f420-page-smogout .f420-route-panel--online {
  background-size: 160% 160%;
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease,
    background-position 520ms cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-smogout .f420-reveal,
  .f420-page-smogout .f420-reveal.is-visible,
  .f420-page-smogout .f420-btn,
  .f420-page-smogout .f420-smog-hero__context-pill,
  .f420-page-smogout .f420-smog-info-card,
  .f420-page-smogout .f420-size-card,
  .f420-page-smogout .f420-route-panel,
  .f420-page-smogout .f420-media-card,
  .f420-page-smogout .f420-smog-hero__image,
  .f420-page-smogout .f420-smog-info-card__icon,
  .f420-page-smogout .f420-size-card__media img,
  .f420-page-smogout .f420-wholesale-teaser .f420-media-card__image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Our Story PDF-faithful layout refinement - v0.4.74
   Rebuilds the page around the approved one-page working draft
   while retaining the site fonts, colors, controls, and responsive
   behavior used across the current Formula 420 theme.
   ========================================================= */
.f420-page-ourstory {
  --ourstory-orange: var(--f420-orange);
  --ourstory-dark: #111111;
  --ourstory-soft: #fbfaf8;
}

.f420-page-ourstory .f420-eyebrow {
  margin-bottom: 14px;
}

.f420-page-ourstory .f420-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.f420-page-ourstory .f420-btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  bottom: -60%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-page-ourstory .f420-btn > span {
  position: relative;
  z-index: 1;
}

.f420-ourstory-hero {
  padding: clamp(52px, 6.2vw, 92px) 0 clamp(50px, 5.6vw, 84px);
  background: #fff;
}

.f420-ourstory-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
}

.f420-ourstory-hero__copy {
  max-width: 650px;
}

.f420-ourstory-hero__copy h1 {
  margin: 0;
  font-size: clamp(3.8rem, 5.2vw, 6.2rem);
  line-height: .82;
  letter-spacing: -.025em;
}

.f420-ourstory-hero__copy h1 .f420-accent {
  white-space: nowrap;
}

.f420-ourstory-hero__copy .f420-lead {
  max-width: 610px;
  margin: 28px 0 0;
  color: #42464b;
  font-size: clamp(1.04rem, 1.25vw, 1.22rem);
  line-height: 1.55;
}

.f420-ourstory-hero__copy .f420-actions {
  margin-top: 30px;
}

.f420-ourstory-hero__media {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(138deg, #ff6617 0%, #ff4d13 56%, #ff382d 100%);
}

.f420-ourstory-hero__rings {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 300px;
  height: 300px;
  border: 26px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.f420-ourstory-hero__rings::before,
.f420-ourstory-hero__rings::after {
  content: "";
  position: absolute;
  border: 20px solid rgba(255,255,255,.13);
  border-radius: 50%;
  inset: 28px;
}

.f420-ourstory-hero__rings::after {
  inset: 76px;
  border-width: 16px;
}

.f420-ourstory-watermark {
  position: absolute;
  right: 18px;
  bottom: -30px;
  color: rgba(255,255,255,.15);
  font-family: var(--f420-font-display);
  font-size: clamp(8rem, 14vw, 14rem);
  line-height: .8;
}

.f420-ourstory-hero__products {
  position: absolute;
  inset: 20px 16px 0;
}

.f420-ourstory-hero__product {
  position: absolute;
  bottom: -4px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(95, 24, 0, .28));
}

.f420-ourstory-hero__product--main {
  z-index: 5;
  left: 47%;
  height: 88%;
  transform: translateX(-50%);
}

.f420-ourstory-hero__product--left {
  z-index: 3;
  left: 4%;
  height: 60%;
}

.f420-ourstory-hero__product--right {
  z-index: 4;
  right: 19%;
  height: 63%;
}

.f420-ourstory-hero__product--far-right {
  z-index: 2;
  right: 2%;
  height: 50%;
}

.f420-ourstory-proof {
  padding: 14px 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.f420-ourstory-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.f420-ourstory-proof__item {
  min-width: 0;
}

.f420-ourstory-proof__button {
  position: relative;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 22px 24px 22px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f6 100%);
  box-shadow: 0 12px 28px rgba(17,17,17,.045);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.f420-ourstory-proof__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 24%, rgba(255,255,255,.48) 42%, rgba(255,255,255,0) 58%);
  transform: translateX(-140%);
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-ourstory-proof__item:hover .f420-ourstory-proof__button,
.f420-ourstory-proof__item:focus-within .f420-ourstory-proof__button {
  transform: translateY(-4px);
  border-color: rgba(255, 87, 16, .34);
  box-shadow: 0 18px 34px rgba(17,17,17,.09);
  background: linear-gradient(180deg, #fffdfb 0%, #fff6ef 100%);
}

.f420-ourstory-proof__item:hover .f420-ourstory-proof__button::before,
.f420-ourstory-proof__item:focus-within .f420-ourstory-proof__button::before {
  transform: translateX(140%);
}

.f420-ourstory-proof__icon {
  width: 26px;
  height: 26px;
  border: 4px solid var(--f420-orange);
  border-radius: 999px;
  flex: 0 0 auto;
}

.f420-ourstory-proof__item h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  line-height: 1.06;
}

.f420-ourstory-innovation {
  background: #fff;
}

.f420-ourstory-innovation__grid {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
  gap: clamp(50px, 7vw, 105px);
  align-items: center;
}

.f420-ourstory-original-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #ff6621 0%, #ff4819 72%, #ff3d2c 100%);
}

.f420-ourstory-original-card__watermark {
  display: none;
}

.f420-ourstory-original-card__bottle {
  position: absolute;
  inset: 44px 42px 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f420-ourstory-original-card__bottle img {
  width: auto;
  max-width: 100%;
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(87, 22, 0, .22));
}

.f420-ourstory-original-card > strong {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 24px;
  color: #fff;
  font-family: var(--f420-font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.65rem);
  font-weight: 400;
  line-height: 1;
}

.f420-ourstory-innovation__copy {
  max-width: 740px;
}

.f420-ourstory-innovation__copy h2 {
  margin: 0;
  font-size: clamp(3.7rem, 4.8vw, 5.8rem);
  line-height: .84;
}

.f420-ourstory-innovation__copy > p:not(.f420-eyebrow):not(.f420-ourstory-patent-note) {
  max-width: 700px;
  margin: 28px 0 0;
  color: #4c5055;
  font-size: 1.08rem;
  line-height: 1.6;
}

.f420-ourstory-process {
  margin-top: 30px;
  padding: 20px 22px 18px;
  border-left: 7px solid var(--ourstory-orange);
  background: #fff3ec;
}

.f420-ourstory-process h3 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1;
}

.f420-ourstory-process__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.f420-ourstory-process__benefits span {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-top: 3px solid var(--ourstory-orange);
  background: #fff;
  font-family: var(--f420-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

.f420-ourstory-patent-note {
  margin: 16px 0 0;
  color: #676b71;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.f420-ourstory-brand {
  padding: clamp(72px, 8vw, 120px) 0;
  background: #000;
  color: #fff;
}

.f420-ourstory-brand__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.f420-ourstory-brand__copy {
  max-width: 620px;
}

.f420-ourstory-brand__copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(4rem, 5.8vw, 6.6rem);
  line-height: .83;
}

.f420-ourstory-brand__copy > p:not(.f420-eyebrow) {
  max-width: 590px;
  margin: 28px 0 0;
  color: #e2e2e2;
  font-size: 1.08rem;
  line-height: 1.58;
}

.f420-ourstory-brand__callout {
  max-width: 560px;
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 6px solid var(--ourstory-orange);
  background: #242424;
  color: #fff;
  font-family: var(--f420-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.05;
}

.f420-ourstory-brand__media {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.f420-ourstory-brand__media picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f420-ourstory-brand__media img {
  width: 100%;
  max-width: 760px;
  max-height: 620px;
  object-fit: contain;
}


.f420-ourstory-products {
  background: #fff;
  padding: 0;
  text-align: center;
}

.f420-ourstory-products__media {
  position: relative;
  min-height: 880px;
  overflow: hidden;
  isolation: isolate;
}

.f420-ourstory-products__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.f420-ourstory-products__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(245,245,245,.98) 0%, rgba(245,245,245,.92) 24%, rgba(245,245,245,.66) 48%, rgba(245,245,245,.18) 72%, rgba(245,245,245,0) 100%);
  pointer-events: none;
}

.f420-ourstory-products__overlay {
  position: relative;
  z-index: 2;
  min-height: 880px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(24px, 2.4vw, 36px);
}

.f420-ourstory-products__heading {
  max-width: 810px;
  margin: 0 auto;
}

.f420-ourstory-products__heading h2 {
  margin: 0;
  font-size: clamp(4rem, 5.6vw, 6.2rem);
  line-height: .85;
}

.f420-ourstory-products__heading p {
  max-width: 720px;
  margin: 24px auto 0;
  color: #5c6065;
  font-size: 1.05rem;
  line-height: 1.55;
}


.f420-ourstory-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 88px) 0;
  background: linear-gradient(115deg, #ff5416 0%, #ff3c22 62%, #ff2e2e 100%);
  color: #fff;
}

.f420-ourstory-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.f420-ourstory-cta__copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(3.6rem, 5vw, 5.8rem);
  line-height: .86;
}

.f420-ourstory-cta__copy p {
  max-width: 650px;
  margin: 24px 0 0;
  color: #fff;
  font-size: 1.06rem;
  line-height: 1.55;
}

.f420-ourstory-cta__copy .f420-actions {
  margin-top: 28px;
}

.f420-ourstory-cta__statement {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-height: 188px;
  justify-self: end;
  display: flex;
  align-items: center;
  padding: 28px 30px 28px 38px;
  border: 1.5px solid rgba(255,255,255,.62);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 100%);
  box-shadow: 0 14px 28px rgba(110, 18, 0, .12), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}

.f420-ourstory-cta__statement::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,226,214,.52) 100%);
  opacity: .92;
}

.f420-ourstory-cta__statement::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.f420-ourstory-cta__statement strong {
  position: relative;
  z-index: 2;
  display: block;
  max-width: none;
  margin: 0;
  color: #fff;
  font-family: var(--f420-font-display);
  font-size: clamp(1.7rem, 2.15vw, 2.35rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .01em;
  white-space: nowrap;
}

.f420-ourstory-cta__statement > span {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-ourstory .f420-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
  }

  .f420-page-ourstory .f420-btn:hover::before {
    transform: translateX(640%) skewX(-18deg);
  }

  .f420-ourstory-hero__product,
  .f420-ourstory-original-card__bottle img,
  .f420-ourstory-brand__media img,
  .f420-ourstory-lineup__product {
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1), filter 320ms ease;
  }

  .f420-ourstory-hero__media:hover .f420-ourstory-hero__product--main {
    transform: translateX(-50%) translateY(-8px) scale(1.015);
  }

  .f420-ourstory-original-card:hover .f420-ourstory-original-card__bottle img,
  .f420-ourstory-brand__media:hover img,
  .f420-ourstory-lineup:hover .f420-ourstory-lineup__product {
    transform: translateY(-7px);
  }
}

@media (max-width: 1100px) {
  .f420-ourstory-hero__grid,
  .f420-ourstory-innovation__grid,
  .f420-ourstory-brand__grid,
  .f420-ourstory-cta__grid {
    grid-template-columns: 1fr;
  }

  .f420-ourstory-hero__copy,
  .f420-ourstory-innovation__copy,
  .f420-ourstory-brand__copy {
    max-width: 760px;
  }

  .f420-ourstory-hero__media {
    min-height: 500px;
  }

  .f420-ourstory-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f420-ourstory-proof__item:last-child {
    grid-column: 1 / -1;
  }

  .f420-ourstory-original-card {
    min-height: 520px;
  }

  .f420-ourstory-brand__media {
    min-height: 460px;
  }
}

@media (max-width: 760px) {
  .f420-ourstory-hero {
    padding-top: 38px;
  }

  .f420-ourstory-hero__grid {
    gap: 34px;
  }

  .f420-ourstory-hero__copy h1,
  .f420-ourstory-innovation__copy h2,
  .f420-ourstory-brand__copy h2,
  .f420-ourstory-products__heading h2,
  .f420-ourstory-cta__copy h2 {
    font-size: clamp(3.2rem, 15vw, 4.7rem);
  }

  .f420-ourstory-hero__media {
    min-height: 390px;
    border-radius: 18px;
  }

  .f420-ourstory-hero__product--main { height: 86%; }
  .f420-ourstory-hero__product--left { left: 7%; height: 60%; }
  .f420-ourstory-hero__product--right { right: 15%; height: 59%; }
  .f420-ourstory-hero__product--far-right { right: -3%; height: 46%; }

  .f420-ourstory-proof__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .f420-ourstory-proof__button {
    min-height: 118px;
    padding: 20px 20px 18px;
    border-radius: 18px;
  }


  .f420-ourstory-proof__item:last-child {
    border-bottom: 0;
  }

  .f420-ourstory-original-card {
    min-height: 430px;
    border-radius: 18px;
  }

  .f420-ourstory-original-card__bottle {
    inset: 32px 28px 70px;
  }

  .f420-ourstory-original-card__bottle img {
    max-height: 330px;
  }

  .f420-ourstory-process__benefits {
    grid-template-columns: 1fr;
  }

  .f420-ourstory-brand {
    padding-block: 64px;
  }

  .f420-ourstory-brand__media {
    min-height: 350px;
  }

  .f420-ourstory-products {
    min-height: auto;
    padding: 0;
  }

  .f420-ourstory-products__media,
  .f420-ourstory-products__overlay {
    min-height: 640px;
  }

  .f420-ourstory-products__overlay {
    padding-top: 22px;
  }

  .f420-ourstory-cta__statement {
    max-width: 560px;
    min-height: 178px;
    justify-self: start;
    padding: 26px 26px 26px 34px;
    border-radius: 20px;
  }

  .f420-ourstory-cta__statement::before {
    left: 13px;
    top: 20px;
    bottom: 20px;
  }

  .f420-ourstory-cta__statement strong {
    max-width: 100%;
    font-size: clamp(1.75rem, 6.2vw, 2.5rem);
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .f420-ourstory-hero__media {
    min-height: 330px;
  }

  .f420-ourstory-original-card {
    min-height: 380px;
  }

  .f420-ourstory-original-card__bottle {
    inset: 24px 20px 64px;
  }

  .f420-ourstory-original-card__bottle img {
    max-height: 290px;
  }

  .f420-ourstory-lineup {
    height: 245px;
  }

  .f420-ourstory-lineup__product--a1 { max-height: 220px; }
  .f420-ourstory-lineup__product--a2 { max-height: 205px; }
  .f420-ourstory-lineup__product--710 { max-height: 215px; }
  .f420-ourstory-lineup__product--bling { max-height: 198px; }
  .f420-ourstory-lineup__product--smog { max-height: 155px; }
}


/* =========================================================
   Our Story proof-card runtime refresh - v0.4.78
   Ensures the three recognition statements render as visible,
   modern button-like cards after the v0.4.75 cache-version issue.
   ========================================================= */
.f420-page-ourstory .f420-ourstory-proof--cards {
  padding: 20px 0 64px;
  border: 0;
  background: #ffffff;
  overflow: visible;
}

.f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__grid {
  gap: 18px;
  padding-bottom: 12px;
  overflow: visible;
}

.f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__item {
  overflow: visible;
}

.f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__button {
  min-height: 138px;
  padding: 24px 26px;
  border: 1px solid rgba(17,17,17,.13);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fff9f5 100%);
  box-shadow: 0 14px 30px rgba(17,17,17,.06);
}

.f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__icon {
  width: 28px;
  height: 28px;
  border-width: 4px;
}

.f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__item h3 {
  font-family: var(--f420-font-display);
  font-size: clamp(1.22rem, 1.48vw, 1.58rem);
  line-height: 1.05;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__item:hover .f420-ourstory-proof__button {
    transform: translateY(-5px);
    border-color: rgba(255,81,0,.38);
    box-shadow: 0 20px 38px rgba(17,17,17,.10);
  }
}

@media (max-width: 760px) {
  .f420-page-ourstory .f420-ourstory-proof--cards {
    padding: 14px 0 34px;
  }

  .f420-page-ourstory .f420-ourstory-proof--cards .f420-ourstory-proof__button {
    min-height: 118px;
    border-radius: 20px;
  }
}


/* Formula 710 hero full-bleed overlay refinement - v0.4.79 */
@media (min-width: 901px) {
  .f710-hero__copy .f420-actions { margin-top: 28px; }
  .f710-hero__copy .f420-btn { min-width: 168px; }
}
@media (max-width: 900px) {
  .f710-hero__copy .f420-actions { margin-top: 24px; }
}


/* =========================================================
   Formula 710 mobile hero image-behind-copy refinement - v0.4.82
   Keeps the approved desktop full-bleed hero untouched while
   placing the mobile copy/CTAs over the same hero image.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-formula710 .f710-hero {
    position: relative;
    display: block;
    min-height: clamp(690px, 118vw, 820px);
    overflow: hidden;
    background: #d7d3d3;
  }

  .f420-page-formula710 .f710-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .f420-page-formula710 .f710-hero__visual::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(215, 211, 211, 1) 0%,
      rgba(215, 211, 211, 1) 31%,
      rgba(215, 211, 211, .97) 36%,
      rgba(215, 211, 211, .72) 43%,
      rgba(215, 211, 211, .2) 52%,
      rgba(215, 211, 211, 0) 61%
    );
    pointer-events: none;
  }

  .f420-page-formula710 .f710-hero__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 67% bottom;
    transform: none;
  }

  .f420-page-formula710 .f710-hero__overlay {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: block;
    padding-top: 24px;
    padding-bottom: 0;
  }

  .f420-page-formula710 .f710-hero__copy {
    width: 100%;
    max-width: 430px;
  }

  .f420-page-formula710 .f710-hero__copy .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .f420-page-formula710 .f710-hero__copy .f420-actions .f420-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .f420-page-formula710 .f710-hero {
    min-height: clamp(720px, 218vw, 840px);
  }

  .f420-page-formula710 .f710-hero__overlay {
    padding-top: 18px;
  }

  .f420-page-formula710 .f710-hero__copy {
    max-width: none;
  }

  .f420-page-formula710 .f710-hero__copy h1 {
    font-size: clamp(2.15rem, 10.4vw, 2.85rem);
    line-height: .92;
    letter-spacing: -.02em;
  }

  .f420-page-formula710 .f710-hero__copy h3 {
    margin-top: 12px;
    font-size: clamp(.98rem, 4.2vw, 1.2rem);
    line-height: 1.02;
  }

  .f420-page-formula710 .f710-hero__copy .f420-lead {
    max-width: 300px;
    margin-top: 12px;
    font-size: .86rem;
    line-height: 1.35;
  }

  .f420-page-formula710 .f710-hero__copy .f420-actions {
    gap: 12px;
    margin-top: 18px;
  }

  .f420-page-formula710 .f710-hero__copy .f420-actions .f420-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: .68rem;
  }

  .f420-page-formula710 .f710-hero__image {
    object-position: 67% bottom;
  }
}


/* =========================================================
   Formula 710 dedicated mobile hero media slot - v0.4.83
   Uses a separate portrait image on mobile to prevent bottle-cap
   cropping while preserving the approved desktop hero unchanged.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-formula710 .f710-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .f420-page-formula710 .f710-hero__picture .f710-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}


/* =========================================================
   Smog-Out full-bleed hero parity with Formula 710 - v0.4.84
   Converts the Smog-Out hero to the approved full-width overlay
   treatment with separate desktop and mobile image slots.
   Recommended image sizes: desktop 2400x1200, mobile 1080x2160.
   ========================================================= */
.f420-page-smogout .smog-hero {
  position: relative;
  min-height: clamp(650px, 54vw, 780px);
  overflow: hidden;
  background: #eef4fa;
}

.f420-page-smogout .smog-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.f420-page-smogout .smog-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(238,244,250,.97) 0%, rgba(238,244,250,.94) 18%, rgba(238,244,250,.72) 36%, rgba(238,244,250,.22) 56%, rgba(238,244,250,0) 72%);
  pointer-events: none;
}

.f420-page-smogout .smog-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.f420-page-smogout .smog-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  filter: none;
}

.f420-page-smogout .smog-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 6.5vw, 92px);
}

.f420-page-smogout .smog-hero__copy {
  position: relative;
  z-index: 2;
  max-width: min(48%, 610px);
}

.f420-page-smogout .smog-hero__copy h1 {
  font-size: clamp(4rem, 6.3vw, 7rem);
  line-height: .83;
  letter-spacing: -.035em;
}

.f420-page-smogout .smog-hero__copy .f420-lead {
  max-width: 560px;
  font-size: 1.02rem;
  color: #34516f;
}

.f420-page-smogout .smog-hero__copy > p:not(.f420-lead) {
  max-width: 560px;
}

.f420-page-smogout .smog-hero__copy .f420-actions {
  margin-top: 24px;
}

.f420-page-smogout .f420-smog-hero__actions .f420-btn {
  min-width: 200px;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-smogout .smog-hero__image { transition: transform .4s ease; }
  .f420-page-smogout .smog-hero__visual:hover .smog-hero__image { transform: translateY(-7px) scale(1.01); }
}

@media (max-width: 1100px) {
  .f420-page-smogout .smog-hero__copy { max-width: min(50%, 560px); }
  .f420-page-smogout .smog-hero__image { object-position: 72% center; }
}

@media (max-width: 900px) {
  .f420-page-smogout .smog-hero {
    position: relative;
    display: block;
    min-height: clamp(720px, 218vw, 840px);
    background: #eef4fa;
  }

  .f420-page-smogout .smog-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .f420-page-smogout .smog-hero__visual::before {
    background: linear-gradient(180deg, rgba(238,244,250,1) 0%, rgba(238,244,250,1) 31%, rgba(238,244,250,.97) 36%, rgba(238,244,250,.74) 44%, rgba(238,244,250,.22) 54%, rgba(238,244,250,0) 64%);
  }

  .f420-page-smogout .smog-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .f420-page-smogout .smog-hero__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }

  .f420-page-smogout .smog-hero__overlay {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: block;
    padding-top: 18px;
    padding-bottom: 0;
  }

  .f420-page-smogout .smog-hero__copy {
    max-width: 430px;
  }

  .f420-page-smogout .f420-smog-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .f420-page-smogout .f420-smog-hero__actions .f420-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .f420-page-smogout .smog-hero {
    min-height: clamp(720px, 218vw, 860px);
  }

  .f420-page-smogout .smog-hero__copy {
    max-width: none;
  }

  .f420-page-smogout .smog-hero__copy h1 {
    font-size: clamp(2.85rem, 13.2vw, 4.25rem);
    line-height: .9;
    letter-spacing: -.03em;
  }

  .f420-page-smogout .smog-hero__copy .f420-lead {
    max-width: 300px;
    margin-top: 12px;
    font-size: .86rem;
    line-height: 1.35;
  }

  .f420-page-smogout .smog-hero__copy > p:not(.f420-lead) {
    max-width: 320px;
    font-size: .82rem;
    line-height: 1.42;
  }

  .f420-page-smogout .f420-smog-hero__contexts {
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 18px;
  }

  .f420-page-smogout .f420-smog-hero__context-pill {
    min-height: 31px;
    padding: 7px 12px;
    font-size: .68rem;
  }

  .f420-page-smogout .f420-smog-hero__actions {
    gap: 12px;
    margin-top: 18px;
  }

  .f420-page-smogout .f420-smog-hero__actions .f420-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: .68rem;
  }
}


/* =========================================================
   BLING full-bleed hero parity with Formula 710 / Smog-Out - v0.4.86
   Desktop uses a full-width overlay hero. Mobile uses a separate
   dedicated mobile image slot for better portrait framing.
   Recommended image sizes: desktop 2400x1200, mobile 1080x2160.
   ========================================================= */
.f420-page-bling .bling-hero {
  position: relative;
  min-height: clamp(650px, 54vw, 780px);
  overflow: hidden;
  background: #f6f3ef;
}

.f420-page-bling .bling-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.f420-page-bling .bling-hero__visual::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(54%, 900px);
  z-index: 1;
  background: linear-gradient(90deg, rgba(246,243,239,.98) 0%, rgba(246,243,239,.95) 24%, rgba(246,243,239,.78) 48%, rgba(246,243,239,.34) 74%, rgba(246,243,239,0) 100%);
  pointer-events: none;
}

.f420-page-bling .bling-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.f420-page-bling .bling-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
}

.f420-page-bling .bling-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 6.5vw, 92px);
}

.f420-page-bling .bling-hero__copy {
  position: relative;
  z-index: 2;
  max-width: min(48%, 610px);
}

.f420-page-bling .bling-hero__copy h1 {
  font-size: clamp(4rem, 6.2vw, 7rem);
  line-height: .83;
  letter-spacing: -.035em;
}

.f420-page-bling .bling-hero__copy .f420-lead {
  max-width: 560px;
  font-size: 1.02rem;
  color: #3f4852;
}

.f420-page-bling .bling-hero__copy .f420-actions {
  margin-top: 24px;
}

.f420-page-bling .bling-hero__copy .f420-btn {
  min-width: 188px;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-bling .bling-hero__image {
    transition: transform .4s ease;
  }

  .f420-page-bling .bling-hero__visual:hover .bling-hero__image {
    transform: translateY(-7px) scale(1.01);
  }
}

@media (max-width: 1100px) {
  .f420-page-bling .bling-hero__copy {
    max-width: min(50%, 560px);
  }

  .f420-page-bling .bling-hero__image {
    object-position: 72% center;
  }
}

@media (max-width: 900px) {
  .f420-page-bling .bling-hero {
    position: relative;
    display: block;
    min-height: clamp(720px, 218vw, 840px);
    background: #f6f3ef;
  }

  .f420-page-bling .bling-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .f420-page-bling .bling-hero__visual::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    background: linear-gradient(180deg, rgba(246,243,239,1) 0%, rgba(246,243,239,1) 31%, rgba(246,243,239,.97) 36%, rgba(246,243,239,.76) 44%, rgba(246,243,239,.24) 54%, rgba(246,243,239,0) 64%);
  }

  .f420-page-bling .bling-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .f420-page-bling .bling-hero__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }

  .f420-page-bling .bling-hero__overlay {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: block;
    padding-top: 18px;
    padding-bottom: 0;
  }

  .f420-page-bling .bling-hero__copy {
    max-width: 430px;
  }

  .f420-page-bling .bling-hero__copy .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .f420-page-bling .bling-hero__copy .f420-actions .f420-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .f420-page-bling .bling-hero {
    min-height: clamp(720px, 218vw, 860px);
  }

  .f420-page-bling .bling-hero__copy {
    max-width: none;
  }

  .f420-page-bling .bling-hero__copy h1 {
    font-size: clamp(2.85rem, 13.2vw, 4.25rem);
    line-height: .9;
    letter-spacing: -.03em;
  }

  .f420-page-bling .bling-hero__copy .f420-lead {
    max-width: 320px;
    margin-top: 12px;
    font-size: .86rem;
    line-height: 1.35;
  }

  .f420-page-bling .bling-hero__copy .f420-actions {
    gap: 12px;
    margin-top: 18px;
  }

  .f420-page-bling .bling-hero__copy .f420-actions .f420-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: .68rem;
  }
}


/* BLING hero overlay containment refinement - v0.4.87 */
@media (min-width: 901px) {
  .f420-page-bling .bling-hero__visual::before {
    width: min(54%, 900px);
  }
}


/* =========================================================
   BLING wholesale image full-container refinement - v0.4.88
   Removes the framed card treatment and makes the editable
   wholesale image cover the entire media container.
   ========================================================= */
.f420-page-bling .f420-wholesale-teaser .f420-media-card {
  position: relative;
  min-height: 390px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.f420-page-bling .f420-wholesale-teaser .f420-media-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .f420-page-bling .f420-wholesale-teaser .f420-media-card {
    min-height: clamp(300px, 62vw, 430px);
  }
}


/* =========================================================
   BLING bottom-section motion + rollover parity - v0.4.89
   Gives WHERE TO BUY and WHOLESALE the same restrained reveal,
   lift, button sheen, panel movement, and image zoom language
   used on the approved Smog-Out page.
   ========================================================= */
.f420-page-bling .f420-bling-buy-section .f420-route-panel,
.f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn,
.f420-page-bling .f420-wholesale-teaser .f420-media-card {
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    background-position 520ms cubic-bezier(.22, 1, .36, 1);
}

.f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn,
.f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

.f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn::before,
.f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  bottom: -60%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn > *,
.f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn > * {
  position: relative;
  z-index: 1;
}

.f420-page-bling .f420-bling-buy-section .f420-route-panel--online {
  background-image: linear-gradient(135deg, #002d58 0%, #073f70 48%, #002d58 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
}

.f420-page-bling .f420-wholesale-teaser .f420-media-card__image {
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    filter 340ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-bling.f420-motion-ready .f420-bling-buy-section .f420-route-panel.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 38px rgba(0, 45, 88, .11);
  }

  .f420-page-bling .f420-bling-buy-section .f420-route-panel--online:hover {
    background-position: 100% 50%;
  }

  .f420-page-bling .f420-bling-buy-section .f420-route-panel--local:hover {
    background-color: #fff4ec;
    border-color: #ff5100;
  }

  .f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn:hover,
  .f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 45, 88, .15);
  }

  .f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn:hover::before,
  .f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn:hover::before {
    transform: translateX(640%) skewX(-18deg);
  }

  .f420-page-bling.f420-motion-ready .f420-wholesale-teaser .f420-media-card.f420-reveal.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(0, 45, 88, .10);
  }

  .f420-page-bling .f420-wholesale-teaser .f420-media-card:hover .f420-media-card__image {
    transform: scale(1.028);
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-bling .f420-bling-buy-section .f420-route-panel,
  .f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn,
  .f420-page-bling .f420-bling-buy-section .f420-route-panel .f420-btn::before,
  .f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn,
  .f420-page-bling .f420-wholesale-teaser .f420-copy .f420-btn::before,
  .f420-page-bling .f420-wholesale-teaser .f420-media-card,
  .f420-page-bling .f420-wholesale-teaser .f420-media-card__image {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   WHERE TO BUY page PDF-inspired redesign - v0.4.90
   Layout direction follows the approved page mockup while keeping
   the established Formula 420 typography, controls, and interactions.
   ========================================================= */
.f420-page-where-to-buy {
  --wtb-navy: #002d58;
  --wtb-orange: #ff5100;
  --wtb-cream: #fbf8f3;
  color: var(--wtb-navy);
  background: #fff;
}

.f420-page-where-to-buy h1,
.f420-page-where-to-buy h2,
.f420-page-where-to-buy h3 {
  color: var(--wtb-navy);
}

.f420-page-where-to-buy .f420-accent {
  color: var(--wtb-orange);
}

.f420-wtb-hero {
  padding: clamp(62px, 7vw, 104px) 0 clamp(54px, 6vw, 90px);
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

.f420-wtb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.f420-wtb-hero__copy {
  max-width: 650px;
}

.f420-wtb-hero__copy h1 {
  margin: 12px 0 24px;
  font-size: clamp(4.6rem, 7vw, 7.5rem);
  line-height: .82;
  letter-spacing: -.035em;
}

.f420-wtb-hero__copy h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  line-height: 1;
}

.f420-wtb-hero__copy .f420-lead {
  max-width: 610px;
  color: #33495f;
  font-size: clamp(.98rem, 1.15vw, 1.13rem);
}

.f420-wtb-hero__copy .f420-actions {
  margin-top: 28px;
}

.f420-wtb-hero__copy .f420-btn {
  min-width: 172px;
}

.f420-wtb-hero__visual {
  position: relative;
  min-height: clamp(500px, 39vw, 620px);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff5b20 0%, #ff5100 62%, #f23f14 100%);
}

.f420-wtb-hero__visual::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 7%;
  bottom: 3.5%;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  filter: blur(12px);
}

.f420-wtb-hero__word {
  position: absolute;
  z-index: 0;
  color: rgba(255,255,255,.16);
  font-family: var(--f420-font-display);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.045em;
  pointer-events: none;
  user-select: none;
}

.f420-wtb-hero__word--where {
  top: 24px;
  left: 28px;
  font-size: clamp(7rem, 11vw, 12rem);
}

.f420-wtb-hero__word--buy {
  right: 18px;
  bottom: -5px;
  font-size: clamp(8rem, 13vw, 14rem);
}

.f420-wtb-hero__products {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.f420-wtb-hero__product {
  position: absolute;
  bottom: 5.5%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,.22));
}

.f420-wtb-hero__product--a1 {
  z-index: 5;
  left: 31%;
  height: 86%;
}

.f420-wtb-hero__product--a2 {
  z-index: 2;
  left: 12%;
  height: 56%;
}

.f420-wtb-hero__product--c1 {
  z-index: 4;
  right: 18%;
  height: 67%;
}

.f420-wtb-hero__product--smog {
  z-index: 3;
  right: 3%;
  height: 48%;
}

.f420-wtb-proof {
  padding: clamp(66px, 7vw, 104px) 0;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

.f420-wtb-proof__grid {
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: center;
}

.f420-wtb-proof__statement {
  position: relative;
  padding-left: 30px;
}

.f420-wtb-proof__line {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--wtb-orange);
}

.f420-wtb-proof__statement h2 {
  margin: 0;
  font-size: clamp(2.8rem, 4.25vw, 5rem);
  line-height: .86;
  letter-spacing: -.025em;
}

.f420-wtb-proof__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.f420-wtb-proof__fact {
  min-height: 120px;
  padding: 8px clamp(20px, 3vw, 42px);
  border-left: 1px solid #ddd;
}

.f420-wtb-proof__fact span {
  display: block;
  width: 30px;
  height: 4px;
  margin-bottom: 18px;
  background: var(--wtb-orange);
}

.f420-wtb-proof__fact h3 {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  line-height: .98;
}

.f420-wtb-routes {
  background: #fff;
}

.f420-wtb-section-heading h2 {
  margin: 0 0 clamp(38px, 5vw, 66px);
  font-size: clamp(3rem, 5.3vw, 6rem);
  line-height: .9;
}

.f420-wtb-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #ddd;
}

.f420-wtb-route-card {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(42px, 5vw, 78px);
  overflow: hidden;
  position: relative;
}

.f420-wtb-route-card h3 {
  margin: 0 0 10px;
  font-size: clamp(3rem, 4.5vw, 5rem);
  line-height: .9;
}

.f420-wtb-route-card__kicker {
  margin: 0 0 24px;
  color: inherit;
  font-family: var(--f420-font-display);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.f420-wtb-route-card > p:not(.f420-wtb-route-card__kicker) {
  max-width: 600px;
}

.f420-wtb-route-card .f420-btn {
  width: 100%;
  margin-top: 24px;
}

.f420-wtb-route-card--online {
  background: var(--wtb-orange);
  color: #fff;
}

.f420-wtb-route-card--online h3,
.f420-wtb-route-card--online p {
  color: #fff;
}

.f420-wtb-route-card--local {
  background: #fff;
  color: var(--wtb-navy);
}

.f420-wtb-local-note {
  width: 100%;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--wtb-navy);
}

.f420-wtb-local-note strong,
.f420-wtb-local-note small {
  display: block;
}

.f420-wtb-local-note strong {
  font-family: var(--f420-font-display);
  font-size: .76rem;
  letter-spacing: .02em;
}

.f420-wtb-local-note small {
  margin-top: 8px;
  color: #687583;
}

.f420-wtb-family {
  border-top: 1px solid #e6e6e6;
  background: #fff;
}

.f420-wtb-family__intro {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: clamp(44px, 8vw, 140px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.f420-wtb-family__intro h2 {
  margin: 0;
  font-size: clamp(4rem, 6.5vw, 7.2rem);
  line-height: .82;
  letter-spacing: -.035em;
}

.f420-wtb-family__intro p {
  max-width: 610px;
  margin: 0 0 6px;
  color: #495766;
}

.f420-wtb-family__top-grid,
.f420-wtb-family__bottom-grid {
  display: grid;
  gap: 22px;
}

.f420-wtb-family__top-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.f420-wtb-family__bottom-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
}

.f420-wtb-family-card {
  min-width: 0;
}

.f420-wtb-family-card__visual {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.f420-wtb-family-card__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.f420-wtb-family-card__body {
  padding: 18px 2px 8px;
}

.f420-wtb-family-card__body h3 {
  margin: 0;
  font-size: clamp(2.1rem, 3vw, 3.5rem);
  line-height: .94;
}

.f420-wtb-family-card__tag {
  margin: 22px 0 8px;
  color: var(--wtb-navy);
  font-family: var(--f420-font-display);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.1;
  text-transform: uppercase;
}

.f420-wtb-family-card__body > p:not(.f420-wtb-family-card__tag) {
  min-height: 46px;
  color: #495766;
}

.f420-wtb-family-card__body .f420-btn {
  margin-top: 14px;
}

.f420-wtb-family__shop-bar {
  margin-top: clamp(40px, 5vw, 70px);
}

.f420-wtb-family__shop-bar .f420-btn {
  width: 100%;
  border-radius: 2px;
}

.f420-wtb-wholesale {
  border-top: 1px solid #e8e1d9;
  border-bottom: 1px solid #e8e1d9;
  background: var(--wtb-cream);
}

.f420-wtb-wholesale__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: center;
}

.f420-wtb-wholesale__copy h2 {
  margin: 10px 0 28px;
  font-size: clamp(3.4rem, 5.2vw, 6rem);
  line-height: .85;
  letter-spacing: -.03em;
}

.f420-wtb-wholesale__copy p {
  max-width: 760px;
}

.f420-wtb-wholesale__copy .f420-btn {
  width: min(100%, 560px);
  margin-top: 24px;
}

.f420-wtb-wholesale__visual {
  position: relative;
  min-height: clamp(410px, 34vw, 560px);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  border: 1px solid #e3ddd5;
  background: #fff;
}

.f420-wtb-wholesale__visual::before {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: 0;
  border-radius: 8px;
  background: #121212;
}

.f420-wtb-wholesale__label {
  position: absolute;
  z-index: 2;
  top: 13%;
  color: #fff;
  font-family: var(--f420-font-display);
  font-size: 1.3rem;
  font-weight: 900;
}

.f420-wtb-wholesale__product {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.f420-wtb-wholesale__product--top {
  padding-top: 40px;
}

.f420-wtb-wholesale__product--bottom {
  padding-bottom: 18px;
}

.f420-wtb-wholesale__image {
  width: auto;
  max-width: 56%;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.25));
  transition: transform .35s ease;
}

.f420-wtb-wholesale__divider {
  position: relative;
  z-index: 2;
  width: 56%;
  height: 6px;
  background: var(--wtb-orange);
}

.f420-wtb-final-cta {
  background: #fff;
}

.f420-wtb-final-cta h2 {
  margin: 0;
  font-size: clamp(3.2rem, 5vw, 5.8rem);
  line-height: .88;
}

.f420-wtb-final-cta .f420-lead {
  max-width: 760px;
  margin: 24px auto 0;
}

.f420-wtb-final-cta .f420-actions {
  justify-content: center;
  margin-top: 30px;
}

.f420-wtb-final-cta .f420-btn {
  min-width: 180px;
}

/* WHERE TO BUY motion */
.f420-page-where-to-buy.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition: transform 660ms cubic-bezier(.2,.68,.18,1), opacity 660ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-where-to-buy.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-34px, 0, 0);
}

.f420-page-where-to-buy.f420-motion-ready .f420-reveal--right {
  transform: translate3d(34px, 0, 0);
}

.f420-page-where-to-buy.f420-motion-ready .f420-reveal--scale {
  transform: translate3d(0, 16px, 0) scale(.97);
}

.f420-page-where-to-buy.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-where-to-buy .f420-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }

  .f420-wtb-hero__visual {
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .f420-wtb-hero__visual:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(0,0,0,.13);
  }

  .f420-wtb-route-card {
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .f420-wtb-route-card:hover {
    z-index: 2;
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(0,0,0,.12);
  }

  .f420-wtb-wholesale__visual {
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .f420-wtb-wholesale__visual:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 42px rgba(0,0,0,.1);
  }

  .f420-wtb-wholesale__visual:hover .f420-wtb-wholesale__image {
    transform: scale(1.04);
  }
}

@media (max-width: 1100px) {
  .f420-wtb-hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr);
    gap: 42px;
  }

  .f420-wtb-hero__visual {
    min-height: 500px;
  }

  .f420-wtb-proof__grid {
    gap: 44px;
  }

  .f420-wtb-proof__fact {
    padding-inline: 22px;
  }

  .f420-wtb-wholesale__grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr);
    gap: 52px;
  }
}

@media (max-width: 900px) {
  .f420-wtb-hero__grid,
  .f420-wtb-proof__grid,
  .f420-wtb-family__intro,
  .f420-wtb-wholesale__grid {
    grid-template-columns: 1fr;
  }

  .f420-wtb-hero__copy {
    max-width: 720px;
  }

  .f420-wtb-hero__visual {
    min-height: min(76vw, 620px);
  }

  .f420-wtb-proof__facts {
    margin-top: 14px;
  }

  .f420-wtb-family__intro {
    gap: 24px;
  }

  .f420-wtb-family__intro p {
    max-width: 720px;
  }

  .f420-wtb-family__bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f420-wtb-family-card--smog {
    grid-column: 1 / -1;
  }

  .f420-wtb-wholesale__visual {
    min-height: 520px;
  }
}

@media (max-width: 680px) {
  .f420-wtb-hero {
    padding-top: 38px;
  }

  .f420-wtb-hero__copy h1 {
    font-size: clamp(3.4rem, 15.5vw, 5.2rem);
  }

  .f420-wtb-hero__copy .f420-actions,
  .f420-wtb-final-cta .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .f420-wtb-hero__copy .f420-btn,
  .f420-wtb-final-cta .f420-btn {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: .7rem;
  }

  .f420-wtb-hero__visual {
    min-height: 108vw;
    border-radius: 14px;
  }

  .f420-wtb-hero__word--where {
    top: 18px;
    left: 18px;
    font-size: 24vw;
  }

  .f420-wtb-hero__word--buy {
    right: 10px;
    font-size: 28vw;
  }

  .f420-wtb-hero__product--a1 {
    left: 25%;
    height: 82%;
  }

  .f420-wtb-hero__product--a2 {
    left: 5%;
    height: 53%;
  }

  .f420-wtb-hero__product--c1 {
    right: 12%;
    height: 61%;
  }

  .f420-wtb-hero__product--smog {
    right: -5%;
    height: 43%;
  }

  .f420-wtb-proof__statement {
    padding-left: 22px;
  }

  .f420-wtb-proof__statement h2 {
    font-size: clamp(2.75rem, 12.5vw, 4.2rem);
  }

  .f420-wtb-proof__facts {
    grid-template-columns: 1fr;
  }

  .f420-wtb-proof__fact {
    min-height: 0;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid #ddd;
  }

  .f420-wtb-route-grid,
  .f420-wtb-family__top-grid,
  .f420-wtb-family__bottom-grid {
    grid-template-columns: 1fr;
  }

  .f420-wtb-route-card {
    min-height: 400px;
    padding: 38px 26px;
  }

  .f420-wtb-family-card--smog {
    grid-column: auto;
  }

  .f420-wtb-family__intro h2 {
    font-size: clamp(3.6rem, 16vw, 5.4rem);
  }

  .f420-wtb-family-card__body h3 {
    font-size: 2.65rem;
  }

  .f420-wtb-wholesale__copy h2 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }

  .f420-wtb-wholesale__visual {
    min-height: 430px;
  }

  .f420-wtb-final-cta h2 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-where-to-buy .f420-reveal,
  .f420-page-where-to-buy .f420-btn,
  .f420-wtb-hero__visual,
  .f420-wtb-route-card,
  .f420-wtb-family-card__visual,
  .f420-wtb-family-card__image,
  .f420-wtb-wholesale__visual,
  .f420-wtb-wholesale__image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   WHERE TO BUY full-bleed hero parity with Formula 710 / Smog-Out - v0.4.91
   Desktop uses a full-width hero image with copy and CTAs over the image.
   Mobile uses a dedicated portrait hero image slot to avoid cropping.
   Recommended image sizes: desktop 2400x1200, mobile 1080x2160.
   ========================================================= */
.f420-page-where-to-buy .f420-wtb-hero {
  position: relative;
  min-height: clamp(650px, 54vw, 780px);
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #e6e6e6;
  background: #ffffff;
}

.f420-page-where-to-buy .f420-wtb-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.f420-page-where-to-buy .f420-wtb-hero__visual::after {
  display: none;
}

.f420-page-where-to-buy .f420-wtb-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 22%,
    rgba(255, 255, 255, .96) 28%,
    rgba(255, 255, 255, .72) 33%,
    rgba(255, 255, 255, .38) 37%,
    rgba(255, 255, 255, .12) 41%,
    rgba(255, 255, 255, 0) 45%
  );
  pointer-events: none;
}

.f420-page-where-to-buy .f420-wtb-hero__picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.f420-page-where-to-buy .f420-wtb-hero__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

.f420-page-where-to-buy .f420-wtb-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(72px, 8vw, 118px);
}

.f420-page-where-to-buy .f420-wtb-hero__copy {
  width: 100%;
  max-width: min(44%, 530px);
}

.f420-page-where-to-buy .f420-wtb-hero__copy h1 {
  margin: 12px 0 22px;
  font-size: clamp(4.4rem, 6.6vw, 7.1rem);
  line-height: .82;
  letter-spacing: -.035em;
}

.f420-page-where-to-buy .f420-wtb-hero__copy h3 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.15vw, 2.25rem);
  line-height: .95;
}

.f420-page-where-to-buy .f420-wtb-hero__copy .f420-lead {
  max-width: 540px;
  color: #46515d;
  font-size: clamp(.98rem, 1.12vw, 1.08rem);
}

.f420-page-where-to-buy .f420-wtb-hero__copy .f420-actions {
  margin-top: 28px;
}

.f420-page-where-to-buy .f420-wtb-hero__copy .f420-btn {
  min-width: 172px;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-where-to-buy .f420-wtb-hero__image {
    transition: transform .4s ease;
  }

  .f420-page-where-to-buy .f420-wtb-hero__visual:hover .f420-wtb-hero__image {
    transform: translateY(-6px) scale(1.01);
  }
}

@media (max-width: 1200px) {
  .f420-page-where-to-buy .f420-wtb-hero__copy {
    max-width: min(50%, 540px);
  }

  .f420-page-where-to-buy .f420-wtb-hero__image {
    object-position: right bottom;
  }
}

@media (max-width: 900px) {
  .f420-page-where-to-buy .f420-wtb-hero {
    min-height: clamp(760px, 215vw, 940px);
    background: #ffffff;
  }

  .f420-page-where-to-buy .f420-wtb-hero__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .f420-page-where-to-buy .f420-wtb-hero__visual::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, .94) 27%,
      rgba(255, 255, 255, .66) 33%,
      rgba(255, 255, 255, .3) 38%,
      rgba(255, 255, 255, .08) 42%,
      rgba(255, 255, 255, 0) 46%
    );
  }

  .f420-page-where-to-buy .f420-wtb-hero__image {
    object-fit: cover;
    object-position: center center;
    transform: none;
  }

  .f420-page-where-to-buy .f420-wtb-hero__overlay {
    display: block;
    padding-top: 24px;
    padding-bottom: 0;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy {
    width: 100%;
    max-width: 430px;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy .f420-actions .f420-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .f420-page-where-to-buy .f420-wtb-hero {
    min-height: clamp(760px, 214vw, 930px);
  }

  .f420-page-where-to-buy .f420-wtb-hero__overlay {
    padding-top: 18px;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy {
    max-width: none;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy h1 {
    font-size: clamp(2.2rem, 10.6vw, 2.95rem);
    line-height: .92;
    letter-spacing: -.02em;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy h3 {
    margin-top: 12px;
    font-size: clamp(1rem, 4.35vw, 1.18rem);
    line-height: 1.02;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy .f420-lead {
    max-width: 300px;
    margin-top: 12px;
    font-size: .86rem;
    line-height: 1.35;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy .f420-actions {
    gap: 12px;
    margin-top: 18px;
  }

  .f420-page-where-to-buy .f420-wtb-hero__copy .f420-actions .f420-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-where-to-buy .f420-wtb-hero__image,
  .f420-page-where-to-buy .f420-wtb-hero__visual {
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   WHERE TO BUY typography + wholesale proportion refinement - v0.4.93
   Aligns page heading scale with the approved Home page system and
   prevents the Wholesale product visual from becoming a tall column.
   ========================================================= */
.f420-page-where-to-buy .f420-wtb-hero__copy h1 {
  font-size: clamp(3.6rem, 5.15vw, 5.65rem);
  line-height: .91;
  letter-spacing: -.038em;
}

.f420-page-where-to-buy .f420-wtb-hero__copy h3 {
  font-size: clamp(1.22rem, 1.75vw, 1.75rem);
  line-height: 1;
}

.f420-page-where-to-buy .f420-wtb-proof__statement h2,
.f420-page-where-to-buy .f420-wtb-section-heading h2,
.f420-page-where-to-buy .f420-wtb-family__intro h2,
.f420-page-where-to-buy .f420-wtb-wholesale__copy h2,
.f420-page-where-to-buy .f420-wtb-final-cta h2 {
  font-size: clamp(2.8rem, 4.7vw, 5rem);
  line-height: .91;
  letter-spacing: -.025em;
}

.f420-page-where-to-buy .f420-wtb-route-card h3 {
  font-size: clamp(2.35rem, 3.5vw, 4rem);
  line-height: .92;
}

.f420-page-where-to-buy .f420-wtb-family-card__body h3 {
  font-size: clamp(1.85rem, 2.45vw, 2.85rem);
  line-height: .96;
}

.f420-page-where-to-buy .f420-wtb-route-card {
  min-height: 430px;
}

.f420-page-where-to-buy .f420-wtb-wholesale__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(48px, 7vw, 105px);
  align-items: center;
}

.f420-page-where-to-buy .f420-wtb-wholesale__copy h2 {
  max-width: 720px;
  margin-bottom: 24px;
}

.f420-page-where-to-buy .f420-wtb-wholesale__copy p {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.55;
}

.f420-page-where-to-buy .f420-wtb-wholesale__visual {
  width: 100%;
  min-height: 0;
  max-height: 560px;
  aspect-ratio: 1.12 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;
  padding: 34px 28px 24px;
  overflow: hidden;
  border: 1px solid #e3ddd5;
  background: #fff;
}

.f420-page-where-to-buy .f420-wtb-wholesale__visual::before {
  inset: 0;
  border-radius: 0;
  background: #121212;
}

.f420-page-where-to-buy .f420-wtb-wholesale__label {
  top: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1rem;
}

.f420-page-where-to-buy .f420-wtb-wholesale__product {
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 42px 8px 12px;
}

.f420-page-where-to-buy .f420-wtb-wholesale__product--top {
  grid-column: 1;
}

.f420-page-where-to-buy .f420-wtb-wholesale__product--bottom {
  grid-column: 3;
}

.f420-page-where-to-buy .f420-wtb-wholesale__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 100%;
  object-fit: contain;
}

.f420-page-where-to-buy .f420-wtb-wholesale__divider {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 5px;
  height: 66%;
  background: var(--wtb-orange);
}

@media (max-width: 1100px) {
  .f420-page-where-to-buy .f420-wtb-wholesale__grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr);
    gap: 44px;
  }
}

@media (max-width: 900px) {
  .f420-page-where-to-buy .f420-wtb-wholesale__grid {
    grid-template-columns: 1fr;
  }

  .f420-page-where-to-buy .f420-wtb-wholesale__visual {
    width: min(100%, 680px);
    max-height: none;
    aspect-ratio: 1.28 / 1;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .f420-page-where-to-buy .f420-wtb-hero__copy h1 {
    font-size: clamp(2.85rem, 13vw, 4.2rem);
  }

  .f420-page-where-to-buy .f420-wtb-proof__statement h2,
  .f420-page-where-to-buy .f420-wtb-section-heading h2,
  .f420-page-where-to-buy .f420-wtb-family__intro h2,
  .f420-page-where-to-buy .f420-wtb-wholesale__copy h2,
  .f420-page-where-to-buy .f420-wtb-final-cta h2 {
    font-size: clamp(2.7rem, 12.5vw, 4.2rem);
  }

  .f420-page-where-to-buy .f420-wtb-route-card h3 {
    font-size: clamp(2.25rem, 10vw, 3.35rem);
  }

  .f420-page-where-to-buy .f420-wtb-family-card__body h3 {
    font-size: 2.25rem;
  }

  .f420-page-where-to-buy .f420-wtb-wholesale__visual {
    aspect-ratio: 1 / 1;
    padding: 28px 18px 18px;
  }

  .f420-page-where-to-buy .f420-wtb-wholesale__product {
    padding: 38px 4px 10px;
  }

  .f420-page-where-to-buy .f420-wtb-wholesale__image {
    max-width: 90%;
    max-height: 94%;
  }
}


/* =========================================================
   WHERE TO BUY wholesale single-image treatment - v0.4.95
   One editable image only, with no generated frame, panel color,
   internal label, divider, or forced crop.
   ========================================================= */
.f420-page-where-to-buy .f420-wtb-wholesale__visual {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.f420-page-where-to-buy .f420-wtb-wholesale__visual::before,
.f420-page-where-to-buy .f420-wtb-wholesale__visual::after,
.f420-page-where-to-buy .f420-wtb-wholesale__label,
.f420-page-where-to-buy .f420-wtb-wholesale__product,
.f420-page-where-to-buy .f420-wtb-wholesale__divider {
  display: none !important;
}

.f420-page-where-to-buy .f420-wtb-wholesale__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-where-to-buy .f420-wtb-wholesale__visual:hover {
    transform: none;
    box-shadow: none;
  }

  .f420-page-where-to-buy .f420-wtb-wholesale__visual:hover .f420-wtb-wholesale__image {
    transform: translateY(-4px) scale(1.012);
  }
}

@media (max-width: 900px) {
  .f420-page-where-to-buy .f420-wtb-wholesale__visual {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-where-to-buy .f420-wtb-wholesale__image {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   WHOLESALE page - approved PDF layout adaptation - v0.4.96
   Preserves Formula 420 typography, orange/black/white hierarchy,
   global header/footer, routes, controls, accessibility, and motion.
   ========================================================= */
.f420-page-wholesale {
  --wholesale-soft: #fff7f2;
  --wholesale-line: #eaded7;
  --wholesale-dark: #17181c;
  background: #fff;
}

.f420-page-wholesale .f420-section {
  padding-block: clamp(68px, 7vw, 108px);
}

.f420-wholesale-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 68% 48%, #fff 0%, #fff 47%, #f8f8f8 100%);
  border-bottom: 1px solid var(--f420-border);
}

.f420-wholesale-hero__grid {
  min-height: clamp(620px, 51vw, 760px);
  display: grid;
  grid-template-columns: minmax(340px, .72fr) minmax(620px, 1.28fr);
  align-items: center;
  gap: clamp(36px, 4vw, 72px);
  padding-block: clamp(56px, 6vw, 90px);
}

.f420-wholesale-hero__copy {
  position: relative;
  z-index: 3;
  max-width: 520px;
}

.f420-wholesale-hero__copy .f420-eyebrow {
  color: var(--f420-orange);
}

.f420-wholesale-hero__copy h1 {
  max-width: 520px;
  font-size: clamp(4rem, 5.8vw, 6.5rem);
  line-height: .82;
  margin-bottom: 24px;
}

.f420-wholesale-hero__copy .f420-lead {
  max-width: 440px;
  color: #4d535a;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.f420-wholesale-hero__actions {
  display: grid;
  gap: 12px;
  max-width: 340px;
}

.f420-wholesale-hero__actions .f420-btn {
  width: 100%;
  justify-content: space-between;
  padding-inline: 22px;
}

.f420-wholesale-hero__actions .f420-btn::after {
  content: "→";
  font-size: 1.25em;
}

.f420-wholesale-hero__products {
  position: relative;
  min-height: 560px;
  width: 100%;
  isolation: isolate;
}

.f420-wholesale-hero__products::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 3%;
  bottom: 4%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.17) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,0) 74%);
  filter: blur(14px);
  z-index: -1;
}

.f420-wholesale-hero__bottle {
  position: absolute;
  width: clamp(130px, 12.5vw, 200px);
  transform-origin: 50% 85%;
}

.f420-wholesale-hero__bottle img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.16));
}

.f420-wholesale-hero__bottle--a4 { left: 1%; top: 45%; transform: rotate(-28deg); z-index: 1; }
.f420-wholesale-hero__bottle--a2 { left: 18%; top: 25%; transform: rotate(-23deg); z-index: 2; }
.f420-wholesale-hero__bottle--s1 { left: 36%; top: 9%; transform: rotate(-12deg); z-index: 3; }
.f420-wholesale-hero__bottle--a3 { left: 51%; top: 3%; transform: rotate(6deg); z-index: 5; }
.f420-wholesale-hero__bottle--c1 { left: 68%; top: 15%; transform: rotate(16deg); z-index: 4; }
.f420-wholesale-hero__bottle--c2 { left: 81%; top: 36%; transform: rotate(25deg); z-index: 2; }
.f420-wholesale-hero__bottle--a1 { left: 47%; top: 41%; transform: rotate(1deg); z-index: 8; }
.f420-wholesale-hero__bottle--bling { left: 91%; top: 48%; transform: rotate(27deg); z-index: 1; width: clamp(118px, 11vw, 176px); }

.f420-wholesale-proof {
  border-bottom: 1px solid var(--f420-border);
  background: #fff;
}

.f420-wholesale-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.f420-wholesale-proof__item {
  min-height: 130px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 18px;
  padding: 28px clamp(22px, 3vw, 46px);
  border-right: 1px solid var(--f420-border-strong);
}

.f420-wholesale-proof__item:last-child { border-right: 0; }

.f420-wholesale-proof__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--f420-orange);
  border-radius: 50%;
  color: var(--f420-orange);
}

.f420-wholesale-proof__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f420-wholesale-proof__icon svg path:nth-child(2) { fill: none; }
.f420-wholesale-proof__item h3 { font-size: clamp(1.05rem, 1.35vw, 1.35rem); margin-bottom: 8px; }
.f420-wholesale-proof__item p { margin: 0; color: #5b6168; font-size: .9rem; line-height: 1.45; }

.f420-wholesale-section-heading {
  max-width: 940px;
  margin-bottom: clamp(42px, 5vw, 70px);
}

.f420-wholesale-section-heading .f420-eyebrow { color: var(--f420-orange); }
.f420-wholesale-section-heading h2 { font-size: clamp(3.5rem, 5.6vw, 6rem); line-height: .86; }
.f420-wholesale-section-heading > p { max-width: 840px; margin: 28px 0 0; font-family: var(--f420-font-display); font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.08; font-weight: 900; text-transform: uppercase; }

.f420-wholesale-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.f420-wholesale-brand-card {
  min-height: 510px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(34px, 4vw, 62px);
  border-top: 1px solid var(--f420-border);
}

.f420-wholesale-brand-card--420 { background: #fff; color: #111; }
.f420-wholesale-brand-card--710 { background: var(--wholesale-dark); color: #fff; }

.f420-wholesale-brand-card__logo {
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  letter-spacing: -.06em;
}
.f420-wholesale-brand-card__logo span { color: var(--f710-yellow); }
.f420-wholesale-brand-card__logo--710 { color: var(--f710-yellow); line-height: .68; }
.f420-wholesale-brand-card__logo--710 strong { display: inline-block; color: #fff; font-size: 2.2em; letter-spacing: -.08em; }
.f420-wholesale-brand-card__logo--710 small { display: inline-block; margin-left: 12px; color: var(--f710-blue); font-size: .45em; letter-spacing: 0; }

.f420-wholesale-brand-card__products {
  min-height: 260px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0;
  padding-top: 18px;
}
.f420-wholesale-brand-card__products > div { width: 92px; margin-inline: -16px; }
.f420-wholesale-brand-card__products > div:nth-child(2) { width: 112px; z-index: 2; }
.f420-wholesale-brand-card__products img { width: 100%; max-height: 255px; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0,0,0,.15)); }
.f420-wholesale-brand-card__products--710 > div { width: 120px; margin: 0; }

.f420-wholesale-brand-card__copy h3 { font-size: clamp(1.5rem, 2.25vw, 2.15rem); }
.f420-wholesale-brand-card--710 .f420-wholesale-brand-card__copy h3 { color: var(--f710-yellow); }
.f420-wholesale-brand-card__copy p { max-width: 620px; margin: 0; color: #4d535a; font-size: .96rem; }
.f420-wholesale-brand-card--710 .f420-wholesale-brand-card__copy p { color: #d2d5d8; }

.f420-wholesale-brand-bar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: var(--f420-orange);
  color: #fff;
  font-family: var(--f420-font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.75vw, 1.55rem);
  text-transform: uppercase;
  text-align: center;
}

.f420-wholesale-tools { margin: 0; padding: 0; border: 0; background: none; }
.f420-wholesale-tools__background,
.f420-wholesale-tools__background img { display: block; width: 100%; }
.f420-wholesale-tools__background img { height: auto; }

.f420-wholesale-tools__intro {
  display: grid;
  grid-template-columns: minmax(260px, .65fr) minmax(420px, 1.35fr);
  gap: clamp(50px, 7vw, 120px);
  align-items: end;
  margin-bottom: 38px;
}

.f420-wholesale-tools__intro h2 { font-size: clamp(3.5rem, 5.3vw, 5.8rem); line-height: .86; }
.f420-wholesale-tools__intro h3 { font-size: clamp(2.2rem, 3.4vw, 3.5rem); }
.f420-wholesale-tools__intro p { max-width: 700px; color: #5b6168; }

.f420-wholesale-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.f420-wholesale-tool-card {
  min-height: 420px;
  padding: 28px;
  background: #fff;
  border-top: 5px solid var(--f420-orange);
  transition: transform .25s ease, box-shadow .25s ease;
}

.f420-wholesale-tool-card__visual {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  overflow: hidden;
  border: 3px solid #111;
  background: #fff;
}
.f420-wholesale-tool-card__visual img { width: 100%; height: 100%; object-fit: contain; }
.f420-wholesale-tool-card__visual--display img { object-fit: cover; }
.f420-wholesale-tool-card__visual--multipacks { gap: 26px; border-color: var(--f420-orange); }
.f420-wholesale-tool-card__visual--multipacks > div { width: 78px; height: 150px; border: 3px solid var(--f420-orange); padding: 10px; }
.f420-wholesale-tool-card__visual--multipacks img { object-fit: contain; }
.f420-wholesale-tool-card__visual--support { position: relative; background: #161616; color: #fff; }
.f420-wholesale-tool-card__visual--support img { position: absolute; inset: 0; opacity: .09; object-fit: cover; }
.f420-wholesale-tool-card__visual--support > span { position: relative; z-index: 2; font-family: var(--f420-font-display); font-size: 1.7rem; font-weight: 900; line-height: .85; text-align: center; }
.f420-wholesale-tool-card__visual--support > span span { color: var(--f420-orange); }

.f420-wholesale-tool-card h3 { font-size: clamp(1.6rem, 2.25vw, 2.2rem); margin-bottom: 10px; }
.f420-wholesale-tool-card p { margin: 0; color: #666d74; font-size: .92rem; line-height: 1.4; }

.f420-wholesale-tools__footer {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #ddcfc6;
}
.f420-wholesale-tools__footer strong { font-family: var(--f420-font-display); font-size: clamp(1.2rem, 1.9vw, 1.7rem); text-transform: uppercase; }

.f420-wholesale-support__grid {
  display: grid;
  grid-template-columns: minmax(380px, .95fr) minmax(480px, 1.05fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}
.f420-wholesale-support__copy .f420-eyebrow { color: var(--f420-orange); }
.f420-wholesale-support__copy h2 { font-size: clamp(3.5rem, 5.2vw, 5.8rem); line-height: .86; }
.f420-wholesale-support__copy p { max-width: 620px; color: #5b6168; }
.f420-wholesale-support__copy h3 { margin-top: 28px; padding: 22px 0; border-top: 5px solid var(--f420-orange); border-bottom: 1px solid var(--f420-border); font-size: clamp(1.6rem, 2.15vw, 2.1rem); }
.f420-wholesale-support__visual { min-height: 420px; display: flex; align-items: center; justify-content: center; background: #f5f5f3; overflow: hidden; }
.f420-wholesale-support__image { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

.f420-wholesale-contact { background: var(--wholesale-soft); }

.f420-wholesale-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: clamp(38px, 5vw, 70px);
  background: var(--f420-orange);
  color: #fff;
}
.f420-wholesale-callout small { display: block; margin-bottom: 14px; font-family: var(--f420-font-display); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.f420-wholesale-callout h2 { color: #111; font-size: clamp(3.2rem, 5vw, 5.4rem); line-height: .82; }
.f420-wholesale-callout h2 span { color: #fff; }
.f420-wholesale-callout p { max-width: 740px; margin: 22px 0 14px; color: #fff; }
.f420-wholesale-callout strong { font-family: var(--f420-font-display); font-size: .9rem; letter-spacing: .04em; }
.f420-wholesale-callout > .f420-btn { min-width: 300px; color: #111; }

.f420-wholesale-route-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin: clamp(54px, 6vw, 82px) 0 28px;
}
.f420-wholesale-route-heading .f420-eyebrow { color: var(--f420-orange); }
.f420-wholesale-route-heading h2 { font-size: clamp(3rem, 4.3vw, 4.6rem); }
.f420-wholesale-route-heading > p { max-width: 430px; color: #666d74; text-align: right; }

.f420-wholesale-router--pdf { gap: 18px; margin-top: 0; }
.f420-wholesale-router--pdf .f420-wholesale-route {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 0;
  border-top: 5px solid var(--f420-orange);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.f420-wholesale-router--pdf .f420-wholesale-route h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
.f420-wholesale-router--pdf .f420-wholesale-route p { color: #666d74; }
.f420-wholesale-router--pdf .f420-wholesale-route .f420-btn { width: auto; margin-top: auto; align-self: flex-start; }

@media (hover:hover) and (pointer:fine) {
  .f420-wholesale-hero__bottle,
  .f420-wholesale-brand-card__products img,
  .f420-wholesale-tool-card__visual img,
  .f420-wholesale-support__image {
    transition: transform .35s var(--f420-ease), filter .35s ease;
  }
  .f420-wholesale-hero__bottle:hover { z-index: 20; transform: translateY(-12px) scale(1.04) rotate(0deg); }
  .f420-wholesale-brand-card:hover .f420-wholesale-brand-card__products img { transform: translateY(-8px); }
  .f420-wholesale-tool-card:hover,
  .f420-wholesale-router--pdf .f420-wholesale-route:hover { transform: translateY(-7px); box-shadow: 0 18px 34px rgba(0,0,0,.1); }
  .f420-wholesale-tool-card:hover .f420-wholesale-tool-card__visual img { transform: scale(1.035); }
  .f420-wholesale-support__visual:hover .f420-wholesale-support__image { transform: scale(1.025); }
}

@media (max-width: 1100px) {
  .f420-wholesale-hero__grid { grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.2fr); }
  .f420-wholesale-hero__products { min-height: 500px; }
  .f420-wholesale-hero__bottle { width: clamp(110px, 12vw, 160px); }
  .f420-wholesale-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f420-wholesale-support__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .f420-wholesale-hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 48px;
    padding-bottom: 0;
  }
  .f420-wholesale-hero__copy { max-width: 620px; }
  .f420-wholesale-hero__copy h1 { font-size: clamp(3.4rem, 10vw, 5rem); }
  .f420-wholesale-hero__products { min-height: 560px; margin-top: 12px; }
  .f420-wholesale-hero__bottle { width: clamp(105px, 18vw, 150px); }
  .f420-wholesale-proof__grid { grid-template-columns: 1fr; }
  .f420-wholesale-proof__item { border-right: 0; border-bottom: 1px solid var(--f420-border); }
  .f420-wholesale-proof__item:last-child { border-bottom: 0; }
  .f420-wholesale-brand-grid { grid-template-columns: 1fr; }
  .f420-wholesale-tools__intro { grid-template-columns: 1fr; gap: 22px; }
  .f420-wholesale-support__grid { grid-template-columns: 1fr; }
  .f420-wholesale-support__visual { min-height: 360px; }
  .f420-wholesale-support__image { min-height: 360px; }
  .f420-wholesale-callout { grid-template-columns: 1fr; }
  .f420-wholesale-callout > .f420-btn { min-width: 0; width: 100%; }
  .f420-wholesale-route-heading { align-items: start; flex-direction: column; }
  .f420-wholesale-route-heading > p { text-align: left; }
}

@media (max-width: 680px) {
  .f420-page-wholesale .f420-section { padding-block: 58px; }
  .f420-wholesale-hero__grid { width: min(100% - 28px, 90rem); }
  .f420-wholesale-hero__copy h1 { font-size: clamp(2.9rem, 15vw, 4.25rem); }
  .f420-wholesale-hero__copy .f420-lead { font-size: .95rem; }
  .f420-wholesale-hero__products { min-height: 470px; margin-inline: -4px; }
  .f420-wholesale-hero__bottle { width: 108px; }
  .f420-wholesale-hero__bottle--a4 { left: -3%; top: 47%; }
  .f420-wholesale-hero__bottle--a2 { left: 10%; top: 27%; }
  .f420-wholesale-hero__bottle--s1 { left: 28%; top: 10%; }
  .f420-wholesale-hero__bottle--a3 { left: 45%; top: 5%; }
  .f420-wholesale-hero__bottle--c1 { left: 62%; top: 20%; }
  .f420-wholesale-hero__bottle--c2 { left: 77%; top: 39%; }
  .f420-wholesale-hero__bottle--a1 { left: 42%; top: 43%; z-index: 10; }
  .f420-wholesale-hero__bottle--bling { left: 84%; top: 51%; width: 96px; }
  .f420-wholesale-proof__item { grid-template-columns: 50px 1fr; padding-inline: 20px; }
  .f420-wholesale-section-heading h2,
  .f420-wholesale-tools__intro h2,
  .f420-wholesale-support__copy h2 { font-size: clamp(2.9rem, 14vw, 4.2rem); }
  .f420-wholesale-brand-card { min-height: 460px; padding: 28px 22px; }
  .f420-wholesale-brand-card__products { min-height: 230px; }
  .f420-wholesale-tools__grid { grid-template-columns: 1fr; }
  .f420-wholesale-tool-card { min-height: 390px; }
  .f420-wholesale-tools__footer { align-items: stretch; flex-direction: column; }
  .f420-wholesale-tools__footer .f420-btn { width: 100%; }
  .f420-wholesale-support__visual,
  .f420-wholesale-support__image { min-height: 300px; }
  .f420-wholesale-callout { padding: 28px 22px; }
  .f420-wholesale-callout h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .f420-wholesale-callout strong { font-size: .72rem; }
  .f420-wholesale-router--pdf { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-wholesale *,
  .f420-page-wholesale *::before,
  .f420-page-wholesale *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   WHOLESALE page refinement - v0.4.97
   Single editable hero image, Bebas Neue page typography,
   simplified Formula 420 / Formula 710 brand labels,
   and full-strength CTA colors even when routes are pending.
   ========================================================= */
.f420-page-wholesale h1,
.f420-page-wholesale h2,
.f420-page-wholesale h3,
.f420-page-wholesale h4,
.f420-page-wholesale .f420-eyebrow,
.f420-page-wholesale .f420-btn,
.f420-page-wholesale .f420-wholesale-brand-card__logo,
.f420-page-wholesale .f420-wholesale-brand-bar,
.f420-page-wholesale .f420-wholesale-tools__footer strong,
.f420-page-wholesale .f420-wholesale-callout small,
.f420-page-wholesale .f420-wholesale-callout strong,
.f420-page-wholesale .f420-wholesale-section-heading > p,
.f420-page-wholesale .f420-wholesale-tool-card__visual--support > span {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 400;
}

.f420-page-wholesale .f420-wholesale-hero__products {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  isolation: auto;
}

.f420-page-wholesale .f420-wholesale-hero__products::before {
  display: none;
}

.f420-page-wholesale .f420-wholesale-hero__image {
  width: 100%;
  max-width: 1040px;
  max-height: 590px;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .12em;
  font-size: clamp(2.25rem, 3.4vw, 3.8rem);
  line-height: .88;
  font-style: normal;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo span {
  color: var(--f420-orange);
}

.f420-page-wholesale .f420-wholesale-brand-card__logo--710 {
  color: #fff;
  line-height: .88;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo--710 strong {
  display: inline;
  color: var(--f710-yellow);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: .005em;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo--710 small {
  display: inline-block;
  margin-left: .35em;
  color: var(--f710-blue);
  font-size: .42em;
  line-height: 1;
  letter-spacing: .03em;
}

.f420-page-wholesale .f420-btn,
.f420-page-wholesale [data-route-status="pending"] {
  opacity: 1 !important;
}

.f420-page-wholesale .f420-btn--primary {
  background: #ff5100 !important;
  border-color: #ff5100 !important;
  color: #fff !important;
}

.f420-page-wholesale .f420-btn--dark {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.f420-page-wholesale .f420-btn--outline {
  background: #fff !important;
  border-color: #ff5100 !important;
  color: #ff5100 !important;
}

.f420-page-wholesale .f420-btn--light {
  background: #fff !important;
  border-color: #fff !important;
  color: #111 !important;
}

.f420-page-wholesale .f420-btn--accent {
  background: #fcc629 !important;
  border-color: #fcc629 !important;
  color: #111 !important;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-wholesale .f420-wholesale-hero__image {
    transition: transform .35s var(--f420-ease);
  }

  .f420-page-wholesale .f420-wholesale-hero__products:hover .f420-wholesale-hero__image {
    transform: translateY(-7px) scale(1.01);
  }

  .f420-page-wholesale .f420-btn:hover {
    opacity: 1 !important;
    filter: saturate(1.08) brightness(1.03);
  }
}

@media (max-width: 1100px) {
  .f420-page-wholesale .f420-wholesale-hero__products {
    min-height: 470px;
  }

  .f420-page-wholesale .f420-wholesale-hero__image {
    max-height: 520px;
  }
}

@media (max-width: 900px) {
  .f420-page-wholesale .f420-wholesale-hero__products {
    min-height: 430px;
    margin-top: 16px;
  }

  .f420-page-wholesale .f420-wholesale-hero__image {
    max-width: 900px;
    max-height: 460px;
  }
}

@media (max-width: 680px) {
  .f420-page-wholesale .f420-wholesale-hero__products {
    min-height: 330px;
    margin-inline: 0;
  }

  .f420-page-wholesale .f420-wholesale-hero__image {
    width: 116%;
    max-width: none;
    max-height: 360px;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__logo {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}


/* =========================================================
   WHOLESALE typography + button consistency refinement - v0.4.98
   Keeps Bebas Neue exclusively on display titles while restoring the
   standard site font treatment for eyebrow labels, buttons, and body copy.
   Hero CTAs now match the established Our Story button language.
   ========================================================= */

/* Display titles only */
.f420-page-wholesale h1,
.f420-page-wholesale h2,
.f420-page-wholesale h3,
.f420-page-wholesale h4,
.f420-page-wholesale .f420-wholesale-brand-card__logo,
.f420-page-wholesale .f420-wholesale-brand-bar,
.f420-page-wholesale .f420-wholesale-tool-card__visual--support > span {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 400;
}

/* Eyebrows / hairlines match the rest of the site, not the display title font */
.f420-page-wholesale .f420-eyebrow,
.f420-page-wholesale .f420-wholesale-callout small {
  font-family: var(--f420-font-display) !important;
  font-weight: 900;
  font-size: .9rem;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Standard body typography for supporting statements and section copy */
.f420-page-wholesale p,
.f420-page-wholesale .f420-wholesale-section-heading > p,
.f420-page-wholesale .f420-wholesale-tools__footer strong,
.f420-page-wholesale .f420-wholesale-callout strong {
  font-family: var(--f420-font-body) !important;
}

.f420-page-wholesale .f420-wholesale-section-heading > p {
  max-width: 840px;
  margin-top: 28px;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

.f420-page-wholesale .f420-wholesale-tools__footer strong,
.f420-page-wholesale .f420-wholesale-callout strong {
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .025em;
}

/* Buttons match the established Our Story / sitewide control system */
.f420-page-wholesale .f420-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 4px;
  font-family: var(--f420-font-display) !important;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
}

.f420-page-wholesale .f420-btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  bottom: -60%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-page-wholesale .f420-btn > span {
  position: relative;
  z-index: 1;
}

/* Remove the PDF-specific arrow treatment from hero actions */
.f420-page-wholesale .f420-wholesale-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: none;
}

.f420-page-wholesale .f420-wholesale-hero__actions .f420-btn {
  width: auto;
  min-width: 210px;
  justify-content: center;
  padding-inline: 24px;
}

.f420-page-wholesale .f420-wholesale-hero__actions .f420-btn::after {
  display: none;
  content: none;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-wholesale .f420-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.13);
  }

  .f420-page-wholesale .f420-btn:hover::before {
    transform: translateX(640%) skewX(-18deg);
  }
}

@media (max-width: 680px) {
  .f420-page-wholesale .f420-eyebrow,
  .f420-page-wholesale .f420-wholesale-callout small {
    font-size: .78rem;
  }

  .f420-page-wholesale .f420-wholesale-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .f420-page-wholesale .f420-wholesale-hero__actions .f420-btn {
    width: 100%;
    min-width: 0;
  }

  .f420-page-wholesale .f420-wholesale-section-heading > p {
    font-size: .98rem;
    line-height: 1.48;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-wholesale .f420-btn,
  .f420-page-wholesale .f420-btn::before {
    transition: none !important;
    transform: none !important;
  }
}


/* OUR STORY products copy clearance refinement - v0.5.00 */
@media (min-width: 761px) {
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 90px);
  }
}

@media (max-width: 760px) {
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 46px);
  }
}

@media (max-width: 520px) {
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 28px);
  }
}


/* =========================================================
   OUR STORY approved full-bleed hero + products copy clearance - v0.5.01
   Desktop hero: 2400x1200. Mobile hero: 1080x2160.
   ========================================================= */
.f420-page-ourstory .f420-ourstory-hero--fullbleed {
  position: relative;
  min-height: clamp(700px, 60vw, 860px);
  padding: 0;
  overflow: hidden;
  background: #f3f1ee;
}

.f420-page-ourstory .f420-ourstory-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.f420-page-ourstory .f420-ourstory-hero__visual::before {
  display: none;
  content: none;
}

.f420-page-ourstory .f420-ourstory-hero__picture,
.f420-page-ourstory .f420-ourstory-hero__image {
  display: block;
  width: 100%;
  height: 100%;
}

.f420-page-ourstory .f420-ourstory-hero__image {
  object-fit: cover;
  object-position: center center;
}

.f420-page-ourstory .f420-ourstory-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(58px, 7vw, 96px);
}

.f420-page-ourstory .f420-ourstory-hero__copy {
  width: 100%;
  max-width: min(48%, 650px);
}

.f420-page-ourstory .f420-ourstory-hero__copy h1 {
  font-size: clamp(4rem, 6.1vw, 7rem);
  line-height: .82;
}

.f420-page-ourstory .f420-ourstory-hero__copy .f420-lead {
  max-width: 590px;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-ourstory .f420-ourstory-hero__image {
    transition: transform .4s ease;
  }
  .f420-page-ourstory .f420-ourstory-hero__visual:hover .f420-ourstory-hero__image {
    transform: translateY(-6px) scale(1.01);
  }
}

@media (max-width: 900px) {
  .f420-page-ourstory .f420-ourstory-hero--fullbleed {
    min-height: clamp(780px, 220vw, 980px);
  }


  .f420-page-ourstory .f420-ourstory-hero__image {
    object-position: center center;
  }

  .f420-page-ourstory .f420-ourstory-hero__overlay {
    display: block;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .f420-page-ourstory .f420-ourstory-hero__copy {
    max-width: 440px;
  }

  .f420-page-ourstory .f420-ourstory-hero__copy .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }

  .f420-page-ourstory .f420-ourstory-hero__copy .f420-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .f420-page-ourstory .f420-ourstory-hero--fullbleed {
    min-height: clamp(760px, 218vw, 930px);
  }

  .f420-page-ourstory .f420-ourstory-hero__copy h1 {
    font-size: clamp(2.85rem, 13vw, 4.2rem);
    line-height: .88;
  }

  .f420-page-ourstory .f420-ourstory-hero__copy .f420-lead {
    max-width: 320px;
    font-size: .86rem;
    line-height: 1.38;
  }
}

/* Move THE PRODUCTS copy higher and keep the bottles lower. */
.f420-page-ourstory .f420-ourstory-products__overlay {
  padding-top: 4px;
}

@media (min-width: 761px) {
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 155px);
  }
}

@media (max-width: 760px) {
  .f420-page-ourstory .f420-ourstory-products__overlay {
    padding-top: 12px;
  }
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 82px);
  }
}

@media (max-width: 520px) {
  .f420-page-ourstory .f420-ourstory-products__overlay {
    padding-top: 14px;
  }
  .f420-page-ourstory .f420-ourstory-products__image {
    object-position: center calc(100% + 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-ourstory .f420-ourstory-hero__image {
    transform: none !important;
    transition: none !important;
  }
}


/* OUR STORY hero fade removal - v0.5.02 */
.f420-page-ourstory .f420-ourstory-hero__visual::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* OUR STORY hero copy width refinement - v0.5.03 */
@media (min-width: 1101px) {
  .f420-page-ourstory .f420-ourstory-hero__copy {
    max-width: min(39%, 570px);
  }

  .f420-page-ourstory .f420-ourstory-hero__copy .f420-lead {
    max-width: 500px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .f420-page-ourstory .f420-ourstory-hero__copy {
    max-width: 48%;
  }

  .f420-page-ourstory .f420-ourstory-hero__copy .f420-lead {
    max-width: 460px;
  }
}


/* =========================================================
   WHOLESALE full-bleed hero treatment - v0.5.05
   Uses the single editable wholesale hero image as a true full-width
   background-style image with copy and CTAs layered on top.
   Recommended image sizes: desktop 2400 x 1200 px, mobile 1080 x 2160 px.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-hero {
  position: relative;
  min-height: clamp(680px, 58vw, 840px);
  overflow: hidden;
  background: #f4f2ef;
  border-bottom: 1px solid var(--f420-border);
}

.f420-page-wholesale .f420-wholesale-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.f420-page-wholesale .f420-wholesale-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.f420-page-wholesale .f420-wholesale-hero__visual::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(49%, 900px);
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(247,246,244,.99) 0%,
    rgba(247,246,244,.99) 52%,
    rgba(247,246,244,.88) 68%,
    rgba(247,246,244,.46) 84%,
    rgba(247,246,244,.10) 94%,
    rgba(247,246,244,0) 100%
  );
  pointer-events: none;
}

.f420-page-wholesale .f420-wholesale-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  filter: none;
}

.f420-page-wholesale .f420-wholesale-hero__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(70px, 8vw, 112px);
}

.f420-page-wholesale .f420-wholesale-hero__copy {
  max-width: min(46%, 560px);
}

.f420-page-wholesale .f420-wholesale-hero__copy h1 {
  max-width: 560px;
  font-size: clamp(4rem, 5.8vw, 6.3rem);
}

.f420-page-wholesale .f420-wholesale-hero__copy .f420-lead {
  max-width: 500px;
}

.f420-page-wholesale .f420-wholesale-hero__products,
.f420-page-wholesale .f420-wholesale-hero__grid {
  display: none !important;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-wholesale .f420-wholesale-hero__image {
    transition: transform .4s ease;
  }

  .f420-page-wholesale .f420-wholesale-hero__visual:hover .f420-wholesale-hero__image {
    transform: translateY(-6px) scale(1.01);
  }
}

@media (max-width: 1100px) {
  .f420-page-wholesale .f420-wholesale-hero__copy {
    max-width: min(50%, 540px);
  }

  .f420-page-wholesale .f420-wholesale-hero__image {
    object-position: 58% center;
  }
}

@media (max-width: 900px) {
  .f420-page-wholesale .f420-wholesale-hero {
    min-height: clamp(760px, 190vw, 980px);
  }

  .f420-page-wholesale .f420-wholesale-hero__visual::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    background: linear-gradient(
      180deg,
      rgba(247,246,244,1) 0%,
      rgba(247,246,244,1) 30%,
      rgba(247,246,244,.96) 38%,
      rgba(247,246,244,.72) 47%,
      rgba(247,246,244,.28) 57%,
      rgba(247,246,244,0) 67%
    );
  }

  .f420-page-wholesale .f420-wholesale-hero__image {
    object-position: center center;
  }

  .f420-page-wholesale .f420-wholesale-hero__overlay {
    display: block;
    padding-top: 26px;
    padding-bottom: 0;
  }

  .f420-page-wholesale .f420-wholesale-hero__copy {
    max-width: 560px;
  }
}

@media (max-width: 680px) {
  .f420-page-wholesale .f420-wholesale-hero {
    min-height: clamp(760px, 205vw, 980px);
  }

  .f420-page-wholesale .f420-wholesale-hero__overlay {
    padding-top: 18px;
  }

  .f420-page-wholesale .f420-wholesale-hero__copy {
    max-width: none;
  }

  .f420-page-wholesale .f420-wholesale-hero__copy h1 {
    font-size: clamp(3rem, 14vw, 4.2rem);
    line-height: .88;
  }

  .f420-page-wholesale .f420-wholesale-hero__copy .f420-lead {
    max-width: 340px;
    font-size: .94rem;
    line-height: 1.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-wholesale .f420-wholesale-hero__image {
    transform: none !important;
    transition: none !important;
  }
}


/* WHOLESALE hero overlay containment refinement - v0.5.06 */
@media (min-width: 901px) {
  .f420-page-wholesale .f420-wholesale-hero__visual::before {
    width: min(49%, 900px);
  }
}


/* =========================================================
   OUR STORY short-width hero readability gradient - v0.5.07
   Matches the refined Wholesale hero treatment while keeping the
   gradient tightly contained behind the copy and away from bottles.
   ========================================================= */
@media (min-width: 901px) {
  .f420-page-ourstory .f420-ourstory-hero__visual::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(45%, 820px);
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(247,246,244,.99) 0%,
      rgba(247,246,244,.99) 48%,
      rgba(247,246,244,.90) 64%,
      rgba(247,246,244,.54) 80%,
      rgba(247,246,244,.16) 93%,
      rgba(247,246,244,0) 100%
    ) !important;
    pointer-events: none;
  }
}


/* =========================================================
   Smog-Out size bottle shadow removal - v0.5.10
   Removes only the shadow/filter around the two bottle images so
   white-background uploads blend cleanly into the card background.
   The card shadows and hover lift remain unchanged.
   ========================================================= */
.f420-page-smogout .f420-smog-sizes-section .f420-size-card__media img {
  filter: none !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-smogout .f420-smog-sizes-section .f420-size-card:hover .f420-size-card__media img {
    filter: none !important;
  }
}


/* =========================================================
   WHOLESALE entrance animations + rollover parity - v0.5.11
   Matches the approved Home, Formula 420, Formula 710, BLING,
   Smog-Out, and Where To Buy motion language.
   ========================================================= */
.f420-page-wholesale.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
  transition:
    transform 680ms cubic-bezier(.2, .68, .18, 1),
    opacity 680ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-wholesale.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-38px, 0, 0);
}

.f420-page-wholesale.f420-motion-ready .f420-reveal--right {
  transform: translate3d(38px, 0, 0);
}

.f420-page-wholesale.f420-motion-ready .f420-reveal--scale {
  transform: translate3d(0, 18px, 0) scale(.97);
}

.f420-page-wholesale.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.f420-page-wholesale .f420-wholesale-proof__item,
.f420-page-wholesale .f420-wholesale-brand-card,
.f420-page-wholesale .f420-wholesale-brand-bar,
.f420-page-wholesale .f420-wholesale-tool-card,
.f420-page-wholesale .f420-wholesale-support__visual,
.f420-page-wholesale .f420-wholesale-callout,
.f420-page-wholesale .f420-wholesale-router--pdf .f420-wholesale-route {
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    background-position 520ms cubic-bezier(.22, 1, .36, 1);
}

.f420-page-wholesale .f420-wholesale-proof__icon,
.f420-page-wholesale .f420-wholesale-brand-card__products img,
.f420-page-wholesale .f420-wholesale-tool-card__visual img,
.f420-page-wholesale .f420-wholesale-support__image {
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    filter 340ms ease;
}

.f420-page-wholesale .f420-wholesale-brand-bar {
  background-image: linear-gradient(115deg, #ff5100 0%, #ff6a00 48%, #ff5100 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-wholesale.f420-motion-ready .f420-wholesale-proof__item.f420-reveal.is-visible:hover {
    transform: translateY(-6px);
    background: #fffaf6;
    box-shadow: 0 16px 32px rgba(0, 45, 88, .10);
    z-index: 2;
  }

  .f420-page-wholesale .f420-wholesale-proof__item:hover .f420-wholesale-proof__icon {
    transform: translateY(-3px) scale(1.06) rotate(-4deg);
  }

  .f420-page-wholesale.f420-motion-ready .f420-wholesale-brand-card.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .11);
    z-index: 2;
  }

  .f420-page-wholesale .f420-wholesale-brand-card:hover .f420-wholesale-brand-card__products img {
    transform: translateY(-9px) scale(1.025);
  }

  .f420-page-wholesale.f420-motion-ready .f420-wholesale-brand-bar.f420-reveal.is-visible:hover {
    transform: translateY(-4px);
    background-position: 100% 50%;
    box-shadow: 0 14px 28px rgba(255, 81, 0, .18);
  }

  .f420-page-wholesale.f420-motion-ready .f420-wholesale-tool-card.f420-reveal.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 38px rgba(0, 45, 88, .11);
  }

  .f420-page-wholesale .f420-wholesale-tool-card:hover .f420-wholesale-tool-card__visual img {
    transform: scale(1.04);
  }

  .f420-page-wholesale.f420-motion-ready .f420-wholesale-support__visual.f420-reveal.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(0, 45, 88, .10);
  }

  .f420-page-wholesale .f420-wholesale-support__visual:hover .f420-wholesale-support__image {
    transform: scale(1.028);
  }

  .f420-page-wholesale.f420-motion-ready .f420-wholesale-router--pdf .f420-wholesale-route.f420-reveal.is-visible:hover {
    transform: translateY(-8px);
    border-top-color: #003667;
    box-shadow: 0 20px 38px rgba(0, 45, 88, .11);
  }

  .f420-page-wholesale .f420-wholesale-callout:hover {
    box-shadow: 0 20px 42px rgba(255, 81, 0, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-wholesale .f420-reveal,
  .f420-page-wholesale .f420-reveal.is-visible,
  .f420-page-wholesale .f420-wholesale-proof__item,
  .f420-page-wholesale .f420-wholesale-proof__icon,
  .f420-page-wholesale .f420-wholesale-brand-card,
  .f420-page-wholesale .f420-wholesale-brand-card__products img,
  .f420-page-wholesale .f420-wholesale-brand-bar,
  .f420-page-wholesale .f420-wholesale-tool-card,
  .f420-page-wholesale .f420-wholesale-tool-card__visual img,
  .f420-page-wholesale .f420-wholesale-support__visual,
  .f420-page-wholesale .f420-wholesale-support__image,
  .f420-page-wholesale .f420-wholesale-callout,
  .f420-page-wholesale .f420-wholesale-router--pdf .f420-wholesale-route {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   OUR STORY entrance animations + rollover parity - v0.5.12
   Matches the approved motion language used across Home, product,
   Where To Buy, and Wholesale pages while preserving accessibility.
   ========================================================= */
.f420-page-ourstory.f420-motion-ready .f420-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
  transition:
    transform 680ms cubic-bezier(.2, .68, .18, 1),
    opacity 680ms ease;
  transition-delay: var(--f420-reveal-delay, 0ms);
}

.f420-page-ourstory.f420-motion-ready .f420-reveal--left {
  transform: translate3d(-38px, 0, 0);
}

.f420-page-ourstory.f420-motion-ready .f420-reveal--right {
  transform: translate3d(38px, 0, 0);
}

.f420-page-ourstory.f420-motion-ready .f420-reveal--scale {
  transform: translate3d(0, 18px, 0) scale(.97);
}

.f420-page-ourstory.f420-motion-ready .f420-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.f420-page-ourstory .f420-ourstory-original-card,
.f420-page-ourstory .f420-ourstory-process,
.f420-page-ourstory .f420-ourstory-process__benefits span,
.f420-page-ourstory .f420-ourstory-brand__callout,
.f420-page-ourstory .f420-ourstory-brand__media,
.f420-page-ourstory .f420-ourstory-products__media,
.f420-page-ourstory .f420-ourstory-cta__statement {
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms ease,
    border-color 220ms ease,
    background-color 220ms ease;
}

.f420-page-ourstory .f420-ourstory-original-card__bottle img,
.f420-page-ourstory .f420-ourstory-brand__media img,
.f420-page-ourstory .f420-ourstory-products__image {
  transition:
    transform 360ms cubic-bezier(.22, 1, .36, 1),
    filter 360ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .f420-page-ourstory.f420-motion-ready .f420-ourstory-original-card.f420-reveal.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 42px rgba(0, 45, 88, .12);
  }

  .f420-page-ourstory .f420-ourstory-original-card:hover .f420-ourstory-original-card__bottle img {
    transform: translateY(-9px) scale(1.025);
  }

  .f420-page-ourstory.f420-motion-ready .f420-ourstory-process.f420-reveal.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(0, 45, 88, .09);
  }

  .f420-page-ourstory.f420-motion-ready .f420-ourstory-process__benefits span.f420-reveal.is-visible:hover {
    transform: translateY(-4px);
    border-top-color: #003667;
    background: #fff9f5;
    box-shadow: 0 10px 22px rgba(0, 45, 88, .08);
  }

  .f420-page-ourstory .f420-ourstory-brand__callout:hover {
    transform: translateX(6px);
    border-left-color: #ff7a00;
    background: #2b2b2b;
  }

  .f420-page-ourstory.f420-motion-ready .f420-ourstory-brand__media.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
  }

  .f420-page-ourstory .f420-ourstory-brand__media:hover img {
    transform: scale(1.03);
  }

  .f420-page-ourstory.f420-motion-ready .f420-ourstory-products__media.f420-reveal.is-visible:hover {
    transform: translateY(-5px);
  }

  .f420-page-ourstory .f420-ourstory-products__media:hover .f420-ourstory-products__image {
    transform: scale(1.018);
  }

  .f420-page-ourstory.f420-motion-ready .f420-ourstory-cta__statement.f420-reveal.is-visible:hover {
    transform: translateY(-7px);
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 20px 38px rgba(83, 20, 0, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-ourstory .f420-reveal,
  .f420-page-ourstory .f420-reveal.is-visible,
  .f420-page-ourstory .f420-ourstory-original-card,
  .f420-page-ourstory .f420-ourstory-original-card__bottle img,
  .f420-page-ourstory .f420-ourstory-process,
  .f420-page-ourstory .f420-ourstory-process__benefits span,
  .f420-page-ourstory .f420-ourstory-brand__callout,
  .f420-page-ourstory .f420-ourstory-brand__media,
  .f420-page-ourstory .f420-ourstory-brand__media img,
  .f420-page-ourstory .f420-ourstory-products__media,
  .f420-page-ourstory .f420-ourstory-products__image,
  .f420-page-ourstory .f420-ourstory-cta__statement {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* OUR STORY THE BRAND black-background refinement - v0.5.13 */
.f420-page-ourstory .f420-ourstory-brand,
.f420-page-ourstory .f420-ourstory-brand__media,
.f420-page-ourstory .f420-ourstory-brand__media picture {
  background: #000 !important;
}

/* =========================================================
   OUR STORY THE BRAND full-height image refinement - v0.5.14
   Makes the image fill the complete vertical height of the section
   while preserving the black background, copy layout, and motion.
   ========================================================= */
@media (min-width: 1101px) {
  .f420-page-ourstory .f420-ourstory-brand {
    padding-block: 0;
  }

  .f420-page-ourstory .f420-ourstory-brand__grid {
    min-height: 720px;
    align-items: stretch;
  }

  .f420-page-ourstory .f420-ourstory-brand__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(72px, 8vw, 120px);
  }

  .f420-page-ourstory .f420-ourstory-brand__media {
    position: relative;
    min-height: 720px;
    align-self: stretch;
  }

  .f420-page-ourstory .f420-ourstory-brand__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 1100px) {
  .f420-page-ourstory .f420-ourstory-brand__media {
    position: relative;
    min-height: 520px;
  }

  .f420-page-ourstory .f420-ourstory-brand__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 760px) {
  .f420-page-ourstory .f420-ourstory-brand__media {
    min-height: 380px;
  }
}


/* =========================================================
   OUR STORY THE BRAND image containment refinement - v0.5.15
   Keeps the image visually full-height against black while preventing
   cropping on the top/right edges and keeping it inside the section.
   ========================================================= */
@media (min-width: 1101px) {
  .f420-page-ourstory .f420-ourstory-brand__grid {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 4vw, 68px);
  }

  .f420-page-ourstory .f420-ourstory-brand__media {
    overflow: hidden;
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    transform-origin: right center;
  }
}

@media (max-width: 1100px) {
  .f420-page-ourstory .f420-ourstory-brand__media {
    overflow: hidden;
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

/* =========================================================
   OUR STORY THE BRAND contained full-height media - v0.5.16
   Keeps the visual fully inside the section, fills the media column height,
   and removes the media rollover movement that caused the black frame to
   protrude above the section.
   Recommended artwork: 1800 x 1500 px (6:5), black background.
   ========================================================= */
.f420-page-ourstory .f420-ourstory-brand {
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1101px) {
  .f420-page-ourstory .f420-ourstory-brand__grid {
    min-height: 720px;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(24px, 3.5vw, 56px);
    align-items: stretch;
    overflow: hidden;
  }

  .f420-page-ourstory .f420-ourstory-brand__media {
    position: relative;
    min-height: 720px;
    height: auto;
    align-self: stretch;
    overflow: hidden;
    background: #000;
    clip-path: inset(0);
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: right center;
    background: #000;
  }
}

/* Remove only the image/media rollover movement. Entrance reveals remain. */
@media (hover: hover) and (pointer: fine) {
  .f420-page-ourstory.f420-motion-ready .f420-ourstory-brand__media.f420-reveal.is-visible:hover {
    transform: translate3d(0, 0, 0) !important;
  }

  .f420-page-ourstory .f420-ourstory-brand__media:hover img {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .f420-page-ourstory .f420-ourstory-brand__grid {
    overflow: hidden;
  }

  .f420-page-ourstory .f420-ourstory-brand__media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #000;
    clip-path: inset(0);
  }

  .f420-page-ourstory .f420-ourstory-brand__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    background: #000;
  }
}

@media (max-width: 760px) {
  .f420-page-ourstory .f420-ourstory-brand__media {
    min-height: 380px;
  }
}


/* =========================================================
   Wholesale two-brand image alignment - v0.5.20
   One complete editable image per brand panel, centered in
   equally sized visual areas on desktop and mobile.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-brand-card {
  grid-template-rows: minmax(78px, auto) minmax(330px, 1fr) auto;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo {
  min-height: 78px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.f420-page-wholesale .f420-wholesale-brand-card__products--single {
  width: 100%;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px 12px;
  overflow: hidden;
}

.f420-page-wholesale .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(88%, 620px);
  max-height: 315px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.13));
}

.f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image {
  max-width: min(84%, 580px);
  max-height: 315px;
}

@media (max-width: 1100px) {
  .f420-page-wholesale .f420-wholesale-brand-card {
    grid-template-rows: minmax(72px, auto) minmax(300px, 1fr) auto;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__products--single {
    min-height: 300px;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image,
  .f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image {
    max-height: 285px;
  }
}

@media (max-width: 680px) {
  .f420-page-wholesale .f420-wholesale-brand-card {
    min-height: 520px;
    grid-template-rows: minmax(66px, auto) minmax(275px, 1fr) auto;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__logo {
    min-height: 66px;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__products--single {
    min-height: 275px;
    padding: 12px 10px 8px;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image,
  .f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image {
    max-width: 94%;
    max-height: 260px;
  }
}


/* =========================================================
   WHOLESALE tools-card image controls + closing typography - v0.5.21
   Each retail-support rectangle now contains one complete editable image.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-tool-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
}

.f420-page-wholesale .f420-wholesale-tool-card__visual img,
.f420-page-wholesale .f420-wholesale-tool-card__visual--display img,
.f420-page-wholesale .f420-wholesale-tool-card__visual--multipacks img,
.f420-page-wholesale .f420-wholesale-tool-card__visual--support img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}

.f420-page-wholesale .f420-wholesale-tool-card__visual--multipacks {
  gap: 0;
  border-color: var(--f420-orange);
}

.f420-page-wholesale .f420-wholesale-tool-card__visual--support {
  background: #fff;
  color: inherit;
}

.f420-page-wholesale .f420-wholesale-tools__footer strong {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 400;
  font-size: clamp(1.65rem, 2.35vw, 2.25rem);
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
}


/* WHOLESALE page: hide route status label while preserving route behavior - v0.5.22 */
.f420-page-wholesale [data-route-status="pending"]::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   BLING merchandising support image treatment - v0.5.23
   Makes each editable merchandising image fill the complete
   visual area of its card while preserving the orange footer bar.
   ========================================================= */
.f420-page-bling .f420-bling-merch-card__visual {
  min-height: 268px;
  padding: 0;
  background: #ffffff;
}

.f420-page-bling .f420-bling-merch-card__visual::before {
  display: none;
}

.f420-page-bling .f420-bling-merch-card__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  filter: none;
}

.f420-page-bling .f420-bling-merch-card__visual .f420-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 268px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.f420-page-bling .f420-bling-merch-card:hover .f420-bling-merch-card__image,
.f420-page-bling .f420-bling-merch-card:focus-within .f420-bling-merch-card__image {
  transform: scale(1.025);
  filter: none;
}

@media (max-width: 760px) {
  .f420-page-bling .f420-bling-merch-card__visual,
  .f420-page-bling .f420-bling-merch-card__visual .f420-media-placeholder {
    min-height: 240px;
  }
}

/* =========================================================
   Accessories hero hairline Formula 420 color lock - v0.5.24
   Keeps all other hero hairline colors unchanged.
   ========================================================= */
.f420-page-accessories .f420-accessories-hero-eyebrow__420 {
  color: #ff5100 !important;
}


/* =========================================================
   ACCESSORIES page approved CTA rollover treatment - v0.5.26
   Matches the shimmer, lift, and shadow language used across
   the approved Formula 420, Smog-Out, Bling, Our Story, and
   Wholesale page buttons.
   ========================================================= */
.f420-page-accessories .f420-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

.f420-page-accessories .f420-btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  bottom: -60%;
  left: -34%;
  width: 24%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.32),
    transparent
  );
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.f420-page-accessories .f420-btn > span {
  position: relative;
  z-index: 1;
}

@media (hover:hover) and (pointer:fine) {
  .f420-page-accessories .f420-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 45, 88, .14);
  }

  .f420-page-accessories .f420-btn:hover::before {
    transform: translateX(640%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f420-page-accessories .f420-btn,
  .f420-page-accessories .f420-btn::before {
    transition: none !important;
  }

  .f420-page-accessories .f420-btn:hover {
    transform: none;
  }
}


/* =========================================================
   WHOLESALE Formula 710 image card black background - v0.5.27
   Keeps the full right-side panel unchanged while making the
   dedicated Formula 710 image rectangle true black.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single {
  background: #000;
}


/* =========================================================
   WHOLESALE Formula 710 true black panel + shadow removal - v0.5.28
   Preserved from the approved v0.5.28 update.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-brand-card--710 {
  background: #000000 !important;
}
.f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single {
  background: #000000 !important;
}
.f420-page-wholesale .f420-wholesale-brand-card--420 .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image,
.f420-page-wholesale .f420-wholesale-brand-card--710 .f420-wholesale-brand-card__products--single .f420-wholesale-brand-card__image {
  filter: none !important;
  box-shadow: none !important;
}


/* =========================================================
   Sitewide navigation current-page indicators - v0.5.29
   Desktop and mobile active states are now driven by the actual
   WordPress page being viewed. The BRANDS mobile label no longer
   carries an unconditional active indicator.
   ========================================================= */
.f420-desktop-nav > a,
.f420-brands-disclosure > summary {
  position: relative;
}

.f420-desktop-nav > a.is-current,
.f420-brands-disclosure > summary.is-current-section {
  color: var(--f420-orange);
}

.f420-desktop-nav > a.is-current::after,
.f420-brands-disclosure > summary.is-current-section::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--f420-orange);
  transform: translateX(-50%);
}

.f420-brands-panel a.is-current {
  position: relative;
  color: var(--f420-orange);
  padding-left: 18px;
}

.f420-brands-panel a.is-current::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: var(--f420-orange);
  transform: translateY(-50%);
}

/* BRANDS is a section label, not the current-page indicator. */
.f420-mobile-nav__group {
  border-left: 0;
  padding-left: 0;
  color: #ffffff;
}

.f420-mobile-nav nav a {
  position: relative;
  padding-left: 12px;
  transition: color 160ms var(--f420-ease), padding-left 160ms var(--f420-ease);
}

.f420-mobile-nav nav a.is-child {
  padding-left: 30px;
}

.f420-mobile-nav nav a.is-current {
  color: #ffffff;
}

.f420-mobile-nav nav a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: var(--f420-orange);
  transform: translateY(-50%);
}

.f420-mobile-nav nav a.is-child.is-current {
  color: #ffffff;
}

@media (forced-colors: active) {
  .f420-desktop-nav > a.is-current::after,
  .f420-brands-disclosure > summary.is-current-section::before,
  .f420-brands-panel a.is-current::before,
  .f420-mobile-nav nav a.is-current::before {
    background: CanvasText;
  }
}


/* =========================================================
   Sitewide navigation hover underline - v0.5.30
   Extends the approved Home-page underline interaction to every
   navigation instance while suppressing it on the current page so
   it never competes with the active-page indicator.
   ========================================================= */
.f420-desktop-nav > a,
.f420-brands-disclosure > summary,
.f420-brands-panel a,
.f420-mobile-nav nav a {
  position: relative;
}

/* Desktop top-level navigation underline. */
.f420-desktop-nav > a:not(.is-current)::before,
.f420-brands-disclosure > summary:not(.is-current-section)::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--f420-orange);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  pointer-events: none;
}

/* Dropdown and mobile navigation underline. */
.f420-brands-panel a:not(.is-current)::after,
.f420-mobile-nav nav a:not(.is-current)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--f420-orange);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  pointer-events: none;
}

.f420-mobile-nav nav a.is-child:not(.is-current)::after {
  left: 30px;
}

@media (hover: hover) and (pointer: fine) {
  .f420-desktop-nav > a:not(.is-current):hover::before,
  .f420-brands-disclosure > summary:not(.is-current-section):hover::before,
  .f420-brands-panel a:not(.is-current):hover::after,
  .f420-mobile-nav nav a:not(.is-current):hover::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

.f420-desktop-nav > a:not(.is-current):focus-visible::before,
.f420-brands-disclosure > summary:not(.is-current-section):focus-visible::before,
.f420-brands-panel a:not(.is-current):focus-visible::after,
.f420-mobile-nav nav a:not(.is-current):focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Explicitly suppress page-specific hover bars on current items. */
.f420-desktop-nav > a.is-current::before,
.f420-brands-disclosure > summary.is-current-section::before,
.f420-brands-panel a.is-current::after,
.f420-mobile-nav nav a.is-current::after {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .f420-desktop-nav > a:not(.is-current)::before,
  .f420-brands-disclosure > summary:not(.is-current-section)::before,
  .f420-brands-panel a:not(.is-current)::after,
  .f420-mobile-nav nav a:not(.is-current)::after {
    transition: none !important;
  }
}

/* =========================================================
   WHOLESALE Page 09 content + identity refinements - v0.5.40
   Hero audience line, responsive hero CTA labels, four proof
   cards, approved logo assets, and mobile pending-label cleanup.
   ========================================================= */
.f420-page-wholesale .f420-wholesale-hero__audiences {
  margin: 16px 0 0;
  color: #2f3338;
  font-family: var(--f420-font-display);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.f420-page-wholesale .f420-wholesale-proof__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.f420-page-wholesale .f420-wholesale-proof__item {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 15px;
  padding-inline: clamp(18px, 2.2vw, 32px);
}

.f420-page-wholesale .f420-wholesale-proof__icon {
  width: 48px;
  height: 48px;
}

.f420-page-wholesale .f420-wholesale-proof__icon svg {
  width: 30px;
  height: 30px;
}

.f420-page-wholesale .f420-wholesale-proof__item h3 {
  font-size: clamp(.98rem, 1.15vw, 1.2rem);
  line-height: 1;
}

.f420-page-wholesale .f420-wholesale-proof__item p {
  font-size: .84rem;
}

.f420-page-wholesale .f420-wholesale-brand-card__logo--image {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.f420-page-wholesale .f420-wholesale-brand-card__brand-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.f420-page-wholesale .f420-wholesale-brand-card__brand-logo--420 {
  width: clamp(205px, 18vw, 285px);
  max-height: 80px;
}

.f420-page-wholesale .f420-wholesale-brand-card__brand-logo--710 {
  width: auto;
  height: 74px;
  max-width: 205px;
}

/* Keep pending route behavior but never append the PENDING status label
   to the Wholesale mobile menu controls or fixed mobile action bar. */
.f420-mobile-nav__actions--wholesale [data-route-status="pending"]::after,
.f420-mobile-bar--wholesale [data-route-status="pending"]::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .f420-page-wholesale .f420-wholesale-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f420-page-wholesale .f420-wholesale-proof__item:nth-child(2) {
    border-right: 0;
  }

  .f420-page-wholesale .f420-wholesale-proof__item:nth-child(-n+2) {
    border-bottom: 1px solid var(--f420-border);
  }
}

@media (max-width: 900px) {
  .f420-page-wholesale .f420-wholesale-proof__grid {
    grid-template-columns: 1fr;
  }

  .f420-page-wholesale .f420-wholesale-proof__item {
    border-right: 0;
    border-bottom: 1px solid var(--f420-border);
  }

  .f420-page-wholesale .f420-wholesale-proof__item:last-child {
    border-bottom: 0;
  }

  .f420-page-wholesale .f420-wholesale-hero__call span,
  .f420-page-wholesale .f420-wholesale-hero__inquiry span {
    font-size: 0;
  }

  .f420-page-wholesale .f420-wholesale-hero__call span::after,
  .f420-page-wholesale .f420-wholesale-hero__inquiry span::after {
    display: inline;
    font-size: .78rem;
    line-height: 1;
    letter-spacing: .04em;
  }

  .f420-page-wholesale .f420-wholesale-hero__call span::after {
    content: "CALL WHOLESALE";
  }

  .f420-page-wholesale .f420-wholesale-hero__inquiry span::after {
    content: "START INQUIRY";
  }

  .f420-page-wholesale .f420-wholesale-hero__audiences {
    max-width: 420px;
    margin-top: 14px;
    font-size: .7rem;
    letter-spacing: .055em;
  }

  .f420-page-wholesale .f420-wholesale-brand-card__brand-logo--420 {
    width: min(250px, 72vw);
  }

  .f420-page-wholesale .f420-wholesale-brand-card__brand-logo--710 {
    width: auto;
    height: 74px;
    max-width: 52vw;
  }
}


/* =========================================================
   WHERE TO BUY hero overlay refinement - v0.5.41
   Shortens the white readability fade so it stays behind the
   copy and clears the product bottles much earlier.
   ========================================================= */


/* =========================================================
   OUR STORY mobile hero spacing refinement - v0.5.43
   Pulls the portrait hero artwork upward on mobile so the product
   imagery begins closer to the CTA buttons while keeping the
   bottom edge anchored and the approved desktop layout unchanged.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-ourstory .f420-ourstory-hero__picture {
    top: -90px;
    bottom: 0;
    height: auto;
  }
}

@media (max-width: 680px) {
  .f420-page-ourstory .f420-ourstory-hero__picture {
    top: -120px;
  }
}

/* =========================================================
   OUR STORY mobile hero spacing + white-gap correction - v0.5.44
   Pulls the mobile hero artwork closer to the CTA row and forces
   the hero/visual canvas to pure white so transparent or uncovered
   image areas cannot reveal the previous warm-gray background.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-ourstory .f420-ourstory-hero--fullbleed,
  .f420-page-ourstory .f420-ourstory-hero__visual {
    background: #ffffff !important;
  }

  .f420-page-ourstory .f420-ourstory-hero__picture {
    top: -180px;
    bottom: -2px;
    height: auto;
  }
}

@media (max-width: 680px) {
  .f420-page-ourstory .f420-ourstory-hero__picture {
    top: -230px;
    bottom: -2px;
  }
}

/* =========================================================
   OUR STORY mobile 1080x1908 hero fit + proof-gap reduction - v0.5.45
   Matches the mobile hero section to the 1080x1908 artwork ratio,
   removes the previous negative picture offsets, and keeps the image
   filling the hero through its bottom edge so the proof cards begin
   immediately after the artwork with only normal section spacing.
   Desktop/tablet layout remains unchanged.
   ========================================================= */
@media (max-width: 680px) {
  .f420-page-ourstory .f420-ourstory-hero--fullbleed {
    min-height: clamp(680px, 176.667vw, 820px) !important;
    background: #ffffff !important;
  }

  .f420-page-ourstory .f420-ourstory-hero__visual {
    background: #ffffff !important;
  }

  .f420-page-ourstory .f420-ourstory-hero__picture {
    position: absolute;
    inset: 0 !important;
    width: 100%;
    height: 100% !important;
  }

  .f420-page-ourstory .f420-ourstory-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .f420-page-ourstory .f420-ourstory-proof--cards {
    padding-top: 6px;
  }
}


/* =========================================================
   BLING mobile hero compacting + desktop smaller-size scale - v0.5.46
   Mobile: moves the bottle artwork upward without changing hero copy/buttons.
   Desktop: enlarges 4 oz and 2 oz bottle art while preserving 16/4/2 order.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-bling .bling-hero__image {
    height: calc(100% + 110px);
    transform: translateY(-70px);
    object-position: center center;
  }
}

@media (max-width: 680px) {
  .f420-page-bling .bling-hero__image {
    height: calc(100% + 120px);
    transform: translateY(-82px);
  }
}

@media (min-width: 901px) {
  .f420-page-bling .f420-size-card--medium .f420-size-card__media img {
    max-height: 220px;
  }

  .f420-page-bling .f420-size-card--small .f420-size-card__media img {
    max-height: 190px;
  }
}

/* =========================================================
   BLING mobile hero: remove white overlay gradient - v0.5.47
   Keeps desktop overlay unchanged while showing the mobile hero
   artwork without the white fade over the image.
   ========================================================= */
@media (max-width: 900px) {
  .f420-page-bling .bling-hero__visual::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}


/* =========================================================
   SMOG-OUT copy-line + size-card presence refinement - v0.5.48
   Replaces the use-case pills with one simple text line and gives
   both size bottles substantially more presence while reducing
   unused white space inside the two product cards.
   ========================================================= */
.f420-page-smogout .f420-smog-hero__contexts--line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .34em;
  margin-top: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(22px, 2.4vw, 28px);
  color: #1d54a6;
  font-family: var(--f420-font-display);
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.f420-page-smogout .f420-smog-hero__contexts--line span {
  color: #ff5100;
  line-height: 1;
}

.f420-page-smogout .f420-smog-sizes-section .f420-size-card {
  min-height: 475px;
  padding-bottom: 24px;
}

.f420-page-smogout .f420-smog-sizes-section .f420-size-card__media,
.f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media {
  height: 350px;
  padding: 10px 24px 0;
  align-items: center;
}

.f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:first-child .f420-size-card__media img {
  max-height: 330px;
}

.f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media img {
  max-height: 275px;
}

.f420-page-smogout .f420-smog-sizes-section .f420-size-card h3,
.f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child h3 {
  margin-top: 2px;
  font-size: clamp(1.75rem, 2vw, 2.15rem);
}

.f420-page-smogout .f420-smog-sizes-section .f420-size-card p {
  margin-top: 10px;
  min-height: 0;
  max-width: 320px;
  font-size: 1.02rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .f420-page-smogout .f420-smog-hero__contexts--line {
    gap: .28em;
    margin-top: 15px;
    margin-bottom: 18px;
    font-size: clamp(.83rem, 3.65vw, 1rem);
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-size-card {
    min-height: 440px;
    padding-bottom: 22px;
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-size-card__media,
  .f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media {
    height: 320px;
    padding: 8px 20px 0;
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:first-child .f420-size-card__media img {
    max-height: 300px;
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child .f420-size-card__media img {
    max-height: 250px;
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-size-card h3,
  .f420-page-smogout .f420-smog-sizes-section .f420-product-grid--two .f420-size-card:last-child h3 {
    margin-top: 0;
    font-size: 1.8rem;
  }

  .f420-page-smogout .f420-smog-sizes-section .f420-size-card p {
    margin-top: 9px;
    padding-inline: 20px;
  }
}


/* =========================================================
   Formula 710 hero overlay reduction - v0.5.49
   Tightens the readability gradients so they stay closer to the copy
   and reveal more of the hero artwork on desktop and mobile.
   ========================================================= */
@media (min-width: 901px) {
  .f420-page-formula710 .f710-hero__visual::before {
    background: linear-gradient(
      90deg,
      rgba(241,241,241,.92) 0%,
      rgba(241,241,241,.86) 18%,
      rgba(241,241,241,.58) 28%,
      rgba(241,241,241,.22) 38%,
      rgba(241,241,241,.05) 44%,
      rgba(241,241,241,0) 49%
    );
  }
}

@media (max-width: 900px) {
  .f420-page-formula710 .f710-hero__visual::before {
    background: linear-gradient(
      180deg,
      rgba(215,211,211,.98) 0%,
      rgba(215,211,211,.94) 20%,
      rgba(215,211,211,.72) 28%,
      rgba(215,211,211,.32) 36%,
      rgba(215,211,211,.08) 43%,
      rgba(215,211,211,0) 48%
    );
  }
}

/* =========================================================
   Formula 420 full-bleed hero image - v0.5.50
   Expands the editable Formula 420 hero artwork across the complete
   hero canvas on tablet/desktop, matching the full-bleed presentation
   used on the Formula 710 page while preserving the existing copy,
   CTAs, orange lower accent, and mobile layout.
   ========================================================= */
@media (min-width: 761px) {
  .f420-page-formula420 .f420-hero {
    display: block;
    min-height: clamp(650px, 54vw, 780px);
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero::after {
    display: none;
  }

  .f420-page-formula420 .f420-hero__grid {
    min-height: inherit;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    padding-block: clamp(56px, 6.5vw, 92px);
  }

  .f420-page-formula420 .f420-hero__copy {
    position: relative;
    z-index: 3;
    width: min(46%, 620px);
    max-width: 620px;
  }

  .f420-page-formula420 .f420-hero__stage--single-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    transform: translateX(-50%);
    align-items: stretch;
    justify-content: stretch;
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero__stage--single-image::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -80px;
    z-index: 2;
    height: 175px;
    background: var(--f420-orange);
    transform: skewY(-3deg);
    pointer-events: none;
  }

  .f420-page-formula420 .f420-hero-composite-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .f420-page-formula420 .f420-hero__stage--single-image:hover .f420-hero-composite-image {
    transform: none !important;
  }
}

/* =========================================================
   Formula 420 desktop hero canvas fit correction - v0.5.51
   Keeps the editable 2:1 hero artwork fully visible instead of cropping it,
   while still treating it as a full-width hero canvas. The white image canvas
   blends into the white hero background and the orange lower accent remains
   full-width across the section.
   ========================================================= */
@media (min-width: 761px) {
  .f420-page-formula420 .f420-hero {
    position: relative;
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero__grid {
    position: static;
  }

  .f420-page-formula420 .f420-hero__stage--single-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    transform: none;
    overflow: hidden;
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero__stage--single-image::after {
    display: none;
  }

  .f420-page-formula420 .f420-hero::after {
    display: block;
    z-index: 2;
  }

  .f420-page-formula420 .f420-hero-composite-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    background: #ffffff;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Formula 420 desktop hero position refinement - v0.5.52
   Removes the orange lower hero bar and nudges the complete editable
   hero canvas toward the right so the bottle group sits farther from
   the copy while preserving the full uncropped 2:1 artwork.
   ========================================================= */
@media (min-width: 761px) {
  .f420-page-formula420 .f420-hero::after {
    content: none !important;
    display: none !important;
  }

  .f420-page-formula420 .f420-hero-composite-image {
    left: 4%;
    right: auto;
    width: 100%;
    object-fit: contain;
    object-position: center center;
  }
}


/* =========================================================
   Formula 420 dedicated mobile hero parity with Formula 710 - v0.5.53
   Removes the orange lower accent on mobile, uses a separate portrait
   hero media slot, and places the copy/CTAs over a full-height mobile
   hero canvas using the same responsive structure as Formula 710.
   Recommended mobile artwork: 1080x2160 with upper 42% kept clear.
   ========================================================= */
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero {
    position: relative;
    display: block;
    min-height: clamp(720px, 215vw, 860px);
    padding: 0;
    overflow: hidden;
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero::after {
    content: none !important;
    display: none !important;
  }

  .f420-page-formula420 .f420-hero__grid {
    position: relative;
    z-index: 2;
    display: block;
    min-height: inherit;
    padding-top: 18px;
    padding-bottom: 0;
  }

  .f420-page-formula420 .f420-hero__copy {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
  }

  .f420-page-formula420 .f420-hero__stage--single-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #ffffff;
  }

  .f420-page-formula420 .f420-hero__picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .f420-page-formula420 .f420-hero-composite-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    background: #ffffff;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .f420-page-formula420 .f420-hero__stage--single-image:hover .f420-hero-composite-image {
    transform: none !important;
  }

  .f420-page-formula420 .f420-hero__copy .f420-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .f420-page-formula420 .f420-hero__copy .f420-actions .f420-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
  }
}

/* =========================================================
   Formula 420 mobile hero-to-original-section spacing - v0.5.54
   Tightens the mobile hero canvas after the product artwork and reduces
   the top spacing before THE ORIGINAL image so the two visuals connect
   with only a minimal white gap.
   ========================================================= */
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero {
    min-height: clamp(680px, 182vw, 760px);
  }

  .f420-page-formula420 .f420-section--original {
    padding-top: 12px;
  }
}

/* =========================================================
   ACCESSORIES mobile spacing refinement + copy support - v0.5.55
   Tightens the mobile page rhythm without changing desktop layout.
   ========================================================= */
@media (max-width: 760px) {
  .f420-page-accessories .f420-hero__grid {
    gap: 6px;
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .f420-page-accessories .f420-accessories-hero__stage {
    min-height: 235px;
    margin-top: -4px;
    margin-inline: -8px;
    align-items: flex-start;
  }

  .f420-page-accessories .f420-accessories-hero__image {
    max-height: 270px;
    object-position: center top;
  }

  .f420-page-accessories .f420-section {
    padding-block: 38px;
  }

  .f420-page-accessories .f420-section-heading {
    margin-bottom: 24px;
  }

  .f420-page-accessories .f420-accessories-420-section {
    padding-top: 34px;
    padding-bottom: 24px;
  }

  .f420-page-accessories .f420-accessories-710-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .f420-page-accessories .f420-accessories-buy-section {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase,
  .f420-page-accessories .f420-accessory-grid--showcase-710 {
    gap: 28px 16px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item,
  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item:nth-child(n),
  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item,
  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item:nth-child(n) {
    padding-top: 24px;
    padding-bottom: 0;
  }

  .f420-page-accessories .f420-accessory-grid--showcase .f420-accessory-item__visual,
  .f420-page-accessories .f420-accessory-grid--showcase-710 .f420-accessory-item__visual {
    height: 112px;
    margin-bottom: 10px;
  }

  .f420-page-accessories .f420-accessory-grid--showcase p,
  .f420-page-accessories .f420-accessory-grid--showcase-710 p {
    font-size: .78rem;
    line-height: 1.36;
  }

  .f420-page-accessories .f420-accessories-buy-section .f420-route-panel {
    min-height: 285px;
    padding: 26px 22px;
  }

  .f420-page-accessories .f420-wholesale-teaser {
    padding-top: 34px;
    padding-bottom: 26px;
  }

  .f420-page-accessories .f420-wholesale-teaser .f420-split--balanced {
    gap: 18px;
  }

  .f420-page-accessories .f420-wholesale-teaser .f420-copy {
    margin-bottom: 0;
  }

  .f420-page-accessories .f420-wholesale-teaser .f420-media-card {
    min-height: 0;
    height: auto;
    margin-top: 0;
  }

  .f420-page-accessories .f420-wholesale-teaser .f420-media-card__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    object-position: center top;
  }
}

@media (max-width: 520px) {
  .f420-page-accessories .f420-hero__grid {
    padding-top: 30px;
    padding-bottom: 42px;
  }

  .f420-page-accessories .f420-accessories-hero__stage {
    min-height: 210px;
    margin-top: -6px;
  }

  .f420-page-accessories .f420-accessories-hero__image {
    max-height: 245px;
  }

  .f420-page-accessories .f420-section {
    padding-block: 32px;
  }

  .f420-page-accessories .f420-accessories-420-section {
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .f420-page-accessories .f420-accessories-710-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .f420-page-accessories .f420-accessories-buy-section {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .f420-page-accessories .f420-wholesale-teaser {
    padding-top: 30px;
    padding-bottom: 18px;
  }

  .f420-page-accessories .f420-wholesale-teaser .f420-media-card__image {
    max-height: 270px;
  }
}

/* =========================================================
   ACCESSORIES mobile hero stacking correction - v0.5.56
   Keeps the large accessory artwork behind the hero CTAs and behind
   the orange lower hero accent so the image cannot cover either layer.
   ========================================================= */
@media (max-width: 760px) {
  .f420-page-accessories .f420-hero {
    isolation: isolate;
  }

  .f420-page-accessories .f420-hero__grid {
    position: relative;
    z-index: 1;
  }

  .f420-page-accessories .f420-hero__copy {
    position: relative;
    z-index: 3;
  }

  .f420-page-accessories .f420-hero__copy .f420-actions {
    position: relative;
    z-index: 4;
  }

  .f420-page-accessories .f420-accessories-hero__stage,
  .f420-page-accessories .f420-accessories-hero__image {
    position: relative;
    z-index: 0;
  }

  .f420-page-accessories .f420-hero::after {
    z-index: 2;
    pointer-events: none;
  }
}

/* Formula 420 mobile CTA clearance - v0.5.57
   Keep artwork in normal flow after the copy so wrapped CTAs never overlap it.
   Preserve the complete image composition and the existing desktop rules. */
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero,
  .f420-page-formula420 .f420-hero__grid {
    min-height: 0;
  }

  .f420-page-formula420 .f420-hero__stage--single-image {
    position: relative;
    inset: auto;
    height: auto;
    margin: 20px 0 0;
    transform: none;
  }

  .f420-page-formula420 .f420-hero__picture,
  .f420-page-formula420 .f420-hero-composite-image {
    position: relative;
    inset: auto;
    height: auto;
  }

  .f420-page-formula420 .f420-hero-composite-image {
    object-fit: contain;
  }
}

/* Formula 420 mobile portrait whitespace correction - v0.5.58.
   The current 1080x2160 mobile canvas has blank space above the bottles.
   Hide 44% of its height (88% of its width), without scaling the artwork.
   Keep the clipped stage below the CTAs; leave the desktop fallback intact. */
@media (max-width: 760px) {
  .f420-page-formula420 .f420-hero__picture--mobile-artwork {
    margin-top: -88%;
  }
}

/* Sitewide direct brand navigation - v0.5.59. */
.f420-desktop-nav {
  flex-wrap: nowrap;
  gap: 16px;
}
.f420-desktop-nav > a {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1179px) {
  :root { --f420-header: var(--f420-mobile-header); }
  .f420-header-inner { grid-template-columns: 1fr auto; }
  .f420-desktop-nav, .f420-header-actions { display: none; }
  .f420-menu-toggle { display: inline-flex; }
}

/* Footer has three link columns after utility removal - v0.5.60. */
@media (min-width: 1180px) {
  .f420-footer-grid {
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(120px, 1fr));
  }
}

/* Desktop hover dropdown: panel touches the trigger, with no pointer gap. */
.f420-desktop-nav .f420-brands-disclosure { flex-shrink: 0; }
.f420-desktop-nav .f420-brands-panel { top: 100%; z-index: 50; }
.f420-desktop-nav .f420-brands-panel a:hover,
.f420-desktop-nav .f420-brands-panel a:focus-visible {
  color: var(--f420-orange);
  background: var(--f420-soft-orange);
}

/* Final header/menu refinement - v0.5.66. Desktop only. */
@media (min-width: 1180px) {
  .f420-site-header {
    height: 88px;
  }

  .f420-header-inner {
    grid-template-columns: 190px 1fr auto;
  }

  .f420-brand__logo {
    width: 212px;
    max-height: 70px;
  }

  .f420-desktop-nav > a,
  .f420-brands-disclosure > summary {
    font-size: clamp(.75rem, .86vw, .96rem);
  }
}

/* The open menu uses the approved orange treatment. The current logo asset
   remains the placeholder until the white logo is selected in Controls. */
.f420-mobile-nav__panel {
  background: var(--f420-orange);
  color: #fff;
}

.f420-mobile-nav__logo {
  filter: brightness(0) invert(1);
}

.f420-mobile-nav__top {
  border-bottom-color: rgba(255,255,255,.42);
}

.f420-mobile-nav nav a.is-child {
  color: rgba(255,255,255,.9);
}

.f420-mobile-nav__actions .f420-btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--f420-orange);
}

.f420-mobile-bar .f420-btn--primary {
  background: var(--f420-orange);
  border-color: var(--f420-orange);
  color: #fff;
}

.f420-mobile-nav__actions .f420-btn--light,
.f420-mobile-bar .f420-btn--light {
  background: #111;
  border-color: #111;
  color: #fff;
}

/* Our Story innovation artwork fills the rounded panel at every width. */
.f420-page-ourstory .f420-ourstory-original-card__bottle {
  inset: 0;
}
.f420-page-ourstory .f420-ourstory-original-card__bottle img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  filter: none;
}