/* Chidemoon compare tray — light editorial surface, thumbnail chips, clay accents. */
html.has-chidemoon-compare-bar, html:has(.chidemoon-compare-bar:not([hidden])) { scroll-padding-block-end: calc(var(--chidemoon-compare-bar-height, 0px) + 1.5rem + env(safe-area-inset-bottom)); }
html.has-chidemoon-compare-bar body, body:has(.chidemoon-compare-bar:not([hidden])) { padding-block-end: calc(var(--chidemoon-compare-bar-height, 0px) + 1.5rem + env(safe-area-inset-bottom)); }

/* Product "compare" toggle on cards and single products. */
.chidemoon-compare-control { align-items: center; background: transparent; border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, 0.25)); border-radius: var(--chidemoon-radius, 0.5rem); color: var(--chidemoon-forest, #123f34); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.76rem; font-weight: 800; gap: 0.35rem; justify-content: center; margin-top: 0.75rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; touch-action: manipulation; transition: background-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), border-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); }
.chidemoon-compare-control svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1rem; }
.chidemoon-compare-control:hover, .chidemoon-compare-control[aria-pressed="true"] { background: var(--chidemoon-forest, #123f34); border-color: var(--chidemoon-forest, #123f34); color: #fffdfa; }
.chidemoon-compare-control:active { transform: scale(0.98); }
.chidemoon-compare-control:focus-visible, .chidemoon-compare-bar :is(button, a):focus-visible, .chidemoon-compare-single:focus-visible { outline: 3px solid var(--chidemoon-clay, #b95d3e); outline-offset: 3px; }
.ct-woo-card-actions .chidemoon-compare-control { flex: 0 0 auto; margin-top: 0; }

/* Single-product compare selection: calm two-line control, forest state when in list. */
.chidemoon-compare-single { align-items: center; appearance: none; background: var(--chidemoon-surface, #fffdfa); border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, 0.25)); border-radius: var(--chidemoon-radius, 0.5rem); box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, 0.07)); color: var(--chidemoon-forest, #123f34); cursor: pointer; display: flex; font: inherit; gap: 0.8rem; margin-block: 0.6rem; max-width: 26rem; padding: 0.6rem 0.9rem; text-align: start; touch-action: manipulation; transition: background-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), border-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), box-shadow var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), transform var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); width: 100%; }
.chidemoon-compare-single:hover { border-color: var(--chidemoon-forest, #123f34); transform: translateY(-1px); }
.chidemoon-compare-single:active { transform: scale(0.99); }
.chidemoon-compare-single__icon { align-items: center; background: color-mix(in srgb, var(--chidemoon-forest, #123f34) 8%, var(--chidemoon-surface, #fffdfa)); border-radius: 999px; display: inline-flex; flex: 0 0 auto; height: 2.5rem; justify-content: center; position: relative; transition: background-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); width: 2.5rem; }
.chidemoon-compare-single__icon svg { fill: none; height: 1.15rem; inset: 0; margin: auto; position: absolute; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: opacity var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), transform var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); width: 1.15rem; }
.chidemoon-compare-single__icon-check { opacity: 0; transform: scale(0.55) rotate(-8deg); }
.chidemoon-compare-single__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.chidemoon-compare-single__label { font-size: 0.9rem; font-weight: 800; line-height: 1.35; }
.chidemoon-compare-single__hint { color: var(--chidemoon-muted, #607069); font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.chidemoon-compare-single.is-selected { background: linear-gradient(135deg, var(--chidemoon-forest, #123f34), var(--chidemoon-forest-deep, #092c25)); border-color: var(--chidemoon-forest-deep, #092c25); box-shadow: 0 10px 24px rgba(18, 63, 52, 0.24); color: #fffdfa; }
.chidemoon-compare-single.is-selected:hover { transform: none; }
.chidemoon-compare-single.is-selected .chidemoon-compare-single__icon { background: rgba(255, 253, 250, 0.14); }
.chidemoon-compare-single.is-selected .chidemoon-compare-single__icon-add { opacity: 0; transform: scale(0.55) rotate(8deg); }
.chidemoon-compare-single.is-selected .chidemoon-compare-single__icon-check { opacity: 1; transform: scale(1) rotate(0deg); }
.chidemoon-compare-single.is-selected .chidemoon-compare-single__hint { color: rgba(255, 253, 250, 0.72); }

/* Fixed selection tray. */
.chidemoon-compare-bar { align-items: center; animation: chidemoon-compare-bar-in 320ms var(--chidemoon-ease-out, ease) both; backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); background: color-mix(in srgb, var(--chidemoon-surface, #fffdfa) 88%, transparent); border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, 0.12)); border-radius: var(--chidemoon-radius-lg, 0.7rem); bottom: 1.1rem; box-shadow: 0 22px 55px rgba(13, 43, 35, 0.18), 0 2px 8px rgba(13, 43, 35, 0.08); color: var(--chidemoon-ink, #17241f); display: grid; gap: 0.7rem 1rem; grid-template-columns: auto minmax(0, 1fr) auto; inset-inline: 1rem; margin-inline: auto; max-width: 58rem; padding: 0.7rem 1rem; position: fixed; z-index: 1000; }
.chidemoon-compare-bar[hidden] { display: none; }

.chidemoon-compare-bar__summary { align-items: center; color: var(--chidemoon-forest, #123f34); display: flex; font-size: 0.85rem; font-weight: 800; gap: 0.45rem; white-space: nowrap; }
.chidemoon-compare-bar__badge { align-items: center; background: var(--chidemoon-forest, #123f34); border-radius: 999px; box-shadow: 0 2px 8px rgba(18, 63, 52, 0.35); color: #fffdfa; display: inline-flex; font-size: 0.8rem; font-weight: 800; height: 1.6rem; justify-content: center; min-width: 1.6rem; padding: 0 0.4rem; }

.chidemoon-compare-bar__items { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.chidemoon-compare-bar__chip { align-items: center; appearance: none; background: var(--chidemoon-surface, #fffdfa); border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, 0.25)); border-radius: 999px; box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, 0.07)); color: var(--chidemoon-ink, #17241f); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.78rem; font-weight: 700; gap: 0.5rem; max-width: 20rem; min-height: 2.3rem; padding: 0.25rem; padding-inline-end: 0.7rem; transition: border-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), box-shadow var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), transform var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); }
.chidemoon-compare-bar__chip:hover { border-color: var(--chidemoon-clay, #b95d3e); color: var(--chidemoon-clay, #b95d3e); transform: translateY(-1px); }
.chidemoon-compare-bar__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chidemoon-compare-bar__chip-x { color: var(--chidemoon-muted, #607069); font-size: 0.95rem; line-height: 1; }
.chidemoon-compare-bar__chip:hover .chidemoon-compare-bar__chip-x { color: var(--chidemoon-clay, #b95d3e); }

.chidemoon-compare-bar__thumb { background: var(--chidemoon-surface-muted, #eee8dc); border-radius: 999px; flex: 0 0 auto; height: 1.8rem; object-fit: cover; width: 1.8rem; }
.chidemoon-compare-bar__thumb--empty { align-items: center; color: var(--chidemoon-forest, #123f34); display: inline-flex; font-size: 0.8rem; font-weight: 800; justify-content: center; }

.chidemoon-compare-bar__actions { display: flex; gap: 0.5rem; }
.chidemoon-compare-bar__clear { appearance: none; background: transparent; border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, 0.25)); border-radius: 999px; color: var(--chidemoon-forest, #123f34); cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 700; min-height: 2.75rem; padding: 0.35rem 0.9rem; transition: border-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), background-color var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); }
.chidemoon-compare-bar__clear:hover { background: color-mix(in srgb, var(--chidemoon-clay, #b95d3e) 10%, transparent); border-color: var(--chidemoon-clay, #b95d3e); color: var(--chidemoon-clay, #b95d3e); }
.chidemoon-compare-bar__go { appearance: none; background: linear-gradient(135deg, var(--chidemoon-forest, #123f34), var(--chidemoon-forest-deep, #092c25)); border: 0; border-radius: 999px; box-shadow: 0 8px 20px rgba(18, 63, 52, 0.28); color: #fffdfa; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 800; min-height: 2.75rem; padding: 0.6rem 1.1rem; transition: box-shadow var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease), transform var(--chidemoon-motion-fast, 140ms) var(--chidemoon-ease-out, ease); }
.chidemoon-compare-bar__go:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(18, 63, 52, 0.36); transform: translateY(-1px); }
.chidemoon-compare-bar__go:active:not(:disabled) { transform: translateY(0); }
.chidemoon-compare-bar__go:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; }
.chidemoon-compare-bar__hint { color: var(--chidemoon-muted, #607069); font-size: 0.78rem; font-weight: 600; grid-column: 1 / -1; line-height: 1.7; margin: 0; }
.chidemoon-compare-bar__go[hidden], .chidemoon-compare-bar__hint[hidden] { display: none; }

/* Selection strip on the comparisons page reuses the same thumbnail language. */
.chidemoon-comparison-status__chip { align-items: center; display: inline-flex; gap: 0.45rem; }
.chidemoon-comparison-status__chip-thumb { background: var(--chidemoon-surface-muted, #eee8dc); border-radius: 999px; height: 1.5rem; object-fit: cover; width: 1.5rem; }
.chidemoon-comparison-status__chip-thumb--empty { align-items: center; background: color-mix(in srgb, var(--chidemoon-forest, #123f34) 10%, var(--chidemoon-surface, #fffdfa)); color: var(--chidemoon-forest, #123f34); display: inline-flex; font-size: 0.72rem; font-weight: 800; justify-content: center; }

/* Search results carry the product image too. */
.chidemoon-comparison-search__result { gap: 0.7rem; }
.chidemoon-comparison-search__result span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chidemoon-comparison-search__thumb { background: var(--chidemoon-surface-muted, #eee8dc); border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, 0.12)); border-radius: var(--chidemoon-radius-sm, 0.35rem); flex: 0 0 auto; height: 2.5rem; object-fit: cover; width: 2.5rem; }
.chidemoon-comparison-search__result.is-selected { color: var(--chidemoon-clay, #b95d3e); }

@media (max-width: 640px) {
	.chidemoon-compare-bar { align-items: stretch; border-inline: 0; border-radius: var(--chidemoon-radius-lg, 0.7rem) var(--chidemoon-radius-lg, 0.7rem) 0 0; bottom: 0; gap: 0.7rem; grid-template-columns: 1fr; inset-inline: 0; max-width: none; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); }
	.chidemoon-compare-bar__summary { font-size: 0.8rem; }
	.chidemoon-compare-bar__actions { display: grid; grid-template-columns: 1fr 1fr; }
	.chidemoon-compare-bar__chip { max-width: none; }
}
@keyframes chidemoon-compare-bar-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .chidemoon-compare-bar, .chidemoon-compare-control, .chidemoon-compare-single, .chidemoon-compare-bar__chip, .chidemoon-compare-bar__clear, .chidemoon-compare-bar__go { animation: none; transition: none; } .chidemoon-compare-control:active, .chidemoon-compare-single:hover, .chidemoon-compare-single:active, .chidemoon-compare-bar__chip:hover, .chidemoon-compare-bar__go:hover:not(:disabled) { transform: none; } }

.chidemoon-comparison-status, .chidemoon-comparison-picker, .chidemoon-comparison-table-section { scroll-margin-block-start: 6.5rem; }
.chidemoon-comparison-status { align-items: center; background: color-mix(in srgb, var(--chidemoon-sage, #a9c1ad) 45%, var(--chidemoon-surface, #fffdfa)); border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); border-radius: var(--chidemoon-radius-lg, .7rem); box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, .07)); display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.6vw, 1.6rem); }
.chidemoon-comparison-status[hidden] { display: none; }
.chidemoon-comparison-status__count { color: var(--chidemoon-forest, #123f34); font-weight: 800; margin: 0; }
.chidemoon-comparison-status__chips { display: flex; flex: 1 1 14rem; flex-wrap: wrap; gap: .45rem; }
.chidemoon-comparison-status__chip { background: var(--chidemoon-surface, #fffdfa); border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, .25)); color: var(--chidemoon-forest, #123f34); padding: .35rem .8rem; }
.chidemoon-comparison-status__cta { margin-inline-start: auto; }
.chidemoon-comparison-picker { display: grid; gap: 1.5rem; }
.chidemoon-comparison-search { background: var(--chidemoon-surface, #fffdfa); border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); border-radius: var(--chidemoon-radius-lg, .7rem); box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, .07)); max-width: 48rem; padding: clamp(1rem, 3vw, 1.5rem); }
.chidemoon-comparison-search label { color: var(--chidemoon-forest, #123f34); display: block; font-weight: 800; margin-block-end: .6rem; }
.chidemoon-comparison-search__field { align-items: center; border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, .25)); border-radius: var(--chidemoon-radius-sm, .35rem); display: flex; gap: .7rem; padding-inline: .8rem; }
.chidemoon-comparison-search__field:focus-within { border-color: var(--chidemoon-forest, #123f34); outline: 2px solid color-mix(in srgb, var(--chidemoon-forest, #123f34) 25%, transparent); }
.chidemoon-comparison-search__field svg { fill: none; flex: 0 0 auto; height: 1.2rem; stroke: var(--chidemoon-forest, #123f34); stroke-linecap: round; stroke-width: 1.8; width: 1.2rem; }
.chidemoon-comparison-search input { background: transparent; border: 0; color: inherit; font: inherit; min-height: 3rem; outline: 0; width: 100%; }
.chidemoon-comparison-search__hint, .chidemoon-compare-empty { color: var(--chidemoon-muted, #607069); line-height: 1.8; margin: .75rem 0 0; }
.chidemoon-comparison-search__results { border-block-start: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); margin-block-start: .9rem; padding-block-start: .7rem; }
.chidemoon-comparison-search__result { align-items: center; background: transparent; border: 0; border-block-end: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); color: var(--chidemoon-forest, #123f34); cursor: pointer; display: flex; font: inherit; font-weight: 700; justify-content: space-between; min-height: 3rem; padding: .5rem 0; text-align: start; width: 100%; }
.chidemoon-comparison-search__result:focus-visible, .chidemoon-comparison-table__remove:focus-visible { outline: 3px solid var(--chidemoon-clay, #b95d3e); outline-offset: 3px; }
.chidemoon-core-product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.chidemoon-core-product-card { background: var(--chidemoon-surface, #fffdfa); border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); border-radius: var(--chidemoon-radius-lg, .7rem); box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, .07)); display: flex; flex-direction: column; overflow: hidden; }
.chidemoon-core-product-card__media { aspect-ratio: 1 / .8; background: var(--chidemoon-surface-muted, #eee8dc); display: block; }
.chidemoon-core-product-card__media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.chidemoon-core-product-card__body { display: grid; flex: 1; gap: .65rem; padding: 1rem; }
.chidemoon-core-product-card__body p { color: var(--chidemoon-muted, #607069); font-size: .8rem; margin: 0; }
.chidemoon-core-product-card__body h3 { color: var(--chidemoon-forest, #123f34); font-size: 1rem; line-height: 1.55; margin: 0; }
.chidemoon-core-product-card__body h3 a { color: inherit; text-decoration: none; }
.chidemoon-core-product-card__price { color: var(--chidemoon-clay, #b95d3e); font-weight: 800; }
.chidemoon-core-product-card .chidemoon-compare-control { margin-block-start: auto; width: 100%; }
.chidemoon-comparison-table-wrap { overflow-x: auto; outline-offset: 4px; }
.chidemoon-comparison-table { border-collapse: separate; border-spacing: 0; min-width: 48rem; width: 100%; }
.chidemoon-comparison-table :where(th, td) { background: var(--chidemoon-surface, #fffdfa); border-block-end: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); border-inline-end: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); padding: 1rem; text-align: start; vertical-align: top; }
.chidemoon-comparison-table :is(th:first-child, td:first-child) { border-inline-start: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); }
.chidemoon-comparison-table thead th { background: color-mix(in srgb, var(--chidemoon-sage, #a9c1ad) 20%, var(--chidemoon-surface, #fffdfa)); font-weight: 700; min-width: 11rem; }
.chidemoon-comparison-table tbody th { background: color-mix(in srgb, var(--chidemoon-forest, #123f34) 7%, var(--chidemoon-surface, #fffdfa)); color: var(--chidemoon-forest, #123f34); font-weight: 800; inset-inline-start: 0; min-width: 9rem; position: sticky; z-index: 2; }
.chidemoon-comparison-table thead a { color: var(--chidemoon-forest, #123f34); display: grid; gap: .65rem; text-decoration: none; }
.chidemoon-comparison-table thead img { aspect-ratio: 1 / .85; object-fit: cover; width: 100%; }
.chidemoon-comparison-table__remove { background: transparent; border: 1px solid var(--chidemoon-line-strong, rgba(18, 63, 52, .25)); border-radius: var(--chidemoon-radius-sm, .35rem); color: var(--chidemoon-clay, #b95d3e); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; margin-block-start: .7rem; min-height: 2.5rem; padding: .25rem .7rem; }
@media (max-width: 700px) { .chidemoon-comparison-table { min-width: 0; } .chidemoon-comparison-table thead { display: none; } .chidemoon-comparison-table, .chidemoon-comparison-table tbody, .chidemoon-comparison-table tbody tr, .chidemoon-comparison-table tbody th, .chidemoon-comparison-table tbody td { display: block; width: 100%; } .chidemoon-comparison-table tbody tr { border: 1px solid var(--chidemoon-line, rgba(18, 63, 52, .12)); border-radius: var(--chidemoon-radius, .5rem); box-shadow: var(--chidemoon-shadow-soft, 0 8px 26px rgba(13, 43, 35, .07)); margin-block-end: 1rem; overflow: hidden; } .chidemoon-comparison-table tbody th { border-inline: 0; min-width: 0; position: static; } .chidemoon-comparison-table tbody td { align-items: center; border-inline: 0; display: flex; gap: 1rem; justify-content: space-between; } .chidemoon-comparison-table tbody td::before { color: var(--chidemoon-muted, #607069); content: attr(data-label); flex: 0 1 auto; font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; } .chidemoon-comparison-table tbody td > * { flex: 0 1 auto; min-width: 0; text-align: end; } .chidemoon-comparison-table tbody td .chidemoon-button { flex: 1 1 auto; justify-content: center; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .chidemoon-core-product-card, .chidemoon-comparison-search__result { transition: none; } }