.store-panel-trigger { position: fixed; z-index: 36; right: 0; top: 42%; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; opacity: .5; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: opacity .14s ease, visibility .14s; }
.store-panel-trigger::before { content: ""; position: absolute; inset: 2px 0 2px 12px; border: 1px solid #1684a5; border-right: 0; border-radius: 7px 0 0 7px; background: #0b7595; }
.store-panel-trigger .icon { position: relative; width: 18px; height: 18px; margin-left: 12px; pointer-events: none; }
.store-panel-trigger:hover::before { background: #08637e; }
.store-panel-trigger.is-dragging { cursor: grabbing; }
.store-panel-trigger.is-dragging::before { border: 2px solid #78d6f3; border-right: 0; background: #08637e; }
.store-panel-trigger[data-side=left] { left: 0; right: auto; }
.store-panel-trigger[data-side=left]::before { inset: 2px 12px 2px 0; border-left: 0; border-right: 1px solid #1684a5; border-radius: 0 7px 7px 0; }
.store-panel-trigger[data-side=left] .icon { margin-left: 0; margin-right: 12px; }
.store-panel-trigger[data-side=left].is-dragging::before { border-left: 0; border-right: 2px solid #78d6f3; }
.store-panel-trigger.is-scrolling:not(:focus-visible) { opacity: 0; visibility: hidden; pointer-events: none; }
.store-panel-trigger:focus-visible, .store-panel button:focus-visible, .store-panel a:focus-visible { outline: 3px solid #36b6de; outline-offset: 3px; }
dialog.store-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 92vw); max-width: none; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 20px 0 0 20px; color: var(--ink); background: var(--theme-surface); box-shadow: -20px 0 60px #0003; overflow: hidden; }
dialog.store-panel[data-side=left] { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--line); border-radius: 0 20px 20px 0; box-shadow: 20px 0 60px #0003; }
.store-panel[open] { display: flex; flex-direction: column; animation: store-panel-enter .25s ease-out; }
.store-panel[data-side=left][open] { animation-name: store-panel-enter-left; }
.store-panel::backdrop { background: #10130e88; backdrop-filter: blur(3px); }
.store-panel.store-panel-closing { animation: store-panel-leave .2s ease-in forwards; }
.store-panel[data-side=left].store-panel-closing { animation-name: store-panel-leave-left; }
.store-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.store-panel-header p { margin: 0 0 .25rem; font-weight: 700; font-size: .75rem; letter-spacing: .1em; color: #188bae; }
.store-panel-header h2 { font-size: 1.9rem; line-height: 1.2; margin: 0; }
.store-panel-content { padding: 1.1rem; overflow-y: auto; min-height: 0; overscroll-behavior: contain; padding-bottom: max(1.4rem, env(safe-area-inset-bottom, 0px)); }
.store-panel-cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--theme-raised); }
.store-panel-thumbnails { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem 2px; }
.store-panel-thumbnails[hidden] { display: none; }
.store-panel-thumbnails button { width: 55px; height: 55px; padding: 2px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface); cursor: pointer; }
.store-panel-thumbnails button[aria-pressed=true] { border: 2px solid #168fb7; }
.store-panel-thumbnails img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.store-panel-brand { display: grid; justify-items: center; gap: .7rem; padding: 1.6rem; border-radius: 14px; color: #1787a8; background: linear-gradient(135deg, #1396bf18, transparent), var(--theme-raised); }
.store-panel-brand .icon { width: 40px; height: 40px; }
.store-panel-brand bdi { font-size: 1.6rem; font-weight: 800; letter-spacing: -.05em; }
.store-panel-brand span { font-weight: 400; }
.store-panel-card { padding: 1.1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--theme-surface); }
.store-panel-card h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font: 650 1rem "DM Sans", "Noto Sans Arabic", sans-serif; }
.store-panel-card h3 .icon { color: #168fb7; width: 19px; height: 19px; }
.store-panel-card p, .store-panel-about { color: var(--muted); line-height: 1.7; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
.store-panel-about { margin: 1rem 0; }
.store-panel-card p { margin: .55rem 0 0; }
.store-panel-directions { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .85rem; padding: .65rem; border-radius: 9px; background: #087a9f; color: white; font-weight: 700; font-size: .9rem; text-decoration: none; }
.store-panel-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.store-panel-hours { display: grid; gap: .65rem; padding: 0; list-style: none; font-size: .85rem; }
.store-panel-hours li { display: flex; justify-content: space-between; gap: .75rem; }
.store-panel-hours li > span:last-child { text-align: end; }
.store-panel-socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.store-panel-socials a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .65rem; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); text-decoration: none; font-size: .85rem; }
.store-panel-socials .social-icon { width: 19px; height: 19px; }
.store-panel-edit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; flex: 0 0 auto; margin: .7rem 1.1rem 0; padding: .65rem; border: 1px dashed #168fb7; border-radius: 9px; background: var(--theme-raised); color: var(--ink); cursor: pointer; font: 600 .875rem "DM Sans", "Noto Sans Arabic", sans-serif; }
.store-panel-edit[hidden] { display: none; }
body.store-panel-open { overflow: hidden; }
html[data-installed-app=true] #store-panel { max-height: 100dvh; padding-top: var(--app-safe-top); }
.editor-store-hours { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); gap: .5rem; align-items: end; margin-bottom: .75rem; }
.editor-store-hours .editor-checkbox { font-size: .85rem; }
.editor-store-hours .editor-field { min-width: 0; }
.editor-store-hours input[type=time] { min-width: 0; width: 100%; }
@keyframes store-panel-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes store-panel-leave { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes store-panel-enter-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes store-panel-leave-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media(prefers-reduced-motion:reduce) { .store-panel[open], .store-panel.store-panel-closing, .store-panel[data-side=left][open], .store-panel[data-side=left].store-panel-closing { animation: none; } .store-panel-trigger { transition: none; } }
@media(forced-colors:active) { .store-panel-trigger::before, .store-panel-directions { background: ButtonFace; border: 1px solid ButtonText; } .store-panel-trigger, .store-panel-directions { color: ButtonText; } }

.editor-store-hours .editor-checkbox small { display:block; color:var(--muted); font-weight:400; }
.editor-store-social, .editor-store-detail { padding:.8rem; margin:.75rem 0; border:1px solid var(--line); border-radius:12px; }
.editor-store-detail details { padding:.45rem 0; }
.editor-store-detail summary { cursor:pointer; font-weight:600; }