/* Beauty & Glam — shared visual system for every page except the homepage.
 * The home hero and header remain owned by redesign-v3.css. Inner pages use
 * the same mineral palette, Jost typography and editorial spacing without
 * importing a second serif / rounded-card language.
 */
:root {
  --bg-ground: #f4f2ec;
  --bg-ink: #142628;
  --bg-deep: #0b292b;
  --bg-water: #82d8cc;
  --bg-fog: #e3ece8;
  --bg-muted: #526765;
  --bg-soft-ink: #344846;
}

html body:not(.home) {
  background: var(--bg-ground) !important;
  color: var(--bg-ink);
  font-family: Jost, system-ui, sans-serif;
}

/* Shared header: the homepage keeps its transparent overlay treatment. */
html body:not(.home) header#nav.nav,
html body:not(.home) header#nav.nav.shrink {
  position: relative !important;
  inset: auto !important;
  z-index: 30;
  min-height: 82px;
  background: var(--bg-deep) !important;
}

html body:not(.home) header#nav.nav .wrap {
  width: min(1380px, calc(100% - 64px));
  min-height: 82px;
}

html body:not(.home) header#nav.nav .menu { gap: clamp(16px, 1.8vw, 30px); }
html body:not(.home) header#nav.nav .menu a {
  color: rgba(255, 255, 255, .9) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 12px;
  letter-spacing: .035em;
}

html body:not(.home) header#nav.nav .menu a:hover,
html body:not(.home) header#nav.nav .menu a:focus-visible,
html body:not(.home) header#nav.nav .menu .current-menu-item > a { color: var(--bg-water) !important; }

html body:not(.home) header#nav.nav .menu > li:last-child > a,
html body:not(.home) header#nav.nav .nav-cta {
  border-radius: 0 !important;
  background: var(--bg-water) !important;
  color: var(--bg-deep) !important;
}

html body:not(.home) .bg-project-navigation {
  background: var(--bg-fog) !important;
}

html body:not(.home) .bg-project-navigation__inner {
  width: min(1380px, calc(100% - 64px));
  min-height: 56px;
}

html body:not(.home) .bg-project-navigation a {
  color: var(--bg-ink);
  font-family: Jost, system-ui, sans-serif;
  font-size: 13px;
}

/* Inner-page hero: same scale and material palette as the home, with a more
 * compact composition so the next section is discoverable on first scroll. */
html body.bg-inner-page .page-hero {
  min-height: clamp(470px, 62svh, 720px) !important;
  border-radius: 0 !important;
  background: var(--bg-deep) !important;
}

html body.bg-inner-page .page-hero > .wrap {
  width: min(1380px, calc(100% - 64px)) !important;
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 108px) !important;
}

html body.bg-inner-page .page-hero .page-hero-bg img {
  opacity: .52 !important;
  transform: none !important;
  animation: none !important;
}

html body.bg-inner-page .page-hero .page-hero-bg::after {
  background: rgba(11, 41, 43, .6) !important;
}

html body.bg-inner-page .page-hero h1 {
  max-width: 12ch !important;
  margin: 18px 0 26px !important;
  color: #fff !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: clamp(54px, 7vw, 100px) !important;
  font-weight: 500 !important;
  line-height: .91 !important;
  letter-spacing: -.075em !important;
}

html body.bg-inner-page .page-hero h1 :is(em, i, span, strong) {
  color: inherit !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

html body.bg-inner-page .page-hero :is(p, .lead) {
  max-width: 54ch !important;
  color: rgba(255, 255, 255, .88) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.56 !important;
}

html body.bg-inner-page .page-hero .crumb {
  color: var(--bg-water) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body.bg-inner-page :is(.intro, .segments, .feature, .method, .cta) {
  padding-block: clamp(88px, 10vw, 152px) !important;
  background: var(--bg-ground) !important;
}

html body.bg-inner-page :is(.intro, .segments, .feature, .method, .cta) > .wrap {
  width: min(1380px, calc(100% - 64px)) !important;
}

html body.bg-inner-page .segments,
html body.bg-inner-page .feature.rev,
html body.bg-inner-page .method { background: var(--bg-fog) !important; }

html body.bg-inner-page :is(.intro, .segments, .feature, .method) h2,
html body.bg-inner-page :is(.intro, .segments, .feature, .method) h3 {
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
}

html body.bg-inner-page :is(.intro, .segments, .feature, .method, .cta) :is(h2, h3) :is(em, i, span, strong) {
  color: inherit !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

html body.bg-inner-page :is(.intro, .segments, .feature, .method) p,
html body.bg-inner-page :is(.intro, .segments, .feature, .method) li {
  color: var(--bg-soft-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

html body.bg-inner-page .intro .cols,
html body.bg-inner-page .feature .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 8vw, 144px);
  align-items: center;
}

html body.bg-inner-page .intro .lead,
html body.bg-inner-page .f-txt { max-width: 58ch; }

html body.bg-inner-page .segments .sec-head,
html body.bg-inner-page .method .sec-head { max-width: 720px; margin-bottom: 48px !important; }

html body.bg-inner-page .segments .seg-grid,
html body.bg-inner-page .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

html body.bg-inner-page .segments .card,
html body.bg-inner-page .cards .card,
html body.bg-inner-page .cat-card {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-ground) !important;
  transform: none !important;
}

html body.bg-inner-page .segments .card:hover,
html body.bg-inner-page .cards .card:hover,
html body.bg-inner-page .cat-card:hover { background: #d8e7e2 !important; }

html body.bg-inner-page .seg-txt,
html body.bg-inner-page .cat-card .c-body { padding: 26px !important; }

html body.bg-inner-page .seg-txt .n,
html body.bg-inner-page .cat-card .k,
html body.bg-inner-page .filter-lbl {
  color: var(--bg-muted) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

html body.bg-inner-page .cat-card .c-img {
  aspect-ratio: 4 / 3;
  border-radius: 0 !important;
  background: var(--bg-fog) !important;
}

html body.bg-inner-page .cat-card .c-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html body.bg-inner-page .cat-card h3 {
  margin: 12px 0 22px !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.08 !important;
}

html body.bg-inner-page .cat-card .go {
  color: var(--bg-ink) !important;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 6px;
}

html body.bg-inner-page .feature .f-media {
  min-height: 420px;
  background: var(--bg-fog);
  border-radius: 0 !important;
}

html body.bg-inner-page .feature .f-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: 0 !important;
}

html body.bg-inner-page .feature .ticks {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

html body.bg-inner-page .feature .ticks > * {
  padding: 14px 0;
  background: rgba(227, 236, 232, .55);
}

html body.bg-inner-page .method .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

html body.bg-inner-page .method .step {
  min-height: 220px;
  padding: 26px 24px 20px;
  background: var(--bg-ground);
}

html body.bg-inner-page .method .bar { background: var(--bg-water) !important; }

html body.bg-inner-page .cta {
  background: var(--bg-deep) !important;
  color: #fff !important;
}

html body.bg-inner-page .cta > .wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

html body.bg-inner-page .cta :is(h2, p) { color: #fff !important; }
html body.bg-inner-page .cta :is(h2, h2 *, h3, h3 *) {
  color: #fff !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-style: normal !important;
}

html body.bg-inner-page #contatti-cta {
  background: var(--bg-deep) !important;
  color: #fff !important;
}

html body.bg-inner-page :is(.btn, .bg-perfection-button, .bg-case-back) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 22px;
  border-radius: 0 !important;
  background: var(--bg-water) !important;
  color: var(--bg-deep) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 13px;
  text-decoration: none;
}

html body.bg-inner-page .cta .btn:not(.solid),
html body.bg-inner-page .cta .btn:not(.solid) span {
  border-color: rgba(255, 255, 255, .65) !important;
  background: transparent !important;
  color: #fff !important;
}

html body.bg-inner-page footer,
html body.bg-site-catalog footer {
  background: var(--bg-deep) !important;
  color: rgba(255, 255, 255, .8) !important;
}

html body:not(.home) footer .foot-top {
  width: min(1380px, calc(100% - 64px));
  margin-inline: auto;
  padding-block: 72px 64px;
}

html body:not(.home) footer :is(h2, h3, h4, a) { color: #fff !important; }
html body:not(.home) footer :is(h2, h3, h4, h5, a) {
  font-family: Jost, system-ui, sans-serif !important;
  font-style: normal !important;
}
html body:not(.home) footer p,
html body:not(.home) footer .foot-bottom { color: rgba(255, 255, 255, .68) !important; }
html body:not(.home) footer a:hover { color: var(--bg-water) !important; }

/* Catalog archives and product/project templates still render the Reina
 * header/footer instead of the Elementor canvas header. Bring that native
 * shell into the same system used by the inner pages. */
html body.bg-site-catalog:not(.home) :is(#qodef-page-header, #qodef-page-header-inner, .qodef-header-sticky) {
  background: var(--bg-deep) !important;
}

html body.bg-site-catalog:not(.home) #qodef-page-header,
html body.bg-site-catalog:not(.home) .qodef-header-sticky {
  height: 82px !important;
  border: 0 !important;
}

html body.bg-site-catalog:not(.home) #qodef-page-header-inner,
html body.bg-site-catalog:not(.home) .qodef-header-sticky .qodef-header-inner {
  width: min(1380px, calc(100% - 64px)) !important;
  min-height: 82px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body.bg-site-catalog:not(.home) #qodef-page-header .qodef-header-navigation > ul > li > a,
html body.bg-site-catalog:not(.home) .qodef-header-sticky .qodef-header-navigation > ul > li > a {
  color: rgba(255, 255, 255, .9) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .035em !important;
}

html body.bg-site-catalog:not(.home) #qodef-page-header .qodef-header-navigation > ul > li > a:hover,
html body.bg-site-catalog:not(.home) #qodef-page-header .qodef-header-navigation > ul > li.current-menu-item > a,
html body.bg-site-catalog:not(.home) #qodef-page-header .qodef-header-navigation > ul > li.current-menu-ancestor > a {
  color: var(--bg-water) !important;
}

html body.bg-site-catalog:not(.home) :is(#qodef-page-header, .qodef-header-sticky) .qodef-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-water) !important;
  color: var(--bg-deep) !important;
  font-family: Jost, system-ui, sans-serif !important;
}

html body.bg-site-catalog:not(.home) :is(#qodef-page-header, .qodef-header-sticky) .qodef-button .qodef-m-background {
  display: none !important;
}

html body.bg-realizations-page #qodef-page-inner,
html body.bg-realizations-page #qodef-page-content {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.bg-realizations-page .bg-realizations-archive {
  width: min(1380px, calc(100% - 64px)) !important;
  padding: clamp(64px, 8vw, 112px) 0 clamp(88px, 10vw, 144px) !important;
  font-family: Jost, system-ui, sans-serif !important;
}

html body.bg-realizations-page .bg-realizations-heading h1,
html body.bg-realizations-page .bg-realizations-cta h2,
html body.bg-realizations-page .bg-realization-card h2 {
  font-family: Jost, system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
}

html body.bg-realizations-page #qodef-page-footer,
html body.bg-realizations-page #qodef-page-footer-top-area,
html body.bg-realizations-page #qodef-page-footer-bottom-area {
  background: var(--bg-deep) !important;
  color: rgba(255, 255, 255, .78) !important;
}

html body.bg-realizations-page #qodef-page-footer :is(h1, h2, h3, h4, h5, p, a) {
  font-family: Jost, system-ui, sans-serif !important;
  color: #fff !important;
}

/* Product detail is a catalog page too: keep the photograph, align the
 * hierarchy and remove the last legacy serif/rounded treatments. */
html body.single-product #qodef-page-inner {
  width: min(1380px, calc(100% - 64px)) !important;
  padding: 0 0 clamp(88px, 10vw, 144px) !important;
}

html body.single-product #qodef-woo-page .summary .product_title,
html body.single-product #qodef-woo-page .woocommerce-tabs .tabs li a,
html body.single-product .bg-product-selection-heading h2,
html body.single-product .bg-product-selection-copy h3 {
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
}

html body.single-product #qodef-woo-page :is(.summary, .summary p, .product_meta, .woocommerce-tabs .panel),
html body.single-product .bg-product-navigation,
html body.single-product .bg-product-inquiry p,
html body.single-product .bg-product-selection-heading > a,
html body.single-product .bg-product-selection-copy span {
  font-family: Jost, system-ui, sans-serif !important;
}

html body.single-product #qodef-woo-page .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
html body.single-product #qodef-woo-page .related .qodef-woo-product-image,
html body.single-product .bg-product-selection-card,
html body.single-product .bg-product-selection-image {
  border-radius: 0 !important;
  /* taste-skill-ignore: remove legacy catalog shadows */ box-shadow: none !important;
}

html body.single-product a.bg-product-contact {
  border-radius: 0 !important;
  background: var(--bg-water) !important;
  color: var(--bg-deep) !important;
  font-family: Jost, system-ui, sans-serif !important;
}

html body.single-product #qodef-page-footer,
html body.single-product :is(#qodef-page-footer-top-area, #qodef-page-footer-bottom-area) {
  background: var(--bg-deep) !important;
}

html body.single-product #qodef-page-footer :is(h1, h2, h3, h4, h5, p, a) {
  font-family: Jost, system-ui, sans-serif !important;
  color: #fff !important;
}

/* Archive, realization and product templates use the same editorial grid. */
html body.bg-site-catalog :is(.bg-detail, .bg-site-archive, .bg-case, .bg-realizations-archive) {
  width: min(1380px, calc(100% - 64px)) !important;
  padding: clamp(48px, 7vw, 96px) 0 clamp(88px, 10vw, 144px) !important;
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
}

html body.bg-site-catalog :is(.bg-detail, .bg-site-archive, .bg-case) .bg-perfection-breadcrumb,
html body.bg-realizations-page .bg-perfection-breadcrumb {
  margin-bottom: 42px;
  color: var(--bg-muted) !important;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body.bg-site-catalog :is(.bg-detail, .bg-site-archive, .bg-case) .bg-perfection-breadcrumb a,
html body.bg-realizations-page .bg-perfection-breadcrumb a { color: var(--bg-ink) !important; }

html body.bg-site-catalog :is(.bg-site-archive, .bg-case) h1,
html body.bg-realizations-page .bg-realizations-heading h1,
html body.bg-site-catalog .bg-case h1 {
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-size: clamp(52px, 7vw, 100px) !important;
  font-weight: 500 !important;
  line-height: .91 !important;
  letter-spacing: -.075em !important;
}

html body.bg-site-catalog .bg-site-archive-heading,
html body.bg-realizations-page .bg-realizations-heading { max-width: 820px; margin: 0 0 56px; }
html body.bg-site-catalog .bg-site-archive-heading p,
html body.bg-realizations-page .bg-realizations-heading p:last-child,
html body.bg-site-catalog .bg-case header > p { color: var(--bg-soft-ink) !important; }

html body.bg-site-catalog .bg-site-card-grid,
html body.bg-realizations-page .bg-realizations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

html body.bg-site-catalog .bg-site-card,
html body.bg-realizations-page .bg-realization-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-ground) !important;
}

html body.bg-site-catalog .bg-site-card-photo,
html body.bg-realizations-page .bg-realization-card-photo {
  border-radius: 0 !important;
  background: var(--bg-fog) !important;
}

html body.bg-site-catalog .bg-site-card-copy,
html body.bg-realizations-page .bg-realization-card-copy { padding: 24px !important; }

html body.bg-site-catalog :is(.bg-site-card-copy h2, .bg-realization-card h2, .bg-site-section-heading h2),
html body.bg-site-catalog .bg-detail-content h2 {
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
}

html body.bg-site-catalog .bg-site-card-copy span,
html body.bg-realizations-page .bg-realization-card-link,
html body.bg-realizations-page .bg-realization-card-type { color: var(--bg-muted) !important; }

html body.bg-realizations-page .bg-realizations-filters a {
  border-radius: 0 !important;
  background: var(--bg-fog) !important;
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif;
}

html body.bg-realizations-page .bg-realizations-filters a.is-active {
  border-color: var(--bg-deep) !important;
  background: var(--bg-deep) !important;
  color: #fff !important;
}

html body.bg-realizations-page .bg-realizations-cta,
html body.bg-site-catalog .bg-perfection-support {
  border-radius: 0 !important;
  background: var(--bg-deep) !important;
  color: #fff !important;
}

html body.bg-realizations-page .bg-realizations-cta :is(h2, p),
html body.bg-site-catalog .bg-perfection-support :is(h2, p, a) { color: #fff !important; }

html body.bg-site-catalog .bg-case-gallery figure { border-radius: 0 !important; }
html body.bg-site-catalog .bg-case-gallery img { display: block; }

html body.bg-site-catalog .bg-detail .bg-perfection-visual {
  border-radius: 0 !important;
  background: var(--bg-fog) !important;
}

html body.bg-site-catalog .bg-detail h1,
html body.bg-site-catalog .bg-perfection h1 {
  color: var(--bg-ink) !important;
  font-family: Jost, system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.065em !important;
}

html body.bg-site-catalog :is(.bg-detail, .bg-perfection) .bg-perfection-button {
  border-radius: 0 !important;
  background: var(--bg-water) !important;
  color: var(--bg-deep) !important;
  font-family: Jost, system-ui, sans-serif !important;
}

html body.bg-site-catalog :is(.bg-detail, .bg-perfection) .bg-perfection-facts > div { background: var(--bg-fog); }

@media (max-width: 900px) {
  html body.bg-inner-page .segments .seg-grid,
  html body.bg-inner-page .card-grid,
  html body.bg-site-catalog .bg-site-card-grid,
  html body.bg-realizations-page .bg-realizations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  html body.bg-inner-page .method .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  html body:not(.home) header#nav.nav,
  html body:not(.home) header#nav.nav .wrap { min-height: 68px; }
  html body:not(.home) header#nav.nav .wrap,
  html body:not(.home) .bg-project-navigation__inner,
  html body.bg-inner-page .page-hero > .wrap,
  html body.bg-inner-page :is(.intro, .segments, .feature, .method, .cta) > .wrap,
  html body.bg-site-catalog :is(.bg-detail, .bg-site-archive, .bg-case, .bg-realizations-archive),
  html body:not(.home) footer .foot-top { width: calc(100% - 40px) !important; }

  html body.bg-inner-page .page-hero { min-height: 480px !important; }
  html body.bg-inner-page .page-hero h1 { max-width: 10ch !important; font-size: clamp(48px, 14vw, 74px) !important; }
  html body.bg-inner-page .page-hero :is(p, .lead) { font-size: 16px !important; }
  html body.bg-inner-page :is(.intro, .segments, .feature, .method, .cta) { padding-block: 72px !important; }
  html body.bg-inner-page .intro .cols,
  html body.bg-inner-page .feature .wrap,
  html body.bg-inner-page .cta > .wrap { display: block; }
  html body.bg-inner-page .intro .lead,
  html body.bg-inner-page .f-txt { margin-top: 28px; }
  html body.bg-inner-page .feature .f-media { min-height: 300px; margin-bottom: 34px; }
  html body.bg-inner-page .feature .f-media img { min-height: 300px; }
  html body.bg-inner-page .method .steps,
  html body.bg-inner-page .segments .seg-grid,
  html body.bg-inner-page .card-grid,
  html body.bg-site-catalog .bg-site-card-grid,
  html body.bg-realizations-page .bg-realizations-grid { grid-template-columns: 1fr; }
  html body.bg-inner-page .method .step { min-height: 0; border-right: 0; }
  html body.bg-inner-page .method .step + .step { padding-left: 24px; }
  html body.bg-inner-page .cta .cta-actions { margin-top: 28px; }
  html body.bg-site-catalog :is(.bg-site-archive, .bg-case) h1,
  html body.bg-realizations-page .bg-realizations-heading h1 { font-size: 52px !important; }
  html body.bg-site-catalog :is(.bg-detail, .bg-perfection) h1 { font-size: 48px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.home) * { scroll-behavior: auto !important; transition: none !important; }
}