/* =====================================================================
   DIVINO MENU — PUBLIC MENU STYLES
   ---------------------------------------------------------------------
   All selectors prefixed with `.divino-menu` to win specificity battles
   against the active theme and Elementor's CSS. Uses tokens from
   tokens.css — never hardcode values here.
   ===================================================================== */

/* ============ CONTAINER ============ */
.divino-menu {
  width: 100%;
  max-width: var(--divino-max-width);
  margin: 0 auto;
  padding: 0 var(--divino-page-padding-x);
  box-sizing: border-box;
  color: var(--divino-color-primary);
  background: var(--divino-color-background);
  font-family: var(--divino-font-item-name);
}

.divino-menu *,
.divino-menu *::before,
.divino-menu *::after {
  box-sizing: border-box;
}

/* ============ SECTIONS ============ */
.divino-menu .divino-section {
  margin-bottom: var(--divino-spacing-section);
}

.divino-menu .divino-section:last-child {
  margin-bottom: 0;
}

.divino-menu .divino-section-header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--divino-spacing-section-title);
}

.divino-menu .divino-section-title {
  display: inline-block;
  margin: 0;
  padding:
    var(--divino-section-box-padding-y)
    var(--divino-section-box-padding-x);
  border:
    var(--divino-section-box-border-width)
    solid
    var(--divino-color-border);
  border-radius: var(--divino-section-box-border-radius);
  font-family: var(--divino-font-section-title);
  font-size: var(--divino-size-section-title);
  font-weight: var(--divino-weight-section-title);
  color: var(--divino-color-primary);
  line-height: var(--divino-lh-tight);
  text-transform: none;
  letter-spacing: 0.5px;
}

/* ============ ITEMS GRID ============ */
.divino-menu .divino-section-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--divino-spacing-item) var(--divino-column-gap);
}

/* ============ INDIVIDUAL ITEM ============ */
.divino-menu .divino-item {
  display: block;
  break-inside: avoid;
}

.divino-menu .divino-item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.divino-menu .divino-item .divino-item-name {
  font-family: var(--divino-font-item-name);
  font-size: var(--divino-size-item-name);
  font-weight: var(--divino-weight-item-name);
  color: var(--divino-color-primary);
  line-height: var(--divino-lh-tight);
  flex-shrink: 1;
}

.divino-menu .divino-item .divino-item-price {
  font-family: var(--divino-font-item-price);
  font-size: var(--divino-size-item-price);
  font-weight: var(--divino-weight-item-price);
  color: var(--divino-color-primary);
  line-height: var(--divino-lh-tight);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============ DOTTED LEADER between name and price ============ */
.divino-menu .divino-item-dots {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1em;
  position: relative;
}

.divino-menu .divino-item-dots::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(var(--divino-dots-offset-y));
  border-bottom:
    var(--divino-dots-thickness)
    var(--divino-dots-style)
    var(--divino-color-dots);
}

/* ============ "NEW" BADGE ============ */
.divino-menu .divino-item .divino-item-badge {
  margin-top: var(--divino-badge-new-spacing);
  font-family: var(--divino-font-badge);
  font-size: var(--divino-size-badge);
  font-weight: var(--divino-weight-badge);
  font-style: var(--divino-badge-new-style);
  color: var(--divino-color-accent);
  line-height: var(--divino-lh-tight);
}

/* ============ DESCRIPTION ============ */
.divino-menu .divino-item .divino-item-description {
  margin: var(--divino-spacing-name-to-desc) 0 0 0;
  max-width: var(--divino-width-description);
  width: var(--divino-width-description);
  font-family: var(--divino-font-description);
  font-size: var(--divino-size-description);
  font-weight: var(--divino-weight-description);
  color: var(--divino-color-description);
  line-height: var(--divino-lh-description);
}

/* ============ ADD-ONS ============ */
.divino-menu .divino-item .divino-item-addons {
  list-style: none;
  margin: var(--divino-spacing-desc-to-addons) 0 0 0;
  padding: 0;
  max-width: var(--divino-width-addons);
  width: var(--divino-width-addons);
}

.divino-menu .divino-item .divino-addon {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--divino-spacing-addon);
  font-family: var(--divino-font-addon);
  font-size: var(--divino-size-addon);
  font-weight: var(--divino-weight-addon);
  color: var(--divino-color-primary);
  line-height: var(--divino-lh-normal);
}

.divino-menu .divino-item .divino-addon.is-note {
  display: block;
  font-style: italic;
  color: var(--divino-color-description);
  font-weight: 400;
}

.divino-menu .divino-item .divino-addon-label {
  flex-shrink: 1;
}

.divino-menu .divino-item .divino-addon-price {
  flex-shrink: 0;
  white-space: nowrap;
}

.divino-menu .divino-item .divino-addon-dots {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1em;
  position: relative;
}

.divino-menu .divino-item .divino-addon-dots::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(var(--divino-dots-offset-y));
  border-bottom:
    var(--divino-dots-thickness)
    var(--divino-dots-style)
    var(--divino-color-dots);
}

/* ============ EMPTY STATE ============ */
.divino-menu .divino-menu-empty {
  text-align: center;
  padding: 40px;
  color: var(--divino-color-description);
  font-family: var(--divino-font-description);
}

/* =====================================================================
   RESPONSIVE — TABLET
   ===================================================================== */
@media (max-width: 1024px) {
  .divino-menu .divino-section-items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--divino-spacing-item) 40px;
  }
}

/* =====================================================================
   RESPONSIVE — MOBILE
   ===================================================================== */
@media (max-width: 640px) {
  .divino-menu .divino-section-items {
    grid-template-columns: 1fr;
    gap: var(--divino-spacing-item);
  }
}