/** Shopify CDN: Minification failed

Line 347:2 Unexpected "}"
Line 372:0 Unexpected "}"

**/
/* --- CRITICAL TOP-LEVEL FIXES --- */
/* 1. HIDE 'GET IN TOUCH' FROM DESKTOP NAV ONLY */
@media screen and (min-width: 990px) {
  .header__inline-menu li:has(a[href*="contact"]),
  .header__inline-menu a[href*="contact"],
  .list-menu__item[href*="contact"] {
    display: none !important;
  }
}

/* 2. FORCE 'YOUR CART' FONT ON MOBILE */
@media screen and (max-width: 749px) {
  .template-cart .cart__title, 
  .template-cart h1.main-page-title,
  .template-cart .title--primary {
    font-family: 'HighwoodRidge', serif !important;
    text-transform: uppercase !important;
  }
}
/* --- END TOP-LEVEL FIXES --- */

/* =========================================================
   SALTY COWGIRL CUSTOM CSS
   Clean consolidated version
   ========================================================= */

/* =========================
   BRAND TOKENS
   ========================= */
:root {
  --sc-bg: #f7f5f2;
  --sc-cream: #f9f4f0;
  --sc-cream-light: #fbf6f1;
  --sc-text: #2b1b16;
  --sc-red: #891d1a;
  --sc-blue: #5e657b;
  --sc-white: #ffffff;
  --sc-border: #d9d1ca;

  --sc-serif: "HighwoodRidgeSerif", Georgia, serif;
  --sc-sans: "HighwoodRidgeSans", "Karla", Arial, sans-serif;
  --sc-body: "Karla", Arial, sans-serif;
  --sc-button: "Karla", Arial, sans-serif;

  --sc-radius-sm: 4px;
  --sc-radius-md: 5px;
  --sc-radius-pill: 999px;

  --sc-hero-overlay: rgba(43, 27, 22, 0.34);
  --sc-hero-heading: #ffffff;
}

/* =========================
   GLOBAL TYPOGRAPHY
   ========================= */
body,
p,
span,
li,
a,
input,
textarea,
select,
button,
.rich-text__text,
.banner__text,
.rte,
.caption,
.caption-large,
.subtitle {
  font-family: var(--sc-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.card__heading,
.banner__heading,
.rich-text__heading,
.image-banner__heading,
.slideshow__heading,
.main-page-title,
.collection-hero__title,
.title,
.inline-richtext {
  font-family: var(--sc-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* TIGHTENED LINE SPACING */
body,
p,
.p,
span,
li,
.rte p,
.image-with-text__text,
.rich-text__text p {
  line-height: 1.15 !important;
  margin-bottom: 1.2rem !important;
}

/* Target Image with Text block specifically for extra snugness */
.image-with-text__text {
  line-height: 1.1 !important;
  margin-top: 0.5rem !important;
}

a {
  text-decoration: none;
}

/* =========================
   LAYOUT
   ========================= */
.page-width {
  max-width: 100% !important;
}

@media screen and (min-width: 990px) {
  .page-width-desktop {
    max-width: var(--page-width) !important;
  }
}

/* =========================
   HEADER
   ========================= */
.header-wrapper {
  background: #ffffff;
  min-height: 80px;
}

.header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}

.header__inline-menu {
  justify-self: start !important;
  margin-left: 0 !important;
  padding-left: 28px !important;
}

.header__heading {
  justify-self: center !important;
}

.header__icons {
  justify-self: end !important;
  padding-right: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 40px;
}

.header__menu-item,
.header__inline-menu .list-menu__item,
.list-menu__item a,
.header__menu-item span,
.header__inline-menu a,
.list-menu__item,
.list-menu__item span,
.header__heading-link,
nav a,
header a {
  font-family: var(--sc-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.header__menu-item:hover,
.header__menu-item:hover span,
.header__active-menu-item {
  color: var(--sc-text) !important;
}

/* hide search */
.header__icon--search,
summary.header__icon--search,
a[href*="/search"] {
  display: none !important;
}

/* custom icon containers */
.header__icons .header__icon,
.header__icons a.header__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* hide theme svg icons */
.header__icons .header__icon svg,
.header__icons a.header__icon svg,
.header__icon--contact .icon,
.header__icon--contact .svg-wrapper,
.header__icon--cart .icon,
.header__icon--cart .svg-wrapper {
  display: none !important;
}

/* contact / envelope */
.header__icons .header__icon--contact,
.header__icons a.header__icon--contact,
.header__icons a[href*="/pages/contact"],
.header__icons a[href*="contact"] {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  background-image: url("/cdn/shop/files/envelope.png?v=1772493996") !important;
  background-size: 54px auto !important;
}

/* cart / wagon */
.header__icons .header__icon--cart,
.header__icons a.header__icon--cart {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  background-image: url("/cdn/shop/files/wagon_icon_-_cart.png?v=1772493739") !important;
  background-size: 56px auto !important;
}

/* cart badge - CIRCLE POSITION */
.header__icon--cart .cart-count-bubble,
.cart-count-bubble {
  position: absolute !important;
  top: 13px !important;   
  right: 14px !important; 
  background: #ffffff !important;
  color: var(--sc-blue) !important;
  border: 2px solid var(--sc-blue) !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important; /* Changed from center to allow manual push */
  overflow: hidden !important;
}

/* THE NUMBER DROP - Refined for perfect centering */
.cart-count-bubble span,
.cart-count-bubble * {
  color: var(--sc-blue) !important;
  font-family: var(--sc-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  padding-top: 3px !important; /* Decreased from 4px to lift the number slightly */
}

/* MOBILE HEADER - PULL ENVELOPE RIGHT */
@media screen and (max-width: 749px) {
  /* 1. Standard Grid for Balance */
  .header {
    display: grid !important;
    grid-template-areas: 'left-icons heading right-icons' !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }

  .header__heading {
    grid-area: heading !important;
    margin: 0 !important;
  }

  /* 2. Icon Group */
  .header__icons {
    grid-area: right-icons !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0px !important; 
    padding: 0 !important;
  }

  /* 3. Scale and Constraint */
  .header__icon--cart,
  .header__icon--contact,
  .header__link[href*="contact"],
  .header__icon img {
    transform: scale(0.6) !important;
    transform-origin: center right;
    width: 35px !important; /* Limits the horizontal 'footprint' */
    padding: 0 !important;
  }

  /* 4. The Corrected Nudge */
  /* Using a negative 'right' value or positive 'margin-left' to shove it right */
  .header__link[href*="contact"] {
    position: relative !important;
    left: 45px !important; /* Increased this to shove it past its own boundary toward the wagon */
    z-index: 2;
  }

  .header__icon--cart {
    position: relative !important;
    left: 10px !important; /* Nudging the wagon slightly right to meet the envelope */
    z-index: 1;
  }
}

 /* HIDE ENVELOPE ON MOBILE - PRECISE OVERRIDE */
@media screen and (max-width: 749px) {
  /* This targets the icon on the right ONLY, leaving the hamburger menu alone */
  .header__icons a[href*="contact"], 
  .header__icons .header__icon--contact,
  .header__icons a:nth-last-child(2) { 
    display: none !important;
  }
}
  }

  /* 2. Fix the Wagon and Cart Count */
  .header__icon--cart {
    display: flex !important;
    overflow: visible !important;
    position: relative !important;
  }

  .header__icon--cart img {
    width: 32px !important;
    height: auto !important;
    transform: none !important;
  }

  /* The Red Count Bubble */
  .cart-count-bubble {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #891d1a !important;
    display: flex !important;
    visibility: visible !important;
    z-index: 10 !important;
  }
}

/* 3. HIDE 'GET IN TOUCH' FROM THE MAIN DESKTOP NAV BAR */
@media screen and (min-width: 990px) {
  /* Targets the desktop horizontal list items only */
  .header__inline-menu .list-menu__item[href*="contact"] {
    display: none !important;
  }
}

/* FORCE CART NUMBER TO SHOW ON WAGON */
@media screen and (max-width: 749px) {
  /* 1. Make sure the main cart link doesn't hide the number */
  .header__icon--cart, 
  #cart-icon-bubble {
    position: relative !important;
    display: flex !important;
    overflow: visible !important; /* This is the most important line */
    width: 44px !important; /* Standard tap size for stability */
    height: 44px !important;
  }

  /* 2. Position the Wagon image inside that box */
  .header__icon--cart img {
    width: 30px !important; 
    height: auto !important;
    margin-top: 10px !important; /* Nudges wagon down slightly to make room for the number */
  }

  /* 3. The Number Bubble Styling */
  .cart-count-bubble {
    position: absolute !important;
    top: 5px !important; /* Pulls it to the top of the wagon */
    right: 2px !important; /* Pulls it to the right edge */
    background-color: #891d1a !important; /* Deep Red */
    color: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    z-index: 99 !important; /* Forces it to the very front */
  }

  /* Backup: If your theme uses a different name for the number */
  .header__icon--cart .icon-cart-count {
    display: block !important;
    visibility: visible !important;
  }
}

/* FAQ COLLAPSIBLE ROWS - KARLA OVERRIDE */
.collapsible-content__grid .accordion summary .accordion__title,
.collapsible-content__grid .accordion__content,
.shopify-section .accordion__title,
.shopify-section .accordion__content p,
.product__accordion summary h2,
.footer-block__heading {
  font-family: 'Karla', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Adjusting the Question specifically */
.accordion__title {
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

/* =========================
   HERO / BANNER
   ========================= */
.banner,
.slideshow__slide,
.image-banner {
  position: relative;
}

.banner__media::after,
.slideshow__media::after,
.image-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sc-hero-overlay);
  pointer-events: none;
  z-index: 1;
}

.banner__content,
.slideshow__text-wrapper,
.banner__box {
  position: relative;
  z-index: 2;
}

.banner__heading,
.slideshow__heading,
.banner .h0,
.banner .h1,
.banner h1,
.banner h2 {
  font-family: var(--sc-serif) !important;
  color: var(--sc-hero-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 0.95 !important;
  text-align: center !important;
}

.banner__text,
.banner__text p,
.slideshow__text,
.slideshow__text p,
.banner .rte,
.banner .rte p {
  font-family: "Karla", Arial, sans-serif !important;
  color: #ffffff !important;
  text-align: center !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
}

/* dawn banner spacing */
.banner__box > * + * {
  margin-top: 8px !important;
}

.banner__box > * + .banner__buttons {
  margin-top: 18px !important;
}

.banner__heading {
  margin: 0 !important;
}

.banner__text,
.banner__text p {
  margin: 0 !important;
  padding: 0 !important;
}

/* hero buttons */
.banner .button,
.slideshow__text-wrapper .button,
.banner__buttons .button,
.banner a.button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-family: var(--sc-button) !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  padding: 1.2rem 2.8rem !important;
}

.banner .button:hover,
.slideshow__text-wrapper .button:hover,
.banner__buttons .button:hover,
.banner a.button:hover {
  background: var(--sc-red) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.banner .button::before,
.banner .button::after,
.slideshow__text-wrapper .button::before,
.slideshow__text-wrapper .button::after,
.banner__buttons .button::before,
.banner__buttons .button::after,
.banner a.button::before,
.banner a.button::after {
  content: none !important;
  box-shadow: none !important;
}

@media screen and (min-width: 990px) {
  .banner__heading,
  .slideshow__heading,
  .banner .h0,
  .banner .h1,
  .banner h1,
  .banner h2 {
    font-size: clamp(5rem, 6vw, 8.2rem) !important;
    max-width: 12ch;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .banner__text,
  .banner__text p,
  .slideshow__text,
  .slideshow__text p,
  .banner .rte,
  .banner .rte p {
    font-size: 1.8rem !important;
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 989px) {
  .banner__heading,
  .slideshow__heading,
  .banner .h0,
  .banner .h1,
  .banner h1,
  .banner h2 {
    font-size: clamp(3.2rem, 8vw, 4.8rem) !important;
  }

  .banner__text,
  .banner__text p,
  .slideshow__text,
  .slideshow__text p,
  .banner .rte,
  .banner .rte p {
    font-size: 1.5rem !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* =========================
   GLOBAL BUTTONS
   ========================= */
.button,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.cart__checkout-button,
.product-form__submit,
.quick-add__submit,
a.button,
button {
  border-radius: var(--sc-radius-md) !important;
  box-shadow: none !important;
  font-family: var(--sc-button) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.button::after,
.shopify-payment-button__button::after,
.shopify-payment-button__button--unbranded::after,
.cart__checkout-button::after,
.product-form__submit::after,
.quick-add__submit::after {
  content: none !important;
  box-shadow: none !important;
}

/* =========================
   COLLECTION PRODUCT GRID
   ========================= */
body.template-collection .product-grid .grid__item {
  display: flex;
}

body.template-collection .product-grid .product-card-wrapper {
  background: var(--sc-cream) !important;
  border-radius: var(--sc-radius-md) !important;
  padding: 16px !important;
  height: 100%;
  width: 100%;
}

body.template-collection .product-grid .card,
body.template-collection .product-grid .card__inner,
body.template-collection .product-grid .card__media,
body.template-collection .product-grid .card__content {
  background: transparent !important;
}

body.template-collection .product-grid .card__media .media {
  aspect-ratio: 1 / 1;
  background: var(--sc-cream-light);
  overflow: hidden;
}

body.template-collection .product-grid .card__media .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

body.template-collection .product-grid .card__information {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  text-align: center;
}

body.template-collection .product-grid .card__heading {
  margin: 0 !important;
  line-height: 1.05 !important;
  text-align: center;
}

body.template-collection .product-grid .quick-add {
  width: 100%;
  margin-top: 8px;
}

body.template-collection .product-grid .quick-add__submit {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 5px !important;
  background: var(--sc-blue) !important;
  border: 1.5px solid var(--sc-blue) !important;
  color: #ffffff !important;
  font-family: "Karla", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body.template-collection .product-grid .quick-add__submit:hover {
  background: var(--sc-cream-light) !important;
  color: var(--sc-blue) !important;
  border-color: var(--sc-blue) !important;
  filter: none !important;
}

body.template-collection .product-grid .quick-add__submit::before,
body.template-collection .product-grid .quick-add__submit::after {
  content: none !important;
}

body.template-collection .product-grid .card__content .badge,
body.template-collection .product-grid .card__information .badge,
body.template-collection .product-grid .badge.price__badge-sale,
body.template-collection .product-grid .badge--bottom-left.color-scheme-4 {
  background-color: var(--sc-red) !important;
  border-radius: 2px !important;
  border: none !important;
  padding: 5px 12px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

body.template-collection .product-grid .card-bean-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.template-collection .product-grid .card-bean-pills__input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.template-collection .product-grid .card-bean-pills__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 14px;
  border-radius: var(--sc-radius-pill);
  border: 1.5px solid var(--sc-blue);
  background: #ffffff !important;
  color: var(--sc-blue) !important;
  font-family: "Karla", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

body.template-collection .product-grid .card-bean-pills__input:checked + .card-bean-pills__label {
  background: var(--sc-blue) !important;
  color: #ffffff !important;
  border-color: var(--sc-blue) !important;
}

/* =========================
   PRODUCT PAGE
   ========================= */
.product-form__buttons .button,
.product-form__buttons button,
.product-form__buttons .shopify-payment-button__button {
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
}

.product-form__buttons .product-form__submit {
  background: #ffffff !important;
  color: var(--sc-text) !important;
  border: 1.5px solid var(--sc-text) !important;
}

.product-form__buttons .product-form__submit:hover {
  background: var(--sc-text) !important;
  color: #ffffff !important;
  border-color: var(--sc-text) !important;
}

.product-form__buttons .shopify-payment-button__button {
  background: var(--sc-blue) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--sc-blue) !important;
}

.product-form__buttons .shopify-payment-button__button:hover {
  background: #4c5367 !important;
  color: #ffffff !important;
  border-color: #4c5367 !important;
}

/* =========================
   FOOTER CREDIT BAR
   ========================= */
.footer-credit-bar {
  background-color: #121212;
  color: #ffffff;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-credit-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-credit-bar__inner a {
  color: inherit;
}

.scroll-bold {
  font-weight: 600;
}

/* =========================
   MOBILE TWEAKS
   ========================= */
@media screen and (max-width: 989px) {
  .header__inline-menu {
    padding-left: 0 !important;
  }

  .header__icons {
    padding-right: 14px !important;
  }

  .featured-collection .grid__item {
    min-width: unset !important;
    max-width: unset !important;
    width: calc(50% - 10px) !important;
  }
}

@media screen and (max-width: 749px) {
  h1, .h1, h2, .h2, h3, .h3 {
    line-height: 1.05 !important;
  }

  .featured-collection .grid__item,
  body.template-collection .product-grid .grid__item {
    width: 100% !important;
  }

  .footer-credit-bar__inner {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}
/* =========================================================
   SALTY COWGIRL - FINAL POSITIONING & COLOR LOCK
   ========================================================= */

/* 1. CENTER THE WHOLE ROW */
.section-featured-collection .grid,
.template-collection .grid {
  display: flex !important;
  justify-content: center !important; /* This centers the group */
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px !important; /* THIS controls the space between cards - lower it for closer */
  background: transparent !important;
  padding: 0 !important;
}

/* 2. STRIP THEME WRAPPERS */
.section-featured-collection .grid__item,
.section-featured-collection .isolate {
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* 3. THE CARD WRAPPER */
.salty-card-fixed-wrapper {
  margin: 0 !important; /* Let the 'gap' above handle spacing */
  padding: 0 !important;
  display: block !important;
}

/* 4. THE CARD COLOR & DIMENSIONS */
.salty-final-card-design {
  background-color: #f1e6d2 !important; /* Your exact swatch */
  width: 235px !important;
  height: 390px !important;
  border-radius: 5px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
/* --- SALTY COWGIRL: FINAL GRID & COLOR OVERRIDE --- */

/* 1. Force the grid to center and tighten the gap */
.section-featured-collection .grid {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important; /* Adjust this number to bring them closer/further */
  background: transparent !important;
  list-style: none !important;
  padding: 0 !important;
}

/* 2. Kill the theme's muddy tan background wrapper */
.section-featured-collection .grid__item,
.section-featured-collection .isolate {
  background: transparent !important;
  background-color: transparent !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* 3. The Card: Color Lock & Proportions */
.salty-final-card-design {
  background-color: #f1e6d2 !important; /* Exact swatch color */
  width: 235px !important;
  height: 390px !important;
  margin: 0 auto !important;
  border-radius: 5px !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* 4. Fix alignment for the card wrapper */
.salty-card-fixed-wrapper {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- SALTY COWGIRL: FORCED CENTER ALIGNMENT --- */

/* 1. Target the main collection list and force it to the middle */
.section-featured-collection .grid, 
.template-collection .product-grid {
  display: flex !important;
  justify-content: center !important; /* This is the "Magic" centering line */
  flex-wrap: wrap !important;
  gap: 15px !important; /* Controls the snug spacing between cards */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 2. Remove theme-enforced width constraints on the grid items */
.section-featured-collection .grid__item {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}

/* 3. Ensure the custom wrapper doesn't float left */
.salty-card-fixed-wrapper {
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

/* --- SALTY COWGIRL: FORCED CENTER & TIGHT GAP --- */

/* 1. Force the container to center its children */
ul.salty-centered-grid {
  display: flex !important;
  justify-content: center !important; /* THE MAGIC CENTERING LINE */
  flex-wrap: wrap !important;
  gap: 12px !important; /* Control the snugness here */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Strip theme widths from the list items */
ul.salty-centered-grid .grid__item {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Ensure your individual card wrappers don't fight the layout */
.salty-card-fixed-wrapper {
  display: block !important;
  margin: 0 !important;
}

/* --- SALTY COWGIRL: THE ULTIMATE GAP KILLER --- */

/* 1. Target the Title Wrapper specifically */
.section-featured-collection .title-wrapper-with-link {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Target the main heading text */
.section-featured-collection .title-wrapper-with-link .title {
  margin-bottom: 0 !important;
}

/* 3. The "Cinch": Use a heavy negative margin on the grid */
ul.salty-centered-grid {
  margin-top: -30px !important;
  padding-top: 0 !important;
}

/* 4. Kill the dynamic theme variables */
.section-featured-collection .section-stack {
  gap: 0 !important;
  --section-stack-spacing-custom: 0px !important;
}

/* --- THE HOVER MUST WIN --- */
.salty-blue-karla-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  transition: all 0.2s ease-in-out !important;
}
/* --- THE BUTTON ENGINE --- */

/* The Default State (Blue) */
.salty-blue-karla-button {
  background-color: #5e657b !important;
  color: #ffffff !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  border: 1.5px solid #5e657b !important;
  border-radius: 5px !important;
  width: 100% !important;
  min-height: 44px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  letter-spacing: 0.05rem !important;
  transition: all 0.2s ease-in-out !important; /* Smooth transition */
}

/* The Hover State (White/Black) */
.salty-blue-karla-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* --- 1. DESKTOP BASE & BRANDING --- */
.salty-final-card-design {
  background-color: rgb(251, 247, 241) !important;
  width: 235px !important;
  height: 390px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* KEEPS ALIGNMENT */
  border-radius: 5px !important;
  position: relative !important;
  margin: 0 auto !important;
  padding-bottom: 15px !important;
  overflow: hidden !important;
}

/* FONT & COLOR RESTORATION */
.salty-card-title a {
  font-family: 'HighwoodRidgeSerif', Georgia, serif !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.salty-sale-badge {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  background-color: #891d1a !important;
  color: #ffffff !important;
  padding: 5px 12px !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  z-index: 10 !important;
  letter-spacing: 0.1rem !important;
}

.salty-img-container img {
  width: 190px !important;
  height: 230px !important;
  object-fit: contain !important;
  margin: 20px auto 10px !important;
  display: block !important;
}

.salty-content-bottom {
  padding: 0 15px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* BUTTON BRANDING */
.salty-blue-karla-button {
  background-color: #5e657b !important;
  color: #ffffff !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  border: 1.5px solid #5e657b !important;
  border-radius: 5px !important;
  width: 100% !important;
  min-height: 44px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  letter-spacing: 0.05rem !important;
  transition: all 0.2s ease-in-out !important;
}

.salty-blue-karla-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* --- 2. MOBILE OVERRIDES (THE MINI-ME LOOK) --- */
@media screen and (max-width: 749px) {
  ul.salty-centered-grid {
    gap: 8px !important;
    padding: 0 10px !important;
    display: flex !important;
    justify-content: center !important;
  }

  ul.salty-centered-grid .grid__item {
    width: calc(50% - 8px) !important;
    flex: 0 0 auto !important;
  }

  .salty-final-card-design {
    width: 100% !important;
    height: 310px !important; /* Height increased slightly to prevent font clipping */
    min-height: 310px !important;
  }

  .salty-img-container img {
    width: 120px !important;
    height: 155px !important;
    margin-top: 10px !important;
  }

  .salty-card-title a {
    font-size: 1.1rem !important; /* Scaled down for mobile */
  }

  .salty-blue-karla-button {
    font-size: 0.75rem !important;
    min-height: 36px !important;
  }
}

@media screen and (max-width: 749px) {
  /* 1. The Outer Container */
  ul.salty-centered-grid .grid__item {
    width: 46% !important;
    max-width: 150px !important;
    padding: 0 !important;
    margin: 0 2px !important;
  }

  /* 2. THE BOX: Locked tight at 200px */
  .salty-final-card-design {
    width: 100% !important;
    height: 205px !important; /* ULTRA SHORT */
    min-height: 205px !important;
    background-color: rgb(251, 247, 241) !important;
    position: relative !important; /* Needed for the 'Bolt' below */
    display: block !important; /* Switch from flex to block to stop floating */
    overflow: hidden !important;
    border-radius: 5px !important;
  }

  /* 3. THE IMAGE: Centered and Snug */
  .salty-img-container {
    height: 120px !important;
    padding-top: 5px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .salty-img-container img {
    height: 115px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* 4. THE BOLT: This locks the text/button to the bottom of the box */
  .salty-content-bottom {
    position: absolute !important;
    bottom: 5px !important; /* Locked 5px from the very bottom */
    left: 0 !important;
    right: 0 !important;
    padding: 0 5px !important;
    text-align: center !important;
  }

  .salty-card-title a {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
    display: block !important;
  }

  .salty-blue-karla-button {
    font-size: 0.65rem !important;
    min-height: 26px !important; /* Thinnest button possible */
    width: 100% !important;
    padding: 0 !important;
    line-height: 26px !important;
  }

  /* 5. Sale Badge: Tiny and tight */
  .salty-badge-mobile {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
    top: 5px !important;
    left: 5px !important;
  }
}

@media screen and (max-width: 749px) {
  ul.salty-centered-grid .grid__item {
    width: 155px !important; 
    flex: 0 0 155px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .salty-final-card-design {
    width: 145px !important;
    height: 215px !important; 
    background-color: rgb(251, 247, 241) !important;
    position: relative !important;
    display: flex !important; /* Changed to flex to control vertical flow */
    flex-direction: column !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }

  .salty-img-container {
    height: 140px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 5px !important;
  }

  .salty-img-container img {
    height: 130px !important; 
    width: auto !important;
    object-fit: contain !important;
  }

  /* --- SALES BADGE: Locked to corner --- */
  .salty-badge-mobile {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 8px !important; 
    font-weight: 900 !important;
    background-color: #A33A3A !important; 
    color: white !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
    z-index: 20 !important;
    border-radius: 2px !important;
  }

  /* --- THE CONTENT POCKET: Forces titles down --- */
  .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Fills the remaining space below the image */
    justify-content: space-between !important;
    padding: 0 6px 6px 6px !important;
  }

  .salty-card-title {
  margin: 0 !important;
  padding: 0 !important;
  /* Fixed gap from the image so it doesn't float up */
  margin-top: 15px !important; 
  /* Space to push the button down */
  margin-bottom: 25px !important; 
}

  .salty-card-title a {
    font-size: 11px !important; 
    font-weight: 800 !important;
    color: #000000 !important;
    text-align: center !important;
    display: block !important;
    min-height: 21px !important; 
    margin-bottom: 10px !important;

    /* --- EDIT THIS TO CHANGE LINE SPACING --- */
    line-height: 1 !important;  /* Try 0.85 for tighter, or 1.0 for more air */
    /* ---------------------------------------- */
  }

  .salty-blue-karla-button {
    font-size: 11px !important; 
    font-weight: 800 !important;
    min-height: 26px !important; 
    line-height: 26px !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- DESKTOP SALE BADGE REFINEMENT --- */
@media screen and (min-width: 750px) {
  .salty-final-card-design .salty-sale-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background-color: #A33A3A !important; 
    color: #ffffff !important;
    padding: 4px 10px !important; /* Slightly wider for desktop readability */
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    z-index: 20 !important;
    line-height: 1 !important;
    
    /* THE FIX: Refined 5px rounded edges */
    border-radius: 5px !important;
    display: inline-block !important;
    width: auto !important;
  }
}

/* =========================================================
   1. GLOBAL MOBILE TYPOGRAPHY (PROTECTING THE BANNER)
   ========================================================= */
@media screen and (max-width: 749px) {
  /* This targets headlines but EXCLUDES your homepage hero/banner */
  h1:not(.banner__heading), 
  h2:not(.banner__heading), 
  h3:not(.banner__heading),
  .h1:not(.banner__heading), 
  .h2:not(.banner__heading) {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
  }

  /* Target body text but EXCLUDES banner description text */
  p:not(.banner__text), 
  li, .accordion__content, .rte p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
  }
}

/* =========================================================
   2. THE SALE BADGE - FORCED PINNING
   ========================================================= */
/* This forces the badge to anchor to the IMAGE box, not the text above it */
.salty-img-container {
  position: relative !important;
  display: block !important;
}

.salty-sale-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  z-index: 10 !important;
  background-color: #891d1a !important;
  color: #fff !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 0 0 5px 0 !important;
  text-transform: uppercase !important;
}

/* =========================================================
   3. SHOP PAGE (STUMPTOWN STYLE PILLS)
   ========================================================= */
/* Ensures the variant dropdown is a pill on the collection page */
body.template-collection .salty-grind-select {
  border-radius: 25px !important; /* Forces the rounded pill shape */
  border: 1px solid #d1d1d1 !important;
  background-color: white !important;
  padding: 8px 15px !important;
  width: auto !important;
  min-width: 130px !important;
  text-align: left !important;
}

/* Left-aligns everything on the shop page */
body.template-collection .salty-final-card-design {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.template-collection .salty-card-title a {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* =========================================================
   4. HOMEPAGE PROTECTION (TAN BOXES)
   ========================================================= */
@media screen and (min-width: 750px) {
  body.template-index .salty-final-card-design {
    background-color: rgb(251, 247, 241) !important;
    width: 235px !important;
    height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
  }
}

/* SHARED BUTTONS */
.salty-blue-karla-button {
  background-color: #5e657b !important;
  border-radius: 5px !important;
  width: 100% !important;
}

/* TARGETED MOBILE SALES BADGE PIN */
@media screen and (max-width: 749px) {
  /* 1. Force the image container to be the anchor */
  .salty-img-container {
    position: relative !important;
    display: block !important;
  }

  /* 2. Force the badge to the absolute top-left of THAT container */
  .salty-img-container .salty-sale-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;
    
    /* Ensuring branding remains consistent */
    background-color: #891d1a !important;
    color: #ffffff !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    border-radius: 0 0 5px 0 !important;
  }
}

/* =========================================================
   MOBILE SALES BADGE: SHAPE & POSITION FIX
   ========================================================= */
@media screen and (max-width: 749px) {
  /* 1. Force the image container to be a tight anchor */
  .salty-img-container {
    position: relative !important;
    display: block !important;
    line-height: 0 !important; /* Kills extra vertical ghost space */
  }

  /* 2. Fix the "Weird Shape" by forcing tight dimensions */
  .salty-sale-badge {
    display: inline-block !important; /* Prevents vertical stretching */
    width: auto !important;          /* Only as wide as the word "Sale" */
    height: auto !important;         /* Only as tall as the word "Sale" */
    
    /* Precise Position */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;

    /* Tighten the internal box */
    padding: 4px 8px !important;     /* Horizontal rectangle shape */
    line-height: 1 !important;       /* Removes tall vertical spacing */
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 0 0 4px 0 !important; /* Only rounds the inner corner */
  }
}

/* MOBILE SALE BADGE: TIGHT SHAPE + 5PX CORNERS */
@media screen and (max-width: 749px) {
  .salty-img-container .salty-sale-badge {
    /* Fixes the shape */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    
    /* Sets the 5px corners you want */
    border-radius: 5px !important; 
    
    /* Fixes the position to the top-left of the image */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    
    /* Branding Colors */
    background-color: #891d1a !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }
  
  /* Ensures the container doesn't add ghost height */
  .salty-img-container {
    position: relative !important;
    line-height: 0 !important;
  }
}

/* =========================================================
   DESKTOP SHOP PAGE: VARIANT PILL POSITIONING
   ========================================================= */
@media screen and (min-width: 750px) {
  /* 1. Target the Shop Page card content specifically */
  .shop-version .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 180px !important; /* Forces enough height to separate elements */
    padding: 20px 15px !important;
  }

  /* 2. Push the Title to the top */
  .shop-version .salty-card-title {
    margin: 0 0 15px 0 !important;
    flex-grow: 0 !important;
  }

  /* 3. The Pill: Create clear space above and below it */
  .shop-version .salty-variant-selector {
    margin: 15px 0 !important; /* This creates the gap between title and button */
    display: block !important;
    width: 100% !important;
  }

  .shop-version .salty-grind-select {
    border-radius: 25px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 8px 12px !important;
    width: 100% !important;
    background-color: #fff !important;
  }

  /* 4. Force the Button to the very bottom */
  .shop-version .salty-button-wrapper {
    margin-top: auto !important; 
    width: 100% !important;
  }
}
/* =========================================================
   DESKTOP SHOP PAGE: MOVE PILL ABOVE BUTTON
   ========================================================= */
@media screen and (min-width: 750px) {
  /* 1. Force the content area to be taller to allow separation */
  .shop-version .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    min-height: 160px !important; /* Forces enough room for Title, Pill, and Button */
    padding: 15px !important;
    justify-content: space-between !important;
  }

  /* 2. Position the Variant Pill with its own space */
  .shop-version .salty-variant-selector {
    margin-top: 10px !important;
    margin-bottom: 20px !important; /* Creates the gap above the button */
    display: block !important;
  }

  /* 3. Ensure the pill itself has the correct shape */
  .shop-version .salty-grind-select {
    border-radius: 25px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 8px 12px !important;
    width: 100% !important;
    background-color: #ffffff !important;
  }

  /* 4. Stick the Button to the absolute bottom of the card */
  .shop-version .salty-button-wrapper {
    margin-top: auto !important;
  }
}
/* =========================================================
   DESKTOP COMPACT CARD FIX (SHOP PAGE ONLY)
   ========================================================= */
@media screen and (min-width: 750px) {
  /* 1. Tighten the overall content container */
  .shop-version .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    min-height: 140px !important; /* Slightly reduced height */
    padding: 10px 15px !important; /* Reduced top/bottom padding */
    justify-content: space-between !important;
  }

  /* 2. Minimize title margin */
  .shop-version .salty-card-title {
    margin: 0 0 5px 0 !important;
    line-height: 1.1 !important;
  }

  /* 3. Pull the variant pill closer to title and button */
  .shop-version .salty-variant-selector {
    margin: 5px 0 !important; /* Minimal vertical gap */
    line-height: 1 !important;
  }

  /* 4. Ensure the button fits perfectly at the bottom */
  .shop-version .salty-button-wrapper {
    margin-top: 5px !important;
    width: 100% !important;
  }

  /* 5. Slightly adjust the dropdown height for a tighter fit */
  .shop-version .salty-grind-select {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   ULTRA-COMPACT SHOP PAGE CARDS (DESKTOP)
   ========================================================= */
@media screen and (min-width: 750px) {
  /* 1. Reduce overall container height and padding */
  .shop-version .salty-content-bottom {
    min-height: 130px !important; /* Shaved off another 10px */
    padding: 5px 15px 10px 15px !important; /* Tightened top padding */
    gap: 2px !important; /* Forces minimal gap between all flex items */
  }

  /* 2. Tighten the Title even more */
  .shop-version .salty-card-title {
    margin: 0 !important;
    padding-bottom: 2px !important;
  }

  /* 3. Pull the Variant Container up closer to the Title */
  .shop-version .salty-variant-container {
    margin: 2px 0 5px 0 !important; /* Minimal top/bottom spacing */
  }

  /* 4. Ensure the Button wrapper doesn't have extra top margin */
  .shop-version .salty-button-wrapper {
    margin-top: 2px !important;
  }

  /* 5. Shave the Pill height slightly more */
  .shop-version .salty-grind-select {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 10px !important; /* Slightly smaller for better fit */
  }
}

/* =========================================================
   MOBILE ONLY: FIXED 12PX EVEN VERTICAL SPACING
   ========================================================= */
@media screen and (max-width: 749px) {
  /* 1. Sets the exact 12px space between all elements */
  .shop-version .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 8px !important; /* Top/bottom padding matched to internal gap */
    gap: 4px !important;          /* MANUALLY PICKED GAP FOR EVEN SPACING */
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

 /* 2. ABSOLUTE PIXEL POSITIONING FOR TITLE */
@media screen and (max-width: 749px) {
  .shop-version .salty-content-bottom {
    position: relative !important; /* Establishes the 'anchor' for the title */
    padding-top: 25px !important;  /* Creates a physical hole for the title to sit in */
  }

  .shop-version .salty-card-title {
    position: absolute !important;
    left: 8px !important;          /* Matches your card's side padding */
    top: 15px !important;           /* Fixed 5px from the top of the tan area */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    width: calc(100% - 16px) !important;
    z-index: 10 !important;
    text-align: left !important;
  }

  /* Force the link inside to inherit the pixel-perfect size */
  .shop-version .salty-card-title a {
    font-size: 8px !important;
    display: block !important;
    letter-spacing: 0rem !important;
  }
}

  /* MOBILE ONLY: ULTRA-SLIM VARIANT PILL WITH RE-ADDED ARROW */
@media screen and (max-width: 749px) {
  .shop-version .salty-variant-container {
    margin: 0 !important;
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .shop-version .salty-grind-select {
    /* 1. Slimmer width and height */
    width: 50px !important;         
    min-width: 50px !important;
    max-width: 50px !important;
    height: 15px !important; /* Matches your skinny button aesthetic */
    
    /* 2. Re-adding the dropdown arrow manually */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-color: white !important; /* Ensures the arrow is visible against the card */

    /* 3. Tightened text and borders */
    padding: 0 12px 0 4px !important;
    font-size: 7px !important; /* Shrunk from 8px for better fit */
    line-height: 1 !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    cursor: pointer;
  }
}

 /* MOBILE ONLY: ULTRA-SKINNY, 100% WIDTH BUTTON WITH ROUNDED CORNERS */
@media screen and (max-width: 749px) {
  .shop-version .salty-blue-karla-button {
    /* 1. Force the width and shape */
    width: 100% !important;
    border-radius: 3px !important;

    /* 2. Slim the height */
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 16px !important;    /* Slightly adjusted for better text clearance */
    
    /* 3. Keep content perfectly centered */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    
    /* 4. Text scaling */
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }

  /* Ensures the wrapper allows the button to stretch to the edges */
  .shop-version .salty-button-wrapper {
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }
}

/* MOBILE ONLY: COMPACT SALE BADGE */
@media screen and (max-width: 749px) {
  /* Targets the badge container */
  .shop-version .badge, 
  .shop-version .price__badge-sale,
  .shop-version .card__badge .badge {
    padding: 2px 6px !important;    /* Tightens the box around the text */
    font-size: 8px !important;       /* Matches your title and pill font size */
    min-height: auto !important;     /* Removes theme-enforced height */
    line-height: 1 !important;
    border-radius: 3px !important;   /* Slight roundness to match your aesthetic */
    top: 5px !important;             /* Adjusts distance from the top edge */
    left: 5px !important;            /* Adjusts distance from the left edge */
  }
}

/* CORRECTED FONT NAME TARGETING THE MAIN CART TITLE */
.template-cart .cart__title, 
.template-cart h1.main-page-title,
.template-cart .title--primary {
  font-family: 'HighwoodRidge', serif !important; /* Matches your @font-face name */
  text-transform: uppercase !important;
  font-weight: normal !important;
  display: block !important;
}

/* Ensure the 'Continue Shopping' link stays as Karla */
.template-cart .cart__title + a,
.template-cart .title--primary + a {
  font-family: 'Karla', sans-serif !important;
  text-transform: lowercase !important;
}
}

/* --- HIDE SCHOLARSHIP FROM ALL DEVICES --- */
/* Target by the link URL */
.grid__item:has(a[href*="scholarship-fund-donation"]),
.card-wrapper:has(a[href*="scholarship-fund-donation"]) {
  display: none !important;
}

/* Backup: Target by the specific title text if the URL check fails */
.grid__item:has(.card__heading:contains("SCHOLARSHIP")),
.grid__item:has(.full-unstyled-link:contains("SCHOLARSHIP")) {
  display: none !important;
}

/* Removes the dropdown arrow/chevron from the navigation */
.header__menu-item .icon-caret {
    display: none !important;
}

/* Adjusts padding if the arrow left a gap (theme dependent) */
.header__menu-item summary {
    padding-right: 1.5rem !important; 
}

/* --- APPAREL ONLY: FIX OVERLAP --- */
@media screen and (max-width: 749px) {
  /* Target the content pocket ONLY if it does NOT have a variant container inside it */
  .salty-content-bottom:not(:has(.salty-variant-container)) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Changed from space-between to stop the 'jump' */
    min-height: 80px !important; /* Creates the physical room the variants usually take */
    padding-top: 10px !important;
    margin-top: 5px !important;
  }

  /* Target the title ONLY inside these apparel cards */
  .salty-content-bottom:not(:has(.salty-variant-container)) .salty-card-title {
    margin-bottom: 25px !important; /* Manually pushes the button down */
  }

  /* Ensure the button stays at the bottom of the new 80px space */
  .salty-content-bottom:not(:has(.salty-variant-container)) .salty-blue-karla-button {
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 749px) {
  /* 1. Aligns the container to the left edge of the 90% button */
  .shop-version .salty-variant-container {
    width: 90% !important;
    margin: 5px auto 0px auto !important; /* This centers the box so the 90% starts at the same spot as the button */
    display: flex !important;
    justify-content: flex-start !important; /* Snaps the pill to the left side */
  }

  /* 2. Fixes the Blue Font and forces Karla */
  .shop-version .salty-grind-select {
    color: #000000 !important;             /* Forces Black text */
    font-family: 'Karla', sans-serif !important; 
    font-weight: 700 !important;
    font-size: 6px !important;
    
    /* Removes the default blue styling */
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: auto !important;
    padding: 2px 15px 2px 5px !important; /* Extra right padding for the arrow */
  }
}

@media screen and (min-width: 750px) {
  /* Only targets cards WITHOUT a variant selector */
  .salty-content-bottom:not(:has(.salty-variant-selector)) {
    min-height: 80px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .salty-content-bottom:not(:has(.salty-variant-selector)) .salty-button-wrapper {
    margin-top: 0 !important;
  }}

  /* THE NUCLEAR FIX FOR SALTY COWGIRL BUTTONS */

.product-form__submit.salty-custom-btn {
  max-width: 280px !important; 
  height: 50px !important; 
  min-height: 50px !important;
  border-radius: 8px !important; 
  background-color: #5e657b !important; 
  color: #FFFFFF !important;            
  border: 1px solid #FFFFFF !important; 
  display: flex !important;
  justify-content: center !important;
  align-items: center !important; 
  padding: 0 !important;
  overflow: hidden !important;
  transition: all 0.2s ease-in-out !important;
}

/* Vertical Centering Fix */
.salty-custom-btn .salty-btn-text {
  display: block !important;
  line-height: 1 !important;
  transform: translateY(4px) !important; /* Adjust this to 6px if still too high */
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.1rem !important;
  pointer-events: none !important;
}

/* THE HOVER - Using triple selectors to guarantee it works */
html body .product-form__submit.salty-custom-btn:hover {
  background-color: #F1E6D2 !important; 
  border-color: #000000 !important;
  cursor: pointer !important;
}

html body .product-form__submit.salty-custom-btn:hover .salty-btn-text {
  color: #000000 !important;
}

/* MOBILE FIX FOR PRODUCT CARD TITLES */
@media screen and (max-width: 749px) {
  /* Shrinks the font size and adds spacing for card titles */
  .card__heading, 
  .card-information__text,
  .full-unstyled-link {
    font-size: 1.4rem !important; /* Smaller text for mobile */
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  /* Lowers the text container to prevent overlaying too much of the image */
  .card-information {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Ensures the "Shop Now" or price buttons don't overlap text */
  .card__information > * + * {
    margin-top: 0.5rem !important;
  }
}

/* --- DESKTOP ONLY FIXES --- */
@media screen and (min-width: 750px) {
  /* 1. THE CONTAINER */
  .shop-version .salty-variant-container {
    width: 90% !important; 
    margin: 5px auto !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* 2. THE PILL - Fixing the "Cut Off" and the White Box */
  .shop-version .salty-grind-select {
    width: 40% !important;      /* Slightly wider than 50% to prevent cut-off */
    min-width: 40% !important;
    max-width: 40% !important;
    
    font-size: 10px !important;  /* Smaller font gives the words more room */
    padding: 2px 18px 2px 6px !important; /* Extra right padding (18px) for the arrow */
    
    height: 22px !important;    /* Slimmer height to look sleek */
    line-height: 1 !important;
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 23px !important;
    
    /* This kills the "White Box" glitch */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
  }
}

/* =========================================================
   FINAL DESKTOP COMMAND CENTER (OVERRIDE EVERYTHING)
   ========================================================= */
@media screen and (min-width: 750px) {
  /* 1. THE CONTENT BOX - The "Anchor" */
  .shop-version .salty-content-bottom {
    display: flex !important;
    flex-direction: column !important;
    height: 100px !important;
    min-height: 100px !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding-bottom: -20px !important; /* Creates a "protected zone" for the button */
  }

  /* 3. THE VARIANT PILL CONTAINER - ANCHORED TO BOTTOM */
  .shop-version .salty-variant-container {
    position: absolute !important;
    
    /* 1. CONTROL DISTANCE FROM BOTTOM OF CARD */
    bottom: 45px !important;
    
    /* 2. CONTROL DISTANCE FROM LEFT SIDE */
    left: 15% !important; 
    width: 90% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;      /* Removes title-based margins */
    z-index: 2 !important;
  }

  /* 3. THE ACTUAL PILL DROPDOWN */
  .shop-version .salty-grind-select {
    width: 40% !important;
    min-width: 40% !important;
    height: 22px !important;
    font-size: 11px !important;
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 22px !important;
    display: block !important;      /* Ensures the dropdown itself isn't hidden */
  }

  /* 4. THE BUTTON - Pinning it to the bottom without overlapping */
  .shop-version .salty-blue-karla-button {
    position: absolute !important;
    bottom: 10px !important;
    width: 70% !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Perfect centering */
    height: 28px !important;
    min-height: 28px !important;
  }
}

/* =========================================================
   HOMEPAGE ONLY: BANNER & FEATURED PRODUCT CARDS (DESKTOP)
   ========================================================= */
@media screen and (min-width: 750px) {

  /* 1. HOMEPAGE CARD SIZE - No extra space for variants */
  .salty-card-fixed-wrapper:not(.shop-version) .salty-final-card-design {
    height: 350px !important;      /* Tighter height because there is no pill */
    background-color: #fbf7f1 !important; /* Your signature tan color */
    border-radius: 8px !important;
  }

  /* 2. HOMEPAGE CONTENT AREA - Spacing without the pill */
  .salty-card-fixed-wrapper:not(.shop-version) .salty-content-bottom {
    height: 120px !important;      /* Shorter box since we don't need pill space */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Starts title at the top */
    padding: -20px !important;
    position: relative !important;
  }

  /* 3. HOMEPAGE TITLE - Exact Location */
  .salty-card-fixed-wrapper:not(.shop-version) .salty-card-title {
    margin-top: 0px !important;    /* Control distance from image */
    font-size: 16px !important;    /* Adjust title size here */
    text-align: center !important; 
  }

  /* 4. HOMEPAGE BUTTON - Exact Location */
  .salty-card-fixed-wrapper:not(.shop-version) .salty-blue-karla-button {
    position: absolute !important;
    bottom: 10px !important;       /* Control distance from bottom of card */
    width: 70% !important;         /* Adjust button width here */
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 35px !important;
    min-height: 35px !important;
  }

  /* 5. THE "ERASER" - Ensures pill never shows on homepage */
  .salty-card-fixed-wrapper:not(.shop-version) .salty-variant-container {
    display: none !important;
  }
}

/* =========================================================
   PRODUCT PAGE: THE "POWER" BUTTON FIX
   ========================================================= */
/* 1. Target the button via its form wrapper to ensure it wins */
.product-form .product-form__submit,
#AddToCart,
button[name="add"] {
  background-color: #5e657b !important; /* Your Signature Blue */
  color: #ffffff !important;            /* White text */
  border: none !important;              /* Kills the outline */
  border-radius: 4px !important;
  
  /* Size and Font */
  width: 100% !important;
  min-height: 45px !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  
  /* This ensures it displays as a solid block */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   THE "NO-HOVER" LOCKDOWN
   ========================================================= */

/* 1. Force the button to stay Blue, even when hovered */
.product-form__submit:hover,
.salty-blue-karla-button:hover,
button[name="add"]:hover,
.product-form .product-form__submit:hover {
  background-color: #5e657b !important; /* Keeps it your signature blue */
  color: #ffffff !important;            /* Keeps text white */
  
  /* 2. Kill any "Flash" or "Shadow" effects */
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  outline: none !important;
  cursor: default !important;           /* Optional: changes cursor back to arrow */
}

/* 3. Disable the transition timing so there is no "fade" */
.product-form__submit,
.salty-blue-karla-button {
  transition: none !important;
}

/* =========================================================
   THE FINAL NO-HOVER LOCKDOWN (DEEP CLEAN)
   ========================================================= */

/* 1. Reset the base button and all possible states */
.product-form__submit, 
.product-form__submit:hover, 
.product-form__submit:active, 
.product-form__submit:focus,
.salty-blue-karla-button,
.salty-blue-karla-button:hover {
  background: #5e657b !important; /* Your signature blue */
  background-color: #5e657b !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
}

/* 2. KILL THE "GHOST" OVERLAY (The most likely culprit) */
.product-form__submit::after, 
.product-form__submit::before,
.salty-blue-karla-button::after,
.salty-blue-karla-button::before {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

/* 3. STOP THE "FADE" ANIMATION */
* {
  --buttons-border-opacity: 1 !important;
  --buttons-shadow-opacity: 0 !important;
  --buttons-radius-outset: 0 !important;
}

/* =========================================================
   FORCE WHITE TEXT ON ALL BUTTON STATES
   ========================================================= */

/* 1. Target every possible button class and state */
.product-form__submit, 
.product-form__submit *, 
.salty-blue-karla-button, 
.salty-blue-karla-button * {
  color: #ffffff !important;           /* Force White */
  fill: #ffffff !important;            /* Force White for icons/arrows */
  -webkit-text-fill-color: #ffffff !important; 
}

/* 2. Specifically kill the Hover/Active/Focus text change */
.product-form__submit:hover, 
.product-form__submit:hover *,
.salty-blue-karla-button:hover,
.salty-blue-karla-button:hover *,
.product-form__submit:active,
.product-form__submit:focus {
  color: #ffffff !important;
  fill: #ffffff !important;
  background-color: #5e657b !important; /* Re-confirming the blue base */
}

/* =========================================================
   THE POSITIONING HAMMER (TEXT OFFSET)
   ========================================================= */

/* 1. The Button Container */
.product-form__submit, 
.salty-blue-karla-button {
  position: relative !important;
  height: 35px !important;
  min-height: 35px !important;
  overflow: hidden !important;
}

/* 2. The Text itself (and any spans/divs inside) */
.product-form__submit span, 
.product-form__submit div,
.salty-blue-karla-button span {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
  display: block !important;

  /* THE MASTER VERTICAL SLIDER */
  /* Increase this number to move text DOWN, decrease to move it UP */
  top: 50% !important;
  transform: translateY(-50%) !important; 
  
  /* Manual micro-adjustment if the math is slightly off */
  margin-top: 2px !important; 
}

/* =========================================================
   SALES BADGE: WHITE TEXT LOCKDOWN
   ========================================================= */

/* 1. Target the badge and any text/spans inside it */
.badge, 
.price__badge-sale, 
.badge--onsale,
.badge span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important; /* Removes any dark outline if it exists */
}

/* 2. Optional: Center the text in the badge if it looks high */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 1px !important; /* Micro-adjustment for vertical centering */
}

/* 1. HIDE THE SOLD OUT BADGE ONLY */
.badge.badge--sold-out, 
.badge--item-sold-out,
.price__badge-sold-out {
  display: none !important;
}

/* 2. TARGET THE REMAINING SALE BADGE TEXT & POSITION */
.badge--onsale,
.price__badge-sale {
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* ADJUST THIS NUMBER TO MOVE THE "16%" UP OR DOWN */
  padding-top: 3px !important; 
  
  height: 22px !important; /* Forces a consistent height for centering */
  line-height: 1 !important;
}

/* 3. ENSURE SPAN INSIDE IS ALSO WHITE */
.badge--onsale span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media screen and (min-width: 750px) {
  /* 1. SHRINK THE IMAGE CONTAINER */
  .product__media-wrapper {
    max-width: 32% !important; /* Change to 30% to make it even smaller */
    width: 32% !important;
    margin: 0 auto !important; /* Keeps it centered in its area */
  }

  /* 2. ADJUST THE TEXT COLUMN (Optional) */
  /* This ensures the text column expands to fill the gap left by the image */
  .product__info-wrapper {
    max-width: 55% !important;
    width: 55% !important;
  }
}

/* =========================================================
   FORCED DESKTOP SHRINK (NON-COFFEE CARDS)
   ========================================================= */
@media screen and (min-width: 750px) {

  /* 1. Kill the Grid Stretch */
  .salty-card-fixed-wrapper.not-coffee,
  .salty-card-fixed-wrapper.not-coffee .salty-final-card-design {
    height: 360px !important; 
    min-height: 360px !important;
    max-height: 360px !important;
    display: block !important; /* Forces it to stop matching the coffee bag height */
  }

  /* 2. Shrink the invisible content box */
  .not-coffee .salty-content-bottom {
    height: 80px !important;
    min-height: 80px !important;
    padding-top: 0 !important;
  }

  /* 3. Re-pin the button to the new bottom */
  .shop-version.not-coffee .salty-blue-karla-button {
    position: absolute !important;
    bottom: 5px !important;
    width: 85% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}