/*
 * Starbucks Reserve — Global Styles
 *
 * Design tokens extracted from starbucksreserve.com
 * Fonts defined in fonts.css (loaded lazily)
 *
 * Fluid typography system: the html root font-size scales with
 * viewport using calc(rem + vw). All element sizes use rem so
 * they scale proportionally. This matches the live site exactly.
 */

/* ====== Fluid root font-size (matches live site) ====== */
html {
  font-size: 1.125rem; /* 18px base (above 1920px) */
}

@media screen and (width <= 1920px) {
  html {
    font-size: calc(0.75rem + 0.3125vw);
  }
}

@media screen and (width <= 1280px) {
  html {
    font-size: calc(0.8003rem + 0.2497vw);
  }
}

@media screen and (width <= 479px) {
  html {
    font-size: calc(0.7495rem + 0.8368vw);
  }
}

* {
  -webkit-font-smoothing: antialiased;
}

/* ====== Design tokens ====== */
:root {
  /* colors */
  --background-color: #fff;
  --light-color: #f8f8f8;
  --dark-color: #231f20;
  --text-color: #000;
  --link-color: #000;
  --link-hover-color: #976d3f;
  --accent-color: #976d3f;
  --border-color: #c6c4c3;
  --footer-bg: #231f20;
  --footer-text: #fff;
  --white: #fff;
  --grey-0: #231f20;
  --grey-1: #424242;
  --grey-2: #6b6863;
  --grey-3: #c6c4c3;
  --grey-4: #f4f4f4;
  --color-gold-muted: #B6A17C;
  --color-gold-bright: #EDC864;
  --color-surface-dark: #3E3837;
  --color-off-white: #F8F6F2;
  --color-border-dark: #5a504d;

  /* fonts */
  --body-font-family: 'Avenir LT Std', 'Avenir LT Std Fallback', sans-serif;
  --heading-font-family: 'Trade Gothic Bold Condensed', 'Trade Gothic Bold Condensed Fallback', sans-serif;
  --cta-font-family: 'Trade Gothic Condensed', sans-serif;
  --body-font-family-roman: 'Avenir LT Roman', sans-serif;
  --accent-font-family: sentinel, 'Sentinel Fallback', georgia, serif;

  /* body sizes — rem-based, scales with fluid root */
  --body-font-size-l: 1rem;
  --body-font-size-m: 0.875rem;
  --body-font-size-s: 0.75rem;
  --body-font-size-xs: 0.6875rem;
  --font-size-14px: 14px;
  --font-size-16px: 16px;
  --font-size-1-75rem: 1.75rem;
  --font-size-1-125rem: 1.125rem;
  --font-size-2rem: 2rem;

  /* heading sizes — mobile first (≤767px values from live site) */
  --heading-font-size-xxl: 2.5rem;
  --heading-font-size-xl: 2.25rem;
  --heading-font-size-l: 2rem;
  --heading-font-size-m: 1.5rem;
  --heading-font-size-s: 1.25rem;
  --heading-font-size-xs: 0.875rem;

  /* spacing */
  --section-padding: 3rem 0;
  --section-padding-large: 4rem 0;
  --gutter: 5%;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-025rem: 0.25rem;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-2rem: 2rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-3rem: 3rem;
  --spacing-1-75rem: 1.75rem;
  --letter-spacing-sm: 0.25rem;
  --letter-spacing-md: 0.4375rem;

  /* ~3px at 16px root — tight CTA / button tracking */
  --letter-spacing-tight: 0.1875rem;
  --line-height-body-relaxed: 2.4;
  --grid-gap: var(--spacing-32);


  /* container widths — rem units so they scale with the fluid root font-size
     Live site: .container-large = 64rem, .container-medium = 48rem, .container-xlarge = 120rem */
  --container-max-width: 1200px;
  --container-default: 64rem;
  --container-xlarge: 120rem;
  --container-hero: 48rem;

  /* nav — 4.5rem scales fluidly: ~69px mobile, ~74px desktop */
  --nav-height: 4.45rem;
  --header-height: var(--nav-height);
  --hero-heading-padding: 3rem 0;
  --section-cta-spacing: 1.5rem 0 0;
}

/* Tablet (768–991px) — heading rem values compensate for smaller root */
@media (width >= 768px) {
  :root {
    --heading-font-size-xxl: 3.25rem;
    --heading-font-size-xl: 2.75rem;
    --heading-font-size-l: 2.25rem;
    --section-padding: 4rem 0;
    --section-padding-large: 80px 0;
    --hero-heading-padding: 4rem 0;
    --section-cta-spacing: 1.5rem 0 0;
  }
}

/* Desktop (≥992px) — base rem values from live site */
@media (width >= 992px) {
  :root {
    --heading-font-size-xxl: 3.125rem;
    --heading-font-size-xl: 2.25rem;
    --heading-font-size-l: 1.75rem;
    --gutter: 5vw;
    --section-padding: 5rem 0;
    --section-padding-large: 116px 0;
    --hero-heading-padding: 5rem 0;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  font-weight: 500;
  line-height: 1.5;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* headings — font-weight 400 because Tradegothicltstd Bdcn 20 is inherently bold */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--heading-font-family);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.4375rem;
  scroll-margin: 40px;
}

h1 {
  font-size: var(--heading-font-size-xxl);
  letter-spacing: 0.7813rem;
  line-height: 1.2;
}

h2 {
  font-size: var(--heading-font-size-xl);
  letter-spacing: 0.5625rem;
}

h3 {
  font-size: var(--heading-font-size-l);
  letter-spacing: 0.4375rem;
  line-height: 1.2;
}

h4 {
  font-size: var(--heading-font-size-m);
  letter-spacing: 0.375rem;
  line-height: 1.3;
}

h5 {
  font-size: var(--heading-font-size-s);
  letter-spacing: 0.375rem;
  line-height: 1.4;
}

h6 {
  font-size: var(--heading-font-size-xs);
  font-family: var(--cta-font-family);
  letter-spacing: 0.25rem;
}

p {
  font-family: var(--body-font-family-roman);
  line-height: 2.4;
}

em {
  font-family: var(--accent-font-family);
  font-style: italic;
  line-height: 1.5;
}


p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: 0;
}

/* content paragraphs get the wider line-height from the original site */
main p {
  line-height: 2.4;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 0;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

/* ============================================================
   GLOBAL CONTAINER SYSTEM
   Matches live site architecture:
     .padding-global  → section  (horizontal gutter: 5%)
     .container-large → wrapper  (width: 100%; max-width: 64rem; margin: 0 auto)
   All sections use container-default by default.
   Specific section overrides below for hero and heading-with-description.
   ============================================================ */

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

/* Animated underline hover — slides in from left on hover, out to right on leave */
a.button:any-link {
  position: relative;
  overflow: visible;
}

a.button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentcolor;
  top: 100%;
  left: 0;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
}

a.button:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

/* Disable underline on filled / secondary buttons */
a.button.secondary::before {
  display: none;
}

/* buttons / CTA links — original has NO visible border, just text */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--cta-font-family);
  font-style: normal;
  font-weight: 400;
  font-size: var(--body-font-size-m);
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  background-color: transparent;
  color: var(--accent-color);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

/* Keep truncation on <button> elements */
button {
  overflow: hidden;
  text-overflow: ellipsis;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-color: transparent;
  color: var(--link-hover-color);
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: transparent;
  border: 1px solid var(--text-color);
  padding: 0.65em 2em;
  text-align: center;
  color: var(--text-color);
}

a.button.secondary:hover,
button.secondary:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

/* images */
main img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections — global container system
   Section = .padding-global (horizontal gutter)
   Wrapper = .container-large (max-width + centering) */
main > .section {
  margin: 0 auto;
  padding: var(--section-padding);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main > .section > div {
  width: 100%;
  max-width: var(--container-default);
  margin-left: auto;
  margin-right: auto;
} 

/* Target the paragraph only if it contains an 'em' tag */
.default-content-wrapper p:has(em) {
    margin-top: 1.25rem;
    margin-bottom: 0; /* Optional: resets existing bottom margin */
}

main > .section:first-of-type .default-content-wrapper :is(h1:first-of-type, p:not(:has(img))) {
  max-width: var(--container-hero);
}

main > .section.padding-top-none {
  padding-top: 0;
}

/* ---- Homepage hero: no bottom padding — collages follow directly ---- */
main > .section:has(.home-page-hero) {
  padding-bottom: 0;
  padding-top: 0;
}

/* ---- Container: xlarge — homepage hero ---- */
main > .section:has(.home-page-hero) > div {
  max-width: var(--container-xlarge);
}

/* ---- Container: hero — heading-with-description (centered text) ---- 
main > .section:has(.heading-with-description) > div {
  max-width: 100%;
}
*/

/* Fragment-wrapper inside heading-with-description section uses default width for location cards */
main > .section:has(.heading-with-description) > .fragment-wrapper {
  max-width: var(--container-default);
}

/* Adjust padding for heading-with-description when a section contains a links-list 
   Replaces the need for roastery section metadata style on highlights pages */  
  .section:has(.links-list) .heading-with-description {
    padding-bottom: 16px;
  }
  
  @media (width >= 768px) {
    .section:has(.links-list).heading-with-description-container {
      padding-bottom: 28px;
    }
  
    .section:has(.links-list) .heading-with-description {
      padding-bottom: 5px;
    }
  }
  
  @media (width >= 1280px) {
    .section:has(.links-list) .heading-with-description.heading-with-description-container {
      padding-bottom: 37px;
    }
  }

/* ---- Submenu-nav links-with-separator: nav breaks out to 100% ---- */
main > .section:has(.links-list.links-with-separator) > .links-list-wrapper {
  max-width: var(--container-hero);
}

/* ---- Container: none — full-width blocks that handle their own centering ---- */
main > .section:has(.collage) {
  max-width: none;
}

main > .section:has(.collage) > div {
  max-width: none;
}

/* ---- Media-center: no section padding — image renders at natural size ---- */
main > .section.media-center {
  padding-top: 0;
  padding-bottom: 0;
}

.section.media-center > .default-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}

.section.media-center > .default-content-wrapper img {
  max-width: 80%;
  height: auto;
}


@media (width >= 768px) {
  .section-vertical-line {
    position: relative;
  }

  .section-vertical-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 1px;
    border-left: 1px solid var(--border-color);
  }

  /* Coffee, Brew-guide: full-height vertical rule aligned to centered container width. */
  .section.columns-container:has(.columns.brew-guide, .columns.coffee) {
    position: relative;
  }

  .section.columns-container:has(.columns.brew-guide, .columns.coffee)::before {
    content: "";
    position: absolute;
    inset: 0 var(--gutter);
    background: linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      var(--border-color) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ) center / min(100%, var(--container-default)) 100% no-repeat;
    pointer-events: none;
    z-index: 0;
  }
}

@media (width >= 991px) {
  .section.media-center > .default-content-wrapper {
    padding: 7rem 0;
  }
}

/* ---- About page — section overrides ----
   Live site: all sections have 0 padding; spacing handled by blocks internally.
   Columns.info blocks have 80px internal padding, so remove section padding on those.
   Image and fragment sections keep default padding for correct heights. */
body:has(.columns.info) main > .section.columns-container {
  padding-top: 0;
  padding-bottom: 0;
}


/* section metadata styles */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
}

main .section.dark {
  background-color: var(--dark-color);
  color: var(--footer-text);
}

main .section.dark a:any-link {
  color: var(--footer-text);
}

main .section.dark a.button:any-link {
  color: var(--footer-text);
}

main .section.dark a.button:hover {
  color: var(--accent-color);
}

.section.hidden {
  display: none;
}

/* Hide metadata block and its section container — processed by aem.js, not displayed */
.metadata-wrapper {
  display: none;
}

main > .section.metadata-container {
  display: none;
}

/* accent / serif text helper */
.accent-text,
main em {
  font-family: var(--accent-font-family);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   HOMEPAGE COLLAGE LAYOUT
   Creates two-column grid from flat default-content-wrapper.
   Hero content is now in its own auto-block, so children
   are numbered 1-23 (CSS nth-child is 1-based).

   Content map:
   1-4:   "Exquisite Coffees" — images(1) LEFT, text(2-4) RIGHT
   5-8:   "Experiences" — text(5-7) LEFT, images(8) RIGHT
   9-12:  "Empire State" — images(9) LEFT, text(10-12) RIGHT
   13:    Logo divider (full-width, centered)
   14-17: "Visit" — images(14) LEFT, text(15-17) RIGHT
   18-21: "Explore Coffee" — text(18-20) LEFT, images(21) RIGHT
   22:    Coffee bean illustration (full-width, centered)
   23:    "Select Coffees" label
   ============================================================ */

@media (width >= 768px) {
  /* Grid container — :nth-child(2) targets the default-content-wrapper after home-page-hero-wrapper */
  .section.card-container > .default-content-wrapper:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 4px 66px;
  }

  /* Default: all children span full width */
  .section.card-container > .default-content-wrapper:nth-child(2) > * {
    grid-column: 1 / -1;
  }

  /* --- Collage 1: Exquisite Coffees (children 1-4) — images LEFT, text RIGHT --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 5;
    overflow: hidden;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(2),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(3),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(4) {
    grid-column: 2;
    align-self: center;
  }

  /* --- Collage 2: Experiences (children 5-8) — text LEFT, images RIGHT --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(5),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(6),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(7) {
    grid-column: 1;
    align-self: center;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(8) {
    grid-column: 2;
    grid-row: 5 / 9;
    overflow: hidden;
  }

  /* --- Collage 3: Empire State (children 9-12) — images LEFT, text RIGHT --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(9) {
    grid-column: 1;
    grid-row: 9 / 13;
    overflow: hidden;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(10),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(11),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(12) {
    grid-column: 2;
    align-self: center;
  }

  /* --- Logo divider (child 13) — centered --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(13) {
    text-align: center;
    padding: 80px 0;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(13) img {
    max-width: 80px;
    margin: 0 auto;
    display: block;
  }

  /* --- Collage 4: Visit (children 14-17) — images LEFT, text RIGHT --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(14) {
    grid-column: 1;
    grid-row: 14 / 18;
    overflow: hidden;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(15),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(16),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(17) {
    grid-column: 2;
    align-self: center;
  }

  /* --- Collage 5: Explore Coffee (children 18-21) — text LEFT, images RIGHT --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(18),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(19),
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(20) {
    grid-column: 1;
    align-self: center;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(21) {
    grid-column: 2;
    grid-row: 18 / 22;
    overflow: hidden;
  }

  /* --- Bean illustration (child 22) — centered --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(22) {
    text-align: center;
    padding: 40px 0;
  }

  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(22) img {
    max-width: 120px;
    margin: 0 auto;
    display: block;
  }

  /* --- Select Coffees label (child 23) --- */
  .section.card-container > .default-content-wrapper:nth-child(2) > :nth-child(23) {
    font-family: var(--heading-font-family);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    padding-top: 24px;
  }
}

/* Multi-image paragraphs — mosaic grid layout
   Uses 3-column grid to accommodate 4 images:
   +----------+------+------+
   |          |    img2     |
   |   img1   +------+------+
   |          | img3 | img4 |
   +----------+------+------+
*/
.default-content-wrapper > p:has(> img:nth-of-type(3)) {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  line-height: 0;
  max-height: 600px;
  overflow: hidden;
}

.default-content-wrapper > p:has(> img:nth-of-type(3)) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* img1: large left, spans both rows */
.default-content-wrapper > p:has(> img:nth-of-type(3)) > img:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* img2: top right, spans both right columns */
.default-content-wrapper > p:has(> img:nth-of-type(3)) > img:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1;
}

/* img3: bottom center */
.default-content-wrapper > p:has(> img:nth-of-type(3)) > img:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* img4: bottom right */
.default-content-wrapper > p:has(> img:nth-of-type(3)) > img:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

/* City location links — uppercase with separators */
.default-content-wrapper > p:has(> a[href*="locations"]):has(> a + a) a {
  text-transform: uppercase;
  font-family: var(--heading-font-family);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
}

.default-content-wrapper > p:has(> a[href*="locations"]):has(> a + a) a + a::before {
  content: '|';
  margin: 0 12px;
  color: var(--border-color);
}

/* Hero logo — constrain size */
.section.card-container > .default-content-wrapper:first-child > :first-child img {
  max-width: 200px;
}

/* ============================================================
   ESB DARK THEME
   Empire State Building location pages — dark brown with gold accents.
   Applied via page-level metadata: template = esb
   ============================================================ */

body.esb main .section {
  --esb-bg: var(--color-surface-dark);
  --esb-text: var(--white);
  --esb-gold: var(--color-gold-muted);
  --esb-gold-active: var(--color-gold-bright);
  --esb-off-white: var(--color-off-white);
  
  background-color: var(--esb-bg);
  color: var(--esb-text);
}

body.esb main .section > div {
  max-width: var(--container-default);
  margin: 0 auto;
}

body.esb main .section h1 {
  color: var(--esb-text);
}

body.esb main .section h2 {
  color: var(--esb-gold);
  font-size: 2.25rem;
  letter-spacing: 0.5625rem;
  margin-bottom: var(--spacing-1rem);
}

body.esb main .section h3 {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.4375rem;
  color: var(--esb-text);
}

body.esb main .section p {
  color: var(--esb-text);
}

body.esb main .section a:any-link {
  color: var(--esb-gold);
}

body.esb main .section a.button:any-link {
  color: var(--esb-gold);
  font-family: var(--cta-font-family);
  font-size: 0.875rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
}

body.esb main .section a.button:hover {
  color: var(--esb-gold-active);
}

body.esb main .section h6 {
  color: var(--esb-off-white);
  font-size: 0.875rem;
  letter-spacing: var(--letter-spacing-tight);
  font-family: var(--heading-font-family);
}

body.esb,
body.esb main {
  background-color: var(--color-surface-dark);
}

body.esb main .section.vertical-section-heading > div > h2 {
  font-family: var(--heading-font-family);
  font-size: var(--body-font-size-m);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--esb-text);
  margin-left: 0;
  margin-right: 0;
}

/* Vertical center line element (inserted via JS by collage/media-center blocks) */
.vertical-section-divider {
  display: none;
}

body.esb .section.cocktail-lounge .columns > div {
  align-items: flex-start;
}

body.esb .section.cocktail-lounge .columns > div > div:last-child .button-container,
body.esb .section.cocktail-lounge .columns > div > div:first-child .button-container {
  padding: 0;
}

body.esb .section.cocktail-lounge .columns > div > div:last-child .button-container a {
  background-color: var(--color-gold-muted);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  padding-block: var(--spacing-8);
  text-decoration: none;
  width: 100%;
  color: var(--text-color);
  font-weight: 700;
  font-family: var(--heading-font-family);
  margin-bottom: var(--spacing-2-5rem);
}

body.esb .section.cocktail-lounge .columns > div > div:last-child .button-container a:hover {
  background-color: var(--color-gold-bright);
  color: var(--text-color);
}

body.esb .section.cocktail-lounge .columns > div > div:last-child h3 {
  font-size: var(--body-font-size-l);
  color: var(--color-gold-muted);
}

.esb-faq .default-content-wrapper p {
  line-height: var(--line-height-body-relaxed);
  font-size: var(--body-font-size-m);
  padding-bottom: var(--spacing-2rem);
}

.esb-faq .default-content-wrapper p:has(strong) {
  padding-bottom: 0;
}

.esb-faq .default-content-wrapper p strong {
  color: var(--color-gold-muted);
  font-weight: 400;
}

@media (width >= 768px) {
  body.esb main .section.vertical-section-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    place-items: start start;
    justify-content: start;
    gap: 0 var(--spacing-32);
    max-width: var(--container-default);
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px;
  }

  body.esb main .section.vertical-section-heading > div {
    justify-content: center;
    margin-right: 0;
    display: flex;
  }

  body.esb main .section.vertical-section-heading > div > h2 {
    writing-mode: vertical-lr;
    margin-left: 0;
    margin-right: 0;
    transform: rotate(180deg);
    margin-top: 0;
  }

  .vertical-section-divider {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--grey-3);
    pointer-events: none;
    z-index: 0;
  }
}

body.roastery .section.iframe-container {
  border-top: 1px solid var(--border-color);
  padding: var(--section-padding);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

body.roastery .section.card-container {
  border-top: 1px solid var(--border-color);
}



/* Transparent card backgrounds */
body:has(.section.roastery) .card > ul > li {
  background-color: transparent;
}

/* No card body padding — text flush with image edges */
body:has(.section.roastery) .card .card-body {
  padding: 0;
}



/* Stay at 2 columns */
@media (width >= 768px) {
  body:has(.section.roastery) .card:not(.stories) > ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .section[data-variant="visit-us"] {
    padding: var(--spacing-1rem) 0 var(--section-padding);
  }

  .section[data-variant="visit-us"] .columns > div {
    width: 80%;
  }

  .section.desktop-padding-bottom-none {
    padding-bottom: 0!important;
  }
}


/* Header section — centered, generous padding */
main > .section.sitemap-header {
  padding: 2.5rem 0;
  text-align: center;
}

@media (width >= 992px) {
  main > .section.sitemap-header {
    padding: 5rem 0;
  }
}

/* ============================================================
   spacing for h2, h3, h4 on stories pages
   ============================================================ */
.section .default-content-wrapper h2,
.section .default-content-wrapper h3,
.section .default-content-wrapper h4 {
  margin-top: var(--spacing-1-5rem);
  margin-bottom: var(--spacing-1rem);
}

.stories main .section:first-of-type .default-content-wrapper p:has(img) img{
  aspect-ratio: 16 / 9;
}

.stories .default-content-wrapper p em{
  font-family: var(--body-font-family-roman);
}

/* ============================================================
   Section styles: float-image-right / float-image-left / float-image-center
   (stories: inset / floated figures beside body copy)
   ============================================================ */

/* Contain floats without a clearfix pseudo-element */
.section:is(.float-image-right, .float-image-left) .default-content-wrapper {
  display: flow-root;
}

/* Floated figure column */
.section:is(.float-image-right, .float-image-left) .default-content-wrapper p:first-child {
  max-width: 40%;
  margin-top: 0;
  margin-bottom: var(--spacing-12);
}

.section.float-image-right .default-content-wrapper p:first-child {
  float: right;
  margin-inline-start: var(--spacing-16);
}

.section.float-image-left .default-content-wrapper p:first-child {
  float: left;
  margin-inline-end: var(--spacing-16);
}

.section:is(.float-image-right, .float-image-left) .default-content-wrapper p:first-child picture {
  display: block;
}

.section:is(.float-image-right, .float-image-left) .default-content-wrapper p:first-child img {
  display: block;
  width: 100%;
  height: auto;
}

/* Centered inset image */
.section.float-image-center .default-content-wrapper p img {
  display: block;
  max-width: 60%;
  margin: var(--spacing-3rem) auto;
}

@media (width >= 992px) {
  .section.float-image-center .default-content-wrapper p img {
    max-width: 40%;
  }

  /* Section metadata: max-width = 60 — keep inset image at 60% */
  .section[data-max-width='60'].float-image-center .default-content-wrapper p img {
    max-width: 60%;
  }
}

.section.border-none {
  border: 0 !important;
}

#truste-consent-buttons .truste-button1 {
  text-transform: none;
  letter-spacing: normal;
}

.section.padding-bottom-none {
  padding-bottom: 0!important;
}