/* ==========================================================================
   BeanKick — Home / 
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* -------------------- Custom scrollbar -------------------- */
html {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

body {
  font-family: "Lato", sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-black);
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* -------------------- Hero / background -------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-image: url("../images/home-page-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
}

/* -------------------- Logo -------------------- */
.hero__logo-wrap {
  padding-top: 32px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero__logo {
  width: 260px;
  height: auto;
  display: block;
}

/* -------------------- Cookie popup -------------------- */
.cookie-popup {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 800px;
  margin-top: 32px;
  background: var(--color-popup-bg);
  border: 1px solid var(--border-color-subtle);
  border-radius: 0;
  padding: 20px 32px;
  padding-right: 48px;
}

.cookie-popup__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-20);
  line-height: 1;
  padding: 4px 8px;
}

.cookie-popup__close:hover {
  color: var(--color-white);
}

.cookie-popup__text {
  margin: 0 0 20px;
  font-size: var(--font-14);
  line-height: 150%;
  color: var(--color-text-secondary);
}

.cookie-popup__link {
  text-decoration: underline;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.cookie-popup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.cookie-popup__dns {
  font-size: var(--font-14);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  color: var(--color-text-primary);
}

.cookie-popup__accept {
  border: none;
  border-radius: 0;
  background: var(--color-gold);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--font-14);
  padding: 10px 22px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.cookie-popup__accept:hover {
  background: var(--color-gold-hover);
}

.cookie-popup.is-hidden {
  display: none;
}

/* -------------------- Age gate section -------------------- */
.age-gate.is-hidden {
  display: none;
}

.age-gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 64px;
  text-align: center;
}

.age-gate__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--font-22);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 30px 0px;
  /* Flex items default to a content-based min-width, which stops long
     text from wrapping and overflows narrow viewports — override it. */
  min-width: 0;
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* -------------------- Date selectors -------------------- */
.age-gate__selectors {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 96px;
  margin-bottom: 48px;
}

.date-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-selector__circle {
  width: 96px;
  height: 96px;
  border: 1px solid var(--border-color-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-24);
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  background: transparent;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.date-selector__circle::-webkit-outer-spin-button,
.date-selector__circle::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.date-selector__circle:focus {
  border-color: var(--color-gold);
}

.date-selector__circle::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.5;
  font-weight: var(--fw-bold);
}

.date-selector__circle.is-invalid {
  border-color: #e5484d;
}

.date-selector__label {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-18);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* -------------------- Buttons -------------------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  color: var(--color-white);
  background-color: var(--color-gold);
  border: none;
  border-radius: 2px;
  font-family: Lato, "Segoe UI", Arial, sans-serif;
  font-size: var(--font-16);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.2s, transform 0.15s;
  font-weight: 400;
}

.border-right {
  border-right: 1px solid #fff;
}

.btn-gold:hover {
  background: var(--color-gold-hover);
  transform: translateY(-1px);
}

.age-gate__enter {
  margin: 0 auto;
}

/* -------------------- Responsive breakpoints --------------------
   Project-wide breakpoint set: 992, 768, 575, 425, 375 only. */
@media (max-width: 992px) {
  .hero__logo {
    width: 200px;
  }

  .date-selector__circle {
    width: 80px;
    height: 80px;
  }

  .age-gate__selectors {
    gap: 56px;
  }

  .cookie-popup {
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .hero__logo {
    width: 170px;
  }

  .recipe-perks__list {
    flex-direction: column;
  }

  .recipe-perks__item {
    padding: 30px 0px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-tan);
  }

  .recipe-perks__item:last-child {
    border: none;
  }

  .date-selector__circle {
    width: 72px;
    height: 72px;
  }

  .age-gate__selectors {
    gap: 36px;
  }

  .cookie-popup {
    max-width: 520px;
  }

  .btn-gold {
    min-width: 220px;
  }
}

@media (max-width: 575px) {
  .hero__content {
    padding: 20px 14px;
  }

  .hero__logo-wrap {
    padding-top: 20px;
  }

  .hero__logo {
    width: 140px;
  }

  .cookie-popup {
    max-width: 92vw;
    margin-top: 20px;
    padding: 12px 14px;
    padding-right: 38px;
  }

  .cookie-popup__close {
    top: 4px;
    right: 4px;
    font-size: var(--font-17);
    padding: 2px 6px;
  }

  .cookie-popup__text {
    margin-bottom: 14px;
  }

  .cookie-popup__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }

  .cookie-popup__dns {
    order: 2;
    min-width: 0;
    width: 100%;
  }

  .cookie-popup__accept {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .age-gate {
    padding-bottom: 20px;
  }

  .age-gate__title {
    padding: 0 14px;
  }

  .age-gate__selectors {
    gap: 18px;
  }

  .date-selector__circle {
    width: 62px;
    height: 62px;
  }

  .btn-gold {
    min-width: 200px;
    height: 48px;
    padding: 15px 24px;
  }
}

@media (max-width: 425px) {
  .hero__logo {
    width: 130px;
  }

  .date-selector__circle {
    width: 58px;
    height: 58px;
  }

  .age-gate__selectors {
    gap: 15px;
  }

  .btn-gold {
    min-width: 185px;
  }
}

@media (max-width: 375px) {
  .hero__logo {
    width: 120px;
  }

  .date-selector__circle {
    width: 54px;
    height: 54px;
  }

  .age-gate__selectors {
    gap: 12px;
  }

  .btn-gold {
    min-width: 170px;
  }
}

/* ==========================================================================
   Landing page — Navbar + Hero slider
   ========================================================================== */

/* -------------------- Navbar -------------------- */
.site-navbar {
  position: relative;
  z-index: 30;
  background: var(--color-black);
}

.site-navbar__inner {
  display: flex;
  align-items: center;
  min-height: auto;
  padding: 28px 6.5%;
}

/* Both WP menus sit side by side after the logo and read as one list */
.site-navbar__links {
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.site-navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navbar__menu li {
  display: flex;
  align-items: center;
}

/* Gold divider before every link except the very first one */
.site-navbar__links li::before {
  content: "|";
  color: var(--color-gold);
  font-size: var(--font-14);
  margin: 0 22px;
}

.site-navbar__links .site-navbar__menu:first-child li:first-child::before {
  content: none;
}

.site-navbar__menu a {
  font-size: var(--font-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-navbar__menu a:hover,
.site-navbar__menu .current-menu-item > a {
  color: var(--color-gold);
}

.site-navbar__brand {
  display: flex;
  flex-shrink: 0;
}

.site-navbar__logo {
  width: 140px;
  height: auto;
  display: block;
}

.site-navbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.site-navbar__bag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  padding: 4px;
  transition: color 0.2s ease;
}

.site-navbar__bag:hover {
  color: var(--color-gold);
}

.site-navbar__toggle {
  grid-column: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 26px;
  background: transparent;
  border: none;
  padding: 4px 0;
}

.site-navbar__toggle-bar {
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-navbar__toggle.is-active .site-navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-navbar__toggle.is-active .site-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-navbar__toggle.is-active .site-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-navbar__collapse {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-black);
  border-top: 1px solid var(--border-color-subtle);
}

.site-navbar__mobile-menu {
  list-style: none;
  margin: 0;
  padding: 8px 24px 16px;
}

.site-navbar__mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: var(--font-14);
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--border-color-subtle);
}

.site-navbar__mobile-menu li:last-child a {
  border-bottom: none;
}

/* -------------------- Hero slider -------------------- */
/* Section takes its height from the slide image so the whole photo is
   always visible (no cropping). Text positions are % of the image so they
   stay in the same spot at every width. */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-black);
}

.hero-slider__img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-overlay);
  pointer-events: none;
}

.hero-slider__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
  padding: 0 0 3.2% 6.8%;
}

.hero-slider__content > * {
  pointer-events: auto;
}

/* Headline sits just below the vertical middle of the image */
.hero-slider__content .heading {
  position: absolute;
  top: 46%;
  left: 6.8%;
}

.hero-slider__eyebrow {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: clamp(1.25rem, 2.4vw, 3.25rem);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.25;
}

.hero-slider__title {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 2.4vw, 3.25rem);
  color: var(--color-gold-hover);
  margin: 0 0 0 7.9vw;
  line-height: 1.25;
}

.hero-slider__ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn-outline-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.btn-outline-arrow:hover {
  color: var(--color-gold);
}

.btn-outline-arrow__arrow {
  font-size: var(--font-16);
  line-height: 1;
}

/* -------------------- Landing page responsive breakpoints -------------------- */
@media (max-width: 1200px) {
  .site-navbar__inner {
    padding: 0 40px;
  }

  .site-navbar__links {
    margin-left: 36px;
  }

  .site-navbar__links li::before {
    margin: 0 14px;
  }

  .site-navbar__logo {
    width: 124px;
  }
}

@media (max-width: 992px) {
  /* Hamburger | centered logo | cart */
  .site-navbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 16px;
    min-height: 76px;
    padding: 0 32px;
  }

  /* Full link menu no longer fits alongside the logo and cart icon at
     tablet/small-laptop widths — switch to the hamburger menu here
     instead of waiting until 575px, so the header never overflows. */
  .site-navbar__links {
    display: none;
  }

  .site-navbar__toggle {
    display: flex;
  }

  .site-navbar__brand {
    grid-column: 2;
    justify-self: center;
  }

  .site-navbar__right {
    grid-column: 3;
    margin-left: 0;
  }

  .site-navbar__logo {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .site-navbar__inner {
    min-height: 72px;
    padding: 0 16px;
    column-gap: 8px;
  }

  .site-navbar__logo {
    width: 100px;
  }

  .hero-slider__ctas {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .site-navbar__inner {
    min-height: 60px;
    padding: 0 16px;
  }

  .site-navbar__logo {
    width: 84px;
  }

  .site-navbar__right {
    gap: 0;
  }

  /* Image is too short on phones to hold the text over it, so the full
     image stays on top and the headline + buttons stack below it. */
  .hero-slider__overlay {
    display: none;
  }

  .hero-slider__content {
    position: static;
    padding: 24px 20px 32px;
  }

  .hero-slider__content .heading {
    position: static;
    margin-bottom: 24px;
  }

  .hero-slider__eyebrow,
  .hero-slider__title {
    font-size: var(--font-26);
  }

  .hero-slider__title {
    margin-left: 40px;
  }

  .hero-slider__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .hero-slider__ctas .btn-gold {
    min-width: 200px;
  }
}

@media (max-width: 425px) {
  .site-navbar__inner {
    min-height: 58px;
    padding: 0 14px;
  }

  .site-navbar__logo {
    width: 80px;
  }

  .hero-slider__content {
    padding: 20px 18px 28px;
  }

  .hero-slider__ctas .btn-gold {
    min-width: 185px;
  }
}

@media (max-width: 375px) {
  .site-navbar__inner {
    min-height: 56px;
    padding: 0 12px;
  }

  .site-navbar__logo {
    width: 74px;
  }

  .hero-slider__content {
    padding: 20px 16px 24px;
  }

  .hero-slider__ctas .btn-gold {
    min-width: 170px;
  }
}

/* ==========================================================================
   Evolution timeline (scroll-driven storytelling section)
   ========================================================================== */

.evolution {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-black);
}

/* -------------------- Header banner -------------------- */
/* Grid + justify-content centers the heading pair as one block while
   keeping the headline's offset under "THE EVOLUTION" */
.evolution__header {
  display: grid;
  justify-content: center;
  background: var(--color-gold);
  padding: 40px 60px;
}

.evolution__eyebrow {
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-38);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9dac7;
  margin: 0;
  line-height: 1.15;
}

.evolution__headline {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-44);
  color: var(--color-black);
  margin: -24px 0 0 160px;
  line-height: 1.2;
  position: relative;
}

.evolution__headline-of {
  font-style: italic;
  font-size: var(--font-48);
  font-family: "Libre Baskerville", serif;
  font-weight: var(--fw-light);
}

/* -------------------- Stage (timeline area) -------------------- */
.evolution__stage-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)),
    url("../images/timeline-bg.jpeg") center / cover no-repeat;
}

/* Layout: gold track on the far left, then year + title + description in
   the left column, rounded image on the right. Slides still move via the
   scroll JS in footer.php (it only sets transform/opacity). */
.evolution__stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 480px;
  display: flex;
  align-items: stretch;
}

/* -------------------- Year (sits above the slide title) -------------------- */
.evolution__years {
  position: absolute;
  top: 100px;
  left: 56px;
  right: 52%;
  height: 64px;
  z-index: 2;
  /* not clipped: the year travels with its slide's text (footer.php) */
  overflow: visible;
}

/* Position/opacity are driven per-frame from JS (footer.php) as the user
   scrolls; the CSS below is only the no-JS fallback state. */
.evolution__year {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35em;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform, opacity;
}

.evolution__year.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.evolution__year span {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-30);
  letter-spacing: 3px;
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* -------------------- Left track (bean, line, arrow) -------------------- */
.evolution__track-top,
.evolution__track-bottom {
  position: absolute;
  left: 0;
  width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.evolution__track-top {
  top: 0;
  bottom: 50%;
  justify-content: flex-start;
}

.evolution__track-top img {
  margin-bottom: 6px;
  flex-shrink: 0;
}

.evolution__track-bottom {
  top: 50%;
  bottom: 0;
  justify-content: flex-end;
}

.evolution__line {
  width: 2px;
  flex: 1;
  background: var(--color-gold);
}

.evolution__bean {
  position: relative;
  width: 16px;
  height: 22px;
  transform: rotate(109deg);
  border-radius: 50%;
  background: var(--color-gold);
  margin-bottom: 6px;
  flex-shrink: 0;
}

.evolution__bean::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: var(--color-black);
  border-radius: 2px;
  transform: translateX(-50%) rotate(8deg);
  opacity: 0.35;
}

.evolution__arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--color-gold);
  flex-shrink: 0;
}

/* Center tick is not part of this design */
.evolution__tick {
  display: none;
}

/* -------------------- Content column -------------------- */
.evolution__contents {
  position: relative;
  flex: 1;
  height: 100%;
  margin-left: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.evolution__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 180px;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform, opacity;
}

.evolution__content.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inside a slide the text scrolls up/in with the slider (driven per-frame
   from footer.php), while the image stays in place and crossfades on a
   timer whenever the active slide changes. */
.evolution__content .evolution__title,
.evolution__content .evolution__description {
  will-change: transform, opacity;
}

.evolution__content .evolution__image-wrap {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease-in-out, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.evolution__content.is-active .evolution__image-wrap {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .evolution__content .evolution__image-wrap {
    transition: none;
  }
}

/* Image sits on the right, vertically centered in the stage */
.evolution__image-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  width: 50%;
  height: 370px;
  margin-top: -185px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.45);
}

.evolution__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.evolution__title {
  max-width: 46%;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-24);
  color: var(--color-white);
  margin: 0 0 24px;
  line-height: 1.3;
}

.evolution__description {
  max-width: 46%;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-16);
  line-height: 1.9;
  color: var(--color-text-secondary);
  margin: 0;
}

/* -------------------- Evolution responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .evolution__headline {
    margin-top: -16px;
  }

  .evolution__stage-wrapper {
    padding: 40px 32px;
  }

  .evolution__stage {
    height: 500px;
  }

  .evolution__years {
    top: 110px;
    left: 44px;
    height: 56px;
  }

  .evolution__contents {
    margin-left: 44px;
  }

  .evolution__content {
    padding-top: 185px;
  }

  .evolution__image-wrap {
    width: 48%;
    height: 290px;
    margin-top: -145px;
    border-radius: 22px;
  }

  .evolution__title {
    max-width: 48%;
    margin-bottom: 16px;
  }

  .evolution__description {
    max-width: 48%;
    font-size: var(--font-16);
    line-height: 1.75;
  }
}

/* -------------------- Tablet/mobile: year, image, text stacked -------------------- */
@media (max-width: 768px) {
  .evolution__header {
    padding: 32px 20px 24px;
  }

  .evolution__headline {
    margin-top: -13px;
  }

  .evolution__stage-wrapper {
    padding: 32px 20px;
  }

  .evolution__stage {
    height: 680px;
  }

  .evolution__years {
    top: 40px;
    left: 36px;
    right: 0;
    height: 48px;
  }

  .evolution__year span {
    font-size: var(--font-26);
  }

  .evolution__contents {
    margin-left: 36px;
  }

  .evolution__content {
    padding-top: 104px;
  }

  .evolution__image-wrap {
    position: static;
    width: 100%;
    max-width: 480px;
    height: 240px;
    margin: 0 0 20px;
    border-radius: 20px;
  }

  .evolution__title,
  .evolution__description {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .evolution__header {
    padding: 28px 16px 20px;
  }

  .evolution__headline {
    margin-top: -9px;
  }

  .evolution__stage-wrapper {
    padding: 24px 16px;
  }

  .evolution__stage {
    height: 700px;
  }

  .evolution__years {
    left: 28px;
  }

  .evolution__contents {
    margin-left: 28px;
  }

  .evolution__image-wrap {
    height: 200px;
    border-radius: 16px;
  }

  .evolution__title {
    font-size: var(--font-22);
    margin-bottom: 12px;
  }
}

@media (max-width: 375px) {
  .evolution__stage {
    height: 740px;
  }

  .evolution__image-wrap {
    height: 170px;
  }
}

/* ==========================================================================
   Product launch (white section — "BeanKick Espresso Martini is Launched")
   ========================================================================== */

.product-launch {
  background: var(--color-white);
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding: 48px 60px 0px;
}

.product-launch__image-wrap {
  grid-area: image;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.product-launch__image {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.product-launch__year {
  grid-area: year;
  font-family: "Noto Sans" sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--font-50);
  color: var(--color-gold);
  line-height: 1;
  margin: 0;
  text-align: center;
}

.product-launch__body {
  grid-area: content;
  align-self: start;
  max-width: 560px;
}

.product-launch__heading {
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--font-26);
  color: var(--color-gold);
  line-height: 1.3;
  margin: 0 0 20px;
}

.product-launch__description {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-16);
  color: var(--color-black);
  line-height: 1.7;
  margin: 0 0 20px;
}

.product-launch__description--bold {
  font-weight: var(--fw-bold);
  margin-bottom: 0px;
  font-size: var(--font-18);
  width: 76%;
}

/* -------------------- Product launch responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .product-launch {
    padding: 56px 32px;
  }

  .product-launch__image {
    max-width: 240px;
  }

  .product-launch__body {
    max-width: 460px;
  }
}

@media (max-width: 768px) {
  .product-launch {
    padding: 48px 24px;
  }

  .product-launch__image {
    max-width: 200px;
  }

  .product-launch__body {
    max-width: 100%;
  }

  .product-launch__heading {
    margin-bottom: 14px;
  }

  .product-launch__description {
    margin-bottom: 14px;
  }
}

@media (max-width: 575px) {
  .product-launch {
    padding: 40px 20px;
  }

  .product-launch__year {
    align-self: auto;
  }

  .product-launch__body {
    align-self: auto;
    max-width: 100%;
  }

  .product-launch__image {
    max-width: 220px;
  }
}

@media (max-width: 425px) {
  .product-launch {
    padding: 32px 16px;
  }

  .product-launch__image {
    max-width: 190px;
  }
}

@media (max-width: 375px) {
  .product-launch {
    padding: 28px 14px;
  }

  .product-launch__image {
    max-width: 170px;
  }
}

/* ==========================================================================
   The BeanKick Difference (background-image statement + feature strip)
   ========================================================================== */

.difference {
  position: relative;
  background: var(--color-black);
}

/* -------------------- Hero image area -------------------- */
.difference__hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* background-position is inherited by .difference__bg (breakpoints below
     keep tweaking it on the hero). */
  background-position: 58% center;
  padding: 0 24px 64px;
  /* clip-path makes the hero clip its position:fixed bg layer to its own
     box, so the image stays pinned to the viewport while the hero scrolls
     over it (works on iOS, unlike background-attachment: fixed). */
  clip-path: inset(0);
}

/* Fixed background layer: pinned to the viewport, revealed only through the hero. */
.difference__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/paralax-bg-image.png") !important;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  z-index: 0;
}

.page-template-brand-story .site-footer {
  border-top: none !important;
}

.difference__overlay {
  position: absolute;
  inset: 0;
  /* Reaches fully opaque black before the bottom edge so the image doesn't
     leave a hazy seam where it meets the solid black section below. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 78%, rgba(0, 0, 0, 1) 92%);
  z-index: 1;
  bottom: -1px;
}

.difference__hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}

.difference__statement {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--font-30);
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
}

/* Only the repeated "No" is italic — the word after it stays upright. */
.difference__statement em {
  /* font-family: "Libre Baskerville", serif; */
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--color-tan);
}

/* -------------------- CTA -------------------- */
.btn-tan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 10px 32px;
  background: var(--color-gold);
  color: var(--color-white);
  border: none;
  border-radius: 2px;
  font-family: Lato, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-16);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color 0.2s, transform 0.15s;
}

.btn-tan:hover {
  background: var(--color-gold-hover);
  transform: translateY(-1px);
}

/* -------------------- Feature strip -------------------- */
.difference__features {
  /* Extra bottom padding reserves clear space for the divider logo/line
     that overlaps this section's bottom edge, so it doesn't sit on top
     of the feature text above it. */
  padding: 40px 60px 130px;
}

.difference__features-heading {
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-18);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 28px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.difference__feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-right: 1px solid var(--border-color-subtle);
}

.difference__feature:last-child {
  border-right: none;
}

.difference__feature span {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: var(--font-16);
  line-height: 150%;
  color: var(--color-gold);
}

/* -------------------- Section divider (logo + line) -------------------- */
/* Both sit on the boundary between .difference and the section after it,
   anchored to .difference's bottom edge and pulled down by half their own
   size so they overlap both sections equally. */

.section-divider-line {
  width: 43%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  height: 2px;
  background: var(--color-tan);
  z-index: 4;
  pointer-events: none;
}

.section-divider-line.two {
  width: 43%;
  right: 0 !important;
  bottom: 0;
  transform: translateY(50%);
  height: 2px;
  background: var(--color-tan);
  z-index: 4;
  pointer-events: none;
}

.section-divider-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 5;
  width: 140px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* -------------------- Difference responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .difference__hero {
    min-height: 520px;
    padding: 0 24px 48px;
  }

  .difference__features {
    padding: 36px 32px 105px;
  }

  .difference__feature {
    padding: 0 10px;
  }

  .section-divider-logo {
    width: 110px;
  }
}

@media (max-width: 768px) {
  .difference__hero {
    min-height: 460px;
    padding: 0 20px 40px;
    background-position: 62% center;
  }

  .difference__statement {
    margin-bottom: 20px;
  }

  .difference__features {
    padding: 32px 24px 90px;
  }

  .difference__features-heading {
    margin-bottom: 24px;
  }

  .difference__feature span {
    font-size: var(--font-14);
  }

  .section-divider-logo {
    width: 90px;
  }
}

@media (max-width: 575px) {
  .difference__hero {
    min-height: 420px;
    padding: 0 16px 32px;
    background-position: 66% center;
  }

  .section-divider-logo {
    width: 72px;
  }

  .btn-tan {
    min-width: 200px;
    height: 44px;
    padding: 10px 24px;
  }

  .difference__features {
    padding: 28px 20px 60px;
  }

  .difference__features-heading {
    text-align: center;
  }

  .difference__feature {
    flex: 0 0 50%;
    border-right: none;
    padding: 0 8px;
  }

  .difference__feature:nth-child(odd) {
    border-right: 1px solid var(--border-color-subtle);
  }
}

@media (max-width: 425px) {
  .difference__hero {
    min-height: 400px;
    background-position: 68% center;
  }

  .btn-tan {
    min-width: 190px;
  }
}

@media (max-width: 375px) {
  .difference__hero {
    min-height: 380px;
    background-position: 70% center;
  }

  .btn-tan {
    min-width: 180px;
  }
}

/* ==========================================================================
   Showcase (heading + "watch the video" + CTA + autoplay video)
   ========================================================================== */

.showcase {
  background: var(--color-black);
  padding: 110px 60px 70px 60px;
}

.showcase__container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.showcase__content {
  flex: 0 1 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 0 0 50px;
}

/* CTA sits at the bottom, aligned with the bottom edge of the video */
.showcase__content > div {
  margin-top: auto;
}

.showcase__heading {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: var(--font-40);
  line-height: 1.25;
  margin: 0 0 20px;
}

.showcase__heading-white {
  color: var(--color-white);
}

.showcase__heading-gold {
  color: var(--color-gold);
  font-weight: 700;
}

.showcase__watch {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-16);
  letter-spacing: 0.5px;
  color: var(--color-white);
  margin: 0 0 28px;
  transition: color 0.2s ease;
}

.showcase__watch:hover {
  color: var(--color-tan);
}

.showcase__video-wrap {
  flex: 1 1 560px;
  max-width: 620px;
  aspect-ratio: 8 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-black);
  align-self: center;
}

.showcase__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------- Showcase responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .showcase {
    padding: 56px 32px;
  }

  .showcase__container {
    gap: 32px;
  }

  .showcase__content {
    flex: 0 1 380px;
    padding: 16px 0 0 0;
  }

  /* keep heading + link + CTA within the video's height so the CTA stays bottom-aligned */
  .showcase__heading {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .showcase__watch {
    margin-bottom: 20px;
  }

  .showcase__video-wrap {
    flex: 1 1 420px;
    max-width: 440px;
  }
}

@media (max-width: 768px) {
  .showcase {
    padding: 48px 24px;
  }

  .showcase__container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .showcase__content {
    flex: 0 0 auto;
    max-width: 100%;
    order: 1;
    align-items: center;
    padding: 0;
  }

  .showcase__content > div {
    margin-top: 0;
  }

  .showcase__watch {
    margin-bottom: 20px;
  }

  .showcase__video-wrap {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 575px) {
  .showcase {
    padding: 40px 20px;
  }

  .showcase__container {
    gap: 24px;
  }
}

@media (max-width: 425px) {
  .showcase {
    padding: 32px 16px;
  }

  .showcase__video-wrap {
    max-width: 100%;
  }
}

@media (max-width: 375px) {
  .showcase {
    padding: 28px 14px;
  }
}

/* ==========================================================================
   Site footer ("Let's Kick Things Off!" + newsletter form + social icons)
   ========================================================================== */

.site-footer {
  background: var(--color-black);
  border-top: 2px solid var(--color-tan);
  padding: 64px 60px;
}

.site-footer--no-border {
  border-top: none;
}

.site-footer__container {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* -------------------- Left content -------------------- */
.site-footer__content {
  flex: 0 1 460px;
}

.site-footer__heading {
  font-family: "Noto Sans", sans-serif;
  font-size: var(--font-24);
  letter-spacing: 3px;
  color: var(--color-tan);
  margin: 0px 0px 16px;
  text-transform: capitalize;
}

.site-footer__text {
  font-family: "Lato", sans-serif;
  font-size: var(--font-16);
  letter-spacing: 2.3px;
  line-height: 2.4;
  color: var(--color-white);
  max-width: 360px;
  margin: 0 0 6px;
}

.site-footer__copyright {
  font-family: "Lato", sans-serif;
  font-size: var(--font-14);
  letter-spacing: 3px;
  color: var(--color-white);
  margin: 0;
  text-transform: uppercase;
}

/* -------------------- Right form -------------------- */
.site-footer__form {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
}

.site-footer__inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.site-footer__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--color-black);
  border: 1px solid var(--border-color-subtle);
  border-radius: 2px;
  color: var(--color-white);
  font-family: "Lato", sans-serif;
  font-size: var(--font-16);
}

.site-footer__input::placeholder {
  color: var(--color-text-secondary);
}

.site-footer__input:focus {
  outline: none;
  border-color: var(--color-gold);
}

.site-footer__social {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 14px;
}

.site-footer__social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--color-black), var(--color-black)) padding-box,
    var(--gradient-social-border) border-box;
  color: var(--color-gold);
  transform: perspective(300px) rotateY(0deg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

/* Full 360° flip on hover (lands back facing forward). */
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  transform: perspective(300px) rotateY(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social-link,
  .site-footer__social-link:hover,
  .site-footer__social-link:focus-visible {
    transform: none;
  }
}

.site-footer__social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.site-footer__social-link:hover {
  background: var(--color-gold) padding-box, var(--color-gold) border-box;
  color: var(--color-black);
}

/* -------------------- Footer responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .site-footer {
    padding: 48px 32px;
  }

  .site-footer__container {
    gap: 40px;
  }

  .site-footer__content {
    flex: 0 1 380px;
  }

  .site-footer__form {
    flex: 0 1 340px;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 48px 24px;
  }

  .site-footer__container {
    flex-direction: column;
    gap: 36px;
  }

  .site-footer__content,
  .site-footer__form {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .site-footer__text {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .site-footer {
    padding: 40px 20px;
  }

  .site-footer__container {
    gap: 28px;
  }

  .site-footer__social {
    justify-content: flex-start;
  }
}

@media (max-width: 425px) {
  .site-footer {
    padding: 32px 16px;
  }
}

@media (max-width: 375px) {
  .site-footer {
    padding: 28px 14px;
  }
}

/* ==========================================================================
   Brand Story — hero ("Crafted for the moment. Perfected before the pour.")
   ========================================================================== */

.brand-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(../images/brand-story-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-black);
}

.brand-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--color-overlay) 0%, var(--color-overlay) 35%, transparent 65%);
}

.brand-hero__content {
  justify-content: space-around;
  gap: 150px;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: flex-start;
  /* pointer-events: none; */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 72px 64px;
}

.brand-hero__line {
  margin: 0 0 20px;
}

.brand-hero__word-strong {
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-44);
  color: var(--color-tan);
  line-height: 1.1;
}

.brand-hero__word-light {
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-28);
  color: var(--color-text-secondary);
  line-height: 1.3;
  margin-left: 30px;
  margin-top: -10px;
}

.brand-hero__ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* -------------------- Brand hero responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .brand-hero__content {
    max-width: 480px;
    padding: 0 0 56px 48px;
  }
}

@media (max-width: 768px) {
  .brand-hero__content {
    max-width: 420px;
    padding: 0 0 48px 32px;
  }

  .brand-hero__ctas {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .brand-hero__overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--color-overlay) 100%);
  }

  .brand-hero__content {
    max-width: 100%;
    padding: 0 20px 32px;
  }

  .brand-hero__line {
    margin-bottom: 14px;
  }

  .brand-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .brand-hero__ctas .btn-gold {
    min-width: 200px;
  }
}

@media (max-width: 425px) {
  .brand-hero__content {
    padding: 0 18px 28px;
  }

  .brand-hero__ctas .btn-gold {
    min-width: 185px;
  }
}

@media (max-width: 375px) {
  .brand-hero__content {
    padding: 0 16px 24px;
  }

  .brand-hero__ctas .btn-gold {
    min-width: 170px;
  }
}

/* ==========================================================================
   Brand Story — origin story (image + long-form copy)
   ========================================================================== */

.brand-story-text {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  overflow: hidden;
  /* clip-path clips the fixed image layer to this section, so the image
     stays pinned to the viewport while the text scrolls over it. */
  clip-path: inset(0);
}

/* Same size as before (the section's height, set as --brand-story-h by
   footer.php), but pinned to the middle of the viewport: when the section
   is centred on screen the image sits exactly where it used to. */
.brand-story-text__image-wrap {
  width: 100%;
  height: var(--brand-story-h, 100%);
  top: calc(50vh - var(--brand-story-h, 100vh) / 2);
  left: -30%;
  position: fixed;
}

.brand-story-text__image {
  height: 100%;
}

.brand-story-text__content {
  background: linear-gradient(90deg, rgb(161 127 55 / 0%) 0%, rgb(233 228 223) 35%, rgb(233 228 223) 70%, rgb(255, 255, 255) 100%);
  padding: 60px 70px 60px 30px;
  margin-left: 416px;
  position: relative;
  z-index: 99;
}

.brand-story-text__content p {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-18);
  line-height: 150%;
  color: var(--color-black);
  margin: 0 0 20px;
}

.brand-story-text__content p:last-child {
  margin-bottom: 0;
}

.brand-story-text__content p strong {
  font-weight: var(--fw-bold);
  font-size: var(--font-24);
}

/* -------------------- Brand story text responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .brand-story-text__content {
    padding: 48px 40px;
  }

  .brand-story-text__image-wrap {
    display: none;
  }

  .brand-story-text__content {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .brand-story-text {
    flex-direction: column;
  }

  .brand-story-text__image-wrap {
    flex: 0 0 auto;
    height: 320px;
  }

  .brand-story-text__content {
    padding: 40px 32px;
  }
}

@media (max-width: 575px) {
  .brand-story-text__image-wrap {
    height: 240px;
  }

  .brand-story-text__content {
    padding: 32px 20px;
  }

  .brand-story-text__content p {
    margin-bottom: 16px;
  }
}

@media (max-width: 425px) {
  .brand-story-text__image-wrap {
    height: 220px;
  }

  .brand-story-text__content {
    padding: 28px 16px;
  }
}

@media (max-width: 375px) {
  .brand-story-text__image-wrap {
    height: 200px;
  }

  .brand-story-text__content {
    padding: 24px 14px;
  }
}

/* ==========================================================================
   Recipe page — hero ("No mixing. No measuring. No compromise.")
   ========================================================================== */

.recipe-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* background-position/size are inherited by .recipe-hero__bg (breakpoints
     below keep tweaking them here). clip-path clips the fixed bg layer to
     the hero, so the image stays put while the hero scrolls away. */
  background-position: right;
  background-size: contain;
  clip-path: inset(0);
}

/* Fixed background layer: pinned to the viewport, revealed only through the hero. */
.recipe-hero__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/recipie-bg.jpg");
  background-position: inherit;
  background-size: inherit;
  background-repeat: no-repeat;
  z-index: 0;
}

.recipe-hero__content {
  position: relative;
  z-index: 2;
  justify-content: flex-end;
    gap: 150px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 72px 64px;
}

.recipe-hero__statement {
  margin: 0 0 20px;
}

.recipe-hero__line {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-32);
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Only the repeated "No" is italic — the word after it stays upright. */
.recipe-hero__line em {
  font-weight: var(--fw-light);
  color: var(--color-tan);
  font-family: "Libre Baskerville", serif;
  font-style: italic;
}

.recipe-hero__strong {
  font-style: normal;
  font-weight: var(--fw-black);
  color: var(--color-white);
}

.recipe-hero__ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.recipe-hero__image {
  position: absolute;
  width: 400px;
  height: 100%;
  background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(0 0 0) 35%, rgb(0 0 0) 70%, rgb(255 255 255 / 0%) 100%);
  left: 35%;
  z-index: 1;
}

/* -------------------- Recipe hero responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .recipe-hero {
    height: calc(100vh - 76px);
    background-position: center;
    background-size: cover;
  }

  .recipe-hero__image {
    display: none;
  }

  .recipe-hero__content {
    max-width: 480px;
    padding: 0 0 56px 48px;
  }
}

@media (max-width: 768px) {
  .recipe-hero {
    height: calc(100vh - 72px);
  }

  /* The two-column split gets too tight below tablet width — fall back to
     a full-bleed image behind the text, same pattern as .brand-hero. */
  .recipe-hero__image {
    width: 100%;
    background-position: center bottom;
  }

  .recipe-hero__content {
    max-width: 420px;
    padding: 0 0 48px 32px;
  }

  .recipe-hero__ctas {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .recipe-hero {
    height: calc(100vh - 60px);
  }

  .recipe-hero__image {
    background-position: center bottom;
  }

  .recipe-hero__overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--color-overlay) 100%);
  }

  .recipe-hero__content {
    max-width: 100%;
    padding: 0 20px 32px;
  }

  .recipe-hero__statement {
    margin-bottom: 14px;
  }

  .recipe-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .recipe-hero__ctas .btn-gold {
    min-width: 200px;
  }
}

@media (max-width: 425px) {
  .recipe-hero {
    height: calc(100vh - 58px);
  }

  .recipe-hero__content {
    padding: 0 18px 28px;
  }

  .recipe-hero__ctas .btn-gold {
    min-width: 185px;
  }
}

@media (max-width: 375px) {
  .recipe-hero {
    height: calc(100vh - 56px);
  }

  .recipe-hero__content {
    padding: 0 16px 24px;
  }

  .recipe-hero__ctas .btn-gold {
    min-width: 170px;
  }
}

/* ==========================================================================
   Recipe page — perks strip (icon + title + description, 3-up)
   ========================================================================== */

.recipe-perks {
  background: var(--color-black);
  padding: 80px 60px;
  border-top: 2px solid var(--color-tan);
}

.recipe-perks__list {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.recipe-perks__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
  border-right: 1px solid var(--color-tan);
}

.recipe-perks__item:last-child {
  border-right: none;
}

.recipe-perks__item img {
  width: 80px;
  margin-bottom: 10px;
}

.recipe-perks__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-20);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 16px;
  line-height: 1.4;
}

.recipe-perks__desc {
  font-family: "Lato", sans-serif;
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--font-18);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 220px;
}

/* -------------------- Recipe perks responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .recipe-perks {
    padding: 64px 32px;
  }

  .recipe-perks__item {
    padding: 0 24px;
  }

}

@media (max-width: 768px) {
  .recipe-perks {
    padding: 56px 24px;
  }

  .recipe-perks__item {
    padding: 0 16px;
  }

  .recipe-perks__title {
    font-size: var(--font-14);
    margin-bottom: 12px;
  }
}

@media (max-width: 575px) {
  .recipe-perks {
    padding: 48px 20px;
  }

  .recipe-perks__list {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .recipe-perks__item {
    border-right: none;
    border-bottom: 1px solid var(--border-color-gold);
    padding: 0 20px 32px;
    width: 100%;
    max-width: 320px;
  }

  .recipe-perks__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .recipe-perks__desc {
    max-width: 260px;
  }
}

@media (max-width: 425px) {
  .recipe-perks {
    padding: 40px 16px;
  }

  .recipe-perks__list {
    gap: 28px;
  }

}

@media (max-width: 375px) {
  .recipe-perks {
    padding: 32px 14px;
  }

  .recipe-perks__list {
    gap: 24px;
  }

  .recipe-perks__item {
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Recipe page — "Every pour" copy + coffee bean image
   ========================================================================== */

.recipe-crafted {
  position: relative;
  background: var(--color-white);
  padding: 96px 60px 0px;
  overflow: hidden;
}

.recipe-crafted__container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* Window for the pinned bean image (data-parallax="fixed"): from the
     section's top padding down to the end of the copy, so it never shows
     over the hero above or the Signature Recipes block below. */
  clip-path: inset(-96px -100vw 0 -100vw);
}

.recipe-crafted__copy {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.recipe-crafted__heading {
  margin: 0 0 32px;
}

.recipe-crafted__heading-gold {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: var(--font-56);
  color: var(--color-tan);
  line-height: 1.15;
}

.recipe-crafted__heading-dark {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: var(--font-46);
  color: #333333;
  line-height: 1.25;
  margin-top: 4px;
  padding-left: 68px;
}

.recipe-crafted__text {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-18);
  line-height: 1.7;
  color: #333333;
  margin: 0 0 22px;
}

.recipe-crafted__text:last-child {
  margin-bottom: 0;
}

/* The photo sits behind the copy, right-aligned and bled to the section's
   edge — no card, no frame. It's shot on a pure-white backdrop, so
   multiplying it onto the white section lets the beans compose directly
   on the page with no visible seam. */
.recipe-crafted__image-wrap {
  position: absolute;
  top: 0px;
  right: -35%;
  width: 70%;
  z-index: 1;
  pointer-events: none;
}

.recipe-crafted__image {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* -------------------- Recipe crafted responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .recipe-crafted {
    padding: 80px 32px 60px;
  }

  .recipe-crafted__container {
    clip-path: inset(-80px -100vw 0 -100vw);
  }

  .recipe-crafted__copy {
    max-width: 580px;
  }

  .recipe-crafted__heading-gold {
    font-size: var(--font-40);
  }

  .recipe-crafted__heading-dark {
    padding-left: 52px;
  }

  .recipe-crafted__image-wrap {
    width: 42%;
    right: -16px;
  }
}

@media (max-width: 768px) {
  .recipe-crafted {
    padding: 64px 24px 0;
    overflow: visible;
  }

  .recipe-crafted__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .recipe-crafted__copy {
    max-width: 100%;
  }

  .recipe-crafted__heading-gold {
    font-size: var(--font-34);
  }

  .recipe-crafted__heading-dark {
    font-size: var(--font-26);
    padding-left: 0;
  }

  .recipe-crafted__image-wrap {
    position: static;
    order: -1;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .recipe-crafted {
    padding: 48px 20px 0;
  }

  .recipe-crafted__container {
    gap: 24px;
  }

  .recipe-crafted__heading {
    margin-bottom: 20px;
  }

  .recipe-crafted__heading-gold {
    font-size: var(--font-28);
  }

  .recipe-crafted__heading-dark {
    font-size: var(--font-22);
  }

  .recipe-crafted__text {
    margin-bottom: 18px;
  }

  .recipe-crafted__image-wrap {
    max-width: 280px;
  }
}

@media (max-width: 425px) {
  .recipe-crafted__heading-gold {
    font-size: var(--font-24);
  }

  .recipe-crafted__heading-dark {
    font-size: var(--font-18);
  }

  .recipe-crafted__text {
    font-size: var(--font-14);
  }

  .recipe-crafted__image-wrap {
    max-width: 240px;
  }
}

@media (max-width: 375px) {
  .recipe-crafted__heading-gold {
    font-size: var(--font-20);
  }

  .recipe-crafted__heading-dark {
    font-size: var(--font-16);
  }
}

/* ==========================================================================
   Recipe page — Signature Recipes (heading + 3-up recipe cards)
   ========================================================================== */

.recipe-signature {
  background: var(--color-white);
  padding: 60px 60px 60px;
}

/* .recipe-signature__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 56px;
} */

.recipe-signature__heading {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-56);
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 10px;
}

.recipe-signature__heading-gold {
  font-weight: var(--fw-black);
  color: #dec6a9;
  margin-left: -4.5%;
  margin-top: 37px;
  position: absolute;
  z-index: -1;
}

.recipe-signature__all-btn {
  align-items: center;
  padding: 8px 20px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 999px;
  font-size: var(--font-14);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.recipe-signature__all-btn:hover {
  background: #222;
  color: var(--color-white);
  transform: translateY(-1px);
}

.recipe-signature__list {
  display: flex;
  max-width: 1200px;
  margin: 60px 0 auto;
  list-style: none;
  padding: 0;
}

.recipe-signature__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 40px 20px 40px;
  border: 1px solid var(--border-color-gold);
  position: relative;
}

.recipe-signature__icon-wrap {
  position: absolute;
  top: -45px;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 24px;
  background-color: #fff;
}

.recipe-signature__icon {
  height: 70px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.recipe-signature__title {
  font-family: "Lato Sans", sans-serif;
  font-weight: 300;
  font-size: var(--font-16);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 16px;
  line-height: 1.4;
}

.recipe-signature__link {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: var(--font-14);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recipe-signature__link:hover {
  color: var(--color-gold);
}

/* -------------------- Recipe signature responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .recipe-signature {
    padding: 64px 32px 80px;
  }

  .recipe-signature__list {
    margin: 77px 0 auto;
}

  .recipe-signature__all-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .recipe-signature__header {
    margin-bottom: 44px;
    display: flex;
    justify-content: space-between;
  }

  .recipe-signature__heading {
    font-size: var(--font-36);
  }

  .recipe-signature__icon-wrap {
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
  }

  .recipe-signature__icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 768px) {
  .recipe-signature {
    padding: 56px 24px 64px;
  }

  .recipe-signature__list {
    flex-direction: column;
  }
  .recipe-signature__item {
    padding: 60px 40px 80px;

  }

  .recipe-signature__heading {
    font-size: var(--font-32);
  }

  .recipe-signature__icon-wrap {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
  }

  .recipe-signature__icon {
    width: 56px;
    height: 56px;
  }

  .recipe-signature__title {
    margin-bottom: 12px;
  }
}

@media (max-width: 575px) {
  .recipe-signature {
    padding: 48px 20px;
  }

  .recipe-signature__heading {
    font-size: var(--font-28);
  }

  .recipe-signature__title {
    font-size: var(--font-14);
  }

  .recipe-signature__list {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .recipe-signature__item {
    width: 100%;
  }
}

@media (max-width: 425px) {
  .recipe-signature {
    padding: 40px 16px;
  }

  .recipe-signature__heading {
    font-size: var(--font-26);
  }

  .recipe-signature__all-btn {
    height: 42px;
    padding: 0 26px;
  }

  .recipe-signature__list {
    gap: 28px;
  }

  .recipe-signature__icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }

  .recipe-signature__icon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 375px) {
  .recipe-signature {
    padding: 32px 14px;
  }

  .recipe-signature__heading {
    font-size: var(--font-22);
  }

  .recipe-signature__list {
    gap: 24px;
  }

}

/* ==========================================================================
   Logo CTA — starburst logo + "Shop Beankick" button. The gold line runs
   through the logo's own vertical center (same divider treatment as
   .section-divider-line on landing-page.html / Brand-Story.html), not a
   box border — the line is split in two and the logo sits in the gap.
   ========================================================================== */

.logo-cta {
  background: var(--color-black);
  padding: 48px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.logo-cta__divider {
  display: flex;
  align-items: center;
  width: 100%;
}

.logo-cta__line {
  flex: 1;
  height: 2px;
  background: var(--color-tan);
}

.logo-cta__logo {
  width: 140px;
  height: auto;
  display: block;
  flex-shrink: 0;
  margin: 0 24px;
}

/* -------------------- Logo CTA responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .logo-cta {
    padding: 40px 32px;
    gap: 24px;
  }

  .logo-cta__logo {
    width: 110px;
  }
}

@media (max-width: 768px) {
  .logo-cta {
    padding: 36px 24px;
  }

  .logo-cta__logo {
    width: 90px;
  }
}

@media (max-width: 575px) {
  .logo-cta {
    padding: 32px 20px;
    gap: 20px;
  }

  .logo-cta__logo {
    width: 72px;
    margin: 0 16px;
  }
}

@media (max-width: 425px) {
  .logo-cta {
    padding: 28px 16px;
  }
}

/* ==========================================================================
   Contact strip — thin tan announcement bar
   ========================================================================== */

.contact-strip {
  background: var(--color-tan);
  padding: 12px 20px;
  text-align: center;
}

.contact-strip__link {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-14);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-strip__link:hover {
  opacity: 0.8;
}

@media (max-width: 575px) {
  .contact-strip {
    padding: 10px 16px;
  }

  .contact-strip__link {
    font-size: var(--font-14);
    letter-spacing: 1px;
  }
}

/* ==========================================================================
   Shop page — Store locator hero
   ========================================================================== */

.shop-hero {
  background: var(--color-white);
  border-top: 3px solid var(--color-tan);
  padding: 56px 60px;
}

.shop-hero__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  max-width: 1400px;
  margin: 0 auto;
}

.shop-hero__panel {
  flex: 0 0 380px;
  max-width: 380px;
}

.shop-hero__heading {
  margin: 0 0 28px;
}

.shop-hero__heading-light {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-44);
  color: #2b2b2b;
  line-height: 1.1;
}

.shop-hero__heading-bold {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-black);
  font-size: var(--font-46);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-tan);
  line-height: 1.2;
  margin-left: 72px;
}

/* -------------------- Locator card -------------------- */
.shop-locator {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f1f2f7;
  /* border: 1px solid #e5e5e5; */
  /* border-radius: 16px; */
  padding: 16px;
  /* box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); */
}

.shop-locator__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  border: 1px solid #e2e2e2;
  border-radius: 50px;
  padding: 12px 18px;
}

.shop-locator__search-icon {
  display: flex;
  flex-shrink: 0;
  color: #8a8a8a;
}

.shop-locator__search-icon svg {
  width: 16px;
  height: 16px;
}

.shop-locator__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-16);
  color: #1a1a1a;
}

.shop-locator__search-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #6a6a6a;
  transition: color 0.2s ease;
}

.shop-locator__search-refresh:hover {
  color: var(--color-gold);
}

.shop-locator__search-refresh svg {
  width: 16px;
  height: 16px;
}

.shop-locator__tabs {
  display: flex;
  border: 1px solid #e2e2e2;
  overflow: hidden;
}

.shop-locator__tab {
  flex: 1;
  border: none;
  background: var(--color-white);
  padding: 12px 0;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-14);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.shop-locator__tab + .shop-locator__tab {
  border: 1px solid #e2e2e2;
}

.shop-locator__tab.is-active {
  border: none;
}

/* -------------------- Map -------------------- */
.shop-locator__map {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef1ec, #dfe6e0);
  border: 1px solid #e2e2e2;
}

.shop-locator__map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-locator__map-pin--cluster {
  width: 28px;
  height: 28px;
  transform: translate(-50%, -100%);
}

.shop-locator__map-pin--cluster svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shop-locator__map-pin--cluster span {
  position: relative;
  margin-top: -4px;
  color: var(--color-white);
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-11);
}

.shop-locator__map-pin--store {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #4a8fc2;
  color: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

.shop-locator__map-pin--store svg {
  width: 12px;
  height: 12px;
}

.shop-locator__map-pin--user {
  width: 22px;
  height: 30px;
  transform: translate(-50%, -100%);
}

.shop-locator__map-pin--user svg {
  width: 100%;
  height: 100%;
}

.shop-locator__map-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.shop-locator__map-zoom button {
  width: 26px;
  height: 26px;
  border: none;
  background: var(--color-white);
  font-size: var(--font-16);
  line-height: 1;
  color: #333333;
  cursor: pointer;
}

.shop-locator__map-zoom button + button {
  border-top: 1px solid #e2e2e2;
}

.shop-locator__map-info {
  position: absolute;
  right: 10px;
  bottom: 44px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #555555;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: var(--font-11);
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.shop-locator__map-credit {
  position: absolute;
  left: 8px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: "Lato", sans-serif;
  font-size: 9px;
  color: #5a5a5a;
}

/* -------------------- Results list -------------------- */
.shop-locator__results {
  list-style: none;
  margin: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.d-.bg-white {
  border-radius: 20px;
  overflow: hidden;
}

.shop-locator__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}

.shop-locator__result:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.shop-locator__result-info {
  flex: 1;
  min-width: 0;
}

.shop-locator__result-distance {
  margin: 0 0 2px;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-14);
  color: #7a7a7a;
}

.shop-locator__result-name {
  margin: 0 0 4px;
  font-family: "Noto Sans", "Arial Black", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--font-16);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1a1a1a;
}

.shop-locator__result-address {
  margin: 0 0 4px;
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-14);
  text-transform: uppercase;
  color: #4a4a4a;
  line-height: 1.4;
}

.shop-locator__result-phone {
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--font-14);
  color: #4a4a4a;
  text-decoration: underline;
}

.shop-locator__result-directions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 99px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: "Lato", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.shop-locator__result-directions:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

/* -------------------- Product image -------------------- */
.shop-hero__product {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.shop-hero__product-img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}

/* -------------------- Shop hero responsive breakpoints -------------------- */
@media (max-width: 992px) {
  .shop-hero {
    padding: 48px 32px;
  }

  .shop-hero__container {
    flex-direction: column;
    gap: 40px;
  }

  .shop-hero__panel {
    flex: none;
    max-width: 480px;
    width: 100%;
  }

  .shop-hero__product {
    order: -1;
  }

  .shop-hero__product-img {
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .shop-hero {
    padding: 40px 24px;
  }

  .shop-hero__heading-light {
    font-size: var(--font-32);
  }

  .shop-hero__heading-bold {
    font-size: var(--font-34);
  }

  .shop-hero__product-img {
    max-width: 400px;
  }
}

@media (max-width: 575px) {
  .shop-hero {
    padding: 32px 20px;
  }

  .shop-hero__panel {
    max-width: 100%;
  }

  .shop-hero__heading-light {
    font-size: var(--font-28);
  }

  .shop-hero__heading-bold {
    font-size: var(--font-30);
  }

  .shop-locator__map {
    height: 180px;
  }

  .shop-hero__product-img {
    max-width: 320px;
  }
}

@media (max-width: 425px) {
  .shop-hero__heading-light {
    font-size: var(--font-24);
  }

  .shop-hero__heading-bold {
    font-size: var(--font-26);
  }

  .shop-locator__result {
    flex-wrap: wrap;
  }

  .shop-locator__result-directions {
    margin-left: 46px;
  }
}

@media (max-width: 375px) {
  .shop-hero__heading-light {
    font-size: var(--font-20);
  }

  .shop-hero__heading-bold {
    font-size: var(--font-22);
  }

  .shop-hero__product-img {
    max-width: 260px;
  }
}