/* finesse · register=commerce · design-language=apple · apple-mode=app · A=forest+ivory
 * B=system-ui+editorial-serif · C=content-weighted-bento · D=drag-sheets+press-feedback · E=soft-solid-surfaces · SOUL=6 SPECTACLE=2 DENSITY=5 */
:root {
  --ui-surface: #fffefa;
  --ui-surface-soft: #f5f7f1;
  --ui-line: #e5e9df;
  --ui-ink-soft: #4b5a4d;
  --ui-photo-shade: rgba(15, 36, 22, .77);
  --ui-shadow: 0 16px 42px rgba(35, 64, 41, .07);
  --ui-shadow-raised: 0 22px 56px rgba(35, 64, 41, .13);
  --ui-focus: rgba(56, 93, 70, .16);
  --ui-white: #fff;
}

/* The room, harvest, table and barbecue do not carry equal information weight. */
.service-grid {
  width: min(1440px, calc(100% - 6vw));
  margin: 22px auto 38px;
  grid-template-columns: 1.14fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(190px, auto));
  gap: 16px;
}
.service-card { min-width: 0; min-height: 0; border: 1px solid var(--ui-line); border-radius: 24px; box-shadow: var(--ui-shadow); }
.service-card:first-child { grid-row: span 2; }
.service-card:nth-child(2) { grid-column: span 2; }
.service-card > img { transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.service-card:hover > img { transform: scale(1.035); }
.service-card::after { background: linear-gradient(90deg, var(--ui-white) 0%, rgba(255, 255, 255, .94) 34%, rgba(255, 255, 255, .1) 86%); }
.service-card:first-child::after { background: linear-gradient(0deg, var(--ui-photo-shade), rgba(15, 36, 22, .03) 78%); }
.service-card > div { width: 72%; min-height: 100%; padding: 23px; }
.service-card:first-child > div { width: 100%; justify-content: flex-end; color: var(--ui-white); }
.service-card:first-child p { color: var(--ui-white); }
.service-card h2 { font-size: 24px; }
.service-card:first-child h2 { font-size: clamp(28px, 2.7vw, 38px); }
.service-card p { color: var(--ui-ink-soft); font-size: 13px; }
.service-card a, .service-card .card-action { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13px; }
.service-card:first-child .card-action { margin-top: 22px; background: var(--ui-surface); color: var(--green-dark); }

/* One tactile surface vocabulary across shopping, booking, login and operations. */
.market-hero, .harvest-panel, .product-card, .experience-card { border-radius: 24px; }
.harvest-panel, .product-card, .admin-panel, .metric, .agent-chat-panel, .agent-proposal-panel {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.quick-item img, .product-art, .cart-item img, .assistant-products img { border-radius: 14px; }
.product-card { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
.product-card:hover { box-shadow: var(--ui-shadow-raised); }
.product-info { padding: 19px; }
.add-button, .quick-quantity button, .quantity button { min-width: 44px; min-height: 44px; }
.quick-cart-button, .harvest-cta, .primary-button, .secondary-button, .light-button { border-radius: 14px; }
.trust-strip { background: var(--ui-surface-soft); }
.trust-strip > div > .material-symbols-rounded { border-color: var(--ui-line); background: var(--ui-surface); }

dialog { border-radius: 24px; background: var(--ui-surface); }
.cart-drawer { background: var(--ui-surface); }
.cart-drawer { transition: transform .34s cubic-bezier(.16, 1, .3, 1); }
.field input, .field select, .field textarea, .admin-login input,
.media-generate-form input, .media-generate-form textarea {
  min-height: 46px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-white);
}
.field label { color: var(--ui-ink-soft); font-size: 13px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.admin-login input:focus-visible, .media-generate-form input:focus-visible,
.media-generate-form textarea:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 1px;
  border-color: var(--green);
}
.form-total, .wallet-inline, .notice, .auth-feedback:not(:empty), .success-box { border-radius: 14px; }
.success-box { border-left: 0; border: 1px solid var(--ui-line); }
.auth-feedback:not(:empty) { border-left: 0; border: 1px solid var(--ui-line); }
.recharge-plans button, .order-result-list article, .address-list article { border-radius: 14px; }
.toast { border-radius: 12px; }
:where(button, a, input, select, textarea) { touch-action: manipulation; }
:where(button, a):disabled { cursor: not-allowed; }

dialog[open] { animation: dialog-enter .28s cubic-bezier(.16, 1, .3, 1) both; }
dialog[open]::backdrop { animation: backdrop-enter .28s ease-out both; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

.assistant-backdrop { display: none; }
.assistant-sheet-grab { display: none; }
.cart-sheet-grab { display: none; }

.admin-app { background: var(--ui-surface-soft); }
.admin-sidebar nav button, .logout-button { border-radius: 12px; }
.admin-main { padding-top: 32px; }
.admin-top h1 { font-size: clamp(27px, 2.7vw, 36px); }
.refresh-button, .admin-button, .member-search { min-height: 44px; border-radius: 12px; }
.metric, .admin-panel, .agent-chat-panel, .agent-proposal-panel { border-radius: 20px; }
.metric { min-height: 132px; }
.metric b { color: var(--green-dark); }
.agent-chat-panel { overflow: hidden; }
.agent-proposal-panel { top: 18px; }
.agent-privacy, .proposal-card, .readiness-row { border-radius: 14px; }
.agent-compose, .shop-assistant-form { border-radius: 16px; }
.shop-assistant-panel { border-radius: 22px; }
.shop-assistant-prompts button, .agent-prompts button { min-height: 44px; }

@media (max-width: 1180px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 210px; }
  .service-card:first-child, .service-card:nth-child(2) { grid-row: auto; grid-column: auto; }
  .service-card:first-child::after { background: linear-gradient(90deg, var(--ui-white) 0%, rgba(255, 255, 255, .94) 34%, rgba(255, 255, 255, .1) 86%); }
  .service-card:first-child > div { width: 72%; justify-content: flex-start; color: var(--ink); }
  .service-card:first-child p { color: var(--ui-ink-soft); }
  .service-card:first-child .card-action { margin-top: auto; background: var(--green); color: var(--ui-white); }
}

@media (max-width: 900px) {
  .admin-sidebar { grid-template-columns: 1fr auto; }
  .admin-sidebar nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .admin-sidebar nav::-webkit-scrollbar { display: none; }
  .admin-sidebar nav button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 760px) {
  .assistant-backdrop { position: fixed; z-index: 59; inset: 0; display: block; opacity: 0; pointer-events: none; touch-action: none; background: var(--ui-photo-shade); transition: opacity .3s ease; }
  .assistant-backdrop.open { opacity: .48; pointer-events: auto; }
  #customer-app { transition: transform .34s cubic-bezier(.16, 1, .3, 1), filter .34s; transform-origin: top center; }
  body.assistant-sheet-open #customer-app, body.cart-sheet-open #customer-app { transform: scale(.985); filter: brightness(.95); }
  .shop-assistant-panel { height: min(85dvh, 700px); transform: translateY(104%); transition: transform .34s cubic-bezier(.16, 1, .3, 1), opacity .22s; }
  .shop-assistant-panel.open { transform: translateY(0); }
  .shop-assistant-panel.dragging { transition: none; }
  .assistant-sheet-grab { height: 32px; display: grid; place-items: center; flex: 0 0 auto; background: var(--green-dark); touch-action: none; cursor: grab; }
  .assistant-sheet-grab:active { cursor: grabbing; }
  .assistant-sheet-grab span { width: 38px; height: 5px; border-radius: 99px; background: var(--ui-white); opacity: .62; }
  .cart-drawer { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(84dvh, 720px); padding: 0 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; box-shadow: 0 -24px 64px rgba(15, 36, 22, .2); transform: translateY(104%); }
  .cart-drawer.open { transform: translateY(0); }
  .cart-drawer.dragging { transition: none; }
  .cart-sheet-grab { height: 32px; display: grid; place-items: center; flex: 0 0 auto; touch-action: none; cursor: grab; }
  .cart-sheet-grab:active { cursor: grabbing; }
  .cart-sheet-grab span { width: 38px; height: 5px; border-radius: 99px; background: var(--green); opacity: .38; }
  .cart-drawer .drawer-head h2 { margin-bottom: 12px; font-size: 29px; }
  .shop-assistant-head { min-height: 64px; padding-top: 4px; }
  dialog { position: fixed; inset: auto 0 0; width: min(100%, 760px); max-height: min(90dvh, 850px); margin: 0 auto; border-radius: 24px 24px 0 0; }
  dialog[open] { animation-name: mobile-dialog-enter; }
  @keyframes mobile-dialog-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .service-grid { width: auto; margin: 14px 12px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  .service-card:first-child, .service-card:nth-child(2) { grid-column: span 2; min-height: 220px; }
  .service-card:nth-child(3), .service-card:nth-child(4) { min-height: 225px; }
  .service-card:first-child::after, .service-card:nth-child(2)::after { background: linear-gradient(90deg, var(--ui-white) 0%, rgba(255, 255, 255, .92) 42%, rgba(255, 255, 255, .07) 95%); }
  .service-card:first-child > div, .service-card:nth-child(2) > div { width: 70%; min-height: 220px; padding: 20px; color: var(--ink); }
  .service-card:first-child h2 { font-size: 24px; }
  .service-card:first-child p { color: var(--ui-ink-soft); }
  .service-card:nth-child(3)::after, .service-card:nth-child(4)::after { background: linear-gradient(0deg, var(--ui-white) 0%, rgba(255, 255, 255, .92) 48%, rgba(255, 255, 255, .06) 92%); }
  .service-card:nth-child(3) > div, .service-card:nth-child(4) > div { width: 100%; min-height: 225px; padding: 98px 12px 12px; }
  .service-card:nth-child(3) h2, .service-card:nth-child(4) h2 { font-size: 18px; }
  .service-card:nth-child(3) p, .service-card:nth-child(4) p { font-size: 12px; }
  .service-card:first-child .card-action { margin-top: auto; background: var(--green); color: var(--ui-white); }
  .service-card a, .service-card .card-action { min-height: 44px; padding: 0 10px; font-size: 12px; }
  .harvest-panel, .product-card, .experience-card { border-radius: 20px; }
  .harvest-head h2 { font-size: 27px; }
  .quick-item { gap: 12px; }
  .quick-item img { border-radius: 12px; }
  .quick-price { font-size: 17px; }
  .quick-cart-button { min-height: 54px; }
  .trust-strip { gap: 16px 0; }
  .trust-strip > div { min-width: 0; gap: 9px; }
  .trust-strip > div > .material-symbols-rounded { width: 38px; height: 38px; font-size: 21px; }
  .admin-sidebar { padding: 12px; }
  .admin-sidebar nav button { min-width: 102px; }
  .admin-panel { padding: 18px; }
  dialog { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); padding: 28px 18px calc(22px + env(safe-area-inset-bottom)); }
  .shop-assistant-panel { border-radius: 20px 20px 0 0; }
  .shop-assistant-form { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .service-card:first-child > div, .service-card:nth-child(2) > div { width: 79%; }
  .service-card:nth-child(3) h2, .service-card:nth-child(4) h2 { font-size: 16px; }
  .service-card:nth-child(3) p, .service-card:nth-child(4) p { font-size: 11px; }
  .service-card:nth-child(3) .material-symbols-rounded, .service-card:nth-child(4) .material-symbols-rounded { display: none; }
  .trust-strip > div > .material-symbols-rounded { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card > img, .product-card { transition: none; }
  .service-card:hover > img, .product-card:hover { transform: none; }
  dialog[open], dialog[open]::backdrop { animation: none; }
  .assistant-backdrop, .shop-assistant-panel, .cart-drawer, #customer-app { transition: none; }
  body.assistant-sheet-open #customer-app, body.cart-sheet-open #customer-app { transform: none; filter: none; }
}