/** Shopify CDN: Minification failed

Line 177:0 Expected "}" to go with "{"

**/
/* ========== MAAVA Minimal Mobile Toolkit (≤ 749px) ========== */

/* Quick visibility toggles you can apply in section settings (custom class) */
@media (max-width: 749px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: initial !important; }
}

/* Layout helpers */
@media (max-width: 749px) {
  :root { --m-pad: 16px; }

  .m-pad      { padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important; }
  .m-center   { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  .m-stack    > * + * { margin-top: 12px !important; }       /* tidy vertical spacing */
  .m-full     { width: 100% !important; }
}

/* Typo & buttons (safe, subtle defaults) */
@media (max-width: 749px) {
  h1, .h1 { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.15 !important; }
  h2, .h2 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.2 !important; }
  p, li   { font-size: clamp(15px, 4.2vw, 17px) !important; line-height: 1.5 !important; }

  /* Global CTA sizing (elegant & tappable) */
  .button, .btn, button, [role="button"],
  .product-form__submit, .quick-add__submit,
  .cart__checkout-button, .shopify-payment-button__button {
    font-size: 13.5px !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
  }
}
/* ==== MAAVA: Header (Craft, mobile only) ==== */
@media (max-width: 749px) {
  /* Shrink header height */
  .header,
  header.header,
  .section-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: auto !important;
  }

  /* Shrink logo */
  .header__heading-logo,
  .header__heading-link img,
  .header__heading img,
  .site-header__logo img {
    max-height: 28px !important;
    max-width: 120px !important;
    height: auto !important;
    width: auto !important;
  }

  /* If logo is SVG */
  .header__heading-link svg,
  .site-header__logo svg {
    height: 28px !important;
    width: auto !important;
  }

  /* Tighten icons row (cart/search/account) */
  .header__icons { gap: 8px !important; }

  /* Optional: reduce announcement bar padding if it makes header tall */
  .announcement-bar { padding: 2px 0 !important; font-size: 12px !important; }
}
/* ==== MAAVA: Hero CTA + text center (Craft, mobile only) ==== */
@media (max-width: 749px) {
  /* Force hero content center */
  .banner__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .banner__box {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 90% !important;
  }

  /* Center and enlarge CTA */
  .banner__buttons {
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }

  .banner .button,
  .banner .btn,
  .banner .button--primary {
    font-size: 16px !important;       /* bigger text */
    padding: 14px 28px !important;    /* more padding */
    min-height: 44px !important;      /* taller button */
    border-radius: 8px !important;    /* smoother rounded corners */
    line-height: 1.3 !important;
    min-width: 240px !important;      /* forces a wider button */
  }
}

/* ==== MAAVA: Product cards (Craft, mobile only — perfectly centered image) ==== */
@media (max-width: 749px) {
  /* Keep cards a sane width and centered */
  .card-wrapper {
    max-width: 220px !important;   /* tweak 200–240px to taste */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure the square ratio box exists and we center within it */
  .card__media .media {
    position: relative !important;
    overflow: hidden !important;
  }
  /* Keep a square ratio (Craft uses ::before for aspect ratio). Force it if needed. */
  .card__media .media::before {
    content: "" !important;
    display: block !important;
    padding-bottom: 100% !important;   /* square */
  }

  /* SHOW ONLY PRIMARY IMAGE (hide hover/secondary) */
  .card__media .media > :not(:first-child),
  .media--hover-effect > :not(:first-child) {
    display: none !important;
  }

  /* Absolutely position the primary image to fill the square,
     but CENTER it and prevent crop with contain. */
  .card__media .media > img,
  .card__media .media > .media__image {
    position: absolute !important;
    inset: 0 !important;                 /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;      /* no crop */
    object-position: 50% 50% !important; /* dead center */
    margin: 0 !important;
    opacity: 1 !important;               /* defeat lazy-load opacity */
    visibility: visible !important;
  }
/* ===== HERO VISIBILITY — default OFF for mobile banner ===== */

/* 0) GLOBAL: hide the MOBILE hero everywhere by default */
section[id^="shopify-section-template--20151803248855__image_banner_PGYV"] {
  display: none !important;
}

/* 1) GLOBAL: (optional) also hide the third banner everywhere unless you need it */
section[id^="shopify-section-template--20151803248855__image_banner_79yJY"] {
  display: none !important;
}

/* 2) PHONES (≤749px): show the MOBILE hero, hide DESKTOP */
@media (max-width: 749px) {
  /* show mobile hero only on phones */
  section[id^="shopify-section-template--20151803248855__image_banner_PGYV"] {
    display: block !important;
  }
  /* hide desktop hero on phones */
  section[id^="shopify-section-template--20151803248855__image_banner_7HTq8"] {
    display: none !important;
  }
}