/*
 * WISEcode Intelligence Component Styles
 * Semantic token mappings for HTML scaffold components
 */

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-primary);
  color: var(--color-oyster-900);
  background-color: var(--color-oyster-100);
  line-height: 1.5;
}

/* App Shell */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-oyster-100);
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  box-shadow: var(--elevation-md);
  width: 320px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
  z-index: 100;
  overflow: hidden;
}

.sidebar[data-state="collapsed"] {
  width: 64px;
}

/* Sidebar Expanded State - Normal width */
.sidebar-expanded {
  width: 300px;
}

/* Sidebar Collapsed State - Narrow width */
.sidebar-collapsed {
  width: 112px;
}

/* Collapsed sidebar: hide chevron buttons for nav groups */
.sidebar-collapsed .nav-group-chevron {
  display: none !important;
}

/* Collapsed sidebar: hide subitems completely */
.sidebar-collapsed .nav-subitems {
  display: none !important;
}

/* Collapsed sidebar: stack icon on top, label on bottom */
.sidebar-collapsed .nav-item-collapsible {
  flex-direction: column !important;
  padding: 0.5rem 0.25rem 0.75rem 0.25rem !important;
  gap: 0.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.sidebar-collapsed .nav-item-collapsible .nav-icon {
  margin: 0 !important;
  font-size: 1.75rem !important; /* 28px - bigger icons in collapsed mode */
}

.sidebar-collapsed .nav-item-collapsible .nav-label {
  font-size: 0.55rem !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Collapsed sidebar: nav-group-main should also be stacked */
.sidebar-collapsed .nav-group-main {
  flex-direction: column !important;
  padding: 0.5rem 0.25rem 0.75rem 0.25rem !important;
}

.sidebar-collapsed .nav-group-main a {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  width: 100% !important;
}

/* Collapsed sidebar: hide user info, show only avatar */
.sidebar-collapsed .user-avatar-btn .user-info {
  display: none !important;
}

.sidebar-collapsed .user-avatar-btn {
  justify-content: center !important;
  padding: 0.5rem !important;
}

/* Collapsed sidebar: collapse button - hide label, show only icon centered */
.sidebar-collapsed .collapse-toggle-btn .nav-label {
  display: none !important;
}

.sidebar-collapsed .collapse-toggle-btn {
  justify-content: center !important;
  padding: 1rem !important;
  width: 100% !important;
  min-height: 3rem !important;
}

/* Adjust header padding when collapsed */
.sidebar-collapsed .sidebar-header-content {
  padding: 1rem 0.5rem !important;
}

.sidebar-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 40px;
  width: auto;
}

.logo-icon {
  height: 32px;
  width: auto;
  display: none;
}

.sidebar[data-state="collapsed"] .logo {
  display: none;
}

.sidebar[data-state="collapsed"] .logo-icon {
  display: block;
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-oyster-700);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: var(--spacing-xs);
}

.nav-item:hover {
  background-color: var(--color-oyster-200);
  color: var(--color-oyster-900);
}

.nav-item[data-active="true"] {
  background-color: var(--color-indigo-100);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.nav-item .material-icons {
  font-size: 20px;
  flex-shrink: 0;
}

.nav-label {
  font-size: var(--font-size-body-m);
  white-space: nowrap;
}

.sidebar[data-state="collapsed"] .nav-label {
  display: none;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background-color: var(--color-primary);
  border-radius: 0 2px 2px 0;
  opacity: 0;
}

.nav-item[data-active="true"] .active-indicator {
  opacity: 1;
}

/* Navigation Groups */
.nav-group {
  /* Match the single nav-item bottom margin so top-level sidebar items have
     uniform vertical spacing (each item's mt-2 governs the 8px gap). Previously
     spacing-lg here added extra space below every group, making gaps uneven. */
  margin-bottom: var(--spacing-xs);
}

.nav-group-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: none;
  border: none;
  color: var(--color-oyster-600);
  font-size: var(--font-size-label-l);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
}

.nav-group-trigger:hover {
  background-color: var(--color-oyster-100);
}

.nav-group-trigger .expand-icon {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.nav-group[data-expanded="true"] .expand-icon {
  transform: rotate(0deg);
}

.nav-group[data-expanded="false"] .expand-icon {
  transform: rotate(-90deg);
}

.nav-group-items {
  padding-left: var(--spacing-sm);
}

/* Navigation Group with Link and Chevron */
.nav-group .nav-item a {
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.nav-group .nav-item button {
  background: none;
  border: none;
  cursor: pointer;
  /* Horizontal-only padding: vertical padding here made the chevron button 28px
     tall, stretching group rows to 44px while single nav items are 36px. Keeping
     the button at icon height (20px) gives all top-level rows a uniform height. */
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  color: inherit;
}

/* Hover effects - just bold icons, NO label hover, NO hover when active */
.nav-group-main:not(.bg-indigo-500):hover a .material-icons {
  font-weight: 500;
}

.nav-group-main:not(.bg-indigo-500):hover button .material-icons {
  font-weight: 500;
}

/* Apply same hover effects to regular nav-item (Overview, Admin Customers) */
.nav-item:not(.nav-group-main):not(.bg-indigo-500):hover .material-icons {
  font-weight: 500;
}

/* Active state for main nav items - WHITE TEXT, NO HOVER EFFECTS */
.nav-group-main.bg-indigo-500 {
  background-color: var(--color-primary) !important;
  color: white !important;
}

.nav-group-main.bg-indigo-500:hover a .material-icons,
.nav-group-main.bg-indigo-500:hover button .material-icons {
  font-weight: inherit !important;
}

/* Force white text on ALL children when active */
.nav-group-main.bg-indigo-500 * {
  color: white !important;
}

.nav-group-main.bg-indigo-500 a {
  color: white !important;
}

.nav-group-main.bg-indigo-500 button {
  color: white !important;
}

.nav-group-main.bg-indigo-500 .material-icons {
  color: white !important;
}

.nav-group-main.bg-indigo-500 .nav-label {
  color: white !important;
}

.nav-group-main.bg-indigo-500 span {
  color: white !important;
}

/* Also handle regular nav items with bg-indigo-500 (Overview, AI).
   The background-color must be !important so the active blue wins over
   .nav-item:hover (which has higher specificity than the bare .bg-indigo-500
   utility). Without it, an item that becomes active while the cursor is still
   on it — i.e. immediately after the click that navigates to it — keeps the
   light-grey hover background while the text is forced white, rendering the
   label invisible until the pointer leaves. Mirrors .nav-group-main.bg-indigo-500. */
.nav-item.bg-indigo-500,
.nav-item.bg-indigo-500:hover {
  background-color: var(--color-primary) !important;
  color: white !important;
}

.nav-item.bg-indigo-500 * {
  color: white !important;
}

.nav-item.bg-indigo-500 .material-icons {
  color: white !important;
}

.nav-item.bg-indigo-500 .nav-label {
  color: white !important;
}

/* Subitem active state */
.nav-subitem.bg-indigo-100 {
  background-color: var(--color-indigo-100);
  color: var(--color-primary);
}

.nav-subitem.bg-indigo-100 * {
  color: var(--color-primary) !important;
}

.disabled-badge {
  margin-left: auto;
  opacity: 0.5;
}

/* Sidebar Footer */
.sidebar-footer {
  border-top: 1px solid var(--color-oyster-200);
  padding: var(--spacing-lg);
}

.collapse-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-oyster-600);
  font-size: var(--font-size-body-m);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
}

.collapse-toggle:hover {
  background-color: var(--color-oyster-100);
}

.user-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-oyster-100);
}

.user-avatar .material-icons {
  font-size: 32px;
  color: var(--color-oyster-500);
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-semibold);
  color: var(--color-oyster-900);
}

.user-email {
  font-size: var(--font-size-label-s);
  color: var(--color-oyster-600);
}

.sidebar[data-state="collapsed"] .user-summary {
  flex-direction: column;
  padding: var(--spacing-sm);
}

.sidebar[data-state="collapsed"] .user-info {
  display: none;
}

/* Main Content - margin-left handled by design-system.css via body:has(.sidebar-expanded/collapsed) */
.main-content {
  flex: 1;
  transition: margin-left 0.3s ease;
}

/* Page Container */
.page-container {
  min-height: 100vh;
}

/* Page Header */
.page-header {
  padding: var(--spacing-2xl);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-oyster-300);
}

.page-header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title-group {
  margin-bottom: var(--spacing-lg);
}

.page-title-with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-icon {
  font-size: 32px;
  color: var(--color-primary);
}

.page-title {
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--font-size-body-m);
  color: var(--color-oyster-600);
  margin-top: var(--spacing-sm);
  line-height: 1.5;
}

.page-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* Page States */
.page-state {
  padding: var(--spacing-3xl);
  text-align: center;
}

.page-state[hidden] {
  display: none;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-oyster-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container,
.empty-container {
  max-width: 400px;
  margin: 0 auto;
}

.error-icon,
.empty-icon {
  font-size: 64px;
  margin-bottom: var(--spacing-lg);
}

.error-icon {
  color: var(--color-danger-500);
}

.empty-icon {
  color: var(--color-oyster-400);
}

.retry-button {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* Page Content */
.page-content {
  padding: var(--spacing-2xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* Buttons */
.primary-action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--elevation-sm);
  transition: all 0.2s ease;
}

.primary-action-button:hover {
  background-color: var(--color-indigo-600);
  box-shadow: var(--elevation-md);
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color 0.2s ease;
}

.text-button:hover {
  color: var(--color-indigo-600);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--color-oyster-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-button:hover {
  background-color: var(--color-oyster-100);
  color: var(--color-oyster-900);
}

/* ---------------------------------------------------------------------------
 * .wise-btn — the canonical app primary/action button. ONE button to use
 * everywhere (Add Product, Claim, Waitlist Join, …).
 *
 * It mirrors the dashboard's .dash-btn--primary (brand-intelligence.css) but is
 * built on the GLOBAL tokens instead of the .bi-scoped ones. That scoping is
 * exactly what broke earlier off-dashboard copies: --primary and --radius-pill
 * only exist inside .bi, so reusing .dash-btn elsewhere rendered transparent,
 * square buttons. Here: var(--color-primary) is global; the pill radius is a
 * literal (the global --radius-* tokens are unitless by convention).
 *
 * Font is NOT set here — theme-rules.css applies the brand serif face to the
 * button-selector list (which includes .wise-btn), same as .primary-action-button.
 *
 * Usage: <button class="wise-btn wise-btn--primary">
 *          <span class="material-icons">add</span> Label
 *        </button>
 * --------------------------------------------------------------------------- */
.wise-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.wise-btn .material-icons { font-size: 16px; }
.wise-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.wise-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(37, 80, 124, 0.25);
}
.wise-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37, 80, 124, 0.3); }
/* The global a:focus/a:active rule in design-system.css sets background:none,
   which would strip this fill (white text on white) when used on an anchor.
   Re-assert it — the same guard .btn-primary and .dash-btn--primary carry. */
.wise-btn--primary:focus, .wise-btn--primary:active { background: var(--color-primary); }
.wise-btn--primary:disabled:hover { transform: none; box-shadow: 0 4px 12px rgba(37, 80, 124, 0.25); }

/* Secondary variant: white pill with an oyster border, same geometry as the
   primary. Mirrors the legacy .btn-secondary palette (white bg, #E0DBE7 border,
   #413A4D ink = oyster-300/oyster-700 tokens) so call sites migrating off
   btn-secondary or off inline style= overrides keep their look. */
.wise-btn--secondary {
  background: var(--color-white);
  border-color: var(--color-oyster-300);
  color: var(--color-oyster-700);
}
.wise-btn--secondary:hover {
  transform: translateY(-1px);
  background: var(--color-oyster-100);
  box-shadow: var(--elevation-md);
}
/* Same anchor guard as --primary: design-system's a:focus/a:active sets
   background:none, which would leave a transparent pill. */
.wise-btn--secondary:focus, .wise-btn--secondary:active { background: var(--color-white); }
.wise-btn--secondary:disabled:hover { transform: none; box-shadow: none; }

/* ---------------------------------------------------------------------------
 * .status-pill — the canonical status chip for the verification flow
 * (Pre-Qualified, Attested, Verified NON-UPF). Replaces the bespoke variants
 * that drifted across the steps: .badge-prequalified with inline hex,
 * bg-mint-100 + inline border-radius:24px, and bg-indigo-100 rounded-full.
 * Token-backed: prequalified = mint tint, verified/attested = brand-blue tint.
 *
 * Usage: <span class="status-pill status-pill--prequalified">
 *          <span class="material-icons">pending_actions</span> Pre-Qualified
 *        </span>
 * --------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill .material-icons,
.status-pill .material-symbols-outlined { font-size: 16px; }

/* Pre-qualified: mint/success tint (mint-100 bg, mint-700 AAA ink). */
.status-pill--prequalified {
  background: var(--color-mint-100);
  color: var(--color-mint-700);
}

/* Attested / verified: brand-blue tint (the indigo ramp is the brand blue scale). */
.status-pill--verified {
  background: var(--color-indigo-100);
  color: var(--color-indigo-700);
}

/* Cards */
.feature-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--elevation-md);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--elevation-lg);
}

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-indigo-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.feature-icon .material-icons {
  font-size: 28px;
  color: var(--color-primary);
}

.feature-title {
  font-size: var(--font-size-title-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
  margin-bottom: var(--spacing-md);
}

.feature-description {
  font-size: var(--font-size-body-m);
  color: var(--color-oyster-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.feature-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color 0.2s ease;
}

.action-link:hover {
  color: var(--color-indigo-600);
}

.action-link[data-disabled="true"] {
  color: var(--color-oyster-400);
  pointer-events: none;
}

/* Overlays */
.drawer-container,
.bottom-sheet-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.drawer-container[data-state="open"],
.bottom-sheet-container[data-state="open"] {
  display: block;
}

.drawer-backdrop,
.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Drawer */
.drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 480px;
  background-color: var(--color-white);
  box-shadow: var(--elevation-2xl);
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.drawer-title {
  font-size: var(--font-size-title-l);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
}

.drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-oyster-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.drawer-close:hover {
  background-color: var(--color-oyster-100);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
}

.drawer-footer {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-top: 1px solid var(--color-oyster-200);
}

.drawer-action-primary,
.drawer-action-secondary {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-action-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.drawer-action-secondary {
  background-color: transparent;
  color: var(--color-oyster-700);
  border: 1px solid var(--color-oyster-300);
}

/* Bottom Sheet */
.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background-color: var(--color-white);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: var(--elevation-2xl);
  display: flex;
  flex-direction: column;
}

.bottom-sheet-handle {
  padding: var(--spacing-md);
  display: flex;
  justify-content: center;
}

.handle-bar {
  width: 40px;
  height: 4px;
  background-color: var(--color-oyster-300);
  border-radius: 2px;
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.bottom-sheet-title {
  font-size: var(--font-size-title-m);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
}

.bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
}

.bottom-sheet-footer {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-top: 1px solid var(--color-oyster-200);
}

/* Material Icons */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}


/* ── Product showcase band (light surfaces) ─────────────────────────────────────
   One of exactly two blessed band patterns for presenting a product photo big.
   Used by the Product Details / spec-sheet pane header and the product gallery card;
   the other pattern is the dark verification hero (see IngredientsVerificationPanel).
   Adding a third band geometry per call site is how this codebase previously ended up
   with 22 different product-image treatments — reuse one of the two instead.

   Pair with <FoodImage Size="FoodImageSize.Fill" />. Clean white, no border on the
   image, generous padding: most packaging is shot on white, so the letterbox seam
   disappears and the photo reads as native to the card. A blurred-photo backdrop is
   deliberately NOT used here — that is a dark-surface idiom that only works because a
   heavy scrim hides the blur mud; on a light card it reads as a washed-out smudge.

   Fixed ratio rather than intrinsic height: card geometry stays stable across products
   (a tall label must not shove the name and category below the fold) and PDF layout
   stays deterministic. Ratio rather than a pixel height so it scales with the column. */
.food-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  box-sizing: border-box;
  /* Proportional, not a flat 16px. This band is used at very different widths (a ~500px
     detail pane and a ~220px gallery card), and a fixed inset spends a sixth of a small
     card's width on padding, which compounds with the white margin many pack shots already
     carry and leaves the product looking lost. Percentage padding resolves against the
     band's own width, so small cards stay tight and large ones still breathe. */
  padding: clamp(8px, 3.5%, 18px);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}