/* ============================================================
   PYCHA CATERING — Weekly Menu Popup — Premium Redesign v3
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ─── Color palette ────────────────────────────────────── */
  --pc-cream:         #FBF7EF;
  --pc-cream-light:   #FDFAF4;
  --pc-cream-warm:    #F8F1DF;
  --pc-sidebar-bg:    #F5EFDF;
  --pc-card-bg:       #FFFDF8;
  --pc-green-deep:    #0F3D1E;
  --pc-green-mid:     #2F7D32;
  --pc-green:         #3F8F35;
  --pc-green-light:   #5DA849;
  --pc-green-pale:    #EEF5E4;
  --pc-green-pill:    linear-gradient(135deg, #3F8F35 0%, #2F7D32 50%, #1B5E20 100%);
  --pc-ink:           #0F3D1E;
  --pc-ink-light:     #1C4A24;
  --pc-muted:         #5A7252;
  --pc-dot:           rgba(22, 60, 30, 0.15);
  --pc-line:          rgba(22, 60, 30, 0.08);
  --pc-border-subtle: rgba(22, 60, 30, 0.05);
  --pc-shadow:        rgba(33, 45, 27, 0.12);
  --pc-shadow-lg:     rgba(33, 45, 27, 0.18);
  --pc-shadow-sm:     rgba(33, 45, 27, 0.05);

  /* ─── Radii ────────────────────────────────────────────── */
  --pc-radius-xl:     28px;
  --pc-radius-lg:     26px;
  --pc-radius-md:     18px;
  --pc-radius-sm:     12px;
  --pc-radius-pill:   999px;

  /* ─── Typography ───────────────────────────────────────── */
  --pc-font-body:     'Nunito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --pc-font-head:     'Nunito', system-ui, sans-serif;

  /* ─── Layout ───────────────────────────────────────────── */
  --sidebar-w:        360px;
}

/* ─── Body lock ──────────────────────────────────────────── */
body.modal-open {
  overflow: hidden;
}

/* ─── Button morphing ripple ─────────────────────────────── */
.menu-btn-ripple {
  position: fixed;
  z-index: 99990;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.85); /* var(--pc-cream) with 85% opacity */
  pointer-events: none;
  transform: scale(0);
  transform-origin: center center;
  opacity: 0.92;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY — blur + darken
   ═══════════════════════════════════════════════════════════ */

.catering-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 32px);
  background: rgba(8, 16, 6, 0.50);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

.catering-overlay.active {
  visibility: visible;
}

/* ─── Snapshot mode ──────────────────────────────────────── */
html.weekly-popup-snapshot .catering-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}
html.weekly-popup-snapshot .catering-modal {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL SHELL — Premium, HUGE, desktop-like
   ═══════════════════════════════════════════════════════════ */

.catering-modal {
  width: min(96vw, 1680px);
  max-width: 1680px;
  height: min(94vh, 960px);
  max-height: 960px;
  min-height: 860px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: var(--pc-radius-xl);
  background: var(--pc-cream);
  box-shadow:
    0 8px 24px var(--pc-shadow-sm),
    0 32px 84px var(--pc-shadow),
    0 80px 200px var(--pc-shadow-lg);
  font-family: var(--pc-font-body);
  transform: translateY(28px) scale(0.92);
  opacity: 0;
  will-change: transform, opacity;
  position: relative;
}

.catering-modal:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — Wide, cream, premium avatar, categories
   ═══════════════════════════════════════════════════════════ */

.wmp-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px 36px;
  background: var(--pc-sidebar-bg);
  border-right: 1px solid rgba(22, 60, 30, 0.08);
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0;
  position: relative;
}

/* Decorative botanical — sidebar bottom */
.wmp-sidebar::after {
  content: '';
  position: absolute;
  bottom: 90px;
  right: -14px;
  width: 130px;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg width='130' height='180' viewBox='0 0 130 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90 10 C45 30 18 75 30 150' stroke='%233F8F35' stroke-width='1.8' fill='none' opacity='0.16' stroke-linecap='round'/%3E%3Cpath d='M90 10 C110 55 90 110 30 150' stroke='%233F8F35' stroke-width='1.8' fill='none' opacity='0.12' stroke-linecap='round'/%3E%3Cpath d='M60 80 C70 60 80 40 90 10' stroke='%233F8F35' stroke-width='1.2' fill='none' opacity='0.10' stroke-linecap='round'/%3E%3Cellipse cx='90' cy='10' rx='8' ry='12' fill='%233F8F35' opacity='0.06' transform='rotate(-30,90,10)'/%3E%3Cellipse cx='62' cy='55' rx='10' ry='16' fill='%233F8F35' opacity='0.05' transform='rotate(-50,62,55)'/%3E%3Cellipse cx='38' cy='110' rx='9' ry='14' fill='%233F8F35' opacity='0.04' transform='rotate(-60,38,110)'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

/* Decorative botanical — sidebar top-right */
.wmp-sidebar::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  width: 70px;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg width='70' height='90' viewBox='0 0 70 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 80 C24 58 42 36 60 10' stroke='%233F8F35' stroke-width='1' fill='none' opacity='0.08' stroke-linecap='round'/%3E%3Cpath d='M10 80 C38 64 50 42 60 10' stroke='%233F8F35' stroke-width='1' fill='none' opacity='0.06' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='10' rx='6' ry='9' fill='%233F8F35' opacity='0.05' transform='rotate(-20,60,10)'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

/* Chef avatar — plain image without decorative frame */
.wmp-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.wmp-avatar {
  width: 158px;
  height: 158px;
  flex: 0 0 158px;
  border-radius: 0;
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
  z-index: 1;
}

.wmp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wmp-avatar-laurel {
  display: none;
}

/* "Wybierz kategorię" label */
.wmp-chef-img {
    display: block;
    width: 190px;
    height: 190px;
    object-fit: contain;
    margin: 0 auto 8px;
    position: relative;
    z-index: 1;
    margin-top: -30px;
}

.wmp-cat-label {
    font-family: var(--pc-font-head);
    font-size: 20px;
    font-weight: 500;
    color: #5b7c2d;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    text-align: center;
    text-transform: none;
    position: relative;
    z-index: 1;
}

/* Category nav list */
.wmp-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.wmp-cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--pc-radius-md);
    background: transparent;
    color: var(--pc-ink-light);
    font-family: var(--pc-font-body);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    line-height: 1.25;
    position: relative;
}

.wmp-cat-icon-wrap {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 220ms ease;
  border: none;
}

.wmp-cat-btn img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
}

/* Inactive icon color — natural green tint */
.wmp-cat-btn:not(.active) img {
  mix-blend-mode: normal;
  filter: none;
}

.wmp-cat-btn:hover:not(.active) {
  background: rgba(63, 143, 53, 0.08);
  color: var(--pc-green-deep);
}

.wmp-cat-btn:hover:not(.active) .wmp-cat-icon-wrap {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(63, 143, 53, 0.16);
  border-color: rgba(63, 143, 53, 0.2);
}

.wmp-cat-btn:hover:not(.active) img {
  transform: scale(1.1);
}

/* Active category — green gradient pill with leaf texture */
.wmp-cat-btn.active {
    background: url(https://i.imgur.com/j5R5EIY.png) no-repeat center / cover;
    color: #ffffff;
    box-shadow: 0 8px 24px rgb(94 126 47 / 49%), 0 3px 8px rgba(47, 125, 50, 0.20);
    padding: 11px 25px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

.wmp-cat-btn.active .wmp-cat-icon-wrap {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Subtle leaf texture on active category */
.wmp-cat-btn.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='90' height='55' viewBox='0 0 90 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M65 5 C42 14 28 32 38 52' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.15' stroke-linecap='round'/%3E%3Cpath d='M65 5 C78 28 66 44 38 52' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.10' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 65px auto;
  pointer-events: none;
}

.wmp-cat-btn.active img {
  filter: brightness(0) invert(1);
  transform: scale(1.05);
}

/* Fresh ingredients box — premium */
.wmp-fresh-box {
  margin-top: auto;
  width: 100%;
  padding: 24px 20px;
  border-radius: 20px;
  background: #f4f0e6;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Decorative leaf in fresh box background */
.wmp-fresh-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 140px;
  height: 100%;
  background: url("https://i.imgur.com/Cz0Y9i4.png") no-repeat right center / contain;
  pointer-events: none;
}

.wmp-fresh-box h4 {
    margin: 0 0 12px;
    font-family: var(--pc-font-head);
    font-size: 17px;
    font-weight: 300;
    color: #68893f;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
    text-transform: capitalize;
} .wmp-fresh-box p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #4c6250;
    font-weight: 400;
    padding-right: 30px;
    position: relative;
    z-index: 2;
    font-family: 'Nunito';
}

/* PDF button — wide, elegant */
.wmp-pdf-btn {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border: none;
  border-radius: 20px;
  background: #f4f0e6;
  color: #1e4524;
  font-family: var(--pc-font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 220ms ease;
  text-decoration: none;
  position: relative;
  z-index: 1;
  box-shadow: -2px 1px 10px 7px #ece6d4;
}

.wmp-pdf-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
  flex: 0 0 20px;
  color: #1e4524;
}

.wmp-pdf-btn:hover {
  background: var(--pc-green-mid);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(47, 125, 50, 0.3);
}

.wmp-pdf-btn:hover svg {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   MAIN AREA — spacious, premium
   ═══════════════════════════════════════════════════════════ */

.wmp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 60px 64px 48px;
  background: var(--pc-cream);
  position: relative;
}

/* ─── Header row ──────────────────────────────────────────── */
.wmp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.wmp-title {
  font-family: var(--pc-font-head);
  font-size: 40px;
  font-weight: 300;
  font-style: normal;
  color: #0a410b;
  line-height: 1.10;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.wmp-date-row svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    flex: 0 0 20px;
    color: #2e492f;
} .wmp-date-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f3d1e;
    font-size: 17px;
    font-weight: 500;
}

/* Close button — bigger, round, premium */
.catering-close-btn {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(22, 60, 30, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(33, 45, 27, 0.08);
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.25, 1, 0.5, 1);
  margin-top: -4px;
  color: var(--pc-green-mid);
}

.catering-close-btn:hover {
  transform: scale(1.08);
  background: #fff;
  border-color: rgba(47, 125, 50, 0.25);
  box-shadow: 0 8px 24px rgba(33, 45, 27, 0.16);
  color: var(--pc-green-deep);
}

.catering-close-btn:active {
  transform: scale(0.94);
}

.catering-close-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.catering-close-btn:hover .catering-close-icon {
  transform: rotate(90deg);
}

/* ─── Day tabs — larger, stretched ───────────────────── */
.catering-tabs-container {
  flex: 0 0 auto;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.catering-days {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.catering-day-btn {
    flex: 1;
    min-height: 20px;
    padding: 10px 18px;
    border: 1.5px solid rgba(22, 60, 30, 0.12);
    border-radius: var(--pc-radius-pill);
    background: rgba(255, 255, 255, 0.85);
    color: var(--pc-ink-light);
    font-family: var(--pc-font-body);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 400;
    cursor: pointer;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(33, 45, 27, 0.05);
    margin-top: 20px;
}

.catering-day-btn:hover:not(.active) {
  color: var(--pc-green-deep);
  border-color: rgba(47, 125, 50, 0.3);
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 143, 53, 0.15);
}

/* Active day — green gradient with leaf texture */
.catering-day-btn.active {
    border-color: transparent;
    color: #fff;
    background: url(https://i.imgur.com/EVrO4hh.png) no-repeat center / cover;
    box-shadow: 0 8px 24px rgb(90 120 45 / 57%), 0 3px 8px rgba(47, 125, 50, 0.18);
    transform: translateY(-1px);
    position: relative;
    overflow: hidden;
}

.catering-day-btn.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='70' height='45' viewBox='0 0 70 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55 5 C35 12 20 25 28 42' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.12' stroke-linecap='round'/%3E%3Cpath d='M55 5 C65 20 55 38 28 42' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.08' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 45px auto;
  pointer-events: none;
}

/* ─── Body (scrollable) ──────────────────────────────────── */
.catering-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 143, 53, 0.2) transparent;
  position: relative;
  z-index: 1;
}

.catering-body::-webkit-scrollbar { width: 6px; }
.catering-body::-webkit-scrollbar-track { background: transparent; }
.catering-body::-webkit-scrollbar-thumb {
  border-radius: var(--pc-radius-pill);
  background: rgba(63, 143, 53, 0.2);
}

/* Legacy elements — hidden */
.catering-footer { display: none !important; }
.catering-header { display: none; }
.catering-header-left,
.catering-header-titles,
.catering-header-icon-wrap,
.catering-header-main,
.catering-header-sub { display: none; }

/* ═══════════════════════════════════════════════════════════
   CATEGORY VIEW — Premium card + large food photo
   ═══════════════════════════════════════════════════════════ */

.wmp-category-view {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 0;
  position: relative;
}

/* ─── Premium content card — HUGE, spacious ─────────────── */
.wmp-content-card {
  background: var(--pc-card-bg);
  border: 1px solid var(--pc-border-subtle);
  border-radius: var(--pc-radius-lg);
  box-shadow: 0 8px 32px rgba(33, 45, 27, 0.05);
  padding: 56px 64px;
  min-height: 560px;
  display: flex;
  gap: 0;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Left: dish list */
.wmp-list-col {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 48px;
  max-width: 55%;
  position: relative;
  z-index: 2;
}

/* Category heading with icon */
.wmp-cat-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.wmp-cat-heading-icon {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  border-radius: 50%;
  background: rgba(63, 143, 53, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(63, 143, 53, 0.12);
}

.wmp-cat-heading-icon img {
  width: 300px !important;
  height: 300px !important;
  object-fit: contain;
  /* mix-blend-mode: multiply; */
}

.wmp-cat-heading h2 {
    font-family: var(--pc-font-head);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 400;
    color: #326141;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: none;
}

.wmp-cat-heading-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* Decorative separator under heading */
.wmp-heading-divider {
  width: 64px;
  height: 4px;
  margin: 0;
  border-radius: var(--pc-radius-pill);
  background: linear-gradient(90deg, var(--pc-green) 0%, var(--pc-green-light) 100%);
  opacity: 0.5;
}

/* Menu items — generous spacing, elegant */
.wmp-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 0;
    color: var(--pc-ink-light);
    font-family: var(--pc-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    border-bottom: 1px solid rgba(22, 60, 30, 0.04);
    transition: background 160ms ease;
}

.wmp-menu-item:last-child {
  padding-bottom: 8px;
  border-bottom: none;
}

.wmp-menu-item:hover {
  background: rgba(63, 143, 53, 0.02);
}

.wmp-item-num {
    flex: 0 0 28px;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 500;
    color: #315232;
    padding-top: 2px;
}

.wmp-item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.wmp-item-name {
  flex: 0 1 auto;
  line-height: 1.55;
  padding-bottom: 3px;
  transition: color 160ms ease;
}

.wmp-menu-item:hover .wmp-item-name {
  color: var(--pc-green-deep);
}

.wmp-item-dots {
  flex: 1 1 0%;
  min-width: 20px;
  border-bottom: 2px dotted var(--pc-dot);
  margin: 0 16px 8px;
  transition: border-color 160ms ease;
}

.wmp-menu-item:hover .wmp-item-dots {
  border-color: rgba(63, 143, 53, 0.35);
}

.wmp-item-price {
    flex: 0 0 auto;
    color: #224723;
    font-family: var(--pc-font-body);
    font-weight: 500;
    font-size: clamp(16px, 1.3vw, 20px);
    min-width: 85px;
    text-align: right;
    white-space: nowrap;
    padding-bottom: 2px;
    transition: transform 160ms ease;
}

.wmp-menu-item:hover .wmp-item-price {
  transform: scale(1.05);
}

/* ─── Right: photo column — natural blend ──── */
.wmp-photo-col {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border-top-right-radius: 26px;
  border-bottom-right-radius: 26px;
  z-index: 1;
}

.wmp-food-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Smoothly blend the left edge of the photo into the card background */
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wmp-photo-col:hover .wmp-food-photo {
  transform: scale(1.03);
}

/* Decorative branches near photo */
.wmp-photo-branch {
  display: none;
}

/* Particles */
.pc-btn-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99991;
  opacity: 0;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1600px) {
  .catering-modal { width: 95vw; min-height: 780px; }
  .wmp-main { padding: 52px 52px 40px; }
  .wmp-content-card { padding: 48px 52px; min-height: 520px; }
  .wmp-photo-col { width: 44%; }
  .wmp-list-col { max-width: 56%; }
}

@media (max-width: 1400px) {
  .catering-modal { width: 96vw; min-height: 720px; }
  :root { --sidebar-w: 300px; }
  .wmp-sidebar { padding: 40px 24px 30px; }
  .wmp-avatar { width: 140px; height: 140px; flex: 0 0 140px; }
  .wmp-avatar-laurel { width: 200px; height: 200px; }
  .wmp-main { padding: 44px 44px 32px; }
  .wmp-content-card { padding: 40px 44px; min-height: 480px; }
  .wmp-photo-col { width: 42%; }
  .wmp-list-col { max-width: 58%; padding-right: 32px; }
}

@media (max-width: 1200px) {
  .catering-modal { width: 97vw; min-height: 660px; }
  :root { --sidebar-w: 280px; }
  .wmp-main { padding: 36px 36px 28px; }
  .wmp-content-card { padding: 32px 36px; min-height: 440px; }
  .wmp-photo-col { width: 40%; }
  .wmp-list-col { max-width: 60%; padding-right: 24px; }
  .catering-days { gap: 10px; }
}

@media (max-width: 960px) {
  :root { --sidebar-w: 240px; }
  .wmp-sidebar { padding: 32px 20px 24px; }
  .wmp-main { padding: 28px 28px 22px; }
  .wmp-photo-col { width: 36%; }
  .wmp-list-col { max-width: 64%; padding-right: 18px; }
  .wmp-content-card { padding: 26px 28px; min-height: 400px; }
  .wmp-avatar { width: 110px; height: 110px; flex: 0 0 110px; }
  .wmp-avatar-laurel { width: 160px; height: 160px; }
  .catering-days { gap: 8px; }
}

@media (max-width: 720px) {
  .catering-overlay { padding: 0; align-items: flex-end; }

  .catering-modal {
    --wmp-mobile-scroll-gap: 8px;
    --wmp-mobile-cat-item: calc((100vw - 40px - 32px) / 5.2);
    --wmp-mobile-day-item: calc((100vw - 40px - 24px) / 4.2);
    width: 100%;
    height: 94vh;
    max-height: 94vh;
    min-height: 0;
    border-radius: 24px 24px 0 0;
    display: grid;
    grid-template-columns: 66px 1fr auto;
    grid-auto-rows: min-content;
    padding: 24px 20px 40px;
    gap: 16px 0;
    background: #fdfcf5;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .wmp-sidebar, .wmp-main {
    display: contents;
  }

  .wmp-sidebar::after { display: none; }
  .wmp-sidebar::before { display: none; }

  /* Header */
  .wmp-avatar-wrap {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0;
    width: 66px;
    height: 66px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wmp-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-width: 2px;
    box-shadow: none;
  }

  .wmp-avatar-laurel {
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .wmp-header {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    margin: 0;
  }

  .wmp-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .wmp-title {
    font-size: 24px;
    font-weight: 700;
    color: #0b250c;
    margin: 0;
  }

  .wmp-date-row {
    font-size: 13px;
    color: #4c6250;
    gap: 6px;
  }

  .catering-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-top: 0;
  }

  .wmp-cat-label { display: none; }

  /* Categories */
  .wmp-cat-list {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--wmp-mobile-scroll-gap);
    padding-bottom: 16px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 135, 69, 0.7) rgba(91, 135, 69, 0.14);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    top: 0;
  }
  .wmp-cat-list::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .wmp-cat-list::-webkit-scrollbar-track {
    background: rgba(91, 135, 69, 0.14);
    border-radius: 999px;
  }
  .wmp-cat-list::-webkit-scrollbar-thumb {
    background: rgba(91, 135, 69, 0.72);
    border-radius: 999px;
  }

  .wmp-cat-list > li {
    flex: 0 0 var(--wmp-mobile-cat-item);
    scroll-snap-align: start;
  }

  .wmp-cat-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    width: 100%;
    min-height: 104px;
    flex: none;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-align: center;
    font-size: 11.5px;
    white-space: normal;
    line-height: 1.2;
    color: #4c6250;
  }

  .wmp-cat-btn.active {
    background: #5b8745;
    color: #fff;
  }

  .wmp-cat-btn.active img {
    filter: brightness(0) invert(1);
  }

  .wmp-cat-icon-wrap {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 0;
    margin-right: 0;
  }

  .wmp-cat-btn img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  /* Day Tabs */
  .catering-tabs-container {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    margin-bottom: 12px;
  }

  .catering-days {
    display: flex;
    justify-content: flex-start;
    gap: var(--wmp-mobile-scroll-gap);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 14px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 135, 69, 0.7) rgba(91, 135, 69, 0.14);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .catering-days::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .catering-days::-webkit-scrollbar-track {
    background: rgba(91, 135, 69, 0.14);
    border-radius: 999px;
  }
  .catering-days::-webkit-scrollbar-thumb {
    background: rgba(91, 135, 69, 0.72);
    border-radius: 999px;
  }

  .catering-day-btn {
    flex: 0 0 var(--wmp-mobile-day-item);
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    color: #4c6250;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    margin-top: 0;
    scroll-snap-align: start;
  }

  .catering-day-btn.active {
    background: #5b8745;
    color: #fff;
    border-color: #5b8745;
  }

  /* Body */
  .catering-body {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    overflow: visible;
  }

  .wmp-category-view {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* White Content Card */
  .wmp-content-card {
    width: 100%;
    padding: 18px 16px 20px;
    background: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.03);
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
  }

  .wmp-photo-col {
    position: relative;
    width: 100%;
    height: 160px;
    flex: 0 0 160px;
    border-radius: 14px;
    display: block;
    margin-bottom: 16px;
    order: -1;
  }

  .wmp-food-photo {
    border-radius: 14px;
  }

  .wmp-photo-branch { display: none; }

  .wmp-list-col {
    max-width: 100%;
    padding: 0;
  }

  .wmp-cat-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    text-align: center;
  }

  .wmp-cat-heading-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: #f1f4ea;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }

  .wmp-cat-heading-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  .wmp-cat-heading h2 {
    font-size: 22px;
    color: #0b250c;
    text-align: center;
  }

  .wmp-cat-heading-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .wmp-heading-divider {
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 8px;
    width: 48px;
    height: 3px;
    background: #a9cd93;
    border-radius: 3px;
  }

  /* Item list */
  .wmp-menu-item {
    padding: 14px 0;
    font-size: 13px;
    border-bottom: 1px dotted rgba(0,0,0,0.12);
    gap: 12px;
    align-items: flex-start;
    text-align: left;
  }

  .wmp-menu-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .wmp-item-num {
    color: #47843d;
    font-weight: 700;
    flex: 0 0 16px;
    font-size: 14px;
  }

  .wmp-item-body {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
  }

  .wmp-item-name {
    color: #2e4d2b;
    font-weight: 600;
    flex: 1 1 auto;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.4;
  }

  .wmp-item-dots {
    display: none; /* Hide dots on mobile */
  }

  .wmp-item-price {
    font-weight: 700;
    color: #0b250c;
    flex: 0 0 auto;
    text-align: right;
    font-size: 14.5px;
    min-width: 0;
  }

  /* Fresh box */
  .wmp-fresh-box {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    background: #f4f0e6;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }

  .wmp-fresh-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 100px;
    height: 100%;
    background: url("https://i.imgur.com/Cz0Y9i4.png") no-repeat right center / contain;
    pointer-events: none;
    border: none;
    border-radius: 0;
    flex: none;
  }

  .wmp-fresh-box h4 {
    margin: 0;
    font-size: 16px;
    color: #47843d;
    flex: none;
    line-height: 1.2;
    text-transform: capitalize;
  }
  
  .wmp-fresh-box p {
    margin: 0;
    font-size: 12.5px;
    color: #555;
    line-height: 1.4;
    flex: none;
    padding-right: 24px;
    position: relative;
    z-index: 2;
  }

  /* PDF Button */
  .wmp-pdf-btn {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
    display: flex;
    margin-top: 16px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #5b8745;
    color: white;
    border: none;
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(91, 135, 69, 0.2);
  }

  .wmp-pdf-btn svg {
    color: white;
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 440px) {
  .catering-day-btn {
    flex-basis: var(--wmp-mobile-day-item);
    min-width: 0;
    font-size: 12px;
    padding: 0 8px;
  }

  .wmp-cat-btn {
    width: 100%;
    min-height: 96px;
    flex: none;
    font-size: 11px;
    padding: 10px 6px;
  }
}