/* Protectli Product Comparison Table — scoped styles */

/* ── Design tokens (global custom props, no style side-effects) ──── */
:root {
  --c-navy: #124173;
  --c-blue: #1A77C8;
  --c-red:  #B30E0E;
  --c-ink:  #333333;
  --c-ink-2:#54595F;
  --c-line: #EBEBEB;
  --c-bg:   #FFFFFF;
  --c-bg-soft: #F7F8FA;
  --c-bg-section: #F4F5F7;

  --col-w: 240px;
  --label-w: 200px;
  --row-pad-y: 16px;
  --row-pad-x: 24px;
}

@media (max-width: 767px) {
  :root {
    --col-w: 160px;
    --label-w: 100px;
    --row-pad-y: 4px;
    --row-pad-x: 8px;
  }
}

body > header:first-of-type > header {
  z-index: 999999!important;
}

/* ── Scope root ────────────────────────────────────────────────────── */
#pct-root {
  display: block;
  font-family: Ubuntu, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
}

#pct-root *,
#pct-root *::before,
#pct-root *::after {
  box-sizing: border-box;
}

/* Ensure [hidden] attribute is respected despite author-level display rules */
#pct-root [hidden] { display: none !important; }

/* ── Element reset — targeted strips so themes don't bleed in ───── */

/* Buttons: remove browser/theme chrome, keep pointer */
#pct-root button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  text-decoration: none;
  line-height: inherit;
  letter-spacing: inherit;
  outline: none;
}

/* Links */
#pct-root a {
  color: inherit;
  text-decoration: none;
  background: transparent;
  outline: none;
}

/* Inputs: preserve native rendering (esp. checkboxes), reset font/spacing */
#pct-root input,
#pct-root select,
#pct-root textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
}

/* Labels */
#pct-root label {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  cursor: inherit;
}

/* Lists */
#pct-root ul,
#pct-root ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#pct-root li {
  margin: 0;
  padding: 0;
}

/* Headings */
#pct-root h1,
#pct-root h2,
#pct-root h3 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/* Paragraphs */
#pct-root p {
  margin: 0;
  padding: 0;
}

/* Strong */
#pct-root strong {
  font-weight: 700;
}

/* Images */
#pct-root img {
  border: none;
  vertical-align: middle;
}

/* ── Page shell ────────────────────────────────────────────────────── */
#pct-root .page {
  width: 100%;
  padding: 56px 0 120px;
}

#pct-root .page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
#pct-root .page-title-underline {
  width: 40px;
  height: 3px;
  background: var(--c-red);
  border-radius: 2px;
  margin-bottom: 36px;
}

/* ── Filter bar ────────────────────────────────────────────────────── */
#pct-root .filter-bar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 32px;
  row-gap: 12px;
}
#pct-root .filter-bar-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-ink-2);
  text-transform: uppercase;
  margin-right: 4px;
}
#pct-root .filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid #c9ced4;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#pct-root .filter-pill:hover { border-color: #9aa1a8; }
#pct-root .filter-pill[data-active="true"] {
  border-color: var(--c-navy);
  color: var(--c-navy);
  background: #f2f6fb;
}
#pct-root .filter-pill .caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
}
#pct-root .filter-pill .dot {
  display: inline-block;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--c-navy); color: #fff;
  border-radius: 999px;
  font-size: 11px; line-height: 18px; text-align: center;
}

#pct-root .filter-reset {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border: 2px solid var(--c-red);
  border-radius: 999px;
  background: #fdf2f2;
  color: var(--c-red);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
#pct-root .filter-reset:hover { background: #fae0e0; }

/* Dropdown menu */
#pct-root .pill-wrap { position: relative; }
#pct-root .pill-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; padding: 8px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(18,65,115,0.08);
  z-index: 60;
}
#pct-root .pill-menu label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: var(--c-ink);
  cursor: pointer;
}
#pct-root .pill-menu label:hover { background: var(--c-bg-soft); }
#pct-root .pill-menu input { accent-color: var(--c-navy); }
#pct-root .pill-menu label.is-disabled {
  color: #B5BAC1;
  cursor: not-allowed;
  opacity: 0.6;
}
#pct-root .pill-menu label.is-disabled:hover { background: transparent; }
#pct-root .pill-menu label.is-disabled input { cursor: not-allowed; }

/* Inline range chip inside the pill */
#pct-root .pill-range {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-navy);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
}

/* Price popover menu */
#pct-root .price-menu { min-width: 280px; padding: 16px; }
#pct-root .price-menu-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
#pct-root .price-menu-title { font-size: 12px; color: var(--c-ink-2); text-transform: uppercase; letter-spacing: 0.14em; }
#pct-root .price-menu-values { font-size: 14px; color: var(--c-ink); }
#pct-root .price-menu-values strong { font-weight: 500; color: var(--c-navy); }
#pct-root .price-menu-scale {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-size: 11px; color: var(--c-ink-2);
}

/* Slider track + thumbs */
#pct-root .price-slider-wrap { position: relative; height: 20px; }
#pct-root .price-track { position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--c-line); border-radius: 4px; }
#pct-root .price-track-fill { position: absolute; top: 0; height: 100%; background: var(--c-navy); border-radius: 4px; }
#pct-root .price-slider-wrap input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
  margin: 0;
}
#pct-root .price-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-navy);
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
#pct-root .price-slider-wrap input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-navy);
  cursor: pointer; pointer-events: auto;
}

/* ── Comparison table ──────────────────────────────────────────────── */
#pct-root .cmp-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#pct-root .cmp-sticky-sentinel {
  width: 1px; height: 1px; margin-bottom: -1px; pointer-events: none;
}
#pct-root .cmp-header-row {
  display: flex;
  align-items: stretch;
  position: sticky;
  /* Park below whatever the site leaves stuck at the top of the screen. That
     height isn't ours to hardcode — on this theme the site header's stuck bottom
     measures 120px below 768, 140px to 1024 and 80px above, plus the WP admin
     bar when it is fixed — and the flat 72px this used to carry left the row
     hidden behind it by 8-68px at every width. measureStickyOffset() publishes
     the real edge; the fallback is the old value for a no-JS render. */
  top: var(--pct-sticky-top, 72px);
  z-index: 30;
  background: #fff;
}

#pct-root .cmp-left-header {
  flex: 0 0 var(--label-w);
  width: var(--label-w);
  background: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 1px 0 0 0 #E5E7EB;
  border-bottom: 2px solid #E5E7EB;
}
#pct-root .cmp-scroll-header {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#pct-root .cmp-scroll-header::-webkit-scrollbar { display: none; }
#pct-root .cmp-grid-header {
  display: grid;
  grid-template-columns: repeat(var(--n-products), var(--col-w));
  background: #fff;
}
#pct-root .cmp-body-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
#pct-root .cmp-left {
  flex: 0 0 var(--label-w);
  width: var(--label-w);
  display: grid;
  grid-template-columns: var(--label-w);
  background: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 1px 0 0 0 #E5E7EB;
}
#pct-root .section-row-right {
  background: var(--c-bg-section);
  min-height: 36px;
  grid-column: 1 / -1;
}
#pct-root .cmp-grid.section-plain .section-row-right { background: #fff; }
#pct-root .cmp-grid.section-accent .section-row-right { background: #fff; }

#pct-root .cmp-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  flex: 1 1 auto;
  min-width: 0;
}
#pct-root .cmp-grid.zebra .spec-label[data-zebra="1"] { background: #FAFBFC; }
#pct-root .cmp-scroll-fade { position: relative; }

#pct-root .cmp-grid,
#pct-root .cmp-grid-header {
  min-width: max-content;
}
#pct-root .cmp-grid {
  display: grid;
  grid-template-columns: repeat(var(--n-products), var(--col-w));
  min-width: max-content;
}

/* Mobile: let the label column scroll away with the table instead of holding
   the left edge. The row becomes the horizontal scroller so the labels sit
   inside the overflow rather than beside it; the inner region shrink-wraps its
   grid and stops scrolling on its own. Both overflow axes must be `visible` —
   a non-visible cross axis would force overflow-x back to `auto`.
   setupScrollSync() binds to whichever element in each row actually scrolls. */
@media (max-width: 767px) {
  #pct-root .cmp-header-row,
  #pct-root .cmp-body-row {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #pct-root .cmp-header-row::-webkit-scrollbar,
  #pct-root .cmp-body-row::-webkit-scrollbar { display: none; }

  #pct-root .cmp-scroll-header,
  #pct-root .cmp-scroll {
    flex: 0 0 auto;
    min-width: max-content;
    overflow-x: visible;
    overflow-y: visible;
  }

  #pct-root .cmp-header-row.is-compact .prod-img {
    display: none;
  }
}

/* Product header cards */
#pct-root .prod-header { display: contents; }
#pct-root .prod-cell-label {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
#pct-root .prod-card {
  padding: 28px 20px 24px;
  text-align: center;
  background: #fff;
  border-bottom: 2px solid #E5E7EB;
}
#pct-root .prod-name {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
#pct-root .prod-img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto 18px;
  background: #fff;
}

/* Compact sticky header */
#pct-root .cmp-header-row.is-compact .prod-card {
  padding-top: 14px;
  padding-bottom: 24px;
}
#pct-root .cmp-header-row.is-compact .prod-name { margin-bottom: 8px; }
#pct-root .cmp-header-row.is-compact .prod-img {
  max-width: 188px;
  height: 100px;
  margin-top: 2px;
  margin-bottom: 2px;
}
#pct-root .cmp-header-row.is-compact .prod-price {
  margin-top: 12px;
}

/* Gradual shrink — the ramp into the compact state above. --shrink runs 0..1 as
   the row travels past its parking point (setupCompactHeader), and every value
   here is the base value interpolated toward the .is-compact one, so at
   --shrink: 1 the two blocks are identical and the class swap is invisible.
   Keep the endpoints in step with .is-compact when either is retuned.
   Properties .is-compact leaves alone (card padding-bottom, price margin-top)
   are absent here for the same reason. */
#pct-root .cmp-header-row.is-shrinking .prod-card {
  padding-top: calc(28px - 14px * var(--shrink, 0));
}
#pct-root .cmp-header-row.is-shrinking .prod-name {
  margin-bottom: calc(14px - 6px * var(--shrink, 0));
}
#pct-root .cmp-header-row.is-shrinking .prod-img {
  max-width: calc(200px - 12px * var(--shrink, 0));
  height: calc(140px - 40px * var(--shrink, 0));
  margin-top: calc(2px * var(--shrink, 0));
  margin-bottom: calc(18px - 16px * var(--shrink, 0));
}

#pct-root .buy-btn {
  display: inline-block;
  min-width: 132px;
  padding: 10px 22px;
  background: var(--c-navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
#pct-root .buy-btn:hover { background: #0d3259; }
#pct-root .prod-price {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--c-ink-2);
}

/* Section label rows */
#pct-root .section-label {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px var(--row-pad-x);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line);
}
#pct-root .section-strip {
  background: var(--c-bg-section);
  color: var(--c-ink-2);
}
#pct-root .section-plain {
  background: #fff;
  color: var(--c-ink-2);
  padding-top: 20px;
  padding-bottom: 8px;
}
#pct-root .section-accent {
  background: #fff;
  color: var(--c-navy);
  font-weight: 700;
  padding-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-navy);
}

/* Spec row cells */
#pct-root .spec-label,
#pct-root .spec-cell {
  padding: var(--row-pad-y) var(--row-pad-x);
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
}
#pct-root .spec-label {
  color: var(--c-ink-2);
  font-weight: 400;
}
#pct-root .spec-cell { font-weight: 400; }
#pct-root .spec-cell .primary { color: var(--c-ink); }
#pct-root .spec-cell .sub { color: var(--c-ink-2); font-size: 13px; display: block; }
#pct-root .spec-cell ul { list-style: none; margin: 0; padding: 0; }
#pct-root .spec-cell li { display: block; padding: 0; }
#pct-root .spec-cell .empty { color: #B8BCC2; }

/* Zebra stripe */
#pct-root .cmp-grid.zebra [data-zebra="1"] { background: #FAFBFC; }

/* Column dividers */
#pct-root .cmp-grid.dividers .spec-cell { border-left: 1px solid var(--c-line); }
#pct-root .cmp-grid.dividers .spec-row-first { border-left: 0 !important; }
#pct-root .cmp-grid.dividers .spec-label { border-right: 1px solid var(--c-line); }

#pct-root .cmp-grid.dividers-full .prod-card,
#pct-root .cmp-grid-header.dividers-full .prod-card { border-left: 1px solid var(--c-line); }
#pct-root .cmp-grid.dividers-full .prod-card-first,
#pct-root .cmp-grid-header.dividers-full .prod-card-first { border-left: 0; }
#pct-root .cmp-grid.dividers-full .prod-cell-label { border-right: 1px solid var(--c-line); }

/* Row heights */
#pct-root .cmp-left .spec-label,
#pct-root .cmp-grid .spec-cell { min-height: 64px; }

#pct-root .cmp-left [data-row-key="cpu"],
#pct-root .cmp-grid [data-row-key="cpu"]           { min-height: 100px; }
#pct-root .cmp-left [data-row-key="ram"],
#pct-root .cmp-grid [data-row-key="ram"]           { min-height: 100px; }
#pct-root .cmp-left [data-row-key="storage"],
#pct-root .cmp-grid [data-row-key="storage"]       { min-height: 100px; }
#pct-root .cmp-left [data-row-key="usb"],
#pct-root .cmp-grid [data-row-key="usb"]           { min-height: 100px; }
#pct-root .cmp-left [data-row-key="display"],
#pct-root .cmp-grid [data-row-key="display"]       { min-height: 78px; }
#pct-root .cmp-left [data-row-key="broadband"],
#pct-root .cmp-grid [data-row-key="broadband"]     { min-height: 78px; }
#pct-root .cmp-left [data-row-key="cooling"],
#pct-root .cmp-grid [data-row-key="cooling"]       { min-height: 78px; }
#pct-root .cmp-left [data-row-key="certifications"],
#pct-root .cmp-grid [data-row-key="certifications"] { min-height: 122px; }
#pct-root .cmp-left .section-label,
#pct-root .cmp-grid .section-row-right             { min-height: 44px; }

/* Fixed row heights */
#pct-root .cmp-grid.fixed-rows .spec-label,
#pct-root .cmp-grid.fixed-rows .spec-cell          { min-height: 56px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="cpu"]           { min-height: 100px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="ram"]           { min-height: 100px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="storage"]       { min-height: 100px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="usb"]           { min-height: 100px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="display"]       { min-height: 78px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="broadband"]     { min-height: 78px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="cooling"]       { min-height: 78px; }
#pct-root .cmp-grid.fixed-rows [data-row-key="certifications"] { min-height: 122px; }

/* Column alignment variants */
#pct-root .cmp-grid.align-left .prod-card,
#pct-root .cmp-grid-header.align-left .prod-card {
  text-align: left;
  padding-left: var(--row-pad-x);
  padding-right: var(--row-pad-x);
}
#pct-root .cmp-grid.align-left .prod-img,
#pct-root .cmp-grid-header.align-left .prod-img { margin-left: 0; margin-right: auto; }
#pct-root .cmp-grid.align-left .buy-btn,
#pct-root .cmp-grid-header.align-left .buy-btn {
  display: block; width: 100%; text-align: center; min-width: 0;
}
#pct-root .cmp-grid.align-left .prod-price,
#pct-root .cmp-grid-header.align-left .prod-price { text-align: left; }
#pct-root .cmp-grid.align-center .spec-cell { text-align: center; }
#pct-root .cmp-grid.align-left .spec-cell   { text-align: left; }
#pct-root .cmp-grid.align-split .spec-cell  { text-align: left; }

/* ── Empty state ───────────────────────────────────────────────────── */
#pct-root .empty-state {
  margin: 48px auto 64px;
  max-width: 720px;
  padding: 80px 48px;
  text-align: center;
  background: #F5F5F5;
  border: 1px solid #ECECEC;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(18,65,115,0.03), 0 8px 24px rgba(18,65,115,0.04);
}
#pct-root .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  opacity: 0.95;
}
#pct-root .empty-title {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 26px;
  color: #333333;
  letter-spacing: -0.01em;
}
#pct-root .empty-body {
  display: block;
  margin: 0 0 24px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 1.55;
}
#pct-root .empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 2px solid var(--c-red);
  border-radius: 999px;
  background: #fdf2f2;
  color: var(--c-red);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
#pct-root .empty-cta:hover { background: #fae0e0; }
#pct-root .empty-cta:active { transform: translateY(1px); }

/* ── Mobile filter sheet ───────────────────────────────────────────── */
/* Hidden on desktop; the pill bar above is the desktop presentation. */
#pct-root .m-filter-btn { display: none; }
#pct-root .m-sheet { display: none; }

/* Lock both: which element scrolls the document is up to the theme, and here
   it's <html> (its overflow is `visible`, so the viewport takes its scroll from
   there and a lock on <body> alone does nothing but make <body> its own
   scroller). Overflow on the scroller keeps scrollTop, so nothing jumps. */
html.pct-sheet-open,
body.pct-sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 767px) {
  /* Collapse the pill bar down to a single "Filters" button */
  #pct-root .filter-bar-label,
  #pct-root .filter-bar .pill-wrap,
  #pct-root .filter-bar .filter-reset { display: none; }

  #pct-root .m-filter-btn {
    display: inline-flex;
    margin-left: auto;   /* only item left in the bar on mobile — pin it right */
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid #c9ced4;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--c-ink);
  }
  #pct-root .m-filter-icon {
    width: 16px;
    height: 10px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    position: relative;
    opacity: 0.7;
  }
  /* middle bar of the 3-line filter glyph */
  #pct-root .m-filter-icon::after {
    content: '';
    position: absolute;
    left: 3px; right: 3px; top: 3.25px;
    border-top: 1.5px solid currentColor;
  }

  /* Full-screen panel, slid in from the right edge. It is a <dialog> opened with
     showModal(), so it paints in the top layer — out of reach of any ancestor
     transform or clip, which would otherwise cut its edges off (see the comment
     on the dialog in buildMobileSheet). */
  #pct-root .m-sheet[open] {
    display: flex;
    flex-direction: column;
  }
  #pct-root .m-sheet {
    position: fixed;
    inset: 0;
    /* Strip the UA dialog chrome: it ships a border, padding, `width/height:
       fit-content` and `max-width/height: calc(100% - 6px - 2em)`, plus
       `margin: auto` for centring — all of which fight a full-bleed panel. */
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    color: inherit;
    /* Top-layer painting fixes *where it is drawn*, not what the viewport is:
       a retractable browser toolbar or the on-screen keyboard still shrinks the
       visible rect and can offset it inside the layout viewport, which is what
       puts the footer out of reach. So the edges come from visualViewport via
       syncSheetViewport(); these values are the no-API fallback. */
    top: var(--pct-sheet-top, 0px);
    left: var(--pct-sheet-left, 0px);
    width: var(--pct-sheet-w, auto);
    height: var(--pct-sheet-h, 100dvh);
    z-index: 1000000;
    background: #fff;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
  }
  /* Added a frame after opening, and removed for the slide-out — see
     openSheet()/closeSheet(); the animation duration is mirrored in the JS. */
  #pct-root .m-sheet.is-open { transform: translateX(0); }
  /* The panel is opaque and full-bleed, so the backdrop only needs to swallow
     taps on the page behind it — which it does regardless of being invisible. */
  #pct-root .m-sheet::backdrop { background: transparent; }

  #pct-root .m-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-line);
  }
  #pct-root .m-sheet-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--c-ink);
  }
  #pct-root .m-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    font-size: 30px;
    line-height: 1;
    color: var(--c-ink-2);
  }

  /* The one scrollable region: expanded filter groups may exceed the sheet, but
     the scroll must not chain out to the page behind it. */
  #pct-root .m-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #pct-root .m-sheet-group { border-bottom: 1px solid var(--c-line); }
  #pct-root .m-sheet-grp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    background: var(--c-bg-section);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ink);
  }
  #pct-root .m-sheet-grp-label { flex: 1 1 auto; }
  #pct-root .m-sheet-grp-count {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--c-navy);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
  }
  #pct-root .m-sheet-chev {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.55;
    transition: transform .18s ease;
  }
  #pct-root .m-sheet-grp-head[aria-expanded="true"] .m-sheet-chev {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  #pct-root .m-sheet-grp-body { padding: 0 20px 12px; }
  #pct-root .m-sheet-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 4px 0;
    font-size: 15px;
    color: var(--c-ink);
  }
  #pct-root .m-sheet-opt input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--c-navy);
  }
  #pct-root .m-sheet-opt.is-selected { font-weight: 700; }
  #pct-root .m-sheet-opt.is-disabled { color: #B5BAC1; opacity: 0.6; }
  #pct-root .m-sheet-opt.is-disabled input { cursor: not-allowed; }

  #pct-root .m-sheet-price { padding: 8px 0 16px; }
  #pct-root .m-sheet-price .price-menu-values {
    display: block;
    margin-bottom: 16px;
    font-size: 15px;
  }
  #pct-root .m-sheet-price .price-menu-values strong { font-weight: 500; color: var(--c-navy); }

  #pct-root .m-sheet-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-line);
    background: #fff;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
  }
  #pct-root .m-sheet-reset {
    flex: 0 0 auto;
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-red);
  }
  #pct-root .m-sheet-apply {
    flex: 0 0 auto;
    margin-left: auto;
    height: 48px;
    padding: 0 28px;
    border-radius: 6px;
    background: #194372;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
  }
  #pct-root .m-sheet-apply:active { background: #123354; }
}

/* Honour the OS motion setting: still off-screen when closed, but it snaps. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #pct-root .m-sheet { transition: none; }
}

/* ── Scrollbars ────────────────────────────────────────────────────── */
#pct-root .cmp-scroll::-webkit-scrollbar { height: 8px; }
#pct-root .cmp-scroll::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 4px; }
#pct-root .cmp-scroll::-webkit-scrollbar-track { background: transparent; }
#pct-root .no-native-sbar { scrollbar-width: none; }
#pct-root .no-native-sbar::-webkit-scrollbar { display: none; }

/* Floating horizontal scrollbar */
#pct-root .cmp-foot-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 16px;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  position: sticky;
  bottom: 0;
  z-index: 25;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.06);
}
#pct-root .cmp-foot-spacer { height: 1px; }
#pct-root .cmp-foot-scroll::-webkit-scrollbar { height: 14px; -webkit-appearance: auto; }
#pct-root .cmp-foot-scroll::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 7px; border: 2px solid #fff; }
#pct-root .cmp-foot-scroll::-webkit-scrollbar-thumb:hover { background: #b7bdc4; }
#pct-root .cmp-foot-scroll::-webkit-scrollbar-track { background: #f7f8fa; }