#slaapzak2{--accent:rgb(112, 1, 229);--accent-dim:rgba(112, 1, 229, .08);--accent-hover:rgba(112, 1, 229, .8);--green:rgb(16, 115, 2);--green-bg:rgba(16, 115, 2, .08);--amber:rgb(229, 148, 7);--amber-bg:rgba(229, 148, 7, .10);--extreme-en:#b03030;--extreme-en-bg:#fce8e8;--upper-en:#b45309;--upper-en-bg:#fff8e1;--ink:#1a1a1a;--snow:#ffffff;--stone:#f5f4f7;--mist:#e8e4f0;--bark:#6b6b80;--uitv-bg:#f0ecf9;--desc-text:#666666;--fs-root:1rem;--fs-brand-header:1.6em;--fs-serie-header:.88em;--fs-card-title:1.05rem;--fs-details:.75rem;--fs-details-h3:1.2em;--fs-details-h4:1.1em;--fs-main:.85rem;--fs-badge:var(--fs-main);--fs-badge-label:var(--fs-main);--fs-uitv-name:var(--fs-main);--fs-small:.6rem;--fs-placeholder:1.4rem;--radius:14px;--shadow:0 2px 16px rgba(112, 1, 229, .07),
        0 1px 4px rgba(0, 0, 0, .05);--shadow-h:0 10px 40px rgba(112, 1, 229, .15),
        0 2px 8px rgba(0, 0, 0, .07);--max-w:1200px;width:100%;margin:0 auto;padding:.42rem;font-size:var(--fs-root);.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .brand-section { margin-bottom: 3.5rem; } .serie-group { margin-bottom: 2rem; } .brand-header, .serie-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--mist); } .brand-header { margin-bottom: 1.5rem; padding-bottom: .75rem; } .serie-header { margin-bottom: .9rem; padding-bottom: .4rem; } .brand-header h2 { font-size: var(--fs-brand-header); font-weight: 600; color: var(--accent); white-space: nowrap; letter-spacing: -.015em; } .serie-header h3 { font-size: var(--fs-serie-header); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .serie-label-merk { color: var(--bark); font-weight: 400; margin-right: .2rem; } details.full { display: inline-flex; align-items: baseline; margin-left: auto; flex-shrink: 0; } details.small { border-top: 1px solid var(--mist); padding-top: .6rem; margin-top: auto; } details.full[open] { flex-basis: 100%; margin-left: 0; column-gap: 1em; flex-direction: row-reverse; } details { font-size: var(--fs-details); font-weight: 400; h3 { font-size: var(--fs-details-h3); font-weight: 600; } h4 { font-size: var(--fs-details-h4); font-weight: 600; } } details>summary { list-style: none; cursor: pointer; user-select: none; letter-spacing: 0; text-transform: none; color: var(--bark); display: inline-flex; align-items: center; gap: .5rem; } details>summary::-webkit-details-marker { display: none; } details>summary::after { content: ''; display: inline-block; width: .42rem; height: .42rem; right: .42rem; border-right: 1.5px solid var(--bark); border-bottom: 1.5px solid var(--bark); transform: rotate(-45deg); transition: transform .2s; position: relative; top: -.02rem; background-image: none; } details.small[open]>summary::after { transform: rotate(45deg); top: -.12rem; } details.full[open]>summary::after { transform: rotate(-135deg); bottom: -.12rem; } details.full[open]>summary { color: var(--ink); margin-left: auto; } .desc-body { color: var(--desc-text); line-height: 1.6; margin-top: .5rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .card { background: var(--snow); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); } .card-image-wrap { height: 160px; max-width: 190px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; a:hover { color: #fff; background-color: transparent; text-decoration: none; } } .card-image-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform .35s ease; } .card:hover .card-image-wrap img { transform: scale(1.04); } .card-image-placeholder { width: 56px; height: 56px; border-radius: 50%; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--bark); font-size: var(--fs-placeholder); } .card-body { padding: .85rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .55rem; } .card-title { font-size: var(--fs-card-title); font-weight: 600; color: var(--accent); line-height: 1.25; letter-spacing: -.01em; } .card-brand-footer { padding: .5rem 1rem .75rem; border-top: 1px solid var(--mist); } .badge-row { display: flex; flex-wrap: wrap; gap: .3rem; } .badge { display: inline-flex; align-items: center; gap: .22rem; font-size: var(--fs-badge); font-weight: 500; border-radius: 6px; padding: .18rem .5rem; white-space: nowrap; } .badge-label { font-size: var(--fs-badge-label); font-weight: 600; opacity: .7; margin-right: .1rem; letter-spacing: .03em; sub { font-size: var(--fs-small); } } .badge-comfort-en { background: var(--green-bg); color: var(--green); } .badge-limit-en { background: var(--amber-bg); color: var(--amber); } .badge-extreme-en { background: var(--extreme-en-bg); color: var(--extreme-en); } .badge-upper-en { background: var(--upper-en-bg); color: var(--upper-en); } .badge-fill { background: var(--accent-dim); color: var(--accent); } .badge-limit-merk { background: transparent; border: 1.5px dashed var(--bark); color: var(--bark); } .badge:after { margin-left: .2rem; font-size: var(--fs-small); opacity: .7; } .badge-comfort-en::after { content: "\2640"; } .badge-limit-en::after { content: "\2642"; } .badge-extreme-en::after { content: "\26A0"; } .badge-fill::after { content: "\2736"; } .uitv-list { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--mist); padding-top: .65rem; } .uitv-item { background: var(--uitv-bg); border-radius: 9px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .4rem; } .uitv-name { font-size: var(--fs-uitv-name); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .uitv-name-lengte { text-transform: none; color: var(--ink); margin-left: auto; } .uitv-specs { font-size: var(--fs-badge); padding-inline: 0px; } .uitv-spec { display: block; white-space: nowrap; } .uitv-name-lengte::before, .uitv-spec::before { margin-right: .2rem; font-size: var(--fs-small); opacity: .7; } .uitv-name-lengte::before { content: "\21C5"; } .uitv-spec--gewicht::before { content: "\2696"; } .uitv-spec--maten::before { content: "\2194"; } .uitv-spec--geslacht::before { content: "\2642"; color: var(--green); } .uitv-spec--pakmaat::before { display: inline-block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='11' height='11' fill='none' stroke='%236b6b80' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='6,1 11,3.5 6,6 1,3.5' /%3E%3Cpolyline points='1,3.5 1,8.5 6,11 11,8.5 11,3.5' /%3E%3Cline x1='6' y1='6' x2='6' y2='11' /%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; vertical-align: middle; } .uitv-spec-sub { font-weight: 400; color: var(--bark); } .uitv-shops { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; } .shop-btn, .more-info-btn { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; border-radius: 6px; padding: .22rem .6rem; font-size: var(--fs-badge); font-weight: 500; transition: background .15s; white-space: nowrap; } .shop-btn { background: var(--accent); color: var(--snow); } .shop-btn:hover { background: var(--accent-hover); } .shop-price { background: rgba(255, 255, 255, .15); border-radius: 3px; padding: .02rem .3rem; font-weight: 600; } .more-info-btn { background: var(--mist); color: var(--bark); } .more-info-btn:hover { background: var(--stone); color: var(--ink); } .happyrow.hide { display: none; } section.brand-section, div.serie-group, article.card { &:not(:has(.happyrow:not(.hide))) { display: none; } } ul.pinfo { display: inline-block; }}