/** Shopify CDN: Minification failed

Line 45:3 Unexpected "<"

**/
/* ===== GENERAL SANS SEMIBOLD FONT ===== */
@font-face {
  font-family: 'GeneralSans';
  src: url('/cdn/shop/files/GeneralSans-Semibold.ttf?v=1780663647') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeneralSans';
  src: url('/cdn/shop/files/GeneralSans-Bold.ttf?v=1780663647') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   GOORIN-STYLE FOOTER — Debutify 8.15
   File: assets/hatstore-footer.css
   
   Upload to Assets, then add to dbtfy-footer.liquid top:

/* ===== GENERAL SANS REGULAR FONT ===== */
@font-face {
  font-family: 'GeneralSansRegular';
  src: url('/cdn/shop/files/GeneralSans-Regular.ttf?v=1780663647') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== APPLY TO ALL FOOTER TEXT — bold ===== */
.dbtfy-footer,
.dbtfy-footer *,
.dbtfy-footer-block,
.dbtfy-footer-block * {
  font-family: 'GeneralSansRegular', sans-serif !important;
  font-weight: 700 !important;
}
   <link rel="stylesheet" href="{{ 'hatstore-footer.css' | asset_url }}">
   ============================================================ */

/* ----------------------------------------------------------
   1. FOOTER BACKGROUND — dark navy (matching reference)
   ---------------------------------------------------------- */
.dbtfy-footer,
.dbtfy-footer.gradient,
body .dbtfy-footer,
#shopify-section-footer .dbtfy-footer,
[id*="footer"] .dbtfy-footer,
.footer-section .dbtfy-footer,
section.dbtfy-footer {
  background-color: #0A1A10 !important;
  background: #0A1A10 !important;
  background-attachment: unset !important;
  --gradient-background: #0A1A10 !important;
  --color-background: 10, 26, 16 !important;
}

/* ----------------------------------------------------------
   2. HIDE LOCALIZATION (language + country selectors)
   ---------------------------------------------------------- */
.dbtfy-footer-block__localization-form,
.dbtfy-footer localization-form,
.dbtfy-footer .localization-form,
#FooterCountryForm,
#FooterLanguageForm {
  display: none !important;
}

/* Make payment/copyright row full width when localization is hidden */
.dbtfy-footer-block__payment-business-registration {
  grid-column: span 12 !important;
  justify-self: center !important;
  text-align: center !important;
}

/* ----------------------------------------------------------
   3. HIDE NEWSLETTER BLOCK
      Newsletter block renders as .dbtfy-block__newsletter
      inside a footer block column
   ---------------------------------------------------------- */
.dbtfy-block__newsletter,
.dbtfy-footer .newsletter-form,
.dbtfy-footer .dbtfy-block__newsletter {
  display: none !important;
}

/* ----------------------------------------------------------
   4. SOCIAL ICONS — larger, white, prominent
      Replaces newsletter in right column
   ---------------------------------------------------------- */

/* Footer social section */
.dbtfy-footer-block__social-media {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Social heading */
.dbtfy-footer-block__social-media .dbtfy-block__subheading {
  color: #F0FAF2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: block !important;
}

/* Social icons list */
.dbtfy-footer-block__social-media .list-social,
.dbtfy-block___social-media .list-social {
  justify-content: flex-start !important;
  gap: 4px !important;
}

/* Each social icon link — CAP SHAPE (footer only) */
.dbtfy-footer .list-social__link,
.dbtfy-footer-block__social-media .list-social__link,
.dbtfy-block___social-media .list-social__link {
  color: #FFD600 !important;
  background: #009A48 !important;
  border-radius: 0 !important;
  width: 60px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.15s ease !important;
  clip-path: path('M 8 50 L 0 50 L 0 34 Q 0 8 30 4 Q 60 8 60 34 L 60 50 L 14 50 Q 10 50 8 46 Q 4 42 0 44') !important;
}

.dbtfy-footer .list-social__link:hover,
.dbtfy-footer-block__social-media .list-social__link:hover,
.dbtfy-block___social-media .list-social__link:hover {
  background: #007a38 !important;
}

/* Icon size inside — yellow */
.dbtfy-footer .list-social__link .icon,
.dbtfy-footer .list-social__link svg,
.dbtfy-footer-block__social-media .icon {
  width: 1.4rem !important;
  height: 1.4rem !important;
  fill: #FFD600 !important;
  color: #FFD600 !important;
}

.dbtfy-footer .list-social__link svg path,
.dbtfy-footer .list-social__link svg rect,
.dbtfy-footer .list-social__link svg circle {
  fill: #FFD600 !important;
  stroke: none !important;
}

/* ----------------------------------------------------------
   5. FOOTER COLUMN HEADINGS — uppercase, white
   ---------------------------------------------------------- */
.dbtfy-footer .dbtfy-block__heading,
.dbtfy-footer .footer-block__heading,
.dbtfy-footer .footer-block__heading h4,
.dbtfy-footer .dbtfy-footer-heading,
.dbtfy-footer .dbtfy-footer-heading .dbtfy-block__subheading,
.dbtfy-footer .dbtfy-block__subheading,
.dbtfy-footer .title.inline-richtext,
.dbtfy-footer .title.inline-richtext span,
.dbtfy-footer h2.title,
.dbtfy-footer h3.title,
.dbtfy-footer h4.title,
.dbtfy-footer h2.title span,
.dbtfy-footer h3.title span,
.dbtfy-footer h4.title span,
.dbtfy-footer summary,
.dbtfy-footer details > summary {
  color: #F0FAF2 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  font-family: 'GeneralSans', var(--font-heading-family), sans-serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ----------------------------------------------------------
   6. FOOTER LINKS — muted white, uppercase
   ---------------------------------------------------------- */
.dbtfy-footer a,
.dbtfy-footer .list-menu__item--link {
  color: #F0FAF2 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.dbtfy-footer a:hover {
  color: #F0FAF2 !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------------
   7. COPYRIGHT BAR — subtle, muted text
   ---------------------------------------------------------- */
.dbtfy-footer-copyright__content,
.dbtfy-footer-copyright__content a {
  color: rgba(240,250,242,0.6) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ----------------------------------------------------------
   8. FOOTER BORDER / DIVIDERS
   ---------------------------------------------------------- */
.dbtfy-footer-block__copyright-social-wrapper {
  border-top: 1px solid #1E3A24 !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}

/* ----------------------------------------------------------
   9. MOBILE: accordion carets — white
   ---------------------------------------------------------- */
.dbtfy-footer summary .icon-caret path {
  fill: #FFD600 !important;
}

.dbtfy-footer summary {
  color: #F0FAF2 !important;
}

/* ----------------------------------------------------------
   REMOVE POWERED BY DEBUTIFY (CSS fallback)
   ---------------------------------------------------------- */
.footer__branding {
  display: none !important;
}

/* Remove gap between footer heading and menu links */
.dbtfy-footer .dbtfy-footer-block > div,
.dbtfy-footer .dbtfy-footer-block .title.inline-richtext {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}
.dbtfy-footer .dbtfy-footer-block .list-menu {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.dbtfy-footer .block-padding,
.dbtfy-footer [class*="block-"][class*="-padding"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ----------------------------------------------------------
   FOOTER LOGO
   ---------------------------------------------------------- */
.hatstore-footer-logo {
  margin-bottom: 32px;
}

.hatstore-footer-logo__img {
  height: auto;
  display: block;
  /* Invert if logo is dark on dark background */
  filter: brightness(0) invert(1);
}

.hatstore-footer-logo__text {
  color: #F0FAF2 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: block;
  margin-bottom: 32px;
}

/* ----------------------------------------------------------
   MOBILE FOOTER — centered text + accordion
   ---------------------------------------------------------- */
@media screen and (max-width: 749px) {

  /* Center all footer text on mobile */
  .dbtfy-footer .dbtfy-footer-copyright,
  .dbtfy-footer-copyright__content,
  .dbtfy-footer-block__copyright,
  .dbtfy-footer-block__copyright-social-wrapper,
  .dbtfy-footer-block__policies,
  .dbtfy-footer-copyright__content a {
    text-align: center !important;
    justify-content: center !important;
  }

  .dbtfy-footer-block__policies {
    justify-content: center !important;
  }

  /* Center social icons on mobile */
  .dbtfy-footer-block__social-media {
    justify-content: center !important;
    align-items: center !important;
  }

  .dbtfy-footer-block__social-media .list-social {
    justify-content: center !important;
  }

  /* Footer logo centered on mobile */
  .hatstore-footer-logo {
    text-align: center;
  }

  .hatstore-footer-logo__img {
    margin: 0 auto;
  }

  /* Mobile footer — always show links expanded, no accordion */

  /* Force all details elements open */
  .dbtfy-footer details {
    open: true;
  }

  /* Hide the caret/arrow — no collapse behaviour */
  .dbtfy-footer .dbtfy-footer-block summary .icon-caret,
  .dbtfy-footer summary .icon-caret {
    display: none !important;
  }

  /* Always show the hidden content inside details */
  .dbtfy-footer details > *:not(summary) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Summary heading row — no pointer, no border */
  .dbtfy-footer .dbtfy-footer-block summary,
  .dbtfy-footer summary.dbtfy-block__heading {
    pointer-events: none !important;
    cursor: default !important;
    padding-bottom: 8px !important;
    border-bottom: none !important;
    list-style: none !important;
  }

  /* Column headings */
  .dbtfy-footer .dbtfy-block__heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #F0FAF2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Links */
  .dbtfy-footer .list-menu__item--link,
  .dbtfy-footer a:not(.list-social__link):not(.hatstore-footer-logo__text) {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(240,250,242,0.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 5px 0 !important;
    display: block !important;
  }

  .dbtfy-footer a:not(.list-social__link):hover {
    color: #F0FAF2 !important;
  }

  /* Two-column grid for footer blocks on mobile */
  .dbtfy-footer .d-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 16px !important;
  }
}

/* ----------------------------------------------------------
   BIG FULL-WIDTH BRAND NAME AT FOOTER BOTTOM
   Matches Goorin Bros style — giant clipped text
   ---------------------------------------------------------- */
.hatstore-footer-bigname {
  width: 100%;
  overflow: hidden;
  /* Clip so only top ~60% of letters show, text bleeds off bottom */
  max-height: 0.6em;
  line-height: 1;
  margin-top: 32px;
  user-select: none;
  pointer-events: none;
  /* Break out of page-width padding to go full bleed */
  margin-left: calc(-1 * var(--page-width-margin, 0px));
  margin-right: calc(-1 * var(--page-width-margin, 0px));
}

.hatstore-footer-bigname__text {
  display: block;
  /* Scale to exactly fill viewport width */
  font-size: clamp(100px, 20vw, 300px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  /* Beige/cream tone like Goorin — not white */
  color: #1A3020;
  white-space: nowrap;
  line-height: 1;
  padding: 0;
  font-family: var(--font-heading-family, sans-serif);
  /* Start from left edge */
  text-align: left;
}

/* Image variant */
.hatstore-footer-bigname--image {
  max-height: none;
  display: flex;
  align-items: flex-end;
}

.hatstore-footer-bigname__img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.3;
  object-fit: cover;
  object-position: top;
}

/* Footer overflow visible so bigname can bleed */
.dbtfy-footer {
  overflow: hidden !important;
}

.dbtfy-footer > div {
  overflow: hidden !important;
}

/* Page-width inside footer needs no overflow clip */
.dbtfy-footer .page-width {
  overflow: visible !important;
}

@media screen and (max-width: 749px) {
  .hatstore-footer-bigname__text {
    font-size: clamp(72px, 23vw, 160px);
  }
}