/* finesse · register=commerce · design-language=apple · apple-mode=spatial · A=forest+ivory
 * B=system-ui+editorial-serif · C=photo-stage+overlapping-workspace · D=independent-pointer-response+reversible-sheets · E=layered-paper+selective-translucency · SOUL=7 SPECTACLE=3 DENSITY=5 */
:root {
  --spatial-paper: #f9faf5;
  --spatial-canvas: #edf1e9;
  --spatial-surface: #fffefa;
  --spatial-line: #dce5da;
  --spatial-soft-line: rgba(49, 83, 58, .13);
  --spatial-ink: #233b2d;
  --spatial-muted: #5a695c;
  --spatial-green: #385d46;
  --spatial-green-deep: #294734;
  --spatial-warm: #965338;
  --spatial-white: #fffefa;
  --spatial-glass: rgba(255, 254, 250, .89);
  --spatial-photo-shade: rgba(12, 32, 19, .72);
  --spatial-shadow: 0 24px 70px rgba(37, 68, 43, .12), 0 3px 12px rgba(37, 68, 43, .05);
  --spatial-shadow-high: 0 32px 80px rgba(37, 68, 43, .18), 0 6px 20px rgba(37, 68, 43, .07);
  --spatial-ease: cubic-bezier(.2, .8, .2, 1);
}

html, body { overflow-x: clip; }
body { background: var(--spatial-paper); }
#customer-app { isolation: isolate; }
#home, #stay, #vegetables, #restaurant { scroll-margin-top: 110px; }

/* A compact floating navigation surface, not a full-width opaque strip. */
.site-header {
  top: 12px;
  z-index: 40;
  width: min(1536px, calc(100% - 32px));
  height: 72px;
  margin: 12px auto 0;
  padding-inline: clamp(19px, 2.6vw, 34px);
  grid-template-columns: minmax(210px, .85fr) minmax(360px, 1.5fr) auto;
  gap: 14px;
  border: 1px solid var(--spatial-soft-line);
  border-radius: 22px;
  background: var(--spatial-glass);
  box-shadow: 0 9px 36px rgba(33, 64, 42, .08);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  transition: box-shadow .32s var(--spatial-ease), background .32s var(--spatial-ease), border-color .32s var(--spatial-ease);
}
.site-header.is-scrolled { box-shadow: 0 16px 44px rgba(33, 64, 42, .16); background: var(--spatial-glass); }
.brand-wordmark b { color: var(--spatial-ink); font-size: clamp(21px, 1.75vw, 25px); }
.brand-wordmark small { color: var(--spatial-muted); }
.desktop-nav { justify-content: center; gap: clamp(14px, 2vw, 31px); }
.desktop-nav a { height: 44px; padding: 0 11px; border-radius: 11px; color: var(--spatial-ink); font-size: 14px; transition: background .22s, color .22s; white-space: nowrap; }
.desktop-nav a::after { display: none; }
.desktop-nav a.active, .desktop-nav a:hover { color: var(--spatial-green-deep); background: var(--spatial-canvas); }
.header-actions { gap: clamp(4px, .8vw, 11px); }
.text-button { min-height: 44px; padding: 0 8px; border-radius: 11px; font-size: 13px; transition: background .22s; }
.text-button:hover { background: var(--spatial-canvas); }
.cart-button { min-height: 46px; border-radius: 13px; background: var(--spatial-green-deep); box-shadow: 0 7px 16px rgba(37, 68, 43, .15); font-size: 13px; }
.cart-button:hover { background: var(--spatial-green); }

/* Hotel photograph remains the landscape; harvest becomes a foreground work surface. */
.market-shell {
  width: min(1536px, calc(100% - 32px));
  min-height: 676px;
  margin: 16px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(676px, auto);
  gap: 0;
  position: relative;
}
.market-hero {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 676px;
  border: 1px solid var(--spatial-soft-line);
  border-radius: 28px;
  background: var(--spatial-green-deep);
  box-shadow: var(--spatial-shadow);
}
.market-hero > img { object-position: 52% center; transform: scale(1.025) translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0); transition: transform .65s var(--spatial-ease); }
.hero-shade { background: linear-gradient(90deg, var(--spatial-photo-shade) 0%, rgba(12, 32, 19, .45) 39%, rgba(12, 32, 19, .05) 72%), linear-gradient(0deg, rgba(12, 32, 19, .24), transparent 45%); }
.hero-copy { width: 62%; min-height: 676px; padding: 80px clamp(32px, 5vw, 76px) 92px; }
.hero-copy > p { margin-bottom: 20px; font-size: 13px; letter-spacing: .2em; }
.hero-copy h1 { font-size: clamp(58px, 5.9vw, 92px); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; text-shadow: 0 3px 24px rgba(12, 32, 19, .22); }
.hero-copy strong { max-width: 500px; margin: 24px 0 38px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; }
.harvest-cta { min-height: 58px; padding-inline: 23px; border-radius: 14px; background: var(--spatial-warm); box-shadow: 0 10px 26px rgba(38, 25, 17, .16); font-size: 16px; transition: transform .25s var(--spatial-ease), box-shadow .25s var(--spatial-ease); }
.harvest-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(38, 25, 17, .2); background: var(--spatial-warm); }
.harvest-panel {
  grid-column: 8 / 13;
  grid-row: 1;
  z-index: 2;
  align-self: center;
  min-height: 0;
  max-height: calc(100% - 64px);
  margin: 0 32px 0 -22px;
  padding: 25px 26px 18px;
  overflow: auto;
  border: 1px solid var(--spatial-soft-line);
  border-radius: 23px;
  background: var(--spatial-glass);
  box-shadow: var(--spatial-shadow-high);
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
}
.harvest-head h2 { color: var(--spatial-ink); font-size: 27px; }
.harvest-head > span { color: var(--spatial-green); }
.quick-item { min-height: 122px; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-color: var(--spatial-soft-line); }
.quick-item img { width: 110px; height: 96px; border-radius: 12px; }
.quick-info { min-width: 0; }
.quick-info h3 { margin-top: 2px; font-size: 17px; }
.quick-price { font-size: 18px; }
.quick-quantity { gap: 7px; }
.quick-cart-button { min-height: 54px; border-radius: 13px; background: var(--spatial-warm); }

/* A quiet spatial stage: one card moves, never its neighbours. */
.service-grid { width: min(1440px, calc(100% - 64px)); margin: 28px auto 72px; gap: 18px; grid-template-rows: repeat(2, minmax(200px, auto)); }
.service-card, .product-card, .experience-card { transform: translate3d(0, var(--card-lift, 0px), 0) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); transform-style: preserve-3d; transition: transform .34s var(--spatial-ease), box-shadow .34s var(--spatial-ease), border-color .34s var(--spatial-ease); }
.service-card { border: 1px solid var(--spatial-soft-line); border-radius: 21px; box-shadow: 0 8px 24px rgba(37, 68, 43, .07); }
.service-card:hover, .product-card:hover, .experience-card:hover { --card-lift: -5px; border-color: var(--spatial-line); box-shadow: var(--spatial-shadow-high); }
.service-card > img { transition: transform .65s var(--spatial-ease); }
.service-card:hover > img { transform: scale(1.04); }
.service-card::after { background: linear-gradient(90deg, var(--spatial-white) 0%, rgba(255, 254, 250, .92) 36%, rgba(255, 254, 250, .08) 86%); }
.service-card:first-child::after { background: linear-gradient(0deg, rgba(12, 32, 19, .7), rgba(12, 32, 19, .02) 75%); }
.service-card h2 { letter-spacing: -.035em; }
.service-card a, .service-card .card-action { min-height: 44px; border-radius: 11px; background: var(--spatial-green-deep); }
.service-card:first-child .card-action { background: var(--spatial-white); }
.service-card a:hover, .service-card .card-action:hover { filter: brightness(1.08); }

.trust-strip { width: min(1440px, calc(100% - 64px)); min-height: 100px; margin: 0 auto; padding: 14px 24px; border: 1px solid var(--spatial-soft-line); border-radius: 20px; background: var(--spatial-canvas); }
.trust-strip > div { padding-right: 12px; border-color: var(--spatial-soft-line); }
.trust-strip > div > .material-symbols-rounded { width: 43px; height: 43px; border: 0; background: var(--spatial-surface); box-shadow: 0 3px 10px rgba(37, 68, 43, .07); font-size: 24px; }
.trust-strip b { color: var(--spatial-ink); font-size: 15px; }
.trust-strip small { color: var(--spatial-muted); }
.produce-section { padding-top: 108px; }
.section-heading h2 { letter-spacing: -.04em; }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; }
.product-card { border-color: var(--spatial-soft-line); border-radius: 19px; background: var(--spatial-surface); box-shadow: 0 6px 20px rgba(37, 68, 43, .055); }
.product-art { transition: transform .65s var(--spatial-ease); }
.product-card:hover .product-art { transform: scale(1.035); }
.product-card { overflow: hidden; }
.product-info { position: relative; z-index: 1; background: var(--spatial-surface); }
.experience-grid { gap: 25px; }
.experience-card { border: 1px solid var(--spatial-soft-line); border-radius: 24px; box-shadow: var(--spatial-shadow); }
.experience-card > img { transition: transform .65s var(--spatial-ease); }
.experience-card:hover > img { transform: scale(1.035); }
.light-button { background: var(--spatial-surface); border-radius: 12px; }

@media (max-width: 1240px) {
  .site-header { grid-template-columns: 205px minmax(280px, 1fr) auto; gap: 5px; }
  .desktop-nav { gap: 5px; }
  .desktop-nav a { padding-inline: 8px; font-size: 12px; }
  .text-button { padding-inline: 5px; font-size: 12px; }
  .market-shell { grid-template-rows: minmax(610px, auto); min-height: 610px; }
  .market-hero, .hero-copy { min-height: 610px; }
  .hero-copy { width: 62%; padding-left: 42px; }
  .hero-copy h1 { font-size: clamp(52px, 6vw, 72px); }
  .harvest-panel { grid-column: 7 / 13; margin-right: 22px; padding: 21px; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .market-shell { display: block; min-height: 0; }
  .market-hero, .hero-copy { min-height: 530px; }
  .hero-copy { width: 100%; max-width: 680px; }
  .harvest-panel { width: min(610px, calc(100% - 28px)); max-height: none; margin: -55px auto 0; position: relative; overflow: visible; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; margin-top: 32px; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-header { top: 8px; width: calc(100% - 20px); height: 60px; margin-top: 8px; padding-inline: 15px; border-radius: 17px; }
  .brand-wordmark b { font-size: 20px; }
  .brand-wordmark small { font-size: 8px; }
  .cart-button { min-height: 42px; padding-inline: 11px; }
  .market-shell { width: calc(100% - 20px); margin-top: 10px; }
  .market-hero { min-height: 470px; border-radius: 21px; }
  .market-hero > img { object-position: 55% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(12, 32, 19, .82) 0%, rgba(12, 32, 19, .19) 76%); }
  .hero-copy { min-height: 470px; padding: 32px 25px 82px; justify-content: flex-end; }
  .hero-copy > p { margin-bottom: 10px; font-size: 11px; }
  .hero-copy h1 { font-size: clamp(42px, 10.5vw, 57px); line-height: 1.08; }
  .hero-copy strong { margin: 12px 0 24px; font-size: 15px; }
  .harvest-cta { min-height: 50px; font-size: 14px; }
  .harvest-panel { width: calc(100% - 18px); margin-top: -38px; padding: 20px 18px 17px; border-radius: 19px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--spatial-surface); }
  .harvest-head h2 { font-size: 25px; }
  .service-grid { width: calc(100% - 30px); margin: 28px auto 45px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .service-card:first-child, .service-card:nth-child(2) { min-height: 220px; }
  .service-card:nth-child(3), .service-card:nth-child(4) { min-height: 210px; }
  .trust-strip { width: calc(100% - 30px); padding: 15px 9px; border-radius: 17px; gap: 10px 0; }
  .trust-strip > div { padding: 0 8px; }
  .trust-strip > div > .material-symbols-rounded { display: none; }
  .trust-strip b { font-size: 12px; }
  .trust-strip small { font-size: 10px; white-space: normal; }
  .produce-section { padding-top: 74px; }
  .mobile-nav:not(.route-hidden) { right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 10px; min-height: 62px; padding: 5px; border: 1px solid var(--spatial-soft-line); border-radius: 19px; background: var(--spatial-glass); box-shadow: 0 10px 34px rgba(37, 68, 43, .18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .mobile-nav a, .mobile-nav button { border-radius: 13px; }
  .mobile-nav a[aria-current="page"] { background: var(--spatial-canvas); }
  .shop-assistant-launch { right: 15px; bottom: calc(85px + env(safe-area-inset-bottom)); box-shadow: var(--spatial-shadow); }
}

@media (max-width: 380px) {
  .hero-copy { padding-inline: 21px; }
  .hero-copy h1 { font-size: 41px; }
  .quick-item { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
  .quick-item img { width: 86px; height: 86px; }
  .quick-info h3 { font-size: 15px; }
  .quick-price { font-size: 16px; }
  .service-card h2 { font-size: 16px; }
  .service-card:nth-child(3) > div, .service-card:nth-child(4) > div { padding-inline: 10px; }
}

@media (hover: none), (pointer: coarse) {
  .service-card, .product-card, .experience-card { transform: none; }
  .service-card:hover, .product-card:hover, .experience-card:hover { box-shadow: 0 8px 24px rgba(37, 68, 43, .07); }
}
@media (prefers-reduced-motion: reduce) {
  .market-hero > img, .service-card, .service-card > img, .product-card, .product-art, .experience-card, .experience-card > img { transform: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .harvest-panel, .mobile-nav:not(.route-hidden) { background: var(--spatial-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header, .harvest-panel, .mobile-nav:not(.route-hidden), .service-card, .product-card { border-color: var(--spatial-green-deep); }
}
