/** Shopify CDN: Minification failed

Line 341:0 Unexpected "}"

**/
/** Shopify CDN: Minification failed

Line 336:0 Unexpected "}"

**/
/* ===== Valor Compatibility (scaffold + popover) ===== */
.valor-compat{
  --v-bg:#fff; --v-text:#1a1a1a; --v-muted:#666; --v-border:#e5e5e5; --v-pill:#f5f5f5;
  --v-yes:#e7f7ea; --v-limit:#fff6e0; --v-no:#ffeded; --v-unk:#f1f1f1; --v-accent:#000;
}

/* Trigger buttons */
.valor-compat .vc-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.valor-compat .vc-btn{
  appearance:none; border:1px solid #111; background:#fff; color:#111;
  padding:10px 12px; border-radius:6px; cursor:pointer; line-height:1.2;
  font-family:"Montserrat",Arial,sans-serif; font-size:14px;
}
.valor-compat .vc-btn small{ display:block; color:#666; font-size:11px; margin-top:2px; }
.valor-compat .vc-btn:hover{ background:#111; color:#fff; }

/* Modal shell */
#vc-modal{ position:fixed; inset:0; display:none; z-index:9999; }
#vc-modal.is-open{ display:block; }
#vc-modal .vc-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
#vc-modal .vc-panel{
  position:absolute; inset:5% 5% auto 5%;
  background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
@media (min-width:900px){ #vc-modal .vc-panel{ inset:6% 8% auto 8%; } }

.vc-head{ padding:18px 18px 12px; border-bottom:1px solid var(--v-border); position:relative; }
.vc-title{ font-family:"Barlow Condensed",sans-serif; font-size:26px; letter-spacing:0; margin:0 28px 2px 0; text-transform:uppercase; }
.vc-close{ position:absolute; right:12px; top:12px; border:0; background:#000; color:#fff; width:30px; height:30px; border-radius:6px; cursor:pointer; }

.vc-meta{ padding:12px 18px 0; color:#444; display:flex; flex-direction:column; align-items:center; }
.vc-diagram{ display:block; width:100%; height:auto; max-width:1000px; border:0; border-radius:8px; }
.vc-caption{ font-size:13px; color:#666; text-align:center; padding:5px 0 10px; max-width:880px; margin:8px auto 0; }

.vc-body{ overflow:auto; padding:12px 0 18px; }

/* Matrix/Table */
.vc-matrix-wrap{ margin:12px 18px 18px; border:1px solid var(--v-border); border-radius:8px; overflow:auto; }
.vc-table{ border-collapse:separate; border-spacing:0; min-width:760px; width:max-content; }
.vc-table th, .vc-table td{
  border-bottom:1px solid var(--v-border); border-right:1px solid var(--v-border);
  padding:8px 10px; font-size:13px; white-space:nowrap;
}
.vc-table th:first-child, .vc-table td:first-child{ border-left:1px solid var(--v-border); }
.vc-table thead th{ position:sticky; top:0; background:#fafafa; z-index:3; }
.vc-table tbody th{ position:sticky; left:0; background:#fff; z-index:2; }
.vc-table tbody tr:nth-child(odd) td{ background:#fcfcfc; }

/* Pills */
.vc-pill{ display:inline-block; padding:2px 6px; border-radius:999px; font-size:12px; }
.vc-badge-yes{ background:var(--v-yes); }
.vc-badge-limit{ background:var(--v-limit); }
.vc-badge-no{ background:var(--v-no); }
.vc-badge-unk{ background:var(--v-unk); }

/* Sticky first column label swapping */
.vc-label-long{ display:inline; }
.vc-label-short{ display:none; }
.vc-matrix-wrap.is-scrolled .vc-label-long{ display:none; }
.vc-matrix-wrap.is-scrolled .vc-label-short{ display:inline; font-weight:600; }

/* Corner (top-left) header sticky + hide label when scrolled */
.vc-table thead th.vc-corner{ position:sticky; top:0; left:0; z-index:4; background:#fafafa; }
.vc-matrix-wrap.is-scrolled .vc-table thead th.vc-corner{ color:transparent; text-shadow:none; }

/* First-column width on small screens */
@media (max-width:768px){
  /* BEFORE swap (long “Accessory” label visible) */
  .vc-table thead th.vc-corner,
  .vc-table tbody th:first-child{
    min-width:140px;   /* tweak */
    max-width:220px;   /* tweak */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* AFTER swap (short Meta label shown when scrolled) */
  .vc-matrix-wrap.is-scrolled .vc-table thead th.vc-corner,
  .vc-matrix-wrap.is-scrolled .vc-table tbody th:first-child{
    min-width:84px;    /* tweak */
    max-width:100px;   /* tweak */
  }
}


/* Search */
.vc-search{ display:flex; justify-content:center; gap:8px; padding:10px 18px 0; }
.vc-search input{
  width:min(460px,92vw); padding:8px 10px; font-size:14px;
  border:1px solid var(--v-border); border-radius:8px;
}
.vc-search .vc-clear{ border:0; background:#eee; padding:8px 10px; border-radius:8px; cursor:pointer; }

/* Key row */
.vc-key{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; padding:8px 18px 2px; color:#444; font-size:12px; }
.vc-key .k-item{ display:flex; align-items:center; gap:6px; }
.vc-key .k-item small{ color:#666; }

/* Caution icon (icon only — transparent, no “pill” backer) */
.vc-note-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px; border:0; background:transparent; cursor:pointer;
}
.vc-note-btn span.text{ display:none !important; } /* ensure any old text is hidden */
.vc-note-icon{
  display:inline-block; width:18px; height:18px; line-height:18px; text-align:center;
  font-size:13px; font-weight:700; color:#b36a00;   /* amber text only */
  background:transparent; border:0; border-radius:0; box-shadow:none;  /* <- no backer */
}

/* Popover */
.vc-pop{
  position:fixed; max-width:min(420px,92vw); background:#fff; color:#111;
  border:1px solid var(--v-border); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.25);
  padding:12px 14px; z-index:10000;
}
.vc-pop h4{ margin:0 0 6px; font-size:14px; font-weight:700 !important; letter-spacing:0 !important; }
.vc-pop p{ margin:0; font-size:13px; line-height:1.45; color:#333; }
.vc-pop-dismiss{ position:fixed; inset:0; z-index:9999; background:transparent; }

.vc-foot{ padding:10px 18px 16px; border-top:1px solid var(--v-border); display:flex; gap:12px; align-items:center; justify-content:space-between; }
.vc-foot a{ color:#111; text-decoration:underline; font-size:12px; }


/* two-row sticky header: group row + model row */
.valor-compat{ --vc-group-h: 34px; }
.vc-table thead tr.vc-groups th{
  position:sticky; top:0; z-index:5;
  background:#f0f0f0; text-transform:uppercase; letter-spacing:0;
  font-size:12px; border-bottom:1px solid var(--v-border);
}
.vc-table thead tr.vc-models th{
  position:sticky; top:var(--vc-group-h); z-index:4; background:#fafafa;
}
/* keep the corner sticky across both rows */
.vc-table thead th.vc-corner{ position:sticky; top:0; left:0; z-index:6; background:#f0f0f0; }
/* subtle divider where groups change */
.vc-table thead th.vc-group-end{ box-shadow: inset -2px 0 0 var(--v-border); }


/* --- definitive sticky stacking for 2-row header --- */
.vc-table thead { position: relative; } /* scoping for the CSS var */

.vc-table thead tr.vc-groups th{
  position: sticky;
  top: 0;                 /* always at the very top */
  z-index: 7;             /* above model row */
  background:#f0f0f0;
  white-space: nowrap;
}

.vc-table thead tr.vc-models th{
  position: sticky;
  top: var(--vc-group-h, 36px);  /* measured; 36px fallback */
  z-index: 6;
  background:#fafafa;
  white-space: nowrap;
}

/* Corner cell spans both rows and sits on top of everything */
.vc-table thead th.vc-corner{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 8;             /* highest */
  background:#f0f0f0;
}


/* Mobile: stack the KEY, make it a panel, bump sizes */
@media (max-width: 768px){
  .vc-key{
    flex-direction: column;          /* stack items */
    align-items: stretch;            /* full width inside panel */
    gap: 10px;
    padding: 12px 14px;
    margin: 8px 18px 4px;
    font-size: 13.5px;               /* slightly larger text */
    background: #fafafa;             /* subtle panel */
    border: 1px solid var(--v-border);
    border-radius: 8px;
  }
  .vc-key .k-item{
    display: flex;
    justify-content: center;         /* center each row */
    gap: 10px;
  }
  .vc-key .vc-pill{
    font-size: 13.5px;               /* larger pill text */
    padding: 4px 10px;
  }
  .vc-key small{
    font-size: 12.5px;               /* bump helper text a bit */
    color: #555;
  }
}
.vc-badge-size{ background:#e8f1ff; color:#154fbe; }
/* Large optic shroud (LG) pill override */
.vc-pill.vc-badge-size[data-size="LG"] {
  background: #ead8ff;   /* soft purple */
  color: #5a2999;        /* readable purple text */
}


/* Buttons row (unchanged) */
.valor-compat .vc-buttons{ display:flex; flex-wrap:wrap; gap:8px; }

/* Base button */
.valor-compat .vc-btn{
  appearance:none;
  border:1px solid #ccc;
  background:#eee;
  color:#1a1a1a;                 /* slightly off-black */
  padding:12px 14px;
  border-radius:8px;
  box-shadow:none !important;
  cursor:pointer;
  display:inline-flex;
  flex-direction:column;
  align-items:center;            /* center text block */
  justify-content:center;
  gap:4px;
  text-align:center;             /* center text */
  text-decoration:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

/* Hover / focus */
.valor-compat .vc-btn:hover,
.valor-compat .vc-btn:focus-visible{
  background:#000;
  color:#fff;
  border-color:#000;
  outline:0;
}

/* Pressed */
.valor-compat .vc-btn:active{
  filter:brightness(0.92);
}

/* Title: Barlow Condensed bold, centered, off-black */
.valor-compat .vc-btn-title{
  font-family:"Barlow Condensed", Arial, sans-serif;
  font-weight:700;
  letter-spacing:0;
  font-size:18px;
  line-height:1.05;
  color:inherit;                 /* follows button color */
}

/* Subline: Montserrat regular, softer */
.valor-compat .vc-btn-sub{
  font-family:"Montserrat", Arial, sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:1.25;
  color:#333;                    /* slightly softer than title */
}

/* On hover/active, force subline to white as well */
.valor-compat .vc-btn:hover .vc-btn-sub,
.valor-compat .vc-btn:focus-visible .vc-btn-sub,
.valor-compat .vc-btn:active .vc-btn-sub{
  color:#fff;
}

/* Optional: full-width on small phones */
@media (max-width:420px){
  .valor-compat .vc-btn{ width:100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .valor-compat .vc-btn{ transition:none; }
}

/* Lock background scroll when popover is open (incl. iOS fix) */
html.vc-lock, body.vc-lock { overflow: hidden !important; }
body.vc-lock { position: fixed !important; width: 100% !important; }
/* Reserve scrollbar space so layout doesn't shift when body is locked */
html { scrollbar-gutter: stable; }  /* modern browsers */


/* Mobile-only scroll hint */
.vc-hint {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin: 6px 18px 0;
  letter-spacing: 0.02em;
}
@media (min-width: 769px){ .vc-hint { display: none; } }

/* Desktop top scroller bar */
.vc-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: 12px;
  margin: 4px 18px 8px;
}
.vc-top-scroll > div { height: 1px; } /* invisible track filler */
@media (max-width: 768px){ .vc-top-scroll { display: none; } }


@media (min-width: 769px){
  .vc-search{ margin-bottom: 16px; }
}
/* Center model titles (row 2) */
.vc-table thead tr.vc-models th { 
  text-align: center; 
}

/* Keep first column (Accessory label) left-aligned */
.vc-table tbody th { 
  text-align: left; 
}

/* Center contents of data cells */
.vc-table td {
  text-align: center;          /* simple approach */
  vertical-align: middle;
}

/* If you want bulletproof centering even with multiple elements, uncomment:
.vc-table td{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                    /* spacing between YES/LIMITED and size pill/⚠ */
}
*/

/* Tidy spacing for pills + warning icon */
.vc-pill { margin: 0 2px; }
.vc-note-btn { margin-left: 6px; vertical-align: middle; }


/* Unknown cells (“?” -> N/A) */
.vc-table td.vc-cell-unk{
  background:#f2f2f2 !important;  /* gray cell */
  color:#777;
  text-align:center;               /* same alignment as others */
  vertical-align:middle;           /* center vertically without flex */
}
.vc-table td.vc-cell-unk .vc-na{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:#666;
}


/* ===== Model Filter UI (styled to match search) ===== */
.vc-filter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 18px 0;
}

.vc-filter-label{
  font-family:"Montserrat", Arial, sans-serif;
  font-size:13px;
  color:#444;
}

.vc-filter-select{
  width:min(460px,92vw);
  padding:8px 10px;
  font-size:14px;
  border:1px solid var(--v-border);
  border-radius:8px;
  background:#fff;
  color:#1a1a1a;
  outline:none;
}

.vc-filter-select:focus{
  border-color:#000;
}

/* When a model is selected, we can tighten the layout slightly if desired */
.vc-matrix-wrap.vc-has-col-filter,
.vc-has-col-filter + .vc-top-scroll { /* keep for potential hooks */ }

/* We hide columns via inline style from JS; this is just a safety class if needed */
.vc-col-hidden { display:none !important; }


/* ===== Model Filter UI (unchanged from before) ===== */
.vc-filter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 18px 0;
}
.vc-filter-label{
  font-family:"Montserrat", Arial, sans-serif;
  font-size:13px;
  color:#444;
}
.vc-filter-select{
  width:min(460px,92vw);
  padding:8px 10px;
  font-size:14px;
  border:1px solid var(--v-border);
  border-radius:8px;
  background:#fff;
  color:#1a1a1a;
  outline:none;
}
.vc-filter-select:focus{ border-color:#000; }

/* ===== Mobile readability when a model is filtered ===== */
@media (max-width:768px){
  /* When filtering, behave like scrolled (short labels already handled by JS adding .is-scrolled) */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th.vc-corner,
  .vc-matrix-wrap.vc-has-col-filter .vc-table tbody th:first-child{
    min-width:84px;
    max-width:100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Give the single visible model column a comfortable width */
  .vc-matrix-wrap.vc-has-col-filter .vc-table td[data-col],
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th[data-col]{
    min-width:160px;   /* tweak as desired (140–200) */
  }
}

/* Optional tiny spacing polish */
.vc-search { margin-bottom: 10px; }
.vc-top-scroll { margin-top: 0; }


/* ===== Mobile: make filtered view readable ===== */
@media (max-width: 768px){
  /* When a model is filtered, switch to fixed layout so widths obey our rules */
  .vc-matrix-wrap.vc-has-col-filter .vc-table{
    table-layout: fixed;
    width: max-content;   /* keep natural width of the visible column */
  }

  /* Shrink the sticky first column (Accessory) and use the short label */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th.vc-corner,
  .vc-matrix-wrap.vc-has-col-filter .vc-table tbody th:first-child{
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Give the single visible model column comfortable width */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th[data-col],
  .vc-matrix-wrap.vc-has-col-filter .vc-table td[data-col]{
    width: 180px;        /* tweak 160–220 to taste */
    min-width: 180px;
    max-width: 220px;    /* upper cap so it never balloons */
  }
}
/* Collapse a model column without display:none (iOS/Safari safe) */
.vc-col-hidden {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow: hidden !important;
  /* Keep background from “smearing” on iOS when sticky */
  background: transparent !important;
}

/* ===== Mobile: readable filtered view ===== */
@media (max-width: 768px){
  /* Use fixed layout so our widths take effect */
  .vc-matrix-wrap.vc-has-col-filter .vc-table{
    table-layout: fixed;
    width: max-content;
  }

  /* Shrink first (Accessory) column and use short label (JS adds .is-scrolled) */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th.vc-corner,
  .vc-matrix-wrap.vc-has-col-filter .vc-table tbody th:first-child{
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Give the visible model column a readable width */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th[data-col]:not(.vc-col-hidden),
  .vc-matrix-wrap.vc-has-col-filter .vc-table td[data-col]:not(.vc-col-hidden){
    width: 180px;       /* tweak 160–220 if you want */
    min-width: 180px;
    max-width: 220px;
  }
}
/* Collapse a model column without display:none (iOS/Safari safe) */
.vc-col-hidden{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  overflow:hidden !important;
  opacity:0 !important;                 /* no paint artifacts */
  background:transparent !important;    /* avoid dark fill on iOS */
  pointer-events:none !important;
}

/* Neutralize a Make header cell instead of hiding it */
.vc-colgroup-hidden{
  color:transparent !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  pointer-events:none !important;
}

/* Explicit backgrounds so WebKit never paints “black” */
.vc-table thead th,
.vc-table tbody th,
.vc-table td{ background-color:#fff; }
.vc-table tbody tr:nth-child(odd) td{ background-color:#fcfcfc; }

/* Safari/iOS repaint hints to avoid black blocks with sticky headers */
.vc-matrix-wrap{ -webkit-overflow-scrolling: touch; }
.vc-table thead th,
.vc-table tbody th,
.vc-table td{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== Mobile filtered view: fixed layout + readable widths ===== */
@media (max-width:768px){
  .vc-matrix-wrap.vc-has-col-filter .vc-table{
    table-layout: fixed;
    width: max-content;
  }
  /* short first column */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th.vc-corner,
  .vc-matrix-wrap.vc-has-col-filter .vc-table tbody th:first-child{
    width:96px; min-width:96px; max-width:96px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* readable visible model column */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th[data-col]:not(.vc-col-hidden),
  .vc-matrix-wrap.vc-has-col-filter .vc-table td[data-col]:not(.vc-col-hidden){
    width:180px; min-width:180px; max-width:220px;
  }
}
/* ===== Mobile: make filtered (single-model) table fit the viewport ===== */
@media (max-width: 768px){
  /* Kill the desktop min-width + max-content when a model is filtered */
  .vc-matrix-wrap.vc-has-col-filter .vc-table{
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;       /* allow percentage column widths */
  }

  /* Shorten the Accessory column (uses the short label via .is-scrolled) */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th.vc-corner,
  .vc-matrix-wrap.vc-has-col-filter .vc-table tbody th:first-child{
    width: 42% !important;     /* tweak: 38–48% if you want */
    max-width: 42% !important;
    min-width: 42% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Make the visible model column take the rest of the width */
  .vc-matrix-wrap.vc-has-col-filter .vc-table thead th[data-col],
  .vc-matrix-wrap.vc-has-col-filter .vc-table td[data-col]{
    width: 58% !important;
    max-width: 58% !important;
    min-width: 58% !important;
    white-space: nowrap;       /* pills stay tidy */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* Mobile: when a model is selected, make the hint text white (keeps spacing) */
@media (max-width:768px){
  #vc-modal.vc-filter-active .vc-hint{
    color:#fff !important;
  }
}
@media (max-width:768px){
  /* FILTER ROW */
  .vc-filter{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 0;       /* keep some side padding */
    margin: 0;
    max-width: 100%;
  }
  .vc-filter-label{
    flex: 0 1 45%;             /* allow shrink */
    min-width: 0;              /* <-- critical to allow text shrink */
    text-align: right;
    line-height: 1.1;
    white-space: normal;       /* allow wrap if needed */
  }
  .vc-filter-select{
    flex: 1 1 55%;
    min-width: 0;              /* allow the select to shrink */
  }
  .vc-filter select{
    width: 100%;
    max-width: 100%;
  }

  /* SEARCH ROW */
  .vc-search{
    display: flex;
    gap: 8px;
    padding: 8px 16px 0;       /* match filter padding */
    margin: 0;
    max-width: 100%;
  }
  .vc-search input{
    flex: 1 1 0;
    width: 100% !important;    /* override the 460px/92vw rule */
    max-width: 100% !important;
    box-sizing: border-box;    /* include its own padding in width */
  }
  .vc-search .vc-clear{
    flex: 0 0 auto;            /* keep the button compact */
  }
}
/* Not Tested pill */
.vc-badge-nt{
  background:#e0e0e0;   /* soft grey */
  color:#444;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* Keep Not Tested cells “neutral” (white box, no green/red tint) */
.vc-table td.vc-cell-nt{
  background:#ffffff !important;
}
