/** Shopify CDN: Minification failed

Line 28:0 All "@import" rules must come first

**/
/* ============================================================
   HUDGI — Brand CSS
   assets/custom.css
   ============================================================ */

/* ── 1. BRAND TOKENS ── */
:root {
  --hud-ivory:      #FAF8F3;
  --hud-parchment:  #F2EBE0;
  --hud-ink:        #1A1410;
  --hud-ink-soft:   #3A3028;
  --hud-mid:        #7A6858;
  --hud-light:      #B0A090;
  --hud-gold:       #C8960A;
  --hud-gold-light: #E8B020;
  --hud-gold-pale:  #F5D060;
  --hud-serif:      'Cormorant', serif;
  --hud-serif-sc:   'Cormorant SC', serif;
  --hud-sans:       'Jost', sans-serif;
}

/* ── 2. GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cormorant+SC:wght@300;400&family=Jost:wght@200;300;400;500&display=swap');

/* ── 3. GLOBAL ── */
body {
  background-color: var(--hud-ivory);
  color: var(--hud-ink);
  font-family: var(--hud-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── 4. THEME CSS VARIABLES ── */
:root {
  --primary-color:           var(--hud-gold) !important;
  --color-link:              var(--hud-gold) !important;
  --color-link-hover:        var(--hud-gold-light) !important;
  --heading-color:           var(--hud-ink) !important;
  --footer-background-color: var(--hud-ink) !important;
  --footer-text-color:       var(--hud-light) !important;
  --footer-link-color:       var(--hud-light) !important;
  --footer-link-hover-color: var(--hud-gold) !important;
}

/* ── 5. ANNOUNCEMENT BAR ── */
.bls__announcement-bar,
.announcement-bar {
  background-color: var(--hud-ink) !important;
  color: var(--hud-gold-pale) !important;
}
.bls__announcement-bar a,
.bls__announcement-bar p,
.announcement-bar-content {
  color: var(--hud-gold-pale) !important;
  font-family: var(--hud-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* ── 6. HEADER ── */
.bls__header,
.header-section,
#bls__header {
  background-color: rgba(250,248,243,0.96) !important;
  border-bottom: 1px solid rgba(26,20,16,0.08) !important;
  backdrop-filter: blur(14px);
}

.bls__menu > li > a,
.bls__menu > li > a span {
  font-family: var(--hud-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--hud-mid) !important;
}
.bls__menu > li > a:hover,
.bls__menu > li:hover > a {
  color: var(--hud-gold) !important;
}

.bls__cart-count,
.h-count {
  background-color: var(--hud-gold) !important;
}

/* ── 7. HEADINGS ── */
h1, h2, h3, h4, h5, h6,
.bls__section-heading,
.heading-title {
  font-family: var(--hud-serif) !important;
  font-weight: 400;
  color: var(--hud-ink);
}
h1 { font-size: clamp(2.8rem, 5vw, 5.5rem); font-style: italic; }
h2 { font-size: clamp(2.2rem, 3.5vw, 4rem); }
h3 { font-size: clamp(1.8rem, 2.5vw, 3rem); }

/* ── 8. BUTTONS ── */
.btn,
.button,
.btn-primary,
.bls__btn-primary,
.product-form__submit {
  background-color: var(--hud-gold) !important;
  border-color: var(--hud-gold) !important;
  color: #fff !important;
  font-family: var(--hud-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.btn:hover,
.button:hover,
.btn-primary:hover,
.product-form__submit:hover {
  background-color: var(--hud-gold-light) !important;
  border-color: var(--hud-gold-light) !important;
}

/* ── 9. PRODUCT CARDS ── */
.bls__product-name,
.bls__product-name a {
  font-family: var(--hud-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--hud-ink) !important;
}
.bls__product-price,
.bls__price {
  font-family: var(--hud-sans) !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  color: var(--hud-mid) !important;
}
.price--on-sale .price__sale,
.bls__price-sale {
  color: var(--hud-gold) !important;
}

.bls__label-sale,
.bls__badge-sale {
  background-color: var(--hud-gold) !important;
  color: var(--hud-ink) !important;
}
.bls__label-hot {
  background-color: var(--hud-gold) !important;
  color: var(--hud-ink) !important;
}
.bls__label-new {
  background-color: var(--hud-ink) !important;
  color: var(--hud-ivory) !important;
}

/* ── 10. COLLECTION PAGE ── */
.bls__collection-title,
.collection-title {
  font-family: var(--hud-serif-sc) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: var(--hud-ink) !important;
}

/* ── 11. PRODUCT PAGE ── */
.bls__product-title,
.product-title h1 {
  font-family: var(--hud-serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--hud-ink) !important;
}

/* ── 12. FOOTER ── */
.bls__footer,
.footer {
  background-color: var(--hud-ink) !important;
  color: var(--hud-light) !important;
}
.bls__footer_block-title,
.footer h3 {
  font-family: var(--hud-serif-sc) !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  margin-bottom: 2rem !important;
}
.footer a,
.bls__footer a {
  color: var(--hud-light) !important;
  font-family: var(--hud-sans) !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  transition: color 0.2s;
}
.footer a:hover,
.bls__footer a:hover {
  color: var(--hud-gold) !important;
}
.bls__footer-bottom,
.footer .ft-bottom {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.25) !important;
  font-family: var(--hud-sans) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.08em !important;
  padding: 2rem 0 !important;
}

/* ── 13. INPUTS ── */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-family: var(--hud-sans) !important;
  border-color: var(--hud-light) !important;
  background-color: var(--hud-ivory) !important;
  color: var(--hud-ink) !important;
  border-radius: 0 !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--hud-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── 14. SWIPER ARROWS ── */
.swiper-button-next,
.swiper-button-prev {
  background-color: var(--hud-ivory) !important;
  color: var(--hud-ink) !important;
  border: 1px solid var(--hud-light) !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--hud-gold) !important;
  color: #fff !important;
  border-color: var(--hud-gold) !important;
}

/* ── 15. HERO SECTION ── */
#shopify-section-hero_banner_hudgi .bls__banner-content,
#shopify-section-hero_banner_hudgi .bg-muitiple {
  background: transparent !important;
  background-color: transparent !important;
}
#shopify-section-hero_banner_hudgi .bls__banner-inner {
  position: relative;
}
#shopify-section-hero_banner_hudgi .bls__banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,0.78) 0%, rgba(26,20,16,0.2) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
#shopify-section-hero_banner_hudgi .bls__banner-content {
  position: relative;
  z-index: 2;
}
#shopify-section-hero_banner_hudgi .bls__banner-subtext {
  color: var(--hud-gold) !important;
  font-family: var(--hud-sans) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.28em !important;
  font-weight: 300 !important;
}
#shopify-section-hero_banner_hudgi .bls__banner-heading,
#shopify-section-hero_banner_hudgi .bls__banner-heading a {
  color: var(--hud-ivory) !important;
  font-family: var(--hud-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 3vw, 4.2rem) !important;
  line-height: 1.08 !important;
}
#shopify-section-hero_banner_hudgi .bls__banner-btn {
  display: none !important;
}
#shopify-section-hero_banner_hudgi .bls__banner-image .row,
#shopify-section-hero_banner_hudgi .bls__banner-inner,
#shopify-section-hero_banner_hudgi .hover-effect {
  min-height: 88vh !important;
}
@media (max-width: 767px) {
  #shopify-section-hero_banner_hudgi .bls__banner-image .row,
  #shopify-section-hero_banner_hudgi .bls__banner-inner,
  #shopify-section-hero_banner_hudgi .hover-effect {
    min-height: 65vh !important;
  }
}

/* ── 16. PAGE BACKGROUND ── */
.template-index,
main#MainContent {
  background-color: var(--hud-ivory);
}

/* ── 17. NAV WORDMARK ── */
.nav-wordmark {
  font-family: var(--hud-serif-sc) !important;
  font-size: 2.4rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  color: var(--hud-ink) !important;
}
.nav-brand img {
  height: 58px !important;
  width: auto !important;
}

/* ── 18. MOBILE MENU ── */
/* Scoped to mobile/tablet only */
@media (max-width: 1024px) {

  /* Menu background */
  nav.bls__canvas-mb-menu,
  nav.bls__canvas-mb-left {
    background-color: #1A1410 !important;
    background: #1A1410 !important;
    --color-white: #1A1410 !important;
    --color-title-mobile: rgba(250,248,243,0.85) !important;
  }

  .mobile-menu-content {
    background-color: #1A1410 !important;
  }

  /* Menu items */
  .mobile-menu-content > ul > li {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  .mobile-menu-content > ul > li > a {
    color: rgba(250,248,243,0.85) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
  }

  .mobile-menu-content > ul > li > a:hover {
    color: #C8960A !important;
    background: rgba(200,150,10,0.05) !important;
  }

  /* Close button — work WITH theme's animation system.
     Theme shows it via .nav-open at top:16px right:48px.
     We just fix the font-size (theme sets 0px) and color. */
  .close-menu-mobile {
    font-size: 14px !important;
  }

  .nav-open .nav-sections .close-menu-mobile {
    font-size: 14px !important;
    transform: translateX(0) !important;
    right: 20px !important;
    top: 14px !important;
  }

  .close-menu-mobile a,
  .close-menu-mobile a.close-menu {
    color: rgba(250,248,243,0.7) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .close-menu-mobile a:hover,
  .close-menu-mobile a.close-menu:hover {
    color: #C8960A !important;
    opacity: 1 !important;
  }

}
/* END mobile menu */
