/* Component containment: voorkom dat padding, borders of min-width de K2-container verbreden */
.tentvergelijker {
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
}

.tentvergelijker,
.tentvergelijker *,
.tentvergelijker *::before,
.tentvergelijker *::after {
  box-sizing:border-box;
}

.tentvergelijker .compare-header,
.tentvergelijker .header-inner,
.tentvergelijker .compare-main,
.tentvergelijker .fabric-guide,
.tentvergelijker .filters,
.tentvergelijker .compare-toolbar,
.tentvergelijker .table-wrap,
.tentvergelijker .table-scroll,
.tentvergelijker .seo-after {
  width:100%;
  max-width:100%;
  min-width:0;
}

.tentvergelijker .table-wrap,
.tentvergelijker .table-scroll {
  overflow-x:hidden;
}

.tentvergelijker .table-scroll {
  overflow-x:auto;
}

/* Detailafbeeldingen altijd volledig zichtbaar en gecentreerd */
.tentvergelijker .detail-photo-media img,
.tentvergelijker .detail-photo img {
  object-fit:contain !important;
  object-position:center center !important;
}

.tentvergelijker {
  /* XiPHiAS / blog.xiphias.net */
  --xiphias1:#1f6f88;
  --xiphias2:#073654;
  --xiphias3:#30ACD8;
  --xiphias4:#227998;
  --xiphias5:#195B71;
  --xiphias6:#9c6;

  /* Neutrals from the Joomla template */
  --white:#fff;
  --black:#000;
  --gray-bright:#f6f6f6;
  --gray-light:#eee;
  --gray-light2:#ddd;
  --gray:#ccc;
  --silver:#757575;
  --darker:#333;

  /* Semantic colours for this component */
  --bg:var(--gray-bright);
  --card:var(--white);
  --ink:var(--darker);
  --muted:var(--silver);
  --line:var(--gray-light2);
  --accent:var(--xiphias1);
  --accent-dark:var(--xiphias2);
  --accent-bright:var(--xiphias3);
  --accent-mid:var(--xiphias4);
  --accent-deep:var(--xiphias5);
  --accent-soft:rgba(48,172,216,.12);
  --bench:var(--xiphias6);
  --bench-soft:rgba(153,204,102,.18);
  --chip:var(--gray-bright);
  --warning:#FFCF00;
  --error:#D21245;
}
.tentvergelijker {
  .compare-header { background:var(--accent-dark); color:var(--white); border-bottom:4px solid var(--accent-bright); }
  .compare-header h2 { color:var(--white) !important; margin-top:0; }
  .header-inner { width:100%; max-width:none; margin:0; padding:clamp(1.5em, 3vw, 2.25em); }
  .eyebrow { margin:0 0 6px; color:var(--accent-bright); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
  .compare-header p { margin:0; width:100%; max-width:none; color:var(--gray-light); font-size:15px; }
  .compare-main { width:100%; max-width:none; margin:0; padding:0 0 48px; }

  .filters { background:var(--card); border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; padding:14px 18px 13px; box-shadow:0 7px 18px rgba(7,54,84,.08); }
  .filter-row { display:flex; gap:18px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }
  .filter-group { min-width:250px; }
  .filter-label { display:block; margin:0 0 7px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
  .chips { display:flex; gap:7px; flex-wrap:wrap; }
  .chip { appearance:none; border:1px solid var(--line); background:var(--chip); border-radius:999px; color:var(--ink); padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
  .chip:hover { border-color:var(--accent-bright); color:var(--accent-deep); }
  .chip:focus-visible,
  .toolbar-btn:focus-visible,
  .details-btn:focus-visible,
  .benchmark-control select:focus-visible {
    outline:2px solid var(--accent-bright);
    outline-offset:2px;
  }
  .chip.active { color:var(--white); background:var(--accent); border-color:var(--accent); }
  .reset { border:0; background:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; padding:8px 0; }
  .reset:hover { color:var(--accent); }

  .hint { margin:10px 2px 14px; font-size:12px; color:var(--muted); }
  .mobile-scroll-hint { display:none; }

  .compare-toolbar {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin:0 0 12px; padding:10px 12px; background:var(--card);
    border:1px solid var(--line); border-radius:9px;
  }
  .result-summary { margin-right:auto; font-size:12.5px; color:var(--muted); }
  .result-summary strong { color:var(--ink); }
  .benchmark-control { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted); }
  .benchmark-control select {
    max-width:270px; border:1px solid var(--line); border-radius:7px; background:var(--white);
    color:var(--ink); padding:7px 30px 7px 9px; font:inherit; font-size:12.5px;
  }
  .shortlist-summary { font-size:12px; color:var(--muted); white-space:nowrap; }
  .toolbar-btn {
    border:1px solid var(--line); border-radius:7px; background:var(--chip); color:var(--ink);
    padding:7px 10px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  }
  .toolbar-btn:hover:not(:disabled) { border-color:var(--accent-bright); color:var(--accent-deep); }
  .toolbar-btn[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--white); }
  .toolbar-btn:disabled { opacity:.42; cursor:default; }

  .table-wrap { position:relative; background:var(--card); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
  .table-scroll {
    overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain; touch-action:pan-x pan-y;
  }
  table { width:100%; min-width:1190px; border-collapse:collapse; table-layout:fixed; }
  thead th {
    padding:10px 9px; background:var(--gray-light); border-bottom:1px solid var(--line);
    color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.55px;
    text-transform:uppercase; text-align:left; white-space:nowrap; cursor:pointer;
    user-select:none; position:sticky; top:0; z-index:2;
  }
  thead th.sorted { color:var(--accent-mid); }
  .sort-arrow { margin-left:3px; opacity:.35; }
  th.sorted .sort-arrow { opacity:1; }

  thead th:nth-child(1) { width:128px; }
  thead th:nth-child(2), thead th:nth-child(3), thead th:nth-child(4) { width:104px; }
  thead th:nth-child(5) { width:70px; }
  thead th:nth-child(6) { width:100px; }
  thead th:nth-child(7) { width:155px; }
  thead th:nth-child(8) { width:126px; }
  thead th:nth-child(9) { width:112px; }
  thead th:nth-child(10) { width:82px; }
  thead th:nth-child(11) { width:112px; }

  tbody.tent-group td { padding:9px 9px 11px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px; }
  tbody.tent-group[hidden] { display:none; }
  .tent-name-row td { padding:10px 10px 7px !important; background:var(--gray-bright); border-bottom:0 !important; }
  .tent-group.is-benchmark .tent-name-row td { background:var(--bench-soft); }
  .tent-group.is-benchmark .tent-data-row td { background:rgba(153,204,102,.08); }
  .tent-name-wrap {
    display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap;
    min-height:27px;
  }
  .tent-name { font-weight:700; font-size:14px; }
  .benchmark-badge {
    display:inline-block; background:var(--bench); color:var(--accent-dark); font-size:9.5px; font-weight:800;
    letter-spacing:.5px; border-radius:3px; padding:2px 6px; white-space:nowrap;
  }
  [hidden] { display:none !important; }

  .shortlist-check {
    appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0;
    border:1.5px solid var(--gray); border-radius:4px; background:var(--white); cursor:pointer;
    display:inline-grid; place-content:center; flex:0 0 auto;
  }
  .shortlist-check::after {
    content:""; width:9px; height:5px; border-left:2px solid var(--white); border-bottom:2px solid var(--white);
    transform:rotate(-45deg) scale(0); transition:transform .12s ease;
  }
  .shortlist-check:checked { background:var(--accent); border-color:var(--accent); }
  .shortlist-check:checked::after { transform:rotate(-45deg) scale(1); }
  .shortlist-check:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .shortlist-label { display:none; }

  .details-btn {
    border:1px solid var(--line); border-radius:5px; background:var(--white); color:var(--muted);
    padding:3px 8px; font:inherit; font-size:11px; cursor:pointer;
  }
  .details-btn:hover { border-color:var(--accent-bright); color:var(--accent-deep); }

  .main-val { display:block; font-weight:700; line-height:1.3; }
  .sub-val { display:block; margin-top:2px; color:var(--muted); font-size:10.8px; line-height:1.3; }
  .frame-type { color:var(--accent); font-weight:700; }
  .nb { color:var(--muted); }
  .nowrap { white-space:nowrap; }
  .price { color:var(--accent-deep); }
  .rating-bar { display:flex; gap:2px; width:62px; margin:1px 0 3px; }
  .rating-segment { display:block; width:11px; height:7px; border-radius:2px; background:var(--gray-light2); }
  .rating-segment.filled { background:var(--accent-bright); }

  .detail-row td { padding:0 !important; background:var(--gray-bright) !important; }
  .detail-content { padding:15px 16px 18px; border-bottom:1px solid var(--line); }
  .detail-loading, .detail-error { margin:0; color:var(--muted); font-size:12.5px; }
  .detail-error { color:var(--error); }
  .detail-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); gap:20px; align-items:start; }
  .detail-photo {
    margin:0;
    background:var(--gray-light);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .detail-photo-media {
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--white);
  }
  .detail-photo-media img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:var(--white);
  }
  .detail-photo-primary {
    position:relative;
    z-index:1;
  }
  .detail-photo-secondary {
    position:absolute;
    inset:0;
    z-index:2;
    opacity:0;
    pointer-events:none;
  }
  @media (hover:hover) {
    .detail-photo.has-secondary .detail-photo-primary,
    .detail-photo.has-secondary .detail-photo-secondary {
      transition:opacity .35s ease;
    }
    .detail-photo.has-secondary:hover .detail-photo-primary {
      opacity:0;
    }
    .detail-photo.has-secondary:hover .detail-photo-secondary {
      opacity:1;
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .detail-photo.has-secondary .detail-photo-primary,
    .detail-photo.has-secondary .detail-photo-secondary {
      transition:none;
    }
  }
  .detail-photo figcaption { padding:6px 8px; color:var(--muted); font-size:10.5px; }
  .detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 22px; }
  .detail-block h4 { margin:0 0 5px; font-size:10.5px; color:var(--muted); letter-spacing:.65px; text-transform:uppercase; }
  .detail-block p { margin:0; font-size:12.5px; }
  .detail-block ul { list-style:none; padding:0; margin:0; font-size:12.5px; }
  .detail-block li + li { margin-top:4px; }
  .detail-block a { color:var(--accent-mid); text-decoration:none; }
  .detail-block a:hover { text-decoration:underline; }
  .detail-block.wide { grid-column:span 2; }
  .why { border-left:3px solid var(--accent-bright); padding-left:11px; }
  .tent-group.is-benchmark .why { border-left-color:var(--bench); }
  .detail-note { color:var(--muted); }
  .source-score { white-space:nowrap; font-weight:700; }
  .package-summary { margin-top:6px !important; color:var(--muted); font-size:11px !important; }
}

@media (max-width:800px) {
  .tentvergelijker {
    .header-inner { padding:26px 18px 24px; }
    .filter-group { min-width:100%; }
    .compare-toolbar { align-items:stretch; }
    .result-summary { width:100%; margin-right:0; }
    .benchmark-control { width:100%; display:grid; grid-template-columns:1fr; gap:4px; }
    .benchmark-control select { max-width:none; width:100%; }
    .shortlist-summary { align-self:center; }
    .mobile-scroll-hint { display:block; margin:0 2px 7px; font-size:11px; color:var(--muted); }
    .detail-layout { grid-template-columns:1fr; }
    .detail-grid { grid-template-columns:1fr 1fr; }
    .detail-block.wide { grid-column:1 / -1; }
  }
}
@media (max-width:520px) {
  .tentvergelijker {
    .detail-grid { grid-template-columns:1fr; }
    .detail-block.wide { grid-column:auto; }
  }
}

/* SEO content + tentdoek tabs */
.tentvergelijker {
  .seo-intro,
  .fabric-guide,
  .seo-after {
    margin:24px 0;
  }
  .seo-intro {
    width:100%;
    max-width:none;
  }
  .seo-intro h2,
  .fabric-guide h2,
  .seo-after h2 {
    margin:0 0 9px;
    color:var(--accent-dark);
    font-size:24px;
    line-height:1.25;
  }
  .seo-intro p,
  .fabric-guide-head p,
  .seo-after p {
    margin:0 0 10px;
  }
  .fabric-guide {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .fabric-guide-head {
    padding:18px 18px 12px;
  }
  .fabric-tabs {
    display:flex;
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--gray-bright);
  }
  .fabric-tabs button {
    appearance:none;
    border:0;
    border-right:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    padding:10px 15px;
    font:inherit;
    font-size:12.5px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
  }
  .fabric-tabs button:hover {
    color:var(--accent-mid);
    background:rgba(48,172,216,.07);
  }
  .fabric-tabs button[aria-selected="true"] {
    color:var(--white);
    background:var(--accent);
  }
  .fabric-tabs button:focus-visible {
    position:relative;
    z-index:1;
    outline:2px solid var(--accent-bright);
    outline-offset:-2px;
  }
  .fabric-panel {
    padding:17px 18px 18px;
    scroll-margin-top:18px;
  }
  .fabric-panel h3 {
    margin:0 0 7px;
    color:var(--accent-deep);
    font-size:17px;
  }
  .fabric-panel p {
    margin:0 0 9px;
  }
  .fabric-panel p:last-child {
    margin-bottom:0;
  }
  .fabric-info-link {
    color:inherit;
    text-decoration:underline;
    text-decoration-color:rgba(31,111,136,.35);
    text-underline-offset:2px;
  }
  .fabric-info-link:hover {
    color:var(--accent-mid);
    text-decoration-color:currentColor;
  }
  .material-help {
    margin-top:4px;
  }
  .seller-price-link {
    color:inherit;
    text-decoration:none;
    white-space:nowrap;
  }
  .seller-price-link:hover {
    color:var(--accent-bright);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .seo-after {
    padding-top:4px;
  }
  .seo-after-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .seo-after article {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:9px;
    padding:15px 16px;
  }
  .seo-after h3 {
    margin:0 0 6px;
    color:var(--accent-deep);
    font-size:15px;
  }
  .seo-after article p {
    margin:0;
    font-size:13.5px;
  }
}
@media (max-width:700px) {
  .tentvergelijker {
    .seo-after-grid {
      grid-template-columns:1fr;
    }
    .seo-intro h2,
    .fabric-guide h2,
    .seo-after h2 {
      font-size:21px;
    }
  }
}