/**
 * Atelier — T36 Maintenance (standalone, no header/footer chrome).
 * Source: design/store-theme/01-atelier-fashion/pages/T36 Maintenance.dc.html
 */

/* Chrome-less: the maintenance design is a full-screen standalone page with no
 * store header/footer/breadcrumbs. Hide those via CSS (scoped to the
 * maintenance body class) — we deliberately do NOT remove="true" the header /
 * footer containers in layout, because that orphans the module block
 * references inside them (minicart, search, etc.) and 500s the page. */
body.atl-page-maintenance .page-header,
body.atl-page-maintenance .page-footer,
body.atl-page-maintenance .breadcrumbs,
body.atl-page-maintenance .page-title-wrapper { display: none; }
body.atl-page-maintenance .page-main { padding: 0; max-width: none; }

.atl-maint { min-height: 100vh; display: grid; place-items: center; padding: 40px; text-align: center; }
.atl-maint-inner { display: flex; flex-direction: column; gap: 20px; align-items: center; max-width: 560px; }
.atl-maint-logo { font-family: 'Cormorant Garamond', serif; font-size: 30px; letter-spacing: 0.32em; text-transform: uppercase; }
.atl-maint-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 38px; text-wrap: balance; }
.atl-maint-body { font-size: 14.5px; color: var(--atl-text-muted); margin: 0; line-height: 1.7; }

.atl-maint-countdown { display: flex; gap: 8px; align-items: center; }
.atl-maint-countdown-unit { background: var(--atl-text); color: var(--atl-band-text); padding: 12px 16px; font-size: 22px; font-family: 'Cormorant Garamond', serif; font-weight: 400; }
.atl-maint-countdown-sep { font-size: 20px; color: var(--atl-text-subtle); }

.atl-maint-notify { display: flex; margin-top: 4px; }
.atl-maint-notify input { width: 280px; border-right: none; }

@media (max-width: 767px) {
  /* 40px side padding + a fixed-width notify input (280px) + button overflowed
     the 375 viewport (row was 368px in a 295px content box). Tighten padding,
     constrain the inner column to the viewport, and let the input flex-shrink. */
  .atl-maint { padding: 24px 20px; }
  .atl-maint-title { font-size: 28px; }
  .atl-maint-inner { width: 100%; }
  .atl-maint-notify { width: 100%; max-width: 340px; }
  .atl-maint-notify input { width: auto; flex: 1; min-width: 0; }
}