/* ============================================================
   AFFILIATE EGG — MODERN TEMPLATES SHARED STYLESHEET
   ============================================================ */

/* ---- Step 1: tokens + hardened reset ---- */
.affegg-m {
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F0F2F5; --border:#E4E7EC;
  --ink:#12141A; --ink-2:#565D6B; --ink-3:#63697A;
  --accent:#3B36E4; --accent-strong:#322DCB; --accent-ink:#FFFFFF; --accent-soft:#ECEBFD;
  --deal:#E11D48;
  --star:#F5A524;
  --ok:#12A150; --off:#8A909C;
  --r:14px; --r-sm:8px;
  --shadow-rest: 0 1px 2px rgba(16,24,40,.06);
  --shadow-hover: 0 10px 28px -14px rgba(16,24,40,.18);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  box-sizing: border-box;
  margin: 0 0 24px; /* separate the block from following post content */
  font-family: inherit; /* family inherits from the host theme */
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* word-break/overflow-wrap are inherited — a host theme's break-all would
     otherwise shatter prices and domains mid-character (e.g. "€1,279"/".00"). */
  word-break: normal;
  overflow-wrap: break-word;
}

/* scoped defensive reset — Bootstrap/host CSS can't leak in or out */
.affegg-m *, .affegg-m *::before, .affegg-m *::after { box-sizing: border-box; }
.affegg-m img { max-width: 100%; height: auto; }
.affegg-m a { text-decoration: none; }
.affegg-m ol, .affegg-m ul { margin: 0; padding: 0; list-style: none; }
/* neutralize host-theme spacing/typography on headings & text blocks */
.affegg-m h1, .affegg-m h2, .affegg-m h3, .affegg-m h4, .affegg-m h5, .affegg-m h6,
.affegg-m p, .affegg-m figure, .affegg-m blockquote {
  margin: 0; padding: 0; font: inherit; color: inherit;
  text-transform: none; letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
  .affegg-m * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Step 2: shared atoms (ported once from style-tile.html)
   ============================================================ */

/* buttons */
.affegg-m .aegg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 12px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease, border-color .16s ease;
}
.affegg-m .aegg-btn::after { content: "\2192"; font-size: 15px; transition: transform .16s ease; }
.affegg-m .aegg-btn:hover { background: var(--accent-strong); box-shadow: var(--shadow-hover); }
.affegg-m .aegg-btn:hover::after { transform: translateX(3px); }
.affegg-m .aegg-btn:active { transform: translateY(1px); }
.affegg-m .aegg-btn:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent);
}
.affegg-m .aegg-btn.aegg-ghost,
.affegg-m .aegg-btn-ghost {
  background: var(--surface); color: var(--accent); border-color: var(--border);
}
.affegg-m .aegg-btn.aegg-ghost:hover,
.affegg-m .aegg-btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }

/* price treatment (signature) */
.affegg-m .aegg-price {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--mono); font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap; /* a price must never break across lines */
}
.affegg-m .aegg-price .aegg-cur { font-size: 15px; font-weight: 700; align-self: flex-start; margin-top: 2px; color: var(--ink-2); }
.affegg-m .aegg-price .aegg-amt { font-size: 20px; }
.affegg-m .aegg-price .aegg-cents { font-size: 16px; font-weight: 700; }
.affegg-m .aegg-price.aegg-muted { color: var(--ink-3); }
.affegg-m .aegg-price.aegg-muted .aegg-cur { color: var(--ink-3); }

.affegg-m .aegg-price-sub { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; min-height: 16px; }
.affegg-m .aegg-price-sub s { font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* discount save label + price-tag chip (signature discount motif) */
.affegg-m .aegg-save {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--deal);
  font-variant-numeric: tabular-nums;
}
.affegg-m .aegg-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: #fff; background: var(--deal);
  padding: 6px 11px 6px 14px; position: relative; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: 0 2px 6px rgba(225,29,72,.28);
}
.affegg-m .aegg-tag::before {
  content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 9px;
  background: var(--deal);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* stars / rating (fractional-fill markup, matches mockup .stars/.fill) */
.affegg-m .aegg-rating { display: inline-flex; align-items: center; gap: 8px; }
.affegg-m .aegg-rating b { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.affegg-m .stars {
  position: relative; display: inline-block; font-size: 15px; line-height: 1;
  letter-spacing: 1.5px; white-space: nowrap;
}
.affegg-m .stars::before { content: "★★★★★"; color: var(--surface-2); -webkit-text-stroke: 1px var(--border); }
.affegg-m .stars .fill { position: absolute; inset: 0; overflow: hidden; color: var(--star); }
.affegg-m .aegg-rating .aegg-val { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.affegg-m .aegg-rating .aegg-count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* legacy TemplateHelper::printRating() markup (egg-stars-container / egg-stars-{0..100})
   still used by these templates' .aegg-rating blocks — scope + style it here so ratings
   render correctly inside .affegg-m (the old products.css only targets .egg-container). */
.affegg-m .egg-stars-container {
  position: relative; display: inline-block; color: transparent;
  font-size: 15px; line-height: 1; letter-spacing: 1.5px; white-space: nowrap; overflow: hidden;
}
.affegg-m .egg-stars-container::before { position: absolute; top: 0; left: 0; content: "★★★★★"; color: var(--surface-2); -webkit-text-stroke: 1px var(--border); }
.affegg-m .egg-stars-container::after { position: absolute; top: 0; left: 0; content: "★★★★★"; color: var(--star); overflow: hidden; -webkit-text-stroke: 0; }
.affegg-m .egg-stars-small { font-size: 13px; }
.affegg-m .egg-stars-big { font-size: 18px; }
.affegg-m .egg-stars-0::after { width: 0%; } .affegg-m .egg-stars-10::after { width: 10%; }
.affegg-m .egg-stars-20::after { width: 20%; } .affegg-m .egg-stars-30::after { width: 30%; }
.affegg-m .egg-stars-40::after { width: 40%; } .affegg-m .egg-stars-50::after { width: 50%; }
.affegg-m .egg-stars-60::after { width: 60%; } .affegg-m .egg-stars-70::after { width: 70%; }
.affegg-m .egg-stars-80::after { width: 80%; } .affegg-m .egg-stars-90::after { width: 90%; }
.affegg-m .egg-stars-100::after { width: 100%; }

/* merchant / favicon */
.affegg-m .aegg-merch, .affegg-m .aegg-merchant {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.affegg-m .aegg-fav {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  object-fit: cover; display: inline-block;
}

/* stock chips */
.affegg-m .aegg-stock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.affegg-m .aegg-stock.aegg-on { color: var(--ok); }
.affegg-m .aegg-stock.aegg-off { color: var(--off); }
.affegg-m .aegg-stock::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

/* brand / title */
.affegg-m .aegg-brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
}
.affegg-m .aegg-title {
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.affegg-m .aegg-title a { color: inherit; }

/* favorite / fav badge fallback text style (merchant icon <img> above covers real markup) */
.affegg-m .aegg-updated { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.affegg-m .aegg-updated time { font: inherit; color: inherit; }
.affegg-m .aegg-disclaimer { color: var(--ink-3); }
.affegg-m .egg-cards + .aegg-updated,
.affegg-m .egg-toplist + .aegg-updated,
.affegg-m .egg-pick + .aegg-updated { margin-top: 16px; }

/* ============================================================
   Step 3: component layout rules, each under its wrapper class
   ============================================================ */

/* ---- egg-cards (product-grid.html) ---- */
.affegg-m .egg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.affegg-m .egg-cards .aegg-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-rest);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.affegg-m .egg-cards .aegg-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: #D9DEE6; }
.affegg-m .egg-cards .aegg-card:focus-within { box-shadow: var(--shadow-hover); }

.affegg-m .egg-cards .aegg-media {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.affegg-m .egg-cards .aegg-media img { width: 100%; height: 100%; object-fit: contain; }
.affegg-m .egg-cards .aegg-media .aegg-tag { position: absolute; top: 12px; left: 0; z-index: 2; }
.affegg-m .egg-cards .aegg-media .aegg-stock {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  background: var(--surface); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
}

.affegg-m .egg-cards .aegg-body { display: flex; flex-direction: column; gap: 9px; padding: 16px; flex: 1; }
.affegg-m .egg-cards .aegg-body .aegg-price { margin-top: 2px; }
.affegg-m .egg-cards .aegg-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.affegg-m .egg-cards .aegg-body .aegg-btn { width: 100%; }
.affegg-m .egg-cards .aegg-merch { justify-content: space-between; }

.affegg-m .egg-cards .aegg-card.aegg-out .aegg-media,
.affegg-m .egg-cards .aegg-card.aegg-out .aegg-title,
.affegg-m .egg-cards .aegg-card.aegg-out .aegg-brand,
.affegg-m .egg-cards .aegg-card.aegg-out .aegg-price { opacity: .55; }
.affegg-m .egg-cards .aegg-card.aegg-out:hover { transform: none; }

/* Phones: keep two cards per row so product images stay compact — a single
   full-width column makes each 4:3 image too big/dominant on mobile. */
@media (max-width: 600px) {
  .affegg-m .egg-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .affegg-m .egg-cards .aegg-body { padding: 12px; }
}

/* ---- box (single-product-box.html) ---- */
.affegg-m .aegg-box {
  margin: 20px 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-rest);
  overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%);
}
.affegg-m .aegg-box .aegg-media {
  position: relative; background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.affegg-m .aegg-box .aegg-media img { max-width: 100%; max-height: 260px; object-fit: contain; }
.affegg-m .aegg-box .aegg-media .aegg-tag { position: absolute; top: 16px; left: 0; z-index: 2; }

.affegg-m .aegg-box .aegg-body { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.affegg-m .aegg-box .aegg-title { font-size: clamp(20px, 3vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }

.affegg-m .aegg-box .aegg-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.affegg-m .aegg-box .aegg-feat { background: var(--surface); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.affegg-m .aegg-box .aegg-feat .aegg-k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.affegg-m .aegg-box .aegg-feat .aegg-v { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.affegg-m .aegg-box .aegg-desc { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* description holds sanitized HTML (ul/ol/li/p) — restore readable spacing the
   scoped reset removed, but only inside the description containers */
.affegg-m .aegg-desc p, .affegg-m .aegg-blurb p { margin: 0 0 8px; }
.affegg-m .aegg-desc p:last-child, .affegg-m .aegg-blurb p:last-child { margin-bottom: 0; }
.affegg-m .aegg-desc ul, .affegg-m .aegg-blurb ul { list-style: disc; margin: 6px 0; padding-left: 20px; }
.affegg-m .aegg-desc ol, .affegg-m .aegg-blurb ol { list-style: decimal; margin: 6px 0; padding-left: 20px; }
.affegg-m .aegg-desc li, .affegg-m .aegg-blurb li { margin: 2px 0; }
.affegg-m .aegg-desc h2, .affegg-m .aegg-desc h3, .affegg-m .aegg-desc h4,
.affegg-m .aegg-blurb h2, .affegg-m .aegg-blurb h3, .affegg-m .aegg-blurb h4 { font-size: 1em; font-weight: 700; margin: 10px 0 4px; color: var(--ink); }

.affegg-m .aegg-box .aegg-buy { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.affegg-m .aegg-box .aegg-buy .aegg-price { font-size: 34px; }
.affegg-m .aegg-box .aegg-buy .aegg-price .aegg-amt { font-size: 34px; }
.affegg-m .aegg-box .aegg-buy .aegg-btn { padding: 14px 22px; font-size: 15px; font-weight: 700; }
.affegg-m .aegg-box .aegg-buy .aegg-merch { margin-top: 2px; }

@media (max-width: 620px) {
  .affegg-m .aegg-box { grid-template-columns: 1fr; }
  .affegg-m .aegg-box .aegg-media { border-right: 0; border-bottom: 1px solid var(--border); min-height: 220px; }
}
@media (max-width: 460px) {
  .affegg-m .aegg-box .aegg-features { grid-template-columns: 1fr; }
}

/* ---- egg-toplist (ranked-list.html) ---- */
.affegg-m .egg-toplist { display: flex; flex-direction: column; gap: 16px; }

.affegg-m .egg-toplist .aegg-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px 110px 1fr 210px;
  gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-rest);
  overflow: hidden; /* clip the #1 accent bar to the rounded corners */
  padding: 18px 20px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.affegg-m .egg-toplist .aegg-row:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: #D9DEE6; }

.affegg-m .egg-toplist .aegg-rank {
  font-family: var(--mono); font-weight: 800; font-size: 40px; line-height: 1;
  color: var(--ink-3); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  text-align: center; opacity: .5;
}

.affegg-m .egg-toplist .aegg-thumb {
  aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden; position: relative; display: block;
}
.affegg-m .egg-toplist .aegg-thumb img { width: 100%; height: 100%; object-fit: contain; }

.affegg-m .egg-toplist .aegg-mid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.affegg-m .egg-toplist .aegg-blurb { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.affegg-m .egg-toplist .aegg-rail { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.affegg-m .egg-toplist .aegg-rail .aegg-btn { width: 100%; }

.affegg-m .egg-toplist .aegg-row.aegg-first {
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--surface) 42%);
}
.affegg-m .egg-toplist .aegg-row.aegg-first::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent); border-radius: var(--r) 0 0 var(--r);
}
.affegg-m .egg-toplist .aegg-row.aegg-first .aegg-rank { color: var(--accent); opacity: 1; }

@media (max-width: 660px) {
  .affegg-m .egg-toplist .aegg-row {
    grid-template-columns: 52px 1fr;
    grid-template-areas: "rank thumb" "mid mid" "rail rail";
    gap: 14px 16px; row-gap: 16px;
  }
  .affegg-m .egg-toplist .aegg-rank { grid-area: rank; font-size: 32px; align-self: start; }
  .affegg-m .egg-toplist .aegg-thumb { grid-area: thumb; width: 90px; }
  .affegg-m .egg-toplist .aegg-mid { grid-area: mid; }
  /* Rail as a wrapping row: price + button share the top line (price left,
     button pushed right), merchant drops to its own line. Avoids cramming
     three items into one narrow row, which shattered the price/button text. */
  .affegg-m .egg-toplist .aegg-rail {
    grid-area: rail; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 14px; text-align: left; width: 100%;
  }
  .affegg-m .egg-toplist .aegg-rail .aegg-price { margin-right: auto; }
  .affegg-m .egg-toplist .aegg-rail .aegg-btn { width: auto; } /* natural width, not full-track */
  .affegg-m .egg-toplist .aegg-rail .aegg-merch { flex-basis: 100%; } /* own line below */
}

/* ---- egg-pcompare (price-comparison.html) ---- */
.affegg-m .egg-pcompare {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-rest); overflow: hidden;
}

.affegg-m .egg-pcompare .aegg-hero {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.affegg-m .egg-pcompare .aegg-hero .aegg-media {
  width: 80px; height: 80px; flex: none; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden; object-fit: contain;
}
.affegg-m .egg-pcompare .aegg-hero .aegg-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.affegg-m .egg-pcompare .aegg-hero .aegg-title { font-size: 17px; font-weight: 700; line-height: 1.25; }

.affegg-m .egg-pcompare .aegg-offers { display: flex; flex-direction: column; }
.affegg-m .egg-pcompare .aegg-offers .aegg-row {
  display: grid;
  grid-template-columns: 1fr auto 120px 210px;
  grid-template-areas: "merchant stock price cta";
  align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  transition: background .16s ease;
}
.affegg-m .egg-pcompare .aegg-offers .aegg-row:last-child { border-bottom: 0; }

/* Pin each cell to its own track by name so an absent cell (a row with no
   price, or a whole hidden column) leaves an aligned gap instead of shoving
   the CTA into the wrong column. */
.affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-merch { grid-area: merchant; }
.affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-stock { grid-area: stock; }
.affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-price { grid-area: price; }
.affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-btn   { grid-area: cta; }

.affegg-m .egg-pcompare .aegg-offers .aegg-row.aegg-best { background: var(--accent-soft); }
.affegg-m .egg-pcompare .aegg-offers .aegg-row.aegg-best .aegg-price { font-weight: 800; color: var(--ink); }
.affegg-m .egg-pcompare .aegg-offers .aegg-row.aegg-best .aegg-price .aegg-amt { font-size: 22px; }

.affegg-m .egg-pcompare .aegg-updated { padding: 12px 20px; background: var(--surface-2); }

@media (min-width: 561px) {
  .affegg-m .egg-pcompare.aegg-no-merchant .aegg-offers .aegg-row {
    grid-template-columns: 1fr 120px 210px;
    grid-template-areas: "stock price cta";
  }
  .affegg-m .egg-pcompare.aegg-no-price .aegg-offers .aegg-row {
    grid-template-columns: 1fr auto 210px;
    grid-template-areas: "merchant stock cta";
  }
  .affegg-m .egg-pcompare.aegg-no-merchant.aegg-no-price .aegg-offers .aegg-row {
    grid-template-columns: 1fr 210px;
    grid-template-areas: "stock cta";
  }
}

@media (max-width: 560px) {
  .affegg-m .egg-pcompare .aegg-offers .aegg-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "merchant stock" "price cta";
    gap: 10px 14px;
  }
  .affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-stock { justify-self: end; }
  .affegg-m .egg-pcompare .aegg-offers .aegg-row .aegg-btn   { justify-self: end; }
  /* No merchant row → the stock chip is the only top cell; keep it left. */
  .affegg-m .egg-pcompare.aegg-no-merchant .aegg-offers .aegg-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "stock stock" "price cta";
  }
  .affegg-m .egg-pcompare.aegg-no-merchant .aegg-offers .aegg-row .aegg-stock { justify-self: start; }
}
@media (max-width: 400px) {
  .affegg-m .egg-pcompare .aegg-hero { flex-wrap: wrap; }
}

/* ---- egg-pick (inline editorial recommendation) ---- */
.affegg-m .egg-pick { display: flex; flex-direction: column; gap: 16px; }
.affegg-m .egg-pick .aegg-pick {
  position: relative; display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px; align-items: center;
  border: 1px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-rest);
  overflow: hidden; /* clip the accent bar + footer to the rounded corners */
  padding: 16px 20px 16px 22px;
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--surface) 42%);
  transition: box-shadow .18s ease, transform .18s ease;
}
.affegg-m .egg-pick .aegg-pick::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent); border-radius: var(--r) 0 0 var(--r);
}
.affegg-m .egg-pick .aegg-pick:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.affegg-m .egg-pick .aegg-thumb {
  aspect-ratio: 1 / 1; width: 84px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden; display: block;
}
.affegg-m .egg-pick .aegg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.affegg-m .egg-pick .aegg-mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.affegg-m .egg-pick .aegg-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.affegg-m .egg-pick .aegg-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; }
.affegg-m .egg-pick .aegg-price .aegg-amt { font-size: 22px; }
.affegg-m .egg-pick .aegg-save { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--deal); }
.affegg-m .egg-pick .aegg-cta .aegg-btn { white-space: nowrap; }
.affegg-m .egg-pick .aegg-pick.aegg-out .aegg-thumb,
.affegg-m .egg-pick .aegg-pick.aegg-out .aegg-title,
.affegg-m .egg-pick .aegg-pick.aegg-out .aegg-price { opacity: .55; }
.affegg-m .egg-pick .aegg-pick.aegg-out:hover { transform: none; }

@media (max-width: 560px) {
  .affegg-m .egg-pick .aegg-pick {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "thumb mid" "cta cta";
    gap: 12px 14px;
  }
  .affegg-m .egg-pick .aegg-thumb { grid-area: thumb; width: 72px; }
  .affegg-m .egg-pick .aegg-mid { grid-area: mid; }
  .affegg-m .egg-pick .aegg-cta { grid-area: cta; }
  .affegg-m .egg-pick .aegg-cta .aegg-btn { width: 100%; }
}