/* Scoped Kidsmed comparison styles. No theme resets or external assets. */
:root { --kmc-tray-inset: 0px; --kmc-bottom-offset: 0px; }
body.kmc-has-selection { padding-bottom: calc(var(--kmc-original-body-padding, 0px) + var(--kmc-tray-inset) + 1rem); }
.kmc-button, .kmc-link, .kmc-dialog select { font: inherit; }
.kmc-button, .kmc-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    border: 1px solid #b8d5da; border-radius: 9px; padding: 9px 15px;
    background: #fff; color: #0d667a; font-size: 14px; line-height: 1.4;
    text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.kmc-button:hover, .kmc-link:hover { background: #edf7f9; }
.kmc-button[aria-pressed="true"], .kmc-primary { background: #127d94; border-color: #127d94; color: #fff; }
.kmc-button:disabled { opacity: .55; cursor: default; }
.kmc-button:focus-visible, .kmc-link:focus-visible, .kmc-dialog select:focus-visible, .kmc-table-scroll:focus-visible { outline: 3px solid #286f91; outline-offset: 3px; }
.kmc-button[hidden], .kmc-tray[hidden], .kmc-dialog:not([open]) { display: none !important; }
[data-kmc-root], .kmc-dialog { font-family: inherit; font-size: 16px; line-height: 1.5; color: #203238; }
[data-kmc-root] *, .kmc-dialog * { box-sizing: border-box; }
.kmc-tray {
    position: fixed; inset-inline: 0; bottom: var(--kmc-bottom-offset); z-index: 990;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: #fff;
    border-top: 1px solid #dce8ea; box-shadow: 0 -3px 18px #20323816;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    max-height: 45vh; overflow-y: auto;
}
.kmc-chips { display: flex; flex: 1; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; min-width: 0; }
.kmc-chips li { margin: 0; padding: 0; max-width: 100%; }
.kmc-chips .kmc-button { text-align: start; overflow-wrap: anywhere; }
.kmc-actions { display: flex; gap: 8px; }
.kmc-notice:not(:empty) {
    position: fixed; bottom: calc(var(--kmc-tray-inset) + 12px); inset-inline: 16px; z-index: 991;
    width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto;
    border: 1px solid #9cbfc6; border-radius: 10px; background: #edf7f9; color: #203238; padding: 12px 18px;
}
.kmc-dialog {
    width: min(1200px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px); margin: auto; padding: 0;
    border: 1px solid #dce8ea; border-radius: 18px; background: #fff; overflow: auto;
}
.kmc-dialog::backdrop { background: #173d4670; }
.kmc-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; background: white; border-bottom: 1px solid #dce8ea; }
.kmc-dialog h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0; }
.kmc-dialog h3 { font-size: 18px; line-height: 1.3; margin: 12px 0; }
.kmc-dialog h4 { font-size: 16px; margin: 0 0 12px; }
.kmc-dialog p { margin: 8px 0 14px; }
.kmc-dialog-body { padding: 20px; }
.kmc-dialog-status:not(:empty) { margin: 16px 20px 0; padding: 12px; border-radius: 8px; background: #edf7f9; }
.kmc-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin: 20px 0; }
.kmc-choice { border: 1px solid #dce8ea; border-radius: 12px; background: #f7fafb; padding: 16px; }
.kmc-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin: 0 0 16px; }
.kmc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; margin: 0; }
.kmc-table caption { text-align: start; font-weight: 600; font-size: 17px; padding: 0 0 14px; }
.kmc-table th, .kmc-table td { min-width: 200px; width: 220px; padding: 16px; text-align: start; vertical-align: top; border-bottom: 1px solid #dce8ea; overflow-wrap: anywhere; }
.kmc-table tr > :first-child { width: 180px; min-width: 180px; background: #f7fafb; }
.kmc-table thead th { background: #edf7f9; }
.kmc-table img { width: 112px; height: 112px; object-fit: contain; display: block; margin: 0 auto 12px; }
.kmc-table td + td, .kmc-table th + th { border-left: 1px solid #e6edef; }
.kmc-offer-label { display: block; font-weight: 500; }
.kmc-dialog select { width: 100%; min-height: 44px; display: block; margin: 6px 0 12px; border: 1px solid #9abac2; border-radius: 6px; color: #203238; background: #fff; padding: 8px; }
.kmc-price { font-size: 20px; margin: 12px 0; font-weight: 600; }
.kmc-price del { color: #66767a; font-size: 14px; margin-inline-end: 5px; }
.kmc-price ins { text-decoration: none; }
.kmc-hint { font-size: 13px; color: #53666b; }
@media (max-width: 600px) {
    .kmc-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
    .kmc-dialog-head { padding: 12px; }
    .kmc-dialog-body { padding: 12px; }
    .kmc-dialog-status:not(:empty) { margin: 12px 12px 0; }
    .kmc-tray { gap: 8px; padding-top: 8px; }
    .kmc-tray > [data-kmc-summary] { font-size: 13px; }
    .kmc-chips { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .kmc-chips li { flex: 0 0 200px; }
    .kmc-chips .kmc-button { width: 100%; font-size: 12px; }
    .kmc-actions { margin-inline-start: auto; }
    .kmc-table th, .kmc-table td { padding: 12px; width: 200px; }
    .kmc-table tr > :first-child { width: 140px; min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .kmc-dialog *, [data-kmc-root] * { scroll-behavior: auto; transition: none; } }
/* Preserve Woo's accessible sale-price prose without making it visible. */
.kmc-price .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; white-space: nowrap; }

/* Native catalog hook is outside the product link and overlays its image corner. */
.woocommerce ul.products li.product:has(> .kmc-catalog-compare) { position: relative; }
.kmc-catalog-compare { position: absolute; top: 12px; right: 12px; z-index: 5; max-width: calc(100% - 24px); }
.kmc-catalog-compare .kmc-button { min-height: 44px; padding: 8px 10px; font-size: 12px; background: #fffffff2; }
.kmc-catalog-compare .kmc-button[aria-pressed="true"] { background: #127d94; color: #fff; }
.kmc-table [data-kmc-add], .kmc-table [data-kmc-unavailable] { display: flex; width: 100%; margin: 10px 0; min-height: 44px; }
.kmc-table [data-kmc-add].loading { opacity: .6; cursor: wait; }
.kmc-table .kmc-link { margin-top: 2px; }
@media (max-width: 478px) { .kmc-catalog-compare { top: 8px; right: 8px; max-width: calc(100% - 16px); } .kmc-catalog-compare .kmc-button { padding: 7px 8px; font-size: 11px; } }