/*
 * storefront-shell-depth.css
 *
 * PC-only (≥768px) depth: white content shell sits “on top” of a slightly
 * receding page backdrop (variant B).
 *
 * Mobile / phone (≤767px): no rules here — pages keep their own presentation.
 *
 * Rollout (soft waves):
 *   Wave 0 — home: full depth B (locked reference).
 *   Wave 1 — main landings / shells (this file): softer elevation.
 *   Wave 2 — remaining pages / product shells: add selectors here when ready.
 *
 * Loaded from base.html after base-layout.css so all storefront pages share it.
 * See docs/STOREFRONT_SHELL_DEPTH_ROLLOUT.md
 */

:root {
  --sf-depth-bp: 768px;
  --sf-depth-backdrop: #e8eef8;
  --sf-depth-backdrop-grad: linear-gradient(
    145deg,
    #f4f8fc 0%,
    #e2ebf6 46%,
    #eaf1f9 100%
  );
  /* Soft elevation (wave 1 landings) */
  --sf-depth-lift-soft: -4px;
  --sf-depth-margin-soft: 22px auto 44px;
  --sf-depth-border-soft: 1px solid rgba(100, 140, 190, 0.3);
  --sf-depth-shadow-soft:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(8, 31, 67, 0.04),
    0 5px 12px rgba(8, 31, 67, 0.06),
    0 14px 32px rgba(8, 31, 67, 0.09),
    0 28px 56px rgba(12, 40, 85, 0.09),
    0 36px 72px rgba(20, 50, 100, 0.06);
  /* Full depth B (home reference) — deeper lift/shadow for stronger “on top” read */
  --sf-depth-lift-home: -10px;
  --sf-depth-margin-home: 28px auto 52px;
  --sf-depth-border-home: 1px solid rgba(90, 130, 180, 0.38);
  --sf-depth-shadow-home:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(8, 31, 67, 0.06),
    0 8px 18px rgba(8, 31, 67, 0.09),
    0 20px 42px rgba(8, 31, 67, 0.13),
    0 36px 72px rgba(12, 40, 85, 0.15),
    0 48px 96px rgba(15, 45, 95, 0.12),
    0 56px 110px rgba(20, 50, 100, 0.1);
}

/* ── Wave 0 + 1: desktop only ─────────────────────────────────────────── */
@media (min-width: 768px) {
  /*
   * Soft receding backdrop on common landing bodies.
   * Page CSS may still set gradients; this unifies the “lower plane” feel.
   */
  body.home-page,
  body.about-company,
  body.footer-contacts,
  body.footer-categories,
  body.footer-interior-doors,
  body.footer-entrance-doors,
  body.metal-doors-apartment-page,
  body.metal-doors-apartment-category,
  body.fire-doors-page,
  body.footer-install,
  body.pvc-latvia-guide-page,
  body.footer-garage,
  body.footer-full {
    background-color: var(--sf-depth-backdrop);
    background-image: var(--sf-depth-backdrop-grad);
  }

  /* ── Wave 0: home — full depth B (deeper plane separation) ──────────── */
  body.home-page {
    /* Backdrop one step darker/cooler so shell reads higher */
    background-color: #dce6f3;
    background-image: linear-gradient(150deg, #eef4fa 0%, #d2dff0 48%, #e4ecf6 100%);
  }

  body.home-page .site-shell {
    margin: var(--sf-depth-margin-home);
    transform: translateY(var(--sf-depth-lift-home));
    border: var(--sf-depth-border-home);
    box-shadow: var(--sf-depth-shadow-home);
  }

  /* ── Wave 1: soft elevation for main white shells ───────────────────── */
  .about-company-page,
  .contacts-page,
  body.footer-categories .catalog-main,
  .entrance-doors-page,
  .interior-doors-page,
  body.metal-doors-apartment-page .md-page,
  body.metal-doors-apartment-category .mdc-page,
  body.fire-doors-page .fd-page,
  .install-main,
  .garage-doors-page .gd-shell,
  .pvc-window-listing__surface,
  .pvc-latvia-guide .pvc-guide__surface {
    margin-top: 22px;
    margin-bottom: 44px;
    transform: translateY(var(--sf-depth-lift-soft));
    border-color: rgba(100, 140, 190, 0.3);
    box-shadow: var(--sf-depth-shadow-soft);
  }

  /* Install page wraps surface differently — keep horizontal auto margin */
  .install-main {
    margin-left: auto;
    margin-right: auto;
  }

  .pvc-latvia-guide .pvc-guide__surface {
    margin-inline: auto;
  }
}

/*
 * Wave 2 (later): product cards / remaining shells —
 * add selectors here when product says go, still min-width 768 only.
 */