/** Shopify CDN: Minification failed

Line 570:5 Unexpected "\"--- validate ---\""

**/
/* ==========================================================================
   TKN CUSTOM LAYER — CSS (V3, Dawn 16.0.0 migration)
   ==========================================================================
   Rebuilt against the pure Dawn 16.0.0 export. Every rule below is scoped
   as tightly as its selector allows, and every `!important` is commented
   with why it's there. Nothing here duplicates Dawn core — if a feature
   can be done with a native Dawn setting instead (color scheme, badge
   position, quick_add), it was, and is noted here rather than re-solved
   with CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Card click-target fix
   Extends the title link's hit area to cover the full card, scoped to
   `.card__heading` only (not the shared `.full-unstyled-link` class, which
   is also used by footer links, blog cards, etc. site-wide).
   -------------------------------------------------------------------------- */
.card__heading .full-unstyled-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. Product card badge (top-left, red)
   This export's stock "standard style + has an image" card render has no
   badge markup at all (confirmed by reading assets/component-card.css:
   Dawn intentionally hides any `.card__badge` nested inside `.card__content`
   for standard-style cards — badges are meant to be a direct sibling of
   `.card__content` inside `.card__inner`). The badge markup added to
   snippets/card-product.liquid follows that exact placement. Positioning
   here is explicit rather than relying on the `settings.badge_position`
   class + Dawn's own flex/align-self mechanism, which this migration could
   not fully verify against this specific export — an explicit, verified
   rule is safer than an assumed one.
   Scoped with `.card__inner > .card__badge` (direct child) specifically so
   this cannot affect Dawn's other two native `.card__badge` instances
   (the no-media fallback and the "card" style variant), which are nested
   one level deeper inside `.card__content` and are left untouched.
   Color comes from the native `sale_badge_color_scheme` / theme setting
   (see config/settings_data.json) — not hardcoded here.
   -------------------------------------------------------------------------- */
.card--standard .card__inner > .card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  margin: 0;
}
.badge--bottom-left {
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  border: none;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   3. Quick size select — always-visible row (unchanged from the previous
   pass's fix: normal in-flow row between image and title, no absolute
   positioning, so nothing here can misalign against title length).
   -------------------------------------------------------------------------- */
.tkn-variant-wrapper {
  position: relative; /* so z-index below can lift these links above the full-card click layer (section 1) */
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}

.tkn-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background-color: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #e2e2e2;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a.tkn-item:hover,
a.tkn-item:focus-visible {
  background-color: #000;
  border-color: #000;
  color: #fff;
  outline-offset: 2px;
}

.tkn-item.is-sold-out {
  opacity: 0.4;
  cursor: not-allowed;
  position: relative;
}
.tkn-item.is-sold-out::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
}

/* --------------------------------------------------------------------------
   4. Product card typography + quick-add reveal (Allbirds reference)
   Allbirds uses plain sentence-case product names (not the bold uppercase
   treatment used in the previous KMM-inspired pass) with generous
   whitespace and a understated, quiet layout — this section intentionally
   does NOT force text-transform: uppercase on the title, unlike the
   previous pass. Weight/spacing only.
   Quick-add button: hidden by default and revealed on hover/focus using
   opacity + max-height (never `position: absolute` — that class of bug
   already bit this project twice). Always visible on touch, same
   reasoning as the size row.
   -------------------------------------------------------------------------- */
.card__heading {
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .quick-add {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important; /* Dawn's own inline default is `.quick-add { margin: 0 0 1rem }` (assets/quick-add.css) — the hidden state needs zero margin too, or the grid gains phantom empty space per row */
    transition: opacity 0.25s ease, max-height 0.25s ease;
  }
  .product-card-wrapper:hover .quick-add,
  .product-card-wrapper:focus-within .quick-add {
    opacity: 1;
    max-height: 6rem;
    margin: 0 0 1rem !important; /* restores Dawn's own spacing once revealed */
  }
}

/* --------------------------------------------------------------------------
   5. Announcement bar
   NOT solved with CSS: sections/header-group.json's announcement-bar
   section already has a native `color_scheme` setting in this Dawn
   version. Set it there (already set to a dark scheme) instead of forcing
   a background color here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Quick-add button styling — restyle of Dawn's native `.quick-add__submit`
   -------------------------------------------------------------------------- */
.quick-add__submit {
  background-color: #fff;
  color: #000;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 42px;
  width: 100%;
}
.quick-add__submit:hover {
  background-color: #000;
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. Product card image ratio — square, applied theme-wide via
   `.product-card-wrapper` (present on every card automatically, not a new
   class that needs adding to markup).
   -------------------------------------------------------------------------- */
.product-card-wrapper .card__media {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   8. Size guide inline link (product-variant-picker)
   Ported during the V3 batch pass — this was the one real TKN customization
   missed by the initial Dawn 16 migration (everything else had already
   been carried over). The old version used an inline `style="display:flex;
   ..."` attribute repeated 3 times in the Liquid file; moved that into a
   single class here instead, consistent with "one owner for TKN CSS."
   -------------------------------------------------------------------------- */
.tkn-label-with-size-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tkn-size-link-inline {
  font-size: 11px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
  transition: opacity 0.3s;
}
.tkn-size-link-inline:hover,
.tkn-size-link-inline:focus-visible {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   9. Transparent header
   BUG FOUND AND FIXED (from a real screenshot, not caught by JSON/Liquid
   validation): `.tkn-header--transparent` is applied directly on
   `.header-wrapper` (a compound selector is correct for that part — see
   sections/header.liquid). But `.scrolled-past-header` is added by Dawn's
   own StickyHeader script to a DIFFERENT, ANCESTOR element:
   `#shopify-section-header` (the section's own wrapper div, via
   `"class": "section-header"` in this section's own {% schema %}) — not to
   `.header-wrapper` itself. `:not(.scrolled-past-header)` as part of a
   compound selector on `.header-wrapper` was therefore checking the wrong
   element's class list and could never see it change — the transparent
   styling could never correctly revert on scroll, which is exactly why the
   header stayed white/invisible even scrolled down to the footer. Fixed
   below as a genuine ancestor-descendant selector, matching the real DOM.
   -------------------------------------------------------------------------- */
#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 10;
}

#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .header__icon,
#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .header__menu-item,
#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .header__heading-link {
  color: var(--tkn-header-transparent-text-color) !important; /* overrides Dawn's inline color custom property on these elements */
}

#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .header__icon svg {
  color: var(--tkn-header-transparent-text-color) !important;
}

#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .tkn-original-element {
  display: none;
}

#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .tkn-transparent-logo {
  display: block;
  width: var(--tkn-transparent-logo-width, 120px);
}
#shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent .tkn-transparent-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Menu drawer must never inherit the transparent header's text color. */
.header-wrapper.tkn-header--transparent .menu-drawer {
  color: rgb(var(--color-foreground));
}

.tkn-transparent-logo {
  display: none;
}

/* --------------------------------------------------------------------------
   10. Desktop menu (hover-to-open) — COMPACT DROPDOWN (Header Batch closure)
   Previously treated `.header__submenu` like a mega menu (padding 40px 80px /
   min-height 300px), which made text-only dropdowns render as a blank white
   slab. This pass replaces that treatment: dropdowns hug their trigger, the
   nested 3rd-level flyout returns to natural sizing, and top-level items get
   Maguire-style quiet idle color + native underline hover. If
   `menu_type_desktop` is ever switched to "mega", size `.mega-menu__content`
   specifically — never blanket `.header__submenu`.
   BUG FOUND AND FIXED (from a real screenshot): Dawn 16's mega-menu hides
   its content via `opacity`/`transform`, tied to the native `[open]`
   attribute on the <details> element (assets/component-mega-menu.css:
   `.js .mega-menu__content { opacity: 0 }`, only reset to opacity:1 by
   `.mega-menu[open] .mega-menu__content`) — NOT by `display`. The previous
   pass only forced `display: block` on hover, which made the panel take up
   space and show its white background, but its content stayed at
   opacity: 0 the entire time (Dawn's own condition was never satisfied) —
   exactly the blank white box you saw. Fixed by also forcing the opacity/
   transform Dawn itself would set once `[open]` is present.
   -------------------------------------------------------------------------- */
@media (min-width: 990px) {
  #shopify-section-header .header__icon--menu {
    display: none;
  }
  #shopify-section-header details:hover > summary + * {
    display: block;
    opacity: 1;
    transform: none;
  }
  /* I. Level-1 dropdown — COMPACT (replaces the mega-style slab). Scoped to the
     first-level submenu only, directly under the inline menu. */
  #shopify-section-header .header__inline-menu > ul > li > header-menu > details > .header__submenu {
    min-width: 240px;
    padding: 14px 0;
    margin-top: -12px; /* hover bridge to the trigger — unchanged from prior pass */
    background: #fff;
    border: 1px solid rgba(18, 18, 18, 0.1);
  }
  /* II. Nested 3rd-level flyout — returns to natural Dawn sizing. */
  #shopify-section-header .header__inline-menu .header__submenu .header__submenu {
    min-width: 200px;
    padding: 12px 0;
    margin-top: 0;
  }
  /* III. Child rows inside dropdowns. */
  #shopify-section-header .header__inline-menu .header__submenu .header__menu-item {
    padding: 11px 24px;
    font-size: 1.3rem;
    font-weight: 400;
    transition: background-color 0.2s ease, font-weight 0.2s ease;
  }
  #shopify-section-header .header__inline-menu .header__submenu .header__menu-item:hover,
  #shopify-section-header .header__inline-menu .header__submenu .header__menu-item:focus-visible {
    background-color: rgba(18, 18, 18, 0.05);
    font-weight: 500;
  }
  /* IV. Quiet idle state + authentic underline hover (Maguire pattern). */
  #shopify-section-header .header__inline-menu > ul > li > a.header__menu-item,
  #shopify-section-header .header__inline-menu > ul > li > header-menu > details > summary.header__menu-item {
    color: rgba(18, 18, 18, 0.75);
    transition: color 0.15s ease;
  }
  #shopify-section-header .header__inline-menu > ul > li > a.header__menu-item:hover,
  #shopify-section-header .header__inline-menu > ul > li > header-menu > details > summary.header__menu-item:hover {
    color: #121212;
  }
  #shopify-section-header .header__inline-menu .header__menu-item:not(.header__active-menu-item):hover > span {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 1px;
  }
  /* Kept from prior pass: letter-spacing across header menu items. */
  #shopify-section-header .header__menu-item {
    letter-spacing: 0.03em;
  }
}

#shopify-section-header .menu-drawer,
#shopify-section-header .menu-drawer__submenu {
  background: #fff;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   12. Header Batch closure — soft transparent transition + desktop rhythm
   Replaces the instant transparent->solid snap with a 0.35s fade. Desktop
   header vertical padding is compacted (setting stays at 20px; visual 12px)
   so the header lands around 68px. Mobile padding is untouched.
   -------------------------------------------------------------------------- */
.header-wrapper.tkn-header--transparent {
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

@media (min-width: 990px) {
  #shopify-section-header .header {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   11. Footer newsletter CTA + social row (visual restyle)
   FOLLOW-UP after user feedback: the previous pass correctly restored the
   underlying FUNCTION (social links + a working newsletter form) using
   Dawn 16's native settings — but left the visual output as plain,
   unstyled Dawn defaults, which does not match the reference look. This
   section restyles Dawn's own native markup (footer-block--newsletter,
   newsletter-form__button, footer__list-social) to match it, without
   touching any Liquid/markup — everything below targets classes Dawn
   itself already renders.
   -------------------------------------------------------------------------- */
.footer-block--newsletter {
  padding-left: 20px;
  border-left: 1px solid #e0e0e0;
}

.footer-block--newsletter .footer-block__heading {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Native form is a real email input + icon submit button (a functional
   upgrade over the old version, which was just a link to /pages/contact
   with no actual signup field) — restyled as a red pill so the visual
   language matches, while staying a genuine working form. */
/* Dawn draws the input's rounded border via the `--inputs-radius` custom
   property (assets/base.css) rather than a border on the input itself —
   overriding that custom property here (scoped to just this form) gives a
   correct pill shape natively, instead of an `overflow: hidden` clip trick
   that visually conflicted with the input's own corner rendering. */
.footer-block--newsletter .newsletter-form__field-wrapper .field {
  --inputs-radius: 50px;
}
.footer-block--newsletter .newsletter-form__button.field__button {
  background-color: #e74c3c;
  color: #fff;
}
.footer-block--newsletter .newsletter-form__button.field__button .svg-wrapper {
  color: #fff;
}

/* Social list: Dawn renders the platform name as screen-reader-only text
   by default (icon-only display). The reference shows the label visibly
   next to each icon, so it's un-hidden here rather than duplicating the
   list with new markup — `!important` is required only because it is
   overriding Dawn's own `!important` on the `.visually-hidden` utility
   class itself (assets/base.css), not fighting an arbitrary rule. */
.footer__list-social {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}
.footer__list-social .list-social__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
}
.footer__list-social .list-social__link:hover {
  color: rgb(var(--color-foreground));
}
.footer__list-social .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 1.4rem;
}

/* ==========================================================================
   13. HERO (Batch 02 — Allbirds + split-screen). Scoped to the first
   image-with-text section on the homepage (the hero). Nothing here touches
   the header/footer/cards/other banners. Content preserved; presentation only.
   ========================================================================== */
@media (min-width: 990px) {
  /* Scrim at the top of the hero IMAGE column — guarantees the transparent
     header's white logo/icons stay readable over whatever image is set.
     Editorial-standard gradient, ~120px, hero-only class. */
  main .image-with-text:first-of-type .image-with-text__media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
    z-index: 1;
    pointer-events: none;
  }
  /* The image inside the hero media column: full-bleed cover within the 50% column. */
  main .image-with-text:first-of-type .image-with-text__media img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}

/* ==========================================================================
   14. MEGA MENU + BRAND PALETTE (Batch 03 — Allbirds-style mega, cream/terracotta)
   Triggered by menu_type_desktop = "mega". Uses Dawn's native mega markup
   (details.mega-menu > .mega-menu__content > .mega-menu__list). Presentation
   only — no Liquid, no menu data changes.
   ========================================================================== */
@media (min-width: 990px) {
  /* Panel: full-width under the header, hairline top + soft shadow */
  #shopify-section-header .mega-menu__content {
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    box-shadow: 0 2.4rem 4rem rgba(18, 18, 18, 0.08);
  }

  /* Columns: keep Dawn's grid, tighten rhythm */
  #shopify-section-header .mega-menu__list {
    gap: 2.4rem 5rem;
  }

  /* Level-2 category headers: small caps, tracking, dark, semibold */
  #shopify-section-header .mega-menu__link--level-2 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #121212;
    margin-bottom: 1rem;
  }

  /* Level-3 links: quiet body style, brand accent on hover/active */
  #shopify-section-header .mega-menu__link {
    color: rgba(18, 18, 18, 0.75);
    font-size: 1.35rem;
  }
  #shopify-section-header .mega-menu__link:hover,
  #shopify-section-header .mega-menu__link--active {
    color: #e74c3c;
    text-decoration: none;
  }

  /* Top-level nav: readable quiet state + terracotta active accent */
  #shopify-section-header .header__inline-menu > ul > li > a.header__menu-item,
  #shopify-section-header .header__inline-menu > ul > li > header-menu > summary.header__menu-item {
    color: rgba(18, 18, 18, 0.85);
  }
  #shopify-section-header .header__active-menu-item {
    color: #e74c3c;
  }
}

/* ==========================================================================
   15. ANNOUNCEMENT SLIDER + COMPACT TRANSPARENT HEADER + FOOTER BRAND (Batch 04)
   Scope-locked: announcement arrows, header oval containment (no full
   image swallow), footer brand palette application. All scoped to
   #shopify-section-header / #shopify-section-announcement-bar / footer only.
   ========================================================================== */

/* --- 15a. Announcement slider arrows (inactive by default, visible on slide) --- */
#shopify-section-announcement-bar .slider-button { color: rgba(255,255,255,0.85); padding: 0 1.2rem; }
#shopify-section-announcement-bar .slider-button:hover { color: #fff; }
#shopify-section-announcement-bar .announcement-bar__message { letter-spacing: 0.04em; }

/* --- 15b. Compact transparent header (oval containment) ---
   In transparent mode the header no longer fully "swallows" the hero image:
   the content sits within page-width with a hairline border that remains
   visible, plus a subtle translucent fill so the bar reads as a distinct
   zone rather than bleeding into the image. */
@media (min-width: 990px) {
  #shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent {
    background: rgba(255, 252, 239, 0.32);     /* tinted cream @32% — visible edge */
    border-bottom: 1px solid rgba(18, 18, 18, 0.12);
  }
  #shopify-section-header .header {
    max-width: var(--page-width);
    margin: 0 auto;
  }
}

/* --- 15c. Footer brand palette polish — cream + terracotta focus --- */
.footer.color-scheme-1 {
  background-color: #fffaea;                    /* cream deep variant */
  color: #121212;
}
.footer-block__heading { letter-spacing: 0.05em; text-transform: none; }
.footer-block--newsletter .newsletter-form__button.field__button { background-color: #e74c3c; color: #fff; }
.footer-block--newsletter .newsletter-form__button.field__button:hover { background-color: #c0392b; }

/* Compact footnotes row (payment icons + policy alignment) */
.footer__localization, .footer__payment { padding-top: 1.6rem; }
PY
echo "--- validate ---"
python3 <<'PY'
import json, re, os
from zipfile import ZipFile

# JSON integrity
hg = json.load(open('tkn_src_header/sections/header-group.json'))
ann = hg['sections']['announcement-bar']
assert len(ann['blocks']) >= 2 and 'announcement-bar-3' in ann['blocks'], "announcement sliders not expanded"
assert ann['settings']['auto_rotate'] is True
assert hg['sections']['header']['settings']['menu_type_desktop'] == 'mega'
ix = json.load(open('tkn_src_header/templates/index.json'))
assert ix['order'] == ['image-with-text','featured_collection']
sd = json.load(open('tkn_src_header/config/settings_data.json'))
assert sd['current']['color_schemes']['scheme-1']['settings']['background'] == '#fffcef'
assert sd['current']['color_schemes']['scheme-1']['settings']['button'] == '#e74c3c'
print("PASS  header-group: slider mega-active | index order ok | brand palette intact")

# CSS
css = open('tkn_src_header/assets/tkn-custom.css').read()
nc = re.sub(r'/\*.*?\*/','',css,flags=re.S)
nc = re.sub(r'"[^"]*"','',nc)
assert nc.count('{') == nc.count('}'), "braces mismatch"
assert css.count('!important') == 13
for tok in ['#shopify-section-announcement-bar','rgba(255, 252, 239, 0.32)','Footer.brand_palette','#fffaea','#e74c3c']:
    assert tok.replace('.brand_palette','') in css
print("PASS  CSS: braces balanced | !important unchanged | batch04 tokens present")

# Build ZIP in /home/user/workspace
zipname = '/home/user/workspace/TKN-Dawn-V3.7-Header-Hero-Slider-Footer.zip'
os.chdir('/home/user/uploaded_files')
if os.path.exists(zipname): os.remove(zipname)
import subprocess
subprocess.run(['zip','-r','-q',zipname,'tkn_src_header/'], check=True)
bsize = os.path.getsize(zipname)
print(f"ZIP: {zipname} ({bsize:,} bytes)")

# Verify
z = ZipFile(zipname)
hg_z = json.loads(z.read('tkn_src_header/sections/header-group.json').decode())
ann_z = hg_z['sections']['announcement-bar']
n_blocks = len(ann_z['blocks'])
print(f"  announcement_blocks_in_zip: {n_blocks} | auto_rotate_in_zip: {ann_z['settings']['auto_rotate']}")
print(f"  logos_in_zip: {sum(1 for n in z.namelist() if 'tkn-logos' in n)} files")
PY

/* ==========================================================================
   15. ANNOUNCEMENT SLIDER + COMPACT TRANSPARENT HEADER + FOOTER BRAND (Batch 04)
   ========================================================================== */
#shopify-section-announcement-bar .slider-button { color: rgba(255,255,255,0.85); padding: 0 1.2rem; }
#shopify-section-announcement-bar .slider-button:hover { color: #fff; }
#shopify-section-announcement-bar .announcement-bar__message { letter-spacing: 0.04em; }
@media (min-width: 990px) {
  #shopify-section-header:not(.scrolled-past-header) .header-wrapper.tkn-header--transparent {
    background: rgba(255,252,239,0.32);
    border-bottom: 1px solid rgba(18,18,18,0.12);
  }
  #shopify-section-header .header { max-width: var(--page-width); margin: 0 auto; }
}
.footer.color-scheme-1 { background-color: #fffaea; color: #121212; }
.footer-block__heading { letter-spacing: 0.05em; }
.footer-block--newsletter .newsletter-form__button.field__button { background-color: #e74c3c; color: #fff; }
.footer-block--newsletter .newsletter-form__button.field__button:hover { background-color: #c0392b; }
.footer__localization, .footer__payment { padding-top: 1.6rem; }