/* Clatter: mustard, charcoal and cream. Loud, flat and confident.
   Brock's rule stays: one colour means "buy". Here that colour is charcoal with mustard type, so the order
   buttons are the heaviest thing on any page; mustard is the highlight (hero, logo, eyebrows, focus). */
:root {
  --clatter-mustard: #FFC41F;
  --clatter-ink: #161412;
  --clatter-cream: #FFF6E0;

  --color-primary: #161412;
  --color-primary-dark: #000000;
  --color-primary-light: #FFC41F;
  --color-primary-50: #FFF6E0;
  --color-primary-ring: rgba(255, 196, 31, 0.55);
  --color-primary-tint: rgba(255, 196, 31, 0.16);
  --b-on-buy: #FFC41F;
  --color-text-strong: #161412;

  --radius-md: 8px;
  --radius-lg: 12px;
  --product-image-ratio: 1 / 1;
}

/* Type: heavy, uppercase headlines on the page body (not the header menus or product names) */
main :is(h1, h2), .nova-hero :is(h1, h2) { text-transform: uppercase; font-weight: 900; letter-spacing: -0.015em; line-height: 1.02; }
main h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); text-align: left; }
/* the longest page title (RESTAURANTS) is 14px wider than a 375px phone's column at the theme's 48px: keep it inside */
@media (max-width: 420px) { main h1 { font-size: 2.6rem; } }

/* Buttons: heavy and uppercase, flat charcoal with mustard type */
.nova-btn, .nova-button { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.nova-btn-primary, .nova-button--buy { background: var(--clatter-ink); color: var(--clatter-mustard); border-color: var(--clatter-ink); }
.nova-btn-primary:hover, .nova-button--buy:hover { background: #000; color: var(--clatter-mustard); border-color: #000; }
.nova-button--outline, .nova-btn-outline { border: 2px solid var(--clatter-ink); color: var(--clatter-ink); background: transparent; }
.nova-button--outline:hover, .nova-btn-outline:hover { background: var(--clatter-ink); color: var(--clatter-mustard); }

/* Hero: the mustard half carries charcoal type at poster size */
.nova-hero--split { min-height: min(78vh, 720px) !important; }
.nova-hero--split h1 { font-size: clamp(2.75rem, 6.2vw, 5.5rem) !important; line-height: 0.95 !important; }
.nova-hero--split .nova-hero__eyebrow p { color: var(--clatter-ink) !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem !important; }
.nova-hero--split .nova-hero__subtitle p { color: var(--clatter-ink) !important; }
.nova-hero--tinted .nova-btn-secondary { background: transparent; border: 2px solid var(--clatter-ink); color: var(--clatter-ink); }
.nova-hero--tinted .nova-btn-secondary:hover { background: var(--clatter-ink); color: var(--clatter-mustard); }

/* Dark hero images (beers, careers, locations): the same poster type */
.nova-hero:not(.nova-hero--split) h1 { font-size: clamp(2.5rem, 6vw, 4.75rem) !important; line-height: 0.98 !important; }

/* Product names and prices in the grids: bold enough to read across a counter */
.brock-card__title { font-size: 1rem; font-weight: 800; }
.brock-card__now { font-weight: 800; }

/* Product tiles sit on mustard, so a photo with a margin never shows grey */
.brock-card__media { background: var(--clatter-mustard); }

/* Clatter's photos are full-bleed shots, not packshots on white: Brock's multiply (which melts a white
   packshot into its tile) would tint them mustard, so show them as they are, filling the square. */
.brock-card__img img, .brock-card__media .nova-scrub__frame, .brock-pdp .nova-gallery__image, .brock-pdp .nova-gallery__thumb, .brock-line__img img, .brock-added__img, .nova-mini-basket__media img, .brock-searchbar .nova-searchbar__thumb { mix-blend-mode: normal; }
.brock-card__img img, .brock-card__media .nova-scrub__frame { object-fit: cover !important; }

/* The "find your nearest" band (the block's own inline style loads after this sheet, hence the doubled selector): charcoal, left-aligned to the page gutters, buttons to the right */
section.nova-cta.nova-cta--band { background: var(--clatter-ink); color: var(--clatter-cream); padding: clamp(56px, 8vw, 104px) var(--container-padding); }
section.nova-cta.nova-cta--band .nova-cta__in { max-width: var(--container-max-width); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
section.nova-cta.nova-cta--band .nova-cta__copy { flex: 1 1 28rem; max-width: 46rem; }
section.nova-cta.nova-cta--band .nova-cta__eyebrow { color: var(--clatter-mustard); opacity: 1; font-weight: 800; letter-spacing: 0.12em; }
section.nova-cta.nova-cta--band .nova-cta__heading { font-size: clamp(2.5rem, 6.5vw, 5rem); }
section.nova-cta.nova-cta--band .nova-cta__text { color: var(--clatter-cream); opacity: 0.88; max-width: 40rem; }
section.nova-cta.nova-cta--band .nova-cta__actions { margin-top: 0; }
section.nova-cta.nova-cta--band .nova-btn-primary { background: var(--clatter-mustard); color: var(--clatter-ink); border-color: var(--clatter-mustard); }
section.nova-cta.nova-cta--band .nova-btn-primary:hover { background: #ffd24f; color: var(--clatter-ink); }
section.nova-cta.nova-cta--band .nova-btn-outline { color: var(--clatter-cream); border-color: var(--clatter-cream); background: transparent; }
section.nova-cta.nova-cta--band .nova-btn-outline:hover { background: var(--clatter-cream); color: var(--clatter-ink); }

/* Home page sections (see content.mjs): full-width bands on one rhythm */
.cl-band { background: var(--cl-bg, #fff); color: var(--clatter-ink); }
.cl-band--cream { --cl-bg: var(--clatter-cream); }
.cl-band--mustard { --cl-bg: var(--clatter-mustard); }
.cl-band__in { max-width: var(--container-max-width); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--container-padding); }
.cl-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 56px); }
.cl-usp > div { border-top: 6px solid var(--clatter-ink); padding-top: 20px; }
.cl-usp h3 { margin: 0 0 10px; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.cl-usp p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.cl-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; }
.cl-quotes blockquote { margin: 0; padding: 28px; background: #fff; border: 2px solid var(--clatter-ink); border-radius: var(--radius-lg); box-shadow: 6px 6px 0 var(--clatter-mustard); }
.cl-quotes blockquote p { margin: 0 0 14px; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.cl-quotes footer { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-note { margin: 24px 0 0; font-size: 0.875rem; opacity: 0.75; }

/* Footer: Brock's dark footer. The site text (footer.footerText) carries the logo and the links, so the empty
   default block (the site name over social links) goes, and the legal area is set big enough to be the footer. */
.nova-sitefooter__main:has(.nova-sitefooter__default) { display: none; }
.nova-sitefooter__base { background: var(--clatter-ink); color: rgba(255, 246, 224, 0.7); }
.nova-sitefooter__base-inner { flex-direction: column; align-items: center; gap: 16px; }
.nova-sitefooter__legal { width: 100%; }
.cl-foot { display: grid; justify-items: center; gap: 20px; padding: 40px 0 16px; text-align: center; }
.cl-foot__logo img { height: 56px; width: auto; display: block; }
.cl-foot__tag { margin: 0; color: var(--clatter-mustard); font-size: 1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cl-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; max-width: 60rem; }
.cl-foot__nav a { color: var(--clatter-cream); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.cl-foot__nav a:hover, .cl-foot__social a:hover { color: var(--clatter-mustard); text-decoration: none; }
.cl-foot__social { margin: 0; }
.cl-foot__social a { color: var(--clatter-cream); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.cl-foot__fine { margin: 8px 0 0; font-size: 0.8125rem; max-width: 46rem; }
.cl-foot__fine a { color: var(--clatter-cream); }