/** Shopify CDN: Minification failed

Line 20:29 Unexpected "/"

**/
/* ============================================================
   Marelle Footer - Cast Iron brand anchor.
   Top row = brand column + 3 menu columns. Colophon row below.

   Recipe notes:
   - Outer .marelle-footer is full-bleed: Cast Iron bg, fluid
     vertical padding (structural floor 16px). NO max-width,
     NO margin: 0 auto.
   - Inner .marelle-footer__inner caps at min(1600px, 100%),
     horizontal padding clamp(20px, 6vw, 80px).
   - Top row: grid 1.4fr 1fr 1fr 1fr. LOCKED to brand + 3 menu
     columns; the Liquid silently ignores any 4th+ menu_column
     block, and the grid is hardcoded to match.
   - CHAINED-CLASS selectors on every text element so global
     .marelle-typography h*/p/a/li rules do not outrank. This
     is the most likely failure mode for this section - every
     styled element is .marelle-footer .marelle-footer__xxx.
   - List reset (list-style/margin/padding) under chained
     selector for the column-list ul/li.
   - License: weight 400 max. Mockup h4 weight 500 dropped
     to 400 here. Body / bio / links at 300 (the licensed
     Marelle Body face).
   - Defensive em / strong reset.
   - Border-bottom on top row + colophon color use literal rgba
     values (not tokens) - these are footer-specific tunings
     for the ink-on-dark / cast-iron pairing.
   - Mobile: 4-col -> 2-col (<=989px, brand spans full width)
     -> 1-col (<=600px). Colophon stacks centered <=600px.
   ============================================================ */

/* --- Outer: full-bleed Cast Iron ----------------------------- */

/* Paint Dawn's auto-injected section wrapper so the pale color-scheme
   background does not show through. The inline --bg-color custom
   property is defined on the <footer> child and does NOT inherit
   upward to this wrapper, so this rule intentionally resolves to its
   var(--cast-iron) fallback - which IS the design intent and matches
   the merchant default. If the merchant changes background_color in
   the editor, the inner <footer> repaints correctly via the next rule
   below; the wrapper underneath stays Cast Iron, functionally invisible. */
.shopify-section.section-marelle-footer,
.shopify-section-group-marelle-footer-group {
  background: var(--bg-color, var(--cast-iron));
}

.marelle-footer {
  background: var(--bg-color, var(--cast-iron));
  color: var(--text-color, var(--ink-on-dark));
  padding-top: clamp(
    max(16px, calc(var(--padding-top, 80) * 0.6 * 1px)),
    calc(var(--padding-top, 80) * 100vw / 1280),
    calc(var(--padding-top, 80) * 1.4 * 1px)
  );
  padding-bottom: clamp(
    max(16px, calc(var(--padding-bottom, 28) * 0.6 * 1px)),
    calc(var(--padding-bottom, 28) * 100vw / 1280),
    calc(var(--padding-bottom, 28) * 1.4 * 1px)
  );
}

/* --- Inner: capped ---------------------------------------- */

.marelle-footer__inner {
  max-width: min(1600px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 80px);
}

/* --- Top row: brand + three menu columns ------------------ */

.marelle-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: calc(var(--column-gap, 48) * 1px);
  align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(245, 236, 224, 0.18);
}

/* --- Brand column ----------------------------------------- */

.marelle-footer__brand {
  min-width: 0;
}

.marelle-footer .marelle-footer__brand-mark {
  display: block;
  width: calc(var(--logo-width, 220) * 1px);
  height: auto;
  max-width: 100%;
  margin-bottom: 18px;
}

/* Chained-class beats global .marelle-typography p. */
.marelle-footer .marelle-footer__bio {
  font-family: var(--ff-body);
  font-weight: 300;
  font-style: normal;
  font-size: var(--t-body-sm);
  line-height: 1.7;
  max-width: 320px;
  color: inherit;
  opacity: 0.9;
  margin: 0;
}

/* Legacy override: fires only when Sizes > "Use custom sizes" is on. */
.marelle-footer.marelle-footer--custom-size .marelle-footer__bio {
  font-size: clamp(
    max(14px, calc(var(--bio-size, 15) * 0.6 * 1px)),
    calc(var(--bio-size, 15) * 100vw / 1280),
    calc(var(--bio-size, 15) * 1.4 * 1px)
  );
}

/* --- Menu columns ----------------------------------------- */

.marelle-footer__column {
  min-width: 0;
}

/* Chained-class beats global .marelle-typography h4. License fix:
   mockup uses font-weight 500; dropped to 400 here. */
.marelle-footer .marelle-footer__column-heading {
  font-family: var(--ff-header);
  font-weight: 400;
  font-style: normal;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--heading-color, var(--marigold));
  margin: 0 0 18px;
}

/* Legacy override: fires only when Sizes > "Use custom sizes" is on. */
.marelle-footer.marelle-footer--custom-size .marelle-footer__column-heading {
  font-size: clamp(
    max(11px, calc(var(--heading-size, 12) * 0.6 * 1px)),
    calc(var(--heading-size, 12) * 100vw / 1280),
    calc(var(--heading-size, 12) * 1.4 * 1px)
  );
}

/* List reset under chained selector. */
.marelle-footer .marelle-footer__column-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.marelle-footer .marelle-footer__column-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chained-class beats global .marelle-typography a. */
.marelle-footer .marelle-footer__link {
  display: block;
  font-family: var(--ff-body);
  font-weight: 300;
  font-style: normal;
  font-size: var(--t-body-sm);
  color: var(--text-color, var(--ink-on-dark));
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .22s ease;
}

/* Legacy override: fires only when Sizes > "Use custom sizes" is on. */
.marelle-footer.marelle-footer--custom-size .marelle-footer__link {
  font-size: clamp(
    max(14px, calc(var(--link-size, 15) * 0.6 * 1px)),
    calc(var(--link-size, 15) * 100vw / 1280),
    calc(var(--link-size, 15) * 1.4 * 1px)
  );
}

.marelle-footer .marelle-footer__link:hover,
.marelle-footer .marelle-footer__link:focus-visible {
  color: var(--link-hover-color, var(--marigold));
}

/* --- Colophon row ----------------------------------------- */

.marelle-footer__colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  font-family: var(--ff-header);
  font-weight: 400;
  font-style: normal;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 236, 224, 0.5);
}

/* Legacy override: fires only when Sizes > "Use custom sizes" is on. */
.marelle-footer.marelle-footer--custom-size .marelle-footer__colophon {
  font-size: clamp(
    max(11px, calc(var(--colophon-size, 11) * 0.6 * 1px)),
    calc(var(--colophon-size, 11) * 100vw / 1280),
    calc(var(--colophon-size, 11) * 1.4 * 1px)
  );
}

.marelle-footer__colophon-left {
  min-width: 0;
}

.marelle-footer__colophon-right {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* Chained-class beats global .marelle-typography a. */
.marelle-footer .marelle-footer__social-link {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: color .22s ease;
}

.marelle-footer .marelle-footer__social-link:hover,
.marelle-footer .marelle-footer__social-link:focus-visible {
  color: var(--link-hover-color, var(--marigold));
}

/* --- Defensive em / strong reset (license guards) --------- */

.marelle-footer em,
.marelle-footer strong {
  font-style: normal;
  font-weight: 400;
}

/* --- Responsive: structural only -------------------------- */

@media screen and (max-width: 989px) {
  .marelle-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .marelle-footer__brand {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 600px) {
  .marelle-footer__top {
    grid-template-columns: 1fr;
  }

  .marelle-footer__brand {
    grid-column: auto;
  }

  .marelle-footer__colophon {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .marelle-footer__colophon-right {
    justify-content: center;
  }
}

/* --- Mobile (<=767) per mockup: brand block + 2-col menu grid ---------
   Overrides the 600 rule above by keeping the menu columns in a 2-col
   grid (mockup pattern) while allowing the third menu column to wrap
   to a new row. Brand row stays full-width above the menus. Colophon
   stays centered stack from the 600 rule (satisfies mockup). */

@media (max-width: 767px) {
  .marelle-footer {
    padding-left: 0;
    padding-right: 0;
    padding-top: 56px;
    padding-bottom: 24px;
  }

  .marelle-footer__inner {
    padding: 0 28px;
  }

  .marelle-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding-bottom: 44px;
  }

  .marelle-footer__brand {
    grid-column: 1 / -1;
  }

  .marelle-footer .marelle-footer__brand-mark {
    width: 200px;
    margin-bottom: 18px;
  }

  .marelle-footer .marelle-footer__bio {
    max-width: 300px;
    margin-bottom: 0;
  }

  .marelle-footer .marelle-footer__column-heading {
    margin-bottom: 16px;
  }

  .marelle-footer .marelle-footer__link {
    margin-bottom: 10px;
  }

  /* Colophon: centered vertical stack per mockup, 10px gap between
     copyright line and socials row. */
  .marelle-footer__colophon {
    padding-top: 22px;
    gap: 10px;
  }
}