@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("https://res.cloudinary.com/ntjovz56/raw/upload/matchabloom/fonts/BalooBhaijaan2-Subset-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("https://res.cloudinary.com/ntjovz56/raw/upload/matchabloom/fonts/IBMPlexSansArabic-Regular-Subset-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("https://res.cloudinary.com/ntjovz56/raw/upload/matchabloom/fonts/IBMPlexSansArabic-SemiBold-Subset-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}

#matcha-bloom-inline{
  --paper: #fff9ef;
  --paper-2: #f5eedf;
  --ink: #183326;
  --muted: #677166;
  --forest: #294c34;
  --forest-dark: #183525;
  --leaf: #9bc263;
  --lime: #c7dc79;
  --saffron: #d89a2c;
  --saffron-soft: #f4c766;
  --bamboo: #795034;
  --bamboo-dark: #4d2e20;
  --clay: #bf7248;
  --line: rgba(24, 51, 38, 0.14);
  --shadow: 0 20px 48px rgba(24, 51, 38, 0.13);
  --radius: 26px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#matcha-bloom-inline,
#matcha-bloom-inline *,
#matcha-bloom-inline::before,
#matcha-bloom-inline *::before,
#matcha-bloom-inline::after,
#matcha-bloom-inline *::after{
  box-sizing: border-box;
}

#matcha-bloom-inline{
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
  background: #dfe7d8;
}

#matcha-bloom-inline{
  margin: 0;
  color: var(--ink);
  background: #dfe7d8;
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.mb-inline-locked{
  overflow: hidden;
}

#matcha-bloom-inline button,
#matcha-bloom-inline a,
#matcha-bloom-inline input{
  font: inherit;
}

#matcha-bloom-inline button,
#matcha-bloom-inline a{
  -webkit-tap-highlight-color: transparent;
}

#matcha-bloom-inline button{
  color: inherit;
}

#matcha-bloom-inline button:not(:disabled),
#matcha-bloom-inline a{
  cursor: pointer;
}

#matcha-bloom-inline button:active,
#matcha-bloom-inline a:active{
  transform: scale(0.98);
}

#matcha-bloom-inline button:focus-visible,
#matcha-bloom-inline a:focus-visible,
#matcha-bloom-inline input:focus-visible{
  outline: 3px solid var(--saffron-soft);
  outline-offset: 3px;
}

#matcha-bloom-inline img,
#matcha-bloom-inline svg,
#matcha-bloom-inline video{
  display: block;
  max-width: 100%;
}

#matcha-bloom-inline img{
  height: auto;
}

#matcha-bloom-inline h1,
#matcha-bloom-inline h2,
#matcha-bloom-inline h3,
#matcha-bloom-inline p{
  margin: 0;
}

#matcha-bloom-inline main > section{
  scroll-margin-top: 68px;
}

#matcha-bloom-inline h1,
#matcha-bloom-inline h2,
#matcha-bloom-inline h3{
  font-family: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 760;
  letter-spacing: -0.025em;
}

#matcha-bloom-inline [hidden]{
  display: none !important;
}

#matcha-bloom-inline .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#matcha-bloom-inline .mobile-page{
  position: relative;
  width: min(100%, 480px);
  min-height: 100vh;
  margin-inline: auto;
  overflow: clip;
  background: var(--paper);
  box-shadow: 0 0 80px rgba(24, 51, 38, 0.18);
}

#matcha-bloom-inline .brand-mark{
  display: grid;
  min-height: 58px;
  padding: 5px 18px 4px;
  place-items: center;
}

#matcha-bloom-inline .brand{
  display: block;
  width: 116px;
  transition: transform 180ms var(--ease);
}

#matcha-bloom-inline .brand img{
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(24%) sepia(17%) saturate(1193%) hue-rotate(85deg) brightness(92%) contrast(90%);
}

#matcha-bloom-inline,
#matcha-bloom-inline{
  min-height: 100%;
  background: var(--paper);
}

#matcha-bloom-inline .brand-mark{
  display: none;
}

#matcha-bloom-inline .mobile-page{
  min-height: 100%;
  box-shadow: none;
}

#matcha-bloom-inline .hero{
  position: relative;
  isolation: isolate;
  min-height: min(610px, calc(100svh - 62px));
  padding: 22px 18px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 17%, rgba(216, 154, 44, 0.22) 0 16%, transparent 16.4%),
    radial-gradient(circle at 2% 68%, rgba(155, 194, 99, 0.28) 0 22%, transparent 22.4%),
    linear-gradient(155deg, #fffaf1 0 50%, #eef4df 100%);
}

#matcha-bloom-inline .hero::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 60% -18% -30% -18%;
  background: #e3ecd2;
  border-radius: 52% 48% 0 0 / 18% 19% 0 0;
  transform: rotate(-3deg);
}

#matcha-bloom-inline .hero-copy{
  position: relative;
  z-index: 3;
  text-align: center;
}

#matcha-bloom-inline .hero-kicker{
  color: var(--forest);
  font-size: 0.77rem;
  font-weight: 700;
}

#matcha-bloom-inline .hero h1{
  margin-top: 4px;
  color: var(--forest-dark);
  font-size: clamp(3.25rem, 14.6vw, 4.35rem);
  line-height: 0.84;
}

#matcha-bloom-inline .hero h1 em{
  color: var(--saffron);
  font-style: normal;
}

#matcha-bloom-inline .hero-lead{
  margin-top: 12px;
  color: #536356;
  font-size: 0.91rem;
  font-weight: 600;
}

#matcha-bloom-inline .hero-stage{
  position: relative;
  z-index: 2;
  height: 294px;
  margin-top: -4px;
  background:
    radial-gradient(circle at 74% 64%, rgba(216, 154, 44, 0.29) 0 28%, transparent 28.5%),
    radial-gradient(circle at 25% 68%, rgba(74, 114, 57, 0.23) 0 27%, transparent 27.5%);
}

#matcha-bloom-inline .hero-stage::before{
  content: "";
  position: absolute;
  inset: auto 8% 18px;
  height: 38px;
  background: rgba(8, 25, 14, 0.28);
  border-radius: 50%;
  filter: blur(17px);
}

#matcha-bloom-inline .hero-product{
  position: absolute;
  inset-block-end: -5px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(9, 28, 16, 0.22));
}

#matcha-bloom-inline .hero-product--gold{
  inset-inline-start: 10%;
  z-index: 2;
  width: 50%;
  transform: rotate(-4deg);
}

#matcha-bloom-inline .hero-product--green{
  inset-inline-end: 4%;
  z-index: 1;
  width: 52%;
  transform: rotate(6deg) translateY(13px);
}

#matcha-bloom-inline .hero-leaf{
  position: absolute;
  inset: 76px auto auto 50%;
  width: 126px;
  height: 58px;
  background: var(--forest);
  border-radius: 100% 0 100% 0;
  opacity: 0.82;
  transform: translateX(-50%) rotate(-13deg);
}

#matcha-bloom-inline .primary-button,
#matcha-bloom-inline .hero-button,
#matcha-bloom-inline .grade-to-offer,
#matcha-bloom-inline .purchase-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 11px 22px;
  color: #fff;
  background: var(--saffron);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(216, 154, 44, 0.28);
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

#matcha-bloom-inline .hero-button{
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: -3px;
  color: #fff;
  background: var(--forest);
  box-shadow: none;
}

#matcha-bloom-inline .type-lockup{
  text-align: center;
}

#matcha-bloom-inline .type-lockup > p{
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 700;
}

#matcha-bloom-inline .type-lockup h2{
  margin-top: 1px;
  color: var(--saffron);
  font-size: clamp(2.45rem, 11vw, 3.45rem);
  line-height: 0.94;
}

#matcha-bloom-inline .type-lockup--light > p,
#matcha-bloom-inline .type-lockup--cream > p{
  color: rgba(255, 249, 239, 0.74);
}

#matcha-bloom-inline .type-lockup--light h2{
  color: var(--lime);
}

#matcha-bloom-inline .type-lockup--cream h2{
  color: var(--paper);
}

#matcha-bloom-inline .grade-stage{
  --stage-accent: var(--saffron);
  --stage-tint: #fae7b7;
  position: relative;
  padding: 42px 16px 36px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--stage-tint), var(--paper));
  transition: background 360ms var(--ease);
}

#matcha-bloom-inline .grade-stage[data-grade="imperial"]{
  --stage-accent: var(--forest);
  --stage-tint: #dbe9c5;
}

#matcha-bloom-inline .grade-stage::after{
  content: "";
  position: absolute;
  inset: 142px -78px auto auto;
  width: 180px;
  height: 180px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 28%, transparent);
  border-radius: 100% 0 100% 0;
  transform: rotate(24deg);
  pointer-events: none;
}

#matcha-bloom-inline .grade-switch{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 5px;
  padding: 5px;
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(24, 51, 38, 0.11);
  border-radius: 17px;
  box-shadow: 0 10px 34px rgba(24, 51, 38, 0.08);
}

#matcha-bloom-inline .grade-switch button{
  min-height: 44px;
  padding: 8px 7px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 750;
  transition: transform 180ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
}

#matcha-bloom-inline .grade-switch button[aria-selected="true"]{
  color: #fff;
  background: var(--stage-accent);
}

#matcha-bloom-inline .product-spread{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  height: 250px;
  margin-top: 3px;
}

#matcha-bloom-inline .product-choice{
  --product-tint: rgba(255, 255, 255, 0.58);
  position: relative;
  display: grid;
  grid-template-rows: 184px auto auto;
  justify-items: center;
  align-items: end;
  height: 240px;
  padding: 0 3px 8px;
  background: transparent;
  border: 0;
  opacity: 0.86;
  transition: transform 280ms var(--ease), opacity 220ms var(--ease);
}

#matcha-bloom-inline .product-choice::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 48px 12px 33px;
  background: var(--product-tint);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 48% 48% 22px 22px;
  transform: scale(0.9);
  transition: transform 280ms var(--ease), background 220ms var(--ease);
}

#matcha-bloom-inline .product-choice img{
  width: auto;
  height: 181px;
  object-fit: contain;
  filter: drop-shadow(0 14px 17px rgba(24, 51, 38, 0.16));
}

#matcha-bloom-inline .product-choice strong{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.18rem;
  line-height: 1;
}

#matcha-bloom-inline .product-choice span{
  font-size: 0.7rem;
  font-weight: 600;
}

#matcha-bloom-inline .product-choice.is-active{
  z-index: 2;
  opacity: 1;
  transform: translateY(-5px);
}

#matcha-bloom-inline .product-choice.is-active::before{
  background: color-mix(in srgb, var(--product-tint) 52%, white);
  transform: scale(1);
}

#matcha-bloom-inline .product-choice[data-grade-select="ceremonial"]{
  --product-tint: rgba(244, 199, 102, 0.34);
}

#matcha-bloom-inline .product-choice[data-grade-select="imperial"]{
  --product-tint: rgba(155, 194, 99, 0.26);
}

#matcha-bloom-inline .taste-copy{
  position: relative;
  z-index: 2;
  min-height: 160px;
  padding: 17px 17px 13px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

#matcha-bloom-inline .taste-copy h3{
  color: var(--forest-dark);
  font-size: 1.72rem;
  line-height: 1;
}

#matcha-bloom-inline .taste-copy article > p{
  margin-top: 7px;
  color: #526156;
  font-size: 0.81rem;
  line-height: 1.65;
}

#matcha-bloom-inline .taste-facts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

#matcha-bloom-inline .taste-facts span{
  padding: 10px 2px 0;
  color: var(--stage-accent);
  font-size: 0.71rem;
  font-weight: 750;
  text-align: center;
}

#matcha-bloom-inline .taste-facts span + span{
  border-inline-start: 1px solid var(--line);
}

#matcha-bloom-inline .grade-to-offer{
  width: 100%;
  margin-top: 13px;
  min-height: 48px;
  color: #fff;
  background: var(--stage-accent);
  box-shadow: none;
}

#matcha-bloom-inline .offer-section{
  position: relative;
  padding: 46px 14px 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 249, 239, 0.24) 0 13%, transparent 13.4%),
    radial-gradient(circle at 106% 64%, rgba(41, 76, 52, 0.16) 0 26%, transparent 26.4%),
    var(--saffron);
}

#matcha-bloom-inline .offer-section::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, 0.22) 48% 50%, transparent 50% 100%);
  background-size: 45px 45px;
  pointer-events: none;
}

#matcha-bloom-inline .offer-ticket{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin-top: 24px;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(3, 18, 9, 0.35);
}

#matcha-bloom-inline .offer-ticket::before,
#matcha-bloom-inline .offer-ticket::after{
  content: none;
}

#matcha-bloom-inline .offer-visual{
  position: relative;
  height: 205px;
  order: 2;
  margin-top: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 90%, rgba(155, 194, 99, 0.47), transparent 45%),
    linear-gradient(145deg, #fff, #eee6d8);
  border-radius: 19px;
}

#matcha-bloom-inline .offer-visual::after{
  content: "";
  position: absolute;
  inset: auto 18% 13px;
  height: 25px;
  background: rgba(27, 46, 31, 0.16);
  border-radius: 50%;
  filter: blur(12px);
}

#matcha-bloom-inline .offer-art{
  position: absolute;
  z-index: 2;
  inset: 5px;
  display: none;
  align-items: end;
  justify-content: center;
}

#matcha-bloom-inline .offer-art.is-active{
  display: flex;
}

#matcha-bloom-inline .offer-art img{
  width: auto;
  max-height: 192px;
  object-fit: contain;
  filter: drop-shadow(0 14px 15px rgba(24, 51, 38, 0.18));
}

#matcha-bloom-inline .offer-art--single img{
  max-width: 64%;
}

#matcha-bloom-inline .offer-ticket[data-grade="ceremonial"] .offer-art--single .single-imperial,
#matcha-bloom-inline .offer-ticket[data-grade="imperial"] .offer-art--single .single-ceremonial{
  display: none;
}

#matcha-bloom-inline .offer-art--duo img{
  width: auto;
  margin: 0;
  transform: none;
}

#matcha-bloom-inline .offer-art--quad{
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 44px;
}

#matcha-bloom-inline .offer-art--quad img{
  width: 40%;
  max-height: 116px;
  margin: -14px -8px;
}

#matcha-bloom-inline .offer-choices{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  order: 1;
  margin-top: 0;
}

#matcha-bloom-inline .tier-option{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  align-items: center;
  min-height: 102px;
  padding: 11px 5px 8px;
  border: 1px solid rgba(24, 51, 38, 0.12);
  border-radius: 15px;
  text-align: center;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

#matcha-bloom-inline .tier-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#matcha-bloom-inline .tier-option span{
  display: grid;
}

#matcha-bloom-inline .tier-option b{
  font-size: 0.7rem;
  line-height: 1.25;
}

#matcha-bloom-inline .tier-option small{
  color: var(--muted);
  font-size: 0.55rem;
  line-height: 1.35;
}

#matcha-bloom-inline .tier-option > strong{
  color: var(--forest);
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.28rem;
}

#matcha-bloom-inline .tier-option > strong::after{
  content: " ر.س";
  margin-inline-start: 2px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 0.55rem;
}

#matcha-bloom-inline .tier-option.is-selected{
  background: #edf4dd;
  border-color: var(--leaf);
  box-shadow: inset 0 0 0 1px var(--leaf);
}

#matcha-bloom-inline .tier-option.is-selected::after{
  content: "✓";
  position: absolute;
  inset: 5px auto auto 5px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #fff;
  background: var(--forest);
  border-radius: 50%;
  font-size: 0.67rem;
}

#matcha-bloom-inline .single-grade-picker{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  order: 3;
  margin-top: 8px;
}

#matcha-bloom-inline .single-grade-picker button{
  min-height: 41px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: 0.74rem;
  font-weight: 700;
}

#matcha-bloom-inline .single-grade-picker button.is-active{
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
}

#matcha-bloom-inline .offer-summary{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 15px 3px 11px;
  margin-top: 8px;
  border-top: 1px dashed rgba(24, 51, 38, 0.23);
  order: 4;
}

#matcha-bloom-inline .offer-summary > div:first-child > span{
  font-weight: 800;
  font-size: 0.87rem;
}

#matcha-bloom-inline .offer-summary > div:first-child p{
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

#matcha-bloom-inline .offer-price{
  text-align: end;
}

#matcha-bloom-inline .offer-price del{
  color: #899189;
  font-size: 0.67rem;
}

#matcha-bloom-inline .offer-price p{
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--forest);
  line-height: 1;
}

#matcha-bloom-inline .offer-price strong{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 2.05rem;
}

#matcha-bloom-inline .offer-price span{
  font-size: 0.62rem;
  font-weight: 700;
}

#matcha-bloom-inline .offer-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: var(--paper-2);
  border-radius: 14px;
  order: 5;
}

#matcha-bloom-inline .offer-meta span{
  display: grid;
  padding: 8px 3px;
  color: var(--muted);
  font-size: 0.59rem;
  text-align: center;
}

#matcha-bloom-inline .offer-meta span + span{
  border-inline-start: 1px solid var(--line);
}

#matcha-bloom-inline .offer-meta b{
  color: var(--ink);
  font-size: 0.72rem;
}

#matcha-bloom-inline .purchase-button{
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  color: #fff;
  background: var(--forest);
  box-shadow: none;
  order: 6;
}

#matcha-bloom-inline .purchase-button b{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.15rem;
}

#matcha-bloom-inline .quad-note{
  margin-top: 7px;
  color: #86522d;
  font-size: 0.65rem;
  text-align: center;
  order: 7;
}

#matcha-bloom-inline .offer-section .type-lockup--light > p{
  color: rgba(24, 51, 38, 0.7);
}

#matcha-bloom-inline .offer-section .type-lockup--light h2{
  color: var(--forest-dark);
}

#matcha-bloom-inline .comparison-section{
  padding: 44px 16px 42px;
  background: #f8f2e6;
}

#matcha-bloom-inline .comparison-stack{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 27px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(24, 51, 38, 0.16);
  border-radius: 25px;
  box-shadow: 0 18px 42px rgba(24, 51, 38, 0.11);
}

#matcha-bloom-inline .comparison-card{
  position: relative;
  min-height: 430px;
  padding: 18px 11px;
  overflow: hidden;
  border-radius: 0;
}

#matcha-bloom-inline .comparison-card h3{
  font-size: 1.28rem;
  line-height: 1.05;
}

#matcha-bloom-inline .comparison-card ul{
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 17px 0 0;
  list-style: none;
}

#matcha-bloom-inline .comparison-card li{
  position: relative;
  min-height: 40px;
  padding-inline-start: 19px;
  font-size: 0.62rem;
  line-height: 1.45;
}

#matcha-bloom-inline .comparison-card li::before{
  position: absolute;
  inset: 1px 0 auto auto;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 800;
}

#matcha-bloom-inline .comparison-card--bloom{
  z-index: 2;
  min-height: 430px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(199, 220, 121, 0.28), transparent 34%),
    var(--forest);
  box-shadow: none;
}

#matcha-bloom-inline .comparison-card--bloom::after{
  content: "";
  position: absolute;
  inset: auto -36px -60px auto;
  width: 170px;
  height: 180px;
  background: var(--leaf);
  border-radius: 100% 0 100% 0;
  opacity: 0.13;
  transform: rotate(19deg);
}

#matcha-bloom-inline .comparison-card--bloom img{
  width: 96px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter: none;
}

#matcha-bloom-inline .comparison-card--bloom h3{
  max-width: 150px;
  margin-top: 16px;
  color: var(--lime);
}

#matcha-bloom-inline .comparison-card--bloom li::before{
  content: "✓";
  color: var(--forest-dark);
  background: var(--lime);
}

#matcha-bloom-inline .comparison-pause{
  display: none;
}

#matcha-bloom-inline .comparison-pause::before{
  content: "";
  position: absolute;
  width: 1px;
  height: 44px;
  background: var(--line);
}

#matcha-bloom-inline .comparison-pause span{
  position: relative;
  padding: 4px 12px;
  color: var(--muted);
  background: #f8f2e6;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
}

#matcha-bloom-inline .comparison-card--commercial{
  min-height: 430px;
  color: #59534b;
  background:
    linear-gradient(rgba(249, 246, 240, 0.89), rgba(249, 246, 240, 0.89)),
    repeating-linear-gradient(118deg, #b6ab9d 0 2px, transparent 2px 12px);
  border: 0;
  border-inline-start: 1px solid #d7cec0;
  filter: saturate(0.65);
}

#matcha-bloom-inline .comparison-card--commercial h3{
  color: #5e574f;
}

#matcha-bloom-inline .commercial-hook{
  margin-top: 5px;
  color: #8a5b43;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 0.93rem;
  line-height: 1.2;
}

#matcha-bloom-inline .comparison-card--commercial li::before{
  content: "×";
  color: #fff;
  background: #8b8074;
}

#matcha-bloom-inline .comparison-note{
  padding: 0 9px;
  margin-top: 14px;
  color: #837b70;
  font-size: 0.61rem;
  line-height: 1.55;
  text-align: center;
}

#matcha-bloom-inline .journey-section{
  padding: 42px 12px 20px;
  background:
    radial-gradient(circle at 13% 36%, rgba(216, 154, 44, 0.15), transparent 17%),
    linear-gradient(rgba(24, 51, 38, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 51, 38, 0.03) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 24px 24px, 24px 24px, auto;
}

#matcha-bloom-inline .journey-map{
  position: relative;
  height: 675px;
  margin-top: 8px;
  overflow: hidden;
}

#matcha-bloom-inline .journey-map::before{
  content: "";
  position: absolute;
  inset: 18px 2px 12px;
  border: 1px solid rgba(121, 80, 52, 0.15);
  border-radius: 38% 20% 35% 18% / 13% 22% 15% 24%;
  pointer-events: none;
}

#matcha-bloom-inline .journey-route{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#matcha-bloom-inline .journey-route path{
  fill: none;
  stroke: var(--bamboo);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 12 12;
  vector-effect: non-scaling-stroke;
  opacity: 0.52;
}

#matcha-bloom-inline .journey-map.is-visible .journey-route path{
  animation: route-draw 1.6s var(--ease) both;
}

@keyframes route-draw {
  from {
    stroke-dasharray: 0 18;
    opacity: 0;
  }
  to {
    stroke-dasharray: 12 12;
    opacity: 0.52;
  }
}

#matcha-bloom-inline .journey-stop{
  position: absolute;
  z-index: 2;
  display: grid;
  align-items: center;
  width: 194px;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}

#matcha-bloom-inline .journey-map.is-visible .journey-stop{
  animation: station-in 520ms var(--ease) forwards;
}

#matcha-bloom-inline .journey-map.is-visible .journey-stop:nth-of-type(2){
  animation-delay: 180ms;
}

#matcha-bloom-inline .journey-map.is-visible .journey-stop:nth-of-type(3){
  animation-delay: 360ms;
}

#matcha-bloom-inline .journey-map.is-visible .journey-stop:nth-of-type(4){
  animation-delay: 540ms;
}

@keyframes station-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#matcha-bloom-inline .journey-stop > img,
#matcha-bloom-inline .shipping-illustration{
  width: 112px;
  height: 102px;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(74, 51, 34, 0.12));
}

#matcha-bloom-inline .journey-stop > div:last-child{
  padding: 9px 12px;
  background: rgba(255, 249, 239, 0.9);
  border-inline-start: 3px solid var(--saffron);
  box-shadow: 0 8px 22px rgba(24, 51, 38, 0.07);
}

#matcha-bloom-inline .journey-stop h3{
  color: var(--forest);
  font-size: 1.22rem;
  line-height: 1;
}

#matcha-bloom-inline .journey-stop p{
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.45;
}

#matcha-bloom-inline .journey-stop--farm{
  inset: 0 8px auto auto;
}

#matcha-bloom-inline .journey-stop--pluck{
  inset: 161px auto auto 5px;
}

#matcha-bloom-inline .journey-stop--quality{
  inset: 324px 7px auto auto;
}

#matcha-bloom-inline .journey-stop--ship{
  inset: 487px auto auto 7px;
}

#matcha-bloom-inline .shipping-illustration{
  position: relative;
}

#matcha-bloom-inline .shipping-box{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#matcha-bloom-inline .shipping-product{
  position: absolute;
  inset: 30px 34px auto auto;
  width: 53px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(24, 51, 38, 0.2));
  transform: rotate(-8deg);
}

#matcha-bloom-inline .shipping-logo{
  position: absolute;
  z-index: 3;
  inset: auto auto 12px 13px;
  width: 38px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(24%) sepia(17%) saturate(1193%) hue-rotate(85deg) brightness(92%) contrast(90%);
  transform: rotate(4deg);
}

#matcha-bloom-inline .brew-section{
  position: relative;
  padding: 44px 16px 42px;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 8% 8%, rgba(244, 199, 102, 0.18), transparent 23%),
    radial-gradient(circle at 105% 55%, rgba(199, 220, 121, 0.14), transparent 25%),
    var(--bamboo);
}

#matcha-bloom-inline .brew-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(32deg, transparent 0 47%, rgba(255, 249, 239, 0.055) 47% 49%, transparent 49% 100%),
    linear-gradient(148deg, transparent 0 47%, rgba(255, 249, 239, 0.04) 47% 49%, transparent 49% 100%);
  background-size: 64px 64px;
  pointer-events: none;
}

#matcha-bloom-inline .brew-section > *{
  position: relative;
  z-index: 1;
}

#matcha-bloom-inline .brew-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

#matcha-bloom-inline .brew-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 195px;
  text-align: center;
}

#matcha-bloom-inline .brew-step--reverse{
  display: flex;
}

#matcha-bloom-inline .brew-step--reverse img{
  order: 0;
}

#matcha-bloom-inline .brew-step--reverse div{
  order: 1;
}

#matcha-bloom-inline .brew-step img{
  width: 100%;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(40, 20, 10, 0.2));
}

#matcha-bloom-inline .brew-step h3{
  color: var(--saffron-soft);
  font-size: 1.12rem;
  line-height: 1;
}

#matcha-bloom-inline .brew-step p{
  max-width: 112px;
  margin-top: 4px;
  color: rgba(255, 249, 239, 0.75);
  font-size: 0.61rem;
  line-height: 1.45;
}

#matcha-bloom-inline .drink-switch{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin-top: 14px;
  background: rgba(61, 31, 19, 0.28);
  border: 1px solid rgba(255, 249, 239, 0.15);
  border-radius: 15px;
}

#matcha-bloom-inline .drink-switch button{
  min-height: 41px;
  color: rgba(255, 249, 239, 0.72);
  background: transparent;
  border: 0;
  border-radius: 11px;
  font-weight: 750;
}

#matcha-bloom-inline .drink-switch button[aria-selected="true"]{
  color: var(--bamboo-dark);
  background: var(--paper);
}

#matcha-bloom-inline .drink-panels{
  padding: 14px 15px;
  margin-top: 8px;
  background: rgba(61, 31, 19, 0.3);
  border: 1px solid rgba(255, 249, 239, 0.12);
  border-radius: 16px;
}

#matcha-bloom-inline .drink-panels article{
  display: grid;
  gap: 7px;
}

#matcha-bloom-inline .drink-panels p{
  font-size: 0.72rem;
  line-height: 1.55;
}

#matcha-bloom-inline .drink-panels b{
  color: var(--saffron-soft);
}

#matcha-bloom-inline .video-teaser{
  position: relative;
  display: block;
  width: min(100%, 228px);
  aspect-ratio: 9 / 14;
  padding: 0;
  margin: 18px auto 0;
  overflow: hidden;
  color: #fff;
  background: var(--bamboo-dark);
  border: 0;
  border-radius: 24px;
  text-align: start;
  box-shadow: 0 22px 48px rgba(51, 27, 16, 0.32);
}

#matcha-bloom-inline .video-teaser::before{
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18, 27, 18, 0.78) 100%);
}

#matcha-bloom-inline .video-teaser::after{
  content: "▶";
  position: absolute;
  z-index: 2;
  inset: 20px auto auto 20px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding-inline-start: 2px;
  color: var(--forest-dark);
  background: var(--lime);
  border-radius: 50%;
  font-size: 0.85rem;
  box-shadow: 0 7px 16px rgba(24, 51, 38, 0.2);
}

#matcha-bloom-inline .video-teaser img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#matcha-bloom-inline .video-teaser span{
  position: absolute;
  z-index: 2;
  inset: auto 18px 18px;
  display: grid;
}

#matcha-bloom-inline .video-teaser b{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.55rem;
  line-height: 1.05;
}

#matcha-bloom-inline .video-teaser small{
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.68rem;
}

#matcha-bloom-inline .proof-section{
  padding: 44px 0 40px;
  overflow: hidden;
  background: #eef3e3;
}

#matcha-bloom-inline .proof-section .type-lockup{
  padding-inline: 16px;
}

#matcha-bloom-inline .proof-track{
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 11px;
  padding: 0 16px 10px;
  margin-top: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 16px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

#matcha-bloom-inline .proof-track::-webkit-scrollbar{
  display: none;
}

#matcha-bloom-inline .proof-slide{
  min-height: 247px;
  padding: 22px;
  scroll-snap-align: center;
  background: var(--paper);
  border: 1px solid rgba(24, 51, 38, 0.1);
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(24, 51, 38, 0.08);
}

#matcha-bloom-inline .proof-slide--rating{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#matcha-bloom-inline .stars{
  color: var(--saffron);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
}

#matcha-bloom-inline .proof-slide--rating strong{
  color: var(--forest);
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 2.3rem;
  line-height: 1;
}

#matcha-bloom-inline .proof-slide--rating p{
  max-width: 220px;
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 0.72rem;
}

#matcha-bloom-inline .proof-slide--rating a{
  width: fit-content;
  padding: 7px 13px;
  margin: 14px auto 0;
  color: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
}

#matcha-bloom-inline .proof-slide--chat{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #eceae4;
}

#matcha-bloom-inline .chat-label{
  margin-block-end: 11px;
  color: #777a75;
  font-size: 0.61rem;
  font-weight: 700;
  text-align: center;
}

#matcha-bloom-inline .chat-bubble{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  line-height: 1.55;
}

#matcha-bloom-inline .chat-bubble + .chat-bubble{
  margin-top: 8px;
}

#matcha-bloom-inline .chat-bubble--customer{
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 4px;
}

#matcha-bloom-inline .chat-bubble--brand{
  align-self: flex-end;
  color: var(--forest-dark);
  background: #d6edbd;
  border-bottom-right-radius: 4px;
}

#matcha-bloom-inline .proof-controls{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
}

#matcha-bloom-inline .proof-controls button{
  min-height: 36px;
  padding: 5px 14px;
  color: var(--forest);
  background: transparent;
  border: 1px solid rgba(24, 51, 38, 0.22);
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 700;
}

#matcha-bloom-inline .faq-section{
  padding: 44px 18px 36px;
  background: var(--paper);
}

#matcha-bloom-inline .faq-list{
  margin-top: 25px;
  border-top: 1px solid var(--line);
}

#matcha-bloom-inline .faq-item{
  border-bottom: 1px solid var(--line);
}

#matcha-bloom-inline .faq-item button{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 55px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: start;
}

#matcha-bloom-inline .faq-item button span{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--forest);
  background: #eef3e3;
  border-radius: 50%;
  font-size: 1.1rem;
}

#matcha-bloom-inline .faq-item [data-faq-answer]{
  padding: 0 0 14px;
}

#matcha-bloom-inline .faq-item [data-faq-answer] p{
  max-width: 330px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.65;
}

#matcha-bloom-inline .closing-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 38px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 17% 20%, rgba(199, 220, 121, 0.25), transparent 20%),
    var(--forest);
  text-align: center;
}

#matcha-bloom-inline .closing-section > img{
  width: 116px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter: none;
}

#matcha-bloom-inline .closing-section h2{
  max-width: 330px;
  margin-top: 17px;
  color: var(--lime);
  font-size: 2.35rem;
  line-height: 0.94;
}

#matcha-bloom-inline .closing-section p{
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

#matcha-bloom-inline .closing-section .primary-button{
  width: min(100%, 300px);
  margin-top: 18px;
  color: var(--forest-dark);
  background: var(--lime);
  box-shadow: none;
}

#matcha-bloom-inline .closing-section small{
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.61rem;
}

#matcha-bloom-inline .mobile-buybar{
  position: fixed;
  z-index: 45;
  inset: auto max(8px, calc((100vw - 480px) / 2 + 8px)) max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 7px 8px 7px 13px;
  color: var(--bamboo-dark);
  background: rgba(255, 249, 239, 0.96);
  border: 1px solid rgba(121, 80, 52, 0.24);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(77, 46, 32, 0.24);
  backdrop-filter: blur(16px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

#matcha-bloom-inline .mobile-buybar.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 20px));
}

#matcha-bloom-inline .mobile-buybar > div{
  display: grid;
}

#matcha-bloom-inline .mobile-buybar span{
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.61rem;
}

#matcha-bloom-inline .mobile-buybar strong{
  font-size: 0.8rem;
}

#matcha-bloom-inline .mobile-buybar button{
  min-width: 124px;
  min-height: 49px;
  padding: 8px 13px;
  color: var(--paper);
  background: var(--bamboo);
  border: 0;
  border-radius: 13px;
  font-size: 0.76rem;
  font-weight: 800;
}

#matcha-bloom-inline .mobile-buybar button span{
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 800;
}

#matcha-bloom-inline .mini-cart{
  position: fixed;
  z-index: 80;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease), visibility 200ms;
}

#matcha-bloom-inline .mini-cart.is-open{
  visibility: visible;
  opacity: 1;
}

#matcha-bloom-inline .cart-backdrop{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(8, 18, 12, 0.52);
  border: 0;
  backdrop-filter: blur(3px);
}

#matcha-bloom-inline .cart-sheet{
  position: absolute;
  inset: auto max(0px, calc((100vw - 480px) / 2)) 0 auto;
  width: min(100%, 480px);
  max-height: 78dvh;
  padding: 16px 17px calc(18px + env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  transform: translateY(103%);
  transition: transform 280ms var(--ease);
}

#matcha-bloom-inline .mini-cart.is-open .cart-sheet{
  transform: translateY(0);
}

#matcha-bloom-inline .cart-sheet > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

#matcha-bloom-inline .cart-sheet > header span{
  color: var(--muted);
  font-size: 0.62rem;
}

#matcha-bloom-inline .cart-sheet > header h2{
  font-size: 1.7rem;
  line-height: 1;
}

#matcha-bloom-inline .cart-sheet > header button{
  padding: 7px 12px;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

#matcha-bloom-inline .cart-items{
  display: grid;
  gap: 10px;
  padding-block: 15px;
}

#matcha-bloom-inline .cart-empty{
  padding: 34px 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

#matcha-bloom-inline .cart-item{
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  background: #f3eddf;
  border-radius: 15px;
}

#matcha-bloom-inline .cart-item img{
  width: 62px;
  height: 72px;
  object-fit: contain;
}

#matcha-bloom-inline .cart-item-info{
  display: grid;
}

#matcha-bloom-inline .cart-item-info strong{
  font-size: 0.74rem;
}

#matcha-bloom-inline .cart-item-info span{
  color: var(--muted);
  font-size: 0.62rem;
}

#matcha-bloom-inline .cart-item-remove{
  padding: 5px;
  color: #8a5b43;
  background: transparent;
  border: 0;
  font-size: 0.62rem;
}

#matcha-bloom-inline .cart-footer{
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

#matcha-bloom-inline .cart-footer > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#matcha-bloom-inline .cart-footer span{
  color: var(--muted);
  font-size: 0.68rem;
}

#matcha-bloom-inline .cart-footer strong{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.42rem;
}

#matcha-bloom-inline .cart-footer a{
  display: grid;
  place-items: center;
  min-height: 50px;
  margin-top: 10px;
  color: #fff;
  background: var(--forest);
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

#matcha-bloom-inline .video-dialog{
  width: min(calc(100% - 20px), 430px);
  max-height: calc(100dvh - 20px);
  padding: 9px;
  overflow: hidden;
  background: #101c14;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(5, 13, 8, 0.5);
}

#matcha-bloom-inline .video-dialog::backdrop{
  background: rgba(5, 13, 8, 0.76);
  backdrop-filter: blur(6px);
}

#matcha-bloom-inline .video-dialog video{
  width: 100%;
  max-height: calc(100dvh - 92px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #09100b;
  border-radius: 15px;
}

#matcha-bloom-inline .video-close{
  display: block;
  min-height: 38px;
  padding: 5px 15px;
  margin: 0 auto 8px 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.68rem;
}

#matcha-bloom-inline .toast{
  position: fixed;
  z-index: 110;
  inset: auto 50% calc(85px + env(safe-area-inset-bottom)) auto;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 15px;
  color: #fff;
  background: var(--forest-dark);
  border-radius: 999px;
  box-shadow: 0 14px 35px rgba(9, 24, 15, 0.25);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 12px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

#matcha-bloom-inline .toast.is-visible{
  opacity: 1;
  transform: translate(50%, 0);
}

#matcha-bloom-inline .reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

#matcha-bloom-inline .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 370px) {
  #matcha-bloom-inline .hero{
    min-height: 570px;
  }

  #matcha-bloom-inline .hero h1{
    font-size: 3rem;
  }

  #matcha-bloom-inline .hero-stage{
    height: 266px;
  }

  #matcha-bloom-inline .product-choice img{
    height: 176px;
  }

  #matcha-bloom-inline .journey-stop{
    width: 190px;
  }

  #matcha-bloom-inline .journey-stop--pluck,
#matcha-bloom-inline .journey-stop--ship{
    inset-inline-start: -2px;
  }
}

@media (min-width: 481px) {
  #matcha-bloom-inline{
    padding-block: 22px;
  }

  #matcha-bloom-inline .mobile-page{
    border-radius: 30px;
  }

}

@media (prefers-reduced-motion: reduce) {
  #matcha-bloom-inline{
    scroll-behavior: auto;
  }

  #matcha-bloom-inline,
#matcha-bloom-inline *,
#matcha-bloom-inline::before,
#matcha-bloom-inline *::before,
#matcha-bloom-inline::after,
#matcha-bloom-inline *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #matcha-bloom-inline .reveal,
#matcha-bloom-inline .journey-stop{
    opacity: 1;
    transform: none;
  }
}


#matcha-bloom-inline .hero{
  min-height: 672px;
  padding: 24px 16px 18px;
}

#matcha-bloom-inline .hero h1{
  display: grid;
  gap: 4px;
  margin-top: 0;
  font-size: clamp(2.35rem, 10.5vw, 2.75rem);
  line-height: 0.94;
  text-wrap: balance;
}

#matcha-bloom-inline .hero h1 > span{
  display: block;
  white-space: nowrap;
}

#matcha-bloom-inline .hero-title--imperial{
  color: var(--forest);
}

#matcha-bloom-inline .hero-title--ceremonial{
  color: var(--saffron);
}

#matcha-bloom-inline .hero-lead{
  max-width: 340px;
  margin: 12px auto 0;
  color: var(--bamboo);
  font-size: 0.94rem;
  line-height: 1.45;
}

#matcha-bloom-inline .hero-stage{
  height: 258px;
  margin-top: -3px;
}

#matcha-bloom-inline .hero-product--gold{
  inset-inline-start: 11%;
  width: 47%;
}

#matcha-bloom-inline .hero-product--green{
  inset-inline-end: 6%;
  width: 49%;
}

#matcha-bloom-inline .hero-button{
  min-height: 50px;
  margin-top: -2px;
}

#matcha-bloom-inline .hero-badges{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}

#matcha-bloom-inline .hero-badge{
  display: grid;
  grid-template-rows: 48px auto;
  justify-items: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 68px;
  padding: 0 1px;
  color: var(--bamboo-dark);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

#matcha-bloom-inline .hero-badge img{
  width: 54px;
  height: 48px;
  object-fit: contain;
  filter: sepia(0.68) saturate(0.72) hue-rotate(345deg) contrast(0.92);
}

#matcha-bloom-inline .hero-badge--spring img{
  width: 58px;
  object-fit: cover;
  object-position: left center;
  clip-path: inset(2px round 12px);
}

#matcha-bloom-inline .hero-badge b{
  max-width: 82px;
  font-size: 0.54rem;
  font-weight: 750;
  line-height: 1.25;
  text-wrap: balance;
}

#matcha-bloom-inline .hero-badge i{
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--paper);
  background: var(--forest);
  border-radius: 9px 4px 9px 4px;
  font-style: normal;
}

#matcha-bloom-inline .hero-badge i::before{
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

#matcha-bloom-inline .hero-badge--plant i::before{ content: "❧"; transform: rotate(-18deg); }
#matcha-bloom-inline .hero-badge--hand i::before{
  content: "";
  width: 11px;
  height: 10px;
  border: 2px solid var(--paper);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}
#matcha-bloom-inline .hero-badge--hand i::after{
  content: "";
  position: absolute;
  inset: 5px auto auto 12px;
  width: 2px;
  height: 9px;
  background: var(--paper);
  border-radius: 999px;
}
#matcha-bloom-inline .hero-badge--spring i::before{ content: "✦"; }
#matcha-bloom-inline .hero-badge--quality i::before{ content: "✓"; }
#matcha-bloom-inline .hero-badge:nth-child(2) i,
#matcha-bloom-inline .hero-badge:nth-child(4) i{ background: var(--saffron); }

#matcha-bloom-inline .type-lockup > p{
  margin-bottom: 9px;
  font-size: 1rem;
  line-height: 1.25;
}

#matcha-bloom-inline .type-lockup h2{
  margin-top: 0;
  line-height: 1.02;
  text-wrap: balance;
}

#matcha-bloom-inline .type-lockup--major > p{
  margin-bottom: 8px;
  font-family: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(1.7rem, 7.8vw, 2.25rem);
  font-weight: 760;
  line-height: 1;
}

#matcha-bloom-inline .type-lockup--major h2{
  font-size: clamp(2.5rem, 11vw, 3.35rem);
}

#matcha-bloom-inline .grade-stage{
  padding-top: 27px;
}

#matcha-bloom-inline .harvest-divider{
  position: relative;
  z-index: 3;
  width: 92px;
  height: 58px;
  margin: 0 auto 8px;
}

#matcha-bloom-inline .harvest-cart-basket{
  position: absolute;
  inset: 24px 15px auto auto;
  width: 61px;
  height: 23px;
  background: var(--saffron);
  border: 3px solid var(--bamboo);
  border-radius: 5px 5px 13px 13px;
  clip-path: polygon(5% 0, 96% 0, 85% 100%, 16% 100%);
}

#matcha-bloom-inline .harvest-cart-basket::after{
  content: "";
  position: absolute;
  inset: -14px auto auto 54px;
  width: 28px;
  height: 3px;
  background: var(--bamboo);
  border-radius: 999px;
  transform: rotate(-23deg);
  transform-origin: left center;
}

#matcha-bloom-inline .harvest-cart-wheel{
  position: absolute;
  inset-block-end: 3px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 3px solid var(--bamboo);
  border-radius: 50%;
}

#matcha-bloom-inline .harvest-cart-wheel--one{ inset-inline-start: 28px; }
#matcha-bloom-inline .harvest-cart-wheel--two{ inset-inline-start: 61px; }

#matcha-bloom-inline .harvest-cart-leaves{
  position: absolute;
  z-index: 2;
  inset: 4px 23px auto auto;
  width: 52px;
  height: 28px;
}

#matcha-bloom-inline .harvest-cart-leaves i{
  position: absolute;
  width: 22px;
  height: 11px;
  background: var(--leaf);
  border: 2px solid var(--forest);
  border-radius: 100% 0 100% 0;
}

#matcha-bloom-inline .harvest-cart-leaves i:nth-child(1){ inset: 7px 2px auto auto; transform: rotate(24deg); }
#matcha-bloom-inline .harvest-cart-leaves i:nth-child(2){ inset: 0 16px auto auto; transform: rotate(-12deg); }
#matcha-bloom-inline .harvest-cart-leaves i:nth-child(3){ inset: 10px 28px auto auto; transform: rotate(19deg); }
#matcha-bloom-inline .harvest-cart-leaves i:nth-child(4){ inset: 1px 33px auto auto; transform: rotate(-24deg); }

#matcha-bloom-inline .taste-copy{
  min-height: 185px;
}

#matcha-bloom-inline .taste-copy h3{
  font-size: 1.62rem;
  line-height: 1.08;
}

#matcha-bloom-inline .taste-copy article > p{
  min-height: 48px;
  font-size: 0.77rem;
  line-height: 1.55;
  text-wrap: pretty;
}

#matcha-bloom-inline .offer-section .type-lockup--light > p{
  color: rgba(24, 51, 38, 0.79);
}

#matcha-bloom-inline .offer-section .type-lockup--light h2{
  max-width: 360px;
  margin-inline: auto;
  font-size: clamp(2.35rem, 10.7vw, 3.2rem);
}

#matcha-bloom-inline .offer-section .type-lockup--light h2 em{
  display: block;
  color: var(--paper);
  font-style: normal;
}

#matcha-bloom-inline .offer-ticket{
  height: 603px;
  min-height: 603px;
}

#matcha-bloom-inline .offer-visual{
  height: 205px;
  background:
    radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(180deg, #ddd0bd 0 70%, #c4b294 70% 100%);
}

#matcha-bloom-inline .offer-visual::before{
  content: "";
  position: absolute;
  z-index: 1;
  inset: 69% 0 auto;
  height: 1px;
  background: rgba(99, 73, 48, 0.15);
  box-shadow: 0 -12px 24px rgba(99, 73, 48, 0.06);
}

#matcha-bloom-inline .offer-art--duo{
  inset: 0;
  align-items: stretch;
}

#matcha-bloom-inline .offer-art--quad{
  inset: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 0;
}

#matcha-bloom-inline .offer-art--quad .offer-quad-photo{
  width: 100%;
  max-height: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center 51%;
  filter: none;
  transform: none;
}

#matcha-bloom-inline .offer-art--quad img:nth-child(odd),
#matcha-bloom-inline .offer-art--quad img:nth-child(even){ transform: none; }

#matcha-bloom-inline .single-grade-picker{
  position: absolute;
  z-index: 4;
  inset: 282px 25px auto;
  width: auto;
  min-height: 41px;
  margin-top: 0;
  padding: 3px;
  background: rgba(255, 249, 239, 0.94);
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(24, 51, 38, 0.13);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
}

#matcha-bloom-inline .single-grade-picker.is-visible{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#matcha-bloom-inline .comparison-section{
  padding: 24px 8px 26px;
}

#matcha-bloom-inline .comparison-section .type-lockup > p{
  margin-bottom: 3px;
  font-size: 0.68rem;
}

#matcha-bloom-inline .comparison-section .type-lockup h2{
  font-size: clamp(2rem, 9.2vw, 2.55rem);
  line-height: 0.92;
}

#matcha-bloom-inline .comparison-board{
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(24, 51, 38, 0.17);
  border-radius: 25px;
  box-shadow: 0 18px 42px rgba(24, 51, 38, 0.11);
}

#matcha-bloom-inline .comparison-head{
  min-width: 0;
  min-height: 146px;
  padding: 10px 8px 9px;
}

#matcha-bloom-inline .comparison-head--bloom{
  color: #fff;
  background:
    radial-gradient(circle at 10% 0, rgba(199, 220, 121, 0.25), transparent 38%),
    var(--forest);
}

#matcha-bloom-inline .comparison-head--commercial{
  color: #5d554c;
  background:
    linear-gradient(rgba(249, 246, 240, 0.91), rgba(249, 246, 240, 0.91)),
    repeating-linear-gradient(118deg, #b6ab9d 0 2px, transparent 2px 12px);
  border-inline-start: 1px solid #d9d0c2;
}

#matcha-bloom-inline .comparison-head img{
  width: 70px;
  filter: none;
}

#matcha-bloom-inline .comparison-head h3{
  margin-top: 6px;
  font-size: 1.12rem;
  line-height: 1;
  text-wrap: pretty;
}

#matcha-bloom-inline .comparison-head--bloom h3{ color: var(--lime); }
#matcha-bloom-inline .comparison-head--commercial h3{ margin-top: 1px; color: #5d554c; }

#matcha-bloom-inline .comparison-head p{
  margin-top: 5px;
  font-size: 0.59rem;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

#matcha-bloom-inline .comparison-head--bloom p{ color: rgba(255, 255, 255, 0.76); }
#matcha-bloom-inline .comparison-head--commercial p{ color: #8a5b43; }

#matcha-bloom-inline .comparison-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#matcha-bloom-inline .comparison-cell{
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-content: start;
  gap: 3px;
  min-width: 0;
  min-height: 82px;
  padding: 6px 5px;
  border-top: 1px solid rgba(24, 51, 38, 0.15);
  font-size: 0.63rem;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

#matcha-bloom-inline .comparison-cell b{
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.5rem;
}

#matcha-bloom-inline .comparison-cell--bloom{
  color: rgba(255, 255, 255, 0.88);
  background: var(--forest);
  border-top-color: rgba(255, 255, 255, 0.15);
}

#matcha-bloom-inline .comparison-cell--bloom b{
  color: var(--forest-dark);
  background: var(--lime);
}

#matcha-bloom-inline .comparison-cell--commercial{
  color: #625a50;
  background: #f5f1e9;
  border-inline-start: 1px solid #d9d0c2;
}

#matcha-bloom-inline .comparison-cell--commercial b{
  color: #fff;
  background: #8b8074;
}

#matcha-bloom-inline .journey-section .type-lockup--major{
  padding-inline: 4px;
}

#matcha-bloom-inline .journey-traveler image{
  filter: drop-shadow(0 5px 5px rgba(24, 51, 38, 0.28));
}

#matcha-bloom-inline .brew-section .type-lockup--major > p{
  color: var(--saffron-soft);
}

#matcha-bloom-inline .inline-video{
  position: relative;
  width: min(100%, 272px);
  aspect-ratio: 9 / 15;
  margin: 18px auto 0;
  overflow: hidden;
  background: var(--bamboo-dark);
  border: 1px solid rgba(255, 249, 239, 0.16);
  border-radius: 24px;
  box-shadow: 0 22px 48px rgba(51, 27, 16, 0.32);
}

#matcha-bloom-inline .inline-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #101610;
}

#matcha-bloom-inline .inline-video-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(17, 30, 21, 0.03) 35%, rgba(17, 30, 21, 0.7));
  border: 0;
  text-align: center;
}

#matcha-bloom-inline .inline-video-play span{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-inline: auto;
  padding-inline-start: 3px;
  color: var(--forest-dark);
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(24, 51, 38, 0.25);
}

#matcha-bloom-inline .inline-video-play b{
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.45rem;
}

#matcha-bloom-inline .inline-video.is-playing .inline-video-play{
  opacity: 0;
  pointer-events: none;
}

#matcha-bloom-inline .proof-section{
  padding: 46px 16px 42px;
  overflow: hidden;
}

#matcha-bloom-inline .proof-section .type-lockup{
  padding-inline: 0;
}

#matcha-bloom-inline .proof-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  overflow: hidden;
  background: var(--forest);
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(24, 51, 38, 0.13);
}

#matcha-bloom-inline .proof-metrics span{
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 88px;
  padding: 10px 4px;
  text-align: center;
}

#matcha-bloom-inline .proof-metrics span + span{
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

#matcha-bloom-inline .proof-metrics strong{
  color: var(--lime);
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: clamp(1.25rem, 5.6vw, 1.72rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#matcha-bloom-inline .proof-metrics small{
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.57rem;
  line-height: 1.2;
}

#matcha-bloom-inline .review-list{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

#matcha-bloom-inline .review-card{
  padding: 15px 16px 13px;
  background: rgba(255, 249, 239, 0.95);
  border: 1px solid rgba(24, 51, 38, 0.11);
  border-radius: 17px 17px 7px 17px;
  box-shadow: 0 9px 22px rgba(24, 51, 38, 0.07);
}

#matcha-bloom-inline .review-card:nth-child(even){
  margin-inline-start: 14px;
  border-radius: 17px 17px 17px 7px;
}

#matcha-bloom-inline .review-card header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#matcha-bloom-inline .review-card header strong{
  color: var(--forest-dark);
  font-size: 0.79rem;
}

#matcha-bloom-inline .review-card header span{
  color: var(--saffron);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

#matcha-bloom-inline .review-card p{
  margin-top: 7px;
  color: #445348;
  font-size: 0.75rem;
  line-height: 1.65;
  text-wrap: pretty;
}

#matcha-bloom-inline .review-card small{
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: var(--forest);
  font-size: 0.56rem;
  font-weight: 700;
}

@media (max-width: 370px) {
  #matcha-bloom-inline .hero{
    min-height: 650px;
    padding-inline: 14px;
  }

  #matcha-bloom-inline .hero h1{
    font-size: 2.3rem;
  }

  #matcha-bloom-inline .hero-stage{
    height: 242px;
  }

  #matcha-bloom-inline .hero-badge{
    gap: 3px;
    padding-inline: 0;
  }

  #matcha-bloom-inline .comparison-head{
    min-height: 152px;
    padding-inline: 7px;
  }

  #matcha-bloom-inline .comparison-head h3{
    font-size: 1.02rem;
  }

  #matcha-bloom-inline .comparison-cell{
    min-height: 86px;
    padding-inline: 4px;
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #matcha-bloom-inline .journey-traveler{
    display: none;
  }
}


#matcha-bloom-inline .mobile-page > main{
  display: flex;
  flex-direction: column;
}

#matcha-bloom-inline .hero{ order: -30; }
#matcha-bloom-inline .grade-stage{ order: -20; }
#matcha-bloom-inline .offer-section{ order: -10; }
#matcha-bloom-inline .comparison-section{ order: 10; }
#matcha-bloom-inline .journey-section{ order: 20; }
#matcha-bloom-inline .brew-section{ order: 30; }
#matcha-bloom-inline .faq-section{ order: 40; }
#matcha-bloom-inline .closing-section{ order: 50; }

#matcha-bloom-inline .hero{
  min-height: 558px;
  padding: 18px 16px 14px;
  background:
    radial-gradient(circle at 91% 18%, rgba(216, 154, 44, 0.18) 0 17%, transparent 17.4%),
    radial-gradient(circle at -4% 64%, rgba(155, 194, 99, 0.22) 0 23%, transparent 23.4%),
    linear-gradient(160deg, #fffaf1 0 54%, #edf3df 100%);
}

#matcha-bloom-inline .hero::before{
  inset: 63% -18% -32%;
  background: #e4ecd4;
}

#matcha-bloom-inline .hero-kicker{
  margin-bottom: 5px;
  color: var(--bamboo);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

#matcha-bloom-inline .hero h1{
  gap: 0;
  font-size: clamp(2.9rem, 13vw, 3.55rem);
  line-height: 0.9;
}

#matcha-bloom-inline .hero-lead{
  max-width: 345px;
  margin-top: 9px;
  color: #4f5f53;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: balance;
}

#matcha-bloom-inline .hero-stage{
  height: 212px;
  margin-top: -7px;
}

#matcha-bloom-inline .hero-stage::before{
  inset-inline: 12%;
  inset-block-end: 10px;
  height: 27px;
}

#matcha-bloom-inline .hero-leaf{
  inset-block-start: 61px;
  width: 100px;
  height: 45px;
  opacity: 0.68;
}

#matcha-bloom-inline .hero-product--gold{
  inset-inline-start: 12%;
  width: 43%;
}

#matcha-bloom-inline .hero-product--green{
  inset-inline-end: 7%;
  width: 46%;
  transform: rotate(5deg) translateY(9px);
}

#matcha-bloom-inline .hero-button{
  min-height: 48px;
  margin-top: -1px;
  border-radius: 14px;
  font-size: 0.83rem;
}

#matcha-bloom-inline .hero-proof{
  margin-top: 6px;
  color: var(--forest);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

#matcha-bloom-inline .hero-proof span{
  margin-inline-end: 4px;
  color: var(--saffron);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

#matcha-bloom-inline .hero-badges{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
}

#matcha-bloom-inline .hero-badge{
  grid-template-rows: 34px auto;
  gap: 2px;
  min-height: 53px;
}

#matcha-bloom-inline .hero-badge svg{
  width: 50px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: var(--bamboo);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#matcha-bloom-inline .hero-badge:nth-child(2) svg{
  stroke: var(--saffron);
}

#matcha-bloom-inline .hero-badge b{
  max-width: 102px;
  color: var(--bamboo-dark);
  font-size: 0.67rem;
  line-height: 1.3;
}

#matcha-bloom-inline .grade-stage{
  padding: 32px 16px 30px;
  background:
    radial-gradient(circle at 108% 27%, color-mix(in srgb, var(--stage-accent) 13%, transparent) 0 23%, transparent 23.4%),
    linear-gradient(180deg, var(--stage-tint), var(--paper));
}

#matcha-bloom-inline .grade-stage::after{
  inset-block-start: 124px;
  opacity: 0.55;
}

#matcha-bloom-inline .grade-stage .type-lockup > p{
  margin-bottom: 7px;
  font-size: 0.78rem;
}

#matcha-bloom-inline .grade-stage .type-lockup h2{
  font-size: clamp(2.25rem, 10.4vw, 3rem);
  line-height: 0.98;
}

#matcha-bloom-inline .product-spread{
  align-items: stretch;
  height: 232px;
  gap: 8px;
  margin-top: 17px;
}

#matcha-bloom-inline .product-choice{
  display: grid;
  grid-template-rows: 34px 142px 27px 18px;
  align-items: center;
  height: 226px;
  padding: 0 6px 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(24, 51, 38, 0.09);
  border-radius: 20px;
  opacity: 0.82;
}

#matcha-bloom-inline .product-choice::before{
  inset: 32px 8px 43px;
  border-radius: 44% 44% 17px 17px;
}

#matcha-bloom-inline .product-choice .product-choice-tag{
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: calc(100% + 12px);
  margin-inline: -6px;
  color: #fff;
  background: var(--saffron);
  font-size: 0.64rem;
  font-weight: 750;
}

#matcha-bloom-inline .product-choice[data-grade-select="imperial"] .product-choice-tag{
  background: var(--forest);
}

#matcha-bloom-inline .product-choice img{
  height: 140px;
  align-self: end;
}

#matcha-bloom-inline .product-choice strong{
  font-size: 1.03rem;
}

#matcha-bloom-inline .product-choice > span:last-child{
  color: var(--muted);
  font-size: 0.65rem;
}

#matcha-bloom-inline .product-choice.is-active{
  border-color: color-mix(in srgb, var(--stage-accent) 58%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--stage-accent) 15%, transparent);
  transform: translateY(-3px);
}

#matcha-bloom-inline .taste-copy{
  min-height: 151px;
  padding: 14px 15px 12px;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(24, 51, 38, 0.1);
}

#matcha-bloom-inline .taste-label{
  display: block;
  margin-bottom: 2px;
  color: var(--stage-accent);
  font-size: 0.67rem;
  font-weight: 750;
}

#matcha-bloom-inline .taste-copy h3{
  font-size: 1.38rem;
  line-height: 1.07;
}

#matcha-bloom-inline .taste-copy article > p{
  min-height: 38px;
  margin-top: 5px;
  font-size: 0.72rem;
  line-height: 1.55;
}

#matcha-bloom-inline .taste-facts{
  margin-top: 9px;
}

#matcha-bloom-inline .taste-facts span{
  padding-top: 8px;
  font-size: 0.68rem;
}

#matcha-bloom-inline .grade-to-offer{
  min-height: 46px;
  margin-top: 10px;
  border-radius: 14px;
  font-size: 0.78rem;
}

#matcha-bloom-inline .offer-section{
  padding: 34px 14px 36px;
  background:
    radial-gradient(circle at 9% 9%, rgba(244, 199, 102, 0.2) 0 15%, transparent 15.4%),
    radial-gradient(circle at 111% 71%, rgba(199, 220, 121, 0.13) 0 29%, transparent 29.4%),
    var(--forest-dark);
}

#matcha-bloom-inline .offer-section .type-lockup--light > p{
  color: rgba(255, 249, 239, 0.74);
}

#matcha-bloom-inline .offer-section .type-lockup--light h2{
  color: var(--paper);
  font-size: clamp(2.05rem, 9.7vw, 2.8rem);
  line-height: 0.95;
}

#matcha-bloom-inline .offer-section .type-lockup--light h2 em{
  color: var(--saffron-soft);
}

#matcha-bloom-inline .offer-ticket{
  height: 480px;
  min-height: 480px;
  padding: 10px;
  margin-top: 17px;
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(3, 16, 9, 0.42);
}

#matcha-bloom-inline .offer-visual{
  order: 1;
  height: 176px;
  margin-top: 0;
  border-radius: 17px;
}

#matcha-bloom-inline .offer-art{
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition: opacity 190ms var(--ease), transform 190ms var(--ease), visibility 190ms;
}

#matcha-bloom-inline .offer-art.is-active{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

#matcha-bloom-inline .offer-art--duo,
#matcha-bloom-inline .offer-art--quad{
  inset: 0;
}

#matcha-bloom-inline .offer-art--quad .offer-quad-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

#matcha-bloom-inline .offer-art--quad .offer-quad-photo{
  object-position: center 51%;
}

#matcha-bloom-inline .offer-art--duo{
  align-items: end;
  justify-content: center;
  gap: 4px;
  padding: 7px 24px 0;
}

#matcha-bloom-inline .offer-art--duo .offer-duo-product{
  width: auto;
  max-width: 46%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 12px rgba(24, 51, 38, 0.18));
  transform: none;
}

#matcha-bloom-inline .offer-art--duo .offer-duo-product--ceremonial{
  z-index: 2;
  height: 166px;
}

#matcha-bloom-inline .offer-art--duo .offer-duo-product--imperial{
  height: 151px;
}

#matcha-bloom-inline .offer-choices{
  order: 2;
  gap: 5px;
  margin-top: 9px;
}

#matcha-bloom-inline .tier-option{
  min-height: 80px;
  padding: 8px 4px 6px;
  border-radius: 13px;
}

#matcha-bloom-inline .tier-option b{
  font-size: 0.66rem;
}

#matcha-bloom-inline .tier-option small{
  font-size: 0.6rem;
  line-height: 1.3;
}

#matcha-bloom-inline .tier-option > strong{
  font-size: 1.13rem;
}

#matcha-bloom-inline .single-grade-picker{
  position: absolute;
  z-index: 5;
  inset: 139px 20px auto;
  order: initial;
  width: auto;
  min-height: 39px;
  margin-top: 0;
  padding: 3px;
  box-shadow: 0 7px 18px rgba(24, 51, 38, 0.13);
}

#matcha-bloom-inline .offer-summary{
  padding: 10px 3px 8px;
  margin-top: 4px;
}

#matcha-bloom-inline .offer-summary > div:first-child > span{
  font-size: 0.8rem;
}

#matcha-bloom-inline .offer-summary > div:first-child p{
  font-size: 0.61rem;
}

#matcha-bloom-inline .offer-price strong{
  font-size: 1.75rem;
}

#matcha-bloom-inline .offer-meta span{
  padding-block: 6px;
  font-size: 0.55rem;
}

#matcha-bloom-inline .offer-meta b{
  font-size: 0.67rem;
}

#matcha-bloom-inline .purchase-button{
  min-height: 47px;
  margin-top: 8px;
  border-radius: 14px;
  font-size: 0.76rem;
}

#matcha-bloom-inline .quad-note{
  margin-top: 4px;
  font-size: 0.61rem;
}

#matcha-bloom-inline .comparison-section{
  padding: 34px 8px 36px;
  background: #f7f1e6;
}

#matcha-bloom-inline .comparison-section .type-lockup > p{
  margin-bottom: 6px;
  font-size: 0.76rem;
}

#matcha-bloom-inline .comparison-section .type-lockup h2{
  font-size: clamp(2.2rem, 9.9vw, 2.8rem);
  line-height: 0.98;
}

#matcha-bloom-inline .comparison-board{
  margin-top: 16px;
  border-radius: 22px;
}

#matcha-bloom-inline .comparison-head{
  min-height: 124px;
  padding: 11px 9px 10px;
}

#matcha-bloom-inline .comparison-head img{
  width: 62px;
}

#matcha-bloom-inline .commercial-mark{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #8b8074;
  border-radius: 50%;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 1.05rem;
}

#matcha-bloom-inline .comparison-head h3{
  margin-top: 6px;
  font-size: 1.03rem;
  line-height: 1.05;
}

#matcha-bloom-inline .comparison-head--commercial h3{
  margin-top: 6px;
}

#matcha-bloom-inline .comparison-head p{
  margin-top: 5px;
  font-size: 0.69rem;
  line-height: 1.42;
}

#matcha-bloom-inline .comparison-cell{
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 5px;
  min-height: 75px;
  padding: 9px 7px;
  font-size: 0.72rem;
  line-height: 1.45;
}

#matcha-bloom-inline .comparison-cell b{
  width: 16px;
  height: 16px;
  margin-top: 1px;
  font-size: 0.55rem;
}

#matcha-bloom-inline .comparison-cell span strong{
  display: block;
  margin-bottom: 2px;
  color: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.7;
}

#matcha-bloom-inline .journey-section{
  padding: 34px 12px 20px;
}

#matcha-bloom-inline .journey-section .type-lockup--major > p{
  margin-bottom: 6px;
  font-size: 1.35rem;
}

#matcha-bloom-inline .journey-section .type-lockup--major h2{
  font-size: clamp(2.4rem, 10.7vw, 3.1rem);
}

#matcha-bloom-inline .journey-map{
  height: 510px;
  margin-top: 5px;
}

#matcha-bloom-inline .journey-stop{
  width: 168px;
}

#matcha-bloom-inline .journey-stop > img,
#matcha-bloom-inline .shipping-illustration{
  width: 84px;
  height: 76px;
}

#matcha-bloom-inline .journey-stop > div:last-child{
  padding: 7px 9px;
}

#matcha-bloom-inline .journey-stop h3{
  font-size: 1.06rem;
}

#matcha-bloom-inline .journey-stop p{
  font-size: 0.65rem;
}

#matcha-bloom-inline .journey-stop--farm{ inset: 0 7px auto auto; }
#matcha-bloom-inline .journey-stop--pluck{ inset: 121px auto auto 5px; }
#matcha-bloom-inline .journey-stop--quality{ inset: 242px 7px auto auto; }
#matcha-bloom-inline .journey-stop--ship{ inset: 363px auto auto 7px; }

#matcha-bloom-inline .shipping-product{
  inset: 22px 25px auto auto;
  width: 40px;
  height: 52px;
}

#matcha-bloom-inline .shipping-logo{
  inset: auto auto 7px 8px;
  width: 29px;
}

#matcha-bloom-inline .brew-section{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  column-gap: 11px;
  padding: 34px 16px 38px;
  background:
    radial-gradient(circle at 8% 7%, rgba(244, 199, 102, 0.17), transparent 24%),
    radial-gradient(circle at 108% 61%, rgba(199, 220, 121, 0.12), transparent 25%),
    #714a33;
}

#matcha-bloom-inline .brew-section .type-lockup,
#matcha-bloom-inline .brew-steps{
  grid-column: 1 / -1;
}

#matcha-bloom-inline .brew-section .type-lockup--major > p{
  margin-bottom: 5px;
  color: var(--saffron-soft);
  font-size: 1.35rem;
}

#matcha-bloom-inline .brew-section .type-lockup--major h2{
  font-size: clamp(2.45rem, 10.9vw, 3.15rem);
}

#matcha-bloom-inline .brew-steps{
  gap: 5px;
  margin-top: 14px;
}

#matcha-bloom-inline .brew-step{
  min-height: 130px;
}

#matcha-bloom-inline .brew-step img{
  height: 76px;
}

#matcha-bloom-inline .brew-step h3{
  font-size: 0.93rem;
}

#matcha-bloom-inline .brew-step p{
  max-width: 106px;
  font-size: 0.6rem;
}

#matcha-bloom-inline .drink-switch{
  grid-column: 1;
  align-self: start;
  margin-top: 14px;
}

#matcha-bloom-inline .drink-switch button{
  min-height: 39px;
  font-size: 0.72rem;
}

#matcha-bloom-inline .drink-panels{
  grid-column: 1;
  align-self: stretch;
  min-height: 180px;
  padding: 12px;
  margin-top: 7px;
}

#matcha-bloom-inline .drink-panels p{
  font-size: 0.68rem;
  line-height: 1.6;
}

#matcha-bloom-inline .inline-video{
  grid-column: 2;
  grid-row: 3 / 5;
  align-self: stretch;
  width: 132px;
  aspect-ratio: 9 / 16;
  margin-top: 14px;
  border-radius: 20px;
}

#matcha-bloom-inline .inline-video-play{
  gap: 6px;
}

#matcha-bloom-inline .inline-video-play span{
  width: 42px;
  height: 42px;
}

#matcha-bloom-inline .inline-video-play b{
  padding-inline: 8px;
  font-size: 1.05rem;
  line-height: 1.05;
}

#matcha-bloom-inline .faq-section{
  padding: 32px 18px 28px;
}

#matcha-bloom-inline .faq-section .type-lockup > p{
  margin-bottom: 6px;
  font-size: 0.76rem;
}

#matcha-bloom-inline .faq-section .type-lockup h2{
  font-size: clamp(2.25rem, 10vw, 2.9rem);
}

#matcha-bloom-inline .faq-list{
  margin-top: 18px;
}

#matcha-bloom-inline .faq-item button{
  min-height: 51px;
  font-size: 0.78rem;
}

#matcha-bloom-inline .faq-item [data-faq-answer] p{
  font-size: 0.72rem;
}

#matcha-bloom-inline .closing-section{
  padding: 32px 20px 30px;
}

#matcha-bloom-inline .closing-section h2{
  margin-top: 13px;
  font-size: 2.12rem;
}

#matcha-bloom-inline .closing-section p{
  max-width: 320px;
  font-size: 0.72rem;
}

#matcha-bloom-inline .closing-section .primary-button{
  min-height: 47px;
  margin-top: 14px;
}

#matcha-bloom-inline .mobile-buybar{
  min-height: 54px;
  padding: 5px 6px 5px 11px;
  border-radius: 16px;
}

#matcha-bloom-inline .mobile-buybar button{
  min-width: 112px;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.72rem;
}

#matcha-bloom-inline .mobile-buybar button span{
  font-size: 0.72rem;
}

@media (max-width: 370px) {
  #matcha-bloom-inline .hero{
    min-height: 548px;
    padding-inline: 14px;
  }

  #matcha-bloom-inline .hero h1{
    font-size: 2.7rem;
  }

  #matcha-bloom-inline .hero-stage{
    height: 204px;
  }

  #matcha-bloom-inline .product-choice{
    grid-template-rows: 34px 136px 27px 18px;
  }

  #matcha-bloom-inline .comparison-head p,
#matcha-bloom-inline .comparison-cell{
    font-size: 0.67rem;
  }

  #matcha-bloom-inline .brew-section{
    grid-template-columns: minmax(0, 1fr) 124px;
    column-gap: 8px;
    padding-inline: 13px;
  }

  #matcha-bloom-inline .inline-video{
    width: 124px;
  }
}


#matcha-bloom-inline .mobile-buybar{
  inset: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  display: block;
  width: clamp(224px, 62vw, 260px);
  min-height: 58px;
  padding: 5px;
  background: rgba(255, 249, 239, 0.97);
  border-color: rgba(121, 80, 52, 0.24);
  border-radius: 19px;
  box-shadow: 0 16px 38px rgba(77, 46, 32, 0.24);
  transform: translateX(-50%);
}

#matcha-bloom-inline .mobile-buybar.is-hidden{
  transform: translate(-50%, calc(100% + 24px));
}

#matcha-bloom-inline .mobile-buybar > div{
  display: none;
}

#matcha-bloom-inline .mobile-buybar button{
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 6px 20px 5px;
  border-radius: 14px;
  font-family: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 760;
  line-height: 1.1;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}

#matcha-bloom-inline .mobile-buybar button span{
  color: var(--paper);
  font: inherit;
}

#matcha-bloom-inline .mobile-buybar button:active{
  transform: scale(0.98);
}

#matcha-bloom-inline .whatsapp-float{
  position: fixed;
  z-index: 46;
  right: max(8px, calc(50% - clamp(112px, 31vw, 130px) - 64px));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--paper);
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 17px;
  box-shadow: 0 14px 32px rgba(24, 53, 37, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), background-color 180ms var(--ease);
}

#matcha-bloom-inline .whatsapp-float svg{
  width: 25px;
  height: 25px;
  fill: currentColor;
}

#matcha-bloom-inline .whatsapp-float.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
}

#matcha-bloom-inline .whatsapp-float:active{
  transform: scale(0.96);
}

@media (hover: hover) {
  #matcha-bloom-inline .mobile-buybar button:hover{
    background: var(--bamboo-dark);
    transform: translateY(-1px);
  }

  #matcha-bloom-inline .whatsapp-float:hover{
    background: var(--forest-dark);
    transform: translateY(-2px);
  }
}


#matcha-bloom-inline .type-lockup{
  display: grid;
  justify-items: center;
  row-gap: 10px;
}

#matcha-bloom-inline .type-lockup > p,
#matcha-bloom-inline .type-lockup h2{
  margin: 0;
}

#matcha-bloom-inline .type-lockup > p{
  position: relative;
  z-index: 2;
  line-height: 1.45;
  text-wrap: balance;
}

#matcha-bloom-inline .hero-kicker{
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  text-wrap: balance;
}

#matcha-bloom-inline .hero h1{
  margin: 0;
}

#matcha-bloom-inline .hero-lead{
  margin-top: 10px;
}

#matcha-bloom-inline .grade-stage .type-lockup > p,
#matcha-bloom-inline .offer-section .type-lockup--light > p,
#matcha-bloom-inline .comparison-section .type-lockup > p{
  font-size: 0.96rem;
  font-weight: 650;
}

#matcha-bloom-inline .faq-section .type-lockup > p{
  font-size: 0.9rem;
  font-weight: 650;
}

#matcha-bloom-inline .journey-section .type-lockup--major > p,
#matcha-bloom-inline .brew-section .type-lockup--major > p,
#matcha-bloom-inline .proof-section .type-lockup--major > p{
  line-height: 1.2;
}

#matcha-bloom-inline .taste-label{
  margin-bottom: 7px;
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 370px) {
  #matcha-bloom-inline .hero-kicker{
    font-size: 0.84rem;
  }

  #matcha-bloom-inline .grade-stage .type-lockup > p,
#matcha-bloom-inline .offer-section .type-lockup--light > p,
#matcha-bloom-inline .comparison-section .type-lockup > p{
    font-size: 0.9rem;
  }
}


#matcha-bloom-inline .type-lockup{
  row-gap: 16px;
}

#matcha-bloom-inline .hero-kicker{
  margin-bottom: 24px;
}

#matcha-bloom-inline .hero h1{
  gap: 2px;
  line-height: 0.98;
}

@media (max-width: 370px) {
  #matcha-bloom-inline .type-lockup{
    row-gap: 14px;
  }

  #matcha-bloom-inline .hero-kicker{
    margin-bottom: 20px;
  }
}


#matcha-bloom-inline .hero-button,
#matcha-bloom-inline .hero-proof,
#matcha-bloom-inline .product-choice .product-choice-tag,
#matcha-bloom-inline .taste-facts span,
#matcha-bloom-inline .offer-meta span,
#matcha-bloom-inline .offer-meta b,
#matcha-bloom-inline .grade-to-offer{
  font-family: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

#matcha-bloom-inline .hero-button{
  font-size: 0.96rem;
  font-weight: 760;
  line-height: 1.1;
}

#matcha-bloom-inline .hero-proof{
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.25;
}

#matcha-bloom-inline .hero-proof span{
  font-size: 0.7rem;
  font-weight: 760;
}

#matcha-bloom-inline .product-choice .product-choice-tag{
  font-size: 0.73rem;
  font-weight: 760;
  line-height: 1.1;
}

#matcha-bloom-inline .taste-facts span{
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.2;
}

#matcha-bloom-inline .offer-meta span{
  font-weight: 650;
}

#matcha-bloom-inline .offer-meta b{
  font-weight: 760;
}

#matcha-bloom-inline .grade-to-offer{
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.1;
}


#matcha-bloom-inline .comparison-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 487px;
}

#matcha-bloom-inline .journey-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 605px;
}

#matcha-bloom-inline .brew-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 486px;
}

#matcha-bloom-inline .proof-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 902px;
}

#matcha-bloom-inline .faq-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 466px;
}

#matcha-bloom-inline .closing-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 213px;
}

#matcha-bloom-inline{width:100%;max-width:none;margin:0;padding:0;direction:rtl;color:var(--ink);background:var(--paper);font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:16px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow:clip}
#matcha-bloom-inline .brand-mark{display:none!important}
#matcha-bloom-inline .mobile-page{min-height:100%;box-shadow:none}



#matcha-bloom-inline{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)}
#matcha-bloom-inline .native-state{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important}
#matcha-bloom-inline .reveal,#matcha-bloom-inline .journey-stop{opacity:1;transform:none}
#matcha-bloom-inline .journey-map .journey-stop{animation:none}
#matcha-bloom-inline .product-choice{cursor:pointer}
#matcha-bloom-inline #mb-grade-ceremonial-native:checked~.product-spread label[for="mb-grade-ceremonial-native"],#matcha-bloom-inline #mb-grade-imperial-native:checked~.product-spread label[for="mb-grade-imperial-native"]{z-index:2;opacity:1;transform:none;border-color:var(--stage-accent);box-shadow:0 12px 28px color-mix(in srgb,var(--stage-accent) 15%,transparent)}
#matcha-bloom-inline #mb-grade-ceremonial-native:checked~.product-spread label[for="mb-grade-imperial-native"],#matcha-bloom-inline #mb-grade-imperial-native:checked~.product-spread label[for="mb-grade-ceremonial-native"]{opacity:.66;transform:none}
#matcha-bloom-inline .native-grade-panel{display:none}
#matcha-bloom-inline #mb-grade-ceremonial-native:checked~.taste-copy .native-grade-panel--ceremonial,#matcha-bloom-inline #mb-grade-imperial-native:checked~.taste-copy .native-grade-panel--imperial{display:block}
#matcha-bloom-inline .offer-art{display:flex;visibility:hidden;opacity:0;pointer-events:none}
#matcha-bloom-inline #mb-tier-single-native:checked~.offer-visual .offer-art--single,#matcha-bloom-inline #mb-tier-duo-native:checked~.offer-visual .offer-art--duo,#matcha-bloom-inline #mb-tier-quad-native:checked~.offer-visual .offer-art--quad{visibility:visible;opacity:1;transform:scale(1)}
#matcha-bloom-inline #mb-single-ceremonial-native:checked~.offer-visual .single-imperial,#matcha-bloom-inline #mb-single-imperial-native:checked~.offer-visual .single-ceremonial{display:none}
#matcha-bloom-inline .tier-option{cursor:pointer}
#matcha-bloom-inline #mb-tier-single-native:checked~.offer-choices label[for="mb-tier-single-native"],#matcha-bloom-inline #mb-tier-duo-native:checked~.offer-choices label[for="mb-tier-duo-native"],#matcha-bloom-inline #mb-tier-quad-native:checked~.offer-choices label[for="mb-tier-quad-native"]{background:#edf4dd;border-color:var(--leaf);box-shadow:inset 0 0 0 1px var(--leaf)}
#matcha-bloom-inline #mb-tier-single-native:checked~.offer-choices label[for="mb-tier-single-native"]::after,#matcha-bloom-inline #mb-tier-duo-native:checked~.offer-choices label[for="mb-tier-duo-native"]::after,#matcha-bloom-inline #mb-tier-quad-native:checked~.offer-choices label[for="mb-tier-quad-native"]::after{content:"✓";position:absolute;inset:5px auto auto 5px;display:grid;place-items:center;width:19px;height:19px;color:#fff;background:var(--forest);border-radius:50%;font-size:.67rem}
#matcha-bloom-inline .single-grade-picker{display:grid;visibility:hidden;opacity:0;pointer-events:none}
#matcha-bloom-inline #mb-tier-single-native:checked~.single-grade-picker{visibility:visible;opacity:1;pointer-events:auto}
#matcha-bloom-inline .single-grade-picker label{display:grid;place-items:center;min-height:41px;color:var(--muted);border:1px solid var(--line);border-radius:13px;font-size:.74rem;font-weight:700;cursor:pointer}
#matcha-bloom-inline #mb-single-ceremonial-native:checked~.single-grade-picker label[for="mb-single-ceremonial-native"],#matcha-bloom-inline #mb-single-imperial-native:checked~.single-grade-picker label[for="mb-single-imperial-native"]{color:#fff;background:var(--forest);border-color:var(--forest)}
#matcha-bloom-inline .native-offer-details{order:4;min-height:169px}
#matcha-bloom-inline .native-offer-panel{display:none}
#matcha-bloom-inline #mb-tier-duo-native:checked~.native-offer-details .native-offer-panel--duo,#matcha-bloom-inline #mb-tier-quad-native:checked~.native-offer-details .native-offer-panel--quad,#matcha-bloom-inline #mb-tier-single-native:checked~#mb-single-ceremonial-native:checked~.native-offer-details .native-offer-panel--single-ceremonial,#matcha-bloom-inline #mb-tier-single-native:checked~#mb-single-imperial-native:checked~.native-offer-details .native-offer-panel--single-imperial{display:block}
#matcha-bloom-inline .native-offer-panel .offer-summary,#matcha-bloom-inline .native-offer-panel .offer-meta,#matcha-bloom-inline .native-offer-panel .purchase-button{order:initial}
#matcha-bloom-inline .drink-switch label{display:grid;place-items:center;min-height:41px;color:rgba(255,249,239,.72);border-radius:11px;font-weight:750;cursor:pointer}
#matcha-bloom-inline #mb-drink-hot-native:checked~.drink-switch label[for="mb-drink-hot-native"],#matcha-bloom-inline #mb-drink-cold-native:checked~.drink-switch label[for="mb-drink-cold-native"]{color:var(--bamboo-dark);background:var(--paper)}
#matcha-bloom-inline .drink-panels .native-drink-panel{display:none}
#matcha-bloom-inline #mb-drink-hot-native:checked~.drink-panels .native-drink-panel--hot,#matcha-bloom-inline #mb-drink-cold-native:checked~.drink-panels .native-drink-panel--cold{display:grid}
#matcha-bloom-inline .faq-item summary{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;min-height:55px;padding:10px 0;font-size:.82rem;font-weight:750;text-align:start;cursor:pointer;list-style:none}
#matcha-bloom-inline .faq-item summary::-webkit-details-marker{display:none}
#matcha-bloom-inline .faq-item summary span{display:grid;place-items:center;width:28px;height:28px;color:var(--forest);background:#eef3e3;border-radius:50%;font-size:1.1rem;transition:transform 180ms var(--ease)}
#matcha-bloom-inline .faq-item[open] summary span{transform:rotate(45deg)}
#matcha-bloom-inline .faq-answer{padding:0 0 14px}
#matcha-bloom-inline .faq-answer p{max-width:330px;color:var(--muted);font-size:.74rem;line-height:1.65}
#matcha-bloom-inline .inline-video video{display:block}
#matcha-bloom-inline .mobile-buybar{display:block;transform:translateX(-50%)}
#matcha-bloom-inline .mobile-buybar a{display:grid;place-items:center;width:100%;min-height:48px;padding:6px 20px 5px;color:#fff;background:var(--saffron);border-radius:14px;font-family:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",sans-serif;font-size:1.18rem;font-weight:760;line-height:1.1;text-decoration:none}
#matcha-bloom-inline .whatsapp-float{opacity:1;pointer-events:auto;transform:none}

/* The persistent CTA is a safety net, not a duplicate. On browsers with
   scroll-driven animations it stays out of the way while the hero/selector
   and closing decision buttons are visible, then returns across the long
   proof, comparison, journey, preparation and FAQ stretch. */
@keyframes mb-buybar-by-scroll{
  0%,30%{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(120%)}
  35%,84%{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  90%,100%{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(120%)}
}
@supports (animation-timeline:scroll()){
  #matcha-bloom-inline .mobile-buybar{
    animation:mb-buybar-by-scroll linear both;
    animation-timeline:scroll(root block);
  }
}

/* Transparent product media with no baked-in rectangular backgrounds. */
#matcha-bloom-inline .hero-product,
#matcha-bloom-inline .product-choice img,
#matcha-bloom-inline .offer-art img{mix-blend-mode:normal}
#matcha-bloom-inline .offer-art--quad .offer-quad-photo{object-fit:contain;object-position:center}
#matcha-bloom-inline .offer-art--quad .offer-quad-photo{display:block;width:min(100%,390px);height:100%;margin:auto;background:center/contain no-repeat}
#matcha-bloom-inline #mb-tier-quad-native:checked~.offer-visual .offer-art--quad .offer-quad-photo{background-image:url("https://res.cloudinary.com/ntjovz56/image/upload/matchabloom/images/offer-quad-v6.webp")}

/* Lightweight ambient motion: compositor-only transforms, no JS or extra assets. */
@keyframes mb-hero-float-gold{
  from{transform:rotate(-4deg) translate3d(0,-2px,0)}
  to{transform:rotate(-4deg) translate3d(0,3px,0)}
}
@keyframes mb-hero-float-green{
  from{transform:rotate(5deg) translate3d(0,7px,0)}
  to{transform:rotate(5deg) translate3d(0,12px,0)}
}
#matcha-bloom-inline .hero-product{
  transform-origin:50% 82%;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion:no-preference){
  #matcha-bloom-inline .hero-product--gold{
    animation:mb-hero-float-gold 8.5s cubic-bezier(.77,0,.175,1) -2.1s infinite alternate;
  }
  #matcha-bloom-inline .hero-product--green{
    animation:mb-hero-float-green 11.5s cubic-bezier(.77,0,.175,1) -5.4s infinite alternate;
  }
}
@media (prefers-reduced-motion:reduce){
  #matcha-bloom-inline .hero-product{
    animation:none!important;
  }
  #matcha-bloom-inline .hero-product--gold{transform:rotate(-4deg)}
  #matcha-bloom-inline .hero-product--green{transform:rotate(5deg) translateY(9px)}
}
#matcha-bloom-inline .inline-video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:inherit;
  background:#183525;
}
@media (max-width:480px){
  #matcha-bloom-inline .mobile-page{padding-bottom:calc(88px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  #matcha-bloom-inline .mobile-buybar{left:calc(50% - 10px);bottom:max(10px,env(safe-area-inset-bottom));width:clamp(244px,68vw,276px);min-height:64px;padding:5px;border-radius:20px;transform:translateX(-50%)}
  #matcha-bloom-inline .mobile-buybar a{min-height:54px;padding:8px 22px 7px;border-radius:15px;font-size:clamp(1.2rem,5.4vw,1.34rem);font-weight:780;line-height:1;background:var(--saffron);box-shadow:0 8px 18px rgba(216,154,44,.25)}
  #matcha-bloom-inline .mobile-buybar a span{color:#fff;font:inherit;line-height:1}
  #matcha-bloom-inline .whatsapp-float{right:8px;bottom:max(14px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:16px}
  #matcha-bloom-inline .whatsapp-float svg{width:23px;height:23px}
}
@media (max-width:340px){
  #matcha-bloom-inline .mobile-buybar{left:calc(50% - 8px);width:clamp(214px,66vw,228px)}
  #matcha-bloom-inline .whatsapp-float{width:46px;height:46px}
}
body.index{padding-bottom:0!important;background:#fbf5ea!important}
body.index #main-content,body.index #main-content>.s-block--bundle-html-content,body.index #main-content .s-block-html-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fbf5ea!important}
body.index main#main-content>.s-block--bundle-html-content,body.index main#main-content>.s-block--bundle-html-content>salla-custom-component[component-name="html-content"]{position:relative;isolation:isolate;display:block;min-height:5464px;background:url("https://res.cloudinary.com/ntjovz56/image/upload/matchabloom/images/product-ceremonial-v3-400.webp") calc(50% - 66px) 410px/132px auto no-repeat,url("https://res.cloudinary.com/ntjovz56/image/upload/matchabloom/images/product-imperial-v3-400.webp") calc(50% + 67px) 410px/138px auto no-repeat,radial-gradient(circle at 91% 16%,rgba(216,154,44,.22) 0 16%,transparent 16.4%),radial-gradient(circle at 2% 70%,rgba(155,194,99,.28) 0 22%,transparent 22.4%),linear-gradient(155deg,#fffaf1 0 50%,#eef4df 100%)}
body.index main#main-content>.s-block--bundle-html-content::before{content:"طعم أوضح\A أو فانيلا أنعم";position:absolute;z-index:0;inset:86px 18px auto;color:#294c34;font-family:"Baloo Bhaijaan 2",sans-serif;font-size:clamp(38px,10.5vw,50px);font-weight:800;line-height:.92;letter-spacing:-.03em;text-align:center;white-space:pre-line}
body.index main#main-content>.s-block--bundle-html-content::after{content:"ماتشا احتفالية بدرجتين";position:absolute;z-index:0;inset:52px 18px auto;color:#795034;font-family:"IBM Plex Sans Arabic",sans-serif;font-size:15px;font-weight:700;text-align:center}
body.index main#main-content>.s-block--bundle-html-content:has(#matcha-bloom-inline),body.index main#main-content>.s-block--bundle-html-content>salla-custom-component[component-name="html-content"]:has(#matcha-bloom-inline){min-height:0;background:#fbf5ea;overflow:visible}
body.index main#main-content>.s-block--bundle-html-content:has(#matcha-bloom-inline)::before,body.index main#main-content>.s-block--bundle-html-content:has(#matcha-bloom-inline)::after{content:none}
body.index #matcha-bloom-inline{width:100vw!important;max-width:none!important;margin-inline:calc(50% - 50vw)!important}
body:has(#matcha-bloom-inline) .store-footer{margin-top:0!important}
body.index .f_bottom-menu,body.index .sticky-product-bar,body.index .product-sticky-bar,body.index salla-sticky-product-bar{display:none!important}
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline){padding-bottom:0!important;background:#fbf5ea!important}
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fbf5ea!important;overflow:clip}
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-before-product-info,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-before-product-info>.s-block--bundle-html-content,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-before-product-info salla-custom-component[component-name="html-content"],
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-after-related:has(#matcha-bloom-inline),
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-after-related:has(#matcha-bloom-inline)>.s-block--bundle-html-content,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-after-related:has(#matcha-bloom-inline) .s-block-html-content,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .s-after-related:has(#matcha-bloom-inline) salla-custom-component[component-name="html-content"]{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) nav.breadcrumbs,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #product-1533548510,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>div>salla-offer,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>.s-before-reviews,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>.s-before-related,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>salla-products-slider[source="related"],
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>.s-after-related:not(:has(#matcha-bloom-inline)),
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) #main-content>.f_slider-container,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .f_bottom_menu,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .f_bottom-menu,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .sticky-product-bar,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) .product-sticky-bar,
body.product-single:has(#product-1533548510):has(#matcha-bloom-inline) salla-sticky-product-bar{display:none!important}
@media(max-width:767px){
body.index header.store-header{height:58px!important;min-height:58px!important}
body.index #mainnav{height:58px!important;min-height:58px!important;padding:7px 10px!important}
body.index #mainnav>.inner{height:44px!important;min-height:44px!important}
body.index #mainnav .navbar-brand{height:44px!important;min-height:44px!important}
body.index #mainnav .navbar-brand img{width:auto!important;height:40px!important;max-height:40px!important}
body.index #mainnav .mburger,body.index #mainnav .f_user-icon-button,body.index #mainnav .search-btn,body.index #mainnav salla-cart-summary{width:44px!important;height:44px!important;min-height:44px!important}
body.index #mainnav .s-cart-summary-wrapper{height:44px!important;min-height:44px!important;padding-inline:12px!important}
}
.store-footer .f_logo{display:block;width:160px;height:70px;object-fit:contain;aspect-ratio:16/7}
.store-footer salla-social{display:block;min-height:44px}.store-footer salla-payments{display:block;min-height:42px}.store-footer salla-trust-badges,.store-footer .f_certificates{display:block;min-height:72px}
.store-footer{display:block!important;visibility:visible!important;min-height:1330px;content-visibility:auto;contain-intrinsic-size:auto 1330px}.store-footer .store-footer__inner{min-height:1188px}.store-footer .about-us-block{min-height:346px}.store-footer .store-footer__blocks{min-height:746px}.store-footer .store-footer__blocks>:nth-child(1){min-height:204px}.store-footer .store-footer__blocks>:nth-child(2){min-height:88px}.store-footer .store-footer__blocks>:nth-child(3){min-height:152px}.store-footer .store-footer__blocks>:nth-child(4){min-height:230px}
/*
 * Matcha Bloom — product p1533548510 editor-only first-paint hotfix.
 * Paste this block at the VERY END of Salla Custom CSS.
 * It is intentionally additive so the current homepage rules stay untouched.
 * The target HTML component is bundle 1078728572.
 */

@supports selector(body:has(#product-1533548510)) {
  /* The product id is present in Salla's SSR HTML. These rules therefore apply
     before <salla-custom-component> hydrates #matcha-bloom-inline. */
  body.product-single:has(#product-1533548510) {
    padding-bottom: 0 !important;
    overflow-x: clip;
    background: #fbf5ea !important;
  }

  body.product-single:has(#product-1533548510) #main-content {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: clip;
    background: #fbf5ea !important;
  }

  /* Hide the native product presentation on the first render. Do not hide the
     parent wrapper: the Matcha Bloom component can be moved to
     .s-before-product-info without changing this patch. */
  body.product-single:has(#product-1533548510) nav.breadcrumbs,
  body.product-single:has(#product-1533548510) #product-1533548510,
  body.product-single:has(#product-1533548510) #main-content > div > salla-offer,
  body.product-single:has(#product-1533548510) #main-content > .s-before-reviews,
  body.product-single:has(#product-1533548510) #main-content > .s-before-related,
  body.product-single:has(#product-1533548510) #main-content > salla-products-slider[source="related"],
  body.product-single:has(#product-1533548510) #main-content > .f_slider-container,
  body.product-single:has(#product-1533548510) .f_bottom_menu,
  body.product-single:has(#product-1533548510) .f_bottom-menu,
  body.product-single:has(#product-1533548510) .sticky-product-bar,
  body.product-single:has(#product-1533548510) .product-sticky-bar,
  body.product-single:has(#product-1533548510) salla-sticky-product-bar {
    display: none !important;
  }

  /* Support the current after-related slot and the preferred before-product slot. */
  body.product-single:has(#product-1533548510)
    :is(.s-before-product-info, .s-after-related):has(
      salla-custom-component[bundle-id="1078728572"]
    ),
  body.product-single:has(#product-1533548510)
    :is(.s-before-product-info, .s-after-related):has(
      salla-custom-component[bundle-id="1078728572"]
    ) > .s-block--bundle-html-content,
  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep one neutral branded surface while Salla upgrades the custom
     component. Do not show a rasterised imitation of the final hero: on
     Retina phones it reads as a low-quality frame before the real UI. */
  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"] {
    position: relative !important;
    isolation: isolate;
    min-height: min(610px, calc(100svh - 58px));
    overflow: hidden;
    background: #fbf5ea !important;
  }

  /* Keep the final document height reserved during Salla hydration. This
     prevents the native footer from jumping through the mobile viewport while
     the HTML component upgrades, without changing the visible first screen. */
  @media (max-width: 767px) {
    body.product-single:has(#product-1533548510)
      salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:not(:has(#matcha-bloom-inline)) {
      min-height: 560px !important;
    }
  }

  /* Do not expose a several-thousand-pixel blank document while Salla is
     upgrading the custom component. The native footer returns as soon as the
     real landing root exists. */
  body.product-single:has(#product-1533548510):not(:has(#matcha-bloom-inline)) .store-footer {
    display: none !important;
  }

  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:not(:has(#matcha-bloom-inline))::before {
    content: none;
    display: none;
  }

  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:not(:has(#matcha-bloom-inline))::after {
    content: none;
    display: none;
  }

  /* The real landing replaces the neutral surface without a fake preview,
     delay or fade frame. */
  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:has(#matcha-bloom-inline) {
    min-height: 0 !important;
    overflow: visible;
    background: #fbf5ea !important;
  }

  body.product-single:has(#product-1533548510) #matcha-bloom-inline {
    animation: none !important;
    opacity: 1 !important;
  }

  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:has(#matcha-bloom-inline)::before,
  body.product-single:has(#product-1533548510)
    salla-custom-component[component-name="html-content"][bundle-id="1078728572"]:has(#matcha-bloom-inline)::after {
    content: none !important;
    display: none !important;
  }

  body.product-single:has(#product-1533548510) #matcha-bloom-inline {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
  }

  /* Salla's account glyph uses a late 268 KB icon font. Draw the same simple
     profile mark in CSS so the first frame never shows a missing-glyph box. */
  body.product-single:has(#product-1533548510) #mainnav .f_user-icon-button .sicon-user-circle {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.product-single:has(#product-1533548510) #mainnav .f_user-icon-button .sicon-user-circle::before,
  body.product-single:has(#product-1533548510) #mainnav .f_user-icon-button .sicon-user-circle::after {
    content: "";
    position: absolute;
    left: 50%;
    border: 3px solid #183525;
    transform: translateX(-50%);
  }

  body.product-single:has(#product-1533548510) #mainnav .f_user-icon-button .sicon-user-circle::before {
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  body.product-single:has(#product-1533548510) #mainnav .f_user-icon-button .sicon-user-circle::after {
    bottom: 1px;
    width: 25px;
    height: 13px;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  /* Undo the global footer height reservations on this product. They were
     larger than the real Salla footer and produced an artificial blank tail. */
  body.product-single:has(#product-1533548510) .store-footer,
  body.product-single:has(#product-1533548510) .store-footer .store-footer__inner,
  body.product-single:has(#product-1533548510) .store-footer .about-us-block,
  body.product-single:has(#product-1533548510) .store-footer .store-footer__blocks,
  body.product-single:has(#product-1533548510) .store-footer .store-footer__blocks > * {
    min-height: 0 !important;
  }

  body.product-single:has(#product-1533548510) .store-footer {
    margin-top: 0 !important;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
}

/* ==========================================================================
   Matcha Bloom — جولة تعديلات 2026-08-02 (الجولة ١)
   طبقة إضافية في آخر الملف فقط. ما تعدّل أي قاعدة سابقة، وتنشال كاملة بالحذف.
   ========================================================================== */

/* ── ١) ترتيب الأقسام: «خذ كمية تناسبك» تصير رقم ٢، و«أي كوب يشبه مزاجك» رقم ٣ ── */
#matcha-bloom-inline .offer-section{ order: -20; }
#matcha-bloom-inline .grade-stage{ order: -10; }

/* ── ٢) سبيسينق العناوين: تنفيس بين السطور عشان النقاط والحروف ما تتداخل ── */
#matcha-bloom-inline .hero h1{
  gap: 8px;
  line-height: 1.14;
}

#matcha-bloom-inline .type-lockup h2,
#matcha-bloom-inline .type-lockup--major h2,
#matcha-bloom-inline .grade-stage .type-lockup h2,
#matcha-bloom-inline .offer-section .type-lockup--light h2,
#matcha-bloom-inline .comparison-section .type-lockup h2,
#matcha-bloom-inline .journey-section .type-lockup--major h2,
#matcha-bloom-inline .brew-section .type-lockup--major h2,
#matcha-bloom-inline .proof-section .type-lockup--major h2,
#matcha-bloom-inline .faq-section .type-lockup h2{
  line-height: 1.24;
}

#matcha-bloom-inline .closing-section h2{ line-height: 1.22; }
#matcha-bloom-inline .taste-copy h3{ line-height: 1.22; }
#matcha-bloom-inline .comparison-head h3{ line-height: 1.2; }
#matcha-bloom-inline .journey-stop h3,
#matcha-bloom-inline .brew-step h3{ line-height: 1.2; }
#matcha-bloom-inline .product-choice strong{ line-height: 1.2; }
#matcha-bloom-inline .cart-sheet > header h2{ line-height: 1.2; }
#matcha-bloom-inline .type-lockup--major > p{ line-height: 1.28; }
#matcha-bloom-inline .offer-summary > div:first-child > span{ line-height: 1.35; }

/* المساحات المحجوزة تكبر شوي بعد زيادة الأسطر (تمنع قفزات التخطيط) */
#matcha-bloom-inline .comparison-section{ contain-intrinsic-size: auto 520px; }
#matcha-bloom-inline .journey-section{ contain-intrinsic-size: auto 628px; }
#matcha-bloom-inline .brew-section{ contain-intrinsic-size: auto 508px; }
#matcha-bloom-inline .proof-section{ contain-intrinsic-size: auto 1010px; }
#matcha-bloom-inline .faq-section{ contain-intrinsic-size: auto 488px; }
#matcha-bloom-inline .closing-section{ contain-intrinsic-size: auto 234px; }

/* ── ٣) أزرار التحويل: لمعة تمر + نبضة تكبير خفيفة ── */
@keyframes mb-cta-shine{
  0%{ transform: translateX(0) skewX(-16deg); opacity: 0 }
  6%{ opacity: 1 }
  44%{ transform: translateX(430%) skewX(-16deg); opacity: 1 }
  45%,100%{ transform: translateX(430%) skewX(-16deg); opacity: 0 }
}

@keyframes mb-cta-breathe{
  0%,100%{ scale: 1 }
  50%{ scale: 1.028 }
}

#matcha-bloom-inline .hero-button,
#matcha-bloom-inline .purchase-button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#matcha-bloom-inline .hero-button{
  animation: mb-cta-breathe 2.8s ease-in-out infinite;
}

#matcha-bloom-inline .purchase-button{
  animation: mb-cta-breathe 2.8s ease-in-out .7s infinite;
}

#matcha-bloom-inline .hero-button::after,
#matcha-bloom-inline .purchase-button::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: -40%;
  bottom: -40%;
  left: -34%;
  width: 26%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  animation: mb-cta-shine 3.6s var(--ease) infinite;
  pointer-events: none;
}

#matcha-bloom-inline .purchase-button > *{
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce){
  #matcha-bloom-inline .hero-button,
  #matcha-bloom-inline .purchase-button{
    animation: none !important;
    scale: 1 !important;
  }
  #matcha-bloom-inline .hero-button::after,
  #matcha-bloom-inline .purchase-button::after{
    display: none !important;
  }
}

/* ── ٤) التقييمات: نص أكبر، نجوم أكبر، و«شراء مؤكد» ذهبية وأوضح ── */
#matcha-bloom-inline .review-card{ padding: 16px 17px 14px; }
#matcha-bloom-inline .review-card header strong{ font-size: .93rem; }
#matcha-bloom-inline .review-card header span{
  font-size: 1.05rem;
  letter-spacing: .05em;
}
#matcha-bloom-inline .review-card p{
  margin-top: 9px;
  font-size: .9rem;
  line-height: 1.75;
}
#matcha-bloom-inline .review-card small{
  margin-top: 10px;
  color: var(--saffron);
  font-size: .78rem;
  font-weight: 800;
}

/* ── ٥) أيقونات المزايا تحت الزر: رسم بنفس أسلوب «من الورقة إلى كوبك» ── */
#matcha-bloom-inline .hero-badge{
  grid-template-rows: 40px auto;
  min-height: 60px;
}

#matcha-bloom-inline .hero-badge svg.mb-ill{
  width: 58px;
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: none;
  stroke-width: 0;
}

#matcha-bloom-inline .hero-badge svg.mb-ill .ill-paper{
  fill: #fdf7ea;
  stroke: var(--bamboo);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#matcha-bloom-inline .hero-badge svg.mb-ill .ill-cube{
  fill: var(--saffron-soft);
  stroke: var(--bamboo);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-leaf{
  fill: var(--leaf);
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linejoin: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-core{
  fill: var(--saffron);
  stroke: var(--bamboo);
  stroke-width: 2.2;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-stem{
  fill: none;
  stroke: var(--forest);
  stroke-width: 3;
  stroke-linecap: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-bamboo{
  fill: var(--bamboo);
  stroke: var(--bamboo-dark);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-forest{
  fill: var(--forest);
  stroke: var(--forest-dark);
  stroke-width: 2;
  stroke-linejoin: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-surface{
  fill: var(--leaf);
  stroke: var(--forest-dark);
  stroke-width: 1.6;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-foam{
  fill: #fffdf5;
  stroke: none;
  opacity: .85;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-grain{
  fill: var(--bamboo);
  stroke: none;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-line{
  fill: none;
  stroke: var(--bamboo-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-strike-bg{
  fill: none;
  stroke: #fffaf1;
  stroke-width: 7;
  stroke-linecap: round;
}
#matcha-bloom-inline .hero-badge svg.mb-ill .ill-strike{
  fill: none;
  stroke: var(--clay);
  stroke-width: 4.6;
  stroke-linecap: round;
}

/* ── ٦) الهيدر: إخفاء زر القائمة (كان يفتح مخرج من الصفحة) ── */
body.index #mainnav .mburger,
body.index header.store-header .mburger,
body.product-single:has(#product-1533548510) #mainnav .mburger,
body.product-single:has(#product-1533548510) header.store-header .mburger{
  display: none !important;
}

/* ── ٧) قسم «أي كوب يشبه مزاجك»: القسم يتلوّن مع الدرجة المختارة ── */
#matcha-bloom-inline .grade-stage:has(#mb-grade-ceremonial-native:checked){
  --stage-accent: var(--saffron);
  --stage-tint: #fae7b7;
}

#matcha-bloom-inline .grade-stage:has(#mb-grade-imperial-native:checked){
  --stage-accent: var(--forest);
  --stage-tint: #dbe9c5;
}

#matcha-bloom-inline .grade-stage .type-lockup h2{
  color: var(--stage-accent);
  transition: color 340ms var(--ease);
}

#matcha-bloom-inline .grade-to-offer{
  transition: background 340ms var(--ease), color 340ms var(--ease);
}

#matcha-bloom-inline .taste-label,
#matcha-bloom-inline .taste-facts span{
  transition: color 340ms var(--ease);
}

#matcha-bloom-inline .grade-stage::after{
  transition: border-color 340ms var(--ease);
}

#matcha-bloom-inline .product-choice{
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), opacity 220ms var(--ease), transform 280ms var(--ease);
}

/* ── ٨) تسريع طفو العبوتين في الهيرو ── */
@keyframes mb-hero-float-gold{
  from{ transform: rotate(-4deg) translate3d(0,-4px,0) }
  to{ transform: rotate(-4deg) translate3d(0,6px,0) }
}

@keyframes mb-hero-float-green{
  from{ transform: rotate(5deg) translate3d(0,5px,0) }
  to{ transform: rotate(5deg) translate3d(0,15px,0) }
}

@media (prefers-reduced-motion: no-preference){
  #matcha-bloom-inline .hero-product--gold{ animation-duration: 3.6s; }
  #matcha-bloom-inline .hero-product--green{ animation-duration: 4.4s; }
}

/* ── ٩) لوقو الفوتر: الملف المرفوع نسخة بيضاء فتختفي على الخلفية البيضاء ── */
.store-footer .f_logo{
  filter: brightness(0) saturate(100%) invert(24%) sepia(17%) saturate(1193%) hue-rotate(85deg) brightness(92%) contrast(90%);
}

/* ── ١٠) زر الشراء: النبضة كانت تلامس حافة البوكس — خفّفناها وأضفنا حلقة داخلية ── */
@keyframes mb-cta-breathe-soft{
  0%,100%{ scale: 1 }
  50%{ scale: 1.014 }
}

@keyframes mb-cta-glow{
  0%,100%{ opacity: 0 }
  50%{ opacity: 1 }
}

#matcha-bloom-inline .purchase-button{
  animation: mb-cta-breathe-soft 2.8s ease-in-out .7s infinite;
}

#matcha-bloom-inline .purchase-button::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(199, 220, 121, .9);
  opacity: 0;
  animation: mb-cta-glow 2.8s ease-in-out .7s infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  #matcha-bloom-inline .purchase-button::before{ display: none !important; }
}

/* ── ١١) نطّة زر الهيرو تحطّ وبوكس العرض في منتصف شاشة الجوال ──
   مركز البوكس = scroll-margin-top + ٢٠٠ (من قمة القسم للبوكس) + ٢٤٠ (نصف ارتفاعه)
   نضبطه = نصف ارتفاع الشاشة، مع حدّ سفلي يحمي العنوان من القص بالشاشات القصيرة. */
#matcha-bloom-inline .offer-section{
  scroll-margin-top: max(-60px, calc(50svh - 440px));
}

/* ── ١٢) اللمعة كانت تفرمل بالنهاية (منحنى ease-out) — سرعة ثابتة لآخر الطريق ── */
#matcha-bloom-inline .hero-button::after,
#matcha-bloom-inline .purchase-button::after{
  animation-timing-function: linear;
}

/*
 * Matcha Bloom — legacy homepage hydration hotfix.
 *
 * Paste this block at the VERY END of Salla Custom CSS. It intentionally
 * avoids relying on :has() for the critical loading-to-content transition.
 * The companion salla-legacy-bootstrap.js adds .mb-home-ready and injects the
 * trusted HTML component config when Salla's Lit 3 component is slow or cannot
 * run on an older browser.
 */

body.index main#main-content > .s-block--bundle-html-content {
  position: relative;
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  background: #fbf5ea !important;
}

body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"] {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-height: 610px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background:
    url("https://res.cloudinary.com/ntjovz56/image/upload/f_auto,q_auto,w_320/matchabloom/images/product-ceremonial-v3.png") calc(50% - 68px) 278px / 136px auto no-repeat,
    url("https://res.cloudinary.com/ntjovz56/image/upload/f_auto,q_auto,w_320/matchabloom/images/product-imperial-v3.png") calc(50% + 68px) 284px / 138px auto no-repeat,
    radial-gradient(circle at 91% 16%, rgba(216, 154, 44, 0.22) 0 16%, transparent 16.4%),
    radial-gradient(circle at 2% 70%, rgba(155, 194, 99, 0.28) 0 22%, transparent 22.4%),
    linear-gradient(155deg, #fffaf1 0 50%, #eef4df 100%) !important;
}

body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"]::before {
  content: "طعم أوضح\A أو فانيلا أنعم";
  position: absolute;
  z-index: 1;
  top: 88px;
  right: 18px;
  left: 18px;
  color: #294c34;
  font-family: "Baloo Bhaijaan 2", "Arial", sans-serif;
  font-size: 42px;
  font-size: clamp(38px, 10.5vw, 50px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}

body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"]::after {
  content: "ماتشا احتفالية بدرجتين";
  position: absolute;
  z-index: 1;
  top: 52px;
  right: 18px;
  left: 18px;
  color: #795034;
  font-family: "IBM Plex Sans Arabic", "Arial", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

html.mb-home-ready body.index main#main-content > .s-block--bundle-html-content,
body.index.mb-home-ready main#main-content > .s-block--bundle-html-content,
body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"][data-mb-ready="true"] {
  min-height: 0 !important;
  overflow: visible;
  background: #fbf5ea !important;
}

html.mb-home-ready body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"]::before,
html.mb-home-ready body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"]::after,
body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"][data-mb-ready="true"]::before,
body.index main#main-content > .s-block--bundle-html-content >
  salla-custom-component[component-name="html-content"][data-mb-ready="true"]::after {
  content: none !important;
  display: none !important;
}

/* Modern browsers can still complete the transition when the bootstrap is
   disabled; older browsers simply ignore this optional enhancement. */
@supports selector(salla-custom-component:has(#matcha-bloom-inline)) {
  body.index main#main-content > .s-block--bundle-html-content:has(#matcha-bloom-inline),
  body.index main#main-content > .s-block--bundle-html-content >
    salla-custom-component[component-name="html-content"]:has(#matcha-bloom-inline) {
    min-height: 0 !important;
    overflow: visible;
    background: #fbf5ea !important;
  }

  body.index main#main-content > .s-block--bundle-html-content >
    salla-custom-component[component-name="html-content"]:has(#matcha-bloom-inline)::before,
  body.index main#main-content > .s-block--bundle-html-content >
    salla-custom-component[component-name="html-content"]:has(#matcha-bloom-inline)::after {
    content: none !important;
    display: none !important;
  }
}

/* Physical-position fallbacks for engines that predate logical inset
   properties. Modern engines keep the existing RTL-aware declarations. */
@supports not (inset-inline-start: 1px) {
  #matcha-bloom-inline {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden;
  }

  #matcha-bloom-inline .hero-product {
    bottom: -5px;
  }

  #matcha-bloom-inline .hero-product--gold {
    right: auto;
    left: 12%;
  }

  #matcha-bloom-inline .hero-product--green {
    right: 7%;
    left: auto;
  }

  #matcha-bloom-inline .hero-leaf {
    top: 61px;
    left: 50%;
  }

  #matcha-bloom-inline .mobile-buybar {
    left: 50%;
  }

  #matcha-bloom-inline .whatsapp-float {
    right: 8px;
  }
}

@supports not (height: 100svh) {
  #matcha-bloom-inline .hero {
    min-height: calc(100vh - 58px);
  }
}

@media (max-width: 767px) {
  body.index main#main-content > .s-block--bundle-html-content >
    salla-custom-component[component-name="html-content"] {
    min-height: 560px !important;
  }
}