/* Page backdrop (decor.backdrop → html[data-backdrop="fixed|scroll"][data-panels="solid|glass|clear"], docs/12, R41).
   Loaded by the engine only when the backdrop is on: mode image (a picture) or mode color (a colour / gradient, R43).
   --et-backdrop-img — set by the engine (picture: light / dark, desktop / phone, WebP; colour: linear-gradient, light / dark);
   --et-backdrop-veil — the page colour laid over
   the picture (decor.backdrop.veil). Content sits on panels so text and prices keep their contrast:
   solid — opaque panels; glass — translucent panels with blur (opaque without backdrop-filter or with reduced transparency);
   clear — home sections without panels, headings on plates; product, category and service pages keep glass panels.
   Blur only on the large panels, never on every card. */
:root {
  --et-backdrop-veil: 0%;
  --et-panel-a: 82%;            /* share of the page colour in a glass panel; below ~75% contrast is not guaranteed */
  --et-panel-blur: 14px;
  --et-panel-radius: var(--et-card-radius, var(--et-radius));
  --et-panel-gap: calc(var(--et-section-gap) * 0.5);
  --et-panel-edge: 8px;         /* page margin around the panels */
}
@media (min-width: 768px) { :root { --et-panel-edge: 16px; } }
@media (min-width: 1280px) { :root { --et-panel-edge: 24px; } }

/* the picture: a fixed layer under the page (body::before — the preset glow — stays above it) */
html[data-backdrop]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--et-bg) var(--et-backdrop-veil), transparent) 0 0),
    var(--et-backdrop-img, none) center / cover no-repeat;
}
/* scroll: the picture fills the first screen and leaves with it, fading into the page colour */
html[data-backdrop="scroll"]::before {
  position: absolute;
  inset: 0 0 auto;
  height: 100lvh;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

/* ---- panels ---- */
html[data-panels][data-backdrop] { /* outranks the preset tokens (:root, html.dark-theme) */
  --et-panel-bg: var(--et-bg);
  --et-panel-plate: color-mix(in srgb, var(--et-bg) 92%, transparent);
  --et-text-muted: var(--et-text-secondary); /* over a picture the faint grey text is not readable */
}
html[data-panels] :is(.et-main > .container, .et-sections > .et-section:not([class*="et-scheme-"]):not(.et-section--w-full):has(*)) {
  width: min(100% - var(--et-panel-edge) * 2, var(--et-container));
  margin-inline: auto;
  border-radius: var(--et-panel-radius);
  background: var(--et-panel-bg);
}
html[data-panels] .et-main > .container { padding-block: var(--et-gutter, 1rem); }
html[data-panels] .et-sections > .et-section:has(*) { margin-block: var(--et-panel-gap); }
html[data-panels] .et-sections > .et-section:not([class*="et-scheme-"]):not(.et-section--w-full):has(*) { padding-block: var(--et-panel-gap); }
html[data-panels] .et-main { padding-block: var(--et-panel-gap); background: transparent; }
/* an empty section (a module slot with nothing in it) is no panel: the panel selectors take only sections with content (:has(*)) */
/* breadcrumbs sit right on the picture: on a plate */
html[data-panels] .et-breadcrumbs__list {
  width: fit-content;
  max-width: 100%;
  padding: 0.35em 0.8em;
  border-radius: var(--et-radius-full, 999px);
  background: var(--et-panel-plate);
}
/* coloured sections (schemes) keep their own colour as panels too */
html[data-panels] .et-sections > .et-section[class*="et-scheme-"]:not(.et-section--w-full) {
  width: min(100% - var(--et-panel-edge) * 2, var(--et-container));
  margin-inline: auto;
  border-radius: var(--et-panel-radius);
}

/* glass: translucent panels, blur only here */
html[data-panels="glass"][data-backdrop],
html[data-panels="clear"][data-backdrop] { --et-panel-bg: color-mix(in srgb, var(--et-bg) var(--et-panel-a), transparent); }
html:is([data-panels="glass"], [data-panels="clear"]) :is(.et-main > .container, .et-sections > .et-section:not([class*="et-scheme-"]):not(.et-section--w-full):has(*)) {
  -webkit-backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2);
  backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
}
/* cards inside panels: no second blur (a grid of blurred cards is slow on phones) */
html[data-panels] :is(.et-card, .et-tile, .et-blog-card) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* glass header (panels glass, port 69): the blur only on ::before. A backdrop-filter on the header itself makes it the backdrop root (the
   glass mega menu inside would blur nothing) and the containing block of the phone's position: fixed menu. Rows inside lose their own
   fill so one sheet of glass reads; the mega menu body is glass of its own */
html[data-panels="glass"][data-backdrop] .et-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate; }
html[data-panels="glass"][data-backdrop] .et-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--et-header-bg, var(--et-bg)) var(--et-panel-a), transparent);
  -webkit-backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2); backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, white 18%, transparent);
}
html[data-panels="glass"][data-backdrop] .et-header :is(.et-catbar, .et-utility-bar) { background: transparent; }
html[data-panels="glass"][data-backdrop] .et-mega__body {
  background: color-mix(in srgb, var(--et-surface) var(--et-panel-a), transparent);
  -webkit-backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2); backdrop-filter: blur(var(--et-panel-blur)) saturate(1.2);
}

/* clear: home sections without panels — the picture shows; headings and breadcrumbs on plates, cards keep a solid face */
html[data-panels="clear"] .et-sections > .et-section:not([class*="et-scheme-"]):not([data-section^="main-"]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html[data-panels="clear"] .et-sections > .et-section:not([class*="et-scheme-"]):not([data-section^="main-"]) :is(.et-section__title, .et-section__subtitle) {
  width: fit-content;
  max-width: 100%;
  padding: 0.2em 0.6em;
  border-radius: var(--et-radius-sm, 6px);
  background: var(--et-panel-plate);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-panels="clear"] .et-sections > .et-section:not([data-section^="main-"]) .et-section--center :is(.et-section__title, .et-section__subtitle),
html[data-panels="clear"] .et-sections > .et-section--center:not([data-section^="main-"]) :is(.et-section__title, .et-section__subtitle) { margin-inline: auto; }
html[data-panels="clear"] { --et-glass-a: 90%; } /* surface=glass cards straight over the picture: nearly opaque */
html[data-panels="clear"][data-surface="bare"] :is(.et-card, .et-tile, .et-blog-card, .et-advantage, .et-testimonial) { background: var(--et-panel-plate); border-radius: var(--et-card-radius, var(--et-radius)); }

/* glaze (R50, prototype 73): every panel and card is a solid glazed tile — white clay (--et-panel-bg = surface) with a light sheen at the
   top left (--et-glaze-sheen), a thicker glaze pooling at the bottom edge (--et-glaze-pool) and a seam shadow; the backdrop shows in the
   seams between them. js/elbuz_glaze.js adds the lamp: a soft spot of light (.et-glaze-lamp > i, --et-glaze-light) that follows the
   mouse over the tile under it — transform and opacity only; no mouse or reduced motion — no lamp, the static sheen stays. */
html[data-panels="glaze"][data-backdrop] {
  --et-panel-bg: var(--et-surface);
  --et-glaze-sheen: rgb(255 255 255 / 0.78); --et-glaze-pool: rgb(70 52 25 / 0.09); --et-glaze-light: rgb(255 255 255 / 0.62);
  --et-glaze-shadow: inset 0 1px 0 var(--et-glaze-sheen), inset 0 -3px 0 var(--et-glaze-pool), inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 1px 0 rgb(var(--et-shadow-rgb, 0 0 0) / 0.12), 0 14px 30px -24px rgb(var(--et-shadow-rgb, 0 0 0) / 0.5);
}
html.dark-theme[data-panels="glaze"][data-backdrop] {
  --et-glaze-sheen: rgb(255 236 200 / 0.16); --et-glaze-pool: rgb(0 0 0 / 0.32); --et-glaze-light: rgb(255 214 150 / 0.2);
  --et-glaze-shadow: inset 0 1px 0 var(--et-glaze-sheen), inset 0 -3px 0 var(--et-glaze-pool), inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 1px 0 rgb(0 0 0 / 0.4), 0 18px 40px -26px rgb(0 0 0 / 0.8);
}
html[data-panels="glaze"] :is(.et-main > .container, .et-sections > .et-section:not([class*="et-scheme-"]):not(.et-section--w-full):has(*)) {
  position: relative; isolation: isolate;
  background: radial-gradient(130% 70% at 12% -10%, var(--et-glaze-sheen), transparent 55%), var(--et-panel-bg, var(--et-surface));
  box-shadow: var(--et-glaze-shadow);
}
html[data-panels="glaze"] .et-sections > .et-section[class*="et-scheme-"]:not(.et-section--w-full) { box-shadow: var(--et-glaze-shadow); }
/* cards and tiles take the surface of their own section (a dark scheme gives a dark tile); the sheen is the section's too */
html[data-panels="glaze"] :is(.et-card, .et-tile) { position: relative; isolation: isolate; box-shadow: var(--et-glaze-shadow);
  background: radial-gradient(130% 70% at 12% -10%, var(--et-glaze-sheen), transparent 55%), var(--et-surface); }
html[data-panels="glaze"] .et-scheme-inverse :is(.et-card, .et-tile) { --et-glaze-sheen: rgb(255 236 200 / 0.12); --et-glaze-pool: rgb(0 0 0 / 0.3); }
html.dark-theme[data-panels="glaze"] .et-scheme-inverse :is(.et-card, .et-tile) { --et-glaze-sheen: rgb(255 255 255 / 0.7); --et-glaze-pool: rgb(70 52 25 / 0.09); }
.et-glaze-lamp { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.et-glaze-lamp i { position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--et-glaze-light), transparent); mix-blend-mode: soft-light; transition: opacity 0.45s ease; will-change: transform; }
html.dark-theme .et-glaze-lamp i { mix-blend-mode: screen; }
.et-glaze-lamp.is-lit i { opacity: 1; }

/* no blur support, or the visitor asked for less transparency: opaque panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-panels][data-backdrop] { --et-panel-bg: var(--et-bg); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-panels][data-backdrop] { --et-panel-bg: var(--et-bg); --et-panel-plate: var(--et-bg); }
  html[data-panels] :is(.et-main > .container, .et-sections > .et-section) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-panels][data-backdrop] .et-header::before { background: var(--et-header-bg, var(--et-bg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-panels][data-backdrop] .et-mega__body { background: var(--et-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}