/* ==========================================================================
   Amber & Oak — QR Menü tema stilleri
   Warm minimal: krem zemin, espresso mürekkep, terracotta vurgu, adaçayı ikincil vurgu
   ========================================================================== */

:root{
  --bg: oklch(97% 0.015 75);
  --bg-soft: oklch(94.5% 0.02 72);
  --card: oklch(99% 0.008 80);
  --ink: oklch(26% 0.03 50);
  --ink-soft: oklch(46% 0.03 55);
  --ink-faint: oklch(64% 0.02 55);
  --line: oklch(88% 0.02 68);
  --accent: oklch(60% 0.135 40);
  --accent-dark: oklch(46% 0.12 38);
  --accent-tint: oklch(93% 0.03 45);
  --sage: oklch(58% 0.09 148);
  --sage-tint: oklch(93% 0.03 148);
  --white: oklch(99% 0.005 80);
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Work Sans', Helvetica, Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px -12px oklch(26% 0.03 50 / 0.25);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--bg-soft);
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-dark); text-decoration: none; }
a:hover{ color: var(--accent); }
h1,h2,h3{ font-family: var(--font-serif); margin: 0; }
p{ margin: 0; }
button{ font-family: inherit; border: none; background: none; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }

/* placeholder imagery (stand-in for real photos dropped by admin) */
.ph{
  background: repeating-linear-gradient(135deg, oklch(90% 0.02 70), oklch(90% 0.02 70) 10px, oklch(93% 0.02 72) 10px, oklch(93% 0.02 72) 20px);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-faint); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; text-align:center; padding: 8px;
}

/* ---------- App shell ---------- */
.app-shell{
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  box-shadow: var(--shadow);
  padding-bottom: 84px;
}
.screen{ position: relative; }

/* ---------- Landing ---------- */
.landing{ min-height: 100vh; overflow: hidden; }
.landing-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.landing-bg img, .landing-bg video{ width:100%; height:100%; object-fit:cover; }
.landing-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, oklch(20% 0.03 50 / 0.35) 0%, oklch(18% 0.03 50 / 0.55) 55%, oklch(15% 0.03 50 / 0.85) 100%);
}
.landing-inner{
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 24px 40px;
  gap: 36px;
  position: relative;
  bottom: 58px;
}
.brand-badge{ text-align:center; color: var(--white); }
.brand-name{ font-size: 44px; letter-spacing: 0.5px; }
.brand-rule{ display:block; width: 46px; height: 2px; background: var(--accent); margin: 14px auto; }
.brand-sub{ font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: oklch(92% 0.01 70 / 0.85); }

.launch-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.launch-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding: 22px 12px; border-radius: var(--radius);
  background: oklch(20% 0.02 55 / 0.45);
  border: 1px solid oklch(90% 0.02 70 / 0.25);
  backdrop-filter: blur(6px);
  color: var(--white); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.launch-card:hover{ background: oklch(24% 0.03 50 / 0.6); transform: translateY(-2px); color: var(--white); }
.launch-card iconify-icon, .launch-card i{ font-size: 28px; color: var(--accent); }
.launch-card span{ font-weight: 600; }

/* ---------- Header (menu-topbar) ---------- */
.menu-topbar{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; justify-content: space-between;
  max-width: 760px; margin: 0 auto;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-logo{ display:flex; align-items:center; height: 32px; }
.topbar-logo img{ height: 100%; width: auto; }
.topbar-right{ display:flex; align-items:center; gap: 6px; }
.dock-icon, .topbar-back{
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink); font-size: 17px;
  transition: background .15s ease;
}
.dock-icon:hover, .topbar-back:hover{ background: var(--accent-tint); color: var(--accent-dark); }

/* ---------- Chip rail ---------- */
.chip-rail{
  max-width: 760px; margin: 0 auto;
  display:flex; gap: 10px; overflow-x: auto;
  padding: 14px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.chip-rail::-webkit-scrollbar{ display:none; }
.chip{
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip.active{ background: var(--accent); border-color: var(--accent); color: var(--white); }
.ecom-breadcrumb-nav{ display:none; }

/* ---------- Category hero ---------- */
.cat-hero{ position: relative; height: 220px; overflow: hidden; }
.cat-hero img, .cat-hero .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, oklch(20% 0.03 50 / 0.1), oklch(15% 0.03 50 / 0.75)); }
.cat-hero-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 20px 24px; color: var(--white); }
.cat-hero-copy h1{ font-size: 28px; }
.cat-hero-copy p{ font-size: 14px; color: oklch(94% 0.01 70 / 0.9); margin-top: 6px; max-width: 480px; }
.cat-hero-copy .cat-count{ margin-top: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); font-weight: 600; }

/* ---------- Product list ---------- */
.product-list-wrap{ padding: 16px 20px 40px; }
.product-list-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.product-list-sort-select{ border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--card); color: var(--ink); }
.product-list-grid{ display:flex; flex-direction:column; gap: 14px; margin:0; }
.product-list-card{
  display:flex; gap: 14px;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 12px; position: relative;
}
.product-list-img-wrap{ position: relative; flex: 0 0 96px; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; }
.product-list-img{ width:100%; height:100%; object-fit: cover; }
.product-list-img-overlay{ display:none; }
.product-list-cart-btn{ display:none; }
.product-list-fav-btn{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background: oklch(99% 0 0 / 0.85); color: var(--accent-dark); display:flex; align-items:center; justify-content:center; font-size: 13px;
}
.product-list-discount{
  position:absolute; top:6px; left:6px; background: var(--accent); color: var(--white);
  font-size: 11px; font-weight:700; padding: 2px 7px; border-radius: 999px;
}
.product-list-out-of-stock{
  position:absolute; inset:0; background: oklch(20% 0 0 / 0.55); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:11px; text-transform:uppercase; letter-spacing:1px;
}
.product-list-body{ flex:1; display:flex; flex-direction:column; gap: 4px; min-width:0; }
.product-list-brand{ display:none; }
.product-list-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.product-list-tag{
  font-size: 10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--sage-tint); color: var(--sage);
}
.product-list-name{ font-family: var(--font-serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.product-list-stars{ display:none; }
.item-meta{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.kcal-pill{ font-size: 12px; color: var(--ink-soft); display:flex; align-items:center; gap:4px; }
.allergen-dots{ display:flex; gap: 4px; }
.al-dot{
  width: 18px; height:18px; border-radius:50%; font-size: 9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; color: var(--white);
}
.al-gluten{ background: oklch(62% 0.11 75); }
.al-dairy{ background: oklch(70% 0.06 240); }
.al-egg{ background: oklch(78% 0.12 95); color: var(--ink); }
.al-sesame{ background: oklch(64% 0.08 60); }
.al-sulphites{ background: oklch(58% 0.08 310); }
.al-nuts{ background: oklch(48% 0.06 45); }
.al-fish{ background: oklch(62% 0.08 210); }
.al-soy{ background: oklch(58% 0.09 145); }

.qrmenu-list-side{ margin-top: auto; display:flex; align-items:center; justify-content:space-between; padding-top: 6px; }
.product-list-prices{ display:flex; align-items:baseline; gap:8px; }
.product-list-price{ font-size: 16px; font-weight: 700; color: var(--accent-dark); }
.product-list-old-price{ font-size: 12px; color: var(--ink-faint); text-decoration: line-through; }
.add-to-cart-btn{
  display:flex; align-items:center; gap:6px;
  background: var(--accent); color: var(--white); font-size: 12px; font-weight:700;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.add-to-cart-btn:hover{ background: var(--accent-dark); }

/* ---------- Product detail ---------- */
.product-image-module{ position: relative; background: var(--bg-soft); }
.xzoom-container{/* height: 320px; */width:100%;/* overflow:hidden; */}
.xzoom-container img, .xzoom-container .ph{ width:100%; height:100%; object-fit:cover; object-position:center; }
.xzoom-thumbs{display:flex;/* gap:8px; */padding: 10px 20px;margin: 0 !important;}
.xzoom-gallery{ width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.xzoom-gallery img{ width:100%; height:100%; object-fit:cover; }
.product-image-skeleton{ display:none; }

.detail-card{ padding: 20px 20px 48px; display:flex; flex-direction:column; gap: 22px; }
.product-detail-module{ display:flex; flex-direction:column; gap: 10px; }
.product-detail-breadcrumb{ display:none; }
.product-detail-name{ font-family: var(--font-serif); font-size: 26px; }
.product-detail-meta{ display:flex; gap:10px; font-size: 12px; color: var(--ink-faint); }
.product-detail-brand, .product-detail-rating{ display:none; }
.product-detail-short-desc{ font-size: 14px; color: var(--ink-soft); line-height:1.6; }
.product-detail-tags{ display:flex; gap:6px; }
.product-detail-tag{ font-size: 10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:999px; background: var(--sage-tint); color: var(--sage); }
.product-detail-pricing{ font-size: 24px; font-weight:700; color: var(--accent-dark); }
.product-detail-buy{ display:flex; align-items:center; gap: 12px; }
.quantity-section{ display:flex; align-items:center; border:1px solid var(--line); border-radius: 999px; overflow:hidden; }
.quantity-section button{ padding: 10px 14px; }
.quantity-section input{ width: 36px; text-align:center; border:none; background:none; font-size:14px; }
.product-detail-add-to-cart{
  flex:1; background: var(--accent); color: var(--white); font-weight:700; font-size: 14px;
  padding: 13px 18px; border-radius: 999px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.product-detail-add-to-cart:hover{ background: var(--accent-dark); }

.qrmenu-item-meta{ display:flex; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qrmenu-item-meta .stat{ display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--ink-soft); }
.qrmenu-item-meta .stat i{ color: var(--accent); }

.detail-allergens h2{ font-size: 15px; margin-bottom: 12px; }
.allergen-chips{ display:flex; flex-wrap:wrap; gap: 10px; }
.allergen-chip{ display:flex; align-items:center; gap:8px; font-size: 13px; color: var(--ink-soft); background: var(--card); border:1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; }

/* ---------- Footer: drawer + dock ---------- */
.drawer-scrim{
  position: fixed; inset:0; background: oklch(15% 0.02 50 / 0.5);
  opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 40;
}
.drawer-scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position: fixed; top:0; left:0; bottom:0; width: 300px; max-width: 84vw;
  background: var(--bg); z-index: 41;
  transform: translateX(-100%); transition: transform .3s ease;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow);
}
.drawer.open{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 18px; border-bottom: 1px solid var(--line); }
.mini-badge span{ width:34px; height:34px; border-radius:50%; background: var(--accent); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:700; }
.drawer-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); }
.drawer-close:hover{ background: var(--accent-tint); }
.drawer-body{ flex:1; overflow-y:auto; padding: 10px 8px; }
.drawer-group-btn{
  width:100%; text-align:left; display:flex; align-items:center; gap:12px; justify-content:flex-start;
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 10px;
}
.drawer-group-btn:hover{ background: var(--accent-tint); }
.grp-ic{ flex:0 0 auto; }
.grp-arrow{ margin-left:auto; flex:0 0 auto; }
.drawer-group.open .drawer-group-btn{ color: var(--accent-dark); }
.drawer-cats{ display:none; flex-direction:column; padding: 2px 14px 10px 26px; gap: 2px; }
.drawer-group.open .drawer-cats{ display:flex; }
.drawer-cat{ padding: 8px 0; font-size: 13px; color: var(--ink-soft); }
.drawer-cat.active, .drawer-cat:hover{ color: var(--accent-dark); }

.venue-info{ padding: 16px 18px; border-top: 1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.info-row{ display:flex; gap: 12px; align-items:flex-start; }
.info-row i{ margin-top: 3px; color: var(--accent); font-size: 15px; }
.info-row h2{ font-size: 12px; text-transform:uppercase; letter-spacing:0.6px; color: var(--ink-faint); }
.info-row p{ font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.bottom-dock{
  position: fixed; bottom:0; left:50%; transform: translateX(-50%);
  width: 100%; max-width:760px; z-index: 60;
  --dock-notch:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 84' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C45,0 40,46 90,46 C140,46 135,0 180,0 L180,84 L0,84 Z' fill='black'/%3E%3C/svg%3E") center top / 180px 100% no-repeat,
    linear-gradient(#000 0 0) left top / calc(50% - 89px) 100% no-repeat,
    linear-gradient(#000 0 0) right top / calc(50% - 89px) 100% no-repeat;
}
.dock-shadow{
  position:absolute; inset:0;
  filter: drop-shadow(0 -8px 22px oklch(26% 0.03 50 / 0.16));
  -webkit-mask: var(--dock-notch); mask: var(--dock-notch);
  pointer-events:none;
}
.dock-shadow::before{ content:''; position:absolute; inset:0; background: var(--bg); }
.dock-bar{
  position: relative; height: 84px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 20px 18px;
  -webkit-mask: var(--dock-notch); mask: var(--dock-notch);
  background: var(--bg);
}
.dock-side{ display:flex; gap: 8px; }
.dock-side.right .cart-icon{ position:relative; }
.cart-icon span{
  position:absolute; top:-4px; right:-4px; background: var(--accent); color:var(--white);
  font-size: 9px; min-width:15px; height:15px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.menu-fab-wrap{
  position: absolute; left: 50%; top: -28px; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.menu-fab{
  width: 60px; height:60px; border-radius:50%; background: var(--accent); color: var(--white);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow: 0 8px 20px oklch(46% 0.12 38 / 0.4), inset 0 -3px 8px oklch(20% 0 0 / 0.14);
  border: none;
}
.menu-fab:hover{ background: var(--accent-dark); }
.menu-fab-label{font-size: 10px;font-weight:800;letter-spacing:1.5px;color: var(--ink);position: relative;top: 16px;}

/* ---------- Search overlay ---------- */
.search-overlay{
  position: fixed; inset:0; background: oklch(15% 0.02 50 / 0.5); z-index: 50;
  display:flex; align-items:flex-start; justify-content:center; padding-top: 60px;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.search-overlay.open{ opacity:1; pointer-events:auto; }
.search-box{ width: 92%; max-width: 520px; background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.search-box input{ width:100%; border:1px solid var(--line); border-radius:999px; padding: 12px 16px; font-size:14px; }

@media (min-width: 780px){
  .app-shell{ margin: 24px auto; min-height: calc(100vh - 48px); border-radius: 20px; overflow:hidden; }
  .menu-topbar, .chip-rail{ border-radius: 0; }
}

@media (max-width: 380px){
  .menu-topbar{ padding: 10px 14px; }
  .topbar-right{ gap: 2px; }
  .dock-icon, .topbar-back{ width: 34px; height: 34px; font-size: 15px; }
  .chip-rail{ padding: 12px 14px; gap: 8px; }
  .chip{ padding: 7px 14px; font-size: 12px; }
  .landing-inner{ padding: 40px 16px 32px; gap: 26px; }
  .brand-name{ font-size: 34px; }
  .launch-grid{ gap: 8px; }
  .launch-card{ padding: 16px 8px; gap: 7px; font-size: 11px; letter-spacing: 1px; }
  .launch-card iconify-icon, .launch-card i{ font-size: 22px; }
  .cat-hero-copy{ padding: 16px 16px; }
  .cat-hero-copy h1{ font-size: 22px; }
  .product-list-wrap{ padding: 12px 14px 32px; }
  .product-list-card{ padding: 10px; gap: 10px; }
  .product-list-img-wrap{ flex-basis: 80px; width: 80px; height: 80px; }
  .add-to-cart-btn{ padding: 7px 11px; font-size: 11px; }
  .detail-card{ padding: 16px 14px 36px; }
  .dock-bar{ padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .dock-side{ gap: 4px; }
  .menu-fab{ width: 48px; height: 48px; font-size: 18px; }
}
#sw-img-editor {
    top: 0 !important;
}