/* ============================================================
   Menu Widget for Elementor — v1.3.0
   ============================================================ */

.mw-wrap { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }
.mw-wrap *, .mw-wrap *::before, .mw-wrap *::after { box-sizing: border-box; }

/* ── Grid ───────────────────────────────────────────── */
.mw-grid {
  --mw-cols: 4;
  --mw-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-gap);
}

.mw-grid--center-leftover { justify-content: center; }
.mw-grid:not(.mw-grid--center-leftover) { justify-content: flex-start; }

/* ── Card ───────────────────────────────────────────── */
.mw-card {
  flex: 0 1 calc((100% - (var(--mw-cols) - 1) * var(--mw-gap)) / var(--mw-cols));
  max-width: calc((100% - (var(--mw-cols) - 1) * var(--mw-gap)) / var(--mw-cols));

  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mw-card:hover {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* Card image — a clickable <button> */
.mw-card-image {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f3f2ef;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  line-height: 0;
  font: inherit;
}

.mw-card-image:focus-visible {
  outline: 3px solid var(--mw-focus-color, #ffd040);
  outline-offset: -3px;
}

.mw-card-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.mw-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  background: #f3f2ef;
  color: #9e9c98;
}

.mw-expand-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  z-index: 1;
}

.mw-card-image:hover .mw-expand-hint,
.mw-card-image:focus-visible .mw-expand-hint {
  opacity: 1;
  transform: scale(1);
}

/* Promo tag badge, overlaid top-left on the image */
.mw-promo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

.mw-promo-pill {
  display: inline-block;
  background: #A25EB5;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

/* Card body — flex column so the footer can be pinned to the bottom */
.mw-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Item name ──────────────────────────────────────── */
.mw-item-name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Description ────────────────────────────────────── */
.mw-item-desc {
  font-size: 0.84375rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(33, 33, 33, 0.65);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mw-item-desc.mw-clamped { cursor: pointer; }

/* Fix: no description shouldn't collapse the card — reserve a small,
   honest gap instead of jumping straight from title to the meta row. */
.mw-item-desc.mw-desc-empty {
  min-height: 10px;
  margin-bottom: 12px;
}

/* ── Meta row: product tags + kcal share one line ──── */
.mw-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px; /* reserved space, even with 0 tags and no kcal */
  margin: 4px 0 14px;
}

.mw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.mw-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: #FFD040;
  color: #212121;
}

.mw-item-calories {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: rgba(33, 33, 33, 0.5);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Card footer: order button (left) + price (right) ─ */
.mw-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #212121;
  padding-top: 14px;
  min-height: 20px;
}

.mw-card-footer.mw-footer-empty { border-top-color: rgba(33, 33, 33, 0.12); }

.mw-item-price {
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1;
  color: #212121;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Order button ("Bestil nu") ─────────────────────── */
.mw-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFD040;
  color: #212121;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  white-space: nowrap;
}

.mw-order-btn:hover { filter: brightness(0.95); }
.mw-order-btn:active { transform: scale(0.98); }
.mw-order-btn svg { flex-shrink: 0; }
.mw-order-btn[hidden] { display: none; }

/* ── Empty state ────────────────────────────────────── */
.mw-empty {
  flex: 1 1 100%;
  text-align: center;
  padding: 3rem;
  opacity: 0.5;
  font-size: 0.9rem;
}

/* ── Lightbox ───────────────────────────────────────── */
.mw-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 100000;
}

.mw-lightbox[hidden] { display: none; }

.mw-lightbox-box {
  position: relative;
  background: #fff;
  color: #212121;
  border-radius: 18px;
  max-width: min(920px, 100vw - 56px);
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .mw-lightbox-box {
    grid-template-columns: 1fr;
    overflow-y: auto;
    max-height: 92vh;
  }
}

/* Image area — padded evenly on all sides, full photo always visible
   (never cropped), sized for square product photography by default.
   min-width: 0 overrides CSS Grid's default min-width: auto on grid
   items — without it, a large photo's natural width can force this
   column (and the whole box) wider than the screen on mobile, which is
   what was causing the box to spill off the right edge. */
.mw-lightbox-img {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #f3f2ef;
  overflow: hidden;
}

@media (max-width: 720px) {
  .mw-lightbox-img { aspect-ratio: 4 / 3; }
}

.mw-lightbox-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.mw-lightbox-promo {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.mw-lightbox-promo:empty { display: none; }
.mw-lightbox-promo .mw-promo-pill { display: inline-block; }

.mw-lightbox-content {
  min-width: 0;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mw-lightbox-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.3; /* was relying on the default ~1.1 — cramped on two-line titles */
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
}

.mw-lightbox-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(33, 33, 33, 0.75);
  margin-bottom: 20px;
  white-space: pre-line;
}
.mw-lightbox-desc:empty { display: none; }

.mw-lightbox-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  margin-bottom: 18px;
}

.mw-lightbox-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mw-lightbox-tags .mw-tag { display: inline-block; }

.mw-lightbox-kcal {
  font-size: 13px;
  color: rgba(33, 33, 33, 0.5);
  white-space: nowrap;
  margin-left: auto;
}

.mw-lightbox-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #212121;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mw-lightbox-price {
  font-size: 20px;
  font-weight: 800;
  margin-left: auto;
  white-space: nowrap;
}

/* Close button — plain glyph, no background chip */
.mw-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: #212121;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
}
.mw-lightbox-close:hover { opacity: 0.6; }