/*
 * Cafe Ariel — single authority for the header-to-first-card rhythm.
 * This stylesheet is enqueued last and is re-positioned last after SPA navigation.
 * The page root has no separate top padding: exactly one gap is placed on the
 * first content wrapper, avoiding the old main + .container double-padding.
 */
:root {
  --ca-header-card-gap: 12px;
}

/* Tablet and mobile: match the site's compact outer-card spacing. */
@media (max-width: 1024px) {
  :root { --ca-header-card-gap: 14px; }
}

/* Product pages tighten inter-card gaps further on narrow phones. */
@media (max-width: 600px) {
  :root { --ca-header-card-gap: 14px; }
}

/* Product, article, archive, search, category, author, regular page,
   account, cart and checkout templates share one outer spacing rule. */
html body main.ca-single-product,
html body main.ca-single-article,
html body main.cr-editorial-page {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

html body main.ca-single-product > .ca-single-product-container:first-child,
html body main.ca-single-article > .ca-single-article-container:first-child,
/* Duplicate the editorial root class to outrank older archive selectors that
   used !important; cart/checkout get their own more-specific cases below. */
html body main.cr-editorial-page.cr-editorial-page > .container:first-child,
html body main.cr-editorial-page.cr-editorial-static-page.ca-account-page > .container:first-child,
html body main.cr-editorial-page.cr-editorial-static-page.ca-cart-page > .container:first-child,
html body main.cr-editorial-page.cr-editorial-static-page.ca-checkout-page > .container:first-child {
  margin-block-start: 0 !important;
  padding-block-start: var(--ca-header-card-gap) !important;
}

/* Login and registration templates use the main itself as their container. */
html body main.ca-auth-page {
  margin-block-start: 0 !important;
  padding-block-start: var(--ca-header-card-gap) !important;
}

/* Payment confirmation / post-payment message page. */
html body section.container.ca-payment-page {
  margin-block-start: var(--ca-header-card-gap) !important;
}

/* Receipt template wraps its main in an outer .container. Put the single gap
   before the receipt main and remove the previous receipt margin + padding stack. */
html body main.receipt_page.ca-receipt-page {
  margin-block-start: var(--ca-header-card-gap) !important;
  padding-block-start: 0 !important;
}

html body .container:has(> main.receipt_page.ca-receipt-page) {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}