/* Homepage composition. Product pages and the bag continue to use site.css. */
.home-section { padding-block-start: var(--section-gap); }
.home-heading {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 31px;
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 600;
}
.home-heading span { color: var(--muted); margin-inline-start: .14em; }

.home-banner { padding-top: 16px; }
[data-banner] { touch-action: pan-y pinch-zoom; overflow: clip; border-radius: 24px; }
.banner-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
  align-items: stretch;
  background: var(--subtle);
  border-radius: 24px;
  overflow: hidden;
}
.banner-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: clamp(16px, 3.4vw, 48px);
}
.banner-copy :is(h1,h2) {
  font-size: clamp(30px, 3.8vw, 55px);
  line-height: 1.07;
  letter-spacing: -.046em;
}
.banner-slogan {
  color: #4c4f50;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.25;
}
.banner-feature { color: var(--muted); line-height: 1.3; }
.banner-copy .pill { margin-top: 9px; }
.banner-slide picture { display: block; min-width: 0; aspect-ratio: 16 / 9; background: var(--subtle); }
.banner-slide img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.banner-controls { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.banner-auto svg { width: 17px; height: 17px; }
.banner-auto[aria-pressed=true]>svg,.banner-auto[aria-pressed=false]>span { display: none; }
.banner-auto span { display: grid; place-items: center; }

.home-support { padding-top: 4px; }
.services-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  border-block: 1px solid var(--line);
}
.service-link {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.service-link + .service-link { border-left: 1px solid var(--line); }
.service-link:hover { background: var(--subtle); text-decoration: underline; }
.service-link svg { width: 19px; height: 19px; flex: none; }

.choice-options { margin-bottom: 11px; }
.choice-options .pill { min-height: 44px; padding-inline: 15px; font-size: 14px; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 10px 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.choice-card[data-recommended=true] { border-color: var(--accent); }
.choice-art { min-width: 0; overflow: hidden; padding-block: 6px; }
.choice-art img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(.92) contrast(1.13);
  transform: scale(1.19);
  transform-origin: 50% 54%;
}
.choice-copy { min-width: 0; display: grid; align-content: center; gap: 4px; padding-block: 7px; }
.choice-copy h3 { font-size: clamp(20px, 2.15vw, 28px); }
.choice-copy .product-price { font-size: 17px; line-height: 22px; }
.choice-feature { color: #4c4f50; line-height: 1.32; }
.choice-copy .actions { margin-top: 5px; gap: 5px; }
.choice-copy .pill { min-height: 44px; padding-inline: 13px; font-size: 14px; }

.brand-band { padding-block-end: var(--section-gap); }
.brand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  background: var(--subtle);
  border-radius: 24px;
  overflow: hidden;
}
.brand-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.85;
  display: block;
  object-fit: cover;
  object-position: 50% 32%;
}
.brand-action {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 10px;
  padding: clamp(18px, 3.5vw, 46px);
}
.brand-action h3 { font-size: 25px; line-height: 1.15; }
.brand-action p { color: #4c4f50; max-width: 33ch; }
.brand-action .pill { margin-top: 4px; }
.coffee-advice {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 470px);
  justify-content: center;
  align-items: center;
  gap: 14px clamp(20px, 4vw, 48px);
  padding: 23px clamp(18px, 3vw, 36px);
  margin-block-start: var(--section-gap);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.coffee-advice-copy h3 { font-size: 19px; line-height: 1.24; margin-bottom: 4px; }
.coffee-advice-copy p, .coffee-advice-status { color: var(--muted); font-size: 14px; }
.coffee-advice-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 7px 8px;
  align-items: start;
}
.coffee-advice-form input[type=email] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid #a5aaa8;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.coffee-advice-status { grid-column: 1 / -1; }
.coffee-advice-status:empty { display: none; }

@media (max-width: 1023px) {
  .banner-copy { padding-inline: 20px; }
  .choice-copy .pill { padding-inline: 9px; }
}
@media (max-width: 767px) {
  .home-heading { font-size: 24px; line-height: 1.14; margin-bottom: 12px; }
  .home-heading span { font-size: .86em; }
  .home-banner { padding-top: 8px; }
  .home-support { padding-top: 3px; }
  .service-link { min-height: 47px; gap: 5px; font-size: 13px; }
  .service-link svg { width: 16px; height: 16px; }
  .choice-grid { grid-template-columns: 1fr; gap: 8px; }
  .choice-card { border-radius: 19px; padding: 7px 8px; gap: 6px; }
  .choice-art img { transform: scale(1.24); }
  .choice-feature { font-size: 14px; }
  .choice-copy .pill { font-size: 13px; padding-inline: 8px; }
}
@media (max-width: 699px) {
  [data-banner] { border-radius: 19px; }
  .banner-slide { display: flex; flex-direction: column; border-radius: 19px; }
  .banner-copy { padding: 10px 14px; gap: 3px; }
  .banner-copy :is(h1,h2) { font-size: 33px; line-height: 1.07; letter-spacing: -.04em; }
  .banner-copy .pill { margin-top: 4px; min-height: 44px; font-size: 14px; padding-inline: 16px; }
  .banner-feature { font-size: 14px; }
  .banner-slide picture { aspect-ratio: 4 / 5; }
  .brand-grid { grid-template-columns: 1fr; border-radius: 19px; }
  .brand-grid img { aspect-ratio: 1.67; object-position: 50% 42%; }
  .brand-action { padding: 14px 16px 16px; gap: 6px; }
  .brand-action h3 { font-size: 21px; }
  .brand-action p { max-width: none; font-size: 14px; }
  .brand-action .pill { min-height: 44px; }
  .coffee-advice { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; border-radius: 16px; gap: 10px; }
  .coffee-advice-form .pill { padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 359px) {
  .home-heading { font-size: 22px; }
  .banner-copy :is(h1,h2) { font-size: 31px; }
  .choice-card { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
  .choice-copy .pill { padding-inline: 5px; }
  .choice-copy .actions { gap: 4px; }
}
@media (max-height: 610px) and (max-width: 699px) {
  .banner-copy { padding-block: 7px; }
  .banner-slide picture { aspect-ratio: 4 / 5; max-height: calc(100svh - 246px); }
  .banner-slide img { object-fit: cover; object-position: 50% 54%; }
}