/* Luxe Cheesecake — order page layout.
   Applies the homepage's design principles to order.html on top of css/luxe.css:
   plain dark ground, Viaoda Libre for headings only, Figtree for reading text,
   a full-bleed 3% gold band behind the catalogue with the grid on the 1200px
   column, design-system cards, pill filters, framed photos with the inner glow.
   Content, ids and the scripts that drive them are the page's own. */

/* ---- ground: no fixed photo backdrop ---- */
body::before { display: none; }

/* ---- the page becomes full width; each block re-centres on the column ---- */
/* The header is in the flow, so no --header-offset band above the content. */
.page-content { max-width: none; margin: 0; padding: 0; }
.lx-eyebrow {
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 1rem;
}

/* ---- heading row: eyebrow + title on the left, filters on the right ---- */
.order-head {
  max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 2rem 2.5rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.order-head .page-title { text-align: left !important; font-size: 2.7rem; line-height: 1.1; margin: 0; }
.tab-nav-wrapper { margin: 0 0 0.35rem; justify-content: flex-end; gap: 0.75rem; }
.tab-nav { gap: 0.6rem; justify-content: flex-end; }
.tab-btn {
  flex: 0 0 auto; min-width: 0; max-width: none; font-family: var(--font-ui); font-size: 0.95rem;
  padding: 0.55rem 1.25rem; border-color: var(--accent-border);
}
.tab-btn .tab-break { display: none; }
.tab-btn:hover { background: var(--accent-tint-strong); color: var(--text-light); }
.tab-btn.active, .tab-btn.active:hover { background: var(--accent); color: var(--primary-bg); border-color: var(--accent); }
.filter-toggle { font-family: var(--font-ui); border-radius: var(--radius-pill); }

/* ---- catalogue band: full-bleed soft gold ground, grid on the column ---- */
#productsContainer {
  background: var(--accent-tint-soft);
  border-top: 1px solid var(--accent-border-soft); border-bottom: 1px solid var(--accent-border-soft);
  padding: 3rem 0 4rem; margin-bottom: 4rem;
}
#productsContainer .products-grid, #productsContainer .empty-state, #productsContainer .loading {
  max-width: var(--max-width); margin: 0 auto; padding-left: 2rem; padding-right: 2rem;
}
.products-grid { gap: 1.5rem; }
.empty-state h3 { font-family: var(--font-display); }
.empty-state p, .loading { font-family: var(--font-body); }

/* ---- product cards on the design system ---- */
.product-card { background: var(--surface-raised); border-color: var(--accent-border-soft); border-radius: var(--radius-card); }
.product-card:hover { box-shadow: var(--shadow-card-hover); }
.product-image { position: relative; }
.product-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.55), inset 0 0 24px 4px rgba(0, 0, 0, 0.35);
}
.product-name { font-family: var(--font-display); }
/* Lead-time note is UI text, not a product name — same face as in the modal. */
.product-size-notice { font-family: var(--font-body); }
.product-description { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.6; }
.product-size, .product-size--serves-only, .availability-note, .lead-time-note { font-family: var(--font-body); }
.product-category-badge { font-family: var(--font-ui); }
.product-status { font-family: var(--font-ui); border-top: 1px solid var(--accent-border-soft); }
.product-size-select, .product-topping-select { font-family: var(--font-ui); border-radius: var(--radius-control); }
.add-to-cart-btn { background: var(--accent); color: var(--primary-bg); border-radius: var(--radius-pill); }
.add-to-cart-btn:hover { background: var(--accent-light); }

/* ---- modals: same overlay language as the homepage dialogs ---- */
/* Surface, border, radius and buttons come from the shared dialog system in
   css/luxe.css — only the page-specific bits stay here. */
.modal-title { font-family: var(--font-display); }
.modal-subtitle, .modal-meta, .cart-item, .topping-options, .selection-description, #selectionDescription, #selectionIngredients, #selectionAllergens { font-family: var(--font-body); }


/* ---- the shared notification dialog reads in the body face ---- */
#appDialogMessage, .app-dialog__message, .contact-confirmation__dialog p { font-family: var(--font-body); }

/* ---- phones and tablets ---- */
@media (max-width: 900px) {
  .order-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 2.5rem 1.5rem 2rem; }
  .tab-nav-wrapper, .tab-nav { justify-content: flex-start; }
  #productsContainer .products-grid, #productsContainer .empty-state, #productsContainer .loading { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 768px) {
  /* ---- heading: tight under the header; the tabs scroll sideways in one row ---- */
  .page-content { margin-top: 0; padding: 0; }
  .order-head { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.5rem 1.25rem 1.25rem; }
  .order-head .page-title { font-size: 2rem; text-align: left !important; }
  /* the three categories become one full-width segmented control; the filter is a full-width pill under it */
  .tab-nav-wrapper { flex-direction: column; align-items: stretch; gap: 0.6rem; margin: 0; min-width: 0; }
  .tab-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0; padding: 4px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--accent-border); border-radius: var(--radius-control); overflow: visible;
  }
  .tab-btn {
    display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0; min-height: 2.75rem;
    white-space: normal; font-size: 0.85rem; line-height: 1.15; padding: 0.4rem 0.3rem; border: 0;
    border-radius: calc(var(--radius-control) - 3px); background: transparent; color: var(--text-muted);
  }
  .tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-light); }
  .tab-btn.active, .tab-btn.active:hover { background: var(--accent); color: var(--primary-bg); font-weight: 600; }
  .tab-btn .tab-break { display: inline; }
  .filter-toggle { width: 100%; max-width: none; margin: 0; justify-content: center; font-size: 0.9rem; padding: 0.6rem 1rem; }

  /* ---- catalogue: one column that actually fits the screen, compact cards ---- */
  #productsContainer { padding: 1.5rem 0 2.5rem; margin-bottom: 2rem; }
  #productsContainer .products-grid, #productsContainer .empty-state, #productsContainer .loading { padding-left: 1.25rem; padding-right: 1.25rem; }
  .products-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 0; }
  .product-card { min-width: 0; }
  .product-image { aspect-ratio: 4 / 3; }
  .product-info { padding: 1.1rem 1.1rem 1rem; }
  .product-name { font-size: 1.25rem; }
  .product-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.85rem; }
  .product-status { padding: 0.6rem 1rem; font-size: 0.9rem; }
  .product-status span { white-space: normal; }
}
@media (max-width: 520px) {
  .order-head { padding: 2rem 1.25rem 1.5rem; }
  .order-head .page-title { font-size: 2.1rem; }
  #productsContainer .products-grid, #productsContainer .empty-state, #productsContainer .loading { padding-left: 1.25rem; padding-right: 1.25rem; }
  .products-grid { grid-template-columns: 1fr; }
}