@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/cairo-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ink: #161b18;
  --muted: #566159;
  --green: #0e3b2e;
  --green-light: #e5ece5;
  --paper: #f6f5f0;
  --white: #fff;
  --line: #d6dbd3;
  --error: #9c302c;
  --header-height: 80px;
  --max: 1320px;
  --radius: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Manrope, Cairo, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
html[lang='ar'] body {
  font-family: Cairo, Manrope, sans-serif;
  line-height: 1.85;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea {
  touch-action: manipulation;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.25em;
}
a:hover {
  text-decoration: underline;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button[hidden],
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(3.15rem, 6.9vw, 6rem);
}
h2 {
  font-size: clamp(2.1rem, 4.5vw, 4.25rem);
}
h3 {
  font-size: 1.3rem;
}
html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3 {
  line-height: 1.5;
  letter-spacing: 0;
}
p {
  color: var(--muted);
  max-width: 65ch;
}
address {
  font-style: normal;
}
::selection {
  background: var(--green);
  color: white;
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}
input,
textarea {
  caret-color: var(--green);
}
* {
  scrollbar-color: #8c9a8c var(--paper);
  scrollbar-width: thin;
}
.icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.container {
  width: min(calc(100% - 96px), var(--max));
  margin-inline: auto;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  min-height: 52px;
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 13px 22px;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.2s ease;
}
.button:hover {
  background: #185240;
  text-decoration: none;
}
.button-secondary {
  background: transparent;
  color: var(--green);
}
.button-secondary:hover {
  background: var(--green-light);
}
/* A button that cannot be pressed yet looks it (a code's resend countdown, for one). */
.button:disabled,
.button-secondary:disabled,
.button-secondary:disabled:hover {
  background: #eceee7;
  color: #4f5c4d;
  border-color: #d7ddd2;
}
.text-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 0;
}
.action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  inset-inline-start: 8px;
  transform: translateY(-150%);
  padding: 12px 24px;
  background: white;
  color: var(--green);
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  height: 100%;
  width: min(calc(100% - 96px), var(--max));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 126px;
  flex-shrink: 0;
}
.brand img {
  width: 100%;
  height: auto;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-inline-start: auto;
}
.nav-menu a {
  min-height: 44px;
  min-width: 24px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  position: relative;
}
.nav-menu a[aria-current] {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.nav-actions {
  display: flex;
  gap: 22px;
  align-items: center;
}
.language {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.header-menu {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--green);
  color: white;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
}
.header-menu:hover {
  background: #185240;
  text-decoration: none;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: min(710px, calc(100svh - 80px));
  padding-block: 55px 50px;
  gap: 25px;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  min-height: 44px;
  margin-block-end: 16px;
}
.hero-location .icon {
  width: 16px;
  height: 16px;
}
.hero-copy h1 {
  font-size: clamp(4.1rem, 7.4vw, 6.8rem);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.04em;
  text-align: start;
  color: var(--ink);
  margin-block-end: 26px;
}
.hero-copy h1[dir='ltr'] {
  direction: ltr;
  text-align: left;
}
html[lang='ar'] .hero-copy h1 {
  text-align: right;
  line-height: 1.3;
  letter-spacing: 0;
}
html[lang='ar'] .hero-copy h1[dir='ltr'] {
  font-family: Manrope, sans-serif;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
/* The English brand line, small, above the Arabic headline. */
.hero-copy > .hero-brand {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  direction: ltr;
  text-align: right;
  margin-block-end: 6px;
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.75;
  margin-block-end: 28px;
}
.hero-pickup {
  margin-block-start: 13px;
  font-size: 13px;
}
.hero-art {
  position: relative;
  aspect-ratio: 1/1;
  min-width: 0;
  isolation: isolate;
}
.hero-art::before {
  content: '';
  position: absolute;
  inset: 13% 6% 12% 10%;
  border-radius: 50%;
  background: #e2e9df;
  z-index: -1;
}
.hero-product {
  position: absolute;
}
.hero-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-cup {
  width: 73%;
  height: 88%;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  transform: rotate(-8deg);
}
.side-cup {
  width: 56%;
  height: 70%;
  inset-inline-end: -2%;
  inset-block-start: 5%;
  transform: rotate(10deg);
}
.pastry {
  width: 69%;
  height: 51%;
  inset-inline-end: -4%;
  inset-block-end: -1%;
  z-index: 3;
  transform: rotate(-4deg);
}
.photo-caption {
  position: absolute;
  inset-block-end: -16px;
  inset-inline-start: 25px;
  font-size: 12px;
  z-index: 4;
  color: var(--muted);
}
.favorites-section {
  padding-block: 64px 88px;
  border-top: 1px solid var(--line);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.section-heading h2 {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
}
.favorites-section > .section-heading + p {
  margin-block: 14px 32px;
}
.home-favorites {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  min-height: 310px;
}
.favorites-loading {
  grid-column: 1/-1;
  padding-block: 50px;
}
/* When the live menu cannot be read, the one fallback link spans the row and the reserved
   height goes, so no empty block is left under the heading. */
.home-favorites > .text-link {
  grid-column: 1/-1;
}
.home-favorites:not(:has(.favorite, .favorites-loading)) {
  min-height: 0;
}
.favorite-photo {
  aspect-ratio: 1/1;
  background: #ecefe8;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.favorite-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}
.favorite:hover img {
  transform: scale(1.045);
}
.favorite h3 {
  margin-block: 18px 4px;
  font-size: 19px;
}
.favorite p {
  font-size: 13px;
}
.favorite-price {
  display: block;
  margin-block-start: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
.sold-out-label {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 10px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  border-radius: 4px;
}
.concept-section {
  background: #e9ede5;
  padding-block: 94px;
}
.concept-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
}
.large-copy {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.65;
}
.concept-list {
  margin-top: 30px;
}
.concept-list > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid #c5cec3;
}
.concept-list > a:first-child {
  border-top: 1px solid #c5cec3;
}
.concept-list p {
  font-size: 14px;
  margin-top: 7px;
}
.concept-list h3 {
  font-size: 18px;
}
.concept-list a:hover {
  text-decoration: none;
}
.visit-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  padding-block: 105px;
}
.visit-section h2 {
  font-size: clamp(3rem, 5.5vw, 5.6rem);
}
.visit-section address {
  font-size: 24px;
  max-width: 320px;
  margin-block: 10px 25px;
  line-height: 1.65;
}
.visit-section .text-link {
  display: flex;
  margin-top: 18px;
}
.pickup-section {
  background: var(--green);
  color: white;
  padding-block: 76px;
}
.pickup-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8%;
  align-items: center;
}
.pickup-layout h2 {
  font-size: clamp(2.25rem, 3.5vw, 3.6rem);
}
.pickup-layout p {
  color: #d6e3d8;
  max-width: 39ch;
}
.pickup-layout .button {
  background: var(--paper);
  color: var(--green);
  border: 0;
  margin-top: 23px;
}
.social-section {
  padding-block: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.social-section h2 {
  font-size: 30px;
}
.social-section p {
  margin-top: 10px;
}
.site-footer {
  padding-block: 60px 24px;
  background: #e9ede5;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 0.5fr;
  gap: 10%;
  padding-bottom: 50px;
}
.brand-large {
  width: 220px;
}
.footer-top p {
  font-size: 13px;
  margin-top: 22px;
}
.footer-address {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.footer-address address {
  font-size: 14px;
  margin-bottom: 14px;
  max-width: 29ch;
}
.footer-address a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  min-height: 44px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.footer-links a {
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-bottom {
  border-top: 1px solid #c5cec3;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom > div {
  display: flex;
  gap: 25px;
}
.footer-bottom a {
  font-size: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mobile-actions {
  display: none;
}
.inner-hero {
  padding-block: 68px 60px;
}
.inner-hero h1 {
  margin-block-end: 25px;
}
.inner-hero > p {
  max-width: 47ch;
  margin-bottom: 26px;
}
.about-hero {
  padding-block: 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8%;
  align-items: center;
}
.about-hero h1 {
  margin-bottom: 30px;
}
.about-hero p {
  margin-bottom: 24px;
}
.about-photo {
  aspect-ratio: 1/1;
  background: #e5eade;
  border-radius: 14px;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.location-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 8%;
  padding-bottom: 90px;
}
.location-copy h2 {
  font-size: 25px;
  margin-bottom: 20px;
}
.location-copy address {
  font-size: 22px;
  max-width: 27ch;
}
.coordinates {
  font-size: 12px;
  margin: 24px 0 50px;
}
.location-copy .text-link {
  display: flex;
  margin-top: 12px;
}
.map-panel {
  min-height: 430px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #e5eade;
  border-radius: 12px;
  overflow: hidden;
}
.map-panel iframe {
  width: 100%;
  height: 100%;
  min-height: 430px;
  border: 0;
}
.map-address {
  font-size: 32px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 20px;
}
.map-note {
  font-size: 12px;
  margin: 14px 20px 0;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12%;
  padding-bottom: 100px;
}
.contact-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.contact-list strong {
  display: block;
  font-size: clamp(21px, 2.5vw, 32px);
  margin-top: 7px;
  line-height: 1.5;
  font-weight: 700;
}
.contact-layout h2 {
  font-size: 26px;
  margin-bottom: 20px;
}
.contact-layout address {
  font-size: 21px;
  margin-bottom: 25px;
}
.contact-layout p {
  margin-block: 34px 20px;
}
.error-code {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
}
.error-hero {
  min-height: 65vh;
}
.error-hero .text-link {
  margin-top: 20px;
}
@media (min-width: 1200px) {
  .home-hero {
    gap: 35px;
  }
  .hero-art {
    margin-inline-start: -35px;
    margin-inline-end: 15px;
  }
}
@media (max-width: 1050px) {
  .container,
  .nav-wrap {
    width: calc(100% - 56px);
  }
  .nav-menu {
    gap: 20px;
  }
  .nav-wrap {
    gap: 24px;
  }
  .nav-actions {
    gap: 15px;
  }
  .hero-copy h1 {
    font-size: clamp(4rem, 7.6vw, 6rem);
  }
  .hero-copy .button {
    padding-inline: 17px;
    gap: 14px;
  }
  .hero-art {
    margin-inline-end: 0;
  }
  .hero-art .side-cup {
    inset-inline-end: 6%;
  }
  .hero-art .pastry {
    inset-inline-end: 4%;
  }
  .hero-art .main-cup {
    inset-inline-start: 2%;
  }
  .home-favorites {
    gap: 18px;
  }
  .hero-copy > p {
    font-size: 15px;
  }
  .footer-top {
    gap: 6%;
  }
}
@media (max-width: 760px) {
  :root {
    --header-height: 66px;
  }
  .container,
  .nav-wrap {
    width: calc(100% - 40px);
  }
  .nav-wrap {
    gap: 12px;
  }
  .brand {
    width: 105px;
  }
  .nav-actions {
    gap: 7px;
  }
  .language {
    font-size: 12px;
    padding-inline: 7px;
  }
  .header-menu {
    padding: 8px 12px;
    gap: 8px;
    font-size: 12px;
  }
  .header-menu .icon {
    width: 17px;
    height: 17px;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-menu {
    position: absolute;
    top: 65px;
    inset-inline: 0;
    background: var(--paper);
    padding: 20px;
    box-shadow: 0 12px 20px #17271c12;
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-menu.is-open {
    display: flex;
  }
  .nav-menu a {
    min-height: 49px;
    font-size: 16px;
  }
  .home-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 20px 38px;
    min-height: 0;
  }
  .hero-location {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .hero-copy h1 {
    font-size: clamp(3.7rem, 15vw, 5.3rem);
    line-height: 1.01;
    margin-bottom: 21px;
  }
  .hero-copy > p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 22px;
  }
  .action-row {
    gap: 10px;
  }
  .hero-copy .action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .button {
    font-size: 12px;
    gap: 12px;
    padding: 13px 15px;
    min-height: 50px;
  }
  .hero-copy .button {
    padding: 12px 10px;
    gap: 10px;
  }
  .hero-pickup {
    font-size: 12px;
    margin-top: 10px;
  }
  .hero-art {
    margin: 9px auto 0;
    width: min(100%, 400px);
    aspect-ratio: 1.2/1;
  }
  .hero-art::before {
    inset: 8% 7% 12% 10%;
  }
  .main-cup {
    width: 62%;
    height: 94%;
    inset-inline-start: 2%;
    inset-block-start: -4%;
  }
  .hero-art .side-cup {
    height: 74%;
    width: 53%;
    inset-inline-end: 0;
    inset-block-start: 0;
  }
  .hero-art .pastry {
    height: 50%;
    width: 62%;
    inset-inline-end: 2%;
    inset-block-end: -2%;
  }
  .photo-caption {
    inset-block-end: -18px;
    inset-inline-start: 7px;
    font-size: 12px;
  }
  .favorites-section {
    padding-block: 42px 50px;
  }
  .section-heading {
    display: block;
  }
  .section-heading .text-link {
    margin-top: 14px;
  }
  .favorites-section > .section-heading + p {
    margin-block: 7px 22px;
    font-size: 14px;
  }
  .home-favorites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 15px;
    min-height: 420px;
  }
  .favorite h3 {
    font-size: 15px;
    margin-top: 12px;
  }
  .favorite p {
    font-size: 12px;
  }
  .favorite-price {
    font-size: 13px;
  }
  .sold-out-label {
    font-size: 12px;
    padding: 4px 7px;
    inset: 8px auto auto 8px;
  }
  .concept-section {
    padding-block: 48px;
  }
  .concept-layout,
  .visit-section,
  .pickup-layout,
  .about-hero,
  .location-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .concept-layout h2,
  .visit-section h2 {
    font-size: clamp(2.65rem, 11vw, 4rem);
  }
  .large-copy {
    font-size: 19px;
  }
  .concept-list {
    margin-top: 26px;
  }
  .concept-list p {
    font-size: 13px;
  }
  .concept-list h3 {
    font-size: 16px;
  }
  .visit-section {
    padding-block: 52px;
  }
  .visit-section address {
    font-size: 22px;
    margin-top: 0;
  }
  .pickup-section {
    padding-block: 45px;
  }
  .pickup-layout h2 {
    font-size: 32px;
  }
  .pickup-layout p {
    font-size: 14px;
  }
  .social-section {
    padding-block: 38px;
    display: block;
  }
  .social-section h2 {
    font-size: 28px;
  }
  .social-section p {
    font-size: 14px;
  }
  .social-section .text-link {
    margin-top: 15px;
  }
  .site-footer {
    padding-block: 40px 85px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 35px 18px;
    padding-bottom: 30px;
  }
  .footer-top > div:first-child {
    grid-column: 1/-1;
  }
  .brand-large {
    width: 190px;
  }
  .footer-top p {
    margin-top: 16px;
  }
  .footer-address address {
    font-size: 13px;
  }
  .footer-address a {
    font-size: 12px;
  }
  .footer-links {
    padding-inline-start: 20px;
  }
  .footer-bottom {
    display: block;
    font-size: 12px;
  }
  .footer-bottom > div {
    gap: 24px;
    margin-top: 10px;
  }
  .mobile-actions {
    display: flex;
    position: fixed;
    bottom: 12px;
    inset-inline: 16px;
    z-index: 20;
    background: var(--green);
    color: white;
    border-radius: 7px;
    box-shadow: 0 6px 22px #152c2430;
    padding: 3px;
    align-items: center;
    justify-content: space-around;
    min-height: 48px;
  }
  .mobile-actions a {
    font-size: 12px;
    font-weight: 700;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 5px 12px;
  }
  .inner-hero {
    padding-block: 40px;
  }
  .inner-hero h1,
  .about-hero h1 {
    font-size: clamp(2.85rem, 11vw, 4.5rem);
  }
  /* The page's own intro only: the order and account cards keep their 12–14px notes on a phone. */
  .inner-hero > p {
    font-size: 17px;
  }
  .about-hero {
    padding-block: 45px;
  }
  .about-photo {
    max-height: 400px;
  }
  .location-layout {
    padding-bottom: 50px;
  }
  .map-panel {
    min-height: 360px;
  }
  .map-panel iframe {
    min-height: 360px;
  }
  .contact-layout {
    padding-bottom: 55px;
  }
  .contact-list strong {
    font-size: 25px;
  }
  .coordinates {
    margin-bottom: 30px;
  }
  html[lang='ar'] .hero-copy h1 {
    font-size: clamp(3.7rem, 15vw, 5.3rem);
  }
  html[lang='ar'] .hero-copy > p {
    line-height: 1.9;
  }
}
@media (max-width: 359px) {
  .container,
  .nav-wrap {
    width: calc(100% - 32px);
  }
  .brand {
    width: 90px;
  }
  .nav-actions {
    gap: 1px;
  }
  .header-menu {
    padding-inline: 10px;
  }
  .header-menu .icon {
    display: none;
  }
  .hero-copy h1 {
    font-size: 3.55rem;
  }
  .hero-copy .button {
    font-size: 12px;
    gap: 7px;
  }
  .button .icon {
    width: 17px;
    height: 17px;
  }
  .mobile-actions {
    inset-inline: 10px;
  }
  .mobile-actions a {
    padding-inline: 10px;
  }
  .contact-list strong {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .favorite-photo img,
  .button {
    transition: none;
  }
  .favorite:hover img {
    transform: none;
  }
}

/* Approved published policy layout; scoped to policy pages. */
.policy-page {
  padding-block: 48px 80px;
}
.policy-heading {
  max-inline-size: 860px;
  padding-block-end: 40px;
}
.policy-heading h1 {
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.policy-date {
  color: var(--muted);
  font-size: 0.9rem;
}
.policy-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 760px);
  gap: 64px;
  align-items: start;
}
.policy-contents {
  display: flex;
  flex-direction: column;
  position: sticky;
  inset-block-start: 120px;
  gap: 4px;
}
.policy-contents strong {
  margin-block-end: 12px;
}
.policy-contents a,
.policy-contact a,
.policy-related a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.policy-layout article {
  min-inline-size: 0;
}
.policy-layout article section {
  scroll-margin-block-start: 120px;
  padding-block: 0 32px;
}
.policy-layout article h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: 0;
  margin-block: 0 12px;
}
.policy-layout article p {
  font-size: 1rem;
  line-height: 1.8;
  margin-block: 0 16px;
  overflow-wrap: anywhere;
}
.policy-contact,
.policy-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.policy-contact bdi {
  margin-inline-start: 8px;
}
.policy-related {
  border-block-start: 1px solid var(--line);
  padding-block-start: 20px;
}
.policy-page address {
  line-height: 1.8;
}
.policy-page ~ .site-footer .footer-links {
  gap: 4px;
}
.policy-page ~ .site-footer .footer-links a {
  min-block-size: 44px;
  display: flex;
  align-items: center;
}
[dir='rtl'] .policy-heading h1 {
  line-height: 1.5;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .policy-page {
    padding-block: 32px 56px;
  }
  .policy-heading {
    padding-block-end: 24px;
  }
  .policy-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .policy-contents {
    position: static;
    border-block: 1px solid var(--line);
    padding-block: 16px;
  }
  .policy-contents a {
    padding-block: 8px;
  }
  .policy-layout article section {
    scroll-margin-block-start: 100px;
  }
  .policy-contact,
  .policy-related {
    flex-direction: column;
    gap: 4px;
  }
}

/* ------------------------------------------------------------------
   Storefront system (2026-10): tokens and shared components.
   Flat MRKT surfaces: Paper ground, Green for action, Crema as a rare
   accent, Night for type on dark. No card shadows, no gradients.
   ------------------------------------------------------------------ */
:root {
  --night: #0c1712;
  --crema: #d6b25c;
  --crema-light: #f4ead2;
  --matcha: #8db255;
  --matcha-light: #e9f0dc;
  --green-hover: #185240;
  --green-deep: #0f241d;
  --warn: #7a5a12;
  --warn-light: #f7efd9;
  --error-light: #f7e4e2;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 999px;
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --target: 44px;
  --text-xs: 12px;
  --text-s: 14px;
  --text-m: 16px;
  --text-l: 20px;
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.icon-rtl {
  transition: none;
}
html[dir='rtl'] .icon-rtl {
  transform: scaleX(-1);
}
.button-small {
  min-height: var(--target);
  padding: 8px 14px;
  gap: 8px;
  font-size: 13px;
}
.button-danger {
  background: var(--error);
  border-color: var(--error);
  color: var(--white);
}
.button-danger:hover {
  background: #7f2522;
}

/* Primary action inside forms (checkout, sign-in, account): shared by every page. */
.commerce-primary {
  min-height: 50px;
  border: 0;
  border-radius: 5px;
  padding: 12px 18px;
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--motion-fast) ease;
}
.commerce-primary:hover:not(:disabled) {
  background: var(--green-hover);
}
.commerce-primary:disabled {
  background: #d7ddd2;
  color: #4f5c4d;
}

/* Header basket: count + link on every page. */
.header-basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target);
  min-height: var(--target);
  border-radius: var(--radius-s);
  color: var(--green);
}
.header-basket:hover {
  background: var(--green-light);
  text-decoration: none;
}
.header-basket .icon {
  width: 24px;
  height: 24px;
}
.basket-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 0;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: Manrope, sans-serif;
}

/* What the store offers right now (filled from MRKT OS; never a fixed claim). */
.live-capabilities {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--muted);
  margin-block: var(--space-4);
}
.live-capabilities::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-block-start: 0.55em;
  border-radius: 50%;
  background: #a9b3aa;
}
.live-capabilities[data-state='open']::before {
  background: var(--matcha);
}
.live-capabilities[data-state='paused']::before {
  background: var(--crema);
}
.pickup-section .live-capabilities,
.how-section .live-capabilities {
  color: #d6e3d8;
}

/* Home: what's inside — category covers as the first answer to "what is MRKT?". */
.inside-section {
  padding-block: var(--space-8) var(--space-7);
}
.inside-section .section-heading p {
  margin-block-start: var(--space-3);
}
.inside-tiles {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}
.inside-tile {
  display: block;
  color: var(--ink);
}
.inside-tile:hover {
  text-decoration: none;
}
.inside-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--green-light);
}
.inside-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-base) var(--ease);
}
.inside-tile:hover img {
  transform: scale(1.03);
}
.inside-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--target);
  margin-block-start: var(--space-2);
  font-weight: 700;
  font-size: var(--text-m);
}
.inside-name .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

/* Home: how ordering works. */
.how-section {
  background: var(--green);
  color: var(--white);
  padding-block: var(--space-8);
}
.how-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8%;
  align-items: start;
}
.how-layout h2 {
  font-size: clamp(2.1rem, 3.5vw, 3.4rem);
}
.how-layout .button {
  background: var(--paper);
  color: var(--green);
  border: 0;
}
.how-steps {
  list-style: none;
  counter-reset: how;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.how-steps li {
  counter-increment: how;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid #ffffff2b;
}
.how-steps li::before {
  content: counter(how);
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--crema);
  color: var(--crema);
  display: grid;
  place-items: center;
  font-family: Manrope, sans-serif;
  font-weight: 800;
}
.how-steps h3 {
  font-size: var(--text-l);
}
.how-steps p {
  color: #d6e3d8;
  font-size: var(--text-s);
}

/* State panels: empty basket, no search results, errors. */
.state-panel {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.state-panel p {
  margin-inline: auto;
}
.state-art {
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.state-title {
  color: var(--ink);
  font-weight: 800;
  font-size: var(--text-l);
}

/* Tags and notices. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  background: var(--green-light);
  color: var(--green);
  white-space: nowrap;
}
.tag-pickup {
  background: var(--crema-light);
  color: var(--warn);
}
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: var(--text-s);
}
.notice > .icon {
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
}
.notice p {
  color: var(--ink);
  max-width: none;
}
.notice-warn {
  background: var(--warn-light);
  border-color: #e7d7ad;
}
.notice-warn > .icon {
  color: var(--warn);
}
.notice-error {
  background: var(--error-light);
  border-color: #e9c3bf;
}
.notice-error > .icon {
  color: var(--error);
}
.notice-actions,
.notice-lines,
.notice > .notice-title + * {
  grid-column: 1 / -1;
}
.notice-title {
  grid-column: 1 / -1;
  font-weight: 700;
}
.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.notice-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.notice-lines li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Confirmation dialog replacing native confirm(). */
.confirm-dialog {
  width: min(420px, calc(100% - 32px));
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
}
.confirm-dialog::backdrop {
  background: #101e17a6;
}
.confirm-dialog p {
  color: var(--ink);
  font-size: var(--text-m);
}
.confirm-dialog .action-row {
  justify-content: flex-end;
  margin-block-start: var(--space-5);
}

@media (max-width: 1050px) {
  .inside-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .inside-section {
    padding-block: var(--space-7) var(--space-6);
  }
  .inside-tiles {
    gap: var(--space-4) var(--space-3);
  }
  .inside-name {
    font-size: var(--text-s);
  }
  .how-section {
    padding-block: var(--space-7);
  }
  .how-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .header-basket .icon {
    width: 22px;
    height: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .inside-tile:hover img {
    transform: none;
  }
}

/* Quality pass (mobile and Arabic review). */
/* A photo that failed to load: the frame keeps a quiet MRKT door instead of alt text. */
.photo-missing {
  background: #e9ede5 url(/assets/editorial/door.webp) center / 46% no-repeat;
}
.favorite-photo img,
.product-image-wrap img,
.seo-product-photo img {
  color: transparent;
}
/* The copyright pieces keep their own direction in Arabic. */
.footer-copyright bdi {
  unicode-bidi: isolate;
}
/* Home: the quick-action bar waits until the hero's own buttons have scrolled away, so it
   never covers the hero picture and never repeats the hero's Menu button. */
.home-page:not(.hero-passed) .mobile-actions {
  transform: translateY(calc(100% + 24px));
  visibility: hidden;
}
.mobile-actions {
  transition:
    transform 0.25s ease,
    visibility 0.25s;
}
/* Short words still get a 44 px wide target. */
.footer-links a,
.footer-bottom a,
.nav-menu a,
.language,
.text-link,
.breadcrumbs a {
  min-width: 44px;
}

/* ------------------------------------------------------------------------------------------
   Design 2.1: the classic product hero, brought to life. Product photography and the MRKT
   door motif only; the website never shows photographs of the shop itself.
   ------------------------------------------------------------------------------------------ */

/* Hero: the trio settles onto the sage disc, then breathes. Translate only (never opacity),
   so the hero picture paints at once and the largest paint is never delayed. */
.hero-art::before {
  background: radial-gradient(circle at 42% 38%, #eef2ea 0%, #e2e9df 58%, #d5dfd2 100%);
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 9% 2% 8% 6%;
  border-radius: 50%;
  border: 1.5px solid #d6b25c73;
  z-index: -1;
  pointer-events: none;
}
.hero-product {
  animation:
    hero-rise 1s var(--ease) both,
    hero-float 7s ease-in-out 1.1s infinite;
}
.hero-product.side-cup {
  animation-delay: 0.12s, 1.6s;
  animation-duration: 1s, 8s;
}
.hero-product.pastry {
  animation-delay: 0.24s, 2.1s;
  animation-duration: 1s, 9s;
}
.hero-product img {
  filter: drop-shadow(0 22px 26px #1f2b2229) drop-shadow(0 4px 6px #1f2b221f);
}
@keyframes hero-rise {
  from {
    translate: 0 34px;
    scale: 0.94;
  }
}
@keyframes hero-float {
  50% {
    translate: 0 -9px;
  }
}
.hero-sticker {
  position: absolute;
  z-index: 4;
  width: 21%;
  height: auto;
  inset-block-end: 6%;
  inset-inline-start: 2%;
  animation: spin 32s linear infinite;
}
@keyframes spin {
  to {
    rotate: 1turn;
  }
}

/* A moving strip of what is inside; pauses under the pointer. */
.marquee {
  overflow: hidden;
  background: var(--green);
  color: var(--crema);
  padding-block: 18px;
  border-block: 1px solid #0a2e23;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track > span {
  display: flex;
  flex: none;
}
.marquee-track > span > span {
  display: inline-flex;
  align-items: center;
  font-family: Manrope, Cairo, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
html[lang='ar'] .marquee-track > span > span {
  font-family: Cairo, Manrope, sans-serif;
  letter-spacing: 0;
}
.marquee-track > span > span::after {
  content: '✦';
  margin-inline: 0.9em;
  font-size: 0.6em;
  color: var(--matcha);
}
@keyframes marquee {
  to {
    translate: -50% 0;
  }
}
html[dir='rtl'] .marquee-track {
  animation-name: marquee-rtl;
}
@keyframes marquee-rtl {
  to {
    translate: 50% 0;
  }
}

/* Category tiles lift a little under the pointer; the essentials tile carries the door motif. */
.inside-photo {
  transition:
    translate var(--motion-base) var(--ease),
    box-shadow var(--motion-base) var(--ease);
}
.inside-tile:hover .inside-photo {
  translate: 0 -4px;
  box-shadow: 0 18px 30px -18px #0e3b2e66;
}
.inside-name .icon {
  transition: translate var(--motion-base) var(--ease);
}
.inside-tile:hover .inside-name .icon {
  translate: 4px 0;
}
html[dir='rtl'] .inside-tile:hover .inside-name .icon {
  translate: -4px 0;
}
.inside-photo-art {
  display: grid;
  place-items: center;
  background: radial-gradient(80% 60% at 50% 58%, #f4f8f4 0%, #e5ece5 60%, #cddacd 100%);
}
.inside-photo-art img.inside-door {
  width: 128%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
.favorite-photo {
  transition: box-shadow var(--motion-base) var(--ease);
}
.favorite:hover {
  text-decoration: none;
}
.favorite:hover .favorite-photo {
  box-shadow: 0 18px 30px -20px #0e3b2e59;
}

/* Visit: the classic two columns, with the door motif as the picture. */
.visit-section {
  align-items: center;
  border-top: 1px solid var(--line);
}
.visit-section .action-row {
  align-items: center;
}
.visit-section .text-link {
  display: inline-flex;
  margin-top: 0;
}
.visit-copy address {
  margin-block: 18px 30px;
}
.visit-art {
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius-l) var(--radius-l);
  background: radial-gradient(90% 60% at 50% 70%, #15513e 0%, #0e3b2e 50%, #08261d 100%);
  display: grid;
  place-items: end center;
  overflow: visible;
}
.visit-door {
  position: absolute;
  width: 112%;
  max-width: none;
  height: auto;
  inset-inline-start: -6%;
  inset-block-end: -7.5%;
}
.visit-cup {
  position: absolute;
  width: 78%;
  max-width: none;
  height: auto;
  inset-block-end: -9%;
  inset-inline-start: -30%;
  rotate: -7deg;
  filter: drop-shadow(0 22px 24px #0e3b2e59);
}
.visit-sticker {
  position: absolute;
  width: 30%;
  height: auto;
  inset-block-start: 10%;
  inset-inline-end: -8%;
  animation: spin 32s linear infinite;
}

/* The Green brand band (About, Find us): live text beside MRKT products at the door. */
.brand-band {
  background: radial-gradient(
    70% 90% at 75% 60%,
    #15513e 0%,
    var(--green) 45%,
    var(--green-deep) 100%
  );
  color: var(--paper);
  overflow: hidden;
}
html[dir='rtl'] .brand-band {
  background: radial-gradient(
    70% 90% at 25% 60%,
    #15513e 0%,
    var(--green) 45%,
    var(--green-deep) 100%
  );
}
.brand-band-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 6%;
  align-items: center;
  padding-block: var(--space-8);
}
.brand-band-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.brand-band-copy h1,
.brand-band-copy h2 {
  color: var(--paper);
  font-size: clamp(2.6rem, 5vw, 5rem);
}
.brand-band-copy p {
  color: #d6e3d8;
}
.brand-band-copy .live-capabilities {
  margin-block: 0;
}
.brand-band-copy .action-row {
  align-items: center;
}
.brand-band-copy .text-link {
  color: var(--paper);
}
.brand-band-copy .button {
  background: var(--paper);
  color: var(--green);
  border-color: var(--paper);
}
.brand-band-copy .button:hover {
  background: var(--green-light);
}
.brand-band-art {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
}
.brand-band-art::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #f0cf8366, transparent);
}
.brand-band-art img {
  position: absolute;
  height: auto;
}
.band-door {
  width: 124%;
  max-width: none;
  inset-block-start: -10%;
  inset-inline-start: -12%;
}
.band-cup {
  width: 70%;
  max-width: none;
  inset-block-end: -6%;
  inset-inline-start: -10%;
  rotate: -6deg;
  filter: drop-shadow(0 22px 24px #0008);
}
.band-pastry {
  width: 54%;
  inset-block-end: -2%;
  inset-inline-end: -2%;
  rotate: 4deg;
  filter: drop-shadow(0 22px 24px #0008);
}
.band-sticker {
  width: 24%;
  inset-block-start: 4%;
  inset-inline-end: 2%;
  animation: spin 32s linear infinite;
}
.brand-band + .location-layout {
  padding-block-start: var(--space-8);
}

.button {
  transition:
    background 0.2s ease,
    translate 0.12s ease;
}
.button:active {
  translate: 0 1px;
}

@media (max-width: 760px) {
  .hero-sticker {
    width: 19%;
    inset-block-end: 2%;
    inset-inline-start: 0;
  }
  .marquee {
    padding-block: 13px;
  }
  .marquee-track {
    animation-duration: 30s;
  }
  .visit-section {
    gap: var(--space-6);
  }
  .visit-art {
    width: min(62%, 250px);
    margin-inline-start: 12%;
  }
  .hero-art::after {
    inset: 4% 3% 8% 6%;
  }
  /* Phones: the products lead the first screen, compact, then the headline and actions. */
  .home-hero {
    padding-block-start: 8px;
  }
  .home-hero .hero-art {
    order: -1;
    width: min(100%, 380px);
    aspect-ratio: 1.5 / 1;
    margin: 0 auto 6px;
  }
  .home-hero .hero-art::before {
    inset: 6% 16% 6% 18%;
  }
  .home-hero .hero-art::after {
    inset: 2% 13% 2% 15%;
  }
  .home-hero .main-cup {
    width: 46%;
    height: 100%;
    inset-inline-start: 12%;
    inset-block-start: -2%;
  }
  .home-hero .hero-art .side-cup {
    width: 40%;
    height: 82%;
    inset-inline-end: 12%;
    inset-block-start: -2%;
  }
  .home-hero .hero-art .pastry {
    width: 46%;
    height: 56%;
    inset-inline-end: 10%;
    inset-block-end: -4%;
  }
  .home-hero .hero-sticker {
    width: 17%;
    inset-block-end: 2%;
    inset-inline-start: 4%;
  }
  .home-hero .photo-caption {
    display: none;
  }
  .visit-sticker {
    inset-inline-end: -10%;
  }
  .brand-band-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: var(--space-7);
  }
  .brand-band-copy h1,
  .brand-band-copy h2 {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }
  .brand-band-art {
    width: min(86%, 340px);
  }
  .brand-band-hero .brand-band-art {
    width: min(70%, 280px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product,
  .hero-sticker,
  .marquee-track,
  .visit-sticker,
  .band-sticker {
    animation: none !important;
  }
  .inside-tile:hover .inside-photo,
  .inside-tile:hover .inside-name .icon {
    translate: none;
  }
}
/* Keyboard focus stays visible on the Green surfaces. */
.brand-band :focus-visible,
.how-section :focus-visible,
.pickup-section :focus-visible,
.mobile-actions :focus-visible {
  outline-color: var(--crema);
}
.shop-hours {
  margin-block: 44px 40px;
}
.shop-hours h2 {
  margin-bottom: 10px;
}
.contact-layout .shop-hours p,
.location-copy .shop-hours p {
  margin: 0;
  font-size: 18px;
}

/* Existing MRKT tokens, type and photography; no separate visual system. */
.entity-intro {
  font-size: 1rem !important;
  max-width: 43ch;
}
.discovery-links {
  display: flex;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  padding-block: 16px 28px;
}
.discovery-links a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.875rem;
  padding-block: 24px;
}
.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.breadcrumbs span:last-child {
  overflow-wrap: anywhere;
}
.seo-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 48px;
  padding-block: 35px 60px;
}
.seo-hero h1,
.seo-product h1 {
  font-size: clamp(2.3rem, 5vw, 4.7rem);
  line-height: 1.09;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.seo-hero p {
  max-width: 55ch;
}
.seo-hero img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}
.seo-hero address {
  font-style: normal;
  max-width: 50ch;
}
.seo-landing,
.seo-product {
  padding-block-end: 75px;
}
.snapshot-note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted, #546058);
  max-width: 80ch;
  margin-block: 16px 24px;
}
.snapshot-availability {
  font-size: 0.75rem;
  display: block;
  line-height: 1.5;
  margin-block-start: 6px;
  color: var(--muted, #546058);
}
.menu-item-description {
  font-size: 0.875rem;
  line-height: 1.65;
  padding-inline: 16px;
  margin-block: 0 12px;
}
.menu-item-order {
  margin-inline: 16px;
  margin-block-end: 18px;
  font-size: 0.875rem;
}
.product-explore {
  text-decoration: none;
  color: inherit;
}
.product-explore .commerce-product-copy {
  display: block;
}
.local-answers {
  max-width: 760px;
  padding-block: 56px 32px;
}
.local-answers h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-block-end: 32px;
}
.local-answers h3 {
  font-size: 1.2rem;
  margin-block: 26px 10px;
}
.local-answers p {
  max-width: 68ch;
}
.seo-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 32px 48px;
}
.seo-product-photo {
  background: var(--wash, #eeeee8);
  border-radius: var(--radius);
}
.seo-product-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.seo-product-layout p {
  max-width: 62ch;
}
.seo-price {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-location {
  padding-block: 35px;
  border-block: 1px solid var(--line, #dbdfd8);
}
.product-location h2,
.related-products > h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
}
.product-location address {
  font-style: normal;
}
.related-products {
  padding-block: 40px;
}
.seo-product .commerce-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-permalink {
  display: inline-flex;
  margin: 0 16px 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 0.8rem;
}
html[dir='rtl'] .seo-hero h1,
html[dir='rtl'] .seo-product h1 {
  letter-spacing: 0;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .seo-hero,
  .seo-product-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 12px 32px;
  }
  .seo-hero > div:last-child {
    max-width: 350px;
    justify-self: center;
  }
  .seo-product-photo {
    max-width: 450px;
    justify-self: center;
  }
  .seo-product .commerce-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seo-product h1 {
    margin-block-start: 8px;
  }
  .menu-item-description {
    padding-inline: 12px;
  }
  .menu-item-order {
    margin-inline: 12px;
  }
  .discovery-links {
    gap: 12px 24px;
  }
  .entity-intro {
    font-size: 0.94rem !important;
  }
  .snapshot-note {
    font-size: 0.82rem;
  }
}

/* Directional icons carry .icon-rtl and mirror in Arabic (site.css); pins and bags never do. */

/* Quality pass: 44 px targets, spacing around the product page order button. */
.discovery-links a,
.breadcrumbs a,
.seo-category-link,
.product-permalink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.breadcrumbs {
  align-items: center;
  padding-block: 12px;
}
.seo-product-order {
  margin-block: 8px 24px;
}
.menu-item-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.seo-category-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}