body {
  padding-top:124px
}
.site-header {
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:40;
  height:124px;
  background:#794b31;
  transition:height .25s,background .25s,box-shadow .25s,left .25s,right .25s,top .25s,border-radius .25s
}
.brand-logo {
  width:180px;
  height:auto;
  transition:width .25s
}
.wordmark {
  align-items:center
}
.wordmark small {
  color:#f5ead7;
  font-size:.75rem;
  margin-top:.2rem
}
.site-header.is-compact {
  top:10px;
  left:2.5%;
  right:2.5%;
  height:94px;
  border-radius:12px;
  background:#794b31;
  box-shadow:0 12px 36px #251c1626
}
.is-compact .brand-logo {
  width:135px
}
.is-compact .wordmark small {
  display:none
}
.hero-photo {
  overflow:hidden
}
.hero-photo img {
  will-change:transform
}
.button {
  border-radius:0;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s
}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 18px #251c1626
}
.button:active {
  transform:translateY(0);
  box-shadow:none
}
.button-dark {
  background:#251c16;
  border:1px solid #251c16;
  color:#fff8ed
}
.button-dark:hover {
  background:#61412b;
  border-color:#61412b
}
.button-secondary {
  border:1px solid #aa8e71;
  background:transparent;
  color:#251c16
}
.button-secondary:hover {
  background:#ecd8bb
}
.text-button {
  background:none;
  color:#79512f;
  border:0;
  border-bottom:1px solid currentColor;
  cursor:pointer;
  padding:.4rem 0;
  font-size:.875rem;
  line-height:1.5
}
.flavor-card .card-number {
  position:relative;
  align-self:flex-start
}
.card-number:after {
  content:"";
  display:block;
  height:2px;
  width:0;
  background:var(--flavor-color);
  transition:width .25s;
  margin-top:.4rem
}
.flavor-card:hover .card-number:after,.flavor-card[aria-pressed=true] .card-number:after {
  width:100%
}
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s ease,transform .65s ease
}
.reveal.is-visible {
  opacity:1;
  transform:none
}
.flavor-finder {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border-top:1px solid #cdb898;
  padding-top:2.5rem;
  margin-top:3rem
}
.flavor-finder .eyebrow {
  margin-bottom:.75rem
}
.flavor-finder h3 {
  font-size:2.4rem;
  margin-bottom:.75rem
}
.flavor-finder p:not(.eyebrow) {
  color:#71553e
}
.flavor-finder .button {
  flex-shrink:0
}
.recipe-filters {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-bottom:2rem
}
.filter-tab {
  padding:.65rem 1.15rem;
  min-height:44px;
  border:1px solid #967456;
  background:transparent;
  color:#563a25;
  font:inherit;
  font-size:.875rem;
  cursor:pointer;
  transition:background .2s,color .2s
}
.filter-tab[aria-pressed=true],.filter-tab:hover {
  background:#251c16;
  color:#fff8ed;
  border-color:#251c16
}
.recipe-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.recipe-card {
  position:relative;
  background:var(--recipe-color);
  color:#fffaf2;
  padding:1.65rem;
  min-height:23rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.recipe-card .eyebrow {
  position:relative;
  z-index:1;
  color:#fff4df;
  font-size:.75rem;
  letter-spacing:.15em
}
.recipe-bottle {
  position:absolute;
  width:95px;
  height:150px;
  object-fit:contain;
  right:1rem;
  top:3rem;
  filter:drop-shadow(0 10px 12px #0004);
  transform:rotate(8deg)
}
.recipe-card-main {
  position:relative;
  z-index:1;
  padding-top:10rem
}
.recipe-card h3 {
  font-size:2.1rem;
  margin-bottom:.8rem;
  max-width:85%
}
.recipe-card-main>p {
  font-size:1rem;
  color:#fff6e8;
  max-width:24rem;
  margin-bottom:1.1rem
}
.recipe-open {
  padding:0 0 .2rem;
  background:transparent;
  border:0;
  border-bottom:1px solid #fff8ed;
  color:#fff8ed;
  cursor:pointer;
  font:inherit;
  font-size:.875rem;
  letter-spacing:.07em
}
.tool-panel {
  background:#fff9ee;
  color:#251c16;
  border:1px solid #c8af8e;
  padding:2.5rem;
  margin-top:3rem
}
.tool-intro {
  max-width:46rem;
  margin-bottom:2rem
}
.tool-intro .eyebrow {
  margin-bottom:1rem
}
.tool-intro h3 {
  font-size:clamp(2.25rem,3.2vw,3.5rem);
  margin-bottom:1rem
}
.tool-intro>p:not(.eyebrow) {
  color:#71553e
}
.builder-layout,.calculator-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:2.5rem
}
.tool-form {
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  min-width:0
}
.tool-form>label,.field-row>label,.copy-fallback label {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.01em
}
.tool-form input:not([type=checkbox]),.tool-form select,.tool-form textarea,.copy-fallback textarea {
  width:100%;
  min-height:46px;
  border:1px solid #ae957b;
  background:#fffefb;
  color:#251c16;
  padding:.7rem .8rem;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  border-radius:2px;
  line-height:1.5
}
.tool-form fieldset {
  min-width:0;
  padding:0;
  margin:0;
  border:0
}
.tool-form legend {
  font-size:.875rem;
  font-weight:700;
  margin-bottom:.6rem
}
.check-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem
}
.check-option {
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.875rem;
  background:#f2e6d5;
  border:1px solid #d4bfa6;
  padding:.7rem;
  cursor:pointer
}
.check-option input {
  width:18px;
  height:18px;
  accent-color:#79512f;
  flex-shrink:0
}
.field-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  min-width:0
}
.calc-unit {
  display:inline
}
.tool-note {
  font-size:.875rem;
  line-height:1.6;
  color:#71553e;
  margin-top:1rem
}
.tool-panel>.tool-note {
  border-top:1px solid #d8c2a8;
  padding-top:1rem
}
.builder-result {
  min-width:0;
  background:#f0e1cc;
  border-left:3px solid #b8854a;
  padding:1.65rem
}
.recipe-content .eyebrow {
  margin-bottom:1rem
}
.recipe-content h4 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:2.1rem;
  font-weight:400;
  line-height:1.15;
  margin:0 0 .8rem;
  letter-spacing:-.03em
}
.recipe-description {
  font-size:1rem;
  color:#6e513a;
  margin-top:1rem
}
.recipe-details {
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
  margin:1.5rem 0
}
.recipe-subheading {
  font-family:Arial,Helvetica,sans-serif;
  font-size:.875rem;
  letter-spacing:.1em;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.5
}
.recipe-details ul,.recipe-details ol {
  padding-left:1.25rem;
  margin:.65rem 0 0
}
.recipe-details li {
  padding-left:.15rem;
  margin:.45rem 0;
  font-size:1rem;
  line-height:1.65
}
.recipe-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
  margin-top:1.3rem
}
.recipe-actions .button {
  padding:.8rem 1rem;
  min-height:44px;
  font-size:.875rem
}
.recipe-actions .text-button {
  margin-left:.4rem
}
.copy-fallback {
  width:100%;
  margin-top:1rem
}
.site-dialog {
  border:1px solid #c2a37b;
  background:#fff8ed;
  color:#251c16;
  padding:3rem 2.5rem 2.5rem;
  width:min(44rem,calc(100% - 2rem));
  max-height:85dvh;
  overflow:auto;
  box-shadow:0 20px 80px #0006;
  border-radius:4px
}
.site-dialog::backdrop {
  background:#170e08b8;
  backdrop-filter:blur(5px)
}
.site-dialog h2 {
  font-size:clamp(2.4rem,5vw,3.4rem);
  padding-right:1rem
}
.site-dialog>.eyebrow {
  margin-bottom:1rem
}
.dialog-close {
  position:absolute;
  right:1rem;
  top:.75rem;
  width:44px;
  height:44px;
  font-size:2rem;
  line-height:1;
  border:0;
  background:transparent;
  color:#654126;
  cursor:pointer
}
.dialog-description {
  color:#725138;
  margin:1.25rem 0 2rem
}
.dialog-open {
  overflow:hidden
}
.quiz-progress {
  margin-top:2rem;
  font-size:.875rem;
  color:#8a623c;
  letter-spacing:.1em
}
.quiz-question {
  font-size:2rem;
  margin:1rem 0 1.5rem
}
.quiz-options {
  display:grid;
  gap:.75rem
}
.quiz-option {
  min-height:56px;
  background:#f0e1cc;
  border:1px solid #b19573;
  color:#251c16;
  font:inherit;
  text-align:left;
  padding:1rem;
  cursor:pointer;
  transition:background .18s,transform .18s
}
.quiz-option:hover {
  background:#e7cda8;
  transform:translateX(3px)
}
#quiz-body>.text-button {
  margin-top:1rem
}
.quiz-bottle {
  height:220px;
  width:140px;
  object-fit:contain;
  float:right;
  margin:1rem 0 1rem 1rem
}
.quiz-result-name {
  font-size:2.6rem;
  margin:1rem 0
}
.quiz-result-name+p {
  max-width:26rem
}
#quiz-body:after {
  content:"";
  display:block;
  clear:both
}
.profit-calculator {
  margin-top:3rem
}
.business .profit-calculator .eyebrow {
  color:#8e592c
}
.profit-results {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  align-content:start
}
.profit-metric {
  background:#251c16;
  color:#fff8ed;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:1.25rem;
  min-width:0
}
.profit-metric>span {
  font-size:.875rem;
  color:#e5cfb1
}
.profit-metric strong {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.5rem,2.2vw,2.25rem);
  font-weight:400;
  line-height:1.2;
  overflow-wrap:anywhere
}
.profit-footnote {
  grid-column:1/-1;
  color:#71553e;
  font-size:.875rem;
  line-height:1.6
}
.profit-results>.form-error {
  grid-column:1/-1
}
.form-error {
  color:#8a2d1b;
  background:#f8e1d6;
  padding:1rem;
  border-left:3px solid #aa482d;
  line-height:1.6
}
.floating-contact {
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  z-index:45;
  background:#254832;
  color:#fffaf2;
  border:1px solid #63815c;
  border-radius:40px;
  min-height:56px;
  padding:.65rem 1.15rem .65rem .65rem;
  display:flex;
  gap:.65rem;
  align-items:center;
  box-shadow:0 5px 25px #251c163d;
  font:inherit;
  font-size:.875rem;
  cursor:pointer;
  animation:chat-pulse 8s infinite
}
.chat-mark {
  background:#f5ead7;
  color:#254832;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:.75rem;
  font-weight:700
}
.toast {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:6rem;
  z-index:100;
  background:#251c16;
  color:#fff8ed;
  border:1px solid #c29a61;
  padding:1rem 1.2rem;
  border-radius:4px;
  font-size:.875rem;
  width:max-content;
  max-width:calc(100% - 2rem);
  box-shadow:0 8px 25px #0004
}
footer .brand-logo {
  width:165px
}
footer .wordmark small {
  color:#e5b16b;
  font-size:.75rem
}
.floating-contact:hover {
  background:#356044
}
@keyframes chat-pulse {
  0%,84%,100% {
  box-shadow:0 5px 25px #251c163d
}
90% {
  box-shadow:0 5px 25px #251c163d,0 0 0 8px #66895f25
}

}

@media(max-width:1050px) {
  .recipe-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.tool-panel {
  padding:2rem
}
.builder-layout,.calculator-layout {
  gap:1.5rem
}
.site-header {
  padding-left:3%;
  padding-right:3%
}
.brand-logo {
  width:155px
}

}

@media(max-width:760px) {
  body {
  padding-top:98px
}
.site-header {
  height:98px;
  padding:1rem 5%
}
.brand-logo {
  width:128px
}
.site-header.is-compact {
  height:78px;
  left:3%;
  right:3%;
  top:8px
}
.is-compact .brand-logo {
  width:110px
}
.site-header.is-compact nav {
  border-radius:0 0 12px 12px
}
.flavor-finder {
  flex-direction:column;
  align-items:flex-start;
  gap:1.25rem
}
.flavor-finder h3 {
  font-size:2rem
}
.recipe-grid {
  grid-template-columns:1fr
}
.recipe-card {
  min-height:22rem
}
.recipe-card h3 {
  font-size:2.3rem
}
.recipe-bottle {
  height:160px;
  width:100px;
  right:1.5rem;
  top:2.5rem
}
.recipe-card-main {
  padding-top:10.5rem
}
.recipe-filters {
  gap:.5rem
}
.filter-tab {
  padding:.65rem .8rem
}
.tool-panel {
  padding:1.6rem 1.1rem
}
.tool-intro h3 {
  font-size:2.4rem
}
.builder-layout,.calculator-layout {
  grid-template-columns:1fr;
  gap:1.5rem
}
.builder-result {
  padding:1.25rem
}
.field-row {
  gap:.7rem
}
.check-option {
  padding:.6rem;
  font-size:.875rem
}
.site-dialog {
  padding:3rem 1.3rem 1.5rem;
  max-height:88dvh
}
.site-dialog h2 {
  font-size:2.6rem
}
.floating-contact {
  right:.9rem;
  bottom:1rem;
  min-height:52px
}
.profit-metric {
  padding:1rem
}
.profit-metric strong {
  font-size:1.8rem
}
.quiz-bottle {
  height:175px;
  width:90px
}
.quiz-result-name {
  font-size:2.25rem
}
.toast {
  bottom:5.5rem
}

}

@media(max-width:370px) {
  .field-row,.check-grid {
  grid-template-columns:1fr
}
.profit-results {
  grid-template-columns:1fr
}
.quiz-bottle {
  float:none;
  margin:auto
}
.site-dialog h2 {
  font-size:2.2rem
}

}

@media(prefers-reduced-motion:reduce) {
  .reveal {
  opacity:1;
  transform:none
}
.floating-contact {
  animation:none
}
.button:hover,.quiz-option:hover {
  transform:none
}
.hero-photo img {
  will-change:auto
}

}


.dialog-status {
  padding:.8rem 1rem;
  margin-top:1rem;
  background:#251c16;
  color:#fff8ed;
  font-size:.875rem;
  
}


.site-header nav {
  flex-wrap:wrap;
  
}

@media(max-width:1050px) {
  .header-cta {
  display:none;
  
}

}



/* Homepage composition: centered navigation, full café image, flavor links. */
html { scroll-padding-top:8rem; }
body { padding-top:124px; }
.site-header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:2rem; padding:1rem 3.5%; }
.site-header>.wordmark { grid-column:2; grid-row:1; }
.site-header #navigation { display:contents; }
.nav-left,.nav-right { display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); grid-row:1; }
.nav-left { grid-column:1; justify-content:flex-start; }
.nav-right { grid-column:3; justify-content:flex-end; }
.site-header nav a { white-space:nowrap; font-size:1rem; }
.site-header .header-cta { display:inline-flex; padding:.75rem 1.1rem; min-height:46px; border-radius:30px; letter-spacing:.02em; text-transform:none; font-size:.875rem; white-space:nowrap; background:#efc681; border-color:#efc681; }
.site-header .header-cta:hover { background:#f5d59f; border-color:#f5d59f; }
.hero { grid-template-columns:minmax(0,33fr) minmax(0,67fr); grid-template-rows:auto 1fr; min-height:0; }
.hero-copy { grid-column:1; grid-row:1/3; padding:clamp(2rem,4vw,5rem) 3.5vw; justify-content:flex-start; background:#342316; }
.hero .eyebrow { letter-spacing:.12em; font-size:.875rem; color:#e8bb78; }
.hero h1 { font-size:clamp(3rem,5.6vw,7rem); line-height:1.04; margin:1.75rem 0 1.5rem; letter-spacing:-.04em; }
.hero h1 em { font-style:normal; color:#f5ead7; }
.hero-description { color:#e0d0bb; font-size:1.125rem; line-height:1.75; max-width:26rem; margin-bottom:2rem; }
.hero-copy .button { border-radius:30px; background:#efc681; border-color:#efc681; padding:1rem 1.5rem; letter-spacing:.04em; }
.hero-copy .button:hover { background:#f5d59f; border-color:#f5d59f; }
.hero-photo { grid-column:2; grid-row:1; padding:0; display:block; background:#5b351d; max-height:none; }
.hero-photo img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:3/2; object-fit:contain; will-change:auto; }
.hero-collection { grid-column:2; grid-row:2; padding:2.5rem 3.5vw 3rem; background:#191613; }
.hero-collection h2 { font-size:clamp(2.2rem,3vw,3.5rem); line-height:1.12; letter-spacing:-.03em; margin:.9rem 0 1rem; }
.hero-collection h2 br { display:none; }
.hero-collection h2 em { font-style:normal; color:#efc681; }
.hero-collection>p:not(.eyebrow) { color:#d8cbb9; font-size:1rem; line-height:1.7; max-width:40rem; }
.hero-flavors { position:static; display:flex; flex-wrap:wrap; flex-direction:row; gap:.75rem 1.4rem; margin-top:1.5rem; padding:0; border:0; background:transparent; }
.hero-flavor-link { display:inline-flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid #65503a; font-size:.875rem; text-decoration:none; line-height:1.5; transition:color .2s,border-color .2s; }
.hero-flavor-link span { font-size:.875rem; color:#efc681; }
.hero-flavor-link:hover { color:#efc681; border-color:#efc681; text-decoration:none; }
@media(min-width:1700px) {
  .hero-copy { padding:5rem 3.5vw; }
}
@media(max-width:1100px) {
  .site-header { gap:1rem; padding-inline:3%; }
  .site-header .brand-logo { width:150px; }
  .nav-left,.nav-right { gap:1rem; }
  .site-header nav a { font-size:.875rem; }
  .site-header .header-cta { padding:.7rem .9rem; }
  .hero-copy { padding:2.5rem 3vw; }
  .hero-description { font-size:1rem; }
  .hero-copy .button { padding:1rem 1.2rem; font-size:.875rem; }
}
@media(max-width:900px) {
  html { scroll-padding-top:7rem; }
  body { padding-top:98px; }
  .site-header { position:fixed; height:98px; display:flex; justify-content:space-between; padding:1rem 5%; }
  .site-header .brand-logo { width:128px; }
  .site-header.is-compact { height:78px; }
  .site-header.is-compact .brand-logo { width:110px; }
  .site-header .menu-toggle { display:block; background:transparent; color:#f5ead7; border:1px solid #d8b48e; border-radius:4px; padding:.5rem .85rem; font-size:1rem; cursor:pointer; }
  .site-header #navigation { display:none; position:absolute; top:100%; left:0; right:0; padding:1.4rem 5%; background:#342316; border-bottom:1px solid #817263; }
  .site-header #navigation.is-open { display:flex; flex-direction:column; gap:1rem; }
  .nav-left,.nav-right { flex-direction:column; align-items:flex-start; gap:1rem; }
  .site-header nav a { font-size:1rem; }
  .site-header .header-cta { display:inline-flex; }
  .hero { grid-template-columns:38% 62%; }
  .hero h1 { font-size:clamp(2.8rem,5.6vw,4rem); }
  .hero-copy .eyebrow { font-size:.875rem; letter-spacing:.06em; }
  .hero-collection { padding:2rem 3vw; }
}
@media(max-width:640px) {
  .hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .hero-copy { grid-column:1; grid-row:1; padding:2.75rem 6% 2.5rem; }
  .hero h1 { font-size:clamp(3.4rem,13vw,5rem); margin:1.3rem 0 1.25rem; }
  .hero-description { max-width:30rem; margin-bottom:1.5rem; }
  .hero-photo { grid-column:1; grid-row:2; }
  .hero-collection { grid-column:1; grid-row:3; padding:2.25rem 6%; }
  .hero-collection h2 { font-size:clamp(2.1rem,7.5vw,2.8rem); }
  .hero-collection h2 br { display:block; }
  .hero-flavors { gap:.7rem 1.2rem; }
  .hero-flavor-link { font-size:.875rem; }
}

@media (max-width: 900px) {
  .site-header:has(#navigation.is-open) {
    border-bottom-color: transparent;
  }

  .site-header.is-compact:has(#navigation.is-open) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .site-header #navigation {
    top: calc(100% - 1px);
    background: #794b31;
    border-top: 0;
  }

  .site-header.is-compact #navigation {
    border-radius: 0 0 12px 12px;
  }
}

.whatsapp-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-story h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.hero-story > p + p {
  margin-top: 1.25rem;
}

/* Recipe photographs on cards and inside recipe dialogs. */
.recipe-card {
  padding:0;
  min-height:0;
  justify-content:flex-start;
}
.recipe-image-button {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  line-height:0;
  cursor:pointer;
}
.recipe-image-button:focus-visible {
  outline:3px solid #efc681;
  outline-offset:-4px;
}
.recipe-photo {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
}
.recipe-card-main {
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
}
.recipe-card-main>.eyebrow {
  font-size:.875rem;
  line-height:1.5;
  letter-spacing:.08em;
  margin-bottom:.85rem;
  max-width:none;
}
.recipe-card h3 {
  font-size:clamp(1.75rem,2.2vw,2.3rem);
  line-height:1.15;
  max-width:100%;
  margin-bottom:.85rem;
}
.recipe-card .recipe-open {
  min-height:44px;
  margin-top:auto;
  padding:.5rem 0;
  text-align:left;
}
.recipe-detail-photo {
  display:block;
  width:min(100%,24rem);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  margin:1.25rem auto;
}
#recipe-filter-status {
  margin:0 0 1.5rem;
}
@media(max-width:760px) {
  .recipe-card-main { padding:1.25rem; }
  .recipe-card h3 { font-size:2rem; }
}

.site-footer {
  background: #f5ead7;
  color: #67412a;
  border-top: 1px solid #d9cbb9;
}

.site-footer .footer-logo {
  display: block;
  width: 200px;
  height: 100px;
  background-color: #67412a;
  -webkit-mask: url("assets/logo-transparent.png") center / contain no-repeat;
  mask: url("assets/logo-transparent.png") center / contain no-repeat;
}

.site-footer .wordmark small {
  color: #67412a;
}

.site-footer .footer-nav {
  display: flex;
  position: static;
  inset: auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.site-footer .copyright {
  color: #67412a;
}

@media (max-width: 760px) {
  .site-footer {
    align-items: flex-start;
  }

  .site-footer .footer-nav {
    width: 100%;
  }
}

.floating-contact,
.floating-contact:hover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  padding: 0;
  width: 56px;
  height: 56px;
  min-height: 56px;
  justify-content: center;
}

.floating-contact .whatsapp-icon {
  width: 48px;
  height: 48px;
}

.retail-contact {
  margin-top: 2rem;
  padding: 2rem;
  background: #fffaf2;
  border: 1px solid #d9cbb9;
}

.retail-contact h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.retail-contact p {
  max-width: 42rem;
  color: #67412a;
  margin-bottom: 1.5rem;
}

.recipe-filter-control {
  margin-bottom: 1.5rem;
}

.recipe-filter-control > summary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: .65rem 1.25rem;
  border: 1px solid #967456;
  background: #fffaf2;
  color: #563a25;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.recipe-filter-control > summary::-webkit-details-marker {
  display: none;
}

.recipe-filter-control > summary::after {
  content: "+";
  font-size: 1.25rem;
}

.recipe-filter-control[open] > summary::after {
  content: "−";
}

.recipe-filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid #c8af8e;
  background: #fffaf2;
}

.filter-heading {
  margin-bottom: .75rem;
  color: #563a25;
  font-weight: 700;
}

.recipe-filter-panel .recipe-filters {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .recipe-filter-panel {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

.site-footer {
  padding: 1rem 2.75%;
  gap: .75rem 1.5rem;
}

.site-footer .footer-logo {
  width: 160px;
  height: 80px;
}

.site-footer .footer-nav {
  gap: .5rem 1.25rem;
}

.site-footer .copyright {
  margin: 0;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 1rem 5%;
  }
}

.hero-certifications {
  margin-top: auto;
  padding-top: 3rem;
  width: 100%;
  max-width: none;
}

.hero-certification-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hero-certification-row img {
  display: block;
  object-fit: contain;
  max-width: 100%;
}

.hero-certification-row .halal-logo {
  width: 140px;
  height: auto;
}

.hero-certification-row .bpom-logo {
  width: 220px;
  height: auto;
}

@media (max-width: 640px) {
  .hero-certifications {
    margin-top: 2rem;
    padding-top: 0;
  }

  .hero-certification-row {
    gap: 1.5rem;
  }

  .hero-certification-row .halal-logo {
    width: 110px;
  }

  .hero-certification-row .bpom-logo {
    width: 180px;
  }
}

.hero-copy {
  grid-row: 1;
}

.hero-certifications {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  margin: 0;
  padding: 0 3.5vw 3rem;
  width: 100%;
  max-width: none;
  background: #342316;
}

@media (max-width: 640px) {
  .hero-certifications {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    padding: 2rem 6%;
  }

  .hero-collection {
    grid-column: 1;
    grid-row: 4;
  }
}

@media (min-width: 641px) {
  .hero-certifications {
    padding-top: 4rem;
  }

  .hero-certification-row .halal-logo {
    width: 120px;
    height: auto;
  }

  .hero-certification-row .bpom-logo {
    width: 190px;
    height: auto;
  }
}

.site-header .brand-logo {
  width: 220px;
  height: auto;
}

.site-header.is-compact .brand-logo {
  width: 180px;
}

@media (max-width: 900px) {
  .site-header .brand-logo {
    width: 150px;
  }

  .site-header.is-compact .brand-logo {
    width: 130px;
  }
}

.site-header {
  align-items: center;
}

.site-header .wordmark {
  align-self: center;
  margin: 0;
}

@media (min-width: 901px) {
  .site-header .nav-left,
  .site-header .nav-right {
    display: flex;
    align-items: center;
    align-self: center;
  }

  .site-header nav a {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    margin: 0;
  }
}

/* Move the homepage text lower */
.hero-copy {
  padding-top: clamp(4rem, 6vw, 7rem);
}

/* Desktop navbar */
@media (min-width: 901px) {
  body {
    padding-top: 150px;
  }

  html {
    scroll-padding-top: 11rem;
  }

  .site-header {
    height: 150px;
  }

  .site-header.is-compact {
    height: 110px;
  }

  .site-header nav a {
    font-size: 1.125rem;
  }
}

/* Mobile navbar */
@media (max-width: 900px) {
  body {
    padding-top: 110px;
  }

  .site-header {
    height: 110px;
  }

  .site-header.is-compact {
    height: 90px;
  }
}

.site-header.is-compact .brand-logo {
  height: 85px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .site-header.is-compact .brand-logo {
    height: 70px;
    width: auto;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .hero {
    grid-template-rows: auto 1fr auto;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .hero-photo {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .hero-collection {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: stretch;
  }

  .hero-certifications {
    grid-column: 1;
    grid-row: 3;
  }
}