.compare-page { --compare-label-width: 11rem; --compare-product-min: 12rem; background: #fff; color: #0f172a; }
.compare-page [hidden] { display: none !important; }
.compare-container { max-width: 96rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.compare-title-row, .compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.compare-title-row { margin-bottom: 1.25rem; }
.compare-title-row h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; margin: 0 0 .375rem; }
.compare-muted, .compare-legend, .compare-scroll-hint { font-size: .875rem; color: #64748b; }
.compare-toolbar { justify-content: flex-start; padding: 1rem 0; border-block: 1px solid #e2e8f0; }
.compare-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .875rem; border: 1px solid #cbd5e1; border-radius: .375rem; background: #fff; color: #334155; font-size: .875rem; font-weight: 700; line-height: 1.2; cursor: pointer; overflow-wrap: anywhere; }
.compare-button:hover { background: #f1f5f9; }
.compare-button-active { border-color: #15803d; background: #f0fdf4; color: #166534; }
.compare-page :is(button, a, summary, input, select, [tabindex]):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.compare-page a { text-underline-offset: .15em; }
.compare-link, .compare-remove { color: #166534; text-decoration: underline; font-weight: 700; }
.compare-clear { margin-left: auto; }
.compare-share { position: relative; }
.compare-share summary { list-style: none; }
.compare-share summary::-webkit-details-marker { display: none; }
.compare-share-panel { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 35; width: min(32rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #cbd5e1; border-radius: .375rem; background: white; box-shadow: 0 8px 24px #0f172a1a; }
.compare-share-panel label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 700; }
.compare-share-controls { display: flex; gap: .5rem; }
.compare-share-controls input { width: 100%; min-width: 0; padding: .5rem; border: 1px solid #cbd5e1; border-radius: .25rem; font-size: .875rem; }
.compare-legend { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0; max-width: 65rem; }
.compare-difference-key { display: inline-block; width: .75rem; height: .75rem; flex-shrink: 0; background: #eff6ff; border: 1px solid #93c5fd; border-radius: .125rem; }
.compare-notice, .compare-mode-status { margin: 1rem 0; padding: .75rem 1rem; border-radius: .375rem; background: #eff6ff; color: #1e40af; font-size: .875rem; }
.compare-pair-picker { border: 0; padding: 0; margin: 1rem 0; grid-template-columns: 1fr 1fr; gap: .625rem; }
.compare-pair-picker legend { margin-bottom: .5rem; font-weight: 700; font-size: .875rem; }
.compare-pair-picker label { min-width: 0; font-size: .75rem; color: #475569; }
.compare-pair-picker select { display: block; width: 100%; min-width: 0; min-height: 2.75rem; margin-top: .25rem; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem 1.5rem .5rem .5rem; background-color: white; font-size: .8125rem; color: #0f172a; }
.compare-scroll-hint { margin: .5rem 0; }
.compare-scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; border: 1px solid #e2e8f0; border-radius: .375rem; }
.compare-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; min-width: calc(var(--compare-label-width) + var(--compare-columns) * var(--compare-product-min)); font-size: .875rem; }
.compare-table th, .compare-table td { padding: .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e2e8f0; border-right: 1px solid #eef2f6; overflow-wrap: anywhere; hyphens: auto; font-weight: 400; background: white; }
.compare-table [data-compare-product-col] { width: calc((100% - var(--compare-label-width)) / var(--visible-columns)); }
.compare-table .compare-row-label { width: var(--compare-label-width); position: sticky; left: 0; z-index: 2; background: #f8fafc; color: #475569; font-weight: 700; }
.compare-table .compare-product-header { padding: 1rem; }
.compare-table .compare-group-heading th { font-size: .8125rem; font-weight: 800; color: #334155; background: #f1f5f9; padding-block: .625rem; }
.compare-group-heading th { position: relative; }
.compare-table .compare-row-different > td { background: #f8fbff; }
.compare-different-label { display: block; margin-top: .25rem; color: #1d4ed8; font-size: .6875rem; font-weight: 600; }
.compare-table tfoot td, .compare-table tfoot th { border-top: 1px solid #cbd5e1; border-bottom: 0; background: #fafcfa; }
.compare-identity { display: flex; gap: .75rem; align-items: flex-start; text-decoration: none; min-width: 0; color: inherit; }
.compare-product-header > .compare-identity { min-height: 6rem; }
.compare-product-image { display: flex; align-items: center; justify-content: center; flex: 0 0 5rem; width: 5rem; height: 6rem; }
.compare-product-image img { width: 100%; height: 100%; object-fit: contain; }
.compare-product-image img.hidden { display: none; }
.compare-image-fallback { display: none; color: #94a3b8; font-size: 1.5rem; }
.compare-image-fallback.is-visible { display: flex; }
.compare-product-name { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.compare-brand { color: #64748b; font-size: .6875rem; font-weight: 700; }
.compare-model { font-size: .9375rem; font-weight: 800; line-height: 1.25; }
.compare-identity:hover .compare-model { text-decoration: underline; }
.compare-size { font-size: .8125rem; font-weight: 600; color: #475569; }
.compare-identity-compact .compare-product-image { flex-basis: 2.75rem; width: 2.75rem; height: 3.25rem; }
.compare-identity-compact .compare-model { font-size: .8125rem; }
.compare-identity-compact .compare-size { font-size: .75rem; }
.compare-purchase { margin-top: 1rem; }
.compare-unit-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem; }
.compare-unit-price strong { font-size: 1.125rem; font-weight: 800; color: #166534; }
.compare-unit-price > span { font-size: .75rem; color: #64748b; }
.compare-quantity { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; font-size: .8125rem; color: #475569; }
.compare-quantity input { width: 4rem; max-width: 55%; min-height: 2.5rem; padding: .375rem; border: 1px solid #94a3b8; border-radius: .25rem; font-weight: 700; text-align: center; color: #0f172a; background: #fff; }
.compare-total { margin-bottom: .5rem; font-size: .8125rem; }
.compare-total span { display: block; color: #64748b; font-size: .75rem; }
.compare-total strong { display: block; font-weight: 700; }
.compare-button.compare-buy { width: 100%; background: #166534; border-color: #166534; color: #fff; }
.compare-button.compare-buy:not(:disabled):hover { background: #14532d; }
.compare-button:disabled { cursor: not-allowed; color: #64748b; background: #e2e8f0; border-color: #e2e8f0; }
.compare-purchase > p { margin-top: .5rem; font-size: .75rem; }
.compare-delivery { color: #475569; }
.compare-delivery strong { font-weight: 600; }
.compare-best-label { display: block; margin-top: .25rem; font-size: .6875rem; font-weight: 700; color: #166534; }
.compare-price-best-slot { display: grid; margin-top: .25rem; font-size: .6875rem; font-weight: 700; }
.compare-price-best-slot::before { content: attr(data-price-label); visibility: hidden; grid-area: 1 / 1; }
.compare-price-best-slot .compare-best-label { margin-top: 0; grid-area: 1 / 1; }
.compare-product-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.compare-icon-button { width: 2.75rem; height: 2.75rem; border: 1px solid #e2e8f0; border-radius: .25rem; background: white; }
.compare-remove { font-size: .75rem; min-height: 2.75rem; }
.compare-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.compare-badge { padding: .25rem .375rem; border: 1px solid #cbd5e1; border-radius: .25rem; background: white; font-size: .75rem; font-weight: 600; }
.compare-grade { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; border: 2px solid var(--grade-color); border-left-width: .5rem; border-radius: .25rem; background: white; color: #0f172a; font-size: 1rem; font-weight: 800; }
.compare-missing { color: #64748b; font-size: .8125rem; }
.compare-help { margin-top: .375rem; }
.compare-help summary { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; min-height: 1.75rem; border: 1px solid #94a3b8; border-radius: 50%; cursor: pointer; color: #475569; list-style: none; }
.compare-help summary::-webkit-details-marker { display: none; }
.compare-help p { margin-top: .5rem; font-size: .75rem; font-weight: 400; }
.compare-details { margin-top: 1.5rem; }
.compare-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .75rem 1rem; cursor: pointer; list-style: none; border: 1px solid #cbd5e1; border-radius: .375rem; font-weight: 800; }
.compare-details > summary::-webkit-details-marker { display: none; }
.compare-details > summary > span:not(:first-child) { font-size: .8125rem; font-weight: 700; color: #166534; }
.compare-details .compare-scroll { margin-top: .75rem; }
.compare-details-open, .compare-details[open] .compare-details-closed { display: none; }
.compare-details[open] .compare-details-open { display: inline; }
.compare-sticky { position: fixed; z-index: 30; background: #fff; box-shadow: 0 5px 14px #0f172a24; border-bottom: 2px solid #cbd5e1; }
.compare-sticky[hidden], .compare-pair-picker[hidden], .compare-scroll-hint[hidden] { display: none !important; }
.compare-sticky-scroll { border-radius: 0; }
.compare-sticky-row { display: flex; }
.compare-sticky-row > div { flex-shrink: 0; padding: .625rem .75rem; border-right: 1px solid #e2e8f0; overflow-wrap: anywhere; }
.compare-sticky-label { position: sticky; left: 0; z-index: 2; background: #f8fafc; font-weight: 700; font-size: .8125rem; }
.compare-sticky-product { background: #fff; }
.compare-sticky-product > .compare-identity { min-height: 4rem; }
.compare-purchase-compact { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; margin-top: .375rem; }
.compare-purchase-compact .compare-unit-price { grid-column: 1 / -1; }
.compare-purchase-compact .compare-unit-price strong { font-size: .9375rem; }
.compare-purchase-compact .compare-quantity { margin-block: .25rem; grid-column: 1 / -1; }
.compare-purchase-compact .compare-quantity input { min-height: 2rem; padding-block: .125rem; }
.compare-purchase-compact .compare-total { margin-bottom: .25rem; grid-column: 1 / -1; display: flex; gap: .375rem; flex-wrap: wrap; }
.compare-purchase-compact .compare-total span { font-size: .6875rem; }
.compare-purchase-compact .compare-buy { grid-column: 1 / -1; min-height: 2.5rem; }
.compare-empty { max-width: 28rem; text-align: center; margin: 3rem auto; }
.compare-empty > i { font-size: 2rem; color: #94a3b8; }
.compare-empty h2 { font-weight: 800; font-size: 1.25rem; margin-top: 1rem; }
.compare-empty p { margin: .75rem 0 1.25rem; color: #64748b; }
@media (max-width: 63.999rem) {
    .compare-page { --compare-label-width: 6rem; }
    .compare-container { padding-top: 1.5rem; }
    .compare-title-row { gap: .5rem; }
    .compare-title-row > .compare-link { font-size: .8125rem; }
    .compare-toolbar { gap: .5rem; }
    .compare-toolbar .compare-button { padding-inline: .625rem; font-size: .8125rem; }
    .compare-clear { margin-left: 0; }
    .compare-share { position: static; }
    .compare-toolbar { position: relative; }
    .compare-share-panel { left: 0; top: 100%; }
    .compare-page.is-pair-mode { --visible-columns: 2; }
    .compare-page.is-pair-mode .compare-table { min-width: 0; }
    .compare-page.is-pair-mode .compare-column-hidden { display: none !important; }
    .compare-pair-picker:not([hidden]) { display: grid; }
    .compare-table th, .compare-table td { padding: .625rem .5rem; font-size: .8125rem; }
    .compare-table .compare-row-label { font-size: .75rem; }
    .compare-table .compare-product-header { padding: .625rem .5rem; }
    .compare-identity { display: block; }
    .compare-product-image { height: 3.5rem; width: 3.5rem; margin: 0 0 .5rem; }
    .compare-model { font-size: .8125rem; }
    .compare-size { font-size: .6875rem; }
    .compare-identity-compact .compare-product-image { height: 2.5rem; width: 2.5rem; }
    .compare-unit-price strong { font-size: 1rem; }
    .compare-unit-price > span { font-size: .6875rem; }
    .compare-quantity { gap: .25rem; font-size: .75rem; }
    .compare-quantity input { width: 3rem; }
    .compare-buy { padding-inline: .375rem; font-size: .8125rem; }
    .compare-product-actions { gap: .25rem; }
    .compare-table tfoot .compare-product-image { display: none; }
    .compare-sticky-row > div { padding: .5rem; }
    .compare-sticky .compare-product-image { display: none; }
    .compare-sticky .compare-brand { font-size: .625rem; }
    .compare-sticky .compare-model { font-size: .75rem; }
    .compare-sticky .compare-size { font-size: .625rem; }
    .compare-purchase-compact .compare-unit-price strong { font-size: .8125rem; }
    .compare-purchase-compact .compare-total { display: block; font-size: .75rem; }
    .compare-purchase-compact .compare-quantity { font-size: .6875rem; }
    .compare-purchase-compact .compare-buy { font-size: .75rem; }
}
@media (max-width: 359px) {
    .compare-page { --compare-label-width: 4.75rem; }
    .compare-table th, .compare-table td { padding: .5rem .375rem; }
}
@media (prefers-reduced-motion: reduce) { .compare-page * { scroll-behavior: auto !important; } }
@media print { .compare-sticky, .compare-toolbar, .compare-product-actions { display: none !important; } }