/** Shopify CDN: Minification failed

Line 26:19 Expected identifier but found whitespace
Line 26:21 Unexpected "{"
Line 26:31 Expected ":"
Line 27:8 Expected identifier but found whitespace
Line 27:10 Unexpected "{"
Line 27:20 Expected ":"
Line 28:15 Expected identifier but found whitespace
Line 28:17 Unexpected "{"
Line 28:27 Expected ":"
Line 33:8 Expected identifier but found whitespace
... and 23 more hidden warnings

**/
/* ======================================================================== */
/* == Global Button Styles System (Adapted for Your Theme) == */
/* ======================================================================== */




/* --- 2. Button Type Styles --- */

.button--primary {
  background-color: {{ settings.button_primary_bg }};
  color: {{ settings.button_primary_text }};
  border-color: {{ settings.button_primary_border }};
}

.button--secondary {
  background-color: transparent;
  color: {{ settings.button_secondary_text }};
  border-color: {{ settings.button_secondary_border }};
}

.button--tertiary {
  background-color: {{ settings.button_tertiary_bg }};
  color: {{ settings.button_tertiary_text }};
  border-color: {{ settings.button_tertiary_border }};
}


/* --- 3. Desktop Sizing Styles --- */
/* Your theme uses size classes like .button--md, so we will style those */
@media screen and (min-width: 1024px) {
  .button--md { /* Default size */
    padding: 14px {{ settings.button_padding_desktop }}px;
  }

  .button--small {
    padding: 8px calc({{ settings.button_padding_desktop }}px / 1.5);
  }

  .button--large {
    padding: 18px calc({{ settings.button_padding_desktop }}px * 1.25);
  }
}


/* --- 4. Mobile Sizing & Layout (Best Practices) --- */
@media screen and (max-width: 1023px) {
  /* Make all buttons full-width by default on mobile */
  .button {
    width: auto;
    height: auto;
    /* Enforce a minimum height for easy tapping */
    min-height: {{ settings.button_height_mobile }}px;
    padding: var(--sp-3d5) var(--sp-4);
  }
}
/* ============================================== */
/* == Promo Card Layout (for Desktop & Mobile) == */
/* ============================================== */

.promo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}

.promo-card__caption {
  padding: 12px 4px;
}

.promo-card__caption .heading {
  font-size: 1.1rem;
  color: #1A1A1A;
}

.promo-card__caption p {
  color: #555;
  margin-top: 4px;
}

/* This forces the image's container to be a perfect square */
.promo-card__image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden; /* Hides the parts of the image that are cropped */
}

/* This forces the image to fill the entire container */
.promo-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the key property! */
}