/* ==========================================================================
   Store page — one-page menu (Foodpanda style).
   Loaded only on /store/{slug} (kept out of assets/css/*.css on purpose: every
   file there is linked on every page). Brand tokens come from orderyfy.css.
   Sizes shared with store-menu.js: --sm-bar (compact bar), --sm-tabs, --sm-chips.
   ========================================================================== */

.oy-sm { --sm-bar:52px; --sm-tabs:46px; --sm-chips:44px; max-width:1200px; margin:0 auto; padding:12px 16px 96px; }
.oy-sm [hidden] { display:none !important; }

/* The site header scrolls away on store pages; the compact shop bar takes over. */
body.oy-page-store .oy-header { position:relative !important; top:auto !important; }

/* ---- Shop header (breadcrumb, cover, logo, facts) ---- */
.oy-str-bread { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--oy-mute); margin-bottom:14px; flex-wrap:wrap; }
.oy-str-bread a { color:var(--oy-green-dark); text-decoration:none; font-weight:600; }
.oy-str-header { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.oy-str-header .oy-str-logo { position:relative; width:56px; height:56px; border-radius:14px; background:var(--oy-light); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:var(--oy-green-dark); flex-shrink:0; overflow:hidden; }
.oy-str-header .oy-str-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.oy-str-header h1 { font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:22px; font-weight:800; margin:0; color:var(--oy-ink); }
.oy-str-header .oy-str-type { font-size:12px; color:var(--oy-mute); margin:2px 0 0; }
.oy-str-cover { border-radius:14px; overflow:hidden; margin-bottom:14px; max-height:190px; }
.oy-str-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.oy-str-facts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.oy-str-facts span { background:var(--oy-light); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--oy-ink); }
.oy-str-facts .oy-str-rating { background:var(--oy-green); }
.oy-str-closed { margin:12px 0 0; background:#FFF4E5; border:1px solid #FFD8A8; color:#8A5200; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; }
.oy-str-desc { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--oy-mute); }
.oy-store-empty { text-align:center; padding:40px 16px; color:var(--oy-mute); font-size:14px; }

/* ---- In-menu search ---- */
.oy-sm-searchbox { display:flex; align-items:center; gap:8px; margin:16px 0 0; height:46px; padding:0 12px; background:#fff; border:1px solid var(--oy-border); border-radius:12px; color:#9CA3AF; scroll-margin-top:calc(var(--sm-bar) + 8px); }
.oy-sm-searchbox:focus-within { border-color:var(--oy-green); box-shadow:0 0 0 3px rgba(166,206,57,.25); }
.oy-sm-searchbox input { flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font:inherit; font-size:15px; color:var(--oy-ink); }
.oy-sm-searchbox input::-webkit-search-cancel-button { display:none; }
.oy-sm-q-clear { flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%; background:var(--oy-light); color:var(--oy-ink); font-size:18px; line-height:1; cursor:pointer; }

/* ---- Compact shop bar (fixed; slides in once the shop header is gone) ---- */
.oy-sm-sentinel { height:1px; }
.oy-sm-bar { position:fixed; top:0; inset-inline:0; z-index:45; height:var(--sm-bar); display:flex; align-items:center; gap:4px; padding:0 6px; background:#fff; border-bottom:1px solid var(--oy-border); transform:translateY(-100%); transition:transform .18s ease; }
.oy-sm-bar.is-on { transform:none; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.oy-sm-bar-name { flex:1; min-width:0; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:16px; font-weight:800; color:var(--oy-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oy-sm-bar-btn { flex:0 0 auto; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:none; color:var(--oy-ink); cursor:pointer; text-decoration:none; }
.oy-sm-bar-btn:hover { background:var(--oy-light); color:var(--oy-ink); }
[dir="rtl"] .oy-sm-flip { transform:scaleX(-1); }

/* ---- Sticky tabs + chips ---- */
.oy-sm-nav { position:sticky; top:var(--sm-bar); z-index:44; margin:14px -16px 0; }
.oy-sm-tabs { display:flex; gap:2px; height:var(--sm-tabs); padding:0 10px; overflow-x:auto; scrollbar-width:none; background:#fff; border-top:1px solid var(--oy-border); border-bottom:1px solid var(--oy-border); }
.oy-sm-tabs::-webkit-scrollbar, .oy-sm-chips::-webkit-scrollbar, .oy-sm-popular::-webkit-scrollbar { display:none; }
.oy-sm-tab { flex:0 0 auto; display:flex; align-items:center; padding:0 12px; margin-bottom:-1px; border-bottom:3px solid transparent; color:var(--oy-mute); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.oy-sm-tab:hover { color:var(--oy-ink); }
.oy-sm-tab[aria-current="true"] { color:var(--oy-ink); border-bottom-color:var(--oy-green); }
/* Chips overlay the content under the tabs, so showing/hiding them never moves the page. */
.oy-sm-chips { position:absolute; top:100%; inset-inline:0; height:var(--sm-chips); display:flex; align-items:center; gap:8px; padding:0 12px; overflow-x:auto; scrollbar-width:none; background:rgba(255,255,255,.97); border-bottom:1px solid var(--oy-border); box-shadow:0 4px 10px rgba(0,0,0,.04); }
/* A menu with a single section has no tab row: its chips sit in the nav itself. */
.oy-sm-nav > .oy-sm-chips:first-child { position:relative; top:0; }
/* Overlay chips appear only once the nav is stuck, so they never cover the first heading. */
.oy-sm-nav:not(.is-stuck) > .oy-sm-tabs ~ .oy-sm-chips { display:none !important; }
.oy-sm-chip { flex:0 0 auto; display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid var(--oy-border); border-radius:999px; background:#fff; color:var(--oy-ink); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.oy-sm-chip:hover { background:var(--oy-light); color:var(--oy-ink); }
.oy-sm-chip[aria-current="true"] { background:var(--oy-green); border-color:var(--oy-green); font-weight:700; }

/* ---- Sections ---- */
.oy-sm-sec { padding-top:20px; scroll-margin-top:calc(var(--sm-bar) + var(--sm-tabs) + 6px); }
.oy-sm-sec.has-chips, .oy-sm-group { scroll-margin-top:calc(var(--sm-bar) + var(--sm-tabs) + var(--sm-chips) + 6px); }
.oy-sm-sec-title { margin:0 0 10px; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:19px; font-weight:800; color:var(--oy-ink); letter-spacing:-.01em; }
.oy-sm-group { margin-top:16px; }
.oy-sm-group-title { margin:0 0 8px; font-size:15px; font-weight:800; color:var(--oy-mute); }
.oy-sm-noresults { margin:0; padding:36px 16px; text-align:center; color:var(--oy-mute); font-size:14px; }
.oy-sm-menu.is-searching .oy-sm-sec--popular { display:none; }

/* ---- Restaurant rows ---- */
.oy-sm-list { display:grid; grid-template-columns:1fr; gap:10px; }
.oy-sm-item { position:relative; background:#fff; border:1px solid var(--oy-border); border-radius:14px; transition:box-shadow .15s; }
.oy-sm-item:hover { box-shadow:0 6px 18px rgba(31,31,31,.07); }
.oy-sm-item-main { display:flex; align-items:flex-start; gap:12px; min-height:120px; padding:12px; color:var(--oy-ink); text-decoration:none; }
.oy-sm-item-main:hover { color:var(--oy-ink); }
.oy-sm-item-text { flex:1; min-width:0; min-height:96px; display:flex; flex-direction:column; gap:4px; }
.oy-sm-item-name { font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:15px; font-weight:800; line-height:1.3; }
.oy-sm-item-desc { font-size:13px; line-height:1.4; color:var(--oy-mute); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oy-sm-item-img { flex:0 0 96px; width:96px; height:96px; border-radius:12px; overflow:hidden; background:var(--oy-light); }
.oy-sm-item-img img, .oy-sm-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.oy-sm-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:auto; padding-top:4px; }
.oy-sm-now { font-size:14.5px; font-weight:800; color:var(--oy-ink); }
.oy-sm-was { font-size:12.5px; color:#6B7280; }
.oy-sm-badge { font-size:11px; font-weight:800; color:#B91C1C; background:#FEE2E2; padding:2px 8px; border-radius:999px; }
.oy-sm-item.is-soldout .oy-sm-item-img img, .oy-sm-card.is-soldout .oy-sm-card-img img { filter:grayscale(1); opacity:.65; }

/* The "+" sits over the photo's lower corner. */
.oy-sm-add { position:absolute; inset-inline-end:8px; bottom:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--oy-green); color:var(--oy-ink); font-size:22px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:background .15s, transform .1s; }
.oy-sm-add:hover { background:var(--oy-green-dark); color:#fff; }
.oy-sm-add:active { transform:scale(.92); }
.oy-sm-add:disabled { background:#E5E7EB; color:#9CA3AF; box-shadow:none; cursor:not-allowed; }
.oy-sm-add.is-loading { opacity:.55; pointer-events:none; }

/* ---- Grocery tiles + Popular carousel ---- */
.oy-sm-card { position:relative; background:#fff; border:1px solid var(--oy-border); border-radius:14px; overflow:hidden; }
.oy-sm-card-main { display:flex; flex-direction:column; height:100%; padding-bottom:12px; color:var(--oy-ink); text-decoration:none; }
.oy-sm-card-main:hover { color:var(--oy-ink); }
.oy-sm-card-img { display:block; aspect-ratio:1/1; background:var(--oy-light); }
.oy-sm-card-name { padding:8px 10px 0; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:14px; font-weight:800; line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oy-sm-card .oy-sm-price { padding:2px 10px 0; padding-inline-end:52px; }
.oy-sm--grid .oy-sm-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.oy-sm-popular { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(148px, 42%); gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.oy-sm-popular > * { scroll-snap-align:start; }

@media (min-width:600px) {
  .oy-sm--grid .oy-sm-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .oy-sm-popular { grid-auto-columns:190px; }
}
@media (min-width:900px) {
  .oy-sm--menu .oy-sm-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .oy-sm--grid .oy-sm-list { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
  .oy-sm-nav { margin-inline:0; }
  .oy-sm-tabs { border-radius:12px 12px 0 0; border-inline:1px solid var(--oy-border); }
}

/* ---- Product sheet (bottom sheet on phones, centred dialog on desktop) ---- */
.oy-sm-sheet { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.oy-sm-sheet[hidden] { display:none; }
.oy-sm-sheet-backdrop { position:absolute; inset:0; background:rgba(17,24,39,.5); opacity:0; transition:opacity .2s; }
.oy-sm-sheet-panel { position:relative; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; display:flex; flex-direction:column; background:#fff; border-radius:20px 20px 0 0; outline:none; transform:translateY(100%); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.oy-sm-sheet.is-open .oy-sm-sheet-backdrop { opacity:1; }
.oy-sm-sheet.is-open .oy-sm-sheet-panel { transform:none; }
.oy-sm-sheet-x { position:absolute; top:10px; inset-inline-end:10px; z-index:2; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.18); color:var(--oy-ink); font-size:24px; line-height:1; cursor:pointer; }
.oy-sm-sheet-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; border-radius:inherit; }
.oy-sm-sheet-img { aspect-ratio:16/10; background:var(--oy-light); border-radius:20px 20px 0 0; overflow:hidden; }
.oy-sm-sheet-img img { width:100%; height:100%; object-fit:cover; display:block; }
.oy-sm-sheet-body { padding:16px 18px 6px; }
.oy-sm-sheet-name { margin:0 0 4px; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:20px; font-weight:800; line-height:1.25; color:var(--oy-ink); padding-inline-end:28px; }
.oy-sm-sheet-price { margin:0 0 8px; font-size:15px; font-weight:800; color:var(--oy-ink); }
.oy-sm-sheet-price s { margin-inline-start:8px; font-weight:500; color:#6B7280; font-size:13px; }
.oy-sm-sheet-desc { margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--oy-mute); white-space:pre-line; }
.oy-sm-sizes { margin:6px 0 10px; padding:0; border:0; }
.oy-sm-sizes legend { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 4px; padding:0; font-size:15px; font-weight:800; color:var(--oy-ink); }
.oy-sm-req { font-style:normal; font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--oy-light); color:var(--oy-green-dark); }
.oy-sm-sizes.is-done .oy-sm-req { background:#E5E7EB; color:#4B5563; }
.oy-sm-size { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 2px; border-bottom:1px solid var(--oy-border); font-size:14.5px; cursor:pointer; }
.oy-sm-size:last-child { border-bottom:0; }
.oy-sm-size input { flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--oy-green-dark); }
.oy-sm-size-name { flex:1; min-width:0; }
.oy-sm-size-price { font-weight:700; }
.oy-sm-size.is-off { opacity:.5; cursor:not-allowed; }
.oy-sm-sheet-more { display:inline-block; margin:2px 0 12px; font-size:13px; font-weight:700; }
.oy-sm-sheet-note { margin:0; padding:10px 16px 0; font-size:13px; font-weight:600; color:#8A5200; }
.oy-sm-sheet-foot { display:flex; align-items:center; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--oy-border); background:#fff; }
.oy-sm-qty { flex:0 0 auto; display:flex; align-items:center; height:48px; border:1px solid var(--oy-border); border-radius:12px; }
.oy-sm-qty button { width:44px; height:100%; border:0; background:none; color:var(--oy-ink); font-size:22px; font-weight:700; cursor:pointer; }
.oy-sm-qty button:disabled { color:#D1D5DB; cursor:not-allowed; }
.oy-sm-qty output { min-width:28px; text-align:center; font-size:16px; font-weight:800; }
.oy-sm-sheet-add { flex:1; min-width:0; height:48px; padding:0 12px; border:0; border-radius:12px; background:var(--oy-green); color:var(--oy-ink); font-size:15px; font-weight:800; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oy-sm-sheet-add:hover { background:var(--oy-green-dark); color:#fff; }
.oy-sm-sheet-add:disabled { background:#E5E7EB; color:#6B7280; cursor:not-allowed; }
.oy-sm-sheet-add.is-loading { opacity:.6; pointer-events:none; }
@media (min-width:900px) {
  .oy-sm-sheet { align-items:center; padding:24px; }
  .oy-sm-sheet-panel { border-radius:20px; max-height:86vh; opacity:0; transform:translateY(16px) scale(.98); transition:transform .2s, opacity .2s; }
  .oy-sm-sheet.is-open .oy-sm-sheet-panel { opacity:1; transform:none; }
}
/* Lock the viewport only: making <body> a scroll container would un-stick the tabs behind the sheet. */
html.oy-sm-lock { overflow:hidden !important; }
html.oy-sm-lock .oy-toast { z-index:260; }

/* ---- Cart bar ---- */
.oy-sm-cartbar { position:fixed; inset-inline:12px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:55; max-width:560px; height:54px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:12px; background:var(--oy-green); color:var(--oy-ink); border-radius:14px; text-decoration:none; font-weight:800; box-shadow:0 8px 22px rgba(142,184,46,.45); }
.oy-sm-cartbar[hidden] { display:none; }
.oy-sm-cartbar:hover { background:var(--oy-green-dark); color:var(--oy-ink); }
.oy-sm-cartbar-count { padding:3px 10px; border-radius:999px; background:#fff; font-size:13px; }
.oy-sm-cartbar-label { flex:1; font-size:15px; }
.oy-sm-cartbar-total { font-size:15px; }
body.oy-sm-has-cartbar .oy-sm { padding-bottom:160px; }
body.oy-sm-has-cartbar .oy-toast { bottom:144px; }
@media (min-width:901px) {
  .oy-sm-cartbar { bottom:16px; }
  body.oy-sm-has-cartbar .oy-toast { bottom:86px; }
}

/* ---- Shop reviews (moved from the old inline styles) ---- */
.oy-section-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; }
.oy-section-head h2 { font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-size:18px; font-weight:800; margin:0; color:var(--oy-ink); }
.oy-str-rev { margin-top:34px; }
.oy-str-rev-avg { font-size:14px; font-weight:800; color:var(--oy-green-dark); }
.oy-str-rev-list { display:flex; flex-direction:column; gap:10px; }
.oy-str-rev-item { background:#fff; border:1px solid var(--oy-border); border-radius:12px; padding:14px 16px; }
.oy-str-rev-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px; }
.oy-str-rev-stars { color:#F2B300; font-size:14px; letter-spacing:1px; }
.oy-str-rev-dim { color:#D1D5DB; }
.oy-str-rev-who { font-size:13px; font-weight:700; color:var(--oy-ink); }
.oy-str-rev-when { font-size:11.5px; color:var(--oy-mute); }
.oy-str-rev-body { margin:0; font-size:13.5px; line-height:1.55; color:var(--oy-ink); }
.oy-str-rev-reply { margin:10px 0 0; padding:10px 12px; background:var(--oy-light); border-radius:9px; border-inline-start:3px solid var(--oy-green); }
.oy-str-rev-reply strong { display:block; font-size:11.5px; font-weight:800; color:var(--oy-green-dark); margin-bottom:3px; }
.oy-str-rev-reply p { margin:0; font-size:13px; line-height:1.5; color:var(--oy-ink); }
.oy-str-rev-empty { text-align:center; padding:26px 16px; color:var(--oy-mute); font-size:13.5px; background:#fff; border:1px solid var(--oy-border); border-radius:12px; }
.oy-str-rev-pager { margin-top:14px; }
#oy-reviews { scroll-margin-top:calc(var(--sm-bar) + var(--sm-tabs) + 8px); }

@media (prefers-reduced-motion: reduce) {
  .oy-sm-bar, .oy-sm-sheet-panel, .oy-sm-sheet-backdrop, .oy-sm-add { transition:none; }
}