/* Custom section from primitives — template/blocks/content/ (docs/15-block-library-plan.md S5). Tokens only.
   Scope: :where([data-section="content"]) — every variant of the type (default, inset, consult: primitives look the same) — zero specificity, so the section wrapper
   (spacing, columns and carousel on .et-section__grid in elbuz_sections.css) always wins over these defaults.
   Alignment: the wrapper's .et-section--center sets --et-content-align / --et-content-text; groups may override it. */

:where([data-section="content"]) { --et-content-align: flex-start; --et-content-text: start; }
:where([data-section="content"].et-section--center) { --et-content-align: center; --et-content-text: center; }

:where([data-section="content"]) .et-content { padding-block: calc(var(--et-section-gap) * 0.5); }

/* ---------- layouts ---------- */
:where([data-section="content"]) :is(.et-content__body, .et-content__col) {
  display: flex;
  flex-direction: column;
  align-items: var(--et-content-align);
  gap: var(--et-grid-gap);
  min-width: 0;
  text-align: var(--et-content-text);
}
:where([data-section="content"]) .et-content--stack .et-content__body { max-width: 72ch; }
:where([data-section="content"].et-section--center) .et-content--stack .et-content__body { margin-inline: auto; }

:where([data-section="content"]) .et-content__split {
  display: grid;
  gap: calc(var(--et-grid-gap) * 2);
  align-items: center;
}
@media (min-width: 768px) {
  :where([data-section="content"]) .et-content__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :where([data-section="content"]) .et-content--media-right .et-content__media-col { order: 2; }
}

:where([data-section="content"]) .et-content__cols {
  display: grid;
  gap: var(--et-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
:where([data-section="content"]) .et-content__col > :is(.et-content__group--card, .et-content__media) { flex: 1 1 auto; align-self: stretch; }

/* zigzag: rows of .et-content__split (media side alternates via .et-content--media-right on the row) */
:where([data-section="content"]) .et-content__rows { display: grid; gap: var(--et-section-gap); }

/* ---------- heading ---------- */
:where([data-section="content"]) .et-content__heading {
  margin: 0;
  font-family: var(--et-font-display);
  font-weight: var(--et-heading-weight);
  font-style: var(--et-heading-style);
  line-height: var(--et-heading-leading);
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  color: var(--et-text);
  overflow-wrap: anywhere;
}
:where([data-section="content"]) .et-content__heading--h2 { font-size: var(--et-text-3xl); }
:where([data-section="content"]) .et-content__heading--h3 { font-size: var(--et-text-xl); }
:where([data-section="content"]) .et-content__heading--s { font-size: var(--et-text-lg); }
:where([data-section="content"]) .et-content__heading--m { font-size: var(--et-text-2xl); }
:where([data-section="content"]) .et-content__heading--l { font-size: var(--et-text-4xl); }
:where([data-section="content"]) .et-content__heading--xl { font-size: var(--et-text-5xl); }

/* ---------- text ---------- */
:where([data-section="content"]) .et-content__text {
  margin: 0;
  max-width: 72ch;
  font-size: var(--et-text-base);
  line-height: var(--et-body-leading);
  color: var(--et-text-secondary);
}
:where([data-section="content"]) .et-content__text p { margin: 0; }
:where([data-section="content"]) .et-content__text p + p { margin-top: 0.75em; }
:where([data-section="content"]) .et-content__text--s { font-size: var(--et-text-sm); }
:where([data-section="content"]) .et-content__text--l { font-size: var(--et-text-lg); color: var(--et-text); }
:where([data-section="content"]) .et-content__text--quote {
  font-family: var(--et-font-accent, var(--et-font-display));
  font-size: var(--et-text-xl);
  font-style: italic;
  line-height: var(--et-heading-leading);
  color: var(--et-text);
}
:where([data-section="content"]) .et-content__text--quote.et-content__text--l { font-size: var(--et-text-3xl); }

/* ---------- media ---------- (--et-content-radius: an own shape of section photos, e.g. a leaf "0 46% 0 46%"; else the media radius) */
:where([data-section="content"]) .et-content__media {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--et-content-radius, var(--et-media-radius));
  background: var(--et-surface-2);
}
:where([data-section="content"]) .et-content__media img { display: block; width: 100%; height: auto; }
:where([data-section="content"]) .et-content__media--r-1-1 { aspect-ratio: 1; }
:where([data-section="content"]) .et-content__media--r-4-3 { aspect-ratio: 4 / 3; }
:where([data-section="content"]) .et-content__media--r-3-4 { aspect-ratio: 3 / 4; }
:where([data-section="content"]) .et-content__media--r-16-9 { aspect-ratio: 16 / 9; }
:where([data-section="content"]) .et-content__media[class*="--r-"] img { height: 100%; object-fit: cover; }
:where([data-section="content"]) .et-content__media--empty {
  display: grid;
  place-items: center;
  min-height: 12rem;
  font-size: var(--et-text-4xl);
  color: var(--et-text-muted);
}

/* ---------- icon ---------- */
:where([data-section="content"]) .et-content__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  flex: none;
  border-radius: var(--et-radius-full);
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  font-size: var(--et-text-lg);
}
:where([data-section="content"]) .et-content__icon--s { font-size: var(--et-text-base); }
:where([data-section="content"]) .et-content__icon--l { font-size: var(--et-text-2xl); }

/* ---------- list ---------- */
:where([data-section="content"]) .et-content__list {
  display: grid;
  gap: 0.4em;
  margin: 0;
  padding-inline-start: 1.25em;
  text-align: start;
  font-size: var(--et-text-base);
  line-height: var(--et-body-leading);
  color: var(--et-text-secondary);
}
:where([data-section="content"]) .et-content__list--check { list-style: none; padding-inline-start: 0; }
:where([data-section="content"]) .et-content__list--check li::before { content: "✓"; margin-inline-end: 0.5em; font-weight: 700; color: var(--et-accent-text); }
/* price list: "name | price | time | note" rows under hairlines; the name in the display font, figures tabular */
:where([data-section="content"]) .et-content__list--price { width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--et-border-strong); font-variant-numeric: tabular-nums; }
:where([data-section="content"]) .et-content__list--price li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(3.5rem, auto); align-items: baseline; gap: 0.25rem 1rem;
  padding: 0.875rem 0; border-bottom: 1px solid color-mix(in oklab, var(--et-text) 22%, transparent); text-align: start;
}
:where([data-section="content"]) .et-content__price-name { font: var(--et-heading-weight, 400) var(--et-text-xl)/1.15 var(--et-font-display); color: var(--et-text); }
:where([data-section="content"]) .et-content__price-value { grid-column: 2; font-weight: 500; color: var(--et-text); white-space: nowrap; }
:where([data-section="content"]) .et-content__price-term { grid-column: 3; font-size: var(--et-text-sm); color: var(--et-text-muted); text-align: end; white-space: nowrap; }
:where([data-section="content"]) .et-content__price-note { grid-column: 1 / -1; font-size: var(--et-text-sm); color: var(--et-text-muted); }
@media (max-width: 575.98px) {
  :where([data-section="content"]) .et-content__list--price li { grid-template-columns: minmax(0, 1fr) auto; }
  :where([data-section="content"]) .et-content__price-term { grid-column: 2; }
}

/* ---------- spacer ---------- */
:where([data-section="content"]) .et-content__spacer { width: 100%; height: calc(var(--et-section-gap) * 0.5); }
:where([data-section="content"]) .et-content__spacer--s { height: calc(var(--et-section-gap) * 0.25); }
:where([data-section="content"]) .et-content__spacer--l { height: var(--et-section-gap); }
:where([data-section="content"]) .et-content__spacer--xl { height: calc(var(--et-section-gap) * 1.5); }

/* ---------- group ---------- */
:where([data-section="content"]) .et-content__group { display: flex; gap: var(--et-grid-gap); min-width: 0; }
:where([data-section="content"]) .et-content__group--column { flex-direction: column; align-items: var(--et-content-align); }
:where([data-section="content"]) .et-content__group--row { flex-flow: row wrap; align-items: center; justify-content: var(--et-content-align); }
:where([data-section="content"]) .et-content__group--gap-none { gap: 0; }
:where([data-section="content"]) .et-content__group--gap-s { gap: calc(var(--et-grid-gap) * 0.5); }
:where([data-section="content"]) .et-content__group--gap-l { gap: calc(var(--et-grid-gap) * 2); }
:where([data-section="content"]) .et-content__group--start { --et-content-align: flex-start; --et-content-text: start; text-align: start; }
:where([data-section="content"]) .et-content__group--center { --et-content-align: center; --et-content-text: center; text-align: center; }
:where([data-section="content"]) .et-content__group--end { --et-content-align: flex-end; --et-content-text: end; text-align: end; }
:where([data-section="content"]) .et-content__group--card {
  align-self: stretch;
  padding: var(--et-card-pad);
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-card-radius);
}

/* Accordion (FAQ): native <details>, the first heading is the summary */
:where([data-section="content"]) .et-content__group--accordion {
  display: block;
  align-self: stretch;
  width: 100%;
  text-align: start;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
:where([data-section="content"]) .et-content__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-grid-gap);
  padding-block: calc(var(--et-grid-gap) * 0.75);
  cursor: pointer;
  list-style: none;
}
:where([data-section="content"]) .et-content__summary::-webkit-details-marker { display: none; }
:where([data-section="content"]) .et-content__summary::after {
  content: "+";
  flex: none;
  font-size: var(--et-text-xl);
  line-height: 1;
  color: var(--et-text-muted);
  transition: transform 0.2s;
}
:where([data-section="content"]) .et-content__group--accordion[open] > .et-content__summary::after { transform: rotate(45deg); }
:where([data-section="content"]) .et-content__summary .et-content__heading { font-size: var(--et-text-lg); }
:where([data-section="content"]) .et-content__group--accordion > .et-content__group { --et-content-align: flex-start; --et-content-text: start; padding-bottom: var(--et-grid-gap); }
:where([data-section="content"]) .et-content__summary:focus-visible { outline: 2px solid var(--et-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :where([data-section="content"]) .et-content__summary::after { transition: none; }
}

/* ---------- image width (logos, badges in a row) ---------- */
:where([data-section="content"]) .et-content__media--w-xs { max-inline-size: 4rem; }
:where([data-section="content"]) .et-content__media--w-s { max-inline-size: 7rem; }
:where([data-section="content"]) .et-content__media--w-m { max-inline-size: 12rem; }
:where([data-section="content"]) .et-content__media[class*="--w-"] { background: none; }
/* pinked edge (fabric, wallpaper, paper samples): zigzag-scissor top and bottom, the tooth --et-pinked */
:where([data-section="content"]) .et-content__media--pinked {
  --et-pk: calc(2 * var(--et-pinked, 7px));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--et-pk) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--et-pk) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--et-pk) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--et-pk) 51% repeat-x;
  border-radius: 0;
}
:where([data-section="content"]) .et-content__media--pinked img { border-radius: 0; }

/* ---------- video: click-to-load (js/elbuz_sections.js) or a local file ---------- */
:where([data-section="content"]) .et-content__video {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--et-media-radius);
  background: var(--et-surface-2);
}
:where([data-section="content"]) .et-content__video--r-4-3 { aspect-ratio: 4 / 3; }
:where([data-section="content"]) .et-content__video--r-1-1 { aspect-ratio: 1; }
:where([data-section="content"]) .et-content__video--r-9-16 { aspect-ratio: 9 / 16; width: min(100%, 45vh); margin-inline: auto; }
:where([data-section="content"]) .et-content__video :is(video, iframe, img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
:where([data-section="content"]) .et-content__video-play { position: absolute; inset: 0; display: grid; place-items: center; color: inherit; }
:where([data-section="content"]) .et-content__video-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--et-radius-full);
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  font-size: var(--et-text-xl);
  box-shadow: var(--et-shadow);
  transition: transform 0.2s;
}
:where([data-section="content"]) .et-content__video-btn i { margin-inline-start: 0.15em; }
:where([data-section="content"]) .et-content__video-play:hover .et-content__video-btn { transform: scale(1.08); }
:where([data-section="content"]) .et-content__video-play:focus-visible { outline: 2px solid var(--et-accent); outline-offset: -4px; }
:where([data-section="content"]) .et-content__video--empty { display: grid; place-items: center; font-size: var(--et-text-4xl); color: var(--et-text-muted); }

/* ---------- stat ---------- */
:where([data-section="content"]) .et-content__stat { display: flex; flex-direction: column; align-items: var(--et-content-align); gap: 0.25em; }
:where([data-section="content"]) .et-content__stat-value {
  font-family: var(--et-font-display);
  font-weight: var(--et-heading-weight);
  font-size: var(--et-text-5xl);
  line-height: 1;
  letter-spacing: var(--et-heading-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--et-text);
}
:where([data-section="content"]) .et-content__stat-affix { font-size: 0.6em; }
:where([data-section="content"]) .et-content__stat-label { font-size: var(--et-text-sm); color: var(--et-text-secondary); }

/* ---------- newsletter (form[data-et-ajax], handler in elbuz_theme.js) ---------- */
:where([data-section="content"]) .et-content__newsletter { display: grid; gap: calc(var(--et-grid-gap) * 0.5); width: min(100%, 32rem); }
:where([data-section="content"]) .et-content__newsletter-row { display: flex; flex-wrap: wrap; gap: calc(var(--et-grid-gap) * 0.5); }
:where([data-section="content"]) .et-content__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.75em 1em;
  border: var(--et-input-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-input-radius);
  background: var(--et-surface);
  font: inherit;
  font-size: var(--et-text-base);
  color: var(--et-text);
}
:where([data-section="content"]) .et-content__input:focus-visible { outline: 2px solid var(--et-accent); outline-offset: 1px; }
:where([data-section="content"]) .et-content__newsletter .et-content__btn { flex: none; }
:where([data-section="content"]) .et-content__note { margin: 0; font-size: var(--et-text-xs); color: var(--et-text-muted); text-align: var(--et-content-text); }
:where([data-section="content"]) .et-content__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  :where([data-section="content"]) .et-content__video-btn { transition: none; }
}

/* ---------- message (a chat bubble), ask (a question to the shop), link-card (a guide / article plate) ---------- */
:where([data-section="content"]) .et-content__msg { max-width: 88%; margin: 0; padding: 0.875rem 1.125rem; border-radius: var(--et-radius); line-height: 1.45; background: var(--et-surface); color: var(--et-text); box-shadow: var(--et-puff, none), 0 4px 0 var(--et-surface-3, var(--et-border)), var(--et-shadow-sm); text-align: start; }
:where([data-section="content"]) .et-content__msg b { display: block; margin-bottom: 0.125rem; font-size: var(--et-text-xs); color: var(--et-text-muted); }
:where([data-section="content"]) .et-content__msg--a { align-self: flex-start; border-bottom-left-radius: var(--et-radius-xs); }
:where([data-section="content"]) .et-content__msg--q { align-self: flex-end; border-bottom-right-radius: var(--et-radius-xs); background: var(--et-c-butter, var(--et-accent-light)); color: color-mix(in oklab, var(--et-c-butter, var(--et-text)) 15%, black); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5), 0 4px 0 color-mix(in oklab, var(--et-c-butter, var(--et-border)) 60%, black), var(--et-shadow-sm); }
:where([data-section="content"]) .et-content__msg--q b { color: inherit; opacity: 0.75; }
:where([data-section="content"]) .et-content__ask { display: grid; gap: calc(var(--et-grid-gap) * 0.5); width: 100%; }
:where([data-section="content"]) .et-content__ask-q { min-height: 6rem; resize: vertical; }
:where([data-section="content"]) .et-content__ask-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--et-grid-gap) * 0.5); }
:where([data-section="content"]) .et-content__ask-row .et-content__input { flex: 1 1 10rem; }
:where([data-section="content"]) .et-content__ask-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--et-text-sm); font-weight: 600; color: var(--et-text-secondary); }
:where([data-section="content"]) .et-content__ask-note i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--et-success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--et-success) 22%, transparent); }
:where([data-section="content"]) .et-content__card { display: grid; gap: 0.375rem; color: var(--et-text); text-decoration: none; text-align: start; }
:where([data-section="content"]) .et-content__card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--et-media-radius); background: var(--et-surface-2); }
:where([data-section="content"]) .et-content__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--et-motion-slow, 0.6s) var(--et-motion-ease, ease); }
:where([data-section="content"]) .et-content__card small { margin-top: 0.5rem; font-weight: 700; font-size: var(--et-text-sm); color: var(--et-accent-text); }
:where([data-section="content"]) .et-content__card b { font-family: var(--et-font-display); font-size: var(--et-text-xl); line-height: 1.15; }
:where([data-section="content"]) a.et-content__card:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--et-accent); text-underline-offset: 5px; }
:where([data-section="content"]) a.et-content__card:hover .et-content__card-img img { transform: scale(1.06); }

/* ---------- glossary: terms in mono with their explanation ---------- */
.et-content__glossary { display: grid; gap: 0.875rem; margin: 0; }
.et-content__glossary > div { display: grid; gap: 0.125rem; padding-top: 0.75rem; border-top: var(--et-border-width) solid var(--et-border); }
.et-content__glossary > div:first-child { padding-top: 0; border-top: 0; }
.et-content__glossary dt { font: 600 var(--et-text-sm) var(--et-font-mono); color: var(--et-text); }
.et-content__glossary dd { margin: 0; font-size: var(--et-text-sm); color: var(--et-text-secondary); }