/* ============================================================
   JAFS Larvik – WorldClass v7
   Roligere og tydeligere produktkort på menysiden.
   Ett visuelt hierarki: produkt -> pris -> handling.
   ============================================================ */

.page-menu.worldclass-v7 {
  --wc7-card-bg: #fffefa;
  --wc7-card-line: rgba(49, 35, 25, .11);
  --wc7-card-line-hover: rgba(237, 78, 31, .34);
  --wc7-ink: #17120e;
  --wc7-muted: #726b64;
  --wc7-paper: #f7f1e7;
  --wc7-orange: #ed4e1f;
  --wc7-orange-dark: #b93617;
  --wc7-shadow: 0 14px 38px rgba(47, 31, 20, .085);
  --wc7-shadow-hover: 0 19px 48px rgba(47, 31, 20, .13);
}


.page-menu.worldclass-v7 .menu-group {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0;
}

/* Kortet er med vilje enklere enn tidligere: bilde + innhold + én CTA. */
.page-menu.worldclass-v7 .menu-item.wc7-card {
  display: grid !important;
  grid-template-columns: 146px minmax(0, 1fr) !important;
  grid-template-areas:
    "photo content"
    "photo primary" !important;
  align-items: stretch;
  column-gap: 1.15rem !important;
  row-gap: .85rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 176px;
  margin-bottom: .9rem;
  padding: 1rem !important;
  overflow: hidden;
  border: 1px solid var(--wc7-card-line) !important;
  border-radius: 26px !important;
  background: var(--wc7-card-bg) !important;
  box-shadow: var(--wc7-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-menu.worldclass-v7 .menu-item.wc7-card:hover {
  transform: translateY(-2px);
  border-color: var(--wc7-card-line-hover) !important;
  box-shadow: var(--wc7-shadow-hover) !important;
}

.page-menu.worldclass-v7 .menu-item.wc7-card:focus-within {
  border-color: var(--wc7-orange) !important;
  box-shadow: 0 0 0 4px rgba(237, 78, 31, .12), var(--wc7-shadow-hover) !important;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .menu-item-img {
  grid-area: photo !important;
  align-self: stretch;
  width: 146px !important;
  height: 100% !important;
  min-height: 150px;
  max-height: none;
  margin: 0 !important;
  padding: .35rem !important;
  border: 1px solid rgba(50, 36, 25, .09) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 72% 17%, rgba(255, 211, 76, .20), transparent 41%),
    linear-gradient(145deg, #fffaf1 0%, #f6efe3 100%) !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 7px 11px rgba(36, 24, 16, .12));
  transition: transform .18s ease;
}

.page-menu.worldclass-v7 .menu-item.wc7-card:hover > .menu-item-img {
  transform: translateY(-1px) scale(1.018) !important;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .menu-item-info {
  grid-area: content !important;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: start;
  gap: .55rem;
  padding: .08rem 0 0 !important;
}

.page-menu.worldclass-v7 .wc7-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.page-menu.worldclass-v7 .wc7-title-copy {
  min-width: 0;
  max-width: 100%;
  flex: 1;
}

.page-menu.worldclass-v7 .wc7-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 0;
  margin-bottom: .35rem;
}

.page-menu.worldclass-v7 .wc7-eyebrow:empty { display: none; }

.page-menu.worldclass-v7 .wc7-eyebrow .item-tag {
  position: static !important;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 !important;
  padding: .24rem .55rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffe066 !important;
  color: var(--wc7-ink) !important;
  font: 850 .63rem/1 var(--font-body, sans-serif) !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.page-menu.worldclass-v7 .menu-item-info h3 {
  margin: 0 !important;
  color: var(--wc7-ink);
  font-family: var(--font-body, sans-serif) !important;
  font-size: clamp(1.12rem, 2.2vw, 1.35rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.page-menu.worldclass-v7 .menu-prices {
  display: block !important;
  flex: 0 0 auto;
  min-width: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
}

.page-menu.worldclass-v7 .menu-price {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: .08rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.page-menu.worldclass-v7 .menu-price span {
  display: none !important;
}

.page-menu.worldclass-v7 .menu-price strong {
  color: var(--wc7-ink) !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: clamp(1.42rem, 3vw, 1.78rem) !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  white-space: nowrap;
}

/* Vis kun prisen som er aktiv i Ta med / Spis her-bryteren. */
body:not(.mode-spisher).page-menu.worldclass-v7 .menu-prices .menu-price:last-child:not(:only-child),
body.mode-spisher.page-menu.worldclass-v7 .menu-prices .menu-price:first-child:not(:only-child) {
  display: none !important;
}

.page-menu.worldclass-v7 .menu-item-info > p:not(.allergens) {
  display: -webkit-box !important;
  max-width: 49rem;
  margin: 0 !important;
  overflow: hidden;
  color: var(--wc7-muted) !important;
  font-size: .83rem !important;
  line-height: 1.48 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page-menu.worldclass-v7 .menu-item-info .allergens {
  display: none !important;
  margin: .1rem 0 0 !important;
  padding: .7rem .8rem;
  border: 1px solid rgba(49, 35, 25, .08);
  border-radius: 14px;
  background: var(--wc7-paper);
  color: var(--wc7-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.page-menu.worldclass-v7 .menu-item.is-expanded .menu-item-info .allergens {
  display: block !important;
}

.page-menu.worldclass-v7 .menu-item.is-expanded .menu-item-info > p:not(.allergens) {
  display: block !important;
  overflow: visible;
}

.page-menu.worldclass-v7 .size-pills {
  display: flex;
  gap: .38rem;
  width: 100%;
  margin: .05rem 0 0 !important;
  padding: 0 0 .1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-menu.worldclass-v7 .size-pills::-webkit-scrollbar { display: none; }

.page-menu.worldclass-v7 .size-pill {
  flex: 0 0 auto;
  min-height: 34px;
  padding: .4rem .68rem !important;
  border: 1px solid rgba(49, 35, 25, .14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--wc7-ink) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.page-menu.worldclass-v7 .size-pill.is-active {
  border-color: var(--wc7-ink) !important;
  background: var(--wc7-ink) !important;
  color: #fff !important;
}

.page-menu.worldclass-v7 .wc7-secondary-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .42rem .65rem;
  margin-top: .02rem;
}

.page-menu.worldclass-v7 .combo-btn {
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  margin: 0 !important;
  padding: .42rem .72rem !important;
  border: 1px solid rgba(237, 78, 31, .24) !important;
  border-radius: 999px !important;
  background: rgba(237, 78, 31, .07) !important;
  color: var(--wc7-orange-dark) !important;
  font: 850 .72rem/1 var(--font-body, sans-serif) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.page-menu.worldclass-v7 .combo-btn::before {
  content: "+";
  display: grid;
  width: 18px;
  height: 18px;
  margin-right: .35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--wc7-orange);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
}

.page-menu.worldclass-v7 .combo-btn:hover {
  border-color: rgba(237, 78, 31, .44) !important;
  background: rgba(237, 78, 31, .12) !important;
  color: var(--wc7-orange-dark) !important;
}

.page-menu.worldclass-v7 .wc-details-toggle {
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  margin: 0 !important;
  padding: .35rem .1rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wc7-muted) !important;
  font: 800 .72rem/1.15 var(--font-body, sans-serif) !important;
  text-decoration: none !important;
  text-underline-offset: 3px;
  cursor: pointer;
}

.page-menu.worldclass-v7 .wc-details-toggle::before {
  content: "i";
  display: grid;
  width: 18px;
  height: 18px;
  margin-right: .35rem;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 900 .68rem/1 var(--font-body, sans-serif);
}

.page-menu.worldclass-v7 .wc-details-toggle:hover {
  color: var(--wc7-ink) !important;
}

/* Én tydelig hovedhandling. Prisen står kun i tittellinjen. */
.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn {
  grid-area: primary !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  justify-self: stretch !important;
  width: 100%;
  min-height: 50px !important;
  margin: 0 !important;
  padding: .78rem 1rem !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--wc7-ink) !important;
  color: #fff !important;
  font: 850 .86rem/1.1 var(--font-body, sans-serif) !important;
  letter-spacing: -.005em;
  box-shadow: none !important;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn::after {
  content: "→";
  margin-left: auto;
  font-size: 1.08rem;
  line-height: 1;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn:hover {
  transform: translateY(-1px);
  background: #000 !important;
  box-shadow: 0 10px 22px rgba(17, 14, 11, .17) !important;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn:active {
  transform: translateY(0) scale(.995);
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn .add-btn-price {
  display: none !important;
}

.page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn .add-btn-label {
  display: inline;
}

.page-menu.worldclass-v7 .menu-item.wc7-simple > .add-btn {
  background: var(--wc7-orange) !important;
}
.page-menu.worldclass-v7 .menu-item.wc7-simple > .add-btn:hover {
  background: #d93f17 !important;
}

.page-menu.worldclass-v7 .menu-item.is-sold-out {
  opacity: .72;
}
.page-menu.worldclass-v7 .menu-item.is-sold-out > .add-btn::after { display: none; }

/* Mindre skjermer: samme hierarki, men mer kompakt og uten trang tekst. */
@media (max-width: 720px) {
  .page-menu.worldclass-v7 .menu-item.wc7-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: .85rem !important;
    row-gap: .68rem !important;
    min-height: 152px;
    padding: .8rem !important;
    border-radius: 22px !important;
  }

  .page-menu.worldclass-v7 .menu-item.wc7-card > .menu-item-img {
    width: 112px !important;
    min-height: 132px;
    border-radius: 17px !important;
  }

  .page-menu.worldclass-v7 .wc7-title-row { gap: .55rem; }
  .page-menu.worldclass-v7 .menu-item-info h3 {
    font-size: 1.03rem !important;
    line-height: 1.12 !important;
  }
  .page-menu.worldclass-v7 .menu-price strong { font-size: 1.38rem !important; }
  .page-menu.worldclass-v7 .menu-price span { font-size: .57rem !important; }
  .page-menu.worldclass-v7 .menu-item-info > p:not(.allergens) {
    font-size: .75rem !important;
    -webkit-line-clamp: 2;
  }
  .page-menu.worldclass-v7 .wc7-secondary-actions { gap: .25rem .52rem; }
  .page-menu.worldclass-v7 .combo-btn,
  .page-menu.worldclass-v7 .wc-details-toggle {
    min-height: 30px;
    font-size: .66rem !important;
  }
  .page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: .79rem !important;
  }
}

@media (max-width: 430px) {
  .page-menu.worldclass-v7 .menu-item.wc7-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    column-gap: .72rem !important;
    padding: .72rem !important;
  }
  .page-menu.worldclass-v7 .menu-item.wc7-card > .menu-item-img {
    width: 96px !important;
    min-height: 118px;
    padding: .2rem !important;
  }
  .page-menu.worldclass-v7 .menu-item-info h3 { font-size: .96rem !important; }
  .page-menu.worldclass-v7 .menu-price strong { font-size: 1.26rem !important; }
  .page-menu.worldclass-v7 .menu-item-info > p:not(.allergens) { display: none !important; }
  .page-menu.worldclass-v7 .menu-item.is-expanded .menu-item-info > p:not(.allergens) { display: block !important; }
  .page-menu.worldclass-v7 .wc7-eyebrow .item-tag { font-size: .56rem !important; }
  .page-menu.worldclass-v7 .combo-btn,
  .page-menu.worldclass-v7 .wc-details-toggle { font-size: .62rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .page-menu.worldclass-v7 .menu-item.wc7-card,
  .page-menu.worldclass-v7 .menu-item.wc7-card > .menu-item-img,
  .page-menu.worldclass-v7 .menu-item.wc7-card > .add-btn {
    transition: none !important;
  }
}