:root {
  color-scheme: only light;
  --paper: #f7f4eb;
  --white: #fffdf8;
  --ink: #20291e;
  --muted: #68705f;
  --green: #2d5139;
  --green-soft: #e7eee2;
  --line: #e3e1d6;
  --orange: #f0a95e;
  --shadow: 0 18px 55px rgba(35, 51, 35, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.hidden { display: none !important; }
.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; }
.app-shell { max-width: 1120px; margin: 0 auto; padding: 0 42px; }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.my-order-button { padding: 8px 12px; border: 1px solid #c7d6c7; border-radius: 999px; background: #fffdf8; color: var(--green); font-size: 12px; font-weight: 800; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 850; letter-spacing: -.07em; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--green); color: #fff; font-size: 18px; letter-spacing: 0; transform: rotate(-9deg); }
.demo-badge { padding: 8px 12px; border: 1px solid #d8dfd2; border-radius: 999px; background: #f0f4ed; color: var(--green); font-size: 12px; font-weight: 750; }
.hero { position: relative; min-height: 380px; overflow: hidden; padding: 74px 7%; border-radius: 34px; background: #dfe9d6; }
.hero::after { position: absolute; right: -65px; bottom: -170px; width: 520px; height: 520px; border-radius: 50%; background: #cfdec3; content: ""; }
.eyebrow { margin: 0 0 13px; color: #62806a; font-size: 11px; font-weight: 850; letter-spacing: .17em; }
.hero .eyebrow { color: #3d6548; }
h1, h2, p { overflow-wrap: break-word; }
h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(40px, 5vw, 67px); line-height: 1.13; letter-spacing: -.075em; }
h1 em { font-style: normal; color: var(--green); }
.hero-copy { position: relative; z-index: 1; max-width: 350px; margin: 25px 0 0; color: #485f4a; font-size: 16px; line-height: 1.65; }
.hero-preview { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; max-width: 430px; margin-top: 20px; }
.hero-preview span { flex-basis: 100%; color: #3d6548; font-size: 12px; font-weight: 850; }
.hero-preview strong { padding: 8px 10px; border-radius: 9px; background: rgba(255, 253, 248, .82); color: var(--green); font-size: 12px; }
.hero-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 19px; padding: 11px 15px; border-radius: 10px; background: var(--green); color: white; font-size: 13px; font-weight: 850; text-decoration: none; }
.hero-art { position: absolute; z-index: 1; top: 24px; right: 10%; width: 300px; height: 330px; }
.art-orbit { position: absolute; border: 1px solid rgba(48, 91, 58, .23); border-radius: 50%; }
.orbit-one { inset: 18px 6px 16px 8px; transform: rotate(25deg) scaleX(.78); }
.orbit-two { inset: 45px -20px 41px -20px; transform: rotate(-26deg) scaleX(.75); }
.art-bag { position: absolute; top: 72px; left: 92px; width: 133px; height: 170px; padding-top: 39px; background: #fff8e9; border: 3px solid #e8d6b1; border-radius: 15px 15px 27px 27px; box-shadow: 14px 20px 23px rgba(54, 71, 44, .14); color: var(--green); font-size: 27px; font-weight: 900; line-height: 1.12; text-align: center; transform: rotate(10deg); }
.art-bag::before { position: absolute; top: -22px; left: 34px; width: 60px; height: 34px; border: 9px solid #e8d6b1; border-bottom: 0; border-radius: 30px 30px 0 0; content: ""; }
.art-produce { position: absolute; font-size: 66px; filter: drop-shadow(8px 12px 5px rgba(44, 64, 42, .14)); }
.produce-onion { top: 32px; left: 31px; transform: rotate(-20deg); }
.produce-potato { right: 0; bottom: 42px; transform: rotate(14deg); }
.produce-garlic { bottom: 17px; left: 29px; font-size: 57px; transform: rotate(-16deg); }
.pickup-section, .products-section { margin-top: 72px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.section-heading h2, .how-section h2 { margin: 0; font-size: clamp(25px, 3vw, 35px); line-height: 1.2; letter-spacing: -.065em; }
.section-heading .eyebrow { margin-bottom: 9px; }
.area-label, .count-label { color: var(--green); font-size: 13px; font-weight: 750; white-space: nowrap; }
.section-desc { margin: 14px 0 25px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.store-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.store-card { width: 100%; padding: 22px; border: 2px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 5px 18px rgba(48, 49, 35, .025); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.store-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.store-card.selected { border-color: var(--green); background: #fbfdf8; }
.store-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.store-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 14px; background: var(--green-soft); font-size: 23px; }
.store-radio { width: 22px; height: 22px; border: 2px solid #a8b2a2; border-radius: 50%; }
.selected .store-radio { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 5px, transparent 6px); }
.store-name { display: block; margin-top: 17px; font-size: 19px; font-weight: 850; letter-spacing: -.045em; }
.store-detail { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.store-status { display: inline-flex; margin-top: 18px; padding: 6px 9px; border-radius: 6px; background: #edf4e9; color: #396542; font-size: 11px; font-weight: 800; }
.store-status.closed { background: #f0f0ed; color: #7b8179; }
.product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.product-card { display: flex; align-items: center; min-height: 150px; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.product-illustration { flex: 0 0 96px; height: 106px; display: grid; place-items: center; border-radius: 15px; background: #f0eddd; font-size: 54px; }
.product-card:nth-child(2n) .product-illustration { background: #ebeee1; }
.product-info { min-width: 0; flex: 1; }
.product-name { margin: 0 0 6px; font-size: 18px; font-weight: 850; letter-spacing: -.05em; }
.product-meta { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.product-price { margin: 13px 0 0; font-size: 17px; font-weight: 850; }
.product-price small { margin-left: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.add-button { align-self: end; flex: 0 0 36px; height: 36px; border: 0; border-radius: 10px; background: var(--green); color: white; font-size: 24px; line-height: 1; cursor: pointer; }
.add-button:disabled { background: #c7cec2; cursor: not-allowed; }
.how-section { margin: 90px 0; padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: #fdfbf4; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.steps div { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: var(--paper); }
.steps span { color: #8ea48a; font-size: 13px; font-weight: 850; }
.steps strong { font-size: 15px; }
.steps small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.page-footer { padding: 0 0 50px; color: var(--muted); font-size: 12px; }
.page-footer strong { color: var(--ink); font-size: 18px; }
.page-footer p { margin: 8px 0 0; }
.cart-fab { position: fixed; z-index: 5; right: max(24px, calc((100vw - 1120px) / 2 + 42px)); bottom: 24px; display: flex; align-items: center; gap: 15px; min-width: 250px; padding: 16px 20px; border: 0; border-radius: 15px; background: var(--green); box-shadow: 0 14px 30px rgba(36, 73, 46, .28); color: white; font-weight: 800; cursor: pointer; }
.cart-fab strong { margin-left: auto; }
.cart-count { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border-radius: 50%; background: var(--orange); color: #3d311e; font-size: 12px; }
.overlay { position: fixed; z-index: 9; inset: 0; background: rgba(21, 32, 23, .45); }
.cart-panel { position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, 430px); padding: 28px; background: var(--white); box-shadow: -12px 0 40px rgba(0,0,0,.12); }
.panel-header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 27px; letter-spacing: -.06em; }
.icon-button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 50%; background: #f1f2ed; color: var(--ink); font-size: 25px; cursor: pointer; }
.cart-content { flex: 1; overflow-y: auto; }
.cart-store { margin: 25px 0 8px; color: var(--green); font-size: 13px; font-weight: 850; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item strong { display: block; font-size: 15px; }
.cart-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.cart-item-price { margin-top: 9px; font-size: 14px; font-weight: 850; }
.quantity-control { display: flex; align-items: center; gap: 9px; }
.quantity-control button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.quantity-control span { min-width: 18px; text-align: center; font-size: 13px; font-weight: 750; }
.panel-bottom { padding-top: 20px; border-top: 1px solid var(--line); }
.total-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.total-row strong { font-size: 24px; }
.panel-note { margin: 13px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.primary-button { width: 100%; padding: 16px 20px; border: 0; border-radius: 12px; background: var(--green); color: white; font-size: 15px; font-weight: 850; cursor: pointer; }
.primary-button:disabled { background: #bbc5b9; cursor: not-allowed; }
.checkout-panel, .merchant-panel { position: fixed; z-index: 11; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, 500px); padding: 24px 30px; background: var(--white); box-shadow: -12px 0 40px rgba(0,0,0,.12); }
.checkout-header { display: flex; justify-content: space-between; align-items: center; min-height: 36px; margin-bottom: 25px; }
.text-button { padding: 7px 0; border: 0; background: transparent; color: var(--green); font-size: 13px; font-weight: 850; cursor: pointer; }
.checkout-panel h2, .merchant-panel h2 { margin: 0; font-size: 30px; letter-spacing: -.07em; }
.checkout-lead { margin: 8px 0 25px; color: var(--muted); font-size: 13px; }
.checkout-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.checkout-block { margin-bottom: 13px; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: #fffefa; }
.block-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.block-heading h3 { margin: 0; font-size: 16px; letter-spacing: -.04em; }
.block-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 14px; font-weight: 850; }
.checkout-block > strong { display: block; font-size: 16px; }
.checkout-block > p { margin: 5px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.checkout-block .muted-line { color: #899184; }
.inline-notice { margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: var(--green-soft); color: #3e6245; font-size: 11px; line-height: 1.5; }
.checkout-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checkout-item:last-child { border-bottom: 0; }
.checkout-item strong { display: block; font-size: 13px; }
.checkout-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.checkout-item .checkout-item-price { flex: 0 0 auto; font-size: 13px; font-weight: 850; }
.payment-options { display: grid; gap: 8px; }
.payment-option { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 13px; font-weight: 750; cursor: pointer; }
.payment-option:has(input:checked) { border-color: var(--green); background: #f5f9f2; }
.payment-option input, .consent-row input { accent-color: var(--green); }
.payment-option small { margin-left: 4px; color: #718171; font-size: 10px; font-weight: 500; }
.payment-disclaimer { margin: 12px 0 0 !important; color: var(--muted); font-size: 11px !important; line-height: 1.6; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 12px; line-height: 1.6; cursor: pointer; }
.consent-row input { margin: 2px 0 0; flex: 0 0 auto; }
.checkout-bottom { padding-top: 16px; border-top: 1px solid var(--line); background: var(--white); }
.checkout-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 14px; }
.checkout-total strong { font-size: 24px; }
.ticket-panel { position: fixed; z-index: 11; top: 50%; left: 50%; width: min(calc(100% - 36px), 420px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 37px 31px 31px; border-radius: 25px; background: var(--white); box-shadow: var(--shadow); text-align: center; transform: translate(-50%, -50%); }
.ticket-close { position: absolute; top: 15px; right: 15px; }
.ticket-check { display: grid; place-items: center; width: 57px; height: 57px; margin: 0 auto 18px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 26px; font-weight: 900; }
.ticket-panel h2 { margin: 0; font-size: 25px; letter-spacing: -.06em; }
.ticket-sub { margin: 9px 0 22px; color: var(--muted); font-size: 13px; }
.status-pill { display: inline-block; margin: 0 0 17px; padding: 7px 10px; border-radius: 999px; background: #edf4e9; color: var(--green); font-size: 11px; font-weight: 850; }
.status-pill.completed { background: #e9eee7; color: #596f60; }
.ticket-number-wrap { display: flex; flex-direction: column; gap: 7px; padding: 17px; border-radius: 15px; background: var(--green-soft); color: var(--green); }
.ticket-number-wrap span { font-size: 12px; }
.ticket-number-wrap strong { font-size: 39px; letter-spacing: .18em; }
.ticket-info { margin: 22px 0; text-align: left; }
.ticket-info div { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; font-size: 13px; }
.ticket-info span { color: var(--muted); }
.ticket-info strong { text-align: right; }
.ticket-guidance { margin: 18px 0; padding: 12px; border-radius: 10px; background: #f5f3e8; color: #59604f; font-size: 12px; line-height: 1.55; }
.pickup-confirm-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(20, 31, 21, .64); }
.pickup-confirm-dialog { position: fixed; z-index: 21; top: 50%; left: 50%; width: min(calc(100% - 32px), 410px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 26px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow); transform: translate(-50%, -50%); }
.pickup-confirm-dialog h2 { margin: 0 0 11px; font-size: 24px; }
.pickup-confirm-dialog > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.pickup-refund-warning { margin: 22px 0; padding: 18px; border: 2px solid #b54028; border-radius: 13px; background: #fff2ec; color: #922d1e; }
.pickup-refund-warning strong { display: block; font-size: 19px; line-height: 1.4; }
.pickup-refund-warning small { display: block; margin-top: 9px; color: #72483f; font-size: 12px; line-height: 1.5; }
.pickup-confirm-actions { display: grid; gap: 9px; }
.pickup-confirm-actions .outline-button { margin: 0; }
.outline-button { width: 100%; margin-bottom: 9px; padding: 14px 18px; border: 1px solid var(--green); border-radius: 12px; background: transparent; color: var(--green); font-size: 14px; font-weight: 850; cursor: pointer; }
.merchant-order { margin: 12px 0 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fcfbf5; }
.merchant-number-label { color: var(--muted); font-size: 12px; }
.merchant-number { display: block; margin: 7px 0 15px; color: var(--green); font-size: 44px; letter-spacing: .15em; }
.merchant-store { padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.merchant-items { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.merchant-item { display: flex; justify-content: space-between; gap: 15px; }
.merchant-panel > .primary-button { margin-top: auto; }

/* 가게 선택 → 해당 가게 메뉴로 이어지는 두 화면 */
.intro { position: relative; overflow: hidden; min-height: 292px; padding: 47px 52px; border: 1px solid rgba(95, 127, 97, .12); border-radius: 28px; background: repeating-linear-gradient(110deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 9px), linear-gradient(125deg, #f0f6ec 0%, #e8f1e3 48%, #d8e8d3 100%); box-shadow: 0 18px 45px rgba(45, 76, 49, .08), inset 0 1px rgba(255,255,255,.72); }
.intro::after { position: absolute; right: -115px; bottom: -205px; width: 560px; height: 470px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(169, 198, 157, .42) 0%, rgba(189, 212, 180, .2) 61%, transparent 72%); content: ""; transform: rotate(-18deg); }
.intro .eyebrow, .intro h1, .intro > p:last-of-type { position: relative; z-index: 2; }
.intro h1 { max-width: 550px; font-size: clamp(38px, 5vw, 59px); }
.intro h1 em { color: var(--green); }
.intro > p:last-of-type { max-width: 390px; margin: 20px 0 0; color: #466047; font-size: 15px; line-height: 1.7; }
.intro-decor { position: absolute; z-index: 1; right: 5px; bottom: -28px; width: min(41%, 410px); height: auto; filter: drop-shadow(0 22px 24px rgba(60, 72, 47, .15)); }
.pickup-section { margin-top: 46px; }
.pickup-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pickup-heading-line h2 { margin: 0; font-size: clamp(24px, 3vw, 35px); letter-spacing: -.07em; white-space: nowrap; }
.area-label { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 7px 11px; border-radius: 999px; background: #eef4ea; color: var(--green); font-size: 12px; }
.pickup-subrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 15px 0 19px; }
.pickup-section .section-desc { margin: 0; line-height: 1.3; }
.location-reset { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #cfdbcc; border-radius: 999px; background: #fffefa; color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; transition: background .18s, transform .18s, border-color .18s; }
.location-reset:hover { background: #edf4e9; border-color: #9fb99c; transform: translateY(-1px); }
.location-reset:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.reset-symbol { font-size: 17px; line-height: .65; font-weight: 600; }
.area-label.location-pulse { animation: location-pulse .45s ease-out; }
@keyframes location-pulse { 50% { background: #d4e6cf; box-shadow: 0 0 0 5px rgba(70, 121, 68, .1); } }
.store-search { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; padding: 0 15px; min-height: 50px; border: 1px solid #cbd8c8; border-radius: 13px; background: #fffefa; box-shadow: 0 4px 14px rgba(35, 51, 35, .035); }
.store-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(45, 81, 57, .12); }
.search-icon { position: relative; display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.search-icon::before { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border: 2px solid #6d806c; border-radius: 50%; content: ""; }
.search-icon::after { position: absolute; top: 13px; left: 12px; width: 7px; height: 2px; border-radius: 2px; background: #6d806c; content: ""; transform: rotate(45deg); transform-origin: left center; }
.store-search input { flex: 1; min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.store-search input::placeholder { color: #849183; }
.search-count { flex: 0 0 auto; color: var(--green); font-size: 12px; font-weight: 800; }
.search-empty { margin: 13px 0 0; padding: 17px; border-radius: 12px; background: #f5f4ed; color: var(--muted); font-size: 13px; }
.store-list { position: relative; grid-template-columns: 1fr; align-content: start; gap: 12px; }
.store-card { position: relative; display: block; min-height: 0; padding: 16px 18px 13px; border: 1px solid #d9e2d7; border-radius: 17px; background: linear-gradient(135deg, #fffefa, #fbfcf7); box-shadow: 0 8px 24px rgba(35, 51, 35, .045); }
.store-card-ghost { position: absolute; z-index: 2; margin: 0; pointer-events: none; }
.store-card:hover, .store-card:focus-visible { border-color: var(--green); box-shadow: 0 11px 30px rgba(35, 71, 42, .1); }
.store-card.selected { border: 1px solid var(--green); }
.store-card-main { display: flex; align-items: center; gap: 15px; }
.store-photo { display: block; flex: 0 0 98px; width: 98px; height: 78px; overflow: hidden; border-radius: 10px; background: #e6e9df; }
.store-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.store-card-details { display: block; min-width: 0; flex: 1; }
.store-card-identity { display: flex; align-items: baseline; min-width: 0; gap: 10px; padding-right: 105px; }
.store-rank { color: #91a88e; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.store-name { display: inline; margin: 0; font-size: 22px; }
.store-main-menu { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.store-main-menu strong { color: var(--ink); font-weight: 800; }
.store-distance { position: absolute; top: 16px; right: 18px; display: inline-block; padding: 5px 9px; border-radius: 999px; background: #eaf2e6; color: var(--green); font-size: 11px; font-weight: 800; }
.store-products-heading { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--green); font-size: 12px; font-weight: 850; }
.store-products-heading small { color: #8b9b86; font-size: 11px; font-weight: 500; }
.store-products-row { display: flex; gap: 6px; overflow-x: auto; margin-top: 6px; padding: 0 0 5px; color: #405a42; scrollbar-color: #c8d8c2 transparent; scrollbar-width: thin; }
.store-products-row > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 7px; background: #eff4eb; font-size: 12px; font-weight: 700; white-space: nowrap; }
.example-note { margin: 16px 0 0; color: #788373; font-size: 12px; line-height: 1.5; }
.menu-page { max-width: 850px; margin: 0 auto; padding-bottom: 110px; }
.menu-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0 17px; color: #80917f; font-size: 12px; font-weight: 750; }
.back-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 0; border: 0; background: transparent; color: var(--green); font-size: 14px; font-weight: 850; cursor: pointer; }
.back-button span { font-size: 20px; font-weight: 400; line-height: .8; }
.menu-store { overflow: hidden; border: 1px solid #e1e7db; border-radius: 24px; background: #fffefb; box-shadow: 0 16px 42px rgba(35, 51, 35, .065); }
.menu-cover { position: relative; height: 220px; overflow: hidden; background: #e5e8df; }
.menu-cover::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(13, 28, 17, .55)); content: ""; pointer-events: none; }
.menu-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.menu-cover-caption { position: absolute; z-index: 1; left: 25px; bottom: 18px; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.28); }
.menu-summary { padding: 23px 26px 25px; }
.menu-summary-badges { display: flex; align-items: center; gap: 8px; }
.menu-open, .menu-distance { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #eaf3e5; color: #396443; font-size: 11px; font-weight: 850; }
.menu-open i { width: 7px; height: 7px; border-radius: 50%; background: #62a36b; }
.menu-distance { background: #f2f2e9; color: #62715e; }
.menu-summary h1 { margin: 13px 0 5px; font-size: clamp(32px, 4vw, 43px); line-height: 1.16; }
.menu-store-lead { margin: 0 0 16px; color: #667463; font-size: 13px; }
.menu-info-line { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: #485a48; font-size: 12px; }
.menu-info-line > span:first-child { width: 16px; color: #698369; font-size: 16px; text-align: center; }
.store-map-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 15px; padding: 10px 14px; border: 1px solid #bdd4b8; border-radius: 10px; background: #f4f9f1; color: var(--green); font-size: 12px; font-weight: 850; text-decoration: none; }
.store-map-link:hover, .store-map-link:focus-visible { border-color: var(--green); background: #eaf4e5; }
.ticket-map-link { width: 100%; margin-top: 0; }
.menu-guide { display: flex; align-items: flex-start; gap: 12px; margin-top: 17px; padding: 17px 19px; border: 1px solid #e2e8d7; border-radius: 16px; background: #eff4e9; color: var(--green); }
.menu-guide-icon { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 13px; font-weight: 900; }
.menu-guide strong { display: block; font-size: 14px; }
.menu-guide p { margin: 4px 0 0; color: #5c705d; font-size: 12px; line-height: 1.45; }
.products-section { margin-top: 38px; }
.products-section .section-desc { margin: 9px 0 18px; font-size: 12px; line-height: 1.5; }
.count-label { padding: 6px 10px; border-radius: 999px; background: #e9f1e5; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 15px; padding: 2px 1px 8px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab { flex: 0 0 auto; padding: 9px 14px; border: 1px solid #d9e3d5; border-radius: 999px; background: #fffefa; color: #60715e; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.category-tab:hover { border-color: #adc5a8; transform: translateY(-1px); }
.category-tab.active { border-color: var(--green); background: var(--green); color: white; }
.product-list { grid-template-columns: 1fr; gap: 11px; }
.product-card { min-height: 132px; gap: 17px; padding: 16px; border-color: #e3e8de; border-radius: 17px; box-shadow: 0 5px 19px rgba(35, 51, 35, .028); }
.product-illustration { flex: 0 0 103px; width: 103px; height: 103px; overflow: hidden; border-radius: 14px; background: #f5f2e9; }
.product-card:nth-child(2n) .product-illustration { background: #edf2e8; }
.product-illustration svg { display: block; width: 91%; height: 91%; }
.product-info { min-width: 0; flex: 1; }
.product-name { margin-bottom: 5px; font-size: 18px; }
.product-meta { margin: 0 0 3px; line-height: 1.4; }
.product-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 10px; }
.product-price { margin: 0; font-size: 18px; white-space: nowrap; }
.product-price small { display: block; margin: 2px 0 0; }
.add-button { align-self: auto; flex: 0 0 auto; min-width: 69px; height: 34px; padding: 0 11px; border: 1px solid #c4d7c2; border-radius: 9px; background: #f2f8ee; color: var(--green); font-size: 12px; font-weight: 850; line-height: 1; }
.add-button:hover { background: #e3f0df; }
.product-quantity { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #bfd2bd; border-radius: 9px; background: #fffefa; }
.product-quantity button { width: 31px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--green); font-size: 18px; cursor: pointer; }
.product-quantity button:hover { background: #ecf4e9; }
.product-quantity strong { min-width: 24px; color: var(--ink); font-size: 13px; text-align: center; }
.menu-end { display: flex; align-items: center; gap: 11px; margin: 24px 0 0; padding: 17px; border: 1px dashed #c5d5be; border-radius: 14px; color: var(--green); }
.menu-end span { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e7f1e2; font-size: 14px; font-weight: 900; }
.menu-end p { margin: 0; color: #63755f; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .app-shell { padding: 0 19px; }
  .topbar { height: 70px; }
  .brand { font-size: 21px; }
  .top-actions { gap: 5px; }
  .my-order-button { padding: 7px 9px; font-size: 11px; }
  .demo-badge { padding: 7px 9px; font-size: 10px; }
  .hero { min-height: 410px; padding: 37px 24px; border-radius: 24px; }
  .hero::after { right: -115px; bottom: -235px; width: 430px; height: 430px; }
  .hero h1 { font-size: clamp(37px, 9vw, 52px); }
  .hero-copy { max-width: 260px; margin-top: 20px; font-size: 13px; }
  .hero-preview { max-width: 250px; margin-top: 15px; gap: 5px; }
  .hero-preview strong { padding: 6px 8px; font-size: 11px; }
  .hero-cta { margin-top: 12px; padding: 9px 12px; font-size: 12px; }
  .hero-art { top: 175px; right: -92px; transform: scale(.47); transform-origin: top right; }
  .intro { min-height: 226px; padding: 28px 23px; border-radius: 20px; }
  .intro::after { right: -145px; bottom: -175px; width: 370px; height: 355px; }
  .intro h1 { font-size: clamp(32px, 9vw, 42px); }
  .intro > p:last-of-type { max-width: 275px; margin-top: 13px; font-size: 12px; line-height: 1.6; text-shadow: 0 1px rgba(255,255,255,.55); }
  .intro-decor { right: -30px; bottom: -43px; width: 200px; opacity: .82; filter: drop-shadow(0 12px 16px rgba(60, 72, 47, .13)); }
  .pickup-section { margin-top: 34px; }
  .pickup-heading-line { gap: 5px; }
  .pickup-heading-line h2 { font-size: clamp(13px, 4.05vw, 20px); letter-spacing: -.08em; }
  .area-label { padding: 5px 7px; font-size: 10px; }
  .pickup-subrow { gap: 5px; margin: 12px 0 17px; }
  .pickup-section .section-desc { font-size: 11px; line-height: 1.3; }
  .location-reset { gap: 3px; padding: 6px 7px; font-size: 10px; }
  .reset-symbol { font-size: 15px; }
  .store-search { min-height: 45px; padding: 0 12px; }
  .store-search input { font-size: 13px; }
  .store-list { gap: 10px; }
  .store-card { padding: 12px 13px 10px; border-radius: 14px; }
  .store-card-main { gap: 11px; }
  .store-photo { flex-basis: 74px; width: 74px; height: 74px; border-radius: 9px; }
  .store-card-identity { gap: 6px; padding-right: 87px; }
  .store-name { font-size: 17px; }
  .store-distance { top: 12px; right: 13px; padding: 4px 6px; font-size: 10px; }
  .store-main-menu { margin-top: 3px; font-size: 11px; }
  .store-products-heading { margin-top: 9px; }
  .store-products-heading small { font-size: 10px; }
  .store-products-row > span { padding: 5px 7px; font-size: 11px; }
  .menu-page { padding-bottom: 100px; }
  .menu-navigation { margin: 0 0 12px; font-size: 10px; }
  .menu-store { border-radius: 18px; }
  .menu-cover { height: 160px; }
  .menu-cover-caption { left: 17px; bottom: 12px; font-size: 10px; }
  .menu-summary { padding: 18px 17px 20px; }
  .menu-summary h1 { font-size: 32px; }
  .menu-guide { margin-top: 12px; padding: 14px; }
  .products-section { margin-top: 31px; }
  .product-list { grid-template-columns: 1fr; gap: 9px; }
  .product-card { min-height: 109px; padding: 11px; gap: 11px; }
  .product-illustration { flex-basis: 78px; width: 78px; height: 78px; border-radius: 11px; }
  .product-name { font-size: 16px; }
  .product-meta { font-size: 10px; }
  .product-bottom { gap: 6px; margin-top: 6px; }
  .product-price { font-size: 16px; }
  .product-price small { font-size: 10px; }
  .add-button { min-width: 58px; height: 31px; padding: 0 7px; font-size: 11px; }
  .product-quantity button { width: 26px; height: 30px; }
  .product-quantity strong { min-width: 20px; font-size: 12px; }
  .how-section { margin: 60px 0; padding: 23px; }
  .steps { grid-template-columns: 1fr; margin-top: 20px; gap: 8px; }
  .steps div { padding: 15px; }
  .cart-fab { right: 19px; left: 19px; bottom: 15px; min-width: 0; }
  .page-footer { padding-bottom: 92px; }
  .checkout-panel, .merchant-panel { padding: 19px; }
  .checkout-block { padding: 17px; }
  .ticket-panel { padding: 29px 20px 21px; }
}

@media (max-width: 360px) {
  .pickup-section .section-desc { font-size: 10px; }
  .location-reset { padding: 5px 6px; font-size: 9px; }
  .store-card-identity { gap: 4px; padding-right: 80px; }
  .store-name { font-size: 16px; }
  .store-distance { font-size: 9px; }
  .product-illustration { flex-basis: 70px; width: 70px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Approved home, isolated from menu/cart/payment styles. */
#store-page{--paper: #f7f4eb; --white: #fffdf8; --ink: #20291e; --muted: #68705f; --green: #2d5139; --soft: #e7eee2; --line: #e3e1d6;}
#store-page *{box-sizing: border-box;}
#store-page{margin: 0px; background: var(--paper); color: var(--ink); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; letter-spacing: -0.035em;}
#store-page button,#store-page input{font: inherit;}
#store-page button{cursor: pointer; color: inherit;}
#store-page button:focus-visible,#store-page input:focus-visible{outline: 3px solid #be8751; outline-offset: 4px;}
#store-page button{touch-action: manipulation;}
#store-page svg{display: block;}

#store-page .home-top{height: 86px; display: flex; align-items: center; justify-content: space-between;}
#store-page .home-brand{display: flex; align-items: center; gap: 9px; font-size: 25px; font-weight: 800; color: var(--green); letter-spacing: -0.07em;}
#store-page .home-mark{display: grid; place-items: center; width: 31px; height: 34px; background: var(--green); color: var(--white); font-size: 18px; border-radius: 8px 8px 11px 11px; transform: rotate(-7deg);}
#store-page .home-order-link{border: 0px; background: none; display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 12px 0px 12px 12px; color: var(--green);}
#store-page .home-icon{width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
#store-page .home-banner{position: relative; overflow: hidden; background: rgb(231, 238, 224); border-radius: 12px; padding: 23px 25px; min-height: 151px;}
#store-page .home-banner p{margin: 0px 0px 8px; font-size: 12px; color: rgb(82, 112, 88);}
#store-page .home-banner h1{font-size: 29px; line-height: 1.25; letter-spacing: -0.065em; margin: 0px; position: relative; z-index: 1; font-weight: 800;}
#store-page .home-banner img{position: absolute; right: 15px; bottom: -10px; width: 195px; height: 165px; object-fit: contain; mix-blend-mode: multiply;}
#store-page .home-banner small{display: block; margin-top: 10px; font-size: 12px; color: rgb(82, 98, 78); position: relative; z-index: 1;}
#store-page .home-finder{padding-top: 30px;}
#store-page .home-section-heading{display: flex; justify-content: space-between; align-items: center; gap: 12px;}
#store-page h2{font-size: 20px; letter-spacing: -0.06em; margin: 0px; font-weight: 800;}
#store-page .home-quiet{font-size: 11px; color: var(--muted);}
#store-page .home-ingredients{display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin: 17px 0px 23px;}
#store-page .home-ingredient{border: 1px solid transparent; border-radius: 10px; background: none; padding: 8px 0px 9px; display: flex; align-items: center; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; transition: background .15s,border-color .15s;}
#store-page .home-ingredient svg{width: 63px; height: 63px;}
#store-page .home-ingredient svg>circle,#store-page .home-ingredient svg>ellipse{display: none;}
#store-page .home-ingredient:hover{background: rgb(238, 238, 227);}
#store-page .home-ingredient[aria-pressed=true]{background: var(--soft); border-color: rgb(109, 139, 113); color: var(--green);}
#store-page .home-search{display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid rgb(217, 221, 208); border-radius: 9px; padding: 0px 14px; min-height: 50px; color: var(--muted);}
#store-page .home-search input{border: 0px; background: transparent; min-width: 0px; flex: 1 1 0%; outline: none; font-size: 14px; color: var(--ink); height: 48px;}
#store-page .home-search input::placeholder{color: rgb(131, 135, 120);}
#store-page .home-search:focus-within{border-color: var(--green);}
#store-page .home-clear{background: none; border: 0px; width: 32px; height: 36px; font-size: 20px; color: var(--muted);}
#store-page [hidden]{display: none !important;}
#store-page .home-stores{margin-top: 34px;}
#store-page .home-store-heading{display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#store-page .home-store-heading h2 span{font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 7px;}
#store-page .home-location{border: 0px; background: none; padding: 10px 0px 10px 8px; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);}
#store-page .home-location .home-icon{width: 15px; height: 15px;}
#store-page .home-filter-info{font-size: 12px; color: var(--green); margin: 8px 0px 0px;}
#store-page .home-store-list{margin-top: 7px;}
#store-page .home-store{width: 100%; display: flex; gap: 18px; align-items: center; text-align: left; background: none; border-top: 0px; border-right: 0px; border-bottom: 1px solid var(--line); border-left: 0px; border-image: none; padding: 22px 0px;}
#store-page .home-store:hover .home-name{text-decoration: underline; text-underline-offset: 4px;}
#store-page .home-photo{height: 99px; width: 113px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--soft);}
#store-page .home-store-copy{flex: 1 1 0%; min-width: 0px;}
#store-page .home-status{font-size: 11px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 5px; margin-bottom: 6px;}
#store-page .home-dot{width: 5px; height: 5px; border-radius: 50%; background: var(--green);}
#store-page .home-closed .home-status{color: rgb(129, 135, 121);}
#store-page .home-closed .home-dot{background: rgb(149, 155, 141);}
#store-page .home-name{font-size: 18px; font-weight: 750; letter-spacing: -0.055em;}
#store-page .home-address{color: var(--muted); font-size: 12px; margin: 6px 0px 0px;}
#store-page .home-products{font-size: 12px; margin: 9px 0px 0px; line-height: 1.6; color: rgb(71, 84, 67);}
#store-page .home-products mark{background: rgb(224, 234, 216); color: var(--green); padding: 1px 3px; border-radius: 3px; font-weight: 700;}
#store-page .home-chevron{color: rgb(151, 162, 143); flex-shrink: 0; width: 16px; height: 16px;}
#store-page .home-empty{padding: 40px 12px; text-align: center; color: var(--muted); line-height: 1.8; font-size: 14px;}
#store-page .home-reset{display: block; background: var(--green); border: 0px; color: white; border-radius: 7px; padding: 11px 17px; margin: 16px auto 0px;}
#store-page .home-how{margin: 38px 0px 0px; padding: 25px 0px 29px; border-top: 2px solid var(--green);}
#store-page .home-how h2{font-size: 18px;}
#store-page .home-steps{list-style: none; padding: 0px; margin: 20px 0px 0px; display: grid; gap: 17px;}
#store-page .home-steps li{display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.6;}
#store-page .home-step{font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 1px solid rgb(197, 208, 191); color: var(--green); width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0;}
#store-page .home-steps strong{font-weight: 650;}
#store-page .home-steps small{display: block; color: var(--muted); font-size: 12px; margin-top: 2px;}

#store-page footer .home-foot{padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 15px;}
#store-page dialog{border: 1px solid var(--line); border-radius: 14px; padding: 25px; max-width: 360px; width: calc(100% - 40px); background: var(--white); color: var(--ink);}
#store-page dialog::backdrop{background: rgba(32, 41, 30, 0.4);}
#store-page dialog h2{font-size: 20px;}
#store-page dialog p{font-size: 14px; line-height: 1.8; color: var(--muted);}
#store-page dialog button{width: 100%; padding: 12px; border: 0px; border-radius: 7px; background: var(--green); color: white;}
#store-page .home-review-label{font-size: 10px; letter-spacing: 0px; color: rgb(125, 134, 115); white-space: nowrap;}
#store-page .home-desktop-note{display: inline;}
@media (min-width:650px){#store-page .home-steps{grid-template-columns: 1fr 1fr 1.35fr; gap: 22px;}
#store-page .home-steps li{font-size: 12px;}
#store-page .home-steps small{font-size: 11px;}}
@media (max-width:480px){
#store-page .home-top{height: 70px;}
#store-page .home-brand{font-size: 23px;}
#store-page .home-banner{min-height: 141px; padding: 20px 18px;}
#store-page .home-banner h1{font-size: 25px;}
#store-page .home-banner p{font-size: 11px;}
#store-page .home-banner img{right: -10px; width: 151px; height: 130px; bottom: -8px;}
#store-page .home-banner small{font-size: 10px; max-width: 180px; line-height: 1.55;}
#store-page .home-finder{padding-top: 26px;}
#store-page h2{font-size: 19px;}
#store-page .home-ingredients{gap: 3px; margin: 13px 0px 19px;}
#store-page .home-ingredient{font-size: 12px; gap: 5px; padding-block: 7px;}
#store-page .home-ingredient svg{width: 49px; height: 49px;}
#store-page .home-quiet{font-size: 10px;}
#store-page .home-search{min-height: 48px; padding-inline: 11px;}
#store-page .home-search input{font-size: 13px; height: 46px;}
#store-page .home-stores{margin-top: 26px;}
#store-page .home-store{gap: 13px; padding: 19px 0px;}
#store-page .home-photo{width: 84px; height: 88px;}
#store-page .home-name{font-size: 17px;}
#store-page .home-address,#store-page .home-products{font-size: 11px;}
#store-page .home-products{margin-top: 7px;}
#store-page .home-location{font-size: 11px;}
#store-page .home-status{font-size: 10px;}
#store-page .home-chevron{width: 12px;}
#store-page .home-how{margin-top: 28px;}
#store-page .home-desktop-note{display: none;}}
@media (prefers-reduced-motion:reduce){#store-page *{transition: none !important;}}
#store-page .home-store{display: block;}
#store-page .home-store-open{display: flex; align-items: center; gap: 18px; width: 100%; padding: 0px; border: 0px; text-align: left; background: none;}
#store-page .home-products{display: flex; gap: 7px; white-space: nowrap; overflow-x: auto; max-width: 100%; padding: 5px 0px 8px; margin: 8px 34px 0px 131px; scrollbar-width: thin; scrollbar-color: #b8c6ae transparent; overscroll-behavior-x: contain; letter-spacing: -0.025em;}
#store-page .home-products::-webkit-scrollbar{height: 3px;}
#store-page .home-products::-webkit-scrollbar-thumb{background: rgb(184, 198, 174); border-radius: 4px;}
#store-page .home-products span,#store-page .home-products mark{flex: 0 0 auto;}
#store-page .home-products span:not(:last-child)::after{content: "·"; margin-left: 7px; color: rgb(180, 187, 169);}
#store-page .home-products mark{padding: 2px 6px; border-radius: 4px;}
#store-page .home-photo{height: 82px;}
#store-page .home-how{padding: 30px 0px 22px;}
#store-page .home-how h2{font-size: 21px;}
#store-page .home-steps{display: flex; flex-direction: column; gap: 0px; margin-top: 27px; max-width: 540px;}
#store-page .home-steps li{position: relative; display: grid; grid-template-columns: 66px 1fr; gap: 22px; align-items: center; padding: 0px 0px 32px; min-height: 108px; font-size: 16px;}
#store-page .home-steps li:last-child{padding-bottom: 0px; min-height: 76px;}
#store-page .home-steps li:not(:last-child)::after{content: ""; position: absolute; top: 67px; bottom: 0px; left: 32px; width: 1px; background: rgb(203, 214, 195);}
#store-page .home-pictogram{position: relative; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgb(217, 226, 209); border-radius: 19px; background: rgb(237, 241, 230); color: var(--green);}
#store-page .home-pictogram svg{width: 39px; height: 39px; fill: none; stroke: currentcolor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
#store-page .home-step-label{display: block; font-size: 10px; letter-spacing: 0.12em; font-weight: 700; color: rgb(115, 133, 107); margin-bottom: 5px;}
#store-page .home-steps strong{display: block; font-size: 16px; font-weight: 750; line-height: 1.5; letter-spacing: -0.045em;}
#store-page .home-steps small{font-size: 12px; line-height: 1.7; margin-top: 5px;}
#store-page .home-steps li:last-child .home-pictogram{background: var(--green); border-color: var(--green); color: rgb(255, 253, 248);}
@media (max-width:480px){#store-page .home-store-open{gap: 13px;}
#store-page .home-photo{height: 76px;}
#store-page .home-products{margin-left: 97px; margin-right: 15px; font-size: 11px;}
#store-page .home-how h2{font-size: 19px;}
#store-page .home-steps li{grid-template-columns: 57px 1fr; gap: 17px; min-height: 110px; padding-bottom: 28px;}
#store-page .home-pictogram{width: 57px; height: 57px; border-radius: 16px;}
#store-page .home-pictogram svg{width: 34px; height: 34px;}
#store-page .home-steps li:not(:last-child)::after{left: 28px; top: 60px;}
#store-page .home-steps strong{font-size: 14px;}
#store-page .home-steps small{font-size: 11px;}
#store-page .home-step-label{font-size: 9px;}}
#store-page .home-banner small{white-space: nowrap; max-width: none;}
#store-page .home-store-list{display:block;position:static}
body.home-view .app-shell{max-width:780px;padding:0 28px}
body.home-view .topbar{height:86px}
body.home-view .brand{color:var(--green);font-size:25px;font-weight:800}
body.home-view .brand-mark{width:31px;height:34px;border-radius:8px 8px 11px 11px;transform:rotate(-7deg)}
body.home-view .demo-badge{display:none}
body.home-view .my-order-button{border:0;background:none;font-size:13px;padding:12px 0 12px 12px;font-weight:500}
body.home-view .page-footer{font-size:11px;line-height:1.9;padding-bottom:29px}
@media(max-width:480px){body.home-view .app-shell{padding:0 20px}body.home-view .topbar{height:70px}body.home-view .brand{font-size:23px}}