/* Product comparison. Colours come from theme presets with neutral fallbacks. */
.groods-compare-toggle { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-size: .9375rem; cursor: pointer; position: relative; z-index: 2; }
.groods-compare-toggle__box { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 6px; display: grid; place-items: center; flex: none; }
.groods-compare-toggle[aria-pressed="true"] .groods-compare-toggle__box { background: var(--wp--preset--color--yellow, #ffd500); }
.groods-compare-toggle[aria-pressed="true"] .groods-compare-toggle__box::after { content: ""; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 3px 3px; transform: translateY(-1px) rotate(-45deg); }

.groods-compare__tray { position: fixed; inset: auto 0 0 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, calc((100vw - 1280px) / 2)); background: var(--wp--preset--color--body, #14213d); color: #fff; }
.groods-compare__tray[hidden] { display: none; }
.groods-compare__thumbs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.groods-compare__thumbs img { width: 44px; height: 44px; border-radius: 8px; background: #fff; object-fit: cover; }
.groods-compare__slot { width: 44px; height: 44px; border-radius: 8px; border: 2px dashed rgb(255 255 255 / .4); flex: none; }
.groods-compare__clear { background: none; border: 0; color: inherit; text-decoration: underline; min-height: 44px; cursor: pointer; font: inherit; }
.groods-compare__open.wp-element-button { background: var(--wp--preset--color--yellow, #ffd500); color: var(--wp--preset--color--body, #14213d); white-space: nowrap; }
.groods-compare__open:disabled { opacity: .7; cursor: default; }
body.has-groods-compare { padding-bottom: 72px; }

.groods-compare__dialog { width: min(1040px, 100vw - 16px); max-height: 88vh; padding: 0 16px 16px; border: 0; border-radius: 20px; }
.groods-compare__dialog::backdrop { background: rgb(20 33 61 / .55); }
.groods-compare__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 0; background: #fff; }
.groods-compare__head h2 { margin: 0; flex: 1; }
.groods-compare__only { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.groods-compare__close { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; cursor: pointer; }
.groods-compare__scroll { overflow-x: auto; }
.groods-compare__body table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.groods-compare__body th, .groods-compare__body td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid #dde3ec; min-width: 132px; }
.groods-compare__body thead img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 6px; }
.groods-compare__body thead a { font-weight: 700; display: block; }
.groods-compare__body tbody th { position: sticky; left: 0; background: #fff; font-weight: 700; min-width: 96px; }
.groods-compare__body tr.is-diff td { background: #fff9d6; }
.groods-compare__body tr.is-diff th { box-shadow: inset 4px 0 0 var(--wp--preset--color--yellow, #ffd500); }
.groods-compare__rm { display: block; margin-top: 4px; padding: 0; background: none; border: 0; text-decoration: underline; cursor: pointer; font: inherit; font-size: .875rem; min-height: 32px; }
.groods-compare__note { font-size: .875rem; opacity: .75; }
@media (max-width: 600px) {
	.groods-compare__dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
	.groods-compare__body thead img { width: 64px; height: 64px; }
	.groods-compare__body th, .groods-compare__body td { min-width: 120px; font-size: .875rem; }
}