/** Shopify CDN: Minification failed

Line 860:0 Unexpected "@media"

**/
/* ==== Announcement-bar overrides ==== */

/* Message text */
.announcement-bar__message{
  font-weight:bold;
  font-size:15px;
  color:#CBA56E !important;    /* Makefield gold, override colour-scheme var */
}

/* Hide the little arrow buttons that appear
   when the bar has multiple slides */
.announcement-bar .slider-button--prev,
.announcement-bar .slider-button--next{
  display:none !important;
}

/* ==== Customizations for Predictive Search in the Header ==== */

/* Predictive search thumbnails (collections) */
predictive-search .predictive-search__item { 
  display: flex; 
  align-items: center; 
  gap: 0.65rem;
}

/* ===== Compact predictive search panel (header) ===== */

/* 1) Smaller thumbs = shorter rows */
predictive-search .predictive-search__image {
  width: 56px;       /* was 120px */
  height: 56px;      /* was 120px */
  flex: 0 0 56px;    /* keep column locked */
}
@media (min-width: 990px){
  predictive-search .predictive-search__image {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
}
predictive-search .predictive-search__image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 2) Tighten container padding and heading/list spacing */
predictive-search #predictive-search-results-groups-wrapper {
  padding-block: 0px !important;              /* trim big top/bottom padding */
}
predictive-search .predictive-search__heading {
  margin-block: 2px 0px !important;           /* “SUGGESTIONS” spacing */
}
predictive-search .predictive-search__results-list {
  margin: 0 !important;                       /* UL */
}
predictive-search .predictive-search__list-item {
  margin: 0 !important;                       /* LI */
}

/* 3) Tighten each row */
predictive-search .predictive-search__item {
  padding: 0px 10px !important;               /* was larger in Dawn */
  gap: .5rem;                                  /* keep image/text close */
}
predictive-search .predictive-search__item-heading {
  margin: 0 !important;
  line-height: 1.0 !important;
}

/* 4) Compact the bottom “Search for '<term>'” row */
predictive-search .predictive-search__search-for-button {
  margin-top: 6px !important;
}
predictive-search .predictive-search__search-for-button .predictive-search__item {
  padding: 10px 12px !important;
}

/* Optional: if there’s still extra white above/below the whole panel */
predictive-search [data-predictive-search] {
  padding-block: 0 !important;                /* safety override */
}


/* ==== Customizations for Header ==== */

.header__menu-item {
  font-weight: bold; /* This makes the navigation items bold */
  font-size: 18px; /* Adjust this value to change the text size */
}


/* ==== Customizations for buttons ==== */
/* ===== Makefield Buttons — Neutral + Gold Hover, NO OUTLINE ===== */
:root{
  --mf-navy:#2B496D;
  --mf-gold:#CBA56E;
  --mf-ink:#111;                          /* near-black */
  --mf-paper:#fff;
  --mf-gold-tint: rgba(203,165,110,.22);        /* primary hover overlay */
  --mf-gold-tint-strong: rgba(203,165,110,.32); /* primary active overlay */
  --mf-border: #E5E7EB;
  --mf-navy-press: #223853; /* slightly darker navy for pressed states if needed */
}

/* Base */
.button{
  border-radius:9999px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  font-size:clamp(2rem, 1.8vw, 1.125rem);    /* CHANGES BUTTON Font-Size, Except Hero */
  padding:.9rem 1.25rem;                      /* ≈46–48px tall */
  border:1px solid var(--mf-border);
  background:var(--mf-paper);
  color:var(--mf-ink);
  box-shadow:none;
  transition: background .12s ease, color .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
  position:relative;
}

/* --- Remove Dawn's focus outlines/halos everywhere on .button --- */
a.button:focus, a.button:focus-visible,
button.button:focus, button.button:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.button:focus::before, .button:focus::after,
.button:focus-visible::before, .button:focus-visible::after{
  content:none !important; border:0 !important; box-shadow:none !important;
}
/* Keep the arrow pseudo-element untouched */
.button:not(.button--with-arrow)::after,
.button:not(.button--with-arrow)::before{
  content:none; border:0; box-shadow:none;
}

/* Primary (light surfaces) — black fill, white text */
.button--primary{
  background:var(--mf-navy) !important;
  color:var(--mf-paper) !important;
  border-color:rgba(0,0,0,.12);
}
/* Nike-style hover/active: soft gold tint (no lift) */
.button--primary:hover{
  background:
    linear-gradient(0deg, var(--mf-gold-tint), var(--mf-gold-tint)),
    var(--mf-navy) !important;
}
.button--primary:active{
  background:
    linear-gradient(0deg, var(--mf-gold-tint-strong), var(--mf-gold-tint-strong)),
    var(--mf-navy) !important;
}

/* Secondary (outline/ghost) */
.button--secondary{
  background:var(--mf-paper) !important;
  color:var(--mf-navy) !important;
  border:1.5px solid var(--mf-navy) !important;
  box-shadow:none !important;
}
.button--secondary:hover{ background:rgba(0,0,0,.06); }
.button--secondary:active{ background:rgba(0,0,0,.10); }

/* Invert on dark/navy sections */
.on-dark .button--primary{
  background:var(--mf-paper) !important;
  color:var(--mf-ink) !important;
  border-color:rgba(0,0,0,.12) !important;
}
.on-dark .button--primary:hover{
  background:
    linear-gradient(0deg, var(--mf-gold-tint), var(--mf-gold-tint)),
    var(--mf-paper) !important;
}
.on-dark .button--primary:active{
  background:
    linear-gradient(0deg, var(--mf-gold-tint-strong), var(--mf-gold-tint-strong)),
    var(--mf-paper) !important;
}
.on-dark .button--secondary{
  background:transparent !important;
  color:var(--mf-paper) !important;
  border-color:var(--mf-paper) !important;
}
.on-dark .button--secondary:hover{ background:rgba(255,255,255,.14); }
.on-dark .button--secondary:active{ background:rgba(255,255,255,.22); }

/* HERO/FEATURE sizing (slightly bigger) */
.banner__buttons .button,
.rich-text .button{
  font-size:clamp(1.063rem, 2.1vw, 1.1875rem);  /* ~17–19px */
  padding:1rem 1.35rem;                         /* 48–52px tall */
}
@media (min-width: 990px){
  .banner__buttons .button,
  .rich-text__buttons .button,
  .rich-text .button{ font-size:1.6rem; } /* THIS CHANGES BUTTON FONT SIZE FOR HERO */
}

/* Tertiary link style (optional) */
.button--link, .button--ghost{
  background:transparent !important;
  border:none !important;
  color:var(--mf-navy) !important;
  padding-inline:0;
  text-decoration:underline;
}
.on-dark .button--link, .on-dark .button--ghost{ color:var(--mf-paper) !important; }

@media (max-width: 749px){
  .banner__buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
  }
  .banner__buttons .button{
    width:auto !important;
    min-width:unset !important;
  }
  .banner__buttons .button + .button{
    margin-left:0;
    margin-top:.5rem;
  }
}



/* Remove any decorative backplates behind hero buttons */
.banner__buttons > *:not(.button){
  background:none !important; border:none !important; box-shadow:none !important;
}

/* ========== URL-based remap when Dawn forces button--primary ========== */
/* Map to SECONDARY look (and give hover/active shading) */
a.button--primary[href*="/how-team-stores-work"],
a.button--primary[href*="central-football"],
a.button--primary[href*="/find-your-store"],
a.button--primary[href*="/about"],
a.button--primary[href*="/contact"],
a.button--primary[href*="/learn"],
a.button--primary[href*="/faq"]{
  background:var(--mf-paper) !important;
  color:var(--mf-navy) !important;
  border:1.5px solid var(--mf-navy) !important;
  box-shadow:none !important;
}
a.button--primary[href*="/demo"]:hover,
a.button--primary[href*="central-football"]:hover,
a.button--primary[href*="/find-your-store"]:hover,
a.button--primary[href*="/about"]:hover,
a.button--primary[href*="/contact"]:hover,
a.button--primary[href*="/learn"]:hover,
a.button--primary[href*="/faq"]:hover{
  background:rgba(0,0,0,.06) !important;
}
a.button--primary[href*="/demo"]:active,
a.button--primary[href*="central-football"]:active,
a.button--primary[href*="/find-your-store"]:active,
a.button--primary[href*="/about"]:active,
a.button--primary[href*="/contact"]:active,
a.button--primary[href*="/learn"]:active,
a.button--primary[href*="/faq"]:active{
  background:rgba(0,0,0,.10) !important;
}

/* Dark-section variants for URL-mapped secondaries */
.on-dark a.button--primary[href*="/demo"],
.on-dark a.button--primary[href*="central-football"],
.on-dark a.button--primary[href*="/find-your-store"],
.on-dark a.button--primary[href*="/about"],
.on-dark a.button--primary[href*="/contact"],
.on-dark a.button--primary[href*="/learn"],
.on-dark a.button--primary[href*="/faq"]{
  background:transparent !important;
  color:var(--mf-paper) !important;
  border-color:var(--mf-paper) !important;
}
.on-dark a.button--primary[href*="/demo"]:hover,
.on-dark a.button--primary[href*="central-football"]:hover,
.on-dark a.button--primary[href*="/find-your-store"]:hover,
.on-dark a.button--primary[href*="/about"]:hover,
.on-dark a.button--primary[href*="/contact"]:hover,
.on-dark a.button--primary[href*="/learn"]:hover,
.on-dark a.button--primary[href*="/faq"]:hover{
  background:rgba(255,255,255,.14) !important;
}
.on-dark a.button--primary[href*="/demo"]:active,
.on-dark a.button--primary[href*="central-football"]:active,
.on-dark a.button--primary[href*="/find-your-store"]:active,
.on-dark a.button--primary[href*="/about"]:active,
.on-dark a.button--primary[href*="/contact"]:active,
.on-dark a.button--primary[href*="/learn"]:active,
.on-dark a.button--primary[href*="/faq"]:active{
  background:rgba(255,255,255,.22) !important;
}

/* Ensure key CTAs are Primary */
a.button[href*="/start-a-store"],
a.button[href*="/start"],
a.button[href*="/get-started"]{
  background:var(--mf-navy) !important;
  color:var(--mf-paper) !important;
  border-color:rgba(0,0,0,.12) !important;
}
.on-dark a.button[href*="/start-a-store"],
.on-dark a.button[href*="/start"],
.on-dark a.button[href*="/get-started"]{
  background:var(--mf-paper) !important;
  color:var(--mf-navy) !important;
  border-color:rgba(0,0,0,.12) !important;
}

/* Optional: special-accent button (rare promos/donations) */
.button--accent{
  background:var(--mf-gold) !important;
  color:#1e1e1e !important;
  border-color:rgba(0,0,0,.08) !important;
}
.button--accent:hover{
  background:
    linear-gradient(0deg, var(--mf-gold-tint), var(--mf-gold-tint)),
    var(--mf-gold) !important;
}

/* ==== Secondary CTA hover tuning (stronger, neutral) ==== */
:root{
  --mf-sec-hover: rgba(0,0,0,.12);      /* ↑ from .06 */
  --mf-sec-active: rgba(0,0,0,.20);     /* ↑ from .10 */
  --mf-sec-hover-dark: rgba(255,255,255,.18);
  --mf-sec-active-dark: rgba(255,255,255,.28);
}

/* Native secondary */
.button--secondary:hover{ background:var(--mf-sec-hover) !important; }
.button--secondary:active{ background:var(--mf-sec-active) !important; }
.button--secondary:focus-visible{ background:var(--mf-sec-hover) !important; }

/* URL-mapped secondaries (Dawn outputs .button--primary) */
a.button--primary[href*="/demo"]:hover,
a.button--primary[href*="central-football"]:hover,
a.button--primary[href*="/find-your-store"]:hover,
a.button--primary[href*="/about"]:hover,
a.button--primary[href*="/contact"]:hover,
a.button--primary[href*="/learn"]:hover,
a.button--primary[href*="/faq"]:hover{
  background:var(--mf-sec-hover) !important;
}
a.button--primary[href*="/demo"]:active,
a.button--primary[href*="central-football"]:active,
a.button--primary[href*="/find-your-store"]:active,
a.button--primary[href*="/about"]:active,
a.button--primary[href*="/contact"]:active,
a.button--primary[href*="/learn"]:active,
a.button--primary[href*="/faq"]:active{
  background:var(--mf-sec-active) !important;
}
a.button--primary[href*="/demo"]:focus-visible,
a.button--primary[href*="central-football"]:focus-visible,
a.button--primary[href*="/find-your-store"]:focus-visible,
a.button--primary[href*="/about"]:focus-visible,
a.button--primary[href*="/contact"]:focus-visible,
a.button--primary[href*="/learn"]:focus-visible,
a.button--primary[href*="/faq"]:focus-visible{
  background:var(--mf-sec-hover) !important;
}

/* Dark/navy sections */
.on-dark .button--secondary:hover{ background:var(--mf-sec-hover-dark) !important; }
.on-dark .button--secondary:active{ background:var(--mf-sec-active-dark) !important; }
.on-dark .button--secondary:focus-visible{ background:var(--mf-sec-hover-dark) !important; }

.on-dark a.button--primary[href*="/demo"]:hover,
.on-dark a.button--primary[href*="central-football"]:hover,
.on-dark a.button--primary[href*="/find-your-store"]:hover,
.on-dark a.button--primary[href*="/about"]:hover,
.on-dark a.button--primary[href*="/contact"]:hover,
.on-dark a.button--primary[href*="/learn"]:hover,
.on-dark a.button--primary[href*="/faq"]:hover{
  background:var(--mf-sec-hover-dark) !important;
}
.on-dark a.button--primary[href*="/demo"]:active,
.on-dark a.button--primary[href*="central-football"]:active,
.on-dark a.button--primary[href*="/find-your-store"]:active,
.on-dark a.button--primary[href*="/about"]:active,
.on-dark a.button--primary[href*="/contact"]:active,
.on-dark a.button--primary[href*="/learn"]:active,
.on-dark a.button--primary[href*="/faq"]:active{
  background:var(--mf-sec-active-dark) !important;
}
.on-dark a.button--primary[href*="/demo"]:focus-visible,
.on-dark a.button--primary[href*="central-football"]:focus-visible,
.on-dark a.button--primary[href*="/find-your-store"]:focus-visible,
.on-dark a.button--primary[href*="/about"]:focus-visible,
.on-dark a.button--primary[href*="/contact"]:focus-visible,
.on-dark a.button--primary[href*="/learn"]:focus-visible,
.on-dark a.button--primary[href*="/faq"]:focus-visible{
  background:var(--mf-sec-hover-dark) !important;
}


/* ===== Mobile sticky CTA (targets your .mobile-sticky-cta snippet) ===== */
:root{
  /* tweak this if your chat bubble is wider */
  --mf-chat-gap: 40px;
}

/* mobile-only polish */
@media (max-width:768px){

  /* wrapper from the snippet */
  .mobile-sticky-cta{
    /* sit a bit off the edges; respect iOS safe area */
    bottom: calc(-15px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    right: calc(var(--mf-chat-gap) + env(safe-area-inset-right)) !important;

    /* keep the rest from your snippet (position:fixed, z-index, opacity/show toggle) */
  }

  /* the button inside the wrapper */
  .mobile-sticky-cta .button{
    border-radius: 9999px;
    font-size: clamp(1.4rem, 3.5vw, 1.0625rem);
    padding: .85rem 1.1rem;
    white-space: nowrap;
    max-width: 92vw; overflow: hidden; text-overflow: ellipsis;

    /* match primary style */
    background: var(--mf-navy) !important;
    color: var(--mf-paper) !important;
    border: 1px solid rgba(255,255,255,.10);

    /* readable over photos */
    box-shadow:
      0 16px 40px rgba(17,24,39,.28),
      0 2px 6px rgba(0,0,0,.12);
  }

  /* gold-tinted hover/active, same as site buttons */
  .mobile-sticky-cta .button:hover{
    background:
      linear-gradient(0deg, var(--mf-gold-tint), var(--mf-gold-tint)),
      var(--mf-navy) !important;
  }
  .mobile-sticky-cta .button:active{
    background:
      linear-gradient(0deg, var(--mf-gold-tint-strong), var(--mf-gold-tint-strong)),
      var(--mf-navy) !important;
  }

  /* ensure no ring/outline ever appears */
  .mobile-sticky-cta .button:focus,
  .mobile-sticky-cta .button:focus-visible{
    outline: none !important;
    box-shadow: inherit !important;
  }

  /* optional: outline/ghost variant if you ever need it */
  .mobile-sticky-cta.is-outline .button{
    background: var(--mf-paper) !important;
    color: var(--mf-ink) !important;
    border: 1.5px solid var(--mf-ink) !important;
    box-shadow:
      0 12px 28px rgba(17,24,39,.14),
      0 1px 3px rgba(0,0,0,.08);
  }
  .mobile-sticky-cta.is-outline .button:hover{ background: rgba(0,0,0,.12) !important; }
  .mobile-sticky-cta.is-outline .button:active{ background: rgba(0,0,0,.20) !important; }
}

/* Force larger HERO CTA text on mobile (Image banner / Slideshow) */
@media (max-width: 749px){
  /* cover both Image banner and Slideshow variants */
  .banner .banner__buttons .button,
  .image-banner .banner__buttons .button,
  .rich-text__buttons .button,
  .slideshow .banner__buttons .button,
  .slideshow__text .banner__buttons .button{
    font-size: 2rem !important;   /* 19px */
    padding: 1rem 1.35rem !important;  /* keep tap target ~48–52px */
    line-height: 1 !important;
  }

  /* if Dawn outputs a “small” size, neutralize it */
  .banner__buttons .button.button--small{
    font-size: inherit !important;
    padding: inherit !important;
  }
}

/* Convert 2nd Hero CTA to Link on MObile */
@media (max-width: 749px){
  /* turn the 2nd hero button into a link-style */
  .banner__buttons .button + .button,
  .banner__buttons a[href*="central-football"]{
    background:transparent !important;
    border:none !important;
    color:var(--mf-ink) !important;
    text-decoration:underline;
    padding:0 !important;
    margin-top:.5rem !important;
    width:auto !important; min-width:0 !important;
    white-space:nowrap;
  }
}

/* Only flip the Admin Portal button inside Color Scheme 3 */
.color-scheme-3 a.button--primary[href*="admin.makefield.shop"]{
  background: var(--mf-paper) !important;
  color: var(--mf-navy) !important;
  border-color: rgba(0,0,0,.12) !important;
}
.color-scheme-3 a.button--primary[href*="admin.makefield.shop"]:hover{
  background:
    linear-gradient(0deg, var(--mf-gold-tint), var(--mf-gold-tint)),
    var(--mf-paper) !important;
}
.color-scheme-3 a.button--primary[href*="admin.makefield.shop"]:active{
  background:
    linear-gradient(0deg, var(--mf-gold-tint-strong), var(--mf-gold-tint-strong)),
    var(--mf-paper) !important;
}







/* ==== Multicolumn section customizations ==== */

.multicolumn h2 {
  color: black;
  text-align: center;
}


/* == Scrollable Tag Filter Bar Styles == */
.tag-filter-bar-wrapper {
  margin: 1rem 0; /* extra vertical spacing */
  background-color: #ffffff; 
}



.tag-filter-bar-list {
  display: flex;
  flex-wrap: wrap; /* will allow items to wrap on desktop if needed */
  justify-content: center; /* center them horizontally */
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 2rem; /* space between circles */
}
@media (max-width: 768px) {
  #scrollable-filter-bar {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
  .tag-filter-bar-wrapper {
    margin-top: -10px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


.tag-filter-item {
  flex: 0 0 auto;
  text-align: center;
}

.tag-filter-icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc; /* thin black border */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.tag-filter-icon {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tag-filter-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase; /* optional for a bold look */
  color: #767676;
}

/* Remove all text-decoration (like underlines) from the link around the circle label */
.tag-filter-item a,
.tag-filter-item a:hover,
.tag-filter-item a:focus {
  text-decoration: none !important;
  border-bottom: none !important; /* just in case there's a border style */
}

/* ----- Mobile styles override ----- */
@media screen and (max-width: 768px) {
  .tag-filter-bar-list {
    flex-wrap: nowrap;         /* single row on mobile */
    overflow-x: auto;          
    -webkit-overflow-scrolling: touch;
    gap: 1rem;                 /* smaller gap if desired */
    justify-content: flex-start; /* LEFT-align on mobile so first bubble is visible */
    margin: 0;                  /* remove auto-centering for mobile */
  }

  .tag-filter-icon-wrapper {
    width: 70px;
    height: 70px;
  }
}


/* ==== Predictive‑search alignment patch (collections only) ==== */
.predictive-search__item {
  display: flex;          /* lay out thumbnail + title horizontally */
  align-items: center;    /* vertically centre them */
  gap: 0.65rem;           /* optional: space between image & text */
}

/* keep thumbnails square & identical to section search bar */
.predictive-search__item--image,
.predictive-search__item--image img {
  width: 150px!important;            /* match the size you use in the section */
  height: 150px!important;
  object-fit: contain;    /* preserve aspect ratio, no cropping */
}

   .article__title, .h1.article-grid__title, .blog__title {
     text-align: center;
   }


/* ==== Rich Text Heading Customizations ==== */
   .rich-text__heading {
  line-height: 1.2 !important;
}

/* Global: make all <h2> headings in Rich-Text sections black & centered */
.rich-text h2,
.rich-text__heading {          /* the helper class Dawn adds */
  color:#000;                  /* black text */
  text-align:center;           /* centred */
}
.rich-text__text.rte {
  font-size: 2rem !important;
  color: #333;
}

/* Global: make all <h2> headings and text in Rich-Text sections White for Color Scheme 3 */
/* 1️⃣  Heading */
#shopify-section-template--17471286280291__rich_text_H4miwL
.rich-text__heading,
#shopify-section-template--17471288213603__rich_text_3BpyFY
.rich-text__heading, 
#shopify-section-template--17471288377443__rich_text_LxXAiK
.rich-text__heading,
#shopify-section-template--17471288180835__rich_text_6Xxbdm
.rich-text__heading,
#shopify-section-template--17471286607971__rich_text_rwfWCg
.rich-text__heading,
#shopify-section-template--17471288148067__rich_text_tbYQVU
.rich-text__heading {
  color:#fff !important;      /* force white */
  text-align:center !important;
}

/* 2️⃣  Body copy */
#shopify-section-template--17471286280291__rich_text_H4miwL
.rich-text__text,
#shopify-section-template--17471288213603__rich_text_3BpyFY
.rich-text__text,
#shopify-section-template--17471288377443__rich_text_LxXAiK
.rich-text__text,
#shopify-section-template--17471288180835__rich_text_6Xxbdm
.rich-text__text,
#shopify-section-template--17471286607971__rich_text_rwfWCg
.rich-text__text,
#shopify-section-template--17471288148067__rich_text_tbYQVU
.rich-text__text {
  color:#fff !important;
  text-align:center !important; /* optional */
}


/* ==== Collection Banner Customizations ==== */

.collection-hero__title {
  text-align: center;
  font-weight: bold;
  font-size: 4.5rem;
  line-height: 1.01;   /* ↓ tighten the two lines */
}
.collection-hero__description {
  text-align: center;
}
.collection-hero__image-container {
  border: none !important;
}
@media (max-width: 768px) {

  .collection-hero__description {
    margin-top:    20px !important;
    margin-bottom: -50px !important;
  }

  .collection-hero__image-container {
    border: none !important;
    background: transparent !important;          /* already has !important in Dawn? → add if needed */
    margin-bottom: -40px; 
  }
}

/*  tighten top gap on Mobile screens ≤ 749 px */
/* @media (max-width: 749px) { */

  /* 1 ▸ remove Dawn’s built‑in top padding */
  .collection-hero__inner.page-width {
    padding-block-start: 0 !important;
  }

  /* 2 ▸ pull the title/description block upward */
  .collection-hero__text-wrapper {
    margin-top: -10px !important;     /* tweak: -24px … -48px */
  }
/* } */






/* ==== Home Page - Hassle-Free Team Stores Card Customization ==== */

/*───────────────────────────────────────────────*/
/*  Multicolumn “Create Your Team Store” block   */
/*  – mobile tweaks only (≤ 768 px)              */
/*───────────────────────────────────────────────*/
@media (max-width:768px){

  /* Grab the wrapper by its unique template-ID class */
  .section-template--17471286280291__multicolumn_9Ad3yQ-padding {

    /* 1️⃣  Resize the media container */
    .media{
      padding-bottom:50% !important;
    }

    /* 2️⃣  Make images auto-height & centred */
    .multicolumn-card__image img{
      height:auto !important;
      margin:0 auto !important;
      display:block !important;
    }

    /* 3️⃣  Tighten copy spacing */
    .rte{
      margin:0 !important;
    }

    /* 4️⃣  Adjust info block spacing */
    .multicolumn-card__info{
      padding-top:5px !important;
      margin-top:-10px !important;
    }
  }
}

/* ==== Home Page - How your team earns 20% Back Customization ==== */

/* Multicolumn section – Uppercase and Styling -  */
#shopify-section-template--17471286280291__multicolumn_h9d6BW h3,
#shopify-section-template--17471286280291__multicolumn_h9d6BW h3.inline-richtext, 
#shopify-section-template--17471288410211__multicolumn_tTCHMj h3,
#shopify-section-template--17471288410211__multicolumn_tTCHMj h3.inline-richtext
{
  font-size:2.2rem !important;
  /* text-transform:uppercase; */
  letter-spacing:1px;
}


/* ==== How it works ==== */

/* How It Works hero CTA: primary on mobile, secondary look on desktop */
@media (min-width: 750px){
  /* Desktop ONLY: make the hero CTA look like your white secondary */
  #Banner-template--17471288213603__image_banner_mobile_q8raFT
  .banner__buttons .button--primary{
    background: var(--mf-paper) !important;
    color: var(--mf-navy) !important;
    border: 1.5px solid var(--mf-navy) !important;
    box-shadow: none !important;
  }
  #Banner-template--17471288213603__image_banner_mobile_q8raFT
  .banner__buttons .button--primary:hover{
    background: var(--mf-sec-hover) !important;
  }
  #Banner-template--17471288213603__image_banner_mobile_q8raFT
  .banner__buttons .button--primary:active{
    background: var(--mf-sec-active) !important;
  }
}

/* Mobile: ensure it stays navy/primary (guard against other remaps) */
@media (max-width: 749px){
  #Banner-template--17471288213603__image_banner_mobile_q8raFT
  .banner__buttons .button--primary{
    background: var(--mf-navy) !important;
    color: var(--mf-paper) !important;
    border-color: rgba(0,0,0,.12) !important;
  }
}




/* Start a Store Page - text in Rich-Text & Button section */
/* 1️⃣  Button */
#shopify-section-template--17471288213603__rich_text_WTQU8H
.rich-text__buttons .button  {
  font-size: 2.5rem !important;
  padding: 18px 66px !important;
  margin: -12px;
}

/* 2️⃣  Rich text */
#shopify-section-template--17471288213603__rich_text_WTQU8H
.rich-text__text {
  font-size: 1.7rem !important;
}

/* Start a Store Page - Why Choose Makefield section */

/* Multicolumn section – custom heading style */
#shopify-section-template--17471288213603__multicolumn_xzRz3a
@media (max-width: 768px) {
  a.button--primary {
    margin: 36px 18px 0 !important;
  }
}

/* Start a Store Page - How It Works section */

/* Multicolumn section – custom heading style */
#shopify-section-template--17471288213603__multicolumn_7iyLai
a[href="/collections/central-high-school-demo"].button.button--secondary {
  background-color: #2b496d !important;
  color: #fff;
  align-content: center;
}


/* ===== Makefield product badges ===== */
.mf-badges {
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.mf-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  color: #111;
}

/* Brand variants */
.mf-badge--best{
  background: rgba(255,255,255,.94);
  color: #2B496D;           /* Makefield blue */
  border-color: #2B496D;
}
.mf-badge--best::before{
  content: "★";
  font-size: .85em;
  color: #CBA56E;
  line-height: 1;
  margin-right: .35rem;
}
.mf-badge--premium { background: #2B496D; color: #fff; }  /* Makefield blue */
.mf-badge--value   { background: #CBA56E; color: #111; }  /* Makefield gold */
.mf-badge--new     { background: #e8f4ff; color: #2B496D; }
.mf-badge--limited { background: #fff4e5; color: #8a5a00; }

/* Tidy spacing when combined with Sale/Sold-out */
.card__badge .mf-badges { margin-top: .25rem; }

/* Optional: show only one badge on very small screens */
/*
@media (max-width: 420px) {
  .mf-badges .mf-badge:nth-child(n+2) { display: none; }
}
*/


/* Home hero only (by section id) */
#shopify-section-template--17471286280291__image_banner .banner__buttons{
  margin-top:clamp(40px,4vw,56px)!important;
}
#shopify-section-template--17471286280291__image_banner .banner__box{
  /* your clamp(0,6vw,0) always resolves to 0, so just set 0 */
  padding-bottom:0!important;
}
@media(max-width:749px){
  #shopify-section-template--17471286280291__image_banner .banner__buttons{margin-top:-12px!important}
  #shopify-section-template--17471286280291__image_banner .banner__box{padding-bottom:32px!important}
}

#shopify-section-template--17471286280291__image_banner_mobile .banner__buttons{
  margin-top:clamp(40px,4vw,56px)!important;
}
#shopify-section-template--17471286280291__image_banner_mobile .banner__box{
  /* your clamp(0,6vw,0) always resolves to 0, so just set 0 */
  padding-bottom:-20!important;
}
@media(max-width:749px){
  #shopify-section-template--17471286280291__image_banner_mobile .banner__buttons{margin-top:-12px!important}
  #shopify-section-template--17471286280291__image_banner_mobile .banner__box{padding-bottom:32px!important}
}


/* === Conversion Funnel Hero (buttons lower) === */
/* DESKTOP/TABLET */
#shopify-section-template--17471288213603__image_banner_mobile .banner__buttons{
  /* Push buttons down from the subhead */
  margin-top: clamp(40px, 4vw, 64px) !important;
}
#shopify-section-template--17471288213603__image_banner_mobile .banner__box{
  /* Add space under the whole content stack */
  padding-bottom: clamp(16px, 2.5vw, 48px) !important;
}

/* Conversion funnel hero – lower CTA on mobile */
@media (max-width: 749px){
  #shopify-section-template--17471288213603__image_banner_mobile .banner__content{
    padding-bottom: clamp(64px, 5vh, 140px) !important;
  }
}




/* ===== Risk band (No-risk setup) ===== */
.mf-riskwrap{
  margin-block:clamp(12px,2.5vw,28px);
  padding:clamp(12px,2vw,20px);
  background:#fff;
  border:1px solid #E7ECF2;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding-inline:clamp(12px,4vw,24px); /* safe side gutters on small screens */
}
.mf-eyebrow{
  margin:0 0 6px 4px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2B496D;
}
.mf-riskband{
  display:grid;
  gap:clamp(12px,1.2vw,18px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){
  .mf-riskband{ grid-template-columns:1fr; }
}
.mf-riskitem{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  border-radius:12px;
  background:#F7FAFF;
  border:1px solid #E1EAF5;
}
.mf-riskitem svg{ width:22px; height:22px; color:#2B496D; flex:0 0 auto; }
.mf-riskitem h3{ margin:0 0 2px; font-size:18px; line-height:1.25;  }
.mf-riskitem p{ margin:0; font-size:14px; color:#3A3A3A; }

/* Optional gold accent on the wrapper’s left edge */
.mf-riskwrap{ position:relative; }
.mf-riskwrap::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  border-radius:16px 0 0 16px; background:#CBA56E;
}

/* If this sits on a dark color-scheme section, keep it readable */
.color-scheme-3 .mf-riskwrap,
.color-scheme-4 .mf-riskwrap{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.25);
}
.color-scheme-3 .mf-riskitem,
.color-scheme-4 .mf-riskitem{
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.35);
}

/* Risk-band chip titles */
.mf-riskwrap .mf-riskitem h3{
  color:#000;
  font-weight:800; /* 700 if you prefer */
}

/* === Multirow cards only (Dawn) ===========================
   Matches any <section> whose id contains "__multirow_"
   so the styles apply only to the Multirow section.
=========================================================== */
.shopify-section[id*="__multirow_"] .image-with-text{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(17,24,39,.14), 0 1px 2px rgba(0,0,0,.06);
  transition:box-shadow .25s ease, transform .25s ease;
}

@media (hover:hover){
  .shopify-section[id*="__multirow_"] .image-with-text:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(17,24,39,.20), 0 6px 16px rgba(0,0,0,.12);
  }
}



/* simple text-link CTA (re-usable) */
.cta-inline-wrap{
  text-align:center;
  padding: 24px 0 8px;                 /* vertical spacing */
}
.cta-inline{
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 22px); /* responsive type */
  color: var(--color-foreground);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.cta-inline:hover{ text-decoration-thickness: 3px; }
.cta-inline:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }




/* =========================================
   LAYOUT / SPACING  (marketing pages only)
   ========================================= */

/* Section spacing tokens */
:root{
  --pad-default: clamp(48px, 5.2vw, 96px);  /* most sections */
  --pad-tight:   clamp(32px, 4.5vw, 64px);  /* dense sections (FAQ, logos, chips) */
  --pad-loose:   clamp(56px, 7vw, 104px);   /* hero / big CTA bands */
  --pad-flush:   0px;                       /* make adjacent bands touch */
}

/* Never add padding to structural sections */
#shopify-section-announcement-bar,
#shopify-section-header,
#shopify-section-footer{
  padding: 0 !important;
}

/* Apply outer spacing ONLY on non-collection / non-product pages */
body:not(.template-collection):not(.template-product)
  #MainContent .shopify-section,
body:not(.template-collection):not(.template-product)
  .content-for-layout > .shopify-section{
  padding-block: var(--section-pad, var(--pad-default)) !important;
}

/* First content section flush with header (marketing pages only) */
body:not(.template-collection):not(.template-product)
  #MainContent .shopify-section:first-of-type,
body:not(.template-collection):not(.template-product)
  .content-for-layout > .shopify-section:first-of-type{
  padding-top: 0 !important;
}

/* Make ALL Rich text bands "tight" by default (marketing pages only) */
body:not(.template-collection):not(.template-product)
  #MainContent .shopify-section:has(> .rich-text),
body:not(.template-collection):not(.template-product)
  #MainContent .shopify-section:has(.rich-text__blocks){
  --section-pad: var(--pad-tight);
}

/* Inner padding norms (marketing pages only) */
body:not(.template-collection):not(.template-product)
  #MainContent .rich-text,
body:not(.template-collection):not(.template-product)
  #MainContent .image-with-text,
body:not(.template-collection):not(.template-product)
  #MainContent .newsletter,
body:not(.template-collection):not(.template-product)
  #MainContent .collapsible-content{
  --inner-y: clamp(16px, 2vw, 24px);
  padding-top: var(--inner-y);
  padding-bottom: var(--inner-y);
}

/* Grid/card sections rely on card padding, not section padding (marketing pages only) */
body:not(.template-collection):not(.template-product)
  #MainContent .multicolumn,
body:not(.template-collection):not(.template-product)
  #MainContent .featured-collection,
body:not(.template-collection):not(.template-product)
  #MainContent .collection-list,
body:not(.template-collection):not(.template-product)
  #MainContent .blog-posts,
body:not(.template-collection):not(.template-product)
  #MainContent .product-recommendations{
  padding-top: 0;
  padding-bottom: 0;
}

/* Avoid extra top/bottom gaps from first/last child margins in rich text (marketing pages only) */
body:not(.template-collection):not(.template-product)
  #MainContent .rich-text :where(h1,h2,h3,p,ul,ol):first-child{ margin-top: 0; }
body:not(.template-collection):not(.template-product)
  #MainContent .rich-text :where(h1,h2,h3,p,ul,ol):last-child{ margin-bottom: 0; }


/* =========================================================
   HARD EXCLUDE: Collection pages (zero out marketing spacing)
   Targets the actual section IDs/classes in collection.json
   ========================================================= */

/* 1) Outer collection sections (wrappers Shopify renders) */
#MainContent [id^="shopify-section-template"][id$="__banner"],
#MainContent [id^="shopify-section-template"][id*="__scrollable_filter_bar_"],
#MainContent [id^="shopify-section-template"][id$="__product-grid"],
#MainContent [id^="shopify-section-template"][id*="__breadcrumbs"]{
  --section-pad: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block: 0 !important;
}

/* 2) Inner elements those sections render (some themes nest another layer) */
#MainContent .collection-hero,
#MainContent #scrollable-filter-bar,
/* class that wraps the product grid band in Dawn */
#MainContent [class^="section-template--"][class$="__product-grid-padding"]{
  --section-pad: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block: 0 !important;
}

/* 3) Safety: do NOT tighten rich-text on collection pages even if one is present */
#MainContent:has([id^="shopify-section-template"][id$="__product-grid"])
  .shopify-section:has(> .rich-text){
  --section-pad: initial !important;
}


/* ─────────────────────────────────────────────────────────
   Collapse sticky‑CTA sentinel sections + remove adjacent spacing
   ───────────────────────────────────────────────────────── */

/* 1) Make the sentinel elements truly zero-height */
#sticky-cta-trigger,
#sticky-cta-end{
  display:block;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;   /* neutralizes &nbsp; */
  overflow:hidden !important;
}

/* 2) Zero padding/margin on the sentinel SECTION itself */
#MainContent .shopify-section:has(#sticky-cta-trigger),
#MainContent .shopify-section:has(#sticky-cta-end){
  --section-pad: 0 !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* Also strip inner wrappers Dawn injects (gradient + -padding div) */
#MainContent .shopify-section:has(#sticky-cta-trigger) .gradient,
#MainContent .shopify-section:has(#sticky-cta-end) .gradient,
#MainContent .shopify-section:has(#sticky-cta-trigger) [class$="-padding"],
#MainContent .shopify-section:has(#sticky-cta-end) [class$="-padding"]{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) CRITICAL: remove the margin applied to the *next* section
      (defeats .section + .section spacing when the first is a sentinel) */
#MainContent .shopify-section:has(#sticky-cta-trigger) + .shopify-section,
#MainContent .shopify-section:has(#sticky-cta-end) + .shopify-section{
  margin-top: 0 !important;
}













/* =========================================
   PAGE GRADIENT (site-wide)
   ========================================= */

/* Subtle, neutral gradient */
:root{
  --grad-mid: #F3F3F3;   /* tweak if desired */
  --grad-stop: 31%;
  --page-gradient: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    var(--grad-mid) var(--grad-stop),
    #FFFFFF 100%
  );
}

/* Paint behind everything */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-gradient);
  pointer-events: none;
}

/* iOS fallback (fixed backgrounds can be quirky) */
@supports (-webkit-touch-callout: none) {
  body{ background: var(--page-gradient); }
}


/* Kill the page gradient on collection & product pages */
body.template-collection::before,
body.template-product::before,
body:has(.collection-hero)::before,
body:has(.product)::before{
  background:#fff !important;       /* or background:none !important; */
}


/* =========================================
   CARD SURFACES (site-wide)
   ========================================= */

:root{
  --mf-navy:#2B496D;
  --mf-gold:#CBA56E;
  --text-strong:#0F172A;

  --card-radius:12px;
  --card-bg:#FFFFFF;                 /* default = white */
  --card-border:#E5E7EB;
  --card-shadow:0 1px 2px rgba(0,0,0,.04);

  /* Optional variants */
  --card-bg-tint: rgba(43,73,109,.06);   /* soft navy wash */
  --card-border-tint: rgba(43,73,109,.18);
  --card-bg-ghost: transparent;
  --card-border-ghost: rgba(15,23,42,.14);
}

/* Multicolumn cards (covers Dawn variants) */
#MainContent .multicolumn .multicolumn-card,
#MainContent .multicolumn .content-container{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: var(--text-strong);
  padding: clamp(16px,2vw,24px);
}

/* Ensure dark text inside cards even if the section scheme is "dark" */
#MainContent .multicolumn .multicolumn-card h1,
#MainContent .multicolumn .multicolumn-card h2,
#MainContent .multicolumn .multicolumn-card h3,
#MainContent .multicolumn .multicolumn-card p,
#MainContent .multicolumn .multicolumn-card li{
  color: var(--text-strong);
}

/* Optional emphasis */
#MainContent .multicolumn .multicolumn-card strong{ color: var(--mf-navy); }

/* Section-level variants (opt-in with one-liners in Custom CSS) */
#MainContent .shopify-section.cards--tint .multicolumn .multicolumn-card,
#MainContent .shopify-section.cards--tint .multicolumn .content-container{
  background: var(--card-bg-tint) !important;
  border-color: var(--card-border-tint) !important;
  box-shadow: none;
}
#MainContent .shopify-section.cards--ghost .multicolumn .multicolumn-card,
#MainContent .shopify-section.cards--ghost .multicolumn .content-container{
  background: var(--card-bg-ghost) !important;
  border-color: var(--card-border-ghost) !important;
  box-shadow: none;
}



/* ===========================
   How to get started – badges + hover
   (scoped to your UL id)
   =========================== */

/* 1) Reset the counter on the UL */
#Slider-template--17471286280291__multicolumn_h9d6BW{
  counter-reset: step;
}

/* 2) Card styling + hover lift */
#Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 0 rgba(17,24,39,.06), 0 10px 20px rgba(17,24,39,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform, box-shadow;
}

/* 3) Number badge (auto 1/2/3) */
#Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card::before{
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -12px; left: -12px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
  color: #2B496D;               /* Makefield blue */
  background: #fff;
  border: 3px solid #CBA56E;    /* Makefield gold */
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(17,24,39,.12);
  z-index: 2;
}

/* 4) Hover lift (desktop/hover devices only) */
@media (hover:hover){
  #Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.06);
    border-color: rgba(17,24,39,.12);
  }
}

/* 5) Keyboard focus (accessibility) */
#Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card:focus-within{
  outline: none;
  box-shadow: 0 0 0 3px rgba(43,73,109,.25), 0 10px 24px rgba(17,24,39,.12);
}

/* 6) Mobile tweaks */
@media (max-width: 749px){
  #Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card{
    padding: 22px 18px; border-radius: 14px;
  }
  #Slider-template--17471286280291__multicolumn_h9d6BW .multicolumn-card::before{
    width: 36px; height: 36px; font-size: 14px; top: -10px; left: -10px;
  }
}




/* Multi‑row (specific block): mask the ring to white */
#shopify-section-template--17471286280291__multirow_A7weFm .image-with-text{
  background: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  filter: none !important;                 /* prevent theme drop‑shadow line */
  box-shadow:
    0 0 0 1px #fff,                        /* white ring */
    0 12px 32px rgba(17,24,39,.16) !important;  /* keep lift if desired */
}
#shopify-section-template--17471286280291__multirow_A7weFm 
.image-with-text.collapse-corners::before,
#shopify-section-template--17471286280291__multirow_A7weFm 
.image-with-text.collapse-corners::after{
  content: none !important;
}
#shopify-section-template--17471286280291__multirow_A7weFm 
.image-with-text .content-container{
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px) !important;
}



/* Video poster play button — always white circle, brand-colored icon */
.video-section .deferred-media__poster-button{
  background:#fff !important;          /* circle */
  color:#2B496D !important;            /* triangle (currentColor) */
  border:0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25);/* lift for dark posters */
  mix-blend-mode: normal !important;   /* ignore any blending from gradients */
}

/* Optional: make the triangle white too (uncomment if you prefer all-white) */
/* .video-section .deferred-media__poster-button{ color:#fff !important; } */

/* If a theme overlay is dimming the poster, kill it so the button pops */
.video-section__poster::after{ display:none !important; }


/* Tighten the band that contains the video on marketing pages */
body:not(.template-collection):not(.template-product)
  #MainContent .shopify-section:has(.video-section){
  --section-pad: clamp(28px, 4vw, 56px) !important;  /* was your default */
}

/* On small screens, pull it a bit closer */
@media (max-width: 749px){
  body:not(.template-collection):not(.template-product)
    #MainContent .shopify-section:has(.video-section){
    --section-pad: clamp(16px, 4.5vw, 28px) !important;
  }
}

/*** CTA inline coloring ****/

.cta-inline,
.cta-inline:visited { color: var(--mf-navy) !important; text-decoration-color: currentColor; }
.cta-inline:focus-visible { outline-color: var(--mf-navy) !important; }



/* ——— Demo-page value chips ——— */
.mf-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin:.5rem 0 0;              /* nudge closer to subhead */
  padding:0; list-style:none;
}
.mf-chip{
  display:inline-flex; align-items:center;
  padding:.35rem .65rem;
  border-radius:9999px;
  border:1px solid var(--mf-navy);
  background:rgba(43,73,109,.06); /* soft navy wash */
  color:var(--mf-navy);
  font-weight:700; line-height:1; white-space:nowrap;
  font-size:14px;
}
@media (max-width:749px){
  .mf-chip{ font-size:13px; padding:.3rem .55rem; }
}

/* If this band ever uses a dark color scheme, invert for contrast */
.color-scheme-3 .mf-chip,
.color-scheme-4 .mf-chip,
.on-dark .mf-chip{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.55);
  color:#fff;
}



/* ***** DEMO page – tighten the space between H1/subhead and chips ***** */
.shopify-section[id$="__rich_text_iLGMKw"]{
  --section-pad: clamp(8px, 1.6vw, 16px) !important;  /* smaller bottom padding */
}

/* Chips section – remove its own padding and pull it up slightly */
.shopify-section[id$="__custom_liquid_PFdMK6"]{
  --section-pad: 0 !important;
  padding-block: 0 !important;
  margin-top: -20px;                 /* nudge closer; adjust -8px…-16px to taste */
}




/* ****** anchor for collections on Demo page to prevent jump on refresh****** */
#demo-collection{
  /* adjust to your header/announcement height */
  scroll-margin-top: 80px; /* try 80–120px to taste */
}




/* ****** anchor for collections on Demo page to prevent jump on refresh****** */