/* Bridge: /cosmetics — same shell + canvas as SPA (Vault). */

/*
 * Load order: fngg/global.css FIRST, then main.css — so our body/header win over
 * global’s grey canvas (#2f3136) and Burbank stack. Global stays for .f icons / FNGG widgets.
 */
body.fngg-cosmetics.cosmetics-page {
  --fngg-yellow: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-base, 15px);
  line-height: var(--leading-normal, 1.55);
  color: var(--text);
  background-color: var(--bg-deep);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
}

/* SPA iframe: parent shell scrolls — no inner document scroll; layout height follows `#items` from JS. */
html.cosmetics-catalog-spa-iframe,
body.fngg-cosmetics.cosmetics-page.cosmetics-catalog-spa-iframe {
  overflow-x: clip;
  overflow-y: hidden;
  height: auto;
}

body.fngg-cosmetics.cosmetics-page.cosmetics-catalog-spa-iframe {
  min-height: 0;
}

body.fngg-cosmetics.cosmetics-page.cosmetics-catalog-spa-iframe .main.cosmetics-page__main {
  flex: 0 1 auto;
}

/* global.css assigns Burbank/fn-normal to button/input — inherit site font for one UI stack */
body.fngg-cosmetics.cosmetics-page :where(button, input, select, textarea) {
  font-family: inherit;
}

body.fngg-cosmetics.cosmetics-page :where(.button, .button-grey) {
  font-family: var(--font-body), system-ui, sans-serif;
}


body.fngg-cosmetics.cosmetics-page::before {
  display: none;
}

/*
 * main.css — .site-header::after / .site-footer::before use a 90deg gradient hairline
 * (bright center, fades to edges). On cosmetics it reads as stray “gradient lines”.
 */
body.fngg-cosmetics.cosmetics-page .site-header::after,
body.fngg-cosmetics.cosmetics-page .site-footer::before {
  display: none !important;
}

/* Layout width — same max width feel as app-main */
.main.cosmetics-page__main {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container, min(70rem, calc(100% - 2rem)));
  margin: 0 auto;
  /* Air under the global header — title block felt cramped at 1.25–1.5rem */
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--space-4, 1rem) 3.5rem;
  box-sizing: border-box;
}

/* Page title block: centered, no accent bar */
body.fngg-cosmetics.cosmetics-page h1.cosmetics-title {
  margin: 0 auto 1.25rem !important;
  padding: 0.35rem 1rem !important;
  box-shadow: none !important;
  text-align: center !important;
  max-width: 42rem;
  /* fngg/global.css h1,h2 { text-shadow: … } — remove for readability */
  text-shadow: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-title div {
  font-family: var(--font-body), system-ui, sans-serif !important;
  color: var(--primary) !important;
  font-size: var(--text-sm, 0.8125rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
  text-shadow: none !important;
}

@media (min-width: 768px) {
  body.fngg-cosmetics.cosmetics-page h1.cosmetics-title {
    margin-bottom: 1rem !important;
    padding-top: 0.35rem !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-title div {
    margin-top: 0.35rem !important;
  }

  .main.cosmetics-page__main {
    padding-top: clamp(2rem, 3vw, 2.75rem);
  }
}

/* Remove “one big card” — no border, fill, or radius on the outer wrapper */
body.fngg-cosmetics.cosmetics-page .wrap {
  position: relative;
  overflow: visible;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Footer: pin to bottom with flex column body; main.css already styles .site-footer */
body.fngg-cosmetics.cosmetics-page .site-footer {
  margin-top: auto;
}

/* Footer: use main.css (.site-footer gradient + ::before) — do not flatten to solid bg */

body.fngg-cosmetics.cosmetics-page .back-to-top {
  position: fixed !important;
  right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  /* Clear footer + safe-area — v2 had it too low and half-hidden */
  bottom: max(6.5rem, calc(1.5rem + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 50;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  background: var(--primary);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

body.fngg-cosmetics.cosmetics-page .back-to-top:hover {
  background: var(--primary-hover);
}

body.fngg-cosmetics.cosmetics-page .back-to-top svg {
  stroke: color-mix(in srgb, var(--bg-deep) 94%, var(--text));
}

@media (max-width: 767px) {
  body.fngg-cosmetics.cosmetics-page {
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: var(--text-sm);
    overflow-x: hidden;
    overflow-x: clip;
  }

  body.fngg-cosmetics.cosmetics-page:has(.filter-select.opened) {
    overflow-x: visible !important;
  }

  .main.cosmetics-page__main {
    padding: clamp(1.5rem, 4vw, 2.25rem) max(0.75rem, env(safe-area-inset-left)) 3.5rem
      max(0.75rem, env(safe-area-inset-right));
    max-width: 100%;
  }

  body.fngg-cosmetics.cosmetics-page h1.cosmetics-title {
    margin-bottom: 1.25rem !important;
    text-align: center !important;
    padding: 1rem 0.75rem 0.35rem !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}