:root {
  --home-ink: #2a1a10;
  --home-muted: #756b63;
  --home-paper: #fbf7f1;
  --home-sand: #f1e6d5;
  --home-peach: #c98268;
  --home-line: #ded0bd;
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; background: var(--home-paper); }
.site-header { position: relative; z-index: 120; height: 78px; }
.nav {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  width: 100%;
  min-height: 78px;
  padding: 0 clamp(24px, 3.35vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(82, 57, 39, .16);
  background: rgba(251, 247, 241, .97);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(55, 35, 22, .04);
  transform: none;
}
.nav .brand { position: static; width: 158px; height: 64px; display: grid; place-items: center; transform: none; }
.nav .brand img { width: 158px; height: 64px; object-fit: contain; }
.nav-links { position: static; display: flex; align-items: center; gap: clamp(16px, 1.65vw, 32px); }
.nav-links-study { justify-content: flex-start; }
.nav-links-transactional { justify-content: flex-end; }
.nav-links a { color: var(--home-ink); font: 500 12px/1.3 'Montserrat', Arial, sans-serif; white-space: nowrap; }
.nav-links a:not(.header-icon) { padding: 11px 0 8px; border-bottom: 1px solid transparent; }
.nav-links a:not(.header-icon):hover { border-color: currentColor; }
.floating-actions,
.nav-sticky .floating-actions { position: static; display: flex; gap: 16px; }
.floating-actions a,
.floating-actions a:nth-child(n) {
  position: static;
  order: initial;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--home-ink);
  background: transparent;
}
.floating-actions a:hover { background: transparent; }
.floating-actions .header-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.floating-actions .header-account { width: 42px; height: 42px; border: 1px solid var(--home-line); border-radius: 50%; }
.floating-actions .header-cart { min-width: 92px; height: 42px; padding: 0 17px; border-radius: 999px; color: #fff; background: var(--home-ink); }
.floating-actions .header-cart:hover { color: #fff; background: #4a2d1c; }
.floating-actions img,
.floating-actions a:nth-child(n) img { position: static; width: 20px; height: 20px; object-fit: contain; filter: none; }
.floating-actions .header-cart img { filter: brightness(0) invert(1); }
.floating-actions a span,
.floating-actions a:nth-child(n) span { position: static; display: inline; color: inherit; font: 500 12px/1 'Montserrat', Arial, sans-serif; }
.menu-toggle { display: none; }
.catalog-cacao-filter { margin: -28px 0 38px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--home-line); color: var(--home-ink); background: var(--home-sand); font: 500 12px/1.4 'Montserrat', Arial, sans-serif; }
.catalog-cacao-filter a { color: var(--home-ink); border-bottom: 1px solid currentColor; }

.home main { color: var(--home-ink); background: var(--home-paper); }
.home main a { text-decoration: none; }
.home #catalog::before,
.home #catalog::after,
.home .feature::before,
.home .reviews::before { content: none; background-image: none; }
.home .feature,
.home .reviews,
.home .contact,
.home .site-footer { contain: layout style paint; }
.home-hero { min-height: calc(100svh - 78px); border-bottom: 1px solid var(--home-line); background: var(--home-paper); }
.home-hero__shell { position: relative; min-height: calc(100svh - 78px); max-height: 822px; padding: clamp(20px, 3vw, 44px) clamp(28px, 4vw, 64px) 34px; overflow: hidden; }
.home-eyebrow { position: relative; z-index: 3; margin: 0; color: var(--home-peach); text-align: center; font: italic 400 clamp(25px, 2.2vw, 38px)/1 'Cormorant', Georgia, serif; }
.home-hero h1 { position: relative; z-index: 1; margin: clamp(28px, 4vh, 44px) -0.015em 0; color: #8e857d; font: 400 clamp(108px, 15.8vw, 228px)/.72 'Cormorant', Georgia, serif; letter-spacing: -.052em; text-align: center; white-space: nowrap; }
.home-hero__chocolate { position: absolute; z-index: 2; top: clamp(126px, 18vh, 170px); left: 50%; width: clamp(235px, 24vw, 360px); height: auto; max-height: 58%; object-fit: contain; transform: translateX(-50%) rotate(5deg); filter: drop-shadow(0 28px 34px rgba(61, 37, 22, .17)); }
.home-hero__lead { position: absolute; z-index: 3; bottom: clamp(30px, 5vh, 54px); left: clamp(28px, 4vw, 64px); width: min(530px, 42vw); }
.home-hero__lead > p { width: min(380px, 100%); margin: 0 0 24px; color: var(--home-muted); font: 400 14px/1.65 'Montserrat', Arial, sans-serif; }
.home-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-button { min-height: 48px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--home-ink); border-radius: 999px; font: 500 13px/1.2 'Montserrat', Arial, sans-serif; transition: color .25s ease, background-color .25s ease, transform .25s ease; }
.home-button--primary { color: #fff; background: var(--home-ink); }
.home-button--secondary { color: var(--home-ink); background: transparent; }
.home-button:hover { transform: translateY(-2px); }
.home-button--primary:hover { color: #fff; background: #4a2d1c; }
.home-button--secondary:hover { color: #fff; background: var(--home-ink); }
.home-hero__trust { position: absolute; z-index: 3; right: clamp(28px, 4vw, 64px); bottom: clamp(40px, 6vh, 66px); display: grid; text-align: right; }
.home-hero__trust strong { font: 400 clamp(34px, 3.5vw, 54px)/.9 'Cormorant', Georgia, serif; }
.home-hero__trust span { margin-top: 8px; color: var(--home-muted); font: 500 9px/1.3 'Montserrat', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.home-benefit-strip { min-height: 58px; padding: 0 clamp(24px, 4vw, 64px); display: flex; align-items: center; border-bottom: 1px solid var(--home-line); overflow: hidden; }
.home-benefit-strip > div { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.home-benefit-strip span { color: #988c7f; font: 500 9px/1.3 'Montserrat', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.home-benefit-strip i { width: 4px; height: 4px; flex: 0 0 4px; transform: rotate(45deg); background: var(--home-line); }

.home-catalog { padding: clamp(72px, 8vw, 116px) clamp(28px, 4vw, 64px) 88px; background: var(--home-paper); }
.home-section-heading { margin-bottom: 32px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.home-section-heading h2,
.home-cacao h2,
.home-composition h2 { margin: 0; font: 400 clamp(48px, 5vw, 76px)/.95 'Cormorant', Georgia, serif; letter-spacing: -.025em; }
.home-section-heading > a { color: var(--home-ink); border-bottom: 1px solid var(--home-line); font: 500 12px/1.4 'Montserrat', Arial, sans-serif; }
.home-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.home-product-card { min-width: 0; display: flex; flex-direction: column; }
.home-product-card__image { position: relative; aspect-ratio: 1 / 1.06; display: block; overflow: hidden; border-radius: 6px; background: var(--home-sand); }
.home-product-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.home-product-card__image:hover img { transform: scale(1.025); }
.home-product-card__badge { position: absolute; z-index: 1; top: 16px; left: 16px; color: var(--home-peach); font: 500 8px/1.2 'Montserrat', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.home-product-card__heading { margin-top: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-product-card h3 { margin: 0; font: 400 clamp(23px, 2vw, 31px)/1 'Cormorant', Georgia, serif; }
.home-product-card h3 a { color: var(--home-ink); }
.home-product-card__price { flex: 0 0 auto; color: var(--home-ink); font: 400 13px/1.2 'Montserrat', Arial, sans-serif; }
.home-product-card__price del { color: var(--home-muted); }
.home-product-card > p { min-height: 38px; margin: 10px 0 12px; color: var(--home-muted); font: 400 11px/1.55 'Montserrat', Arial, sans-serif; }
.home-product-card__button { min-height: 42px; margin-top: auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--home-ink); border-radius: 999px; color: var(--home-ink); font: 500 12px/1 'Montserrat', Arial, sans-serif; transition: color .25s ease, background-color .25s ease; }
.home-product-card__button:hover,
.home-product-card__button.is-in-cart,
.home-product-card__button.added { color: #fff; background: var(--home-ink); }
.home-catalog__footer { margin-top: 36px; display: flex; justify-content: center; }
.home-empty-state { padding: 40px; border: 1px solid var(--home-line); color: var(--home-muted); text-align: center; }

.home-cacao { padding: clamp(80px, 9vw, 130px) clamp(28px, 4vw, 64px); border-block: 1px solid var(--home-line); background: #fffdf9; }
.home-cacao__shell { min-width: 0; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.15fr); gap: clamp(60px, 8vw, 130px); align-items: center; }
.home-cacao__selector,
.home-cacao__panel { min-width: 0; }
.home-kicker { margin: 0 0 18px; color: var(--home-peach); font: 500 9px/1.4 'Montserrat', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.home-cacao__intro { max-width: 460px; margin: 22px 0 30px; color: var(--home-muted); font: 400 13px/1.65 'Montserrat', Arial, sans-serif; }
.home-cacao__tabs { display: grid; }
.home-cacao__tabs button { min-height: 58px; padding: 0; display: flex; align-items: center; gap: 18px; border: 0; border-bottom: 1px solid var(--home-line); color: #c7b9a6; background: transparent; text-align: left; cursor: pointer; transition: color .3s ease, padding-left .3s ease; }
.home-cacao__tabs button strong { min-width: 68px; font: 400 38px/1 'Cormorant', Georgia, serif; }
.home-cacao__tabs button span { font: 500 8px/1.2 'Montserrat', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.home-cacao__tabs button[aria-selected='true'] { padding-left: 8px; color: var(--home-ink); }
.home-cacao__panel { opacity: 1; display: grid; grid-template-columns: minmax(240px, .95fr) minmax(240px, 1fr); gap: clamp(28px, 4vw, 58px); align-items: center; transition: opacity .3s ease, transform .3s ease; }
.home-cacao__panel.is-changing { opacity: .25; transform: translateY(8px); }
.home-cacao__image-wrap { aspect-ratio: 1; padding: 7%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--home-sand); }
.home-cacao__image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.home-cacao__copy h3 { margin: 0; font: 400 clamp(35px, 3.2vw, 50px)/1 'Cormorant', Georgia, serif; }
.home-cacao__description { margin: 18px 0 12px; color: var(--home-muted); font: 400 14px/1.6 'Montserrat', Arial, sans-serif; }
.home-cacao__fact { min-height: 38px; margin: 0 0 24px; color: var(--home-peach); font: 500 9px/1.5 'Montserrat', Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.home-cacao__buy { display: flex; align-items: center; gap: 20px; }
.home-cacao__buy strong { font: 400 25px/1 'Cormorant', Georgia, serif; }

.home-composition { padding: clamp(70px, 7vw, 105px) clamp(28px, 4vw, 64px); display: grid; grid-template-columns: minmax(250px, .9fr) minmax(500px, 1.6fr); gap: clamp(40px, 7vw, 110px); align-items: center; background: var(--home-sand); }
.home-composition__intro > p:last-child { max-width: 390px; margin: 20px 0 0; color: var(--home-muted); font: 400 13px/1.6 'Montserrat', Arial, sans-serif; }
.home-composition dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.home-composition dl > div { min-height: 105px; padding: 16px 22px; border-left: 1px solid var(--home-line); }
.home-composition dt { color: var(--home-peach); font: 400 34px/1 'Cormorant', Georgia, serif; }
.home-composition dd { margin: 10px 0 0; color: var(--home-muted); font: 400 11px/1.45 'Montserrat', Arial, sans-serif; }

.home :where(a, button):focus-visible { outline: 2px solid var(--home-peach); outline-offset: 4px; }

@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 10px; }
  .header-account { display: none !important; }
  .home-hero h1 { font-size: 15.5vw; }
  .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 24px; }
  .home-cacao__shell { grid-template-columns: 1fr; gap: 54px; }
  .home-cacao__panel { max-width: 760px; }
  .home-composition { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  html { scroll-behavior: auto; }
  .site-header { height: 68px; }
  .nav { min-height: 68px; padding: 0 18px; grid-template-columns: 1fr auto auto; gap: 13px; }
  .nav .brand { width: 124px; height: 54px; justify-self: start; }
  .nav .brand img { width: 124px; height: 54px; }
  .nav-links-study,
  .header-where,
  .header-account { display: none !important; }
  .nav-links-transactional,
  .floating-actions { position: static; display: flex; justify-self: end; }
  .floating-actions .header-cart,
  .floating-actions a:nth-child(n).header-cart { min-width: 62px; height: 38px; padding: 0 13px; gap: 5px; }
  .floating-actions .header-cart img { width: 18px; height: 18px; }
  .menu-toggle { position: relative; inset: auto; width: 40px; height: 40px; padding: 10px 6px; display: grid; align-content: center; gap: 5px; border: 0; background: transparent; }
  .menu-toggle span { width: 27px; height: 1px; display: block; background: var(--home-ink); }
  .mobile-menu { z-index: 200; }
  .mobile-menu::before { width: min(88vw, 360px); background: var(--home-paper); }
  .mobile-menu nav { top: 68px; left: 28px; width: min(calc(88vw - 56px), 304px); }
  .mobile-menu-label { margin: 26px 0 14px; color: var(--home-peach); font: 500 9px/1.2 'Montserrat', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
  .mobile-menu li + li { margin-top: 12px; }
  .mobile-menu a { max-width: 100%; color: var(--home-ink); font-size: 24px; line-height: 1.08; text-transform: none; }
  .mobile-menu-close { top: 14px; left: calc(min(88vw, 360px) - 48px); }
  .catalog-cacao-filter { margin: -20px 0 30px; }

  .home-hero,
  .home-hero__shell { min-height: calc(100svh - 68px); max-height: none; }
  .home-hero__shell { padding: 18px 18px 24px; }
  .home-eyebrow { font-size: 22px; text-align: left; }
  .home-hero h1 { z-index: 1; margin-top: 33px; font-size: 23.5vw; line-height: .75; letter-spacing: -.06em; }
  .home-hero__chocolate { top: 118px; width: min(58vw, 250px); max-height: 40%; filter: none; }
  .home-hero__lead { right: 18px; bottom: 24px; left: 18px; width: auto; }
  .home-hero__lead > p { width: 100%; margin-bottom: 16px; font-size: 12px; line-height: 1.5; }
  .home-hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-button { min-height: 44px; padding: 0 14px; font-size: 11px; text-align: center; }
  .home-hero__trust { top: 320px; right: 18px; bottom: auto; }
  .home-hero__trust strong { font-size: 34px; }
  .home-hero__trust span { max-width: 125px; font-size: 7px; }
  .home-benefit-strip { min-height: 48px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
  .home-benefit-strip::-webkit-scrollbar { display: none; }
  .home-benefit-strip > div { width: max-content; justify-content: flex-start; }
  .home-benefit-strip span { font-size: 8px; }

  .home-catalog { padding: 66px 0 68px; overflow: hidden; }
  .home-section-heading { padding: 0 18px; margin-bottom: 25px; }
  .home-section-heading h2,
  .home-cacao h2,
  .home-composition h2 { font-size: 48px; }
  .home-product-grid { padding: 0 18px 12px; grid-template-columns: none; grid-auto-columns: min(82vw, 330px); grid-auto-flow: column; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-product-grid::-webkit-scrollbar { display: none; }
  .home-product-card { scroll-snap-align: start; }
  .home-product-card__image { aspect-ratio: 1 / 1.05; }
  .home-catalog__footer { margin-top: 22px; padding: 0 18px; justify-content: stretch; }
  .home-catalog__footer .home-button { width: 100%; }

  .home-cacao { padding: 70px 18px 80px; }
  .home-cacao__shell { gap: 32px; }
  .home-cacao__intro { margin: 17px 0 23px; }
  .home-cacao__tabs { width: calc(100% + 36px); max-width: calc(100vw - 1px); margin-inline: -18px; padding: 0 18px 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .home-cacao__tabs::-webkit-scrollbar { display: none; }
  .home-cacao__tabs button { min-width: 108px; min-height: 76px; padding: 0 11px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--home-line); border-radius: 4px; scroll-snap-align: start; }
  .home-cacao__tabs button[aria-selected='true'] { padding-left: 11px; color: #fff; border-color: var(--home-ink); background: var(--home-ink); }
  .home-cacao__tabs button strong { min-width: 0; font-size: 31px; }
  .home-cacao__panel { display: flex; flex-direction: column; gap: 25px; }
  .home-cacao__image-wrap { width: min(78vw, 330px); order: 0; }
  .home-cacao__copy { order: 1; text-align: center; }
  .home-cacao__copy h3 { font-size: 39px; }
  .home-cacao__fact { min-height: 0; }
  .home-cacao__buy { justify-content: center; }

  .home-composition { padding: 66px 18px; gap: 36px; }
  .home-composition dl { grid-template-columns: repeat(2, 1fr); }
  .home-composition dl > div { padding: 18px 14px; border-top: 1px solid var(--home-line); }
}

@media (max-width: 420px) {
  .home-hero__shell { min-height: 710px; }
  .home-hero { min-height: 710px; }
  .home-hero__chocolate { top: 122px; }
  .home-hero__trust { top: 330px; }
  .home-section-heading > a { font-size: 10px; }
}

@media (min-width: 601px) and (max-width: 800px) {
  .home-catalog { padding-inline: 18px; }
  .home-section-heading { padding-inline: 0; }
  .home-product-grid {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: 42px 20px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .home-catalog__footer { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home *,
  .home *::before,
  .home *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
