/* Content themes follow the storefront's 326energy-theme cookie via html.light / html.dark.
   Load after checkout/category/policy and experience styles. Header/footer own their palette. */
:root {
  --energy-page-bg: #f7f9f5;
  --energy-surface: #ffffff;
  --energy-surface-soft: #edf3e8;
  --energy-field: #ffffff;
  --energy-ink: #173f32;
  --energy-muted: #54665a;
  --energy-border: #ccd9c8;
  --energy-positive: #386145;
  --energy-positive-bg: #e6f1df;
  --energy-focus: #39744c;
  --energy-error-bg: #fff0eb;
  --energy-error-ink: #923e2e;
  --energy-error-border: #d9a18f;
  --energy-orange: #f5a05b;
}
html.dark {
  --energy-page-bg: #111a16;
  --energy-surface: #1a2620;
  --energy-surface-soft: #23372b;
  --energy-field: #17231d;
  --energy-ink: #edf3ec;
  --energy-muted: #b7c7ba;
  --energy-border: #425749;
  --energy-positive: #b0d6a1;
  --energy-positive-bg: #233b29;
  --energy-focus: #b0d6a1;
  --energy-error-bg: #392622;
  --energy-error-ink: #ffc2b4;
  --energy-error-border: #9b6252;
}
:is(.checkout-page, .energy-policy-body, .energy-category-page, [data-energy-static-shell]) {
  --ink: var(--energy-ink);
  --page: var(--energy-page-bg);
  --muted: var(--energy-muted);
  --surface: var(--energy-surface);
  --line: var(--energy-border);
  --border: var(--energy-border);
  background: var(--energy-page-bg);
  color: var(--energy-ink);
}
html.dark :is(.checkout-page, .energy-policy-body, .energy-category-page, [data-energy-static-shell]) { color-scheme: dark; }
html:not(.dark) :is(.checkout-page, .energy-policy-body, .energy-category-page, [data-energy-static-shell]) { color-scheme: light; }
:is(.checkout-content, .energy-policy, .energy-category) :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--energy-focus);
}

/* Catalog filters, descriptions and prices use the same text/surface pair in both themes. */
.energy-category :is(h1, h2, strong),
.energy-category__results p,
.energy-category__bag { color: var(--energy-ink); }
.energy-category__breadcrumb,
.energy-category__intro p:not(.energy-category__eyebrow),
.energy-category__promise small,
.energy-category__results,
.energy-product-card__facts,
.energy-product-card__compatibility,
.energy-product-card__price s,
.energy-category__footnote { color: var(--energy-muted); }
.energy-category__eyebrow,
.energy-product-card__brand,
.energy-product-card__saving,
.energy-category__reset { color: var(--energy-positive); }
.energy-category__promise {
  background: var(--energy-surface-soft);
  border-color: var(--energy-border);
  color: var(--energy-ink);
}
.energy-category__filters,
.energy-product-card,
.energy-category__empty {
  background: var(--energy-surface);
  border-color: var(--energy-border);
  color: var(--energy-ink);
}
.energy-category__filters :is(input, select) {
  background: var(--energy-field);
  color: var(--energy-ink);
  border-color: var(--energy-border);
}
.energy-category__filters input::placeholder { color: var(--energy-muted); opacity: 1; }
.energy-category__results input { accent-color: var(--energy-positive); }
.energy-product-card:hover { border-color: var(--energy-positive); }
/* Product photographs remain on a deliberate pale studio background, including in dark mode. */
.energy-product-card__image { background: #f0f4ed; color-scheme: light; }
.energy-product-card__offer { background: #173f32; color: #ffffff; }
.energy-product-card__actions button,
.energy-category__empty button { background: var(--energy-orange); color: #173f32; }
.energy-product-card__actions button:hover,
.energy-category__empty button:hover { background: #f9b477; }
.energy-product-card__actions button:disabled {
  background: var(--energy-surface-soft);
  color: var(--energy-muted);
  opacity: 1;
}
.energy-catalog-message { background: #173f32; color: #ffffff; border: 1px solid #739d7d; }
.energy-catalog-message[data-error=true] { background: var(--energy-error-bg); color: var(--energy-error-ink); border-color: var(--energy-error-border); }

/* Checkout: keep labels, values, review details and validation messages legible. */
.checkout-content .field-row > label,
.checkout-content .field-row :is(input, select) { min-width: 0; }
.checkout-content .field-row { align-items: end; }
.checkout-content :is(h1, h2, h3, label) { color: var(--energy-ink); }
.checkout-content :is(.intro, .checkout-breadcrumb, .optional, .notice, .summary-note, .summary-assurances, .check-label, .back-link, .checkout-help, .eyebrow),
.checkout-content .section-heading p,
.checkout-content .shipping-method small,
.checkout-content .empty-state > p:not(.eyebrow),
.checkout-content .payment-status p,
.checkout-content .quantity-controls .remove { color: var(--energy-muted); }
.checkout-content :is(.form-section, .order-summary, .empty-state, .review-card, .confirmation-card, .loading-state) {
  background: var(--energy-surface);
  border-color: var(--energy-border);
  color: var(--energy-ink);
}
.checkout-content :is(input, select, textarea) {
  background-color: var(--energy-field);
  border-color: var(--energy-border);
  color: var(--energy-ink);
  caret-color: var(--energy-ink);
}
.checkout-content :is(input, textarea)::placeholder { color: var(--energy-muted); opacity: 1; }
.checkout-content :is(input, select, textarea):focus {
  border-color: var(--energy-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--energy-focus) 18%, transparent);
}
.checkout-content :is(input, select):user-invalid { border-color: var(--energy-error-border); }
.checkout-content input[type=checkbox] { accent-color: var(--energy-positive); }
.checkout-content :is(.shipping-method, .payment-status, .energy-discount-note) {
  background: var(--energy-positive-bg);
  border-color: var(--energy-border);
  color: var(--energy-ink);
}
.checkout-content .energy-discount-note p { color: var(--energy-muted); }
.checkout-content :is(.section-icon, .free-pill, .summary-heading > span) {
  background: var(--energy-surface-soft);
  border-color: var(--energy-border);
  color: var(--energy-positive);
}
.checkout-content :is(.discount-tag, .shipping-method svg, .payment-status svg, .text-link, .text-button),
.checkout-content .review-card h3 { color: var(--energy-positive); }
.checkout-content .cart-item { border-color: var(--energy-border); }
.checkout-content .cart-item img { background: #f7f9f3; border-color: #dce6d7; color-scheme: light; }
.checkout-content .cart-price del { color: var(--energy-muted); }
.checkout-content .quantity-controls button,
.checkout-content .secondary-button {
  background: var(--energy-field);
  border-color: var(--energy-border);
  color: var(--energy-ink);
}
.checkout-content .quantity-controls .remove { background: transparent; }
.checkout-content .total-row { color: var(--energy-muted); }
.checkout-content .total-row > span:last-child,
.checkout-content .total-row.grand,
.checkout-content .review-card p,
.checkout-content .checkout-help strong { color: var(--energy-ink); }
.checkout-content .total-row.discount > span { color: var(--energy-positive); }
.checkout-content :is(.steps, .summary-assurances, .total-row.grand, .checkout-help, .summary-toggle) { border-color: var(--energy-border); }
.checkout-content .steps { color: var(--energy-muted); }
.checkout-content .step-number { border-color: var(--energy-border); }
.checkout-content .steps .active { color: var(--energy-ink); }
.checkout-content .steps .active .step-number { background: var(--energy-ink); border-color: var(--energy-ink); color: var(--energy-page-bg); }
.checkout-content .steps .complete { color: var(--energy-positive); }
.checkout-content .steps .complete .step-number { background: var(--energy-positive-bg); border-color: var(--energy-border); color: var(--energy-positive); }
.checkout-content .primary-button { background: var(--energy-orange); color: #173f32; border-color: #de8a43; }
.checkout-content .primary-button:hover:not(:disabled) { background: #f9b477; }
.checkout-content .primary-button:disabled { opacity: .68; }
.checkout-content .error { background: var(--energy-error-bg); border-color: var(--energy-error-border); color: var(--energy-error-ink); }
.checkout-content .error .text-button { color: inherit; }
.checkout-content .success-icon { background: var(--energy-positive-bg); color: var(--energy-positive); border-color: var(--energy-border); }
.checkout-content .badge { background: #f5e5be; color: #634916; }
html.dark .checkout-content .badge { background: #40351f; color: #f3d58b; }
html.dark .checkout-content :is(.form-section, .order-summary) { box-shadow: 0 6px 24px #00000016; }

/* Policies inherit the current theme rather than retaining hard-coded green text. */
.energy-policy,
.energy-policy :is(h1, h2, h3) { color: var(--energy-ink); }
.energy-policy :is(p, li, .policy-lead, .policy-date, .policy-breadcrumb) { color: var(--energy-muted); }
.energy-policy a { color: var(--energy-positive); }
.energy-policy :is(.policy-navigation, .offer-card) { background: var(--energy-surface-soft); border-color: var(--energy-border); }
.energy-policy .policy-navigation a { color: var(--energy-ink); }
.energy-policy .policy-navigation a:hover { background: var(--energy-positive-bg); }
.energy-policy .policy-navigation a[aria-current=page] { background: #214f36; color: #ffffff; }
html.dark .energy-policy .policy-navigation a[aria-current=page] { background: #b0d6a1; color: #173f32; }
.energy-policy .offer-card strong { color: var(--energy-ink); }
.energy-policy .secondary-button { background: var(--energy-surface); border-color: var(--energy-border); color: var(--energy-positive); }
.energy-policy :is(.policy-date, .policy-help) { border-color: var(--energy-border); }
.energy-policy-body .policy-skip { background: var(--energy-ink); color: var(--energy-page-bg); }

/* The static longevity story has six shared rows: image, eyebrow, title, copy, metric, note.
   Subgrid aligns real text heights, including at browser zoom, without fixed empty reservations. */
[data-durability-static] { align-items: stretch; }
[data-durability-static] > div { min-width: 0; }
[data-durability-static] .durability-chapter { display: flex; flex: 1; flex-direction: column; min-width: 0; }
[data-durability-static] .durability-chapter > div:first-child { flex: 1; }
[data-durability-static] .durability-chapter-title { color: var(--energy-ink); line-height: 1.18; }
[data-durability-static] .text-story-muted { color: var(--energy-muted); }
[data-durability-static] .durability-proof { display: flex; align-items: center; min-height: 68px; color: var(--energy-ink); }
[data-durability-static] .durability-proof :is(dl, ul) { width: 100%; }
[data-durability-static] .durability-proof dd { line-height: 1; }
[data-durability-static] .durability-chapter > p:last-child { margin-bottom: 0; }
.durability-story #durability-takeaway {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(22px, 3vw, 38px);
  background: var(--energy-surface-soft);
  color: var(--energy-ink);
  border: 1px solid var(--energy-border);
  border-radius: 24px;
}
#durability-takeaway .text-story-muted { color: var(--energy-muted); }
#durability-takeaway h3 { color: var(--energy-ink); }
#durability-takeaway > div:first-child { gap: 28px; }
#durability-takeaway > div:first-child > a {
  align-self: center;
  min-height: 48px;
  background: var(--energy-orange);
  background-image: none;
  border: 1px solid #de8a43;
  color: #173f32;
  box-shadow: none;
  text-shadow: none;
}
#durability-takeaway > div:first-child > a:hover { background: #f9b477; }
#durability-takeaway > footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--energy-border); color: var(--energy-muted); font-size: 12px; line-height: 1.75; }
@media (min-width: 1024px) {
  [data-durability-static] .durability-chapter > p:last-child { min-height: 4.5em; }
  #durability-takeaway > div:first-child { align-items: center; }
  #durability-takeaway > div:first-child > div { max-width: 760px; }
  @supports (grid-template-rows: subgrid) {
    [data-durability-static] { grid-auto-rows: auto; row-gap: 22px; }
    [data-durability-static] > div { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 22px; }
    [data-durability-static] .durability-chapter { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 22px; }
    [data-durability-static] .durability-chapter > div:first-child { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 22px; }
    [data-durability-static] .durability-chapter :is(h3, p, .durability-proof) { margin-top: 0; margin-bottom: 0; }
    [data-durability-static] .durability-chapter > p:last-child { min-height: 0; }
  }
}
@media (max-width: 1023px) {
  [data-durability-static] { gap: 36px; }
  [data-durability-static] .durability-proof { margin-top: 22px; min-height: 60px; }
  [data-durability-static] .durability-chapter > p:last-child { margin-top: 18px; }
  #durability-takeaway > div:first-child > a { align-self: flex-start; white-space: normal; }
}
@media (max-width: 480px) {
  .durability-story #durability-takeaway { padding: 22px 18px; border-radius: 18px; }
  #durability-takeaway > div:first-child > a { width: 100%; }
}
@media print {
  .checkout-page { --energy-page-bg: #fff; --energy-surface: #fff; --energy-ink: #173f32; --energy-muted: #425749; --energy-border: #bbc9ba; }
}

/* The mobile navigation follows the same palette as the page. */
html.dark #mobile-drawer {
  --navigation-ink:#e6eee2;--navigation-muted:#bbcdbb;--panel-muted:#bbcdbb;--panel-border:#455a49;--panel-divider:#455a49;--panel-hover:#2a4032;--panel-active:#304a38;
  background:#17241d!important;color:#e6eee2!important;border-color:#455a49!important;
}
html.dark #mobile-drawer>div:first-child {background:#21372a!important;border-color:#455a49!important}
html.dark #mobile-drawer>div:first-child img {background:#f8fbf5;border-radius:8px;padding:5px}
html.dark #mobile-drawer>div:first-child p {color:#bbcdbb!important}
html.dark #mobile-drawer a {color:#e6eee2!important}
html.dark #mobile-drawer a:hover {background:#2a4032!important}
html.dark #mobile-drawer button[aria-controls=mobile-drawer-all-store] {color:#bbcdbb!important;border-color:#455a49!important}
html.dark #mobile-drawer button:is([aria-label='Close menu'],[data-energy-original-aria-label='Close menu']) {background:#304a38!important;color:#f0f5eb!important;border-color:#627e64!important}
html.dark #mobile-drawer :is(ul:is([aria-label='Shop categories'],[data-energy-original-aria-label='Shop categories']),div:nth-child(2)>ul:first-child) {border-color:#455a49!important}
.energy-static-header__battery {background:#36bf73!important;color:#07391d!important;border-color:#2f9f61!important}
.site-header-chrome [role="img"]:is([aria-label^="Battery"],[data-energy-original-aria-label^="Battery"]) span.relative.z-10 {color:#07391d!important;text-shadow:none!important}
.checkout-content :is(.primary-button,.back-link)>span[aria-hidden="true"]{display:inline-block;width:16px;height:16px;font-size:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.energy-footer-visible #energy-support-link {opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.dark #mobile-drawer>div:first-child a {display:inline-flex;align-items:center;background:#f8fbf5!important;padding:5px 8px;border-radius:8px!important}
html.dark #mobile-drawer>div:nth-child(2) svg {color:#c8dfbe!important;filter:brightness(1.5) saturate(.75)}
