/* ============================================================
   MOBILE BASE - Cross-browser compatible improvements
   ============================================================ */

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: max(env(safe-area-inset-bottom), 100px);
  }
}

/* Font smoothing for all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Touch action for smooth scrolling */
.carousel, .about-carousel, .menu-wrapper {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Grid fallback for older browsers */
@supports not (display: grid) {
  .process-carousel,
  .guarantees-grid,
  .stories-grid,
  .dish-of-day,
  .chef-card,
  .counter-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* place-items fallback */
.pwa-banner__icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Micro-interactions for all interactive elements */
.btn, .dish-card, .about-card, .story-card-v2, .combo-item, .process-step {
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -o-transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active, .dish-card:active, .about-card:active, .story-card-v2:active {
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  -ms-transform: scale(0.98);
  -o-transform: scale(0.98);
  transform: scale(0.98);
  opacity: 0.9;
}

/* Touch targets minimum 44px for accessibility */
.btn, .about-carousel__dot, .dish__favorite, .bottom-nav__item {
  min-height: 44px;
  min-width: 44px;
}

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--card) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  -webkit-animation: shimmer 1.5s infinite;
  -moz-animation: shimmer 1.5s infinite;
  -o-animation: shimmer 1.5s infinite;
  animation: shimmer 1.5s infinite;
}

@-webkit-keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@-moz-keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@-o-keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* New sections for small menu design */

/* Dish of the Day */
.dish-of-day{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--card);border-radius:24px;padding:40px;box-shadow:var(--shadow);margin-bottom:40px}
.dish-of-day__image{position:relative;border-radius:20px;overflow:hidden}
.dish-of-day__image img{width:100%;height:400px;object-fit:cover}
.dish-of-day__badge{position:absolute;top:20px;left:20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:white;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.dish-of-day__content h2{font-size:32px;margin-bottom:16px}
.dish-of-day__price{font-size:36px;font-weight:800;color:var(--accent);margin:24px 0;display:flex;align-items:center;gap:16px}
.dish-of-day__portion{font-size:18px;font-weight:400;color:var(--muted);text-decoration:none}
@media (max-width:900px){.dish-of-day{grid-template-columns:1fr;padding:24px}.dish-of-day__image img{height:280px}.dish-of-day__content h2{font-size:24px}.dish-of-day__price{font-size:28px}}

/* Combo Card */
.combo-card{background:linear-gradient(135deg,var(--card) 0%,var(--bg-soft) 100%);border-radius:24px;padding:40px;box-shadow:var(--shadow);text-align:center;margin-bottom:40px;border:2px solid var(--border)}
.combo-card__header{margin-bottom:32px}
.combo-card__header h2{font-size:28px;margin:16px 0 8px}
.combo-items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}
.combo-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--bg-soft);border-radius:16px}
.combo-item__icon{font-size:40px}
.combo-item__name{font-weight:600;font-size:14px;color:var(--muted)}
.combo-item__value{font-weight:700;font-size:16px}
.combo-price{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0;flex-wrap:wrap}
.combo-price__old{font-size:24px;color:var(--muted);text-decoration:line-through}
.combo-price__new{font-size:48px;font-weight:800;color:var(--accent)}
.combo-price__save{background:var(--green-soft);color:var(--green);padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px}
@media (max-width:768px){.combo-items{grid-template-columns:1fr}.combo-price__new{font-size:36px}.combo-card{padding:24px}}

/* Chef Card */
.chef-card{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;background:var(--card);border-radius:24px;padding:40px;box-shadow:var(--shadow);margin-bottom:40px}
.chef-card__photo{position:relative}
.chef-placeholder{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,var(--accent-soft),var(--accent));display:flex;align-items:center;justify-content:center;font-size:80px;box-shadow:var(--shadow)}
.chef-card__badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:var(--accent);color:white;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.chef-card__content h2{font-size:28px;margin-bottom:20px}
.chef-quote{font-size:18px;line-height:1.6;font-style:italic;border-left:4px solid var(--accent);padding-left:20px;margin:0 0 24px 0;color:var(--text)}
.chef-stats{display:flex;gap:32px}
.chef-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.chef-stat strong{font-size:28px;color:var(--accent)}
.chef-stat span{font-size:14px;color:var(--muted)}
@media (max-width:768px){.chef-card{grid-template-columns:1fr;text-align:center}.chef-placeholder{width:150px;height:150px;margin:0 auto;font-size:60px}.chef-stats{justify-content:center;gap:24px}.chef-quote{border-left:none;border-top:4px solid var(--accent);padding:20px 0 0 0}}

/* Process Carousel */
.process-carousel{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px}
.process-step{background:var(--card);border-radius:20px;padding:32px;text-align:center;box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s}
.process-step:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.process-step__num{width:40px;height:40px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px}
.process-step__icon{font-size:48px;margin-bottom:16px}
.process-step h4{margin-bottom:12px}
@media (max-width:900px){.process-carousel{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.process-carousel{grid-template-columns:1fr}}

/* Counter Card */
.counter-card{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:24px;padding:32px;margin-bottom:40px}
.counter-card__main{display:flex;flex-direction:column;gap:20px}
.counter-live{display:flex;align-items:center;gap:12px;font-size:18px;background:white;padding:16px 24px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.counter-live__icon{font-size:24px}
.counter-live strong{color:var(--accent);font-size:24px}
.spots-left{background:white;padding:20px 24px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.spots-left__label{font-weight:600;margin-bottom:12px}
.spots-left__bar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:12px}
.spots-left__fill{height:100%;background:linear-gradient(90deg,var(--accent),#f59e0b);border-radius:999px;transition:width .5s ease}
.spots-left__text strong{color:var(--accent);font-size:20px}
.counter-card__timer{text-align:center;background:white;padding:24px 32px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.timer-compact__label{font-size:14px;color:var(--muted);margin-bottom:12px}
.timer-compact{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
@media (max-width:768px){.counter-card{grid-template-columns:1fr;text-align:center}.counter-live{justify-content:center}.spots-left__bar{max-width:300px;margin:12px auto}}

/* Stories Grid */
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.story-card{background:var(--card);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft)}
.story-card__photo{width:60px;height:60px;border-radius:12px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.story-card__rating{margin-bottom:12px;font-size:16px}
.story-card__text{font-size:15px;line-height:1.6;margin-bottom:16px}
.story-card__author{font-size:14px;color:var(--accent)}
@media (max-width:900px){.stories-grid{grid-template-columns:1fr}}

/* FAQ Accordion */
.faq-list{background:var(--card);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft);margin-bottom:40px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-item__question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px;background:none;border:none;cursor:pointer;font-size:16px;font-weight:600;text-align:left;transition:color .2s}
.faq-item__question:hover{color:var(--accent)}
.faq-item__icon{font-size:20px;transition:transform .3s}
.faq-item--open .faq-item__icon{transform:rotate(45deg)}
.faq-item__answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 20px;font-size:15px;line-height:1.6;color:var(--muted)}
.faq-item--open .faq-item__answer{max-height:200px;padding:0 20px 20px}

/* Guarantees Grid */
.guarantees-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px}
.guarantee-card{background:var(--card);border-radius:20px;padding:32px;text-align:center;box-shadow:var(--shadow-soft);transition:transform .3s}
.guarantee-card:hover{transform:translateY(-4px)}
.guarantee-card__icon{font-size:48px;margin-bottom:16px}
.guarantee-card h4{margin-bottom:8px}
@media (max-width:900px){.guarantees-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.guarantees-grid{grid-template-columns:1fr}}

/* Button sizes */
.btn--large{padding:16px 32px;font-size:18px}

/* Combo Card V2 - Popular style */
.combo-card-v2{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.combo-items-v2{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.combo-item-v2{display:flex;align-items:center;gap:16px;padding:16px;background:#fafafa;border-radius:12px}
.combo-item-v2__icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,0.04)}
.combo-item-v2 div{display:flex;flex-direction:column;gap:4px}
.combo-item-v2 strong{font-size:16px}
.combo-item-v2 .muted{font-size:14px}
.combo-price-v2{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,#fef3e2,#fff);border-radius:12px;justify-content:center}
.combo-price-v2__old{font-size:18px;color:var(--muted);text-decoration:line-through}
.combo-price-v2__new{font-size:28px;font-weight:800;color:#b85f17}

/* Chef Card V2 */
.chef-card-v2{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:28px;box-shadow:0 2px 8px rgba(0,0,0,0.04);text-align:center}
.chef-quote-v2{font-size:18px;font-style:italic;color:#5a4a3a;margin-bottom:24px;padding:20px;background:#fafafa;border-radius:12px;border-left:4px solid #d97a2b}
.chef-stats-v2{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.chef-stat-v2{text-align:center}
.chef-stat-v2 strong{display:block;font-size:24px;font-weight:800;color:#b85f17}
.chef-stat-v2 span{font-size:13px;color:var(--muted)}

/* Process Card V2 */
.process-card-v2{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.04);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.process-step-v2{text-align:center;padding:20px 16px}
.process-step-v2__num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin:0 auto 12px}
.process-step-v2__icon{font-size:36px;margin-bottom:12px}
.process-step-v2 h4{font-size:15px;margin-bottom:8px}
.process-step-v2 .muted{font-size:13px}
@media (max-width:768px){.process-card-v2{grid-template-columns:repeat(2,1fr)}.chef-stats-v2{gap:20px}.chef-stat-v2 strong{font-size:20px}}
@media (max-width:480px){.process-card-v2{grid-template-columns:1fr}}

/* Story Card V2 */
.story-card-v2{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:16px}
.story-card-v2__rating{font-size:18px}
.story-card-v2__text{font-size:15px;line-height:1.6;color:#5a4a3a;flex:1}
.story-card-v2__author{font-size:14px;color:var(--muted);margin-top:auto}

/* Combined About Section */
.about-grid{display:grid;grid-template-columns:1fr 280px;gap:24px}
.about-main{display:flex;flex-direction:column;gap:24px}
.about-chef{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:28px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.about-chef__quote{font-size:18px;font-style:italic;color:#5a4a3a;margin-bottom:20px;padding:20px;background:#fafafa;border-radius:12px;border-left:4px solid #d97a2b;line-height:1.6}
.about-chef__stats{display:flex;gap:32px}
.about-chef__stats div{text-align:center}
.about-chef__stats strong{display:block;font-size:24px;font-weight:800;color:#b85f17}
.about-chef__stats span{font-size:13px;color:var(--muted)}
.about-combo{background:linear-gradient(135deg,#fef9f3,#fff);border:2px solid #d97a2b;border-radius:20px;padding:24px;box-shadow:0 4px 16px rgba(217,122,43,0.12)}
.about-combo__header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.about-combo__header h3{font-size:18px;margin:0}
.about-combo__items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.about-combo__items div{display:flex;align-items:center;gap:10px;font-size:15px;padding:10px 12px;background:#fff;border-radius:10px}
.about-combo__items strong{min-width:90px}
.about-combo__items span{color:var(--muted);font-size:13px}
.about-combo__price{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:16px;padding:12px;background:#fff;border-radius:10px}
.about-combo__price .old{font-size:16px;color:var(--muted);text-decoration:line-through}
.about-combo__price .new{font-size:26px;font-weight:800;color:#b85f17}
.about-process{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:20px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.about-process h4{margin-bottom:20px;font-size:16px}
.about-guarantees{display:flex;flex-direction:column;gap:16px}
.about-guarantees>div{display:flex;align-items:center;gap:14px;padding:14px;background:#fafafa;border-radius:12px}
.about-guarantees__icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,0.04)}
.about-guarantees div>div{display:flex;flex-direction:column;gap:2px}
.about-guarantees strong{font-size:14px}
.about-guarantees .muted{font-size:12px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.about-process{order:-1}}

/* Hero Spots Progress Bar */
.hero-spots{background:rgba(0,0,0,0.4);backdrop-filter:blur(8px);border-radius:16px;padding:16px 20px;margin:20px 0;max-width:400px;border:1px solid rgba(255,255,255,0.15)}
.hero-spots__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#fff}
.hero-spots__label{font-weight:600;font-size:14px}
.hero-spots__count{font-size:14px}
.hero-spots__count strong{color:#ff9500;font-size:18px;font-weight:800}
.hero-spots__bar{height:10px;background:rgba(255,255,255,0.2);border-radius:999px;overflow:hidden}
.hero-spots__fill{height:100%;background:linear-gradient(90deg,#ff9500,#ff6b00);border-radius:999px;transition:width .5s ease}
@media (max-width:768px){.hero-spots{max-width:100%;margin:16px 0;padding:14px 16px}}

/* Dish image placeholder via pseudo-element — always visible behind img */
.dish__image{position:relative;background:linear-gradient(135deg,#fdf0e0,#f7e0c0);height:200px;overflow:hidden}
.dish__image::before{content:attr(data-emoji);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:72px;color:#b85f17;z-index:0}
.dish__image img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.dish__image img.broken{display:none}
.dark-theme .dish__image{background:linear-gradient(135deg,#3a312a,#2d2723)}
.dark-theme .dish__image::before{color:#e89c50}

/* Cart item actions */
.cart-item{display:flex;flex-direction:column;gap:8px;padding:12px;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:12px;margin-bottom:8px}
.cart-item__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cart-item__title{font-weight:600;font-size:14px;margin-bottom:2px}
.cart-item__actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.cart-item__actions .qty{display:inline-flex;align-items:center;gap:8px;background:#faf6f1;border-radius:999px;padding:2px}
.cart-item__actions .qty-btn{width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#b85f17;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);transition:transform .12s}
.cart-item__actions .qty-btn:hover{transform:scale(1.08)}
.cart-item__actions .qty__value{min-width:20px;text-align:center;font-weight:700;font-size:14px}
.cart-item__remove{width:32px;height:32px;border-radius:50%;border:none;background:#fee;color:#c33;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.cart-item__remove:hover{background:#fdd}

/* Live Support Chat Widget */
.chat-button{position:relative;border:none;outline:none}
.chat-button__dot{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#ff3b30;border:2px solid #fff;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.chat-panel{position:absolute;bottom:74px;right:0;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(72,44,25,0.25);display:flex;flex-direction:column;overflow:hidden;animation:chatSlideUp .25s ease}
.chat-panel[hidden]{display:none !important}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chat-panel__header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff}
.chat-panel__avatar{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.22);color:#fff;font-weight:800;font-size:18px;font-family:'Manrope',sans-serif;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid rgba(255,255,255,0.35)}
.chat-panel__info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.chat-panel__info strong{font-size:15px;font-weight:700}
.chat-panel__status{font-size:12px;opacity:0.92;display:flex;align-items:center;gap:6px}
.chat-panel__online{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.chat-panel__close{background:rgba(255,255,255,0.18);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.chat-panel__close:hover{background:rgba(255,255,255,0.3)}
.chat-panel__messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#faf6f1}
.chat-msg{display:flex;max-width:85%}
.chat-msg--operator{align-self:flex-start}
.chat-msg--customer{align-self:flex-end}
.chat-msg__bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45;word-wrap:break-word;white-space:pre-wrap}
.chat-msg--operator .chat-msg__bubble{background:#fff;color:#2a2a2a;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.chat-msg--customer .chat-msg__bubble{background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff;border-bottom-right-radius:4px}
.chat-panel__form{border-top:1px solid #eee;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:8px}
.chat-panel__contact{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chat-panel__contact input{padding:8px 10px;border:1px solid #e5e0d8;border-radius:10px;font-size:13px;font-family:inherit;outline:none;background:#faf6f1}
.chat-panel__contact input:focus{border-color:#d97a2b;background:#fff}
.chat-panel__input-row{display:flex;gap:8px;align-items:flex-end}
.chat-panel__input-row textarea{flex:1;padding:10px 12px;border:1px solid #e5e0d8;border-radius:14px;font-size:14px;font-family:inherit;outline:none;resize:none;max-height:80px;background:#faf6f1}
.chat-panel__input-row textarea:focus{border-color:#d97a2b;background:#fff}
.chat-panel__send{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chat-panel__send:hover{transform:scale(1.08)}
.chat-panel__send:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.chat-panel__contact[hidden]{display:none}
@media (max-width:480px){.chat-panel{width:calc(100vw - 24px);right:-8px;bottom:78px;height:70vh}}

/* ============ DESIGN IMPROVEMENTS ============ */

/* Extended palette */
:root{
  --green-accent:#5b8a3a;
  --green-accent-soft:#e8f1dc;
  --status-new:#e89c50;
  --status-cooking:#f0c419;
  --status-delivery:#3b9bd9;
  --status-done:#5b8a3a;
  --status-cancelled:#c0392b;
}

/* 2. Manrope typography */
body{font-family:'Manrope','Inter','Segoe UI',Arial,sans-serif !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01'}
h1,h2,h3,h4,h5{font-family:'Manrope','Inter',Arial,sans-serif;letter-spacing:-0.02em;font-weight:800}
h1{line-height:1.1}
h2{line-height:1.15}
.muted,p,span,div,label,input,textarea,button{font-family:inherit}
strong{font-weight:700}
.cart__summary,.metric-box,.hero__meta-item,.timer__value,.total{font-variant-numeric:tabular-nums}
.cart-item__top strong,.about-combo__price{font-variant-numeric:tabular-nums}

/* 1. Hero contrast — subtle headline shadow for readability */
.hero__card h1{text-shadow:0 2px 12px rgba(0,0,0,0.25);font-size:clamp(34px,5vw,56px) !important}

/* Dark theme fixes — ensure readable text everywhere */
.dark-theme{color:var(--text)}
.dark-theme body,.dark-theme p,.dark-theme span,.dark-theme div,.dark-theme label,.dark-theme strong,.dark-theme h1,.dark-theme h2,.dark-theme h3,.dark-theme h4,.dark-theme h5,.dark-theme li,.dark-theme a{color:var(--text)}
.dark-theme .muted{color:var(--muted) !important}
.dark-theme .hero__card h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,0.6)}
.dark-theme .hero__card .hero__lead,.dark-theme .hero__card .eyebrow{color:#f0ebe5}
.dark-theme .hero__meta-item{background:rgba(45,39,35,0.82);border:1px solid rgba(255,255,255,0.08);color:#f0ebe5}
.dark-theme .hero__meta-item strong{color:#fff}
.dark-theme .hero__meta-item span{color:#d5cdc3}
.dark-theme .status-card,.dark-theme .menu-section,.dark-theme .cart,.dark-theme .orders-note,.dark-theme .popular-card,.dark-theme .story-card-v2,.dark-theme .dish,.dark-theme .metric-box,.dark-theme .about-chef,.dark-theme .about-combo,.dark-theme .about-process,.dark-theme .footer__card{color:var(--text)}
.dark-theme .badge{color:var(--text)}
.dark-theme .soft-chip{background:rgba(255,255,255,0.08);color:var(--text);border-color:rgba(255,255,255,0.12)}
.dark-theme input,.dark-theme textarea,.dark-theme select{color:var(--text);background:var(--card-soft);border-color:var(--border)}
.dark-theme input::placeholder,.dark-theme textarea::placeholder{color:var(--muted)}
.dark-theme .cart__summary,.dark-theme .total{color:var(--text)}
.dark-theme .price{color:var(--accent)}
.dark-theme .cart-item{background:var(--card) !important;border-color:var(--border) !important}
.dark-theme .about-chef::before{background:linear-gradient(135deg,#3a312a,#2d2723);color:#fff}
.dark-theme .story-card-v2__date{color:var(--muted)}
.dark-theme .topbar a,.dark-theme .topbar .brand small{color:#f0ebe5}
.dark-theme .chat-tooltip{background:var(--card);color:var(--text)}
.dark-theme .chat-tooltip__text strong{color:var(--text)}
.dark-theme .chat-tooltip__text span{color:var(--muted)}
.dark-theme .chat-tooltip::after{background:var(--card)}
.dark-theme .social-link{background:rgba(255,255,255,0.08);color:#f0ebe5}
.dark-theme .social-link:hover{background:rgba(255,255,255,0.16)}

/* Primary button enhancements */
.btn--primary{box-shadow:0 8px 24px rgba(217,122,43,0.35),0 2px 6px rgba(217,122,43,0.2) !important;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(217,122,43,0.45),0 4px 8px rgba(217,122,43,0.25) !important;filter:brightness(1.05)}
.btn--primary:active{transform:translateY(0)}

/* 5. About: 2 columns instead of 3 */
.about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start}
.about-main{display:flex;flex-direction:column;gap:16px}
.about-process{display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* Chef quote with avatar */
.about-chef{position:relative;padding-left:54px !important}
.about-chef::before{content:'М';position:absolute;top:-12px;left:-12px;width:54px;height:54px;background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;font-family:'Manrope',sans-serif;box-shadow:0 6px 18px rgba(72,44,25,0.18)}

/* 6. Stories: avatars + dates */
.story-card-v2{position:relative;padding-top:56px !important}
.story-card-v2__avatar{position:absolute;top:18px;left:18px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:16px;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.story-card-v2__date{position:absolute;top:24px;right:18px;font-size:12px;color:var(--muted)}

/* 7. Chat tooltip — see flex-based definition near bottom of file */

/* 8. Footer socials + spots pulse + z-index */
.footer__socials{display:flex;gap:10px;margin-top:14px}
.social-link{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.social-link:hover{transform:translateY(-3px) scale(1.06);background:#fff;box-shadow:0 8px 18px rgba(0,0,0,0.14)}
.hero-spots--low .hero-spots__count strong{animation:lowPulse 1.4s ease-in-out infinite;color:#ff3b30 !important}
.hero-spots--low .hero-spots__fill{background:linear-gradient(90deg,#ff3b30,#ff9500) !important;animation:fillPulse 1.4s ease-in-out infinite}
@keyframes lowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes fillPulse{0%,100%{opacity:1}50%{opacity:0.78}}

/* z-index hygiene */
.chat-widget{z-index:9000 !important}
.floating-bar{z-index:7500}
@media (max-width:768px){
  .chat-widget{bottom:90px !important}
}

/* 9. Status colors */
.status-pill--new{background:rgba(232,156,80,0.16);color:#a85d10}
.status-pill--cooking{background:rgba(240,196,25,0.16);color:#947202}
.status-pill--delivery{background:rgba(59,155,217,0.16);color:#1e6996}
.status-pill--done{background:var(--green-accent-soft);color:var(--green-accent)}
.status-pill--cancelled{background:rgba(192,57,43,0.12);color:#a02d20}

/* Eco-green accents for guarantees */
.about-guarantees>div{transition:transform .2s,box-shadow .2s}
.about-guarantees>div:hover{transform:translateX(4px)}
.about-guarantees__icon{background:var(--green-accent-soft) !important;color:var(--green-accent) !important}

/* 10. Count-up + flying dish animation */
.count-up{display:inline-block;transition:transform .3s ease}
.count-up--bump{animation:bump .5s ease}
@keyframes bump{0%,100%{transform:scale(1)}50%{transform:scale(1.15);color:var(--accent)}}

.fly-ghost{position:fixed;width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;background-color:#d97a2b;box-shadow:0 8px 24px rgba(0,0,0,0.25);pointer-events:none;z-index:9999;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;transition:transform .8s cubic-bezier(.5,0,.6,1),opacity .8s ease,width .8s,height .8s}

/* Cart-shake when items added */
.cart-shake{animation:cartShake .35s ease}
@keyframes cartShake{0%,100%{transform:scale(1)}30%{transform:scale(1.06) rotate(-2deg)}60%{transform:scale(0.98) rotate(1deg)}}

/* 12. Accessibility — focus & contrast */
*:focus-visible{outline:3px solid var(--accent) !important;outline-offset:3px;border-radius:6px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent) !important;outline-offset:2px}
.skip-link:focus{box-shadow:0 0 0 3px var(--accent)}

/* History block when hidden */
.order-history[hidden]{display:none !important}

/* Tabular numerals on prices everywhere */
.price,.cart-item strong,.menu-grid .price,.metric-box strong{font-variant-numeric:tabular-nums}

/* Responsive: compact spots on hero */
@media (max-width:600px){
  .hero__card h1{font-size:32px !important;line-height:1.15}
}
.chat-tooltip{position:absolute;bottom:8px;right:74px;width:240px;background:#fff;border-radius:16px;padding:12px 14px 12px 14px;box-shadow:0 12px 30px rgba(72,44,25,0.18);display:flex;align-items:center;gap:10px;animation:chatTipPop .35s cubic-bezier(.34,1.56,.64,1)}
.chat-tooltip[hidden]{display:none !important}
.chat-tooltip::after{content:'';position:absolute;right:-6px;bottom:18px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:2px -2px 4px rgba(72,44,25,0.06)}
.chat-tooltip__avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#d97a2b,#b85f17);color:#fff;font-weight:800;font-size:16px;font-family:'Manrope',sans-serif;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(217,122,43,0.35)}
.chat-tooltip__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.chat-tooltip__text strong{font-size:13px;color:#2a2a2a}
.chat-tooltip__text span{font-size:12px;color:#6b6b6b;line-height:1.35}
.chat-tooltip__close{position:absolute;top:4px;right:6px;background:none;border:none;color:#999;cursor:pointer;font-size:11px;padding:2px 4px;line-height:1;transition:color .15s}
.chat-tooltip__close:hover{color:#333}
@keyframes chatTipPop{0%{opacity:0;transform:translateX(8px) scale(0.92)}100%{opacity:1;transform:translateX(0) scale(1)}}
@media (max-width:480px){.chat-tooltip{width:200px;right:64px}}

/* ============ MOBILE NAV / LAYOUT FIXES ============ */
@media (max-width:800px){
  html,body{overflow-x:hidden}
  .topbar__inner{flex-direction:column !important;align-items:center !important;flex-wrap:nowrap;padding:10px 0 6px;gap:10px}
  .brand{padding:4px 12px;gap:12px;justify-content:center;max-width:100%;width:max-content;margin:0 auto}
  .brand__mark{width:42px;height:42px;border-radius:12px;font-size:20px;flex-shrink:0}
  #brandName{font-size:18px;font-weight:800}
  .brand small{font-size:12px}
  .topbar__actions{display:none}
  .nav{width:100% !important;display:flex !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:center !important;gap:6px !important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 4px 4px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto !important;text-align:center;padding:9px 14px !important;font-size:13px !important;border-radius:12px !important;min-height:0 !important;white-space:nowrap}
  .nav a.nav__cta{padding:10px 16px !important;font-size:13px !important;min-height:0 !important}
  /* Anchor links account for sticky header height */
  main section[id]{scroll-margin-top:120px}
  /* About chef: avatar above card, no left padding */
  .about-chef{padding:48px 20px 20px !important;text-align:center}
  .about-chef::before{position:static !important;display:flex;margin:0 auto 14px;width:60px;height:60px;font-size:26px}
  .about-chef__quote{font-size:16px;padding:16px;text-align:left}
  .about-chef__stats{gap:14px;justify-content:space-around}
  .about-chef__stats strong{font-size:20px}
  .about-chef__stats span{font-size:11px}
  /* Combo items: stack label above value */
  .about-combo{padding:18px}
  .about-combo__items div{flex-wrap:wrap;gap:4px 8px;font-size:14px;padding:10px 12px}
  .about-combo__items strong{min-width:auto !important;flex:0 0 auto}
  .about-combo__items span{flex:1 1 auto;font-size:13px;text-align:right;min-width:0;word-break:break-word}
  .about-combo__price .new{font-size:22px}
  /* Hero text */
  .hero__card h1{word-break:break-word;overflow-wrap:anywhere;hyphens:auto;font-size:clamp(28px,7.5vw,38px) !important;line-height:1.15}
  .hero__card{padding:22px 18px}
  .hero__actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero__actions .btn{width:100%;justify-content:center}
}

/* Hero secondary button — visible on dark photo background */
.hero__actions .btn--secondary{background:rgba(255,255,255,0.92) !important;color:#2f241d !important;border:1px solid rgba(255,255,255,0.6);box-shadow:0 8px 22px rgba(0,0,0,0.22);backdrop-filter:blur(6px);font-weight:700}
.hero__actions .btn--secondary:hover{background:#fff !important;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,0.28)}
.dark-theme .hero__actions .btn--secondary{background:rgba(45,39,35,0.92) !important;color:#f0ebe5 !important;border-color:rgba(255,255,255,0.18)}

@media (max-width:560px){
  .container{padding:0 12px}
  .hero__card{padding:18px !important}
  .hero-badges{gap:6px}
  .hero-badge{font-size:12px;padding:6px 10px}
  .hero__meta{gap:8px}
  .status-card{padding:18px}
  .timer{gap:6px}
  .timer__box{padding:10px 6px}
  .timer__value{font-size:24px !important}
  .order-steps-compact{padding:14px}
  .order-steps-compact__head{gap:8px}
  .footer__card{padding:18px}
  .menu-section{padding:16px}
  .cart{padding:18px}
  h2{font-size:clamp(22px,6vw,30px)}
  .section-head h2{font-size:clamp(22px,6vw,30px)}
  /* Chat widget: smaller and out of the way */
  .chat-widget{bottom:14px !important;right:14px !important}
  .chat-button{width:48px;height:48px;font-size:20px}
  /* Popular grid stays single column */
  .popular-grid{grid-template-columns:1fr !important}
  /* Metrics 2x2 stays */
  .metrics-grid{gap:10px}
  .metric-box{padding:14px}
  .metric-box strong{font-size:22px}
  /* Section headings inside .popular-flow not cropped */
  .popular-flow .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  /* Fix horizontal overflow on cards */
  .menu-intro-card,.popular-flow,.orders-note,.menu-section,.cart,.about-chef,.about-combo,.about-process,.footer__card{max-width:100%;overflow:hidden}
}

/* ============================================================
   MENU WRAPPER - visually unifies menu-intro-card with menu sections
   ============================================================ */
.menu-wrapper{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
.menu-intro-card{background:linear-gradient(135deg,var(--bg-soft) 0%,var(--card) 100%);border-radius:16px;padding:24px;margin-bottom:0;border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0}
.menu-wrapper .menu-section:first-child{border-radius:0 0 16px 16px;margin-top:0}
.menu-wrapper .menu-section{background:var(--card);border:1px solid var(--border);border-top:none;padding:20px 24px}
.menu-wrapper .menu-section:not(:last-child){border-bottom:1px solid var(--border)}
.menu-wrapper #menuContainer{margin-top:0}

/* Dark theme adjustments */
.dark-theme .menu-wrapper{background:var(--card);box-shadow:var(--shadow)}
.dark-theme .menu-intro-card{background:linear-gradient(135deg,rgba(45,39,35,0.8) 0%,var(--card) 100%);border-color:var(--border)}

/* Mobile adjustments */
@media (max-width:800px){
  .menu-wrapper{padding:0;border-radius:16px;margin-bottom:16px;overflow:hidden}
  
  /* Beautiful menu intro for mobile */
  .menu-intro-card{
    padding:20px 16px;
    border-radius:16px 16px 0 0;
    background:linear-gradient(135deg,rgba(217,122,43,0.95) 0%,rgba(196,90,26,0.95) 100%),
               url('/uploads/theme/theme-a716de92a9.jpg') center/cover;
    border:none;
    text-align:center;
    position:relative;
    overflow:hidden;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px)
  }
  .menu-intro-card::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 50%);
    pointer-events:none;
    z-index:0
  }
  .menu-intro-card .menu-intro__badge,
  .menu-intro-card .menu-intro__title,
  .menu-intro-card .menu-intro__text,
  .menu-intro-card .menu-intro__note{
    position:relative;
    z-index:1
  }
  .menu-intro-card .menu-intro__badge{
    display:inline-block;
    background:rgba(255,255,255,0.25);
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    margin-bottom:12px;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.4);
    text-transform:uppercase;
    letter-spacing:0.5px;
    -webkit-box-shadow:0 2px 8px rgba(0,0,0,0.1);
    box-shadow:0 2px 8px rgba(0,0,0,0.1)
  }
  .menu-intro-card .menu-intro__title{
    color:#fff;
    font-size:22px;
    font-weight:700;
    margin-bottom:10px;
    line-height:1.3;
    text-shadow:0 2px 4px rgba(0,0,0,0.2);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
  }
  .menu-intro-card .menu-intro__text{
    color:rgba(255,255,255,0.95);
    font-size:14px;
    line-height:1.5;
    margin-bottom:12px
  }
  .menu-intro-card .menu-intro__note{
    display:-webkit-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.2);
    color:#fff;
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.3);
    -webkit-box-shadow:0 2px 8px rgba(0,0,0,0.1);
    box-shadow:0 2px 8px rgba(0,0,0,0.1)
  }
  /* Fallback for browsers without backdrop-filter support */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .menu-intro-card .menu-intro__badge,
    .menu-intro-card .menu-intro__note{
      background:rgba(255,255,255,0.35)
    }
  }
  
  .menu-wrapper .menu-section{padding:16px;border-radius:0 !important}
  .menu-wrapper .menu-section:first-child{border-radius:0 0 12px 12px !important}
  .menu-wrapper .menu-section:last-child{border-radius:0 0 12px 12px !important}
}

/* ============================================================
   ICONS for order-top-mini (replaces old accent bar with SVG)
   ============================================================ */
.order-top-mini{display:flex;align-items:center !important;gap:12px;padding:10px 0}
.order-top-mini__icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(217,122,43,0.14),rgba(184,95,23,0.10));color:#b85f17;flex:0 0 40px;box-shadow:0 2px 8px rgba(217,122,43,0.15)}
.order-top-mini__icon svg{display:block;width:22px;height:22px;margin:auto}
.order-top-mini__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;text-align:left;justify-content:center}
.order-top-mini__body strong,.order-top-mini strong{font-size:14px !important;font-weight:800 !important;color:var(--text) !important;white-space:normal !important;text-align:left !important;line-height:1.3}
.order-top-mini__body span,.order-top-mini span{color:var(--muted) !important;font-size:12px !important;line-height:1.4 !important;text-align:left !important;display:block !important;word-break:break-word}

/* Order steps compact header with badge alignment */
.order-steps-compact__head{display:flex;align-items:center !important;justify-content:space-between !important;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:12px}
.order-steps-compact__head>div{flex:1;min-width:0}
.order-steps-compact__head strong{font-size:16px;font-weight:700;color:var(--text);display:block;margin-bottom:4px}
.order-steps-compact__sub{font-size:13px;color:var(--muted);line-height:1.4}
.order-steps-compact__head .badge{align-self:center !important;margin-left:auto;white-space:nowrap}
/* Override the old ::before bar — no longer needed */
.order-top-mini::before{display:none !important;content:none !important}
.dark-theme .order-top-mini__icon{background:rgba(217,122,43,0.18);color:#f3b467}

/* Tighten on the narrow desktop sidebar (340px) */
@media (min-width:801px){
  .order-steps-compact{padding:16px;background:var(--card);border-radius:16px;box-shadow:var(--shadow-soft)}
  .order-steps-compact__head{padding:10px 0;margin-bottom:10px}
  .order-top-mini{padding:8px 0}
  .order-top-mini__icon{width:36px;height:36px;flex-basis:36px;border-radius:10px}
  .order-top-mini__icon svg{width:20px;height:20px}
  .order-top-mini__body strong,.order-top-mini strong{font-size:13px !important}
  .order-top-mini__body span,.order-top-mini span{font-size:11px !important}
  .order-steps-compact__head .badge{font-size:12px;padding:6px 12px}
}

/* Mobile adjustments for order steps */
@media (max-width:800px){
  .order-steps-compact{padding:12px}
  .order-steps-compact__head{align-items:flex-start !important;gap:10px}
  .order-steps-compact__head .badge{align-self:flex-start !important;margin-top:2px}
  .order-top-mini{gap:10px;padding:8px 0}
  .order-top-mini__icon{width:36px;height:36px;flex-basis:36px}
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.skeleton{display:block;background:-webkit-gradient(linear,left top,right top,from(rgba(72,44,25,0.07)),color-stop(50%,rgba(72,44,25,0.14)),to(rgba(72,44,25,0.07)));background:linear-gradient(90deg,rgba(72,44,25,0.07) 0%,rgba(72,44,25,0.14) 50%,rgba(72,44,25,0.07) 100%);background-size:200% 100%;-webkit-animation:skeletonShimmer 1.4s ease-in-out infinite;animation:skeletonShimmer 1.4s ease-in-out infinite;border-radius:8px}
@-webkit-keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton--img{aspect-ratio:16/9;width:100%;border-radius:18px 18px 0 0;margin-bottom:0}
.skeleton--line{height:14px;width:100%;margin:8px 0}
.skeleton--lg{height:20px;width:70%}
.skeleton--sm{height:12px;width:50%}
.skeleton--chip{height:28px;width:80px;border-radius:999px}
.skeleton--btn{height:42px;width:100%;border-radius:14px;margin-top:14px}
.dish--skeleton{pointer-events:none;border:1px solid rgba(255,255,255,0.34);background:rgba(255,255,255,0.65);border-radius:22px;overflow:hidden}
.dark-theme .skeleton{background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.05)),color-stop(50%,rgba(255,255,255,0.12)),to(rgba(255,255,255,0.05)));background:linear-gradient(90deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.05) 100%);background-size:200% 100%}

/* ============================================================
   MOBILE BOTTOM-NAV + STICKY CTA + SAFE AREA
   ============================================================ */
.bottom-nav{display:none}
.mobile-cta{display:none}
.pwa-banner{display:none}

@media (max-width:800px){
  /* Add bottom padding so content isn't hidden behind bottom-nav + sticky CTA */
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}

  /* Hide top nav (replaced by bottom-nav). Keep only brand on the topbar. */
  .topbar .nav{display:none !important}
  .topbar__inner{padding:8px 0 6px !important;flex-direction:row !important;justify-content:flex-start !important}

  /* Hide redundant chips footer (info already in topline) */
  .order-steps-compact__footer{display:none !important}

  /* Hide old PWA install button (replaced by banner) and old floating bar */
  .pwa-install{display:none !important}
  .floating-bar{display:none !important}
  /* Hide chat tooltip on mobile to avoid clutter */
  .chat-tooltip{display:none !important}
  /* Move chat button up so it doesn't overlap CTA + bottom-nav */
  .chat-widget{bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important;right:14px !important}

  /* Bottom navigation with cross-browser support */
  .bottom-nav{
    display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr 1fr 1fr;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:8500;
    background:rgba(255,255,255,0.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid rgba(72,44,25,0.10);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    padding:6px 4px calc(6px + constant(safe-area-inset-bottom, 0px));
    -webkit-box-shadow:0 -8px 24px rgba(72,44,25,0.10);box-shadow:0 -8px 24px rgba(72,44,25,0.10);
    -webkit-transform:translateZ(0);transform:translateZ(0);
    will-change:transform
  }
  .dark-theme .bottom-nav{background:rgba(28,22,18,0.96);border-top-color:rgba(255,255,255,0.08)}
  .bottom-nav__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:54px;padding:6px 4px;border-radius:14px;
    text-decoration:none;color:var(--muted);font-size:11px;font-weight:700;
    transition:color .15s,background .15s;position:relative
  }
  .bottom-nav__item svg{stroke:currentColor}
  .bottom-nav__item:active{background:rgba(217,122,43,0.10)}
  .bottom-nav__item--active{color:var(--accent-strong)}
  .bottom-nav__item--accent{color:var(--accent-strong)}
  .bottom-nav__cart{position:relative;display:inline-flex}
  .bottom-nav__badge{
    position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;
    background:var(--accent);color:#fff;border-radius:999px;font-size:10px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(217,122,43,0.45)
  }

  /* Sticky CTA above bottom-nav with cross-browser support */
  .mobile-cta{
    display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;
    position:fixed;left:12px;right:12px;
    bottom:calc(70px + env(safe-area-inset-bottom, 0px));
    bottom:calc(70px + constant(safe-area-inset-bottom, 0px));
    z-index:8400;
    padding:12px 18px;border-radius:18px;
    background:linear-gradient(135deg,#f3b467,#d97a2b);
    color:#fff;text-decoration:none;font-weight:800;
    -webkit-box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10);box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10);
    min-height:56px;
    -webkit-animation:ctaPulse 2.4s ease-in-out infinite;animation:ctaPulse 2.4s ease-in-out infinite;
    -webkit-transform:translateZ(0);transform:translateZ(0);
    will-change:transform
  }
  .mobile-cta:active{transform:scale(0.98)}
  .mobile-cta__label{display:flex;flex-direction:column;line-height:1.2}
  .mobile-cta__label strong{font-size:15px}
  .mobile-cta__label span{font-size:12px;opacity:.92;font-weight:600}
  .mobile-cta__arrow{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.22);display:grid;place-items:center;flex-shrink:0}
  .mobile-cta--hidden{transform:translateY(180%);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
  @-webkit-keyframes ctaPulse{0%,100%{-webkit-box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10);box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10)}50%{-webkit-box-shadow:0 18px 40px rgba(217,122,43,0.62),0 2px 6px rgba(0,0,0,0.10);box-shadow:0 18px 40px rgba(217,122,43,0.62),0 2px 6px rgba(0,0,0,0.10)}}
  @keyframes ctaPulse{0%,100%{-webkit-box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10);box-shadow:0 14px 32px rgba(217,122,43,0.42),0 2px 6px rgba(0,0,0,0.10)}50%{-webkit-box-shadow:0 18px 40px rgba(217,122,43,0.62),0 2px 6px rgba(0,0,0,0.10);box-shadow:0 18px 40px rgba(217,122,43,0.62),0 2px 6px rgba(0,0,0,0.10)}}

  /* PWA install banner with cross-browser support */
  .pwa-banner{
    display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;
    position:fixed;left:12px;right:12px;
    bottom:calc(140px + env(safe-area-inset-bottom, 0px));
    bottom:calc(140px + constant(safe-area-inset-bottom, 0px));
    z-index:8300;
    padding:12px 14px;border-radius:18px;
    background:rgba(255,255,255,0.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    -webkit-box-shadow:0 18px 40px rgba(72,44,25,0.18);box-shadow:0 18px 40px rgba(72,44,25,0.18);
    border:1px solid rgba(72,44,25,0.08);
    -webkit-transform:translateZ(0);transform:translateZ(0);
    will-change:transform
  }
  .pwa-banner[hidden]{display:none !important}
  .pwa-banner__icon{width:40px;height:40px;border-radius:12px;background:rgba(217,122,43,0.14);color:#b85f17;display:grid;place-items:center;flex-shrink:0}
  .pwa-banner__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .pwa-banner__text strong{font-size:14px;color:var(--text)}
  .pwa-banner__text span{font-size:12px;color:var(--muted);line-height:1.3}
  .pwa-banner .btn{min-height:40px;padding:10px 14px;font-size:13px}
  .pwa-banner__close{width:28px;height:28px;border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;border-radius:8px;flex-shrink:0;line-height:1}
  .pwa-banner__close:active{background:rgba(72,44,25,0.08)}
  .dark-theme .pwa-banner{background:rgba(36,28,22,0.98);border-color:rgba(255,255,255,0.08)}

  /* When PWA banner is hidden, push CTA to its lower position */
  .pwa-banner[hidden] ~ .mobile-cta,
  body:not(:has(.pwa-banner:not([hidden]))) .mobile-cta{bottom:calc(70px + env(safe-area-inset-bottom,0px))}

  /* Anchor scroll-margin so bottom-nav doesn't cover landing target */
  main section[id]{scroll-margin-bottom:140px}

  /* Touch targets ≥ 44px */
  .btn,.btn--primary,.btn--secondary,.btn--small,
  .nav a,.bottom-nav__item,.qty-btn,.chat-button,
  .pwa-banner__close,.success-sheet__actions .btn{min-height:44px}
  input,textarea,select{min-height:44px;font-size:16px}
  .qty-btn{min-width:44px}

  /* Hero h1 / lead trim — keep first viewport reachable */
  .hero__card h1{font-size:clamp(26px,7vw,34px) !important;line-height:1.18 !important}
  .hero__lead{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45}

  /* Menu cards: single column with 16:9 image */
  .menu-grid{grid-template-columns:1fr !important;gap:14px !important}
  .dish .dish__image,.dish__image{
    position:relative !important;
    aspect-ratio:16/9 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:18px 18px 0 0 !important;
    overflow:hidden;
    background:linear-gradient(135deg,#fdf0e0,#f7e0c0)
  }
  .dish .dish__image img,.dish__image img{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    z-index:1
  }
  /* Keep broken images hidden so the emoji placeholder (::before) stays visible */
  .dish__image img.broken{display:none !important}
  /* Ensure placeholder emoji shows when image is broken or loading */
  .dish__image::before{z-index:0}

  /* Popular dishes — horizontal swipe carousel with snap */
  .popular-grid{
    display:flex !important;grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;gap:14px !important;
    padding:4px 16px 12px;margin:0 -16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .popular-grid::-webkit-scrollbar{display:none}
  .popular-grid > .popular-card,
  .popular-grid > .story-card-v2{
    flex:0 0 84%;max-width:320px;scroll-snap-align:start
  }
  .popular-flow{padding-bottom:8px}
  .popular-flow::after{
    content:"← смахните для просмотра →";display:block;text-align:center;
    font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.04em
  }

  /* Safe-area for fixed elements on iOS */
  .topbar{padding-top:env(safe-area-inset-top,0px)}
  .preloader{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  #orderStatusBanner{top:calc(72px + env(safe-area-inset-top,0px)) !important}

  /* Hide mobile CTA when user is already in the orders section to avoid covering submit */
  body.cta-hide .mobile-cta{transform:translateY(180%);opacity:0;pointer-events:none}
  body.cta-hide .pwa-banner{transform:translateY(220%);opacity:0;pointer-events:none}
}

/* For very small screens — even more compact */
@media (max-width:380px){
  .mobile-cta__label strong{font-size:14px}
  .mobile-cta__label span{font-size:11px}
  .bottom-nav__item span{font-size:10px}
  .popular-grid > .popular-card,.popular-grid > .story-card-v2{flex:0 0 88%}
}

/* ============================================================
   ABOUT SECTION - with background image like stories
   ============================================================ */
#about{padding:24px 0;position:relative}
#about .popular-flow{
  background:linear-gradient(135deg,rgba(255,255,255,0.98) 0%,rgba(255,255,255,0.95) 100%),
             url('/uploads/theme/theme-a716de92a9.jpg') center/cover;
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden
}
#about .popular-flow::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 20% 30%,rgba(243,180,103,0.15) 0%,transparent 50%),
             radial-gradient(circle at 80% 70%,rgba(111,139,71,0.12) 0%,transparent 50%);
  pointer-events:none;
  border-radius:24px
}
#about .section-head{margin-bottom:24px;position:relative;z-index:1}

/* ============================================================
   ABOUT CAROUSEL - swipeable on mobile (cross-browser)
   ============================================================ */
.about-carousel{position:relative;overflow:hidden;background:transparent}
.about-carousel__track{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-transition:-webkit-transform 0.3s ease;
  transition:-webkit-transform 0.3s ease;
  transition:transform 0.3s ease;
  transition:transform 0.3s ease, -webkit-transform 0.3s ease;
  gap:16px
}
.about-card{
  -webkit-box-flex:0;
  -webkit-flex:0 0 100%;
  -ms-flex:0 0 100%;
  flex:0 0 100%;
  min-width:100%;
  max-width:100%;
  background:var(--card);
  border-radius:16px;
  padding:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.about-carousel__dots{display:none;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;gap:8px;margin-top:16px}
.about-carousel__dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;-webkit-transition:background 0.2s;transition:background 0.2s}
.about-carousel__dot.active{background:var(--accent)}

/* Desktop: show as grid */
@media (min-width:801px){
  .about-carousel__track{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;-webkit-transform:none !important;transform:none !important}
  .about-card{-webkit-box-flex:initial;-webkit-flex:none;-ms-flex:none;flex:none;min-width:auto}
  .about-carousel__dots{display:none !important}
}

/* Mobile: swipeable carousel with background */
@media (max-width:800px){
  #about{padding:16px 0}
  #about .popular-flow{padding:20px;border-radius:16px}
  #about .popular-flow::before{border-radius:16px}
  #about .section-head{padding:0}
  .about-carousel{overflow:hidden;-ms-touch-action:pan-x;touch-action:pan-x}
  .about-carousel__track{
    gap:0;
    -ms-touch-action:pan-x;
    touch-action:pan-x;
    width:100%;
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
  }
  .about-card{
    -webkit-box-flex:0;
    -webkit-flex:0 0 100%;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    min-width:100%;
    max-width:100%;
    padding:16px;
    border:1px solid var(--border);
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0
  }
  .about-carousel__dots{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:12px}
  .about-chef__quote{font-size:15px}
  .about-chef__stats{gap:12px}
  .about-chef__stats strong{font-size:18px}
  .about-guarantees{gap:12px}
  .about-guarantees__icon{width:40px;height:40px;font-size:18px}
}

/* Dark theme for about section */
.dark-theme #about .popular-flow{background:var(--card)}
.dark-theme .about-card{background:var(--card);border-color:var(--border);box-shadow:var(--shadow)}

/* Focus styles for accessibility */
.btn:focus-visible,.dish-card:focus-visible,.about-carousel__dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Skip link for accessibility */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:10000;transition:top 0.3s}
.skip-link:focus{top:0}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}

/* ============================================================
   MENU SECTION - with background image like stories
   ============================================================ */
#menu{padding:24px 0;position:relative}
#menu .menu-wrapper{
  background:linear-gradient(135deg,rgba(255,255,255,0.98) 0%,rgba(255,255,255,0.95) 100%),
             url('/uploads/theme/theme-a716de92a9.jpg') center/cover;
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden
}
#menu .menu-wrapper::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 30% 20%,rgba(243,180,103,0.15) 0%,transparent 45%),
             radial-gradient(circle at 70% 80%,rgba(111,139,71,0.12) 0%,transparent 45%);
  pointer-events:none;
  border-radius:24px
}

/* Mobile: menu as card block */
@media (max-width:800px){
  #menu{padding:16px 0}
  #menu .menu-wrapper{padding:20px;border-radius:16px}
  #menu .menu-wrapper::before{border-radius:16px}
}

/* ============================================================
   HERO SECTION - Mobile optimization
   ============================================================ */
@media (max-width:800px){
  .hero{padding:60px 0 40px}
  .hero h1{font-size:26px;line-height:1.3;margin-bottom:16px}
  .hero p{font-size:15px;line-height:1.6;margin-bottom:24px}
  .hero .btn{width:100%;padding:14px 24px;font-size:16px}
  .hero .badge{font-size:13px;padding:6px 12px}
}

/* ============================================================
   FLOATING BAR - Mobile improvements with backdrop
   ============================================================ */
.floating-bar{
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.95);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,0.08);
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}

.dark-theme .floating-bar{
  background:rgba(45,39,35,0.95);
}

/* ============================================================
   BOTTOM NAV - Mobile safe area support
   ============================================================ */
.bottom-nav{
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}

/* ============================================================
   DISH CARDS - Mobile touch improvements
   ============================================================ */
@media (max-width:800px){
  .dish-card{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  
  .dish-card:active{
    -webkit-transform:scale(0.98);
    transform:scale(0.98);
    box-shadow:0 2px 8px rgba(72,44,25,0.08);
  }
  
  .dish__action{
    min-width:48px;
    min-height:48px;
    -webkit-tap-highlight-color:transparent;
  }
  
  .dish__action svg{
    width:24px;
    height:24px;
  }
}

/* ============================================================
   UNIFIED MOBILE SPACING & SHADOWS
   ============================================================ */
@media (max-width:800px){
  /* Consistent section spacing */
  section{padding:24px 0}
  .container{padding:0 16px}
  
  /* Softer shadows for mobile */
  .menu-wrapper,
  .popular-flow,
  .about-card,
  .combo-card,
  .dish-of-day{
    box-shadow:0 4px 16px rgba(72,44,25,0.06);
  }
  
  /* Unified border-radius */
  .menu-wrapper,
  .popular-flow,
  .about-card,
  .combo-card{border-radius:16px}
  
  /* Smaller badges on mobile */
  .badge{font-size:12px;padding:6px 12px}
}

/* ============================================================
   REDUCED MOTION - Respect user preferences
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .btn,.dish-card,.about-card,.story-card-v2,.combo-item,.process-step,
  .skeleton,.about-carousel__track{
    -webkit-transition:none;
    transition:none;
    -webkit-animation:none;
    animation:none;
  }
}

/* ============================================================
   PAGE TRANSITIONS - Smooth section reveals
   ============================================================ */
.section-fade-in{
  opacity:0;
  -webkit-transform:translateY(30px);
  transform:translateY(30px);
  -webkit-transition:opacity 0.6s ease,-webkit-transform 0.6s ease;
  transition:opacity 0.6s ease,-webkit-transform 0.6s ease;
  transition:opacity 0.6s ease,transform 0.6s ease;
  transition:opacity 0.6s ease,transform 0.6s ease,-webkit-transform 0.6s ease
}
.section-fade-in.visible{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
}

/* ============================================================
   TOAST NOTIFICATIONS - Slide from bottom
   ============================================================ */
.toast-container{
  position:fixed;
  bottom:100px;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:90%;
  max-width:400px;
  pointer-events:none
}
.toast{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--text);
  opacity:0;
  -webkit-transform:translateY(20px);
  transform:translateY(20px);
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
  pointer-events:auto
}
.toast.show{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
}
.toast.success{border-left:4px solid var(--green)}
.toast.error{border-left:4px solid #e74c3c}
.toast.info{border-left:4px solid var(--accent)}

/* ============================================================
   PULL TO REFRESH - Visual indicator
   ============================================================ */
.ptr-indicator{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:60px;
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  -webkit-transition:-webkit-transform 0.3s ease;
  transition:-webkit-transform 0.3s ease;
  transition:transform 0.3s ease;
  transition:transform 0.3s ease,-webkit-transform 0.3s ease;
  z-index:9999;
  border-bottom:1px solid var(--border)
}
.ptr-indicator.visible{
  -webkit-transform:translateY(0);
  transform:translateY(0)
}
.ptr-indicator.spinner::before{
  content:'';
  width:20px;
  height:20px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  -webkit-animation:ptr-spin 1s linear infinite;
  animation:ptr-spin 1s linear infinite
}
@-webkit-keyframes ptr-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes ptr-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/* ============================================================
   CARD HOVER EFFECTS - Lift and glow (desktop only)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .dish-card:hover,.about-card:hover,.story-card-v2:hover{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(72,44,25,0.12);
    border-color:rgba(217,122,43,0.3)
  }
  .popular-card:hover{
    -webkit-transform:scale(1.02);
    transform:scale(1.02);
    box-shadow:0 16px 32px rgba(72,44,25,0.15)
  }
  .guarantee-card:hover{
    -webkit-transform:translateY(-6px);
    transform:translateY(-6px)
  }
}
/* Mobile: subtle press effect */
@media (hover:none) and (pointer:coarse){
  .dish-card:active,.about-card:active,.story-card-v2:active{
    -webkit-transform:scale(0.98);
    transform:scale(0.98)
  }
}

/* ============================================================
   MICRO-INTERACTIONS - Enhanced button feedback
   ============================================================ */
.btn{
  -webkit-transition:all 0.2s ease;
  transition:all 0.2s ease;
  position:relative;
  overflow:hidden
}
.btn::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  background:rgba(255,255,255,0.3);
  border-radius:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  -webkit-transition:width 0.3s ease,height 0.3s ease;
  transition:width 0.3s ease,height 0.3s ease
}
.btn:active::after{
  width:200px;
  height:200px
}
.btn:hover:not(:active){
  -webkit-transform:translateY(-2px);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(217,122,43,0.25)
}

/* ============================================================
   6 UNIQUE NO-HOW FEATURES - Animations & Effects
   ============================================================ */

/* 1. BOUNCING CART - Keyframes */
@-webkit-keyframes cartBounce{
  0%,100%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}
  25%{-webkit-transform:translateY(-8px) scale(1.1);transform:translateY(-8px) scale(1.1)}
  50%{-webkit-transform:translateY(0) scale(0.95);transform:translateY(0) scale(0.95)}
  75%{-webkit-transform:translateY(-4px) scale(1.05);transform:translateY(-4px) scale(1.05)}
}
@keyframes cartBounce{
  0%,100%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}
  25%{-webkit-transform:translateY(-8px) scale(1.1);transform:translateY(-8px) scale(1.1)}
  50%{-webkit-transform:translateY(0) scale(0.95);transform:translateY(0) scale(0.95)}
  75%{-webkit-transform:translateY(-4px) scale(1.05);transform:translateY(-4px) scale(1.05)}
}
.cart-icon{
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease
}

/* 3. PULSING TIMER - Heartbeat animation */
@-webkit-keyframes timerPulse{
  0%,100%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(1.05);transform:scale(1.05)}
}
@keyframes timerPulse{
  0%,100%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(1.05);transform:scale(1.05)}
}
.timer-pulse{
  -webkit-animation:timerPulse 1s ease-in-out infinite;
  animation:timerPulse 1s ease-in-out infinite
}

/* 4. 3D TILT - Smooth perspective */
.dish-card,.about-card,.story-card-v2{
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transition:-webkit-transform 0.3s ease;
  transition:-webkit-transform 0.3s ease;
  transition:transform 0.3s ease;
  transition:transform 0.3s ease,-webkit-transform 0.3s ease
}

/* 5. MAGNETIC BUTTON - Smooth return */
.btn{
  -webkit-transition:-webkit-transform 0.3s ease,box-shadow 0.2s ease;
  transition:-webkit-transform 0.3s ease,box-shadow 0.2s ease;
  transition:transform 0.3s ease,box-shadow 0.2s ease;
  transition:transform 0.3s ease,box-shadow 0.2s ease,-webkit-transform 0.3s ease
}

/* 6. PARALLAX - Background attachment */
.popular-flow,.menu-wrapper{
  background-attachment:fixed;
  -webkit-transition:background-position 0.1s linear;
  transition:background-position 0.1s linear
}
@media (max-width:768px){
  .popular-flow,.menu-wrapper{
    background-attachment:scroll
  }
}