/*
 * Editorial Product block — product presented in an editorial register.
 * Structure only. All visual tokens come from the active EggBlocks theme.
 */

/* ── Wrapper ────────────────────────────────────── */

/*
 * Vertical room around the whole family. These blocks interrupt prose, and a
 * figure -- or a mention, which carries rules above and below -- sitting flush
 * against a paragraph reads as part of it rather than as a break in it.
 *
 * Set in CSS rather than as a block.json spacing default, which would arrive as
 * an inline style: that outranks every stylesheet, so no variant could ever vary
 * the value. An author's own spacing choice does arrive inline, and still
 * overrides this.
 */
.eggb-editorial-product-wrap {
  margin-block: 2.5rem;
}

/* ── Shared ─────────────────────────────────────── */

.eggb-editorial-product .eggb-ep-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--eggb-text-muted);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.eggb-editorial-product .eggb-ep-body {
  margin: 0;
}

.eggb-block .eggb-ep-body p {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.eggb-block .eggb-ep-body p:last-child {
  margin-bottom: 0;
}

/*
 * Type sizes across every variant: prose reads at the article's own size, so a
 * product reads as part of the piece rather than as a widget dropped into it.
 * Things that go smaller are apparatus rather than text: the eyebrow label, the
 * spec labels, attribution (merchant, footnote), and the figure caption, which
 * earns a gentle step down by convention. The claim statement is the sole step
 * upwards. Where a size is relative to the surrounding text it is set in em,
 * never rem: a rem value is pinned to the root and lands far below body size on
 * a theme that sets large type, which is how these ended up too small before.
 */
.eggb-editorial-product .eggb-ep-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.55rem;
  color: var(--eggb-text-muted);
  line-height: 1.6;
}

.eggb-editorial-product .eggb-ep-merchant,
.eggb-editorial-product .eggb-ep-context {
  font-size: var(--eggb-text-xs);
}

/*
 * Underlined, not bordered. The meta row is a flex container, so this anchor is
 * a blockified flex item: a border-bottom draws once across the item's whole
 * width, which on a title long enough to wrap is a rule across the column. The
 * text decoration hugs the words and breaks with them.
 *
 * Weight 500 rather than 600: at body size, in the accent colour and underlined,
 * the name was the loudest thing in the block. It is a citation of the product
 * the paragraph just discussed, not the point of the block.
 */
.cegg5-container .eggb-editorial-product .eggb-ep-name {
  font-weight: 500;
  color: var(--eggb-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cegg5-container .eggb-editorial-product .eggb-ep-name:hover {
  text-decoration: underline;
}

.eggb-editorial-product .eggb-ep-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ── Figure ─────────────────────────────────────── */

/*
 * Centred as a unit -- image and caption together, capped at the image's own
 * ceiling. A figure narrower than the column leaves whitespace whatever we do,
 * and whitespace split evenly reads as deliberate where a single gap down one
 * side reads as a mistake. The caption text stays left-aligned inside that
 * column: centred italic running over several lines is hard to read.
 *
 * The centring is done from the wrapper, not by auto margins on the figure.
 * Every theme styles bare `figure` -- Kadence ships `figure{margin:.5em 0}` --
 * and a single-class rule of ours loses that race the moment a theme reaches
 * for a descendant selector. Nothing outside this block targets the wrapper,
 * so centring here holds whatever the theme does to the figure.
 */
.eggb-editorial-product-wrap--figure {
  display: flex;
  justify-content: center;
}

.eggb-editorial-product--figure {
  margin: 0;
  width: 520px;
  max-width: 100%;
}

/*
 * Shown at its own size and never enlarged past the caption column. Amazon's
 * API image is 500px on the longest side, so a figure at column width is
 * already past 1:1 before a 2x display doubles it again; the renderer asks the
 * CDN for a 1040px render of that same picture so the resampling happens once,
 * at the source, rather than in the browser. See EditorialProductRenderer.
 *
 * The radius sits on the image itself rather than on a clipping wrapper: the
 * wrapper can be wider than a small image, and a clip that misses the edges
 * leaves square corners on exactly the images this cap is meant to serve.
 */
.eggb-editorial-product--figure .eggb-ep-img-link {
  display: block;
}

.eggb-editorial-product--figure .eggb-ep-img {
  width: auto;
  max-height: 520px;
  margin-inline: auto;
  border-radius: var(--eggb-radius);
}

.eggb-editorial-product--figure .eggb-ep-caption {
  padding-top: 0.875rem;
}

.eggb-editorial-product--figure .eggb-ep-body--caption {
  font-size: 0.9375em;
  line-height: 1.65;
  font-style: italic;
}

@media (max-width: 767.98px) {
  .eggb-editorial-product-wrap--figure.alignwide {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Claim ──────────────────────────────────────── */

.eggb-editorial-product--claim {
  margin: 0;
  padding: 1.5rem 1.625rem;
  background: var(--eggb-surface);
  border: var(--eggb-border-w) solid var(--eggb-border);
  border-left: 3px solid var(--eggb-accent);
  border-radius: var(--eggb-radius);
}

.eggb-editorial-product--claim .eggb-ep-statement {
  font-size: var(--eggb-text-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: pretty;
}

.eggb-editorial-product--claim .eggb-ep-claim-rule {
  margin: 1.375rem 0;
}

.eggb-editorial-product--claim .eggb-ep-evidence {
  display: flex;
  gap: 1.125rem;
  align-items: center;
}

.eggb-editorial-product--claim .eggb-ep-thumb {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--eggb-radius);
  overflow: hidden;
}

.eggb-editorial-product--claim .eggb-ep-evidence-body {
  min-width: 0;
}

.eggb-editorial-product .eggb-ep-specs--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  font-size: var(--eggb-text-xs);
  color: var(--eggb-text-muted);
  line-height: 1.5;
}

.eggb-editorial-product .eggb-ep-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .eggb-editorial-product--claim {
    padding: 1.125rem 1.25rem;
  }

  .eggb-editorial-product--claim .eggb-ep-statement {
    font-size: 1.3125rem;
  }

  .eggb-editorial-product--claim .eggb-ep-thumb {
    width: 60px;
    height: 60px;
  }

  .eggb-editorial-product--claim .eggb-ep-evidence {
    gap: 0.875rem;
  }
}

/* ── Specimen ───────────────────────────────────── */

.eggb-editorial-product--specimen {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 0;
  padding: 1.5rem;
  background: var(--eggb-surface);
  border: var(--eggb-border-w) solid var(--eggb-border);
  border-radius: var(--eggb-radius);
}

.eggb-editorial-product--specimen .eggb-ep-specimen-img {
  border-radius: var(--eggb-radius);
  overflow: hidden;
}

.eggb-editorial-product--specimen .eggb-ep-specimen-body {
  min-width: 0;
}

.eggb-editorial-product--specimen .eggb-ep-lead {
  line-height: 1.6;
  margin-bottom: 1.125rem;
  text-wrap: pretty;
}

.eggb-editorial-product .eggb-ep-specs--rows {
  margin: 0 0 1.125rem;
  display: flex;
  flex-direction: column;
}

.eggb-editorial-product .eggb-ep-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-editorial-product .eggb-ep-spec-row:first-child {
  border-top: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-editorial-product .eggb-ep-spec-row dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--eggb-text-muted);
  line-height: 1.2;
}

.eggb-editorial-product .eggb-ep-spec-row dd {
  margin: 0;
  line-height: 1.4;
  text-align: right;
}

@media (max-width: 575.98px) {
  .eggb-editorial-product--specimen {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    padding: 1.125rem;
  }
}

/* ── Mention ────────────────────────────────────── */

.eggb-editorial-product--mention {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-top: var(--eggb-border-w) solid var(--eggb-border);
  border-bottom: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-editorial-product--mention .eggb-ep-mention-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--eggb-radius);
  overflow: hidden;
}

.eggb-editorial-product--mention .eggb-ep-mention-body {
  min-width: 0;
}

.eggb-editorial-product--mention .eggb-ep-body--mention {
  line-height: 1.6;
  text-wrap: pretty;
}