.store-screen { background:#fff; }
.store-layout { display:grid; grid-template-columns:80px 160px minmax(0,1fr); align-items:start; min-height:100dvh; }
.store-primary { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px 8px; overflow-y:auto; background:#f1f3f2; border-right:1px solid #dfe5e1; }
.store-brand { display:grid; place-items:center; width:48px; min-height:56px; overflow-wrap:anywhere; font-size:13px; color:var(--primary); }
.store-brand img { max-width:44px; height:46px; object-fit:contain; transition:filter 200ms ease; }
.store-brand:hover img { filter:brightness(0) saturate(100%) invert(27%) sepia(50%) saturate(600%) hue-rotate(110deg) brightness(85%); }
.store-primary > a:not(.store-brand) { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#69746e; font-size:12px; border-radius:6px; }
.store-primary .store-search { width:44px; height:44px; min-height:44px; border-radius:50% !important; background:#fff; flex-shrink:0; }
.store-all { width:100%; min-height:68px; padding:10px 2px; }
.store-chat,.store-member,.store-knowledge { width:100%; min-height:68px; padding:10px 2px; }
.store-primary .store-chat[aria-current=page],.store-primary .store-member[aria-current=page],.store-primary .store-knowledge[aria-current=page] { background:#fff; color:var(--primary); font-weight:600; }
.store-primary > a.store-all { background:#fff; color:var(--primary); font-weight:600; }
.store-primary > a.store-all-inactive { background:transparent; color:#69746e; font-weight:400; }
.store-actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:auto; padding-top:24px; width:100%; flex-shrink:0; }
.store-actions a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; min-height:48px; font-size:12px; color:#657169; border-radius:6px; }
.store-actions .snav-badge { top:calc(50% - 22px); left:calc(50% + 5px); right:auto; }
[data-store-icon] { display:flex; }
.store-secondary { position:sticky; top:0; height:100dvh; overflow-y:auto; min-width:0; padding:26px 10px 24px; border-right:1px solid #dfe5e1; background:#edf4f0; }
.store-secondary h2 { margin:0 10px 24px; font-size:15px; font-weight:600; }
.store-secondary nav { display:flex; flex-direction:column; gap:5px; }
.store-secondary a { display:flex; align-items:center; gap:6px; padding:12px 10px; border-radius:6px; font-size:14px; color:#4e6155; overflow-wrap:anywhere; transition:background-color 180ms ease; }
.store-secondary a[aria-current] { background:#d9e9df; color:var(--primary-dark); font-weight:600; }
.store-category-icon { flex-shrink:0; font-size:17px; }
.store-nav-state { padding:12px 6px; font-size:12px; color:#7c887f; }
.store-content { min-width:0; background:#f8faf8; }
.store-screen .page { max-width:none; margin:0; background:transparent; }
.store-screen .bottom-price-bar { left:240px; }
.store-screen .bottom-price-bar .inner { max-width:none; }
.store-screen .cart-item .foot { flex-wrap:wrap; gap:8px; }
.store-screen .cart-item .name,.store-screen .cart-item .sum,.store-screen .kv { overflow-wrap:anywhere; }
.store-screen .kv { gap:12px; }
.store-screen .kv > span { min-width:0; }
.store-screen .kv > span:last-child { text-align:right; }
.store-screen .card { border-radius:8px; }
.store-auth .page { padding-inline:24px; }
.store-auth .form-card { border-radius:8px; }
.store-auth .topbar { margin-inline:-24px; }
.store-actions a[aria-current=page] { background:#fff; color:var(--primary); }
@media (min-width:1000px) {
  .store-screen .tabbar { display:none; }
  .store-screen .bottom-price-bar { bottom:0 !important; }
}
.detail-screen .pd { padding:24px; }
.detail-screen .pd-card { border-radius:8px; }
.detail-screen .pd-img { border-radius:8px; }
.detail-screen .pd-cat { border-top-left-radius:8px; }
.detail-screen .pd-name { overflow-wrap:anywhere; }
.detail-screen .buy-bar { left:240px; background:#fff; }
.detail-screen .buy-bar-inner { max-width:none; }
.store-layout a:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media (hover:hover) and (pointer:fine) {
  .store-secondary a:hover { background:#e0ebe3; }
  .store-primary > a:not(.store-brand):hover,.store-actions a:hover { background:#e6eee8; color:var(--primary); }
}
@media (max-width:999px) {
  .store-layout { grid-template-columns:minmax(0,1fr); }
  .store-primary { position:static; grid-column:1; grid-row:1; flex-direction:row; height:60px; gap:6px; padding:6px 8px; z-index:30; border-right:0; border-bottom:1px solid #e1e7e2; overflow:visible; }
  .store-brand { width:36px; min-height:44px; flex-shrink:0; }
  .store-brand img { max-width:34px; height:38px; }
  .store-primary .store-search { width:40px; height:40px; min-height:40px; }
  .store-primary > a.store-chat,.store-primary > a.store-member,.store-primary > a.store-knowledge { width:40px; min-height:42px; padding:4px 0; gap:2px; flex-shrink:0; font-size:10px; }
  .store-chat svg,.store-member svg,.store-knowledge svg { width:18px; height:18px; }
  .store-primary > a.store-all { flex-direction:row; width:auto; min-height:42px; padding:8px; font-size:13px; }
  .store-primary > .store-all svg { width:18px; height:18px; }
  .store-actions { flex-direction:row; width:auto; gap:4px; margin:0 0 0 auto; padding:0; }
  .store-actions a { width:32px; min-height:40px; }
  .store-secondary { position:static; grid-column:1; grid-row:2; height:auto; padding:6px 10px; border-right:0; border-bottom:1px solid #dfe5e1; }
  .store-secondary h2 { display:none; }
  .store-secondary nav { flex-direction:row; overflow-x:auto; gap:6px; }
  .store-secondary a { flex-direction:row; flex-shrink:0; gap:5px; min-height:42px; padding:10px 12px; text-align:center; border-radius:6px; font-size:13px; white-space:nowrap; }
  .store-category-icon { font-size:17px; }
  .store-content { grid-column:1; grid-row:3; }
  .store-compact-mobile .store-secondary { display:none; }
  .store-compact-mobile .store-content { grid-row:2; }
  .store-screen .bottom-price-bar { left:0; }
  .store-screen .bottom-price-bar .inner { min-width:0; }
  .store-screen .bottom-price-bar .sum { min-width:0; }
  .store-screen .bottom-price-bar button { flex-shrink:0; }
  .store-auth .page { padding-inline:12px; }
  .store-auth .topbar { margin-inline:-12px; }
  .detail-screen .pd { padding:16px 12px; }
  .detail-screen .buy-bar { left:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .detail-screen .buy-bar button { min-width:0; font-size:14px; padding-left:4px; padding-right:4px; }
}
@media (max-width:600px) {
  .store-primary > a.store-all { flex-direction:column; gap:2px; min-width:40px; padding:4px; font-size:10px; }
  .detail-screen .pd { padding:14px 10px; }
  .detail-screen .pd-head { grid-template-columns:78px minmax(0,1fr); gap:10px; }
  .detail-screen .pd-img { width:78px; }
  .detail-screen .pd-name { font-size:19px; line-height:1.4; }
  .detail-screen .pd-name .first { font-size:28px; }
  .detail-screen .pd-name .badge { vertical-align:2px; }
  .detail-screen .pd-cat { padding:2px 5px; font-size:10px; }
  .detail-screen .pd-price #unit-price { font-size:23px; }
  .detail-screen .pd-card { padding:10px; }
  .detail-screen .card-title { font-size:15px; }
  .detail-screen .card-title span { display:inline-block; }
  .detail-screen .rchip { padding:5px 8px 5px 5px; gap:4px; font-size:13px; }
  .detail-screen .rchip i { width:18px; height:18px; font-size:11px; }
  .detail-screen .sugar-chips { gap:4px; }
  .detail-screen .sugar-chip { padding:9px 1px; font-size:12px; }
  .detail-screen .sugar-chip small { font-size:10px; }
  .detail-screen .addon-row { flex-wrap:wrap; }
  .detail-screen .dv-opts { gap:4px; }
  .detail-screen .dv-opt { font-size:12px; padding:10px 1px; }
  .detail-screen .dv-input { padding:10px 8px; font-size:14px; }
  .detail-screen .diy-row { grid-template-columns:44px minmax(0,1fr) 50px; gap:6px; }
  .detail-screen .diy-row input { min-width:0; width:100%; }
  .detail-screen .diy-row button { padding:7px 8px; }
  .detail-screen .diy-row .info { grid-column:1/-1; white-space:normal; }
  .detail-screen .diy-weight { flex-wrap:wrap; gap:8px; }
  .detail-screen .formula-row { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { .store-layout * { transition:none !important; } }