/* Breast pump comparison tool. Uses the theme's global color/type tokens
   (--wp--preset--*, --wp--custom--*) so it matches the site palette. */
.tbfs-pc, .tbfs-pc *, .tbfs-pc *::before, .tbfs-pc *::after { box-sizing: border-box; }

.tbfs-pc-toolbar { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--wp--custom--color--border-warm, #efe6dd); }
.tbfs-pc-facets { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.tbfs-pc-facet { border: 0; padding: 0; margin: 0; }
.tbfs-pc-facet legend { padding: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted, #8a7c73); margin-bottom: .45rem; }
.tbfs-pc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tbfs-pc-chip { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--wp--custom--color--border-warm, #efe6dd); background: var(--wp--preset--color--cream, #fdf7f1); color: var(--wp--preset--color--contrast, #3a2f2a); transition: background .15s, border-color .15s, color .15s; }
.tbfs-pc-chip:hover { border-color: var(--wp--preset--color--teal, #2f8f8a); }
.tbfs-pc-chip[aria-pressed="true"] { background: var(--wp--preset--color--teal, #2f8f8a); border-color: var(--wp--preset--color--teal, #2f8f8a); color: #fff; }
.tbfs-pc-sortrow { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.tbfs-pc-count { font-size: .85rem; color: var(--wp--preset--color--muted, #8a7c73); }
.tbfs-pc-sortrow label { font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--contrast, #3a2f2a); display: flex; align-items: center; gap: .45rem; }
.tbfs-pc-sortrow select { font: inherit; font-size: .85rem; padding: .4rem .6rem; border-radius: 10px; border: 1px solid var(--wp--custom--color--border-warm, #efe6dd); background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #3a2f2a); }

/* Reserve room at the end of the tool while the fixed compare bar is up, so the
   bar never permanently covers the last cards or the footer below it. */
.tbfs-pc.has-tray { padding-bottom: 6.5rem; }
.tbfs-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.tbfs-pc-card { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--base, #fff); border: 1px solid var(--wp--custom--color--border-warm, #efe6dd); border-radius: 16px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.tbfs-pc-card:hover { box-shadow: var(--wp--custom--shadow--card, 0 18px 40px -24px rgba(60, 40, 30, .35)); }
.tbfs-pc-card.is-selected { border-color: var(--wp--preset--color--teal, #2f8f8a); box-shadow: 0 0 0 2px var(--wp--preset--color--teal, #2f8f8a); }
.tbfs-pc-imgwrap { aspect-ratio: 1 / 1; background: var(--wp--preset--color--cream, #fdf7f1); display: flex; align-items: center; justify-content: center; padding: .8rem; }
.tbfs-pc-imgwrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.tbfs-pc-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.05rem 1.15rem; }
.tbfs-pc-brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--muted, #8a7c73); margin: 0; }
.tbfs-pc-name { font-family: var(--wp--preset--font-family--heading, serif); font-size: 1.02rem; line-height: 1.2; margin: .15rem 0 .5rem; color: var(--wp--preset--color--contrast, #3a2f2a); }
.tbfs-pc-badge { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .55rem; border-radius: 999px; background: var(--wp--preset--color--teal-light, #dcefee); color: var(--wp--preset--color--teal-dark, #1f6461); margin-bottom: .7rem; }
/* Deep brick-coral text (not coral-dark) so the badge clears WCAG AA 4.5:1 on
   the soft-coral background; coral-dark on coral-soft only reaches ~3:1. */
.tbfs-pc-badge[data-t="Hospital grade"] { background: var(--wp--preset--color--coral-soft, #fbe2dd); color: #8f2d1a; }
.tbfs-pc-specs { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .28rem; }
.tbfs-pc-specs li { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; color: var(--wp--preset--color--contrast, #3a2f2a); }
.tbfs-pc-specs li span:first-child { color: var(--wp--preset--color--muted, #8a7c73); }
.tbfs-pc-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; }
.tbfs-pc-flag { font-size: .68rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px; background: var(--wp--preset--color--cream, #fdf7f1); color: var(--wp--preset--color--teal-dark, #1f6461); border: 1px solid var(--wp--custom--color--border-warm, #efe6dd); }
.tbfs-pc-cardfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tbfs-pc-cardfoot a { font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--teal-dark, #1f6461); text-decoration: none; }
.tbfs-pc-cardfoot a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tbfs-pc-compare { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--wp--preset--color--contrast, #3a2f2a); user-select: none; }
.tbfs-pc-compare input { width: 1rem; height: 1rem; accent-color: var(--wp--preset--color--teal, #2f8f8a); cursor: pointer; }
.tbfs-pc-empty, .tbfs-pc-none { text-align: center; color: var(--wp--preset--color--muted, #8a7c73); padding: 2.5rem 1rem; }

/* Floating compare bar: fixed to the bottom of the viewport so it is visible
   the moment a pump is selected, no scrolling needed. */
.tbfs-pc-tray { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 900; width: min(680px, calc(100% - 2rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; background: var(--wp--preset--color--contrast, #3a2f2a); color: #fff; border-radius: 14px; padding: .8rem 1.1rem; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4); animation: tbfs-pc-rise .18s ease; }
/* The class sets display:flex, which would otherwise beat the [hidden] UA rule
   and leave the bar showing "0 selected". Restore hide-when-empty. */
.tbfs-pc-tray[hidden] { display: none; }
@keyframes tbfs-pc-rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tbfs-pc-tray-label { font-size: .85rem; font-weight: 600; }
.tbfs-pc-tray-items { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.tbfs-pc-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: .2rem .3rem .2rem .6rem; }
.tbfs-pc-pill button { font: inherit; line-height: 1; cursor: pointer; border: 0; background: rgba(255, 255, 255, .2); color: #fff; border-radius: 999px; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; }
.tbfs-pc-tray-actions { display: flex; gap: .5rem; }
/* Full-width status line inside the tray (compare-cap message). Hidden until it
   has text; also announced via role="status" aria-live in the markup. */
.tbfs-pc-tray-note { flex-basis: 100%; margin: 0; font-size: .78rem; color: #fff; opacity: .9; }
.tbfs-pc-tray-note:empty { display: none; }
.tbfs-pc-btn { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; padding: .5rem 1rem; }
.tbfs-pc-btn.primary { background: var(--wp--preset--color--coral, #f2695a); color: #fff; }
.tbfs-pc-btn.primary:hover { background: var(--wp--preset--color--coral-dark, #d8503f); }
.tbfs-pc-btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.tbfs-pc-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }

.tbfs-pc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(30, 20, 15, .55); }
.tbfs-pc-modal[hidden] { display: none; }
.tbfs-pc-modal-inner { background: var(--wp--preset--color--base, #fff); border-radius: 18px; max-width: min(920px, 96vw); max-height: 90vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); }
.tbfs-pc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--wp--custom--color--border-warm, #efe6dd); }
.tbfs-pc-modal-head h3 { margin: 0; font-family: var(--wp--preset--font-family--heading, serif); font-size: 1.2rem; }
.tbfs-pc-modal-close { font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; border: 0; background: transparent; color: var(--wp--preset--color--muted, #8a7c73); padding: .2rem .5rem; }
.tbfs-pc-modal-scroll { overflow: auto; padding: 0 1.3rem 1.3rem; }
/* Fixed layout so columns share the width and long values wrap instead of
   forcing horizontal scroll: even 4 pumps fit a phone (cells just grow taller),
   and the table never scrolls sideways. */
.tbfs-pc-ctable { border-collapse: collapse; width: 100%; table-layout: fixed; }
.tbfs-pc-ctable th, .tbfs-pc-ctable td { text-align: left; padding: .6rem .55rem; border-bottom: 1px solid var(--wp--custom--color--border-warm, #efe6dd); font-size: .82rem; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.tbfs-pc-ctable th:first-child, .tbfs-pc-ctable td:first-child { width: 5rem; }
@media (max-width: 600px) { .tbfs-pc-ctable thead .n { font-size: .82rem; } }
.tbfs-pc-ctable thead th { position: sticky; top: 0; background: var(--wp--preset--color--base, #fff); padding-top: 1rem; }
.tbfs-pc-ctable thead img { max-width: 100%; width: 64px; max-height: 64px; object-fit: contain; display: block; margin-bottom: .4rem; mix-blend-mode: multiply; }
.tbfs-pc-ctable thead .n { font-family: var(--wp--preset--font-family--heading, serif); font-size: .95rem; color: var(--wp--preset--color--contrast, #3a2f2a); }
.tbfs-pc-ctable tbody th { color: var(--wp--preset--color--muted, #8a7c73); font-weight: 600; }
.tbfs-pc-ctable tbody tr:nth-child(even) { background: var(--wp--preset--color--cream, #fdf7f1); }

@media (max-width: 600px) {
	.tbfs-pc-toolbar { flex-direction: column; align-items: stretch; }
	.tbfs-pc-sortrow { justify-content: space-between; }
	.tbfs-pc-tray { flex-direction: column; align-items: stretch; text-align: center; }
	.tbfs-pc-tray-actions { justify-content: center; }
}