/** Shopify CDN: Minification failed

Line 30:0 All "@import" rules must come first

**/
/* =============================================================
   NORMAL BEVERAGE — normal-custom.css
   All brand CSS overrides for Impulse theme v9.1.0
   ============================================================= */

/* =============================================================
   BRAND COLOR VARIABLE — single source of truth for the orange
   accent used throughout the file. Refactored 2026-07-05 from
   12 hardcoded #FF8800 literals scattered across the file, ahead
   of the Drop/Occasions color-scoped work — this makes any future
   accent change a one-variable edit instead of a find-and-replace
   across every rule. Value is unchanged (#FF8800); this is a
   refactor only, no visual difference expected anywhere.
   ============================================================= */
:root {
  --accent-color: #FF8800;
}

/* SCROLLBAR GUTTER — fixes Mac scrollbar centering offset */
html {
  scrollbar-gutter: stable;
}

/* GOOGLE FONTS — Roboto variable */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ROOT OVERRIDES */
body {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 20px !important;
  letter-spacing: -0.5px !important;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: 'Roboto', sans-serif !important;
}
h1, h2, .h1, .h2 {
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
}
h3, .h3 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}
h4, h5, h6 {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* NAV */
.header__link,
.header__menu-item,
.header-item--navigation a,
[data-section-type="header"] a {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* NAV — desktop menu item padding trim. Renaming "Occasions" to "The
   Occasions" (2026-07-05) added ~4 characters / ~30px to the row and
   JV reported it tipping the menu into wrapping on his display. Trimmed
   Impulse's default 15px/side item padding down to 12px/side — recovers
   ~48px across the 8 top-level items, more than the deficit needs.
   Scoped to .site-nav specifically (not a bare .site-nav__link rule) so
   this can't bleed into any other reuse of that class elsewhere in the
   theme. DOM-VERIFIED 2026-07-05: at the connected browser's actual
   window width, all 8 top-level items plus icon cluster render on a
   single row (all site-nav__link tops within 1.5px of each other — no
   line-wrap). See session notes: verification was only possible at the
   width the connected browser happened to be at that check; if JV's
   window is meaningfully narrower than that, re-check before trusting
   this note fully. */
.site-nav .site-nav__link {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* LOGO PADDING */
.header-item--logo {
  padding-right: 25px !important;
}

/* =============================================================
   HEADER ICONS — uniform 24px sizing across search / cart / account.
   Order in DOM (see header-icons.liquid): account, search, cart,
   hamburger last — confirmed correct on mobile.
   ============================================================= */
.site-nav__icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.site-nav__icons .site-nav__link--icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
}
.site-nav__icons .site-nav__link--icon i {
  font-size: 24px !important;
  line-height: 1 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.site-nav__icons .cart-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  height: 24px !important;
}
.site-nav__icons .site-nav__link--hamburger {
  width: 24px !important;
  height: 24px !important;
}
.site-nav__icons .site-nav__link--hamburger .icon-hamburger {
  width: 24px !important;
  height: 24px !important;
}
@media screen and (max-width: 749px) {
  .site-nav__icons {
    gap: 18px !important;
  }
  .site-nav__icons .site-nav__link--icon {
    width: 36px !important;
    height: 36px !important;
  }
  .site-nav__icons .cart-link {
    height: 36px !important;
  }
  .site-nav__icons .site-nav__link--hamburger {
    width: 36px !important;
    height: 36px !important;
    position: relative !important;
  }
  /* Divider between the cart/account/search cluster and the hamburger.
     A pseudo-element, not a border/padding on the button itself — this
     way it can't shrink the button's own tap area or nudge its layout,
     it just draws a line in the existing gap. Remove this whole block
     if it reads as clutter once you see it live; nothing else depends
     on it. */
  .site-nav__icons .site-nav__link--hamburger::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(9, 9, 9, 0.15);
  }
  .site-nav__icons .site-nav__link--hamburger .icon-hamburger {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 4.5 !important;
  }
}

/* KILL UNDERLINES — text-decoration AND border-bottom (Impulse uses border-bottom) */
a, a::after, a::before {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* SECTION SPACING — 25px between sections */
.shopify-section {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* REVERTED 2026-07-07 (same session): JV walked back the global mobile
   12px override below — worried about knocking other sections out of
   place on desktop, and it hadn't been verified complete on mobile yet.
   Deliberately left this note instead of just deleting silently, so a
   future session doesn't wonder why 25px is uniform again. Any future
   per-section mobile tightening should be scoped to that section's own
   ID/class, not this blanket rule — see the hero→fluid-concept override
   below for the pattern. */

/* Zero-padding exceptions — header, footer, and content sections that manage their own spacing.
   NOTE: these substrings must match the section's INSTANCE KEY in the template JSON
   (e.g. "fyn-hero"), not necessarily the section TYPE name (e.g. "normal-fyn-hero") —
   the two only match when a template's key happens to equal its type. Fixed 2026-07-03:
   fyn-hero/fyn-map were using the type name and never matched the live DOM id
   (shopify-section-template--...__fyn-hero), so this exception silently never applied.
   Fixed 2026-07-04: same bug on The Mix blog's "Why?" section — instance key is
   "mix-why", not "normal-why", so it fell through to the global 25px padding and
   stacked with its own 25px margin, doubling the gap above it on that page only.
   Fixed 2026-07-05: the same "Why?" section is also instanced as careers-why,
   contact-why, fyn-why, and article-why on four more templates (confirmed via
   templates/page.careers.json, page.contact.json, page.find-your-normal.json,
   article.json) — none of those keys were covered either, so all four carried
   the identical stacked-padding-plus-margin bug (low visual impact since normal-why.liquid's
   full-bleed background image absorbs the shift, but real and now closed). */
[id*="__header"],
[id*="__shoppable-hero"],
[id*="__shoppable_hero_YTRFqW"],
[id*="__normal-fluid-concept"],
[id*="__hero-video"],
[id*="__normal-ig"],
[id*="__normal-ace"],
[id*="__normal-why"],
[id*="__mix-why"],
[id*="__careers-why"],
[id*="__contact-why"],
[id*="__fyn-why"],
[id*="__article-why"],
[id*="__normal-stories"],
[id*="__normal-reach-out-video"],
[id*="__normal-reach-out-hero"],
[id*="__normal-careers-video"],
[id*="__normal-careers-hero"],
[id*="__purpose-video"],
[id*="__purpose-hero"],
[id*="__purpose-festival"],
[id*="__purpose-dialogue"],
[id*="__purpose-divider"],
[id*="__purpose-pillars"],
[id*="__purpose-why"],
[id*="__fyn-hero"],
[id*="__fyn-map"],
[id*="__offerings"],
[id*="__normal-faq"],
[id*="__slideshow"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* FYN hero: stays flush to the header (top 0, from the exception list
   above), but restores the intentional 25px white gap before the Store
   Locator section below it. That gap was an unintended casualty of the
   2026-07-03 fyn-hero/fyn-map fix — this rule wins because it's later in
   source order at equal specificity. */
[id*="__fyn-hero"] {
  padding-bottom: 25px !important;
}

/* HERO → FLUID CONCEPT GAP — mobile only. JV request 2026-07-07: still
   too much space between the homepage's shoppable-hero and the Fluid
   Concept ("Librarian") section on mobile, even with the global mobile
   section-spacing change reverted above. Root cause is unrelated to that
   reverted rule: normal-fluid-concept.liquid sets its own explicit
   margin-top: 25px (no !important) directly on #shopify-section-{{
   section.id }} in its own <style> block — that's what's creating the
   gap, at every breakpoint, independent of the sitewide .shopify-section
   padding convention. Scoped to this one section, mobile only, so it
   carries none of the sitewide blast-radius risk JV flagged. !important
   is required here since it must beat that plain (non-!important)
   declaration — specificity of this ID-substring selector alone would
   lose to the section's own #exact-id rule, but !important wins outright
   regardless of specificity. NOT YET DOM-verified. */
@media screen and (max-width: 767px) {
  [id*="__normal-fluid-concept"] {
    margin-top: 12px !important;
  }
}

/* MainContent: prevents a section's own margin-bottom (the sitewide
   convention for section spacing, see SECTION SPACING above) from
   collapsing through <main> and leaking out as a phantom 25px gap before
   whatever comes next — most visibly, before the badge row / other
   footer-group sections on every page. flow-root establishes a new block
   formatting context for #MainContent with no other layout side effects,
   so this fixes the leak sitewide without touching the margin-based
   section-spacing pattern itself. Confirmed 2026-07-03: this was the
   actual cause of the "gap under the badge row" — not the badge row's own
   box model, which was already zeroed out correctly. */
#MainContent {
  display: flow-root;
}

/* Badge row: overflow: hidden collapses Impulse negative margin bleed
   from its own block. Kept alongside the flow-root fix above, which
   addresses the separate gap-before-badge-row issue. */
[id*="advanced_content_kLPtwp"] {
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Badge row → footer: zero gap, ID-substring version (footer-group
   section IDs may not follow the template--X__key pattern this assumes —
   kept as a fallback, .site-footer below is the reliable one). */
[id*="__footer"] {
  padding-top: 0 !important;
}

/* Badge row → footer: reliable version. Section-group-hosted sections
   (footer-group.json) may not get the "template--X__key" DOM id format the
   [id*=] rules above assume, so those can silently no-op. This version
   anchors off .nor-badge-row itself (a class I fully control, guaranteed
   to exist), so it works regardless of what Shopify names the wrapper.
   :has() has full modern-browser support as of 2026. */
.shopify-section:has(.nor-badge-row) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.site-footer {
  margin-top: 0 !important;
}

/* Badge row: kill residual margin-bottom that was NOT coming from our own
   .nor-badge-row style block (which only ever set padding, never margin).
   DOM-confirmed 2026-07-04: Impulse's native "Advanced Content" section
   wraps this block in its own .custom-content/.custom__item divs, and
   those carry a default ~15px margin-bottom (block-stacking spacing,
   Impulse's own default, not ours) plus a -22px/+22px negative-margin
   overflow trick on .custom-content that visually bled 22px past the
   section's own box (already caught by the overflow:hidden rule above).
   The 15px margin-bottom was not caught by that rule and was the last
   piece of "space under the badge row that wasn't there before" — JV
   confirmed via live screenshots + his own DevTools inspection this
   session that the row now visually overlapped/left dead space below.
   This was never in the zero-padding exception list because margin-bottom
   isn't padding — scoped narrowly to this section only, not touched
   globally on .custom-content/.custom__item elsewhere in the theme. */
.shopify-section:has(.nor-badge-row) .custom-content,
.shopify-section:has(.nor-badge-row) .custom__item,
.shopify-section:has(.nor-badge-row) .nor-badge-row {
  margin-bottom: 0 !important;
}

/* Vestigial advanced_content_social section — hidden entirely */
[id*="advanced_content_social"] {
  display: none !important;
}

/* IG SECTION — homepage: 300px padding-top clears product overlap + 25px breathing room.
   FIXED 2026-07-12: this selector hardcoded the numeric template ID
   (template--24159616172068__normal-ig) captured on 2026-07-07. That ID
   drifts whenever the homepage template gets resaved/duplicated (same
   class of bug as the fyn-hero/mix-why instance-key mismatches logged
   elsewhere in this file) — live DOM-checked 2026-07-12 and the actual
   current ID is template--24346601914404__normal-ig, so this rule (and
   its mobile override below) had been silently dead code the entire
   time since 2026-07-07. Switched to a [id*=] substring match on the
   instance KEY only ("normal-ig"), which is stable across template
   resaves and confirmed unique to the homepage — careers/contact/fyn
   pages use their own distinct keys (careers-ig, contact-ig, fyn-ig), so
   this cannot bleed into those pages. */
[id*="__normal-ig"] .normal-ig__inner {
  padding-top: 300px !important;
}

/* IG SECTION — mobile override. JV request 2026-07-07: gap above the IG
   feed title graphics reads too large on mobile. Root cause: the 300px
   value above has NO mobile override, and hero-video.liquid's own inline
   <style> block attempts one via a generic #shopify-section-normal-ig
   selector that does not match this section's real instance ID
   (#shopify-section-template--24159616172068__normal-ig) — same class of
   bug as the fyn-hero/mix-why instance-key mismatches already logged in
   this file's history. This override uses the confirmed-correct selector.
   Paired with the reduced product-overlap offset in hero-video.liquid's
   own mobile block (bottom: -30px → -50px) so the product image sits
   lower AND the section above it needs less reserved space. NOT YET
   DOM-verified — check the actual gap on mobile before calling this done. */
@media screen and (max-width: 767px) {
  [id*="__normal-ig"] .normal-ig__inner {
    padding-top: 60px !important;
  }
}

/* FLUID CONCEPT — H2 orange */
[id*="__normal-fluid-concept"] h2,
[id*="__normal-fluid-concept"] .section__heading {
  color: var(--accent-color) !important;
}

/* BUTTON RADIUS */
.btn, button, .button {
  border-radius: 4px !important;
}

/* =============================================================
   GLOBAL PAGE TITLE SIZE — 52px across all custom inner page H1s
   Matches FAQ title. Weight/colour/letter-spacing stay per-section.
   Homepage H2 section headings (ACE, Why?, Stories, Fluid Concept)
   are intentionally excluded — they live inside full-bleed image
   sections where 37px is the right proportion.
   ============================================================= */
.nor-car__h1,
.normal-purpose-hero__h1,
.normal-fyn-map__heading,
.nor-roh__h1 {
  font-size: clamp(32px, 5vw, 52px) !important;
}

/* =============================================================
   HOMEPAGE PRODUCT OVERLAP
   Positioned via left:0/right:0/margin:auto in hero-video.liquid <style> block.
   ============================================================= */
.normal-video__product-overlap {
  position: absolute;
  bottom: -275px;
  z-index: 10;
  pointer-events: none;
  transform: none !important;
}

/* =============================================================
   HOMEPAGE BANNER (shoppable-hero) — mobile fixed height. JV request
   2026-07-07: homepage top banner height didn't match the fixed-height
   convention used on other page heroes (fyn-hero, careers-hero, etc.,
   all 300px on mobile). Root cause: shoppable-hero is a stock Impulse
   9.1 "Kit" section (kit.content-over-media + kit.image) that sizes
   itself from the uploaded image's OWN aspect ratio via an ::before
   grid-spacer trick — no fixed height anywhere, unlike the custom hero
   sections. Forcing an explicit height on .kit-content-over-media__media
   overrides that implicit aspect-ratio row sizing (explicit height wins
   over grid auto-sizing); the img inside already has height:100% +
   object-fit:cover from kit.content-over-media's own stylesheet, so it
   crops cleanly to this height instead of stretching. Scoped to the
   homepage's specific shoppable-hero instance only. NOT YET DOM-verified.
   ============================================================= */
@media screen and (max-width: 767px) {
  /* FIXED 2026-07-12: same stale-template-ID bug as the IG section above
     — this also hardcoded template--24159616172068 from 2026-07-07,
     which no longer matches the live DOM (now template--24346601914404).
     This was dead code too. Switched to [id*="__shoppable-hero"], which
     is safe since "shoppable-hero" (hyphenated, no random suffix) is the
     literal instance key used only on the homepage — the exception list
     above separately tracks a different instance, shoppable_hero_YTRFqW
     (underscored, random suffix), so there's no collision. */
  [id*="__shoppable-hero"] .kit-content-over-media__media {
    height: 300px !important;
  }
  /* JV request 2026-07-07: fixed-height crop was centering the image,
     showing only the hood — pin to the top of the frame instead so the
     car itself (not empty sky/mountain) fills the crop. Matches both
     grid-item selectors kit.content-over-media's own stylesheet uses
     (picture>img for the mobile_src path, and the bare >* fallback) so
     this wins regardless of which path renders. */
  [id*="__shoppable-hero"] .kit-content-over-media__media > picture > img,
  [id*="__shoppable-hero"] .kit-content-over-media__media > * {
    object-position: center top !important;
  }
}

/* =============================================================
   PRIVACY POLICY PAGE
   ============================================================= */

/* Widen policy container to match site max-width */
.shopify-policy__container {
  max-width: 1300px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  padding-top: 60px !important;
}

/* Left-align the native Shopify policy title block */
.shopify-policy__title,
.shopify-policy__title h1 {
  text-align: left !important;
  color: var(--accent-color) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
}

/* Policy section headings (h2) — orange, left-aligned */
.shopify-policy__body h2 {
  color: var(--accent-color) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
}

/* Policy body text — left-aligned */
.shopify-policy__body {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #090909 !important;
  text-align: left !important;
}

/* Policy links — orange */
.shopify-policy__body a {
  color: var(--accent-color) !important;
  border-bottom: 1px solid rgba(255,136,0,0.3) !important;
}
.shopify-policy__body a:hover {
  border-bottom-color: var(--accent-color) !important;
}

/* Mobile */
@media screen and (max-width: 767px) {
  .shopify-policy__container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px !important;
  }
}

/* =============================================================
   FOOTER
   ============================================================= */

/* Footer background — zero Impulse's own padding-top, control via page-width */
.site-footer {
  background: #090909 !important;
  padding-top: 0 !important;
}

/* Footer page-width container — constrain, center. Top padding sets the
   badge-row → address gap. Raised 20px→40px on 2026-07-04 to match the
   badge row's own top padding (40px), so the whole footer reads on one
   consistent 40px vertical rhythm — see JV's request to standardize
   every row-to-row gap in the footer against that reference measurement. */
.site-footer .page-width {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 40px !important;
}

/* Footer grid — flex so three menu columns center as a group */
.site-footer .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Footer links — white, orange hover, no underline or border */
.site-footer a,
.footer__link {
  color: #ffffff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.site-footer a:hover,
.footer__link:hover {
  color: var(--accent-color) !important;
  border-bottom: none !important;
}

/* Footer nav list item spacing */
.site-footer li {
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* Address block — full width, centered, 25px gap below into menus */
.footer__item--custom_dmPXFR {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 25px !important;
}
.footer__item--custom_dmPXFR * {
  text-align: center !important;
}

/* Footer nav menu columns — center-align items within each column */
.footer__item--menu_dEzX4G,
.footer__item--menu_q76RPQ,
.footer__item--menu_f8xa3H {
  text-align: center !important;
}
.footer__item--menu_dEzX4G ul,
.footer__item--menu_q76RPQ ul,
.footer__item--menu_f8xa3H ul,
.footer__item--menu_dEzX4G li,
.footer__item--menu_q76RPQ li,
.footer__item--menu_f8xa3H li,
.footer__item--menu_dEzX4G a,
.footer__item--menu_q76RPQ a,
.footer__item--menu_f8xa3H a {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* SEO smallprint — full width, centered. DOM-verified 2026-07-05: the
   2026-07-04 tune (22px→12px) assumed a ~28px "natural row gap" between
   the wrapped menu row and this row that doesn't actually exist — the
   footer grid is flex with no `gap` property set, so wrapped rows land
   with zero extra space between them. Live-measured gap was only 12px,
   not the intended 40px rhythm. Corrected margin-top to 40px directly so
   it hits the actual target without depending on a row-gap that was
   never really there. Bottom stays 25px, which combines with the logo
   item's own spacing to land at 40px already. */
.footer__item--custom_R4ffGV {
  width: 100% !important;
  text-align: center !important;
  margin-top: 40px !important;
  margin-bottom: 25px !important;
}
.footer__item--custom_R4ffGV * {
  text-align: center !important;
}

/* Logo block — full width, centered */
.footer__item--logo_social_U4iPWY {
  width: 100% !important;
  text-align: center !important;
}
.footer__item--logo_social_U4iPWY * {
  text-align: center !important;
}

/* Kill Impulse's default 20px margin-bottom on the logo image wrapper.
   This was stacking invisibly with the social-icons row's own padding-top
   (2026-07-04 footer rhythm pass) — logo's own margin plus social's padding
   summed to 60px where 40px was the target. One source of truth now:
   the gap is entirely controlled by .normal-footer-social's padding in
   footer.liquid, not split across two files. */
.footer__item--logo_social_U4iPWY .footer__logo {
  margin-bottom: 0 !important;
}

/* Fix asymmetric padding that caused centering offset */
.footer__item-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.footer__item-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.footer__item .rte {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Footer copyright + powered by */
.footer__copyright,
.footer__copyright-content,
.footer__small-text,
[class*="copyright"] {
  font-size: 11px !important;
  color: rgba(255,255,255,0.35) !important;
  font-family: 'Roboto', sans-serif !important;
  text-align: center !important;
}

/* Footer max width on items */
.footer__inner,
.footer__content,
.site-footer .footer__item {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Social icons hover */
.footer-social a:hover,
.footer-social a:hover svg,
.normal-footer-social a:hover {
  color: var(--accent-color) !important;
  fill: var(--accent-color) !important;
}

/* =============================================================
   PHOTO CREDIT
   ============================================================= */
/* FIXED 2026-07-12: same stale template-ID bug as above — this photo
   credit caption had never actually been rendering since 2026-07-07. */
[id*="__shoppable-hero"]::after {
  content: 'Rollergirl Series — Blake Jorgenson';
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  pointer-events: none;
}
[id*="__shoppable-hero"] {
  position: relative;
}

/* =============================================================
   BLOCKSY IMAGE GALLERY — brand pattern overlay at 4% opacity
   Lives here (not in blocksy-image-gallery.liquid) so the
   customizer can freely save gallery settings without conflict.
   Targets all instances of the Blocksy gallery section via its
   schema class .blocksy-image-gallery-section.
   ============================================================= */
.blocksy-image-gallery-section {
  position: relative;
  overflow: hidden;
}
.blocksy-image-gallery-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/cdn/shop/files/01095_NormalFontPattern_0513_v01.jpg?v=1782778516') center / cover no-repeat;
  opacity: 0.04;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}

/* =============================================================
   THE MIX — BLOG ARTICLE TEMPLATE (individual post pages)
   Native Impulse article-template.liquid + its .rte body content.
   Scoped via .template-article body class, not section ID, since
   the section ID drifts and this needs to apply regardless.
   ============================================================= */

/* Widen article body from Impulse's default 1000px narrow width
   to match the site's established 1300px inner-content convention
   (same number already used for Privacy Policy + footer). */
.template-article .page-width--narrow {
  max-width: 1300px !important;
}

/* "The Mix" category label injected beside the date in article-template.liquid */
.article__date a.nor-article__category {
  color: var(--accent-color) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Article body images — wrap text around them by default at 25px right/below,
   matching the spacing already used when images are floated manually via
   inline style in the rich-text editor. An inline style on a given <img>
   (e.g. float: right) still overrides this, so per-image control is preserved. */
.article__body.rte img {
  float: left;
  margin: 0 25px 25px 0;
  max-width: 45%;
  height: auto;
}
@media screen and (max-width: 749px) {
  .article__body.rte img {
    float: none;
    margin: 0 0 25px 0;
    max-width: 100%;
  }
}

/* Article body links — orange, with an animated underline sweep on hover.
   This pattern doesn't exist anywhere else on the site yet (the global
   underline-kill rule above applies everywhere by default); scoped narrowly
   to blog article body copy only. */
.article__body.rte a {
  color: var(--accent-color) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  position: relative;
  display: inline-block;
}
.article__body.rte a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
.article__body.rte a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* =============================================================
   THE MIX — ARTICLE CROSS-NAVIGATION (after post content)
   "Back to The Mix" already exists natively (.return-link). This
   adds a row of category links below it so a reader can jump
   straight to another category instead of only going back to all.
   ============================================================= */
.nor-article__more {
  max-width: 1300px;
  margin: 24px auto 0;
  padding: 0 20px;
  text-align: center;
}
.nor-article__more-label {
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 14px;
  font-family: 'Roboto', sans-serif;
}
.nor-article__more-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.nor-article__more-cats a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 4px;
  background: #090909;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background 0.2s ease;
}
.nor-article__more-cats a:hover {
  background: var(--accent-color);
}

/* JV request 2026-07-07: hide this module on mobile only (sits too far
   down the article page there); keep it on desktop. */
@media screen and (max-width: 749px) {
  .nor-article__more {
    display: none !important;
  }
}