:root {
  --green: #075844;
  --green-2: #00765a;
  --mint: #d8f6e8;
  --ink: #092238;
  --muted: #777d85;
  --line: #e4e7e8;
  --surface: #f6f7f7;
  --shadow: 0 8px 24px rgba(20, 39, 36, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #edecea;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 48px rgba(12, 36, 31, .13);
  overflow: hidden;
}

.topbar {
  height: 90px;
  padding: 21px 20px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.96);
}
.brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; margin-right: auto; }
.brand-bag { position: relative; color: var(--green); }
.brand-bag svg { width: 45px; height: 45px; stroke-width: 1.75; fill: var(--green); color: white; }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; white-space: nowrap; }
.brand-copy strong { color: var(--green); font: 600 24px/1 "Playfair Display", serif; }
.brand-copy strong span { font-weight: 700; }
.brand-copy small { color: var(--green); font-size: 11px; margin: 6px 0 0 30px; }
.location { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; cursor: pointer; }
.location > svg:first-child { color: var(--green); fill: var(--green); width: 24px; }
.location span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; white-space: nowrap; }
.location small { font-size: 11px; font-weight: 500; }
.location strong { font-size: 12px; }
.location .chevron { width: 14px; }
.icon-button, .avatar { border: 0; background: none; padding: 0; cursor: pointer; }
.notification-button { position: relative; margin-left: 2px; }
.notification-button svg { width: 27px; height: 27px; stroke-width: 1.8; }
.notification-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; background: #ff2438; border: 2px solid white; border-radius: 50%; }
.avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #ddd; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

main { padding: 0 20px 92px; }
.search {
  height: 51px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 15px;
  border: 1px solid #dfe4e7;
  border-radius: 26px;
  background: white;
  box-shadow: 0 6px 16px rgba(31,43,45,.11);
}
.search > svg { width: 25px; height: 25px; stroke-width: 2; }
.search input { min-width: 0; flex: 1; border: 0; outline: none; color: var(--ink); font-size: 16px; }
.search input::placeholder { color: #94979d; }
.search button { border: 0; background: none; color: var(--green); display: grid; place-items: center; padding: 0; cursor: pointer; }
.search button svg { width: 25px; height: 25px; stroke-width: 2.2; }

.tour-tip { height: 54px; display: flex; align-items: center; justify-content: center; color: var(--green); gap: 5px; position: relative; }
.tour-tip > svg { width: 42px; height: 42px; transform: rotate(25deg); margin-top: 15px; }
.tour-tip span { background: var(--mint); border-radius: 12px; padding: 10px 20px; font-weight: 600; font-size: 14px; }
.tour-tip button { border: 0; background: none; color: var(--green); cursor: pointer; padding: 4px; opacity: 0; transition: opacity .2s; }
.tour-tip:hover button { opacity: 1; }
.tour-tip button svg { width: 15px; }

.section { margin-top: 8px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title h2 { font-size: 20px; line-height: 1; margin: 0; letter-spacing: -.35px; }
.section-title button { display: flex; align-items: center; gap: 3px; border: 0; background: none; padding: 5px 0; color: var(--green); font-weight: 600; font-size: 12px; cursor: pointer; }
.section-title button svg { width: 15px; height: 15px; }

.category-list, .shop-list, .product-list { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.category-list::-webkit-scrollbar, .shop-list::-webkit-scrollbar, .product-list::-webkit-scrollbar { display: none; }
.category-list { gap: 11px; margin: 0 -20px; padding: 0 20px 8px; }
.category-card { width: 58px; flex: 0 0 58px; border: 0; background: none; padding: 0; cursor: pointer; scroll-snap-align: start; }
.category-icon { width: 53px; height: 53px; margin: 0 auto 5px; display: grid; place-items: center; border-radius: 50%; background: #f2f3f3; transition: .2s; }
.category-icon img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(15, 55, 43, .16)); transition: transform .2s ease; }
.category-card:nth-child(8) .category-icon img { width: 43px; height: 34px; }
.category-card span { display: block; font-size: 11px; white-space: nowrap; text-align: center; }
.category-card.active .category-icon { background: #e0faeb; border: 2px solid #00ca6b; box-shadow: 0 0 0 5px #edfff5; }
.category-card:hover .category-icon img { transform: translateY(-3px) scale(1.07); }

.hero { margin-top: 12px; }
.hero-slides { height: 235px; border-radius: 14px; overflow: hidden; position: relative; background: #d9d6cd; }
.hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .55s ease; transform: scale(1.03); background-image: linear-gradient(90deg, rgba(247,246,238,.96) 0%, rgba(246,244,232,.8) 37%, rgba(255,255,255,0) 65%), var(--hero-image); background-position: center; background-size: cover; }
.hero-slide:nth-child(2) { background-image: linear-gradient(90deg, rgba(2,34,27,.78), rgba(3,38,29,.15)), var(--hero-image); }
.hero-slide.active { opacity: 1; pointer-events: auto; transform: scale(1); }
.hero-copy { position: absolute; left: 38px; top: 33px; z-index: 1; }
.hero-copy h1 { margin: 0; color: #121614; font: 600 35px/1.02 "Playfair Display", serif; letter-spacing: -1.2px; }
.hero-copy p { color: #164b3e; margin: 8px 0 17px; font-size: 16px; }
.hero-copy button { display: flex; align-items: center; gap: 7px; border: 0; border-radius: 26px; background: var(--green-2); color: white; padding: 12px 22px; font-weight: 600; cursor: pointer; box-shadow: 0 5px 12px rgba(0,74,55,.19); }
.hero-copy button svg { width: 17px; }
.hero-copy.light h1, .hero-copy.light p { color: white; text-shadow: 0 1px 5px rgba(0,0,0,.25); }
.hero-note { position: absolute; right: 20px; bottom: 27px; color: white; text-align: center; font: italic 18px/1.15 "Playfair Display", serif; transform: rotate(-7deg); text-shadow: 0 2px 5px #25342e; }
.hero-dots { height: 31px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d7dadd; cursor: pointer; transition: .2s; }
.hero-dots button.active { background: var(--green-2); transform: scale(1.12); }

.products-section { margin-top: 0; }
.product-list { gap: 8px; margin: 0 -20px; padding: 0 20px 11px; }
.product-card { flex: 0 0 144px; min-height: 308px; scroll-snap-align: start; border: 1px solid #e3e7e8; border-radius: 10px; background: white; overflow: hidden; box-shadow: 0 5px 13px rgba(24,41,45,.08); position: relative; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(24,41,45,.13); }
.product-image { height: 143px; position: relative; background: linear-gradient(145deg,#fafafa,#f2f3f2); display: grid; place-items: center; overflow: hidden; }
.product-image > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.favorite { position: absolute; top: 7px; right: 7px; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.72); border-radius: 50%; cursor: pointer; color: #6e7880; }
.favorite svg { width: 17px; }
.favorite.active { color: #e33451; }
.favorite.active svg { fill: currentColor; }
.new-pill { position: absolute; top: 7px; left: 7px; z-index: 2; padding: 3px 10px; border-radius: 13px; background: var(--green-2); color: white; font-size: 10px; font-weight: 700; }
.image-pips { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.image-pips i { width: 6px; height: 6px; border-radius: 50%; background: #c9cccf; }
.image-pips i:first-child { background: var(--green-2); }
.product-body { padding: 7px 8px 8px; }
.product-name { min-height: 34px; margin: 0; color: #182532; font-size: 12px; line-height: 1.3; font-weight: 500; }
.price { margin: 5px 0 3px; color: #0f151b; font-weight: 700; font-size: 14px; }
.rating { display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 9px; color: #697078; }
.stars { color: #ffad00; letter-spacing: -2px; font-size: 12px; }
.store { border-top: 1px solid #eef0f0; margin-top: 7px; padding-top: 7px; display: flex; align-items: center; gap: 6px; font-size: 9px; white-space: nowrap; overflow: hidden; }
.store-logo { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: #111; color: white; display: grid; place-items: center; font-weight: 700; font-size: 8px; }
.store-logo.red { background: #e01821; font-family: cursive; }

.shops-section { margin-top: 12px; }
.shop-list { gap: 15px; margin: 0 -20px; padding: 0 20px 14px; }
.shop-card { flex: 0 0 70px; scroll-snap-align: start; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.shop-logo { width: 62px; height: 62px; margin: 0 auto 5px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: white; border: 1px solid #dfe3e3; box-shadow: 0 3px 8px rgba(24,41,45,.05); color: #111; font-weight: 700; font-family: Arial, sans-serif; }
.shop-logo.dark { color: white; background: #050505; }
.shop-logo.red { color: white; background: #df171f; font-family: cursive; font-size: 13px; }
.shop-logo strong { font-size: 15px; letter-spacing: -1px; }
.shop-card > strong { display: block; font-size: 10px; white-space: nowrap; }
.shop-card small { display: block; color: #68717a; font-size: 8px; white-space: nowrap; margin-top: 2px; }
.arrivals-section { margin-top: 10px; }
.arrivals-section .product-card { min-height: 245px; }

.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 760px); height: 80px; padding: 9px 15px 11px; display: flex; justify-content: space-around; align-items: center; background: rgba(255,255,255,.97); border-top: 1px solid #e8ebeb; box-shadow: 0 -5px 18px rgba(11,35,31,.07); backdrop-filter: blur(12px); }
.bottom-nav button { min-width: 54px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #4e5155; font-size: 12px; cursor: pointer; padding: 2px 5px; }
.bottom-nav svg { width: 26px; height: 26px; stroke-width: 1.9; }
.bottom-nav button.active { color: var(--green); font-weight: 700; }
.bottom-nav button.active svg { fill: var(--green); color: var(--green); }
.nav-icon-wrap { position: relative; line-height: 0; }
.nav-icon-wrap b { display: none; position: absolute; right: -9px; top: -7px; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border-radius: 9px; background: #e33451; border: 2px solid white; color: white; font: 700 9px/12px Arial; }
.nav-icon-wrap b.show { display: grid; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 98px; transform: translate(-50%, 20px); background: #102b25; color: white; padding: 10px 17px; border-radius: 22px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal { width: min(92vw, 430px); border: 0; border-radius: 20px; padding: 28px; color: var(--ink); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
.modal::backdrop { background: rgba(7,24,20,.52); backdrop-filter: blur(4px); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f3f3; cursor: pointer; display: grid; place-items: center; }
.modal-close svg { width: 18px; }
.modal h2 { margin: 5px 35px 9px 0; font-size: 23px; }
.modal p { color: #687078; font-size: 14px; line-height: 1.5; }
.modal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.modal-grid button { border: 1px solid var(--line); border-radius: 12px; background: #f8f9f9; padding: 14px 6px; cursor: pointer; }
.modal-category-icon { width: 46px; height: 46px; object-fit: contain; margin-bottom: 5px; filter: drop-shadow(0 3px 3px rgba(15, 55, 43, .13)); }
.modal-product { text-align: center; }
.modal-product img { width: 180px; height: 180px; object-fit: contain; }
.modal-product .price { font-size: 20px; }
.primary-action { width: 100%; border: 0; border-radius: 25px; background: var(--green); color: white; padding: 13px; font-weight: 700; cursor: pointer; margin-top: 10px; }

.profile-summary { display: flex; align-items: center; gap: 13px; padding: 2px 0 18px; border-bottom: 1px solid var(--line); }
.profile-summary img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.profile-summary h2 { margin: 0 0 4px; font-size: 20px; }
.profile-summary p { margin: 0; font-size: 12px; }
.settings-heading { display: flex; gap: 11px; align-items: center; margin: 20px 0 12px; }
.settings-heading > span { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; background: var(--mint); color: var(--green); }
.settings-heading svg { width: 21px; }
.settings-heading h3 { margin: 0 0 3px; font-size: 16px; }
.settings-heading p { margin: 0; font-size: 11px; }
.theme-options { display: grid; gap: 10px; }
.theme-option { width: 100%; display: grid; grid-template-columns: 76px 1fr 22px; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fafbfb; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.theme-option:hover { transform: translateY(-1px); }
.theme-option.selected { border: 2px solid var(--green-2); padding: 9px; background: #f2fbf7; }
.theme-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.theme-option strong { font-size: 13px; }
.theme-option small { color: var(--muted); font-size: 10px; }
.theme-check { width: 20px; color: #aeb5b6; }
.theme-option.selected .theme-check { color: var(--green-2); fill: var(--mint); }
.theme-preview { position: relative; width: 76px; height: 53px; overflow: hidden; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 9px 6px 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-preview::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 3px; border-radius: 3px; background: currentColor; opacity: .65; }
.theme-preview i { height: 22px; margin-top: 7px; border-radius: 4px; background: rgba(255,255,255,.68); }
.theme-preview b { position: absolute; left: 8px; bottom: 5px; width: 30px; height: 4px; border-radius: 3px; background: currentColor; }
.classic-preview { color: var(--green); background: #f1f5f2; }
.aurora-preview { color: #f47b00; background: linear-gradient(135deg, #34313b, #25463d); }
.aurora-preview i { background: rgba(195, 209, 173, .25); border: 1px solid rgba(255,255,255,.2); }
.settings-row { width: 100%; display: grid; grid-template-columns: 37px 1fr 20px; gap: 10px; align-items: center; margin-top: 10px; padding: 11px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.settings-row > svg:first-child { padding: 8px; width: 37px; height: 37px; border-radius: 11px; background: var(--surface); color: var(--green); }
.settings-row > svg:last-child { width: 17px; color: var(--muted); }
.settings-row span { display: flex; flex-direction: column; gap: 2px; }
.settings-row strong { font-size: 12px; }
.settings-row small { color: var(--muted); font-size: 10px; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 4px; }
.auth-actions button, .account-button { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px; color: var(--green); font-weight: 700; cursor: pointer; }
.account-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; }
.account-button svg { width: 17px; }
.auth-mark { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; background: var(--green); color: white; }
.auth-mark svg { width: 29px; height: 29px; }
.auth-panel { text-align: center; }
.auth-panel h2 { margin: 0 0 7px; }
.auth-panel > p { margin: 0 0 18px; }
.auth-panel form { display: grid; gap: 12px; text-align: left; }
.auth-panel label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; }
.auth-panel input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: 0; padding: 12px 13px; }
.auth-panel input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px var(--mint); }
.auth-switch { border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 700; cursor: pointer; }
.form-error { min-height: 18px; margin: 0 !important; color: #df314e !important; text-align: center; }
.cart-box { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cart-box p { display: flex; justify-content: space-between; margin: 8px 0; }
.order-list { margin-top: 15px; }
.order-row { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.order-row span { display: flex; flex-direction: column; gap: 3px; }
.order-row span:last-child { text-align: right; }
.order-row small { color: var(--muted); font-size: 10px; }

/* Dark glass theme inspired by the supplied olive and orange furniture UI. */
body[data-theme="aurora"] {
  --green: #f47b00;
  --green-2: #e66f00;
  --mint: rgba(244, 123, 0, .16);
  --ink: #f7f4ed;
  --muted: #c3c5bd;
  --line: rgba(255,255,255,.14);
  --surface: rgba(255,255,255,.08);
  --shadow: 0 10px 32px rgba(0,0,0,.28);
  background: radial-gradient(circle at 12% 70%, #176a5e 0, transparent 34%), radial-gradient(circle at 74% 5%, #556040 0, transparent 31%), #302e3b;
}
body[data-theme="aurora"] .app-shell {
  position: relative;
  background: radial-gradient(circle at 89% 8%, rgba(115,125,70,.42), transparent 28%), radial-gradient(circle at 4% 58%, rgba(14,100,89,.5), transparent 37%), linear-gradient(145deg, #35313b 0%, #243d36 48%, #31313a 100%);
  box-shadow: 0 0 60px rgba(0,0,0,.4);
}
body[data-theme="aurora"] .app-shell::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(110deg, rgba(244,123,0,.04), transparent 30%, rgba(106,158,126,.08)); }
body[data-theme="aurora"] .topbar,
body[data-theme="aurora"] main,
body[data-theme="aurora"] .bottom-nav { position: relative; z-index: 1; }
body[data-theme="aurora"] .topbar { background: transparent; }
body[data-theme="aurora"] .brand-copy strong,
body[data-theme="aurora"] .brand-copy small { color: #fff; }
body[data-theme="aurora"] .brand-bag { color: var(--green); }
body[data-theme="aurora"] .brand-bag svg { fill: var(--green); color: white; }
body[data-theme="aurora"] .location > svg:first-child { color: var(--green); fill: var(--green); }
body[data-theme="aurora"] .search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.14); backdrop-filter: blur(14px); }
body[data-theme="aurora"] .search input { color: white; }
body[data-theme="aurora"] .search input::placeholder { color: #d0d1cb; }
body[data-theme="aurora"] .tour-tip span { color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
body[data-theme="aurora"] .category-icon { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.13); }
body[data-theme="aurora"] .category-card.active .category-icon { background: rgba(244,123,0,.15); border-color: var(--green); box-shadow: 0 0 0 5px rgba(244,123,0,.1), inset 0 1px rgba(255,255,255,.16); }
body[data-theme="aurora"] .hero-slides { border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
body[data-theme="aurora"] .hero-copy button,
body[data-theme="aurora"] .primary-action { background: linear-gradient(#fa8508, #ce5e00); border: 1px solid rgba(255,180,80,.45); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 6px 15px rgba(120,50,0,.3); }
body[data-theme="aurora"] .hero-dots button { background: rgba(255,255,255,.25); }
body[data-theme="aurora"] .hero-dots button.active { background: var(--green); }
body[data-theme="aurora"] .product-card { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 21px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
body[data-theme="aurora"] .product-image { background: linear-gradient(145deg, rgba(229,218,190,.82), rgba(137,151,117,.65)); }
body[data-theme="aurora"] .product-name,
body[data-theme="aurora"] .price { color: white; }
body[data-theme="aurora"] .favorite { background: rgba(43,48,44,.55); color: white; }
body[data-theme="aurora"] .favorite.active { color: #ff8b16; }
body[data-theme="aurora"] .store { border-color: rgba(255,255,255,.12); }
body[data-theme="aurora"] .shop-logo { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.28); }
body[data-theme="aurora"] .bottom-nav { background: rgba(105,112,93,.55); border: 1px solid rgba(255,255,255,.19); border-bottom: 0; box-shadow: inset 0 1px rgba(255,255,255,.13), 0 -7px 24px rgba(0,0,0,.2); backdrop-filter: blur(20px); }
body[data-theme="aurora"] .bottom-nav button { color: #d5d6d1; }
body[data-theme="aurora"] .bottom-nav button.active { color: white; background: rgba(255,255,255,.12); border-radius: 18px; padding: 6px 10px; }
body[data-theme="aurora"] .bottom-nav button.active svg { fill: white; color: white; }
body[data-theme="aurora"] .modal { background: linear-gradient(145deg, rgba(68,68,61,.98), rgba(37,57,52,.98)); border: 1px solid rgba(255,255,255,.17); color: white; }
body[data-theme="aurora"] .modal::backdrop { background: rgba(12,20,19,.72); }
body[data-theme="aurora"] .modal-close,
body[data-theme="aurora"] .theme-option { background: rgba(255,255,255,.08); color: white; }
body[data-theme="aurora"] .theme-option.selected { border-color: var(--green); background: rgba(244,123,0,.12); }
body[data-theme="aurora"] .theme-option.selected .theme-check { color: #ff8b16; fill: rgba(244,123,0,.16); }
body[data-theme="aurora"] .modal-grid button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: white; }
body[data-theme="aurora"] .auth-actions button,
body[data-theme="aurora"] .account-button,
body[data-theme="aurora"] .auth-panel input,
body[data-theme="aurora"] .cart-box { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: white; }
body[data-theme="aurora"] .toast { background: #e96f00; }

@media (max-width: 590px) {
  .app-shell { width: 100%; box-shadow: none; }
  .topbar { height: 82px; padding: 16px 14px 8px; gap: 8px; }
  main { padding-left: 14px; padding-right: 14px; }
  .brand-copy strong { font-size: 20px; }
  .brand-copy small { margin-left: 25px; font-size: 9px; }
  .brand-bag svg { width: 39px; height: 39px; }
  .location { margin-left: auto; }
  .location > svg:first-child { width: 20px; }
  .location small { font-size: 9px; }
  .location strong { font-size: 10px; }
  .avatar { width: 39px; height: 39px; }
  .notification-button svg { width: 24px; }
  .category-list, .shop-list, .product-list { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .hero-slides { height: 207px; }
  .hero-copy { left: 24px; top: 27px; }
  .hero-copy h1 { font-size: 29px; }
  .hero-copy p { font-size: 13px; }
  .hero-note { font-size: 14px; right: 13px; }
}

@media (max-width: 410px) {
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { display: none; }
  .location span { display: none; }
  .location .chevron { display: none; }
  .tour-tip span { font-size: 12px; padding: 9px 12px; }
  .tour-tip > svg { width: 32px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-copy button { padding: 10px 15px; font-size: 12px; }
}