/** Shopify CDN: Minification failed

Line 904:1 Expected "}" to go with "{"

**/
Milan truffle header · CSS
Copy

/* =============================================================
   MILAN TRUFFLE — Luxury Header & Navigation Improvements
   Paste into: Online Store → Themes → Edit Code → assets/custom.css
   OR: Customize → Custom CSS section
   ============================================================= */
 
 
/* ─────────────────────────────────────────────────────────────
   1. HEADER HEIGHT & SPACING
   ─────────────────────────────────────────────────────────────
   The Broadcast theme uses CSS variables for header height.
   We override the inner padding to achieve ~90px total height.
   ───────────────────────────────────────────────────────────── */
 
.header {
  min-height: 90px;
}
 
.header__inner {
  padding-top: 20px;
  padding-bottom: 20px;
}
 
/* Desktop header bar — enforce 90px minimum on both upper bars */
.header__desktop__upper,
.header__desktop__lower {
  min-height: 90px;
}
 
/* Mobile header — match height */
.header__mobile {
  min-height: 90px;
  align-items: center;
}
 
/* The sticky/fixed wrapper */
.theme__header {
  min-height: 90px;
}
 
 
/* ─────────────────────────────────────────────────────────────
   2. LOGO SCALING
   ─────────────────────────────────────────────────────────────
   Broadcast stores logo width as a CSS variable per viewport.
   We push it wider for a stronger brand presence.
   ───────────────────────────────────────────────────────────── */
 
.header__logo__link {
  --logo-width: 200px;        /* mobile */
  width: var(--logo-width);
  max-width: 200px;
}
 
@media only screen and (min-width: 750px) {
  .header__logo__link {
    --logo-width: 200px;      /* tablet */
    max-width: 200px;
  }
}
 
@media only screen and (min-width: 990px) {
  .header__logo__link {
    --logo-width: 200px;      /* desktop */
    max-width: 200px;
  }
}
 
/* Text logo — larger size to match */
.header__logo__text {
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  padding: 0;
}
 
 
/* ─────────────────────────────────────────────────────────────
   3. ICON REFINEMENT — thin outline feel
   ─────────────────────────────────────────────────────────────
   Broadcast uses SVG icons with stroke-width via --ICON-STROKE-WIDTH.
   We make them thinner and slightly larger for a luxury look.
   ───────────────────────────────────────────────────────────── */
 
.theme__header .icon {
  --icon-size: 22px;
  stroke-width: 1.2;           /* thinner stroke = more refined */
}
 
/* Hamburger icon — match */
.header__mobile__hamburger .icon {
  --icon-size: 22px;
  stroke-width: 1.2;
}
 
/* Cart, search, account icon sizing */
.header__desktop__button .navlink--toplevel .icon,
.header__mobile__button .navlink--toplevel .icon,
.header__mobile__button .navlink .icon {
  --icon-size: 22px;
  stroke-width: 1.2;
}
 
/* Cart count badge — keep readable */
.navlink--cart--icon .header__cart__status {
  font-size: 9px;
  min-width: 15px;
  height: 15px;
}
 
 
/* ─────────────────────────────────────────────────────────────
   4. HAMBURGER MENU DRAWER — Luxury styling
   ─────────────────────────────────────────────────────────────
   The drawer (mobile-menu) uses .drawer--header.
   We restyle it to be full-screen, dark, with large type.
   ───────────────────────────────────────────────────────────── */
 
/* Dark full-width drawer */
.drawer--header {
  --bg: #0a0a0a;
  --text: #f5f0e8;
  --text-dark: #f5f0e8;
  --text-light: rgba(245, 240, 232, 0.5);
  --link: #f5f0e8;
  --link-hover: #c9a96e;       /* gold accent */
  --border: rgba(245, 240, 232, 0.1);
}
 
.drawer--header .drawer__inner {
  max-width: 100%;             /* full width on all screens */
  width: 100%;
  background-color: #0a0a0a;
  border: none;
  box-shadow: none;
}
 
/* Remove the thin border */
.drawer--header .drawer__inner {
  border-left: none;
  border-right: none;
}
 
/* Head / close button row */
.drawer--header .drawer__head {
  padding: 28px 32px;
  border-bottom: none;
  background: #0a0a0a;
}
 
/* Close button */
.drawer--header .drawer__close {
  --icon-size: 24px;
  color: #f5f0e8;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.drawer--header .drawer__close:hover {
  opacity: 1;
  color: #f5f0e8;
}
 
/* Scroll area */
.drawer__content__scroll {
  background: #0a0a0a;
  padding: 0 32px;
}
 
/* ── Main nav links — large luxury typography ── */
.drawer--header .sliderow__title {
  font-family: inherit;
  font-size: clamp(2rem, 5vw, 3.5rem);  /* big, responsive */
  font-weight: 300;                      /* light weight = refined */
  letter-spacing: 0.06em;
  color: #f5f0e8;
  padding: 0.35em 0;
  min-height: 0;
  border: none;
  line-height: 1.1;
  transition: color 0.25s ease;
}
 
.drawer--header .sliderow__title:hover {
  color: #c9a96e;
}
 
/* Remove the underline slide animation on hover (replace with color) */
.drawer--header .sliderow__title span:first-of-type::after {
  content: none;
}
 
/* Chevron arrow — make subtle */
.drawer--header .sliderule__chevron {
  --icon-size: 18px;
  opacity: 0.4;
}
.drawer--header .sliderow__title:hover .sliderule__chevron {
  opacity: 0.8;
}
 
/* Wrapper spacing */
.drawer--header .sliderule__wrapper {
  padding-bottom: 0.25em;
}
 
/* Remove default borders between items */
.drawer--header .sliderow {
  background: transparent;
  border: none;
  padding: 0;
}
 
/* ── Sub-menu (sliderule panel) ── */
.drawer--header .sliderule__panel {
  background: #0a0a0a;
  padding: 0 32px;
}
 
/* Sub-links — medium size */
.drawer--header .sliderule__panel .sliderow__title {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 232, 0.7);
}
 
.drawer--header .sliderule__panel .sliderow__title:hover {
  color: #c9a96e;
}
 
/* Back button */
.drawer--header .sliderow--back .sliderow__title {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
  padding-top: 24px;
  padding-bottom: 8px;
  font-weight: 400;
}
 
/* ── Bottom section (localization, social) ── */
.drawer--header .drawer__bottom {
  background: #0a0a0a;
  border: none;
  padding: 32px;
}
 
.drawer--header .drawer__bottom::before {
  background: linear-gradient(to bottom, transparent, #0a0a0a);
}
 
/* Social links in menu */
.drawer--header .social-link {
  --icons: rgba(245, 240, 232, 0.5);
  color: rgba(245, 240, 232, 0.5);
  transition: color 0.2s ease;
}
.drawer--header .social-link:hover {
  color: #c9a96e;
  --icons: #c9a96e;
}
 
/* ── Divider line decoration (optional gold accent) ── */
.drawer--header .drawer__content__scroll::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #c9a96e;
  margin: 8px 0 32px 0;
  opacity: 0.6;
}
 
/* ── Highlight / secondary links at bottom ── */
.drawer--header .sliderow__title--highlight {
  --link: #c9a96e;
  --link-hover: #e8c88a;
  color: #c9a96e;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
}
 
/* Search bar inside drawer */
.drawer--header .drawer__search input[type="search"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.2);
  color: #f5f0e8;
  font-size: 1rem;
  letter-spacing: 0.05em;
  padding: 12px 0;
  border-radius: 0;
}
.drawer--header .drawer__search input::placeholder {
  color: rgba(245, 240, 232, 0.3);
}
 
 
/* ─────────────────────────────────────────────────────────────
   5. HEADER BACKGROUND — clean white / transparent toggle
   ─────────────────────────────────────────────────────────────
   Keeps header clean over hero images when transparent,
   then transitions to white on scroll.
   ───────────────────────────────────────────────────────────── */
 
/* Solid state (after scroll) — clean white */
.header__wrapper:not([data-header-transparent]) .theme__header::after,
.meganav--visible .theme__header::after,
.js__header__stuck .theme__header::after {
  background: #ffffff;
}
 
/* Subtle bottom border when stuck */
.js__header__stuck .theme__header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
 
 
/* ─────────────────────────────────────────────────────────────
   6. BACKFILL — correct spacing below header
   ─────────────────────────────────────────────────────────────
   Prevent content hiding behind the taller header.
   ───────────────────────────────────────────────────────────── */
 
.header__backfill {
  height: 90px;
}
 
 
/* ─────────────────────────────────────────────────────────────
   7. MOBILE ADJUSTMENTS
   ─────────────────────────────────────────────────────────────
   Keep the mobile header balanced at 90px.
   ───────────────────────────────────────────────────────────── */
 
@media only screen and (max-width: 749px) {
  .header__mobile {
    min-height: 70px;           /* slightly shorter on small screens */
    padding-top: 0;
    padding-bottom: 0;
  }
 
  .header__backfill {
    height: 70px;
  }
 
  /* Full-width menu on mobile too */
  .drawer--header .drawer__inner {
    max-width: 100%;
  }
 
  .drawer__content__scroll,
  .drawer--header .sliderule__panel {
    padding: 0 24px;
  }
 
  .drawer--header .drawer__head {
    padding: 20px 24px;
  }
 
  .drawer--header .drawer__bottom {
    padding: 24px;
  }
}
 
 
/* ─────────────────────────────────────────────────────────────
   8. UNDERLAY — darker scrim when menu opens
   ─────────────────────────────────────────────────────────────
   Broadcast's .drawer__underlay / .underlay handles this.
   We make it darker to suit the black menu.
   ───────────────────────────────────────────────────────────── */
 
.drawer--header .drawer__underlay {
  background: rgba(0, 0, 0, 0.75);
}
 /* ── Reorder header: logo left, icons + hamburger right ── */
.header__mobile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-template-columns: none !important;
}

.header__logo {
  order: 1 !important;
  margin-right: auto !important;
}

.header__mobile__right {
  order: 2 !important;
  margin-left: 0 !important;
}

.header__mobile__left {
  order: 3 !important;
  margin-left: 8px !important;
}

/* Hide search from left side — it already exists on right */
.header__mobile__left .navlink--search {
  display: none !important;
}/* ─────────────────────────────────────────────────────────────
   9. TYPOGRAPHY — Luxury font stack
   ───────────────────────────────────────────────────────────── */

/* Headings — Cormorant Garamond */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* Body text — EB Garamond */
body {
  font-family: 'EB Garamond', Georgia, serif;
}

/* Logo text */
.header__logo__text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Navigation links */
.navlink,
.sliderow__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
}

/* Small caps labels */
.subheading,
.caps,
.badge-box {
  font-family: 'EB Garamond', Georgia, serif;
  letter-spacing: 0.15em;
}/* ─────────────────────────────────────────────────────────────
   10. STICKY HEADER — solid background when scrolled
   ───────────────────────────────────────────────────────────── */

.js__header__stuck .theme__header::after {
  opacity: 1 !important;
  visibility: visible !important;
  background: #ffffff !important;
}

.js__header__stuck .theme__header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

.js__header__stuck .header__logo__link {
  --logo-width: 200px;
}/* ─────────────────────────────────────────────────────────────
   11. COLUMN GAPS — tighter editorial grid
   ───────────────────────────────────────────────────────────── */

/* Remove gaps between text columns with images */
.grid--3 {
  gap: 1px;
}

/* Remove white gaps between image sections */
.section-columns .grid-item {
  padding: 0;
}/* ─────────────────────────────────────────────────────────────
   12. COLUMN TEXT SPACING — tighter image to heading gap
   ───────────────────────────────────────────────────────────── */

.section-columns .column__image {
  margin-bottom: 16px;
}

.section-columns .column__heading {
  margin-top: 0;
}/* ─────────────────────────────────────────────────────────────
   13. SCROLLING TICKER — luxury refinement
   ───────────────────────────────────────────────────────────── */

.ticker--animated,
.announcement__content {
  font-family: 'EB Garamond', Georgia, serif;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
}

.section--rich-text {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 749px) {
  .section--rich-text {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ─────────────────────────────────────────────────────────────
   FINAL BUTTON RADIUS OVERRIDE
   ───────────────────────────────────────────────────────────── */

.btn,
.btn--solid,
.btn--outline,
.btn--primary,
.btn--secondary,
.btn--white,
.btn--black,
a.btn,
button.btn,
[class*="btn--"] {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER SIGNATURE — Pinyon Script
   ───────────────────────────────────────────────────────────── */

.pre-footer .rich-text h2,
.pre-footer .rich-text h3,
.pre-footer .rich-text h4,
.pre-footer .section-rich-text h2,
.pre-footer .section-rich-text h3 {
  font-family: 'Pinyon Script', cursive !important;
  font-weight: 400 !important;
  font-size: clamp(3rem, 8vw, 6rem) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER SIGNATURE — Pinyon Script stronger override
   ───────────────────────────────────────────────────────────── */

.footer-sections h1,
.footer-sections h2,
.footer-sections h3,
.footer-sections h4,
.shopify-section-group-pre-footer h1,
.shopify-section-group-pre-footer h2,
.shopify-section-group-pre-footer h3,
.shopify-section-group-pre-footer h4 {
  font-family: 'Pinyon Script', cursive !important;
  font-weight: 400 !important;
  font-size: clamp(3.5rem, 10vw, 7rem) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

.product__content {
  max-width: 520px;
  margin-top: 60px;
}

.product__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product__wrapper {
  padding-bottom: 40px !important;
}

.product__submit .btn__text,
.product-form__submit .btn__text {
  font-size: 0 !important;
}

.product__submit .btn__text::after,
.product-form__submit .btn__text::after {
  content: "BUY NOW";
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ====== MILAN TRUFFLE — LUXURY STYLES ====== */

.product__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.product__vendor {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7a5a;
  border: 0.5px solid #c9b87a;
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 1.25rem;
}

.product__media-wrapper,
.product__media-list,
.product__media-item {
  background: #f5f2eb;
}

.btn.btn--primary,
#ProductSubmitButton {
  background: #1a1612 !important;
  color: #e8d99a !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  height: 52px;
  transition: background 0.25s ease;
}

.btn.btn--primary:hover,
#ProductSubmitButton:hover {
  background: #2c2418 !important;
  color: #e8d99a !important;
}

/* ====== TABS ====== */

.product-tabs {
  margin-top: 2.5rem;
  border-top: 0.5px solid #ddd6c8;
}

.product-tabs__nav {
  display: flex;
}

.product-tabs__btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 1.1rem 1.5rem 1.1rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a8f82;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-tabs__btn:hover {
  color: #1a1612;
}

.product-tabs__btn--active {
  color: #1a1612;
  border-bottom-color: #c9b87a;
}

.product-tabs__panel {
  display: none;
  padding: 1.75rem 0 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: #5a5248;
}

.product-tabs__panel--active {
  display: block;
}

.product-tabs__detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 0.5px solid #e8e0d5;
  gap: 2rem;
}

.product-tabs__detail-row:last-child {
  border-bottom: none;
}

.product-tabs__detail-row dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a8f82;
}

.product-tabs__detail-row dd {
  font-size: 13px;
  color: #1a1612;
  margin: 0;
  text-align: right;
}

.product-tabs__shipping-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-tabs__shipping-list li {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 0.5px solid #e8e0d5;
}

.product-tabs__shipping-list li:last-child {
  border-bottom: none;
}

.product-tabs__shipping-icon {
  width: 32px;
  height: 32px;
  border: 0.5px solid #ddd6c8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8a7a5a;
  font-size: 13px;
}

.product-tabs__shipping-list strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #1a1612;
  margin-bottom: 4px;
}

.product-tabs__shipping-list p {
  font-size: 12px;
  color: #7a7068;
  margin: 0;
}

img[fetchpriority="high"] {
  height: auto;
}

/* ===== FIX CLS FINAL (LOCK HERO + HEADER SPACE) ===== */

/* Reserve space for header */
.header {
  min-height: 80px;
}

/* Reserve hero space immediately */
.banner,
.image-banner,
.hero {
  min-height: 70vh;
}

/* Prevent text shifts */
.hero__content,
.banner__content {
  min-height: 200px;
}

/* ===== HERO / CLS / CTA CLEAN VERSION ===== */

/* Prevent AOS from shifting layout */
[data-aos="hero"] {
  opacity: 0;
  transition: opacity 0.6s ease;
}

[data-aos="hero"].aos-animate {
  opacity: 1;
}

[data-aos] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: inherit !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-aos],
  [data-aos="hero"] {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Prevent bad mobile hero height behavior */
@media (max-width: 749px) {
  .image__hero__frame {
    min-height: unset !important;
  }
}

/* Hero heading */
.banner__heading {
  letter-spacing: 0.14em;
  font-weight: 400;
  text-transform: uppercase;
}

/* Space between hero content blocks */
.banner__content > * + * {
  margin-top: 12px;
}

/* HERO CTA — SINGLE FINAL RULE */
.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white,
.index-hero .hero__button a.btn.btn--solid.btn--white {
  background: #C8A84B !important;
  color: #000000 !important;
  border: 1px solid #C8A84B !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white:hover,
.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white:focus,
.index-hero .hero__button a.btn.btn--solid.btn--white:hover,
.index-hero .hero__button a.btn.btn--solid.btn--white:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  border: 1px solid #C8A84B !important;
  box-shadow: none !important;
}

.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white span,
.index-hero .hero__button a.btn.btn--solid.btn--white span {
  color: #000000 !important;
}

.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white:hover span,
.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white:focus span,
.index-hero .hero__button a.btn.btn--solid.btn--white:hover span,
.index-hero .hero__button a.btn.btn--solid.btn--white:focus span {
  color: #000000 !important;
}

/* REMOVE BROADCAST HOVER OVERLAY */
.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white::before,
.index-hero .hero__button--floating-bottom a.btn.btn--solid.btn--white::after,
.index-hero .hero__button a.btn.btn--solid.btn--white::before,
.index-hero .hero__button a.btn.btn--solid.btn--white::after {
  display: none !important;
  content: none !important;
/* MOBILE BUG FIXES
   1. Disable double-tap zoom on logo
   2. Reveal hero image only while loading
*/

.header__logo__link,
.theme__header {
  touch-action: manipulation;
}

/* Remove JS-gated LCP image reveal — scoped only, no layout interference */
.image__hero__scale.is-loading img,
.image__fill.is-loading img,
.image__hero__scale.lazy-image.is-loading img,
.image__fill.lazy-image.is-loading img {
  opacity: 1 !important;
}.atc-sticky-bar {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.atc-sticky-bar.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}