/** Shopify CDN: Minification failed

Line 62:0 Unexpected "}"
Line 72:0 Unexpected "}"

**/
/* ============================================================
   Diata footer refinement
   Loaded sitewide from layout/theme.liquid. Restyles the theme's
   existing footer markup -- no Liquid was replaced, so removing the
   stylesheet_tag line restores the original look exactly.

   Palette from Brand Guidelines v8:
     navy        #20307F  (pancakes)
     deep navy   #141C48  (footer ground, matches the wave)
     light blue  #ABC9E5  (cold beverages)
     cerulean    #0047BA  (protein bars)
   ============================================================ */

#SiteFooter,
.shopify-section-group-footer-group .footer,
[id$="__footer"] {
  --dtf-ink: #FFFFFF;
  --dtf-soft: #A9B4D8;
  --dtf-line: rgba(169, 201, 229, 0.22);
  --dtf-accent: #ABC9E5;
}

/* ── layout: real breathing room, wider measure ───────────────── */
/* The logo is the ghosted wordmark in the background, not a column --
   that is what the approved mockup does. Hiding the logo block leaves
   four real columns that fit one row and stops the vertical sprawl
   (footer was 907px tall). */
[id$="__footer"] .footer-block--logo { display: none !important; }

[id$="__footer"] .footer-blocks {
  display: grid;
  /* Subscribe leads, so it takes the widest column */
  grid-template-columns: 1.25fr 1fr 0.8fr 0.8fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  [id$="__footer"] .footer-blocks { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
  [id$="__footer"] .footer-block--newsletter { grid-column: span 2; }
}
/* The theme turns the footer columns into accordions at exactly 767px.
   Above that they are plain columns. Matching that breakpoint and going
   to a single column keeps the toggles in one clean vertical list --
   previously the accordions were active while the grid was still
   two-up, which is why the plus signs landed in odd places. */
@media (max-width: 767px) {
  [id$="__footer"] .footer-blocks { grid-template-columns: 1fr; gap: 4px; }
  [id$="__footer"] .footer-block--newsletter { grid-column: span 1; margin-bottom: 20px; }
  [id$="__footer"] .footer-block--text { margin-bottom: 12px; }
  [id$="__footer"] .footer-title,
  [id$="__footer"] .footer-title__button { margin-bottom: 0 !important; }
  [id$="__footer"] .footer-block--menu { padding: 2px 0; }
  [id$="__footer"] .footer-links { padding-top: 10px; }
  [id$="__footer"] .footer-links > li { margin-bottom: 10px; }
}
}
/* keep the whole thing compact */
/* The wave (span.wave-svg) is the first child of footer.site-footer, so any
   top padding on that element pushes the curve down and leaves a navy strip
   above it. Padding belongs on the column grid instead, not the footer box. */
[id$="__footer"] { padding-top: 0 !important; padding-bottom: 0 !important; }
footer.site-footer { padding-top: 0 !important; }
[id$="__footer"] .footer-blocks { padding-top: 72px; }
@media (max-width: 767px) { [id$="__footer"] .footer-blocks { padding-top: 48px; } }

}

/* ── column headings: quieter, letter-spaced, not shouty serif ── */
[id$="__footer"] .footer-title,
[id$="__footer"] .footer-title h5,
[id$="__footer"] .footer-title__button h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--dtf-accent) !important;
  margin: 0 0 20px !important;
  line-height: 1.4 !important;
}

/* ── links: softer default, clear hover, generous rhythm ──────── */
/* Do NOT set display here. The theme collapses these panels by changing
   display, and forcing grid defeated the accordion -- panels stayed open
   at every width, which is what produced the tall gaps and the far-apart
   plus signs. Spacing via margin instead, which is collapse-safe. */
[id$="__footer"] .footer-links > li { margin-bottom: 13px; }
[id$="__footer"] .footer-links > li:last-child { margin-bottom: 0; }
[id$="__footer"] .footer-link,
[id$="__footer"] .footer-links a {
  font-size: 15.5px;
  color: var(--dtf-soft);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}
[id$="__footer"] .footer-link:hover,
[id$="__footer"] .footer-links a:hover {
  color: var(--dtf-ink);
  transform: translateX(2px);
}

/* ── customer care text block ─────────────────────────────────── */
[id$="__footer"] .footer-block--text p { font-size: 15.5px; color: var(--dtf-soft); line-height: 1.7; }
[id$="__footer"] .footer-block--text a { color: var(--dtf-ink); text-decoration: none;
  border-bottom: 1px solid var(--dtf-line); padding-bottom: 1px; }
[id$="__footer"] .footer-block--text a:hover { border-bottom-color: var(--dtf-accent); }

/* ── logo: smaller, calmer ────────────────────────────────────── */
[id$="__footer"] .footer-block__logo-image,
[id$="__footer"] .footer-block__logo-full-image { max-width: 132px !important; opacity: 0.96; }

/* ── newsletter: a real pill, not a boxy input ────────────────── */
[id$="__footer"] .footer-block--newsletter input[type="email"] {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--dtf-line) !important;
  border-radius: 999px !important;
  color: var(--dtf-ink) !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
}
/* was #7F8AB4 = 3.96:1 against the field, below the 4.5:1 minimum */
[id$="__footer"] .footer-block--newsletter input[type="email"]::placeholder { color: #A8B2D6; }
/* field outline was 1.66:1 -- lift it to a visible edge */
[id$="__footer"] .footer-block--newsletter input[type="email"] {
  border-color: rgba(171, 201, 229, 0.42) !important; }
[id$="__footer"] .footer-block--newsletter input[type="email"]:focus {
  border-color: var(--dtf-accent) !important;
  box-shadow: 0 0 0 3px rgba(171, 201, 229, 0.16) !important;
  outline: none !important;
}
[id$="__footer"] .footer-block--newsletter button,
[id$="__footer"] .footer-block--newsletter [type="submit"] {
  border-radius: 999px !important;
  background: var(--dtf-accent) !important;
  color: #12183A !important;
  border: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
}
[id$="__footer"] .footer-block--newsletter button:hover { background: #FFFFFF !important; }

/* ── social: even circles, no heavy fills ─────────────────────── */
[id$="__footer"] .footer-block--newsletter ul li a,
[id$="__footer"] .social-icons a,
[id$="__footer"] a[class*="social"] {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--dtf-line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}
[id$="__footer"] .footer-block--newsletter ul li a:hover,
[id$="__footer"] .social-icons a:hover { background: var(--dtf-accent); border-color: var(--dtf-accent); }
[id$="__footer"] .social-icons svg, [id$="__footer"] a[class*="social"] svg { width: 16px; height: 16px; }

/* ── bottom bar: hairline, quiet, centred ─────────────────────── */
[id$="__footer"] .footer-bottom__content {
  border-top: 1px solid var(--dtf-line);
  margin-top: 56px;
  padding-top: 22px;
  font-size: 13px;
  color: #7F8AB4;
}
[id$="__footer"] .footer-bottom__content a { color: #7F8AB4; text-decoration: none; }
[id$="__footer"] .footer-bottom__content a:hover { color: var(--dtf-ink); }

/* ── the wave should meet the ground exactly ──────────────────── */
[id$="__footer"] svg path[fill] { transition: none; }


/* ============================================================
   Ghost wordmark behind the footer columns.

   It must live on footer.site-footer -- that element paints the navy
   at z-index 12, so a pseudo-element on the outer section wrapper was
   buried underneath it and never visible.
   ============================================================ */
/* No overflow:hidden here -- the theme's wave (span.wave-svg) sits at the
   footer's top edge and clipping the box interfered with it. The ghost
   wordmark is instead sized and positioned to stay inside on its own. */
footer.site-footer{position:relative;}
footer.site-footer::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(76%,900px);
  aspect-ratio:814 / 401;
  background:url("dt-diata-script-white.png") center/contain no-repeat;
  opacity:.10;
  pointer-events:none;
  z-index:0;
}
@media (max-width: 760px){
  footer.site-footer::before{width:min(92%,520px);bottom:0;opacity:.085;}
}
/* content sits above the wordmark */
footer.site-footer > *,
[id$="__footer"] .footer-blocks,
[id$="__footer"] .footer-bottom__content{position:relative;z-index:1;}
/* the old, buried rule is disabled */
[id$="__footer"]::before{content:none !important;}

/* ============================================================
   Every column heading identical. The link-block titles were still
   rendering in the theme serif because their h5 carried its own
   font-family, so target the h5 itself.
   ============================================================ */
[id$="__footer"] h5,
[id$="__footer"] .footer-title,
[id$="__footer"] .footer-title h5,
[id$="__footer"] .footer-title--links,
[id$="__footer"] .footer-title__button,
[id$="__footer"] .footer-title__button h5,
[id$="__footer"] .footer-block__shop-name h4{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  color:#ABC9E5 !important;
  margin:0 0 20px !important;
  line-height:1.4 !important;
}


/* ── collapsed accordions must take no space ─────────────────────────
   BREAKPOINT MUST BE 767px, NOT 900px. The theme only shows the +/-
   toggle at max-width:767px. A 900px collapse rule hid the links from
   768-900px with no control to reopen them -- every footer menu link
   was unreachable at iPad-portrait and small-laptop widths. */
@media (max-width: 767px) {
  [id$="__footer"] .footer-title__button[aria-expanded="false"] ~ .footer-links__wrapper,
  [id$="__footer"] .footer-title:has(.footer-title__button[aria-expanded="false"]) ~ .footer-links__wrapper {
    display: none !important;
  }
  [id$="__footer"] .footer-title,
  [id$="__footer"] .footer-title__button { margin-bottom: 0 !important; }
  [id$="__footer"] .footer-block--menu { padding-bottom: 0; }
}


/* ── touch targets on mobile ─────────────────────────────────────────
   Collapsed rows measured 31.4px apart with a 25.4px button -- visually
   tight, as asked, but under the 44px minimum for a finger. Grow the
   button's hit area rather than the gap, so the list still reads tight
   while each toggle is comfortably tappable. */
@media (max-width: 767px) {
  [id$="__footer"] .footer-title__button {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}