/* ==========================================================================
   Atlantic Boat Market - Visual mastering layer
   --------------------------------------------------------------------------
   Couche additive globale : elle harmonise les largeurs, la respiration et
   les garde-fous responsive sans renommer de classes ni remplacer les styles
   de pages. Les CSS page-specific charges dans `extra_head` restent prioritaires.
   ========================================================================== */

:root {
  --abm-master-container: var(--abm-container-lg, 1440px);
  --abm-master-gutter: 32px;
  --abm-master-section-gap: clamp(18px, 2.2vw, 32px);
}

.abm-container {
  width: min(calc(100% - var(--abm-master-gutter)), var(--abm-master-container));
  max-width: var(--abm-master-container);
  margin-inline: auto;
  padding-inline: 0;
}

.abm-main {
  background:
    linear-gradient(180deg, rgba(246, 248, 251, 0.92), rgba(246, 248, 251, 0.98)),
    var(--abm-color-bg, #f6f8fb);
}

:where(
  .abm-shell,
  .abm-home-shell,
  .abm-market-shell,
  .abm-listing-shell,
  .abm-account-shell,
  .abm-profile-shell,
  .abm-inbox-shell,
  .abm-thread-shell,
  .abm-fleet-shell,
  .abm-argus-shell,
  .abm-pricing-shell,
  .abm-checkout-shell,
  .abm-events-shell,
  .abm-page,
  .abm-section,
  .abm-panel,
  .abm-card,
  .card
) {
  min-width: 0;
}

:where(.abm-page, .abm-section-stack, .abm-dashboard-grid, .abm-grid) {
  gap: var(--abm-master-section-gap);
}

:where(
  .abm-card,
  .abm-premium-card,
  .abm-dashboard-card,
  .abm-panel,
  .abm-side-card,
  .abm-kpi,
  .card
) {
  border-color: var(--abm-border-subtle, rgba(15, 39, 64, 0.10));
}

:where(
  .abm-card,
  .abm-premium-card,
  .abm-dashboard-card,
  .abm-panel,
  .abm-side-card,
  .abm-alert,
  .abm-note
) {
  overflow-wrap: break-word;
}

:where(.abm-btn, .btn, .abm-chip, .abm-badge, .badge) {
  max-width: 100%;
}

:where(.abm-btn, .btn) {
  align-items: center;
  justify-content: center;
}

:where(.abm-table-wrap, .table-responsive) {
  max-width: 100%;
}

:where(img, video, canvas, svg) {
  max-width: 100%;
}

@media (min-width: 1200px) {
  :root {
    --abm-master-gutter: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --abm-master-gutter: 28px;
    --abm-master-section-gap: 18px;
  }
}

@media (max-width: 420px) {
  :root {
    --abm-master-gutter: 22px;
  }
}