/* สร้างด้วย tools/build-css.php — ห้ามแก้ไฟล์นี้ตรง ๆ (แก้ style.css ของแต่ละบล็อกแล้ว build ใหม่) */

/* ---- compare-button ---- */
.cz-b.cz-b--compare-button { display: block; box-sizing: border-box; margin: var(--cz-wrap-margin, 0); padding: var(--cz-wrap-pad, 0); text-align: var(--cz-wrap-align); }
.cz-card.cz-card--custom > .cz-b.cz-b--compare-button { margin: var(--cz-wrap-margin, 0 var(--_cz-inset, 16px)); }
.cz-b--compare-button.cz-wrapbtn { --_czw-bg: var(--cz-wrap-bg); --_czw-bw: var(--cz-wrap-border-width); --_czw-bs: var(--cz-wrap-border-style); --_czw-bc: var(--cz-wrap-border-color); --_czw-r: var(--cz-wrap-radius); --_czw-sh: var(--cz-wrap-shadow); }
.cz-compare-btn { display: inline-flex; align-items: center; justify-content: var(--cz-button-align, normal); gap: 8px; box-sizing: border-box; margin: var(--_czo-m, var(--cz-button-margin, 0)); padding: var(--_czo-p, var(--cz-button-pad, 6px 0)); --_czb-bw: var(--cz-button-border-width, var(--_czw-bw, 0)); border: var(--_czo-bw, var(--_czf-bw, var(--_czb-bw))) var(--_czo-bs, var(--cz-button-border-style, var(--_czw-bs, solid))) var(--_czf-bc, var(--cz-button-border-color, var(--_czw-bc, var(--czt-line)))); border-radius: var(--cz-button-radius, var(--_czw-r, var(--czt-radius-button))); background: var(--_czf-bg, var(--cz-button-bg, var(--_czw-bg, transparent))); color: var(--_czf-c, var(--cz-button-color, var(--czt-text))); box-shadow: var(--_czo-sh, var(--_czf-sh, var(--cz-button-shadow, var(--_czw-sh, none)))); font-family: var(--cz-button-font-family, var(--czt-font)); font-size: var(--cz-button-font-size, .92em); font-weight: var(--_czf-fw, var(--cz-button-font-weight, 400)); line-height: var(--cz-button-line-height, 1.3); letter-spacing: var(--cz-button-letter-spacing, normal); text-transform: var(--cz-button-text-transform, none); font-style: var(--cz-button-font-style, normal); text-decoration: var(--cz-button-text-decoration, none); text-align: var(--cz-button-align, left); cursor: pointer; }
.cz-compare-btn:hover { background: var(--_cza-bg, var(--cz-button-bg-hover, var(--cz-button-bg, var(--_czw-bg, transparent)))); color: var(--_cza-c, var(--cz-button-color-hover, var(--czt-accent))); border-color: var(--_cza-bc, var(--cz-button-border-color-hover, var(--cz-button-border-color, var(--_czw-bc, var(--czt-line))))); box-shadow: var(--_cza-sh, var(--cz-button-shadow-hover, var(--cz-button-shadow, var(--_czw-sh, none)))); border-width: var(--_czo-bw, var(--_cza-bw, var(--cz-button-border-width-hover, var(--_czb-bw)))); font-weight: var(--_cza-fw, var(--cz-button-font-weight-hover, var(--cz-button-font-weight, 400))); }
.cz-compare-btn:active { --_cza-bg: var(--cz-button-bg-active); --_cza-c: var(--cz-button-color-active); --_cza-bc: var(--cz-button-border-color-active); --_cza-sh: var(--cz-button-shadow-active); --_cza-bw: var(--cz-button-border-width-active); --_cza-fw: var(--cz-button-font-weight-active); }
.cz-compare-btn:focus-visible { --_czf-bg: var(--cz-button-bg-focus); --_czf-c: var(--cz-button-color-focus); --_czf-bc: var(--cz-button-border-color-focus); --_czf-sh: var(--cz-button-shadow-focus); --_czf-bw: var(--cz-button-border-width-focus); --_czf-fw: var(--cz-button-font-weight-focus); }
.cz-compare-btn:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 2px; }
.cz-compare-btn__icon { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; }
.cz-compare-btn[aria-pressed="true"] { --_czo-m: var(--cz-on-margin); --_czo-p: var(--cz-on-pad); --_czo-bw: var(--cz-on-border-width); --_czo-bs: var(--cz-on-border-style); --_czo-sh: var(--cz-on-shadow); border-radius: var(--cz-on-radius, var(--cz-button-radius, var(--_czw-r, var(--czt-radius-button)))); color: var(--cz-on-color, var(--czt-accent)); background: var(--cz-on-bg, var(--cz-button-bg, var(--_czw-bg, transparent))); border-color: var(--cz-on-border-color, var(--cz-button-border-color, var(--_czw-bc, var(--czt-line)))); }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon { background: currentColor; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid var(--czt-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cz-compare-btn [hidden] { display: none !important; }
.cz-compare-bar { position: fixed; z-index: 9990; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: max-content; max-width: calc(100vw - 32px); margin: var(--cz-bar-margin, 0); padding: var(--cz-bar-pad, 10px 12px 10px 16px); border: var(--cz-bar-border-width, 1px) var(--cz-bar-border-style, solid) var(--cz-bar-border-color, var(--czt-line)); border-radius: var(--cz-bar-radius, var(--czt-radius-card)); background: var(--cz-bar-bg, #fff); color: var(--cz-bar-color, var(--czt-text)); box-shadow: var(--cz-bar-shadow, 0 8px 28px rgba(0, 0, 0, .14)); font-family: var(--cz-bar-font-family, var(--czt-font)); font-size: var(--cz-bar-font-size, .95em); font-weight: var(--cz-bar-font-weight); line-height: var(--cz-bar-line-height); letter-spacing: var(--cz-bar-letter-spacing); text-transform: var(--cz-bar-text-transform); font-style: var(--cz-bar-font-style); text-decoration: var(--cz-bar-text-decoration); }
.cz-compare-bar--left { left: 16px; transform: none; }
.cz-compare-bar--right { left: auto; right: 16px; transform: none; }
body.cz-compare-bar-on::after { content: ""; display: block; height: var(--czb-bar-space, 96px); }
body.cz-compare-bar-on.cz-compare-bar-padded::after { display: none; }
body.cz-compare-bar-on .cz-compare-pad { padding-bottom: calc(var(--czb-pad0, 0px) + var(--czb-bar-space, 96px)) !important; }
.cz-compare-bar[hidden] { display: none; }
.cz-compare-bar__msg { color: var(--cz-bar-color, var(--czt-muted)); font-size: .9em; }
.cz-compare-bar__go { display: inline-flex; align-items: center; justify-content: var(--cz-bar-go-align, normal); width: var(--cz-bar-go-width, auto); min-height: 40px; margin: var(--cz-bar-go-margin, 0); padding: var(--cz-bar-go-pad, 8px 16px); --_czg-bw: var(--cz-bar-go-border-width, 0); border: var(--_czg-bw) var(--cz-bar-go-border-style, solid) var(--cz-bar-go-border-color, transparent); border-radius: var(--cz-bar-go-radius, var(--czt-radius-button)); background: var(--cz-bar-go-bg, var(--czt-accent)); box-shadow: var(--cz-bar-go-shadow, none); color: var(--cz-bar-go-color, var(--czt-accent-ink)); font-family: var(--cz-bar-go-font-family); font-size: var(--cz-bar-go-font-size); font-weight: var(--cz-bar-go-font-weight, 600); line-height: var(--cz-bar-go-line-height); letter-spacing: var(--cz-bar-go-letter-spacing); text-transform: var(--cz-bar-go-text-transform); font-style: var(--cz-bar-go-font-style); text-decoration: var(--cz-bar-go-text-decoration, none); }
.cz-compare-bar__go:hover { background: var(--cz-bar-go-bg-hover, var(--cz-bar-go-bg, var(--czt-accent))); border-color: var(--cz-bar-go-border-color-hover, var(--cz-bar-go-border-color, transparent)); color: var(--cz-bar-go-color-hover, var(--cz-bar-go-color, var(--czt-accent-ink))); box-shadow: var(--cz-bar-go-shadow-hover, var(--cz-bar-go-shadow, none)); border-width: var(--cz-bar-go-border-width-hover, var(--_czg-bw)); font-weight: var(--cz-bar-go-font-weight-hover, var(--cz-bar-go-font-weight, 600)); }
.cz-compare-bar__go:hover:active { background: var(--cz-bar-go-bg-active, var(--cz-bar-go-bg-hover, var(--cz-bar-go-bg, var(--czt-accent)))); border-color: var(--cz-bar-go-border-color-active, var(--cz-bar-go-border-color-hover, var(--cz-bar-go-border-color, transparent))); color: var(--cz-bar-go-color-active, var(--cz-bar-go-color-hover, var(--cz-bar-go-color, var(--czt-accent-ink)))); box-shadow: var(--cz-bar-go-shadow-active, var(--cz-bar-go-shadow-hover, var(--cz-bar-go-shadow, none))); border-width: var(--cz-bar-go-border-width-active, var(--cz-bar-go-border-width-hover, var(--_czg-bw))); font-weight: var(--cz-bar-go-font-weight-active, var(--cz-bar-go-font-weight-hover, var(--cz-bar-go-font-weight, 600))); }
.cz-compare-bar__go:focus-visible:not(:hover):not([aria-disabled="true"]) { background: var(--cz-bar-go-bg-focus, var(--cz-bar-go-bg, var(--czt-accent))); border-color: var(--cz-bar-go-border-color-focus, var(--cz-bar-go-border-color, transparent)); color: var(--cz-bar-go-color-focus, var(--cz-bar-go-color, var(--czt-accent-ink))); box-shadow: var(--cz-bar-go-shadow-focus, var(--cz-bar-go-shadow, none)); border-width: var(--cz-bar-go-border-width-focus, var(--_czg-bw)); font-weight: var(--cz-bar-go-font-weight-focus, var(--cz-bar-go-font-weight, 600)); }
.cz-compare-bar__go[aria-disabled="true"] { margin: var(--cz-bar-off-margin, var(--cz-bar-go-margin, 0)); padding: var(--cz-bar-off-pad, var(--cz-bar-go-pad, 8px 16px)); border: var(--cz-bar-off-border-width, var(--cz-bar-go-border-width, 0)) var(--cz-bar-off-border-style, var(--cz-bar-go-border-style, solid)) var(--cz-bar-off-border-color, var(--cz-bar-go-border-color, transparent)); border-radius: var(--cz-bar-off-radius, var(--cz-bar-go-radius, var(--czt-radius-button))); background: var(--cz-bar-off-bg, #e6e7ea); box-shadow: var(--cz-bar-off-shadow, var(--cz-bar-go-shadow, none)); color: var(--cz-bar-off-color, #474b52); font-family: var(--cz-bar-off-font-family, var(--cz-bar-go-font-family)); font-size: var(--cz-bar-off-font-size, var(--cz-bar-go-font-size)); font-weight: var(--cz-bar-off-font-weight, var(--cz-bar-go-font-weight, 600)); line-height: var(--cz-bar-off-line-height, var(--cz-bar-go-line-height)); letter-spacing: var(--cz-bar-off-letter-spacing, var(--cz-bar-go-letter-spacing)); text-transform: var(--cz-bar-off-text-transform, var(--cz-bar-go-text-transform)); font-style: var(--cz-bar-off-font-style, var(--cz-bar-go-font-style)); text-decoration: var(--cz-bar-off-text-decoration, var(--cz-bar-go-text-decoration, none)); pointer-events: none; cursor: not-allowed; }
.cz-compare-bar__clear, .cz-compare-bar__clear:is(:hover, :focus, :active) { appearance: none; background: none; border: 0; box-shadow: none; padding: 4px; font: inherit; color: var(--cz-bar-color, var(--czt-muted)); text-decoration: underline; cursor: pointer; }
.cz-compare-bar__go:focus-visible, .cz-compare-bar .cz-compare-bar__clear:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 2px; }
@media (max-width: 600px) { .cz-compare-bar { left: 16px; right: 16px; transform: none; width: auto; flex-wrap: wrap; justify-content: space-between; }
.cz-compare-bar:not(.is-alert) .cz-compare-bar__msg { display: none; }
.cz-compare-bar.is-alert .cz-compare-bar__msg { order: 3; flex-basis: 100%; }
}
.cz-compare-btn--icon { position: relative; justify-content: var(--cz-button-align, center); min-width: 36px; padding: var(--_czo-p, var(--cz-button-pad, 6px)); }
.cz-compare-btn--icon .cz-compare-btn__add, .cz-compare-btn--icon .cz-compare-btn__on { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cz-compare-btn__icon--columns { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; font-size: 20px; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon--columns { background: none; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon--columns::after { content: none; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon--columns svg { fill: color-mix(in srgb, currentColor 18%, transparent); }
.cz-compare-btn__icon--scale .cz-glyph { display: block; width: 1em; height: 1em; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon--scale svg { fill: none; stroke-width: 2.25; }
.cz-compare-btn--button { justify-content: var(--cz-button-align, center); padding: var(--_czo-p, var(--cz-button-pad, 8px 14px)); --_czb-bw: var(--cz-button-border-width, var(--_czw-bw, 1px)); border-width: var(--_czo-bw, var(--_czf-bw, var(--_czb-bw))); border-color: var(--_czf-bc, var(--cz-button-border-color, var(--_czw-bc, var(--czt-line)))); background: var(--_czf-bg, var(--cz-button-bg, var(--_czw-bg, var(--czt-set-surface, transparent)))); text-align: var(--cz-button-align, center); }
.cz-compare-btn--button[aria-pressed="true"] { color: var(--cz-on-color, var(--czt-accent-ink)); background: var(--cz-on-bg, var(--czt-accent)); border-color: var(--cz-on-border-color, var(--czt-accent)); }
.cz-compare-btn--button:hover { border-color: var(--_cza-bc, var(--cz-button-border-color-hover, var(--czt-accent))); }
.cz-compare-btn { min-height: var(--cz-button-min-height, 36px); }
.cz-b--compare-button.cz-has-width .cz-compare-btn { width: var(--cz-button-width); }
.cz-b--compare-button button.cz-compare-btn { font-family: var(--cz-button-font-family, inherit); }
.cz-card:has(.cz-compare-corner) { position: relative; }
.cz-b.cz-b--compare-button.cz-compare-corner, .cz-card.cz-card--custom > .cz-b.cz-b--compare-button.cz-compare-corner { position: absolute; z-index: 3; margin: var(--cz-corner-margin, 0); padding: var(--cz-corner-pad, 0); border: var(--cz-corner-border-width, 0) var(--cz-corner-border-style, solid) var(--cz-corner-border-color, transparent); border-radius: var(--cz-corner-radius, 0); background: var(--cz-corner-bg, transparent); box-shadow: var(--cz-corner-shadow, none); }
.cz-compare-corner--tr { top: var(--cz-corner-inset, 12px); right: var(--cz-corner-inset, 12px); }
.cz-compare-corner--tl { top: var(--cz-corner-inset, 12px); left: var(--cz-corner-inset, 12px); }
.cz-compare-corner--br { bottom: var(--cz-corner-inset, 12px); right: var(--cz-corner-inset, 12px); }
.cz-compare-corner--bl { bottom: var(--cz-corner-inset, 12px); left: var(--cz-corner-inset, 12px); }
.cz-compare-corner .cz-compare-btn--icon { background: var(--_czf-bg, var(--cz-button-bg, var(--_czw-bg, var(--czt-set-surface, #fff)))); border-radius: var(--cz-button-radius, var(--_czw-r, 999px)); box-shadow: var(--_czo-sh, var(--_czf-sh, var(--cz-button-shadow, var(--_czw-sh, 0 1px 4px rgba(0, 0, 0, .12))))); }
.cz-b--compare-button .cz-compare-btn.cz-compare-btn--shape-square { border-radius: var(--cz-button-radius, var(--_czw-r, 0)); }
.cz-b--compare-button .cz-compare-btn.cz-compare-btn--shape-rounded { border-radius: var(--cz-button-radius, var(--_czw-r, 8px)); }
.cz-b--compare-button .cz-compare-btn.cz-compare-btn--shape-circle { border-radius: var(--cz-button-radius, var(--_czw-r, 999px)); }
.cz-compare-btn__icon--img img { display: block; width: 1em; height: 1em; max-width: none; object-fit: contain; }
.cz-compare-btn[aria-pressed="true"] .cz-compare-btn__icon--img::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--czt-accent); }
.cz-b--compare-button a.cz-compare-btn, .cz-b--compare-button a.cz-compare-btn:is(:hover, :focus, :visited) { text-decoration: none; }
.cz-b--compare-button a.cz-compare-btn, .cz-b--compare-button a.cz-compare-btn:visited { color: var(--cz-button-color, var(--czt-text)); }
.cz-b--compare-button a.cz-compare-btn:hover { color: var(--cz-button-color-hover, var(--czt-accent)); }

/* ---- compare-group ---- */
.cz-compare--v2 .cz-compare__table .cz-compare__group > .cz-compare__gname > th { background: var(--cz-name-bg, var(--_cz-g)); color: var(--cz-name-color, var(--_cz-gc)); font-family: var(--cz-name-font-family, var(--_cz-gf)); font-size: var(--cz-name-font-size, var(--_cz-gs)); font-weight: var(--cz-name-font-weight, var(--_cz-gw)); line-height: var(--cz-name-line-height, var(--_cz-gh)); letter-spacing: var(--cz-name-letter-spacing, var(--_cz-gl)); text-transform: var(--cz-name-text-transform, var(--_cz-gt)); font-style: var(--cz-name-font-style, var(--_cz-gi)); text-decoration: var(--cz-name-text-decoration, var(--_cz-gd)); --_cz-rp: var(--cz-name-pad); }
.cz-compare--v2 .cz-compare__table .cz-compare__group > .cz-compare__gname:has(.cz-compare__fold:hover) > th { background: var(--cz-name-bg-hover, var(--_cz-gbh, var(--cz-name-bg, var(--_cz-g)))); color: var(--cz-name-color-hover, var(--_cz-gch, var(--cz-name-color, var(--_cz-gc)))); font-weight: var(--cz-name-font-weight-hover, var(--_cz-gwh, var(--cz-name-font-weight, var(--_cz-gw)))); }

/* ---- compare-head ---- */
.cz-compare--v2 .cz-compare__table thead .cz-compare__item { height: 1px; padding: var(--cz-head-pad, 12px 14px); text-align: var(--cz-head-align, left); text-decoration: var(--cz-head-text-decoration); }
.cz-compare--v2 .cz-compare__cell { position: relative; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; height: 100%; min-width: 0; }
.cz-compare--v2 .cz-compare__cell > * { margin-top: 0; margin-bottom: 0; }

/* ---- compare-remove ---- */
.cz-b.cz-b--compare-remove { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--cz-wrap-align, flex-start); gap: var(--cz-wrap-gap, 12px); margin: var(--cz-wrap-margin, 0); padding: var(--cz-wrap-pad, 0); border: var(--cz-wrap-border-width, 0) var(--cz-wrap-border-style, solid) var(--cz-wrap-border-color, var(--czt-line)); border-radius: var(--cz-wrap-radius, 0); background: var(--cz-wrap-bg, transparent); box-shadow: var(--cz-wrap-shadow, none); font-size: 0.9em; }
.cz-b--compare-remove .cz-compare__remove, .cz-b--compare-remove .cz-compare__change { justify-content: var(--cz-button-align, normal); box-sizing: border-box; width: var(--cz-button-width, auto); margin: var(--cz-button-margin, 0); padding: var(--cz-button-pad, 0); --_czb-bw: var(--cz-button-border-width, 0); border: var(--_czb-bw) var(--cz-button-border-style, solid) var(--cz-button-border-color, transparent); border-radius: var(--cz-button-radius, 0); background: var(--cz-button-bg, none); box-shadow: var(--cz-button-shadow, none); color: var(--cz-button-color, var(--czt-accent)); font-family: var(--cz-button-font-family, inherit); font-size: var(--cz-button-font-size, inherit); font-weight: var(--cz-button-font-weight, inherit); line-height: var(--cz-button-line-height, inherit); letter-spacing: var(--cz-button-letter-spacing, normal); text-transform: var(--cz-button-text-transform, none); font-style: var(--cz-button-font-style, normal); text-decoration: var(--cz-button-text-decoration, underline); white-space: nowrap; cursor: pointer; }
.cz-b--compare-remove .cz-compare__remove:hover, .cz-b--compare-remove .cz-compare__change:hover { border-color: var(--cz-button-border-color-hover, var(--cz-button-border-color, transparent)); background: var(--cz-button-bg-hover, var(--cz-button-bg, none)); color: var(--cz-button-color-hover, var(--cz-button-color, var(--czt-accent))); box-shadow: var(--cz-button-shadow-hover, var(--cz-button-shadow, none)); font-weight: var(--cz-button-font-weight-hover, var(--cz-button-font-weight, inherit)); border-width: var(--cz-button-border-width-hover, var(--_czb-bw)); }
.cz-b--compare-remove .cz-compare__remove:hover:active, .cz-b--compare-remove .cz-compare__change:hover:active { border-color: var(--cz-button-border-color-active, var(--cz-button-border-color-hover, var(--cz-button-border-color, transparent))); background: var(--cz-button-bg-active, var(--cz-button-bg-hover, var(--cz-button-bg, none))); color: var(--cz-button-color-active, var(--cz-button-color-hover, var(--cz-button-color, var(--czt-accent)))); box-shadow: var(--cz-button-shadow-active, var(--cz-button-shadow-hover, var(--cz-button-shadow, none))); font-weight: var(--cz-button-font-weight-active, var(--cz-button-font-weight-hover, var(--cz-button-font-weight, inherit))); border-width: var(--cz-button-border-width-active, var(--cz-button-border-width-hover, var(--_czb-bw))); }
.cz-b--compare-remove .cz-compare__remove:focus-visible, .cz-b--compare-remove .cz-compare__change:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 2px; border-color: var(--cz-button-border-color-focus, var(--cz-button-border-color, transparent)); background: var(--cz-button-bg-focus, var(--cz-button-bg, none)); color: var(--cz-button-color-focus, var(--cz-button-color, var(--czt-accent))); box-shadow: var(--cz-button-shadow-focus, var(--cz-button-shadow, none)); font-weight: var(--cz-button-font-weight-focus, var(--cz-button-font-weight, inherit)); border-width: var(--cz-button-border-width-focus, var(--_czb-bw)); }
.cz-compare-remove--button .cz-compare__remove, .cz-compare-remove--button .cz-compare__change { display: inline-flex; align-items: center; padding: var(--cz-button-pad, 6px 12px); --_czb-bw: var(--cz-button-border-width, 1px); border: var(--_czb-bw) var(--cz-button-border-style, solid) var(--cz-button-border-color, var(--czt-line)); border-radius: var(--cz-button-radius, var(--czt-radius-button)); text-decoration: var(--cz-button-text-decoration, none); }
.cz-compare-remove--icon .cz-compare__remove { display: inline-flex; align-items: center; justify-content: var(--cz-button-align, center); width: var(--cz-button-width, 28px); height: 28px; padding: var(--cz-button-pad, 0); border-radius: var(--cz-button-radius, 50%); background: var(--cz-button-bg, var(--czt-field-bg)); color: var(--cz-button-color, var(--czt-text)); font-size: var(--cz-button-font-size, 18px); line-height: 1; text-decoration: none; }
.cz-compare-remove--bottom { margin-top: auto !important; }
.cz-compare-remove--corner .cz-compare__remove { position: absolute; top: 0; right: 0; z-index: 1; }

/* ---- compare-row ---- */
.cz-compare--v2 .cz-compare__table .cz-compare__row > th[scope="row"] { --_cz-rlb: var(--cz-rlabel-bg, var(--cz-row-bg, var(--_cz-l))); --_cz-rlc: var(--cz-rlabel-color, var(--cz-row-color, var(--_cz-lc))); background: var(--_cz-rlb); color: var(--_cz-rlc); --_cz-rp: var(--cz-rlabel-pad, var(--cz-row-pad)); font-family: var(--cz-rlabel-font-family, var(--cz-row-font-family, var(--_cz-lf))); font-size: var(--cz-rlabel-font-size, var(--cz-row-font-size, var(--_cz-ls))); font-weight: var(--cz-rlabel-font-weight, var(--cz-row-font-weight, var(--_cz-lw))); line-height: var(--cz-rlabel-line-height, var(--cz-row-line-height, var(--_cz-lh))); letter-spacing: var(--cz-rlabel-letter-spacing, var(--cz-row-letter-spacing, var(--_cz-lk))); text-transform: var(--cz-rlabel-text-transform, var(--cz-row-text-transform, var(--_cz-lt))); font-style: var(--cz-rlabel-font-style, var(--cz-row-font-style, var(--_cz-li))); text-decoration: var(--cz-rlabel-text-decoration, var(--cz-row-text-decoration, var(--_cz-ld))); text-align: var(--cz-rlabel-align, var(--_cz-la, left)); }
.cz-compare--v2 .cz-compare__table .cz-compare__row > td { --_cz-rcb: var(--cz-rcell-bg, var(--cz-row-bg, var(--_cz-c))); --_cz-rcc: var(--cz-rcell-color, var(--cz-row-color, var(--_cz-cc))); background: var(--_cz-rcb); color: var(--_cz-rcc); --_cz-rp: var(--cz-rcell-pad, var(--cz-row-pad)); font-family: var(--cz-rcell-font-family, var(--cz-row-font-family, var(--_cz-cf))); font-size: var(--cz-rcell-font-size, var(--cz-row-font-size, var(--_cz-cs))); font-weight: var(--cz-rcell-font-weight, var(--cz-row-font-weight, var(--_cz-cw))); line-height: var(--cz-rcell-line-height, var(--cz-row-line-height, var(--_cz-ch))); letter-spacing: var(--cz-rcell-letter-spacing, var(--cz-row-letter-spacing, var(--_cz-ck))); text-transform: var(--cz-rcell-text-transform, var(--cz-row-text-transform, var(--_cz-ct))); font-style: var(--cz-rcell-font-style, var(--cz-row-font-style, var(--_cz-ci))); text-decoration: var(--cz-rcell-text-decoration, var(--cz-row-text-decoration, var(--_cz-cd))); text-align: var(--cz-rcell-align, var(--_cz-ca, left)); }

/* ---- compare-rows ---- */
.cz-compare--v2 .cz-compare__table .cz-compare__row > th[scope="row"] { --_cz-l: var(--cz-label-bg, var(--czt-field-bg)); --_cz-lc: var(--cz-label-color, var(--czt-muted)); --_cz-lw: var(--cz-label-font-weight, 500); --_cz-la: var(--cz-label-align); --_cz-lf: var(--cz-label-font-family); --_cz-ls: var(--cz-label-font-size, 0.92em); --_cz-lh: var(--cz-label-line-height); --_cz-lk: var(--cz-label-letter-spacing); --_cz-lt: var(--cz-label-text-transform); --_cz-li: var(--cz-label-font-style); --_cz-ld: var(--cz-label-text-decoration); }
.cz-compare--v2 .cz-compare__table .cz-compare__row > td { --_cz-c: var(--cz-cell-bg, transparent); --_cz-cc: var(--cz-cell-color, var(--czt-text)); --_cz-cw: var(--cz-cell-font-weight, inherit); --_cz-ca: var(--cz-cell-align); --_cz-cf: var(--cz-cell-font-family); --_cz-cs: var(--cz-cell-font-size); --_cz-ch: var(--cz-cell-line-height); --_cz-ck: var(--cz-cell-letter-spacing); --_cz-ct: var(--cz-cell-text-transform); --_cz-ci: var(--cz-cell-font-style); --_cz-cd: var(--cz-cell-text-decoration); }
.cz-compare--v2 .cz-compare__table .cz-compare__row.is-alt > th[scope="row"], .cz-compare--v2 .cz-compare__table .cz-compare__row.is-alt > td { --_cz-l: var(--cz-alt-bg, color-mix(in srgb, var(--czt-text) 5%, var(--czt-surface))); --_cz-c: var(--cz-alt-bg, color-mix(in srgb, var(--czt-text) 5%, var(--czt-surface))); }
.cz-compare--v2 .cz-compare__table .cz-compare__row.is-diff > th[scope="row"], .cz-compare--v2 .cz-compare__table .cz-compare__row.is-diff > td { --_cz-l: var(--cz-diff-bg, color-mix(in srgb, var(--czt-accent) 8%, var(--czt-surface))); --_cz-c: var(--cz-diff-bg, color-mix(in srgb, var(--czt-accent) 8%, var(--czt-surface))); --_cz-lc: var(--cz-diff-color, var(--cz-label-color, var(--czt-muted))); --_cz-cc: var(--cz-diff-color, var(--cz-cell-color, var(--czt-text))); --_cz-lw: var(--cz-diff-font-weight, var(--cz-label-font-weight, 500)); --_cz-cw: var(--cz-diff-font-weight, var(--cz-cell-font-weight, inherit)); --_cz-lf: var(--cz-diff-font-family, var(--cz-label-font-family)); --_cz-cf: var(--cz-diff-font-family, var(--cz-cell-font-family)); --_cz-ls: var(--cz-diff-font-size, var(--cz-label-font-size, 0.92em)); --_cz-cs: var(--cz-diff-font-size, var(--cz-cell-font-size)); --_cz-lh: var(--cz-diff-line-height, var(--cz-label-line-height)); --_cz-ch: var(--cz-diff-line-height, var(--cz-cell-line-height)); --_cz-lk: var(--cz-diff-letter-spacing, var(--cz-label-letter-spacing)); --_cz-ck: var(--cz-diff-letter-spacing, var(--cz-cell-letter-spacing)); --_cz-lt: var(--cz-diff-text-transform, var(--cz-label-text-transform)); --_cz-ct: var(--cz-diff-text-transform, var(--cz-cell-text-transform)); --_cz-li: var(--cz-diff-font-style, var(--cz-label-font-style)); --_cz-ci: var(--cz-diff-font-style, var(--cz-cell-font-style)); --_cz-ld: var(--cz-diff-text-decoration, var(--cz-label-text-decoration)); --_cz-cd: var(--cz-diff-text-decoration, var(--cz-cell-text-decoration)); }
.cz-compare--v2 .cz-compare__table th, .cz-compare--v2 .cz-compare__table td { border-bottom: var(--cz-line-border-width, 1px) var(--cz-line-border-style, solid) var(--cz-line-border-color, var(--czt-line)); }
.cz-compare--v2 .cz-compare__gname > th { --_cz-g: var(--cz-group-bg, var(--czt-surface)); --_cz-gc: var(--cz-group-color, var(--czt-text)); --_cz-gs: var(--cz-group-font-size, 1em); --_cz-gw: var(--cz-group-font-weight, 600); --_cz-gf: var(--cz-group-font-family, inherit); --_cz-gt: var(--cz-group-text-transform, none); --_cz-gl: var(--cz-group-letter-spacing, normal); --_cz-gh: var(--cz-group-line-height, inherit); --_cz-gi: var(--cz-group-font-style, normal); --_cz-gd: var(--cz-group-text-decoration, none); --_cz-gbh: var(--cz-group-bg-hover); --_cz-gch: var(--cz-group-color-hover); --_cz-gwh: var(--cz-group-font-weight-hover); }
.cz-compare__fold, .cz-compare__gname .cz-compare__fold:is(:hover, :focus, :active) { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.cz-compare--v2 .cz-compare__table.cz-compare--row-hover .cz-compare__row:hover > th[scope="row"] { background: var(--cz-hover-bg, var(--_cz-rlb)); color: var(--cz-hover-color, var(--_cz-rlc)); }
.cz-compare--v2 .cz-compare__table.cz-compare--row-hover .cz-compare__row:hover > td { background: var(--cz-hover-bg, var(--_cz-rcb)); color: var(--cz-hover-color, var(--_cz-rcc)); }
.cz-compare__fold:focus-visible, .cz-compare__gname .cz-compare__fold:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 2px; }
.cz-compare__chev { width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.cz-compare__group.is-folded .cz-compare__chev { transform: rotate(-45deg); }
.cz-compare__group.is-folded .cz-compare__row { display: none; }

/* ---- compare-tools ---- */
.cz-b.cz-b--compare-tools { display: flex; justify-content: var(--cz-wrap-align, flex-end); margin: var(--cz-wrap-margin, 0 0 12px); padding: var(--cz-wrap-pad, 0); border: var(--cz-wrap-border-width, 0) var(--cz-wrap-border-style, solid) var(--cz-wrap-border-color, var(--czt-line)); border-radius: var(--cz-wrap-radius, 0); background: var(--cz-wrap-bg, transparent); box-shadow: var(--cz-wrap-shadow, none); }
.cz-compare__scroll ~ .cz-b.cz-b--compare-tools { margin: var(--cz-wrap-margin, 12px 0 0); }
.cz-b--compare-tools .cz-compare__diff { justify-content: var(--cz-button-align, normal); box-sizing: border-box; width: var(--cz-button-width, auto); margin: var(--cz-button-margin, 0); padding: var(--cz-button-pad, 0); --_czb-bw: var(--cz-button-border-width, 0); border: var(--_czb-bw) var(--cz-button-border-style, solid) var(--cz-button-border-color, transparent); border-radius: var(--cz-button-radius, 0); background: var(--cz-button-bg, transparent); box-shadow: var(--cz-button-shadow, none); color: var(--cz-button-color, var(--czt-text)); font-family: var(--cz-button-font-family, inherit); font-size: var(--cz-button-font-size, 0.95em); font-weight: var(--cz-button-font-weight, inherit); line-height: var(--cz-button-line-height, inherit); letter-spacing: var(--cz-button-letter-spacing, normal); text-transform: var(--cz-button-text-transform, none); font-style: var(--cz-button-font-style, normal); text-decoration: var(--cz-button-text-decoration, none); }
.cz-b--compare-tools .cz-compare__diff:hover { border-color: var(--cz-button-border-color-hover, var(--cz-button-border-color, transparent)); background: var(--cz-button-bg-hover, var(--cz-button-bg, transparent)); color: var(--cz-button-color-hover, var(--cz-button-color, var(--czt-text))); box-shadow: var(--cz-button-shadow-hover, var(--cz-button-shadow, none)); font-weight: var(--cz-button-font-weight-hover, var(--cz-button-font-weight, inherit)); border-width: var(--cz-button-border-width-hover, var(--_czb-bw)); }
.cz-b--compare-tools .cz-compare__diff:focus-visible { border-color: var(--cz-button-border-color-focus, var(--cz-button-border-color, transparent)); background: var(--cz-button-bg-focus, var(--cz-button-bg, transparent)); color: var(--cz-button-color-focus, var(--cz-button-color, var(--czt-text))); box-shadow: var(--cz-button-shadow-focus, var(--cz-button-shadow, none)); font-weight: var(--cz-button-font-weight-focus, var(--cz-button-font-weight, inherit)); border-width: var(--cz-button-border-width-focus, var(--_czb-bw)); }
.cz-b--compare-tools .cz-compare__diff[aria-checked="true"] { border-color: var(--cz-button-border-color-active, var(--cz-button-border-color, transparent)); background: var(--cz-button-bg-active, var(--cz-button-bg, transparent)); color: var(--cz-button-color-active, var(--cz-button-color, var(--czt-text))); box-shadow: var(--cz-button-shadow-active, var(--cz-button-shadow, none)); font-weight: var(--cz-button-font-weight-active, var(--cz-button-font-weight, inherit)); border-width: var(--cz-button-border-width-active, var(--_czb-bw)); }
.cz-compare__check { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin: var(--cz-check-margin, 0); padding: var(--cz-check-pad, 0); border: var(--cz-check-border-width, 1.5px) var(--cz-check-border-style, solid) var(--cz-check-border-color, currentColor); border-radius: var(--cz-check-radius, 4px); background: var(--czt-set-surface, #fff); box-shadow: var(--cz-check-shadow, none); }
.cz-compare__diff[aria-checked="true"] .cz-compare__check { border-color: var(--cz-check-bg, var(--czt-accent)); background: var(--cz-check-bg, var(--czt-accent)); }
.cz-compare__diff[aria-checked="true"] .cz-compare__check::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid var(--czt-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---- compare ---- */
.cz-b.cz-b--compare { display: block; box-sizing: border-box; min-width: 0; margin: var(--cz-wrap-margin, 0); padding: var(--cz-wrap-pad, 0); border: var(--cz-wrap-border-width, 0) var(--cz-wrap-border-style, solid) var(--cz-wrap-border-color, var(--czt-line)); border-radius: var(--cz-wrap-radius, 0); background: var(--cz-wrap-bg, transparent); box-shadow: var(--cz-wrap-shadow, none); color: var(--czt-text); font-family: var(--czt-font); }
.cz-compare__tools { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.cz-compare__diff { display: inline-flex; align-items: center; gap: 8px; color: var(--cz-button-color, var(--czt-text)); text-decoration: none; font-size: var(--cz-button-font-size, .95em); cursor: pointer; }
.cz-compare__switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--czt-line); transition: background .15s; flex: none; }
.cz-compare__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--czt-surface); transition: transform .15s; }
.cz-compare__diff[aria-checked="true"] .cz-compare__switch { background: var(--czt-accent); }
.cz-compare__diff[aria-checked="true"] .cz-compare__switch::after { transform: translateX(16px); }
.cz-compare__diff:focus-visible, .cz-compare__scroll:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 2px; }
.cz-compare__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; border: 1px solid var(--czt-line); border-radius: var(--czt-radius-card); background: var(--czt-surface); }
.cz-compare__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0; }
.cz-compare__table th, .cz-compare__table td { padding: var(--_cz-rp, var(--_cz-cp, 12px 14px)); border: 0; border-bottom: 1px solid var(--czt-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cz-compare__table thead th, .cz-compare__table thead td { --_cz-cp: var(--cz-head-pad); background: var(--cz-head-bg, var(--czt-surface)); color: var(--cz-head-color, var(--czt-text)); font-size: var(--cz-head-font-size, inherit); font-weight: var(--cz-head-font-weight, var(--czt-font-weight)); }
.cz-compare__table tbody th[scope="row"] { --_cz-cp: var(--cz-label-pad); width: 22%; background: var(--cz-label-bg, var(--czt-field-bg)); color: var(--cz-label-color, var(--czt-muted)); font-size: var(--cz-label-font-size, .92em); font-weight: var(--cz-label-font-weight, 500); }
.cz-compare__table tbody td { --_cz-cp: var(--cz-cell-pad); color: var(--cz-cell-color, var(--czt-text)); font-size: var(--cz-cell-font-size, inherit); font-weight: var(--cz-cell-font-weight); }
:where(.cz-compare__table tbody td) { background-image: var(--cz-cell-text-gradient); -webkit-background-clip: var(--cz-cell-text-clip); background-clip: var(--cz-cell-text-clip); text-shadow: var(--cz-cell-text-shadow); -webkit-text-fill-color: var(--cz-cell-text-ink); }
.cz-compare__table thead th { font-family: var(--cz-head-font-family); line-height: var(--cz-head-line-height); letter-spacing: var(--cz-head-letter-spacing); text-transform: var(--cz-head-text-transform); font-style: var(--cz-head-font-style); text-decoration: var(--cz-head-text-decoration); }
.cz-compare__table tbody th[scope="row"] { font-family: var(--cz-label-font-family); line-height: var(--cz-label-line-height); letter-spacing: var(--cz-label-letter-spacing); text-transform: var(--cz-label-text-transform); font-style: var(--cz-label-font-style); text-decoration: var(--cz-label-text-decoration); }
.cz-compare__table tbody td { font-family: var(--cz-cell-font-family); line-height: var(--cz-cell-line-height); letter-spacing: var(--cz-cell-letter-spacing); text-transform: var(--cz-cell-text-transform); font-style: var(--cz-cell-font-style); text-decoration: var(--cz-cell-text-decoration); }
.cz-compare__icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .4em 0 0; vertical-align: -.2em; flex: none; }
.cz-compare__row--image td { vertical-align: middle; }
.cz-compare__row--image .cz-compare__img { margin: 0; }
.cz-compare__row.is-diff td, .cz-compare__row.is-diff th[scope="row"] { background: var(--cz-diff-bg, color-mix(in srgb, var(--czt-accent) 8%, var(--czt-surface))); color: var(--cz-diff-color, inherit); }
:where(.cz-compare__row.is-diff td, .cz-compare__row.is-diff th[scope="row"]) { -webkit-text-fill-color: currentColor; }
.cz-compare__row.is-diff th[scope="row"] { --_cz-cp: var(--cz-diff-pad, var(--cz-label-pad)); font-family: var(--cz-diff-font-family, var(--cz-label-font-family)); font-size: var(--cz-diff-font-size, var(--cz-label-font-size, .92em)); font-weight: var(--cz-diff-font-weight, var(--cz-label-font-weight, 500)); line-height: var(--cz-diff-line-height, var(--cz-label-line-height)); letter-spacing: var(--cz-diff-letter-spacing, var(--cz-label-letter-spacing)); text-transform: var(--cz-diff-text-transform, var(--cz-label-text-transform)); font-style: var(--cz-diff-font-style, var(--cz-label-font-style)); text-decoration: var(--cz-diff-text-decoration, var(--cz-label-text-decoration)); }
.cz-compare__row.is-diff td { --_cz-cp: var(--cz-diff-pad, var(--cz-cell-pad)); font-family: var(--cz-diff-font-family, var(--cz-cell-font-family)); font-size: var(--cz-diff-font-size, var(--cz-cell-font-size, inherit)); font-weight: var(--cz-diff-font-weight, var(--cz-cell-font-weight)); line-height: var(--cz-diff-line-height, var(--cz-cell-line-height)); letter-spacing: var(--cz-diff-letter-spacing, var(--cz-cell-letter-spacing)); text-transform: var(--cz-diff-text-transform, var(--cz-cell-text-transform)); font-style: var(--cz-diff-font-style, var(--cz-cell-font-style)); text-decoration: var(--cz-diff-text-decoration, var(--cz-cell-text-decoration)); }
:where(.cz-compare__table tbody td .cz-badge) { -webkit-text-fill-color: currentColor; }
.cz-compare__gname th { --_cz-cp: var(--cz-group-pad); background: var(--cz-group-bg, var(--czt-surface)); color: var(--cz-group-color, var(--czt-text)); font-family: var(--cz-group-font-family); font-weight: var(--cz-group-font-weight, 600); font-size: var(--cz-group-font-size, 1em); line-height: var(--cz-group-line-height); letter-spacing: var(--cz-group-letter-spacing); text-transform: var(--cz-group-text-transform); font-style: var(--cz-group-font-style); text-decoration: var(--cz-group-text-decoration); padding: var(--_cz-rp, var(--_cz-cp, 18px 14px 12px)); }
.cz-compare--only-diff .cz-compare__row:not(.is-diff), .cz-compare--only-diff .cz-compare__group:not(.is-diff) { display: none; }
.cz-compare__media img, .cz-compare__img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--czt-radius-field); margin: 0 0 8px; }
.cz-compare__title { font-weight: 600; margin: 0 0 8px; }
.cz-compare__title a { color: inherit; text-decoration: none; }
.cz-compare__title a:hover { text-decoration: underline; }
.cz-compare__actions { display: flex; gap: 12px; font-size: .9em; }
.cz-compare__remove, .cz-compare__change, .cz-compare__add { appearance: none; width: var(--cz-button-width, auto); background: var(--cz-button-bg, none); --_czb-bw: var(--cz-button-border-width, 0); border: var(--_czb-bw) var(--cz-button-border-style, solid) var(--cz-button-border-color, transparent); border-radius: var(--cz-button-radius, 0); padding: var(--cz-button-pad, 0); margin: var(--cz-button-margin, 0); box-shadow: var(--cz-button-shadow, none); font: inherit; font-family: var(--cz-button-font-family, inherit); font-weight: var(--cz-button-font-weight, inherit); line-height: var(--cz-button-line-height, inherit); letter-spacing: var(--cz-button-letter-spacing, inherit); text-transform: var(--cz-button-text-transform, inherit); font-style: var(--cz-button-font-style, inherit); text-align: var(--cz-button-align, inherit); color: var(--cz-button-color, var(--czt-accent)); text-decoration: var(--cz-button-text-decoration, underline); cursor: pointer; }
.cz-compare__change { letter-spacing: var(--cz-button-letter-spacing, normal); text-transform: var(--cz-button-text-transform, none); text-align: var(--cz-button-align, center); }
.cz-compare__remove:hover, .cz-compare__change:hover, .cz-compare__add:hover { background: var(--cz-button-bg-hover, var(--cz-button-bg, none)); border-color: var(--cz-button-border-color-hover, var(--cz-button-border-color, transparent)); color: var(--cz-button-color-hover, var(--czt-accent)); box-shadow: var(--cz-button-shadow-hover, var(--cz-button-shadow, none)); border-width: var(--cz-button-border-width-hover, var(--_czb-bw)); font-weight: var(--cz-button-font-weight-hover, var(--cz-button-font-weight, inherit)); }
:is(.cz-compare__remove, .cz-compare__change, .cz-compare__add):hover:active { background: var(--cz-button-bg-active, var(--cz-button-bg-hover, var(--cz-button-bg, none))); border-color: var(--cz-button-border-color-active, var(--cz-button-border-color-hover, var(--cz-button-border-color, transparent))); color: var(--cz-button-color-active, var(--cz-button-color-hover, var(--czt-accent))); box-shadow: var(--cz-button-shadow-active, var(--cz-button-shadow-hover, var(--cz-button-shadow, none))); border-width: var(--cz-button-border-width-active, var(--cz-button-border-width-hover, var(--_czb-bw))); font-weight: var(--cz-button-font-weight-active, var(--cz-button-font-weight-hover, var(--cz-button-font-weight, inherit))); }
:is(.cz-compare__remove, .cz-compare__change, .cz-compare__add):focus-visible:not(:hover) { background: var(--cz-button-bg-focus, var(--cz-button-bg, none)); border-color: var(--cz-button-border-color-focus, var(--cz-button-border-color, transparent)); color: var(--cz-button-color-focus, var(--cz-button-color, var(--czt-accent))); box-shadow: var(--cz-button-shadow-focus, var(--cz-button-shadow, none)); border-width: var(--cz-button-border-width-focus, var(--_czb-bw)); font-weight: var(--cz-button-font-weight-focus, var(--cz-button-font-weight, inherit)); }
.cz-compare__slot { vertical-align: middle !important; text-align: center !important; }
.cz-compare__slot .cz-compare__add { display: inline-block; padding: var(--cz-button-pad, 10px 14px); --_czb-bw: var(--cz-button-border-width, 1px); border: var(--_czb-bw) var(--cz-button-border-style, dashed) var(--cz-button-border-color, var(--czt-line)); border-radius: var(--cz-button-radius, var(--czt-radius-button)); background: var(--cz-button-bg, transparent); text-decoration: var(--cz-button-text-decoration, none); }
.cz-compare__none { color: var(--czt-muted); }
.cz-compare__empty { margin: 0 0 8px; color: var(--czt-muted); }
.cz-compare-pick { position: absolute; z-index: 60; box-sizing: border-box; width: 360px; max-width: calc(100vw - 16px); padding: 8px; border: 1px solid var(--czt-line); border-radius: var(--czt-radius-card, 12px); background: var(--czt-set-surface, var(--global-palette9, #fff)); color: var(--czt-text); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); text-align: left; font-weight: 400; }
.cz-compare-pick__bar { display: flex; gap: 6px; align-items: center; }
.cz-compare-pick__q { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--czt-line); border-radius: var(--czt-radius-field); background: var(--czt-field-bg); color: var(--czt-text); font: inherit; }
.cz-compare-pick__q:focus { outline: 2px solid var(--czt-focus); outline-offset: 1px; }
.cz-compare-pick__close { appearance: none; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--czt-muted); font: inherit; font-size: 1.4em; line-height: 1; cursor: pointer; }
.cz-compare-pick__close:hover { background: var(--czt-field-bg); color: var(--czt-text); }
.cz-compare-pick__close:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: 1px; }
.cz-compare-pick__list { list-style: none; margin: 6px 0 0; padding: 0; max-height: min(320px, 50vh); overflow: auto; overscroll-behavior: contain; }
.cz-compare-pick__list:empty { display: none; }
.cz-compare-pick__list li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-weight: 400; }
.cz-compare-pick__list li[role="option"]:hover, .cz-compare-pick__list li[role="option"]:focus { background: var(--czt-field-bg); outline: none; }
.cz-compare-pick__list li[role="option"]:focus-visible { outline: 2px solid var(--czt-focus); outline-offset: -2px; }
.cz-compare-pick__list img { flex: none; width: 40px; height: 40px; max-width: none; object-fit: contain; border-radius: 4px; }
.cz-compare-pick__group { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px !important; background: var(--czt-set-surface, var(--global-palette9, #fff)); color: var(--czt-muted); font-size: .82em; font-weight: 600 !important; cursor: default !important; }
.cz-compare-pick__none { color: var(--czt-muted); cursor: default !important; }
@media (max-width: 600px) { .cz-compare__scroll { container-type: inline-size; scroll-padding-left: 30%; }
.cz-compare__table { table-layout: auto; width: auto; min-width: 100%; }
.cz-compare__table tbody th[scope="row"], .cz-compare__corner { position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 28vw; min-width: 28vw; max-width: 28vw; }
.cz-compare__item, .cz-compare__table tbody td, .cz-compare__slot { box-sizing: border-box; width: calc((100vw - 64px - 28vw) / 2); min-width: calc((100vw - 64px - 28vw) / 2); max-width: calc((100vw - 64px - 28vw) / 2); scroll-snap-align: start; }
@supports (width: 1cqi) { .cz-compare__table tbody th[scope="row"], .cz-compare__corner { width: 30cqi; min-width: 30cqi; max-width: 30cqi; }
.cz-compare__item, .cz-compare__table tbody td, .cz-compare__slot { width: 35cqi; min-width: 35cqi; max-width: 35cqi; }
}
.cz-compare__corner { background: var(--cz-head-bg, var(--czt-surface)); }
.cz-compare__table th, .cz-compare__table td { padding: var(--_cz-rp, var(--_cz-cp, 10px)); }
.cz-compare__gname th { position: sticky; left: 0; }
}
.cz-compare .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 601px) { .cz-compare--v2.cz-compare--sticky .cz-compare__scroll { overflow: visible; }
.cz-compare--v2.cz-compare--sticky .cz-compare__table thead th, .cz-compare--v2.cz-compare--sticky .cz-compare__table thead td { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 2; box-shadow: 0 1px 0 var(--czt-line); }
}
.cz-compare--v2.cz-compare--cards .cz-compare__scroll { border: 0; border-radius: 0; background: transparent; }
.cz-compare--v2.cz-compare--cards .cz-compare__table { border-spacing: 12px 0; }
.cz-compare--v2.cz-compare--cards .cz-compare__table thead .cz-compare__item, .cz-compare--v2.cz-compare--cards .cz-compare__table thead .cz-compare__slot { border: 1px solid var(--czt-line); border-bottom: 0; border-radius: var(--czt-radius-card) var(--czt-radius-card) 0 0; }
.cz-compare--v2.cz-compare--cards .cz-compare__table tbody td { border-right: 1px solid var(--czt-line); border-left: 1px solid var(--czt-line); }
.cz-compare--v2.cz-compare--cards .cz-compare__table tbody:last-child tr:last-child td { border-radius: 0 0 var(--czt-radius-card) var(--czt-radius-card); }
.cz-compare--v2.cz-compare--cards .cz-compare__corner { background: transparent; }
.cz-compare--v2.cz-compare--cards .cz-compare__table tbody th[scope="row"] { --_cz-l: transparent; }
.cz-cmp-start { padding: 20px; border: 1px solid var(--czt-line); border-radius: 8px; background: var(--czt-surface); }
.cz-cmp-start__head { display: grid; gap: 4px; margin: 0 0 14px; }
.cz-cmp-start__head span { color: var(--czt-muted); font-size: 13px; }
.cz-cmp-start .components-base-control { max-width: 320px; margin: 0 0 14px; }
.cz-cmp-start__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cz-cmp-start__card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--czt-line); border-radius: 8px; background: var(--czt-surface); color: var(--czt-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cz-cmp-start__card span { color: var(--czt-muted); font-size: 12px; line-height: 1.5; }
.cz-cmp-start__card:hover:not(:disabled), .cz-cmp-start__card:focus-visible { border-color: var(--czt-accent); box-shadow: 0 0 0 1px var(--czt-accent); outline: 0; }
.cz-cmp-start__card:disabled { opacity: .5; cursor: not-allowed; }
.cz-cmp-sketch { display: block; color: var(--czt-text); }
.cz-cmp-ed { display: block; }
.cz-cmp-ed .cz-cmp-ed-head, .cz-cmp-ed .cz-cmp-ed-rows { border: 1px solid var(--czt-line); background: var(--czt-surface); }
.cz-cmp-ed .cz-cmp-ed-head { border-bottom: 0; border-radius: var(--czt-radius-card) var(--czt-radius-card) 0 0; }
.cz-cmp-ed .cz-cmp-ed-rows { border-top: 0; border-radius: 0 0 var(--czt-radius-card) var(--czt-radius-card); }
.cz-cmp-ed .cz-compare__table { margin: 0; }
.cz-cmp-ed-preview { cursor: pointer; }
.cz-cmp-ed-hidden { opacity: .45; font-style: italic; }
.cz-cmp-ed-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px dashed var(--czt-line); }
.cz-cmp-ed-add .components-base-control { min-width: 220px; margin: 0; }
.cz-cmp-ed-add__all { color: var(--czt-muted); font-size: 13px; }
.cz-cmp-missing { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cz-cmp-convert { margin: 0 0 12px; }
.cz-compare-pick ul.cz-compare-pick__list { margin: 6px 0 0; padding: 0; }
.cz-compare-pick ul.cz-compare-pick__list > li { margin: 0; }