/* ============================================================
   eco-6 shared filmstrip styles — copied VERBATIM from the home
   (index.html) so landing/product carousels are pixel-identical to the
   home product carousel. Relies on the page's brand tokens
   (--paper,--green,--green-text,--orange,--orange-glow,--ink,--muted,
    --line,--line-dark,--black,--grad-brand,--ease,--serif,--sans).
   ============================================================ */
.filmstrip{background:var(--paper);position:relative;overflow:hidden;padding:8px 0 56px}
.filmstrip::before{content:none}
/* landing heading above the strip */
.film-head{text-align:center;max-width:var(--maxw,1320px);margin:0 auto 26px;padding:0 32px}
.film-head .eyebrow{display:block}
.film-head h2{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.7rem);margin-top:8px;color:var(--ink)}
.film-head h2 em{font-style:italic;font-weight:400;color:var(--green-text)}
.film-intro{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:42px}
.film-intro h2{font-size:clamp(2.2rem,5.4vw,4rem);max-width:14ch}
.film-intro h2 em{font-style:italic;font-weight:400;color:var(--green-text)}
.film-intro .right{max-width:380px;color:var(--muted);font-size:1.02rem}
.film-controls{display:flex;gap:10px;margin-top:18px}
.film-btn{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:var(--ink);background:#fff;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),color .25s}
.film-btn:hover{background:var(--orange);border-color:var(--orange);color:var(--black);transform:scale(1.06)}
.film-btn .ico{width:22px;height:22px}
.film-rail{position:relative;z-index:2}
.film-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:0 8px 24px -10px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.film-arrow:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-50%) scale(1.06)}
.film-arrow.l{left:18px}.film-arrow.r{right:18px}
.film-arrow .ico{width:24px;height:24px}
@media(max-width:560px){.film-arrow{width:42px;height:42px}.film-arrow.l{left:6px}.film-arrow.r{right:6px}}
.film-perf{display:block;width:75%;height:2px;background:#7EBA44;margin:14px auto;opacity:1}
.film-perf i{display:none}
.film-viewport{overflow:hidden;cursor:grab;padding:18px 0 10px;position:relative}
.film-viewport.dragging{cursor:grabbing}
.film-track{display:flex;gap:10px;padding:0 18px;width:max-content;will-change:transform;align-items:stretch}
@media (max-width:560px){.film-track{padding:0 12px}}
.film-frame{position:relative;width:min(64vw,300px);flex:none;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #e6e1d8;transition:box-shadow .3s var(--ease)}
@media (max-width:560px){.film-frame{width:78vw}}
.film-frame .grade{position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;opacity:0;transition:opacity .5s var(--ease)}
.film-frame .img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ffffff}
.film-frame .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film-frame .num{display:none;position:absolute;top:12px;left:12px;z-index:3;font-family:var(--serif);font-size:.82rem;font-weight:600;background:rgba(11,11,11,.7);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.film-frame .body{position:relative;z-index:3;padding:14px 16px 16px;background:#fff;color:#000;font-family:var(--sans);flex:1;display:flex;flex-direction:column}
.film-frame .body .tag{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-text)}
.film-frame .body h3{font-family:var(--sans);font-weight:500;letter-spacing:.01em;font-size:1.1rem;color:#232323;margin:5px 0 6px}
.film-frame .body p{color:#57534d;font-size:.82rem;line-height:1.78;letter-spacing:.07em;word-spacing:.18em;margin-bottom:12px}
.film-frame .open{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--green-text);margin-top:auto}
.film-frame .open .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.film-frame:hover .open .ico,.film-frame.focused .open .ico{transform:translateX(4px)}
.film-frame.focused{box-shadow:0 18px 34px -20px rgba(0,0,0,.28)}
.film-frame.focused .grade{opacity:0}
.film-frame.focused .img img{transform:none}
.film-frame.focused .open{color:var(--green-text)}
.film-progress{height:3px;background:rgba(11,11,11,.12);border-radius:3px;max-width:var(--maxw,1320px);margin:26px auto 0;position:relative;z-index:2}
.film-progress .fill{position:absolute;left:0;top:0;height:100%;background:var(--grad-brand);border-radius:3px;width:16%;box-shadow:0 0 10px var(--orange-glow)}
.film-hint{text-align:center;margin-top:16px;font-size:.8rem;color:var(--muted);position:relative;z-index:2}
/* === flat design (Ben 2026-06-30): blocks & carousels flattened — no shadows / decorative borders / hover-animations; oversized carousel arrows hidden; card direction-arrows removed === */
.film-btn{display:none!important}
.rc-card,.up-card,.tile,.sub-card,.spec-card,.callout,.card,.co .card2,.dl-card,.film-frame,.p-hero-media{box-shadow:none!important;border:none!important}
.btn-orange,.btn-green,.film-progress .fill,.s-hero,.toolbar{box-shadow:none!important}
.rc-card,.up-card,.tile,.sub-card,.spec-card,.callout,.card,.film-frame,.btn,.chip,.quicklinks a,.crumb a,.nav-bar ul li>a,.card-img img,.rc-card .img img,.up-card .ci img,.film-frame .img img,.tile::before{transition:none!important;animation:none!important;transform:none!important}
.rc-card:hover,.up-card:hover,.tile:hover,.sub-card:hover,.spec-card:hover,.callout:hover,.card:hover,.film-frame:hover,.film-frame.focused,.tile:hover::before,.card:hover .card-img img{box-shadow:none!important;transform:none!important;border-color:transparent!important}
.rc-card .open .ico,.film-frame .open .ico,.up-card .open .ico{display:none!important}

/* carousel arrows (Ben 2026-06-30): re-enabled tasteful 38px flat circle — primary control over swipe */
.filmstrip .film-arrow{display:flex;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:none;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;top:50%;transform:translateY(-50%);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)!important}
.filmstrip .film-arrow .ico{width:18px;height:18px}
.filmstrip .film-arrow.l{left:6px}.filmstrip .film-arrow.r{right:6px}
.filmstrip .film-arrow:hover,.filmstrip .film-arrow:focus-visible{background:var(--green);border-color:var(--green);color:#fff}
.filmstrip .film-arrow:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.filmstrip .film-arrow:active{transform:translateY(-50%) scale(.94)}
@media(max-width:560px){.filmstrip .film-arrow{width:44px;height:44px}.filmstrip .film-arrow.l{left:4px}.filmstrip .film-arrow.r{right:4px}}
.film-viewport{cursor:default}.film-viewport:focus-visible{outline:3px solid var(--green);outline-offset:3px}.film-viewport.dragging{cursor:grabbing}.film-hint{display:none}