/* =====================================================================
   MORE MATCHA — homepage styles 2.0 ("Fresh Editorial")
   File: /user/documents/more-matcha/more-matcha.css  (Header field: ?v=5)

   SAFETY RULES (see CLAUDE.md):
   - Every selector starts with #more-matcha-home. Nothing global
     (exceptions: @font-face, and the :has()-scoped Shoptet section 13).
   - Only .mm-* classes and [data-mm-*] attributes.
   - No resets outside the wrapper.

   What changed from 1.0: real brand fonts, larger type scale, 3 surfaces instead of 7,
   matcha-green CTAs, no overlaps / blends / marquee / drifting decoration, visible menu,
   prices on the drink cards, image-carried section transitions, visual location section.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. Brand fonts (WOFF2 in /user/documents/more-matcha/fonts/)
   Private family names ("MM …") so only the homepage uses them: the Kontakt and
   Pobočky pages keep their own font stacks unchanged.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "MM Ayr Modern";
  /* the only cut we have is Ayr Modern Bold (registered as weight 400): map every weight to it,
     so the browser never fakes a bolder version */
  src: url("/user/documents/more-matcha/fonts/mm-ayr-modern-bold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MM Caligane";
  /* full Caligane Regular (incl. Czech accents); used sparingly as a handwritten accent */
  src: url("/user/documents/more-matcha/fonts/mm-caligane-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   1. Design tokens + wrapper base
   --------------------------------------------------------------------- */
#more-matcha-home {
  /* Brand palette (brand manual 3.1) */
  --mm-ink: #1C1C1E;
  --mm-ink-2: #3A3A3C;
  --mm-sage: #718A6E;
  --mm-sage-light: #BED0BB;
  --mm-sage-deep: #3E4C3C;     /* small coloured text: ≥ 7:1 on cream and light sage */
  --mm-paper: #F4F6F4;
  --mm-white: #FFFFFF;

  /* 3 surfaces */
  --mm-cream: #F3ECE0;         /* hero text area, Proč, locations */
  --mm-cream-light: #FAF6EF;   /* location cards on cream */
  --mm-wall: #DCD8CC;          /* studio wall sampled from the hero footage (media fallback) */
  --mm-deep: #1F2B12;          /* closing + footer */

  /* One action colour: matcha. #FFFFFF on #557F27 = 4.73:1 (WCAG AA for normal text) */
  --mm-matcha: #557F27;
  --mm-matcha-hover: #466A1F;  /* darker on hover: 6.2:1 */

  --mm-line: rgba(28, 28, 30, 0.16);

  /* Type */
  --mm-font-display: "MM Ayr Modern", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --mm-font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-script: "MM Caligane", "Brush Script MT", cursive;

  --mm-fs-hero: clamp(40px, 5.3vw, 96px);
  --mm-fs-statement: clamp(34px, 4.8vw, 84px);
  --mm-fs-h2: clamp(36px, 4.6vw, 76px);
  --mm-fs-h3: clamp(20px, 12px + 1vw, 28px);
  --mm-fs-lead: clamp(17px, 16px + 0.3vw, 20px);

  /* Layout — 8 px grid */
  --mm-gutter: clamp(16px, 4vw, 64px);
  --mm-col-gap: clamp(16px, 2vw, 32px);
  --mm-max: 1440px;              /* content width; backgrounds, hero video and header bar stay full width.
                                    The header logo/icons use the same width (§ 13), so all edges line up. */
  --mm-panel-out: clamp(12px, 2vw, 32px);   /* outer margin of rounded panels (drinks, closing) */
  --mm-section: clamp(80px, 10vw, 160px);
  --mm-radius: clamp(14px, 1.4vw, 22px);
  --mm-header-space: 80px;     /* height of the overlaying header; script.js measures the real one */
  --mm-scroll-offset: 24px;

  /* Motion */
  --mm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  display: block;
  background: var(--mm-cream);
  color: var(--mm-ink);
  font-family: var(--mm-font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

#more-matcha-home,
#more-matcha-home *,
#more-matcha-home *::before,
#more-matcha-home *::after {
  box-sizing: border-box;
}

#more-matcha-home :where(h1, h2, h3, h4, p, ul, figure, blockquote, dl, dd) {
  margin: 0;
}

#more-matcha-home :where(h1, h2, h3, h4) {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: -0.01em;
  word-spacing: 0.14em;              /* Ayr Modern's space is very narrow */
  hyphens: auto;
  overflow-wrap: anywhere;
}

#more-matcha-home :focus-visible {
  outline: 2px solid var(--mm-ink);
  outline-offset: 4px;
}

#more-matcha-home .mm-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The script accent (Caligane): the logo's "matcha" gesture, used only on accent-free brand words */
#more-matcha-home .mm-script {
  font-family: var(--mm-font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mm-matcha);
}

#more-matcha-home .mm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------
   2. Shared UI: button (matcha), text link
   --------------------------------------------------------------------- */
#more-matcha-home .mm-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px 0 26px;
  border-radius: 999px;
  background: var(--mm-matcha);
  color: var(--mm-white);
  font: 500 16px/1.2 var(--mm-font-body);
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.16s ease-out;
}

#more-matcha-home .mm-button__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--mm-ease-out);
}

#more-matcha-home .mm-button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-home .mm-button:hover {
    background: var(--mm-matcha-hover);
  }
  #more-matcha-home .mm-button:hover .mm-button__arrow {
    transform: translateY(3px);
  }
  #more-matcha-home .mm-button:hover .mm-button__arrow--right {
    transform: translateX(3px);
  }
}

/* Text link: underline always visible (never hover-only) */
#more-matcha-home .mm-link {
  color: var(--mm-ink);
  font: 500 16px/1.2 var(--mm-font-body);
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--mm-ease-out);
}

#more-matcha-home .mm-link--light {
  color: var(--mm-paper);
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-home .mm-link:hover {
    background-size: 30% 1px;
  }
}


/* ---------------------------------------------------------------------
   3. HERO — "Studio Pour"
   < 900px : 1:1-ish video under the header, text below on cream (all in the first screen)
   ≥ 900px : full-bleed video, reframed so the cup sits further left; the headline
             is set large on the freed wall; quick-info strip along the bottom.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-hero {
  position: relative;
  background: var(--mm-cream);
  color: var(--mm-ink);
}

#more-matcha-home .mm-hero__media {
  position: relative;
  height: calc(100vw + var(--mm-header-space));
  max-height: 72svh;
  overflow: hidden;
  background: var(--mm-wall);
  /* soft fade of the footage into the cream below (transition, not a hard edge) */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

#more-matcha-home .mm-hero__media-inner {
  position: absolute;
  inset: 0;
}

#more-matcha-home .mm-hero__still,
#more-matcha-home .mm-hero__still img,
#more-matcha-home .mm-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

#more-matcha-home .mm-hero__still--start { z-index: 0; }
#more-matcha-home .mm-hero__still--end   { z-index: 1; }

#more-matcha-home .mm-hero__video {
  z-index: 2;
  opacity: 0;                          /* shown only once real frames are playing */
  transition: opacity 0.35s ease;
}

#more-matcha-home .mm-hero--playing .mm-hero__video {
  opacity: 1;
}

#more-matcha-home .mm-hero__content {
  position: relative;
  z-index: 4;
  padding: clamp(20px, 5vw, 32px) var(--mm-gutter) 0;
}

#more-matcha-home .mm-hero__title {
  font-size: var(--mm-fs-hero);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* script "matcha": slightly larger and tucked into the line, like the logo lockup */
#more-matcha-home .mm-hero__title .mm-script {
  display: inline-block;
  font-size: 1.14em;
  line-height: 0.8;
  margin-left: -0.04em;
  transform: translateY(0.06em) rotate(-3deg);
}

#more-matcha-home .mm-hero__sub {
  margin-top: clamp(12px, 1.4vw, 24px);
  font: 500 var(--mm-fs-lead)/1.4 var(--mm-font-body);
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-hero__line {
  display: block;
  overflow: clip;
  padding: 0.1em 0 0.12em;
  margin: -0.1em 0 -0.12em;
}

#more-matcha-home .mm-hero__line > span {
  display: block;
}

#more-matcha-home .mm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(20px, 2.4vw, 36px);
}

/* Quick-info strip */
#more-matcha-home .mm-hero__info {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 6px;
  margin: 28px var(--mm-gutter) 0;
  padding: 16px 0 28px;
  list-style: none;
  border-top: 1px solid var(--mm-line);
  font: 400 14px/1.45 var(--mm-font-body);
  color: var(--mm-ink);
}

#more-matcha-home .mm-hero__info-label {
  display: inline-block;
  min-width: 78px;
  font-weight: 500;
  color: var(--mm-sage-deep);
}

@media (min-width: 600px) and (max-width: 899px) {
  #more-matcha-home .mm-hero__media {
    height: calc(56.25vw + var(--mm-header-space));
    max-height: none;
  }
  #more-matcha-home .mm-hero__info {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 6px 32px;
  }
  #more-matcha-home .mm-hero__info-label {
    display: block;
    min-width: 0;
  }
}

@media (min-width: 900px) {
  #more-matcha-home .mm-hero {
    height: clamp(560px, 56.25vw, 1100px);   /* 16:9 like the video: nothing cut at the top */
    background: var(--mm-cream);
  }

  #more-matcha-home .mm-hero__media {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
  }

  /* Reframe: show the RIGHT part of the footage (cup moves left, whisk stays in frame),
     plus a light shift for wide screens where the frame has no spare width. */
  #more-matcha-home .mm-hero__media-inner {
    bottom: 0;                         /* the footage fades out into the cream info band (mask) */
    transform: translateX(-5%) scale(1.06);
    transform-origin: 0% 60%;
  }

  #more-matcha-home .mm-hero__still,
  #more-matcha-home .mm-hero__still img,
  #more-matcha-home .mm-hero__video {
    object-position: 100% 45%;
  }

  #more-matcha-home .mm-hero__content {
    position: absolute;
    top: calc(var(--mm-header-space) + clamp(32px, 7vh, 96px));
    left: 47%;
    right: calc(max(0px, (100% - var(--mm-max)) / 2) + var(--mm-gutter));
    padding: 0;
  }

  #more-matcha-home .mm-hero__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    align-content: center;
    gap: 0 32px;
    margin: 0;
    padding: 0 calc(max(0px, (100% - var(--mm-max)) / 2) + var(--mm-gutter));
    border-top: 0;
    background: none;
  }

  #more-matcha-home .mm-hero__info-label {
    min-width: 0;
    margin-right: 10px;
  }
}

/* 900–1279 px (4:3-ish screens): the frame overflows more, so shifting right would crop
   the logo on the cup — keep the footage centred and unscaled here. */
@media (min-width: 900px) and (max-width: 1279px) {
  #more-matcha-home .mm-hero__media-inner { transform: none; }
  #more-matcha-home .mm-hero__still,
  #more-matcha-home .mm-hero__still img,
  #more-matcha-home .mm-hero__video { object-position: 50% 45%; }
}

/* Hero motion: text rises in right away (≈0.2–1.1 s) — it never waits for the video.
   The end still cross-fades in at ~3.6 s only as the no-JS safety net ("mini pour"). */
@media (prefers-reduced-motion: no-preference) {
  #more-matcha-home .mm-hero__still--end {
    animation: mm-fade-in 1.2s ease 3.6s both;
  }
  #more-matcha-home .mm-hero__line > span {
    animation: mm-line-up 0.85s var(--mm-ease-out) 0.15s both;
  }
  #more-matcha-home .mm-hero__title .mm-hero__line:nth-child(2) > span { animation-delay: 0.25s; }
  #more-matcha-home .mm-hero__sub .mm-hero__line > span { animation-delay: 0.4s; }
  #more-matcha-home .mm-hero__actions,
  #more-matcha-home .mm-hero__info {
    animation: mm-fade-up 0.8s var(--mm-ease-out) 0.55s both;
  }

  /* video mode: the end still waits for the video to finish */
  #more-matcha-home .mm-hero--video .mm-hero__still--end {
    animation: none;
    opacity: 0;
  }
  #more-matcha-home .mm-hero--video.mm-hero--done .mm-hero__still--end {
    opacity: 1;
  }
  #more-matcha-home .mm-hero--static .mm-hero__still--end {
    animation: none;
  }
}

@keyframes mm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mm-line-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

@keyframes mm-fade-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* ---------------------------------------------------------------------
   4. ODKUD JE NAŠE MATCHA — cream (continues from the hero's info band).
   Heading → Uji photograph beside the facts → real preparation photos.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-why,
#more-matcha-home .mm-drinks,
#more-matcha-home .mm-place {
  scroll-margin-top: var(--mm-scroll-offset);
}

#more-matcha-home .mm-why {
  background: var(--mm-cream);
  padding: var(--mm-section) 0 clamp(72px, 9vw, 140px);
}

#more-matcha-home .mm-why__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
}

#more-matcha-home .mm-why__title {
  font-size: var(--mm-fs-statement);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

#more-matcha-home .mm-why__media picture {
  display: block;
}

#more-matcha-home .mm-why__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--mm-radius);
}

#more-matcha-home .mm-why__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 12px;
  font: 400 13px/1.4 var(--mm-font-body);
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-why__text {
  max-width: 44ch;
  font-size: var(--mm-fs-lead);
  line-height: 1.6;
  color: var(--mm-ink-2);
  hyphens: manual;
  text-wrap: pretty;
}

#more-matcha-home .mm-why__list {
  margin-top: clamp(28px, 3vw, 44px);
  padding: 0;
  list-style: none;
}

#more-matcha-home .mm-why__item {
  display: grid;
  gap: 4px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--mm-line);
}

#more-matcha-home .mm-why__term {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: var(--mm-fs-h3);
  line-height: 1.15;
  word-spacing: 0.14em;
}

#more-matcha-home .mm-why__desc {
  font-size: 16px;
  color: var(--mm-ink-2);
}

@media (min-width: 1000px) {
  #more-matcha-home .mm-why__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--mm-col-gap);
    row-gap: clamp(56px, 6vw, 96px);
  }
  #more-matcha-home .mm-why__title { grid-column: 1 / -1; }
  #more-matcha-home .mm-why__media { grid-column: 1 / span 7; }
  #more-matcha-home .mm-why__body  { grid-column: 9 / span 4; align-self: end; padding-bottom: 32px; }
}

/* Real preparation photos (stills from our own ASMR footage): 3 steps.
   Phone: swipe row with the next photo peeking; ≥ 700 px: 3 columns. */
#more-matcha-home .mm-prep {
  max-width: var(--mm-max);
  margin: clamp(72px, 9vw, 140px) auto 0;
  padding: 0 var(--mm-gutter);
}

#more-matcha-home .mm-prep__title {
  font-size: clamp(28px, 2.4vw + 12px, 48px);
  line-height: 1;
}

#more-matcha-home .mm-prep__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 12px;
  margin: clamp(24px, 3vw, 40px) calc(var(--mm-gutter) * -1) 0;
  padding: 0 var(--mm-gutter) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mm-gutter);
  scrollbar-width: none;
}

#more-matcha-home .mm-prep__list::-webkit-scrollbar {
  display: none;
}

#more-matcha-home .mm-prep__step {
  min-width: 0;
  scroll-snap-align: start;
}

#more-matcha-home .mm-prep__photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius);
  background: var(--mm-wall);
}

#more-matcha-home .mm-prep__photo picture,
#more-matcha-home .mm-prep__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-home .mm-prep__photo img {
  object-fit: cover;
}

#more-matcha-home .mm-prep__text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.4;
}

#more-matcha-home .mm-prep__num {
  flex: none;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--mm-matcha);
}

@media (min-width: 700px) {
  #more-matcha-home .mm-prep__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: clamp(12px, 1.6vw, 28px);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    overflow: visible;
  }
}


/* ---------------------------------------------------------------------
   5. NAŠE DRINKY — a rounded light-sage panel on the cream page
   (same shape as the closing card), no gradient bands.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-drinks {
  position: relative;
  padding: 0 var(--mm-panel-out);
  background: var(--mm-cream);
}

#more-matcha-home .mm-drinks:focus,
#more-matcha-home .mm-place:focus {
  outline: none;
}

#more-matcha-home .mm-drinks__inner {
  /* inner side padding = page gutter − panel margin, so the text lines up with the other sections */
  --mm-panel-pad: max(16px, calc(var(--mm-gutter) - var(--mm-panel-out)));
  overflow: hidden;
  max-width: calc(var(--mm-max) - 2 * var(--mm-panel-out));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 104px) var(--mm-panel-pad);
  border-radius: calc(var(--mm-radius) * 1.4);
  background: var(--mm-sage-light);
}

#more-matcha-home .mm-drinks__head {
  display: grid;
  gap: 16px var(--mm-col-gap);
}

#more-matcha-home .mm-drinks__title {
  font-size: var(--mm-fs-h2);
  line-height: 0.98;
}

#more-matcha-home .mm-drinks__lead {
  max-width: 32ch;
  font-size: var(--mm-fs-lead);
  color: var(--mm-ink-2);
}

@media (min-width: 900px) {
  #more-matcha-home .mm-drinks__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  #more-matcha-home .mm-drinks__title { grid-column: 1 / span 7; }
  #more-matcha-home .mm-drinks__lead  { grid-column: 9 / span 4; padding-bottom: 8px; }
}

#more-matcha-home .mm-drinks__stage {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Phone: horizontal swipe row, next card peeking */
#more-matcha-home .mm-drinks__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  margin: 0 calc(var(--mm-panel-pad) * -1);
  padding: 0 var(--mm-panel-pad) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mm-panel-pad);
  scrollbar-width: none;
}

#more-matcha-home .mm-drinks__list::-webkit-scrollbar {
  display: none;
}

#more-matcha-home .mm-drink {
  scroll-snap-align: start;
  min-width: 0;
}

/* Tablet + desktop: 3 equal tiles on one baseline (no carousel) */
@media (min-width: 700px) {
  #more-matcha-home .mm-drinks__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: clamp(12px, 1.6vw, 28px);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Rounded, edge-to-edge photos: no frame, no shadow. Per-photo crop so every cup reads at a similar size. */
#more-matcha-home .mm-drink__photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius);
  background: var(--mm-wall);
}

#more-matcha-home .mm-drink__photo picture,
#more-matcha-home .mm-drink__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-home .mm-drink__photo img {
  object-fit: cover;
  transition: transform 0.9s var(--mm-ease-out);
}

#more-matcha-home .mm-drink--latte img      { object-position: 42% 55%; transform: scale(1.12); transform-origin: 42% 55%; }
#more-matcha-home .mm-drink--coco img       { object-position: 50% 55%; }
#more-matcha-home .mm-drink--strawberry img { object-position: 50% 58%; transform: scale(1.45); transform-origin: 51% 60%; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #more-matcha-home .mm-drink--latte:hover img      { transform: scale(1.16); }
  #more-matcha-home .mm-drink--coco:hover img       { transform: scale(1.04); }
  #more-matcha-home .mm-drink--strawberry:hover img { transform: scale(1.5); }
}

#more-matcha-home .mm-drink__cat {
  margin-top: 18px;
  font: 500 13px/1.3 var(--mm-font-body);
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-drink__name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: clamp(22px, 12px + 1.2vw, 32px);
  line-height: 1.05;
}

#more-matcha-home .mm-drink__price {
  font: 500 17px/1.2 var(--mm-font-body);
  letter-spacing: 0;
  word-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "Celé menu" row (the full menu moves to its own page) */
#more-matcha-home .mm-drinks__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 28px;
  border-top: 1px solid rgba(28, 28, 30, 0.14);
}

#more-matcha-home .mm-drinks__more-text {
  max-width: 44ch;
  font-size: var(--mm-fs-lead);
  color: var(--mm-ink-2);
}


/* ---------------------------------------------------------------------
   5b. MATCHA DOMŮ — product showcase (cream). Links to the real Shoptet product
   pages only: NO prices, NO cart (Shoptet owns price, stock and checkout).
   One .mm-product card per product: 1–2 cards = grid, 3+ = grid that wraps;
   phones: stacked, 3+ cards become a swipe row.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-shop {
  scroll-margin-top: var(--mm-scroll-offset);
  background: var(--mm-cream);
}

#more-matcha-home .mm-shop:focus {
  outline: none;
}

#more-matcha-home .mm-shop__inner {
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--mm-gutter) clamp(72px, 9vw, 140px);
}

#more-matcha-home .mm-shop__head {
  display: grid;
  gap: 16px var(--mm-col-gap);
}

#more-matcha-home .mm-shop__title {
  font-size: var(--mm-fs-h2);
  line-height: 0.98;
}

#more-matcha-home .mm-shop__lead {
  max-width: 40ch;
  font-size: var(--mm-fs-lead);
  color: var(--mm-ink-2);
}

@media (min-width: 900px) {
  #more-matcha-home .mm-shop__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  #more-matcha-home .mm-shop__title { grid-column: 1 / span 6; }
  #more-matcha-home .mm-shop__lead  { grid-column: 8 / span 5; padding-bottom: 8px; }
}

#more-matcha-home .mm-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  #more-matcha-home .mm-products {
    grid-template-columns: repeat(auto-fit, minmax(max(300px, calc((100% - 2 * 24px) / 3)), 1fr));
  }
}

@media (max-width: 699px) {
  #more-matcha-home .mm-products:has(> .mm-product:nth-child(3)) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    margin-left: calc(var(--mm-gutter) * -1);
    margin-right: calc(var(--mm-gutter) * -1);
    padding: 0 var(--mm-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mm-gutter);
    scrollbar-width: none;
  }
  #more-matcha-home .mm-products::-webkit-scrollbar { display: none; }
  #more-matcha-home .mm-product { scroll-snap-align: start; }
}

#more-matcha-home .mm-product {
  position: relative;            /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--mm-radius);
  background: var(--mm-cream-light);
  color: var(--mm-ink);
}

#more-matcha-home .mm-product__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;            /* same as the product photos (1200 × 800) */
  background: #FDFDFD;            /* same white as the photos */
}

/* small label on the photo, e.g. "Prémiová" (Miyabi) */
#more-matcha-home .mm-product__badge {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 1.4vw, 20px);
  left: clamp(12px, 1.4vw, 20px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mm-ink);
  color: var(--mm-white);
  font: 500 13px/1.2 var(--mm-font-body);
  letter-spacing: 0.02em;
}

#more-matcha-home .mm-product__photo picture,
#more-matcha-home .mm-product__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-home .mm-product__photo img {
  object-fit: cover;
  transition: transform 0.9s var(--mm-ease-out);
}

#more-matcha-home .mm-product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.4vw, 32px);
}

#more-matcha-home .mm-product__meta {
  font: 500 13px/1.3 var(--mm-font-body);
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-product__name {
  margin-top: 6px;
  font-size: clamp(32px, 3vw + 8px, 52px);
  line-height: 0.95;
}

#more-matcha-home .mm-product__notes {
  margin-top: 10px;
  font-size: 16px;
  color: var(--mm-ink-2);
}

#more-matcha-home .mm-product__cta {
  color: var(--mm-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  font: 500 16px/1.2 var(--mm-font-body);
  background: linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat;
  padding-bottom: 6px;
}

/* the whole card is clickable */
#more-matcha-home .mm-product__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

#more-matcha-home .mm-product:focus-within {
  outline: 2px solid var(--mm-ink);
  outline-offset: 4px;
}

#more-matcha-home .mm-product__cta:focus-visible {
  outline: none;                 /* the card shows the focus ring */
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #more-matcha-home .mm-product:hover .mm-product__photo img { transform: scale(1.03); }
  #more-matcha-home .mm-product:hover .mm-button__arrow--right { transform: translateX(3px); }
}


/* ---------------------------------------------------------------------
   6. KDE NÁS NAJDETE — multi-location system (cream).
   One .mm-location card per branch; the layout adapts to the number of cards:
     1 card  → wide feature card (photo + details side by side)
     2+      → grid of equal cards (3 per row max on desktop)
     phones  → 1 card full width; 2+ cards become a swipe row
   --------------------------------------------------------------------- */
#more-matcha-home .mm-place {
  position: relative;
  background: var(--mm-cream);
}

#more-matcha-home .mm-place__inner {
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--mm-gutter) clamp(72px, 9vw, 140px);
}

#more-matcha-home .mm-place__head {
  display: grid;
  gap: 16px var(--mm-col-gap);
}

#more-matcha-home .mm-place__title {
  font-size: var(--mm-fs-h2);
  line-height: 0.98;
}

#more-matcha-home .mm-place__lead {
  max-width: 36ch;
  font-size: var(--mm-fs-lead);
  color: var(--mm-ink-2);
}

#more-matcha-home .mm-place__all {
  justify-self: start;
}

@media (min-width: 900px) {
  #more-matcha-home .mm-place__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  #more-matcha-home .mm-place__title { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  #more-matcha-home .mm-place__lead  { grid-column: 8 / span 5; }
  #more-matcha-home .mm-place__all   { grid-column: 8 / span 5; padding-bottom: 8px; }
}

/* --- the card list ---
   NOTE: Shoptet's content editor strips <dl>/<dt>/<dd> — facts use plain div/span. */
#more-matcha-home .mm-locations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(40px, 5vw, 72px);
  padding: 0;
  list-style: none;
}

/* phones: 2+ cards → swipe row with the next card peeking */
@media (max-width: 699px) {
  #more-matcha-home .mm-locations:has(> .mm-location:nth-child(2)) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    margin-left: calc(var(--mm-gutter) * -1);
    margin-right: calc(var(--mm-gutter) * -1);
    padding: 0 var(--mm-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mm-gutter);
    scrollbar-width: none;
  }
  #more-matcha-home .mm-locations::-webkit-scrollbar { display: none; }
  #more-matcha-home .mm-location { scroll-snap-align: start; }
}

/* tablet/desktop: 2+ cards → equal grid (auto-fits 2 or 3 per row) */
@media (min-width: 700px) {
  #more-matcha-home .mm-locations {
    grid-template-columns: repeat(auto-fit, minmax(max(300px, calc((100% - 2 * 24px) / 3)), 1fr));
  }
}

/* --- one card --- */
#more-matcha-home .mm-location {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--mm-radius);
  background: var(--mm-cream-light);
}

#more-matcha-home .mm-location__photo {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mm-wall);
}

#more-matcha-home .mm-location__photo picture,
#more-matcha-home .mm-location__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-home .mm-location__photo img {
  object-fit: cover;
  object-position: 50% 42%;
}

#more-matcha-home .mm-location__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.4vw, 36px);
}

#more-matcha-home .mm-location__area {
  font: 500 13px/1.3 var(--mm-font-body);
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-location__name {
  margin-top: 6px;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 0.95;
}

#more-matcha-home .mm-location__facts {
  margin-top: clamp(20px, 2.4vw, 32px);
}

#more-matcha-home .mm-location__fact {
  display: grid;
  grid-template-columns: clamp(64px, 18%, 84px) minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--mm-line);
  font-size: 16px;
  line-height: 1.5;
}

#more-matcha-home .mm-location__label {
  font-size: 13px;
  line-height: 1.85;
  color: var(--mm-sage-deep);
}

#more-matcha-home .mm-location__value strong {
  font-weight: 600;
}

#more-matcha-home .mm-location__note {
  color: var(--mm-ink-2);
}

#more-matcha-home .mm-location__score {
  margin-right: 6px;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

/* Star rating that matches the number: grey stars + a green layer cut to rating/5.
   The value comes from data-mm-rating (Shoptet's editor may strip inline styles). */
#more-matcha-home .mm-rating {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(85, 127, 39, 0.22);
}

#more-matcha-home .mm-rating::before {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--mm-rating, 5) / 5 * 100%);
  overflow: hidden;
  color: var(--mm-matcha);
}

#more-matcha-home .mm-rating[data-mm-rating="4.0"] { --mm-rating: 4.0; }
#more-matcha-home .mm-rating[data-mm-rating="4.1"] { --mm-rating: 4.1; }
#more-matcha-home .mm-rating[data-mm-rating="4.2"] { --mm-rating: 4.2; }
#more-matcha-home .mm-rating[data-mm-rating="4.3"] { --mm-rating: 4.3; }
#more-matcha-home .mm-rating[data-mm-rating="4.4"] { --mm-rating: 4.4; }
#more-matcha-home .mm-rating[data-mm-rating="4.5"] { --mm-rating: 4.5; }
#more-matcha-home .mm-rating[data-mm-rating="4.6"] { --mm-rating: 4.6; }
#more-matcha-home .mm-rating[data-mm-rating="4.7"] { --mm-rating: 4.7; }
#more-matcha-home .mm-rating[data-mm-rating="4.8"] { --mm-rating: 4.8; }
#more-matcha-home .mm-rating[data-mm-rating="4.9"] { --mm-rating: 4.9; }
#more-matcha-home .mm-rating[data-mm-rating="5.0"] { --mm-rating: 5; }

#more-matcha-home .mm-location__fact a {
  white-space: nowrap;
  color: var(--mm-ink);
  text-underline-offset: 3px;
}

#more-matcha-home .mm-location__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: auto;              /* buttons align at the bottom of equal-height cards */
  padding-top: 28px;
}

/* ONE card only (today): wide feature layout, photo beside the details */
@media (min-width: 900px) {
  #more-matcha-home .mm-location:only-child {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  #more-matcha-home .mm-location:only-child .mm-location__photo {
    aspect-ratio: auto;
    min-height: clamp(460px, 40vw, 620px);
  }
  #more-matcha-home .mm-location:only-child .mm-location__body {
    justify-content: center;
    padding: clamp(40px, 5vw, 88px);
  }
  #more-matcha-home .mm-location:only-child .mm-location__name {
    font-size: clamp(64px, 7.5vw, 120px);
  }
  #more-matcha-home .mm-location:only-child .mm-location__facts {
    max-width: 520px;
  }
  #more-matcha-home .mm-location:only-child .mm-location__actions {
    margin-top: 0;
    padding-top: 36px;
  }
}

/* --- Reviews: real Google reviews, quoted exactly. Swipe / arrow slider, no autoplay. --- */
#more-matcha-home .mm-reviews {
  margin-top: clamp(72px, 9vw, 140px);
}

#more-matcha-home .mm-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

#more-matcha-home .mm-reviews__title {
  font-size: clamp(28px, 2.4vw + 12px, 48px);
  line-height: 1;
}

#more-matcha-home .mm-reviews__nav {
  display: flex;
  gap: 8px;
}

#more-matcha-home .mm-reviews__nav:empty {
  display: none;
}

#more-matcha-home .mm-reviews__btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(28, 28, 30, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--mm-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

#more-matcha-home .mm-reviews__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#more-matcha-home .mm-reviews__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-home .mm-reviews__btn:not(:disabled):hover {
    background: var(--mm-cream-light);
  }
}

#more-matcha-home .mm-reviews__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 12px;
  margin: clamp(24px, 3vw, 40px) calc(var(--mm-gutter) * -1) 0;
  padding: 0 var(--mm-gutter) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mm-gutter);
  scrollbar-width: none;
}

#more-matcha-home .mm-reviews__list::-webkit-scrollbar {
  display: none;
}

@media (min-width: 700px) {
  #more-matcha-home .mm-reviews__list {
    grid-auto-columns: calc((100% - 12px) / 2.2);
  }
}

@media (min-width: 1000px) {
  #more-matcha-home .mm-reviews__list {
    grid-auto-columns: calc((100% - 2 * 24px) / 3);
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 8px;
    scroll-padding-inline: 0;
  }
}

#more-matcha-home .mm-review {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--mm-radius);
  background: var(--mm-cream-light);
  scroll-snap-align: start;
}

#more-matcha-home .mm-review__stars {
  color: var(--mm-matcha);
  font-size: 16px;
  letter-spacing: 0.1em;
}

#more-matcha-home .mm-review__text {
  flex: 1;
  margin-top: 16px;
  font: 500 clamp(18px, 15px + 0.5vw, 22px)/1.45 var(--mm-font-body);
  letter-spacing: -0.01em;
}

#more-matcha-home .mm-review__author {
  margin-top: 20px;
  font: 500 14px/1.4 var(--mm-font-body);
  color: var(--mm-ink-2);
}

#more-matcha-home .mm-reviews__note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mm-ink-2);
}

#more-matcha-home .mm-reviews__note a {
  color: var(--mm-ink);
  font-weight: 500;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------
   7. CLOSING — rounded swirl card sitting on the cream → deep-green change;
   the footer continues the deep green below it.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-closing-wrap {
  padding: 0 var(--mm-panel-out);
  background: linear-gradient(to bottom, var(--mm-cream) 50%, var(--mm-deep) 50%);
}

#more-matcha-home .mm-closing {
  position: relative;
  display: grid;
  align-items: center;
  max-width: calc(var(--mm-max) - 2 * var(--mm-panel-out));
  min-height: clamp(460px, 72vh, 760px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(var(--mm-radius) * 1.4);
  background: var(--mm-deep);
  color: var(--mm-paper);
}

#more-matcha-home .mm-closing__media {
  position: absolute;
  inset: 0;
}

#more-matcha-home .mm-closing__media picture,
#more-matcha-home .mm-closing__media img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-home .mm-closing__media img {
  object-fit: cover;
  object-position: 55% 50%;
  transform: translate3d(0, calc(var(--mm-par, 0) * 4%), 0) scale(1.1);
}

/* functional scrim: keeps the logo/text readable */
#more-matcha-home .mm-closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 28, 8, 0.7) 0%, rgba(20, 28, 8, 0.32) 55%, rgba(20, 28, 8, 0.05) 85%);
}

#more-matcha-home .mm-closing__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(48px, 7vw, 112px) clamp(24px, 5vw, 96px);
}

/* phones: the card only as tall as its content */
@media (max-width: 699px) {
  #more-matcha-home .mm-closing { min-height: 0; }
  #more-matcha-home .mm-closing__content { padding: 56px 24px 48px; }
}

#more-matcha-home .mm-closing__logo {
  display: block;
  width: min(100%, 900px);
  height: auto;
  fill: var(--mm-paper);
}

#more-matcha-home .mm-closing__line {
  margin-top: clamp(20px, 2.6vw, 40px);
  font: 500 clamp(22px, 14px + 1.4vw, 36px)/1.3 var(--mm-font-body);
}

#more-matcha-home .mm-closing__line .mm-script {
  font-size: 1.4em;
  line-height: 0.8;
  color: var(--mm-sage-light);
}

#more-matcha-home .mm-closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(28px, 3vw, 44px);
}

#more-matcha-home .mm-closing :focus-visible {
  outline-color: var(--mm-paper);
}


/* ---------------------------------------------------------------------
   8. FOOTER — deep matcha green (unchanged from 1.0)
   --------------------------------------------------------------------- */
#more-matcha-home .mm-footer {
  background: var(--mm-deep);
  color: var(--mm-paper);
  font: 400 15px/1.6 var(--mm-font-body);
}

#more-matcha-home .mm-footer :focus-visible {
  outline-color: var(--mm-paper);
}

#more-matcha-home .mm-footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-home .mm-footer a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

#more-matcha-home .mm-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--mm-gutter) clamp(32px, 4vw, 48px);
}

@media (min-width: 700px) {
  #more-matcha-home .mm-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  #more-matcha-home .mm-footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

#more-matcha-home .mm-footer__logo {
  display: inline-block;
  opacity: 1;
}

#more-matcha-home .mm-footer__logo svg {
  display: block;
  width: 150px;
  height: auto;
  fill: var(--mm-paper);
}

#more-matcha-home .mm-footer__tagline {
  max-width: 26ch;
  margin-top: 14px;
  color: var(--mm-sage-light);
}

#more-matcha-home .mm-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

#more-matcha-home .mm-footer__social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

#more-matcha-home .mm-footer__heading {
  margin: 0 0 10px;
  font: 500 12px/1.3 var(--mm-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-sage-light);
}

#more-matcha-home .mm-footer__links {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

#more-matcha-home .mm-footer__cta {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(244, 246, 244, 0.5);
}

#more-matcha-home .mm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: 18px var(--mm-gutter) 28px;
  border-top: 1px solid rgba(244, 246, 244, 0.15);
  font-size: 13px;
  color: var(--mm-sage-light);
}


/* ---------------------------------------------------------------------
   9. Heading lines (layout only). Scroll reveals were removed in v7:
   everything is visible immediately, so a fast scroll on a phone never shows
   empty screens. Remaining motion: hero intro + video, closing parallax, sliders.
   --------------------------------------------------------------------- */
#more-matcha-home .mm-reveal-line {
  display: block;
}


/* ---------------------------------------------------------------------
   13. SHOPTET INTEGRATION — applies ONLY on a page containing #more-matcha-home.
   Verified on the live template (template-14) on 2026-09-27/28.
   :has() limits every override to the homepage; other pages, cart, checkout and
   account are never matched.
   --------------------------------------------------------------------- */
.content-wrapper.container:has(#more-matcha-home) {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

#content:has(#more-matcha-home) {
  padding-left: 0;
  padding-right: 0;
}

.welcome-wrapper:has(#more-matcha-home) {
  padding: 0;
}

.one-column-body .welcome-wrapper .welcome:has(#more-matcha-home) {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

/* header-space fallback when script.js cannot measure the real header */
.welcome #more-matcha-home { --mm-header-space: 80px; }

@media (max-width: 991px) {
  .welcome #more-matcha-home { --mm-header-space: 106px; }
}

@media (max-width: 767px) {
  .welcome #more-matcha-home {
    --mm-header-space: 60px;
    --mm-scroll-offset: 76px;          /* the phone header stays fixed */
  }
}

/* --- Native header over the hero (homepage only) --------------------------- */
#header:has(~ #content-wrapper #more-matcha-home) {
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
  #header:has(~ #content-wrapper #more-matcha-home) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }
  body.user-action-visible #header:has(~ #content-wrapper #more-matcha-home) {
    z-index: 1003;                     /* header panels stay above Shoptet's page overlay */
  }
  #header:has(~ #content-wrapper #more-matcha-home) .navigation-in.menu,
  #header:has(~ #content-wrapper #more-matcha-home) .menu-level-1 {
    background-color: transparent;
  }
}

#header:has(~ #content-wrapper #more-matcha-home) .navigation-buttons > a,
#header:has(~ #content-wrapper #more-matcha-home) .navigation-buttons > button {
  background-color: transparent;
}

/* --- 2.0: ONE-ROW native header (≥992 px, homepage only) ---------------------
   Tested on the live template (2026-09-28, 992–1920 px): logo left (150 px ≥ manual
   minimum 121 px), nav in the slot after the logo, icons right, 80 px tall; search /
   login panels open above the hero. Shoptet's own "fitted" script still moves items
   that don't fit into its overflow button (native behaviour).
   Do NOT add justify-content to .menu-level-1 — it breaks Shoptet's menu measuring. */
@media (min-width: 992px) {
  #header:has(~ #content-wrapper #more-matcha-home),
  #header:has(~ #content-wrapper #more-matcha-home) .header-top,
  #header:has(~ #content-wrapper #more-matcha-home) .header-top-wrapper {
    height: 80px;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .header-top-wrapper {
    align-items: center;
    width: auto;
    max-width: 1440px;                 /* = --mm-max of the homepage content */
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 64px);
  }
  #header:has(~ #content-wrapper #more-matcha-home) .navigation-tools {
    display: none;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .site-name {
    display: flex;
    align-items: center;
    flex: none;
    width: auto;
    height: 80px;
    margin: 0 auto 0 0;
    padding: 0;
    text-align: left;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .site-name a {
    display: block;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .site-name img {
    display: block;
    width: 150px;
    height: auto;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .navigation-buttons {
    flex: none;
    width: auto;
    margin: 0 0 0 auto;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .header-bottom {
    position: absolute;
    top: 17px;                         /* (80 − 46 px nav) / 2 */
    /* the slot between the logo (150 px + gap) and the icons (~170 px + gap) */
    left: calc(max(0px, (100% - 1440px) / 2) + clamp(16px, 4vw, 64px) + 150px + clamp(24px, 3vw, 56px));
    right: calc(max(0px, (100% - 1440px) / 2) + clamp(16px, 4vw, 64px) + 170px + 24px);
    width: auto;
  }
  #header:has(~ #content-wrapper #more-matcha-home) .header-bottom-wrapper,
  #header:has(~ #content-wrapper #more-matcha-home) #navigation {
    background: transparent;
  }
}

@media (max-width: 767px) {
  .overall-wrapper:has(#more-matcha-home) {
    padding-top: 0;                    /* the phone header is fixed: the video starts under it */
  }
}

/* solid state once the hero has scrolled away (phone header is fixed) */
body:has(#more-matcha-home.mm-past-hero) #header:has(~ #content-wrapper #more-matcha-home) {
  background: #F3ECE0;
  box-shadow: 0 1px 0 rgba(28, 28, 30, 0.1);
}

/* --- Native footer: replaced by the More Matcha footer on the homepage only --- */
#content-wrapper:has(#more-matcha-home) ~ #footer {
  display: none;
}

/* --- Header typography: Lexend (approved), text only; icons keep their icon font --- */
#header #navigation a,
#header .navigation-buttons {
  font-family: "Lexend", "Poppins", system-ui, sans-serif;
}