/* Energy Worker content only. Every selector starts with .ec- so nothing leaks into the shop.
   Uses the shop's Automatic.css variables with fallbacks; sizes in px because ACSS sets html to 62.5%. */

.ec-wrap {
  width: min(100% - 2 * var(--gutter, 20px), var(--content-width, 1366px));
  margin-inline: auto;
  padding-block: var(--section-space-m, 48px);
  color: var(--base, #404040);
  font-family: var(--text-font-family, Urbanist, sans-serif);
}
.ec-wrap :is(h1, h2, h3, h4) {
  font-family: var(--heading-font-family, Raleway, sans-serif);
  margin-block: var(--space-m, 24px) var(--space-xs, 12px);
}
.ec-wrap :is(h1, h2, h3, h4):first-child { margin-block-start: 0; }
.ec-wrap p { margin-block: 0 var(--space-s, 16px); }

.ec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--grid-gap, 24px);
  margin-block: var(--space-m, 24px);
}
.ec-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--base-ultra-light, #f2f2f2);
  border-radius: var(--radius, 5px);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s;
}
.ec-card:hover, .ec-card:focus-visible { border-color: var(--primary, #bc05ff); }
.ec-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius, 5px); }
.ec-card__name { font-weight: 600; }
.ec-card__price { color: var(--primary-dark, #5e0080); }
.ec-card__stock {
  align-self: flex-start;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--base-ultra-light, #f2f2f2);
}

.ec-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.ec-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary-light, #ebb3ff);
  color: var(--primary-dark, #5e0080);
  text-decoration: none;
  font-size: 14px;
}
.ec-chip:hover, .ec-chip:focus-visible { background: var(--primary-light, #ebb3ff); }

/* Two-column definition block: <dl class="ec-defs"><dt>..</dt><dd>..</dd></dl> */
.ec-defs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin-block: var(--space-m, 24px); }
.ec-defs dt { font-weight: 600; }
.ec-defs dd { margin: 0; }
@media (max-width: 600px) {
  .ec-defs { grid-template-columns: 1fr; }
  .ec-defs dd { margin-block-end: 8px; }
}

/* Content pages */
.ec-crumbs { font-size: 14px; margin-block-end: var(--space-s, 16px); }
.ec-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.ec-crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.5; }
.ec-crumbs a { color: inherit; }
.ec-section { margin-block: var(--space-l, 40px); }
.ec-intro { font-size: 18px; }
.ec-list { padding-inline-start: 20px; margin-block: 0 var(--space-s, 16px); }
.ec-list li { margin-block-end: 4px; }
.ec-list--cols { columns: 220px; list-style: none; padding: 0; }
.ec-list--cols li { break-inside: avoid; }
.ec-guides { list-style: none; padding: 0; }
.ec-guides h2 { font-size: 22px; margin-block-end: 4px; }
.ec-muted { opacity: 0.65; font-size: 14px; }
.ec-defs .ec-chips { margin: 0; }

/* The shop header is position:fixed (about 76px tall) and its --header-height is 0, so a full page
   clears it here. Only the first block in <main>: the product-page panel sits last and is untouched. */
#brx-content > .ec-wrap:first-child { padding-block-start: calc(var(--section-space-m, 48px) + 76px); }
.ec-shoplink { font-weight: 600; }

/* The product-page panel as an embed ([data-ec-panel], panel.js): it fills the Bricks element it sits in. */
/* display:block: the theme makes every <section> a centred flex column. */
.ec-panel.ec-embed { display: block; width: 100%; margin-inline: 0; padding-block: var(--space-m, 24px); text-align: left; }
.ec-panel.ec-embed :is(h2, h3) { text-align: left; margin: 0 0 12px; padding: 0; }
.ec-panel.ec-embed h2 { font-size: 24px; }
.ec-panel.ec-embed h3 { font-size: 18px; }
.ec-panel.ec-embed .ec-defs { margin-block: 0 24px; align-items: center; }
.ec-panel.ec-embed .ec-guide-links li { margin: 0; }
.ec-chip--plain { border-color: var(--base-ultra-light, #f2f2f2); color: inherit; }
.ec-guide-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ec-guide-links a { color: var(--primary-dark, #5e0080); font-weight: 600; }

/* The embed as a soft gold card in the shop's style (--secondary #CCA24A), refined 2026-11-11:
   hierarchy through weight and colour, tinted pills (links purple, unlinked plain), the primary intention filled gold.
   The margins centre the card between the product details and "You may also like" in the Bricks product template. */
[data-ec-panel] .ec-panel.ec-embed { background: #faf4e6; border: 1px solid rgba(204, 162, 74, 0.28); border-radius: 24px; padding: 36px 40px; box-shadow: 0 18px 40px -28px rgba(140, 104, 30, 0.45); margin-top: 80px; margin-bottom: -60px; }
[data-ec-panel] .ec-panel.ec-embed h2 { display: block; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 24px; }
[data-ec-panel] .ec-panel.ec-embed .ec-defs { grid-template-columns: 150px 1fr; gap: 14px 28px; margin: 0; align-items: center; }
[data-ec-panel] .ec-panel.ec-embed .ec-defs dt { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #8a6a24; line-height: 1.3; }
[data-ec-panel] .ec-panel.ec-embed .ec-defs dd { font-size: 17px; font-weight: 500; color: #3a2f1a; line-height: 1.3; }
[data-ec-panel] .ec-panel.ec-embed .ec-chips { gap: 6px; }
[data-ec-panel] .ec-panel.ec-embed .ec-chip { background: rgba(204, 162, 74, 0.16); border: 0; color: var(--primary-dark, #5e0080); font-size: 13.5px; font-weight: 500; line-height: 1.2; padding: 7px 14px; transition: background-color 0.15s ease, color 0.15s ease; }
[data-ec-panel] .ec-panel.ec-embed a.ec-chip:hover, [data-ec-panel] .ec-panel.ec-embed a.ec-chip:focus-visible { background: var(--primary-dark, #5e0080); color: #fff; }
[data-ec-panel] .ec-panel.ec-embed .ec-dd--primary .ec-chip { background: var(--secondary, #cca24a); color: #2b210b; font-weight: 600; }
[data-ec-panel] .ec-panel.ec-embed .ec-dd--primary a.ec-chip:hover, [data-ec-panel] .ec-panel.ec-embed .ec-dd--primary a.ec-chip:focus-visible { background: var(--primary-dark, #5e0080); color: #fff; }
[data-ec-panel] .ec-panel.ec-embed .ec-chip--plain { background: rgba(255, 255, 255, 0.65); color: #6b5a3a; }
[data-ec-panel] .ec-panel.ec-embed h3 { border-top: 1px solid rgba(204, 162, 74, 0.3); margin: 28px 0 12px; padding-top: 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #8a6a24; }
[data-ec-panel] .ec-panel.ec-embed .ec-guide-links a { font-size: 17px; font-weight: 600; color: var(--primary-dark, #5e0080); text-decoration: none; }
[data-ec-panel] .ec-panel.ec-embed .ec-guide-links a::after { content: " \2192"; }
[data-ec-panel] .ec-panel.ec-embed .ec-guide-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  [data-ec-panel] .ec-panel.ec-embed { padding: 26px 22px; border-radius: 18px; margin-top: 40px; margin-bottom: -24px; }
  [data-ec-panel] .ec-panel.ec-embed .ec-defs { grid-template-columns: 1fr; gap: 6px; }
  [data-ec-panel] .ec-panel.ec-embed .ec-defs dd { margin-bottom: 10px; }
}

/* Energy guides: the shop's gold hero (.hero-curve, global CSS) on top, then a reading column. */
.ec-hero .curved__text { max-width: 760px; margin-inline: auto; }
.ec-hero h1 { margin: 0; }
.ec-hero__eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.ec-hero__lead { margin: 18px auto 0; max-width: 620px; font-size: 20px; line-height: 1.55; opacity: 0.92; }

.ec-page {
  width: min(100% - 2 * var(--gutter, 20px), 1180px);
  margin-inline: auto;
  padding-block: 56px 88px;
  color: var(--base, #404040);
  font-family: var(--text-font-family, Urbanist, sans-serif);
}
/* the theme makes every <section> a centred flex column */
.ec-page .ec-section { display: block; text-align: left; padding: 0; min-height: 0; }
.ec-page :is(h2, h3) { font-family: var(--heading-font-family, Raleway, sans-serif); color: #1a1a1a; }
.ec-page .ec-crumbs { margin-block-end: 36px; }
.ec-article { max-width: 940px; margin-inline: auto; } /* 720px until 2026-11-12, widened ~30% (Tom) */

.ec-lead p { margin: 0 0 20px; font-size: 22px; line-height: 1.6; font-weight: 500; color: #2a2a2a; }

.ec-takeaways {
  margin-block: 40px 48px;
  padding: 28px 32px;
  background: #faf4e6;
  border: 1px solid rgba(204, 162, 74, 0.28);
  border-radius: 22px;
}
.ec-takeaways h2 { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8c681e; }
.ec-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ec-takeaways li { position: relative; padding-inline-start: 26px; font-size: 18px; line-height: 1.5; }
.ec-takeaways li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; background: var(--secondary, #cca24a); transform: rotate(45deg); }

.ec-body { font-size: 19px; line-height: 1.75; color: #333; }
.ec-body :is(p, li) { line-height: 1.75; }
.ec-body p { margin: 0 0 22px; }
.ec-body h2 { margin: 52px 0 16px; font-size: 30px; line-height: 1.25; }
.ec-body h3 { margin: 36px 0 12px; font-size: 23px; line-height: 1.3; }
.ec-body :is(ul, ol) { margin: 0 0 22px; padding-inline-start: 24px; }
.ec-body li { margin-block-end: 8px; }
.ec-body li::marker { color: var(--secondary, #cca24a); }
.ec-body a { color: var(--primary-dark, #5e0080); text-decoration: underline; text-underline-offset: 3px; }
.ec-body blockquote { margin: 32px 0; padding: 4px 0 4px 22px; border-inline-start: 3px solid var(--secondary, #cca24a); font-style: italic; color: #2a2a2a; }
.ec-body strong { color: #1a1a1a; }
/* Rich text guides (docs/guide-rich-editor-plan.md): h4, numbered and nested lists, quotes, images with captions */
.ec-page .ec-body h4 { margin: 28px 0 10px; font-family: var(--heading-font-family, Raleway, sans-serif); font-size: 20px; line-height: 1.35; font-weight: 700; color: #1a1a1a; }
.ec-body ol li::marker { font-weight: 600; }
.ec-body li > :is(ul, ol) { margin: 8px 0 0; }
.ec-body li > ul { list-style-type: circle; }
.ec-body em { font-style: italic; }
.ec-body blockquote p:last-child, .ec-body blockquote :is(ul, ol):last-child { margin-bottom: 0; }
.ec-body .ec-figure { margin: 36px 0; padding: 0; }
.ec-body .ec-figure img { display: block; width: 100%; height: auto; border-radius: 18px; background: #faf4e6; }
.ec-body .ec-figure figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #6b6b6b; text-align: center; }
.ec-body .ec-figure figcaption a { color: inherit; }

.ec-article .ec-section { margin-block: 44px 0; padding-block-start: 32px; border-block-start: 1px solid rgba(204, 162, 74, 0.28); }
.ec-article .ec-section h2 { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8c681e; }
.ec-page > .ec-section { margin-block-start: 80px; }
.ec-page > .ec-section > h2 { margin: 0 0 8px; font-size: 32px; text-align: center; }

.ec-guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ec-guide-card a {
  display: flex; flex-direction: column; height: 100%;
  padding: 32px; border-radius: 24px;
  background: #faf4e6; border: 1px solid rgba(204, 162, 74, 0.28);
  color: inherit; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ec-guide-card a:hover, .ec-guide-card a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(140, 104, 30, 0.55); }
.ec-guide-card h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
.ec-guide-card p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; }
.ec-takeaways li, .ec-hero__lead { line-height: 1.55; }
.ec-guide-card__more { margin-block-start: auto; font-weight: 600; color: var(--primary-dark, #5e0080); }
.ec-guide-card__more::after { content: " \2192"; }

@media (max-width: 767px) {
  .ec-hero__lead { font-size: 18px; }
  .ec-page { padding-block: 36px 64px; }
  .ec-lead p { font-size: 20px; }
  .ec-body { font-size: 18px; }
  .ec-body h2 { font-size: 26px; margin-block-start: 40px; }
  .ec-page .ec-body h4 { font-size: 19px; }
  .ec-body .ec-figure { margin: 28px 0; }
  .ec-body .ec-figure img { border-radius: 14px; }
  .ec-takeaways { padding: 22px 22px; }
  .ec-guide-card a { padding: 24px; }
}