:root{--black:#080807;--ink:#11100e;--gold:#b58a3a;--gold2:#d2ad63;--beige:#e9e0d0;--muted:#8e877d;--line:rgba(210,173,99,.22)}*{box-sizing:border-box}html{background:var(--black);color:var(--beige);font-family:Manrope,Arial,sans-serif}body{margin:0;background:var(--black);min-height:100vh}button,input,textarea{font:inherit}.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:24px;min-height:108px;padding:18px 5vw;background:rgba(8,8,7,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.brand img{width:56px;height:56px;object-fit:contain}.topcopy p,.filter-group>span,.result-count,.request label{margin:0;color:var(--gold2);font-size:9px;letter-spacing:.19em}.topcopy h1{font-weight:300;font-size:clamp(24px,2.7vw,44px);line-height:1;margin:6px 0}.topcopy em,.drawer h2 em{font-family:'Playfair Display';color:var(--gold2);font-weight:500}.selection-button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:none;color:var(--beige);padding:12px 15px;font-size:9px;letter-spacing:.16em}.selection-button b{color:var(--gold2)}.five-star{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--gold2)}.is-favorite .five-star,.five-star.is-favorite{color:var(--gold2);-webkit-text-stroke:0}.filters{padding:26px 5vw 22px;border-bottom:1px solid var(--line);display:grid;gap:16px}.filter-group{display:grid;grid-template-columns:90px 1fr;align-items:start;gap:20px}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips button,.checks label,.checks button{border:0;background:none;color:var(--muted);font-size:10px;letter-spacing:.1em;padding:5px 0;cursor:pointer}.chips button+button:before{content:'·';color:#4f4a43;margin-right:7px}.chips button.active{color:var(--gold2)}.checks{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding-left:110px}.checks input{position:absolute;opacity:0}.checks i{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border:1px solid #665b4b;color:transparent;font-size:10px;font-style:normal}.checks input:checked+i{background:var(--gold2);border-color:var(--gold2);color:var(--black)}.checks .favorite-filter input:checked+i{background:none;color:var(--gold2);-webkit-text-stroke:0}.checks button{margin-left:auto;color:var(--gold2)}.result-count{padding-left:110px;color:var(--muted)}.result-count b{color:var(--beige)}.grid{padding:30px 5vw 90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px}.card{min-width:0}.card-media{position:relative;aspect-ratio:1;overflow:hidden;background:#15120f;cursor:pointer}.card img,.card video,.poster-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card video{opacity:0;transition:opacity .18s}.card.playing video{opacity:1}.poster-fallback{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#5b4322 0,#21180f 30%,#0c0b09 70%)}.poster-fallback .five-star{font-size:42px;opacity:.38}.card-favorite{position:absolute;z-index:3;right:12px;top:12px;width:38px;height:38px;border:1px solid rgba(233,224,208,.24);border-radius:50%;background:rgba(8,8,7,.58);font-size:20px}.card footer{display:flex;justify-content:space-between;gap:15px;padding-top:10px}.card footer p{margin:0;color:var(--gold2);font-size:9px;letter-spacing:.13em}.card footer h2{margin:3px 0 0;font-family:'Playfair Display';font-weight:500;font-size:clamp(20px,2vw,31px)}.card-product{align-self:end!important;color:var(--muted)!important}.modal[hidden],.drawer[hidden]{display:none}.modal{position:fixed;inset:0;z-index:100}.modal-shade{position:absolute;inset:0;background:rgba(0,0,0,.91);backdrop-filter:blur(8px)}.viewer-panel{position:absolute;inset:3vh 3vw;display:grid;grid-template-columns:60px minmax(0,1fr) 60px;grid-template-rows:54px minmax(0,1fr) 42px;align-items:center}.viewer-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.viewer-top p{margin:0;color:var(--muted);font-size:10px;letter-spacing:.15em}.viewer-top button{border:0;background:none;color:var(--beige)}.viewer-favorite{font-size:24px;margin-right:16px}.viewer-close{font-size:30px}.viewer-media{grid-column:2;grid-row:2;display:grid;place-items:center;height:100%;min-height:0}.viewer-media video{max-width:100%;max-height:100%;display:block;cursor:pointer}.viewer-nav{grid-row:2;border:0;background:none;color:var(--beige);font-size:48px;opacity:.62}.prev{grid-column:1}.next{grid-column:3}.transport{grid-column:2;grid-row:3;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;color:var(--muted);font-size:9px}.transport input{width:100%;height:2px;accent-color:var(--gold2)}body.modal-open{overflow:hidden}.drawer{position:fixed;inset:0;z-index:110}.drawer-shade{position:absolute;inset:0;border:0;background:rgba(0,0,0,.72)}.drawer>section{position:absolute;right:0;top:0;bottom:0;width:min(520px,94vw);overflow:auto;background:#11100e;border-left:1px solid var(--line);padding:28px}.drawer header{display:flex;justify-content:space-between}.drawer header p{font-size:9px;letter-spacing:.18em;color:var(--gold2)}.drawer h2{font-size:34px;font-weight:300;margin:6px 0 24px}.drawer header button{border:0;background:none;color:var(--beige);font-size:28px}.selection-list{display:grid;gap:8px}.selection-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.selection-item p{margin:0;font-size:11px}.selection-item small{color:var(--muted)}.selection-item button{border:0;background:none;color:var(--gold2)}.request{margin-top:32px}.request h3{font:500 25px 'Playfair Display';margin-bottom:3px}.request>p{color:var(--muted);font-size:12px}.request form{display:grid;gap:15px;margin-top:20px}.request label{display:grid;gap:6px}.request input,.request textarea{width:100%;border:1px solid var(--line);background:#080807;color:var(--beige);padding:12px}.request button,.copy{border:1px solid var(--gold);background:none;color:var(--beige);padding:14px;font-size:9px;letter-spacing:.14em}.copy{width:100%;margin-top:10px}@media(max-width:850px){.topbar{grid-template-columns:44px 1fr auto;gap:10px;min-height:84px;padding:12px 4vw}.brand img{width:40px;height:40px}.topcopy p{display:none}.topcopy h1{font-size:19px}.selection-button span:not(.five-star){display:none}.selection-button{padding:10px}.filters{padding:18px 4vw}.filter-group{grid-template-columns:1fr;gap:7px}.checks{padding-left:0;gap:10px 16px}.result-count{padding-left:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 4vw 70px;gap:22px 10px}.card footer{display:block}.card-product{margin-top:4px!important}.card footer h2{font-size:18px}.viewer-panel{inset:1.5vh 2vw;grid-template-columns:38px minmax(0,1fr) 38px}.viewer-nav{font-size:38px}.viewer-top p{max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport{grid-column:1/-1;margin:0 3vw}.card-favorite{right:7px;top:7px;width:34px;height:34px}}

/* =========================================================
   FIVE DEMOFILMS LIBRARY v02 · REBUILT FROM v01
   ========================================================= */
:root{--grid-columns:5}
.topbar{position:sticky!important;top:0!important;z-index:40!important;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;min-height:112px!important;padding:16px 5vw!important}
.brand-lockup{display:flex;align-items:center;gap:14px;justify-self:start;text-decoration:none;min-width:0}
.brand-five{width:72px;height:72px;object-fit:contain;flex:0 0 auto}
.brand-wordmark{width:124px;height:32px;object-fit:contain;object-position:left center;flex:0 1 auto}
.topcopy{grid-column:2;text-align:center;justify-self:center}
.topcopy h1{margin:0!important;white-space:nowrap;font-size:clamp(27px,2.8vw,46px)!important}
.selection-button{grid-column:3;justify-self:end}
.filters{position:sticky!important;top:112px!important;z-index:39!important;background:rgba(8,8,7,.975)!important;backdrop-filter:blur(18px)!important;box-shadow:0 12px 30px rgba(0,0,0,.32)!important}
.filter-footer{display:flex;align-items:center;justify-content:space-between;padding-left:110px;gap:24px}
.filter-footer .result-count{padding-left:0!important;margin:0}
.zoom-control{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:9px;letter-spacing:.15em}
.zoom-control input{width:130px;height:2px;accent-color:var(--gold2)}
.grid{grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr))!important;gap:30px 14px!important}
.card footer{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;padding-top:10px!important}
.card footer p{margin:0!important;font-size:clamp(10px,.78vw,13px)!important;line-height:1.3!important;letter-spacing:.12em!important}
.card-code{color:var(--beige)!important;text-align:left!important}
.card-category{color:var(--muted)!important;text-align:right!important}
.favorite-filter i.five-star{border:0!important;font-size:18px!important;width:18px!important;height:18px!important;color:transparent!important;-webkit-text-stroke:1px var(--gold2)!important}
.favorite-filter input:checked+i.five-star{color:var(--gold2)!important;-webkit-text-stroke:0!important;background:none!important}
.modal-shade{cursor:default!important}.viewer-close{display:inline-grid!important;place-items:center!important;width:44px!important;height:44px!important;cursor:pointer!important;position:relative!important;z-index:6!important}
@media(max-width:1150px){:root{--grid-columns:4}}
@media(max-width:850px){
 :root{--grid-columns:2}
 .topbar{grid-template-columns:auto 1fr auto!important;min-height:88px!important;padding:10px 4vw!important;gap:10px!important}
 .brand-lockup{gap:7px}.brand-five{width:52px;height:52px}.brand-wordmark{width:72px;height:20px}
 .topcopy{grid-column:2}.topcopy h1{white-space:normal;font-size:clamp(18px,4.5vw,24px)!important;line-height:1!important}
 .selection-button{grid-column:3}
 .filters{top:88px!important;max-height:46vh;overflow:auto;padding:15px 4vw!important}
 .filter-footer{padding-left:0}.zoom-control{display:none}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .card footer p{font-size:10px!important}
}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v03 · VISIBILITY AND MODAL PASS
   ========================================================= */
/* Larger left brand lockup, while the library title remains optically centred. */
.brand-five{width:88px!important;height:88px!important}
.brand-wordmark{width:168px!important;height:46px!important}

/* Filters must read as permanent navigation, not microcopy. */
.filter-group>span{font-size:12px!important;letter-spacing:.18em!important;padding-top:6px!important}
.chips button,.checks label,.filter-footer button{font-size:clamp(13px,1vw,16px)!important;letter-spacing:.075em!important;line-height:1.35!important}
.chips{gap:9px 12px!important}.chips button+button:before{margin-right:12px!important}
.checks{gap:12px 30px!important}
.checks i{width:20px!important;height:20px!important;font-size:12px!important}
.favorite-filter i.five-star{font-size:22px!important;width:22px!important;height:22px!important}

/* Compact footer: count | zoom line | clear. */
.filter-footer{justify-content:flex-start!important;gap:18px!important;padding-left:110px!important}
.filter-footer>*+*:before{content:'';display:inline-block;width:1px;height:20px;background:var(--line);margin-right:18px;vertical-align:middle}
.result-count{font-size:12px!important;white-space:nowrap!important}.zoom-control{font-size:11px!important;gap:12px!important}.zoom-control input{width:150px!important}.filter-footer button{border:0;background:none;color:var(--gold2);padding:5px 0;cursor:pointer}

/* Real posters from R2 remain visible below the video layer. */
.card img{z-index:1}.card video{z-index:2}.card-favorite{z-index:4}

/* Modal controls hug the media area. The panel is translucent and clean. */
.modal-shade{background:rgba(0,0,0,.84)!important;backdrop-filter:blur(12px)!important}
.viewer-panel{inset:5vh 5vw!important;grid-template-columns:52px minmax(0,1fr) 52px!important;grid-template-rows:46px minmax(0,1fr) 38px!important;padding:0 1vw 1vh!important;background:rgba(17,16,14,.72)!important;border:1px solid rgba(210,173,99,.16)!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important}
.viewer-top{grid-column:2!important;padding:0 2px!important}.viewer-top p{font-size:clamp(12px,.95vw,15px)!important;letter-spacing:.13em!important;color:var(--beige)!important}.viewer-top>div{margin-left:auto}.viewer-favorite{font-size:28px!important;margin:0!important;width:42px;height:42px;cursor:pointer}.viewer-nav{font-size:52px!important;opacity:.82!important;cursor:pointer}.transport{font-size:11px!important;grid-template-columns:48px 1fr 48px!important;gap:12px!important}.transport input{height:3px!important}.viewer-media{background:transparent!important}

/* Selection CTA: one compact count, then the contact form. */
.selection-summary{display:flex;align-items:center;gap:14px;padding:18px 0 22px;border-bottom:1px solid var(--line)}
.selection-summary .five-star{font-size:30px;color:var(--gold2);-webkit-text-stroke:0}
.selection-summary p{margin:0;font-size:14px;letter-spacing:.14em;color:var(--beige)}
.selection-summary b{font-size:22px;color:var(--gold2);margin-right:7px}
.drawer>section{width:min(560px,94vw)!important;padding:36px!important}.drawer header p{font-size:11px!important}.drawer h2{font-size:clamp(36px,3vw,48px)!important}.request{margin-top:28px!important}.request h3{font-size:32px!important}.request>p{font-size:15px!important;line-height:1.5!important}.request label{font-size:11px!important}.request input,.request textarea{font-size:16px!important;padding:14px!important}.request form>button{font-size:11px!important;padding:17px!important}

@media(max-width:850px){
 .brand-five{width:58px!important;height:58px!important}.brand-wordmark{width:92px!important;height:25px!important}
 .filter-group>span{font-size:10px!important}.chips button,.checks label,.filter-footer button{font-size:8px!important}
 .filter-footer{padding-left:0!important;gap:10px!important;flex-wrap:wrap!important}.filter-footer>*+*:before{margin-right:10px!important}.zoom-control{display:flex!important;font-size:9px!important}.zoom-control input{width:90px!important}
 .viewer-panel{inset:3vh 2vw!important;grid-template-columns:38px minmax(0,1fr) 38px!important}.viewer-top{grid-column:1/-1!important;padding:0 42px!important}.viewer-top p{font-size:11px!important}.viewer-favorite{font-size:25px!important}.viewer-nav{font-size:42px!important}.transport{grid-column:1/-1!important;margin:0 10px!important}
 .drawer>section{padding:24px!important}.request h3{font-size:28px!important}
}

/* v04 critical runtime + selection-link restore */
.selection-copy{display:block!important;width:100%!important;margin:12px 0 0!important;font-size:11px!important;padding:15px!important}
.card.media-error .poster-fallback:after{content:"VIDEO NO DISPONIBLE";position:absolute;bottom:18px;color:var(--gold2);font-size:9px;letter-spacing:.14em}
.card.poster-error .poster-fallback{display:grid!important}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v05 · FINAL UI POLISH
   ========================================================= */
.topbar{min-height:88px!important;height:88px!important;padding:0 5vw!important}
.brand-five{width:68px!important;height:68px!important}
.brand-wordmark{width:152px!important;height:40px!important}
.filters{top:88px!important}
.selection-button{border:1px solid var(--gold)!important;padding:14px 19px!important;font-size:12px!important;letter-spacing:.16em!important;color:var(--beige)!important;min-height:48px!important}
.selection-button .five-star{font-size:20px!important}.selection-button b{font-size:14px!important}
.drawer h2{font-size:clamp(25px,2vw,32px)!important;white-space:nowrap!important}
.selection-summary{gap:12px!important}.selection-summary #clearSelection{margin-left:auto;border:0;background:none;color:var(--gold2);font-size:10px;letter-spacing:.14em;padding:8px 0;cursor:pointer}.selection-summary #clearSelection.confirm{color:#d96155!important}
.viewer-panel{inset:50%!important;width:min(calc(100vw - 6vw),calc(88vh + 104px))!important;height:min(calc(100vh - 6vh),calc(88vw + 84px))!important;max-width:96vw!important;max-height:94vh!important;transform:translate(-50%,-50%)!important;grid-template-columns:48px minmax(0,1fr) 48px!important;grid-template-rows:42px minmax(0,1fr) 40px!important;padding:10px!important;background:rgba(5,5,5,.82)!important;border:1px solid rgba(210,173,99,.12)!important}
.viewer-media{min-width:0!important;min-height:0!important}.viewer-media video{max-width:calc(100% - 4px)!important;max-height:calc(100% - 4px)!important}
.viewer-top{grid-column:2!important;padding:0!important}.viewer-nav{align-self:center!important}
.viewer-favorite{color:transparent!important;-webkit-text-stroke:1px var(--gold2)!important;background:none!important;border:0!important}.viewer-favorite.is-favorite{color:var(--gold2)!important;-webkit-text-stroke:0!important}
.transport{font-size:20px!important;grid-template-columns:62px 1fr 62px!important;color:var(--beige)!important}.transport span:last-child{text-align:right!important}
@media(max-width:850px){.topbar{height:76px!important;min-height:76px!important}.brand-five{width:54px!important;height:54px!important}.brand-wordmark{width:96px!important;height:27px!important}.filters{top:76px!important}.selection-button{min-height:42px!important;padding:11px 12px!important}.drawer h2{font-size:23px!important}.viewer-panel{width:96vw!important;height:92vh!important;padding:7px!important;grid-template-columns:36px minmax(0,1fr) 36px!important}.transport{font-size:16px!important;grid-template-columns:48px 1fr 48px!important}}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v06 · R2 CATALOG + VIEW MODE
   Base visual design remains v05.
   ========================================================= */
.view-control{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;letter-spacing:.15em}
.view-options{display:flex;align-items:center;gap:8px}
.view-options button{border:0;background:none;color:var(--muted);font-size:12px;letter-spacing:.08em;padding:5px 0;cursor:pointer}
.view-options button+button:before{content:'·';color:#4f4a43;margin-right:8px}
.view-options button.active{color:var(--gold2)}
.filter-footer .result-count{order:1}.filter-footer .zoom-control{order:2}.filter-footer .view-control{order:3}.filter-footer #clearFilters{order:4}

/* The chosen view is a crop preview, not a catalogue filter. */
html[data-view="1-1"] .card-media{aspect-ratio:1/1}
html[data-view="16-9"] .card-media{aspect-ratio:16/9}
html[data-view="9-16"] .card-media{aspect-ratio:9/16}
html[data-view="4-5"] .card-media{aspect-ratio:4/5}
.card-media img,.card-media video{object-fit:cover!important;object-position:center center!important}

/* Modal preserves the same crop preview selected in the catalogue. */
html[data-view="1-1"] .viewer-media{aspect-ratio:1/1}
html[data-view="16-9"] .viewer-media{aspect-ratio:16/9}
html[data-view="9-16"] .viewer-media{aspect-ratio:9/16}
html[data-view="4-5"] .viewer-media{aspect-ratio:4/5}
.viewer-media{width:auto!important;max-width:100%!important;max-height:100%!important;justify-self:center!important;overflow:hidden!important;background:#050505!important}
.viewer-media video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important}

@media(max-width:850px){.view-control{font-size:9px;gap:7px}.view-options{gap:5px}.view-options button{font-size:10px}.view-options button+button:before{margin-right:5px}.filter-footer{align-items:center!important}}

/* v07 modal AR correction */
.viewer-panel{position:absolute!important;inset:50%!important;width:min(calc(100vw - 6vw),calc(88vh + 104px))!important;height:min(calc(100vh - 6vh),calc(88vw + 84px))!important;max-width:96vw!important;max-height:94vh!important;transform:translate(-50%,-50%)!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important;grid-template-rows:42px minmax(0,1fr) 40px!important;align-items:center!important;padding:10px!important;background:rgba(5,5,5,.82)!important;border:1px solid rgba(210,173,99,.12)!important}.viewer-top{grid-column:2!important;grid-row:1!important;padding:0!important}.viewer-nav{grid-row:2!important;position:static!important;transform:none!important;align-self:center!important}.viewer-nav.prev{grid-column:1!important}.viewer-nav.next{grid-column:3!important}.transport{grid-column:2!important;grid-row:3!important;width:100%!important;justify-self:stretch!important;margin:0!important}.viewer-media{grid-column:2!important;grid-row:2!important;position:relative!important;display:grid!important;place-items:center!important;justify-self:center!important;align-self:center!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;overflow:hidden!important;background:#050505!important}.viewer-media video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;display:block!important;cursor:pointer!important}html[data-view="1-1"] .viewer-media{width:min(100%,calc(94vh - 112px))!important;aspect-ratio:1/1!important}html[data-view="16-9"] .viewer-media{width:100%!important;max-height:calc(94vh - 112px)!important;aspect-ratio:16/9!important}html[data-view="9-16"] .viewer-media{height:calc(94vh - 112px)!important;max-width:100%!important;aspect-ratio:9/16!important}html[data-view="4-5"] .viewer-media{height:calc(94vh - 112px)!important;max-width:100%!important;aspect-ratio:4/5!important}@media(max-width:850px){.viewer-panel{width:96vw!important;height:92vh!important;padding:7px!important;grid-template-columns:36px minmax(0,1fr) 36px!important;grid-template-rows:42px minmax(0,1fr) 40px!important}html[data-view="1-1"] .viewer-media{width:min(100%,calc(92vh - 105px))!important}html[data-view="16-9"] .viewer-media{width:100%!important;max-height:calc(92vh - 105px)!important}html[data-view="9-16"] .viewer-media,html[data-view="4-5"] .viewer-media{height:calc(92vh - 105px)!important;max-width:100%!important}}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v08 · MOBILE FILTERS, ZOOM, MODAL
   ========================================================= */
/* Thin outlined favourite in catalogue and viewer. Filled state remains gold. */
.card-favorite,.viewer-favorite{
  color:transparent!important;
  -webkit-text-stroke:.65px var(--gold2)!important;
  font-weight:300!important;
}
.card-favorite.is-favorite,.viewer-favorite.is-favorite{
  color:var(--gold2)!important;
  -webkit-text-stroke:0!important;
}

/* The grey modal frame follows both media width and media height. */
.viewer-panel{inset:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
html[data-view="1-1"] .viewer-panel{--mw:min(calc(88vw - 104px),calc(88vh - 112px));width:calc(var(--mw) + 104px)!important;height:calc(var(--mw) + 82px)!important}
html[data-view="16-9"] .viewer-panel{--mw:min(calc(88vw - 104px),calc((88vh - 112px) * 16 / 9));width:calc(var(--mw) + 104px)!important;height:calc(var(--mw) * 9 / 16 + 82px)!important}
html[data-view="9-16"] .viewer-panel{--mh:min(calc(88vh - 112px),calc((88vw - 104px) * 16 / 9));width:calc(var(--mh) * 9 / 16 + 104px)!important;height:calc(var(--mh) + 82px)!important}
html[data-view="4-5"] .viewer-panel{--mh:min(calc(88vh - 112px),calc((88vw - 104px) * 5 / 4));width:calc(var(--mh) * 4 / 5 + 104px)!important;height:calc(var(--mh) + 82px)!important}
html[data-view] .viewer-media{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important}

@media(max-width:850px){
  /* Compact, efficient mobile filter stack. */
  .filters{max-height:none!important;overflow:visible!important;padding:10px 4vw 9px!important;gap:6px!important}
  .filter-group{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
  .filter-group>span{font-size:8px!important;padding:0!important;line-height:1.1!important}
  .chips{display:flex!important;flex-wrap:nowrap!important;gap:0 5px!important;overflow:hidden!important;align-items:center!important}
  .chips button{font-size:9px!important;letter-spacing:.025em!important;padding:2px 0!important;white-space:nowrap!important;min-width:0!important}
  .chips button+button:before{margin-right:5px!important}
  .checks{display:flex!important;flex-wrap:nowrap!important;gap:0 7px!important;padding:0!important;overflow:hidden!important;align-items:center!important}
  .checks label{font-size:8px!important;letter-spacing:.025em!important;white-space:nowrap!important;padding:2px 0!important}
  .checks i{width:13px!important;height:13px!important;margin-right:3px!important;font-size:8px!important}
  .checks .favorite-filter i.five-star{width:13px!important;height:13px!important;font-size:14px!important}
  .filter-footer{display:grid!important;grid-template-columns:auto minmax(92px,1fr) auto auto!important;gap:5px 8px!important;padding:0!important;align-items:center!important;flex-wrap:nowrap!important}
  .filter-footer>*+*:before{display:none!important;content:none!important}
  .result-count{font-size:8px!important;padding:0!important}
  .zoom-control{display:flex!important;gap:4px!important;font-size:8px!important;white-space:nowrap!important}
  .zoom-control input{width:74px!important}
  .view-control{gap:4px!important;font-size:8px!important;white-space:nowrap!important}
  .view-options{gap:3px!important}.view-options button{font-size:8px!important}.view-options button+button:before{margin-right:3px!important}
  #clearFilters{font-size:8px!important;white-space:nowrap!important}
  .grid{grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr))!important}

  /* Leave a reliable outside-click area on every mobile aspect ratio. */
  html[data-view="1-1"] .viewer-panel{--mw:min(calc(88vw - 72px),calc(84svh - 105px));width:calc(var(--mw) + 72px)!important;height:calc(var(--mw) + 82px)!important}
  html[data-view="16-9"] .viewer-panel{--mw:min(calc(88vw - 72px),calc((84svh - 105px) * 16 / 9));width:calc(var(--mw) + 72px)!important;height:calc(var(--mw) * 9 / 16 + 82px)!important}
  html[data-view="9-16"] .viewer-panel{--mh:min(calc(84svh - 105px),calc((88vw - 72px) * 16 / 9));width:calc(var(--mh) * 9 / 16 + 72px)!important;height:calc(var(--mh) + 82px)!important}
  html[data-view="4-5"] .viewer-panel{--mh:min(calc(84svh - 105px),calc((88vw - 72px) * 5 / 4));width:calc(var(--mh) * 4 / 5 + 72px)!important;height:calc(var(--mh) + 82px)!important}
}

/* LIBRARY v10 · WORKER-FIRST SEARCH */
.library-search{display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:center}.library-search>label{color:var(--gold2);font-size:12px;letter-spacing:.18em}.library-search-field{position:relative;max-width:680px}.library-search-field input{width:100%;height:42px;padding:8px 42px 8px 0;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--beige)}.library-search-field button{position:absolute;right:0;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--gold2);font-size:22px}.library-search-field button[hidden]{display:none}@media(max-width:850px){.library-search{grid-template-columns:1fr;gap:2px}.library-search>label{font-size:8px}.library-search-field input{height:30px;font-size:10px}}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v11 · MOBILE INTERFACE
   ========================================================= */
.mobile-density{display:none}
.card-media img,.card-media video,.viewer-media video{-webkit-user-drag:none;user-select:none}
@media(max-width:850px){
  /* Mobile uses one compact toggle instead of the desktop slider. */
  .zoom-control{display:none!important}
  .mobile-density{display:inline-flex!important;align-items:center;gap:5px;border:0;background:none;color:var(--muted);font-size:8px;letter-spacing:.08em;padding:2px 0;white-space:nowrap;cursor:pointer}
  .mobile-density b{color:var(--gold2);font-size:11px}
  .filter-footer{grid-template-columns:auto auto minmax(0,1fr) auto!important}
  /* 2 columns: detailed list. 3 columns: extended visual list without captions. */
  html[data-mobile-columns="2"] .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-mobile-columns="3"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px 5px!important}
  html[data-mobile-columns="3"] .card footer{display:none!important}
  /* Smaller favourite, seated close to the thumbnail edge. */
  .card-favorite{right:4px!important;top:4px!important;width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;padding:0!important;font-size:14px!important;line-height:1!important}
  .viewer-media{touch-action:pan-y!important}
}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v12 · FINAL ZOOM ORDER + TWO TAP
   ========================================================= */
/* Desktop: only the control name changes from TAMAÑO to ZOOM. */
.filter-footer .result-count{order:1!important}
.filter-footer .view-control{order:2!important}
.filter-footer .zoom-control{order:3!important}
.filter-footer .mobile-density{order:3!important}
.filter-footer #clearFilters{order:4!important}
.zoom-control>span{color:var(--gold2)!important}

@media(max-width:850px){
  /* Exact sequence: exploraciones, vista, zoom, limpiar. */
  .filter-footer{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
    column-gap:8px!important;
    row-gap:5px!important;
    align-items:center!important;
  }
  .result-count{font-size:8px!important;white-space:nowrap!important}
  .view-control{justify-self:start!important}
  .mobile-density{
    display:inline-flex!important;
    justify-self:end!important;
    color:var(--gold2)!important;
    font-size:8px!important;
    letter-spacing:.08em!important;
    line-height:1.35!important;
  }
  #clearFilters{justify-self:end!important}
}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v13 · MOBILE FOOTER + CLEAR CONFIRM
   ========================================================= */
#clearFilters.confirm{color:#d96155!important}
@media(max-width:850px){
  /* Keep all controls packed immediately after 4:5, with no elastic spacer. */
  .filter-footer{
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }
  .filter-footer .result-count,
  .filter-footer .view-control,
  .filter-footer .mobile-density,
  .filter-footer #clearFilters{flex:0 0 auto!important;justify-self:auto!important;margin:0!important}
  .mobile-density{font-size:8px!important;color:var(--gold2)!important;padding:2px 0!important}
  #clearFilters{font-size:8px!important;padding:2px 0!important}
}

/* =========================================================
   FIVE DEMOFILMS LIBRARY v14 · MULTI FILTERS + COMPACT UI + INFO
   ========================================================= */
.topbar{height:72px!important;min-height:72px!important;padding:0 5vw!important}
.brand-five{width:56px!important;height:56px!important}.brand-wordmark{width:138px!important;height:36px!important}
.topcopy h1{font-size:clamp(23px,2.25vw,36px)!important}
.selection-button{min-height:38px!important;padding:9px 13px!important;font-size:10px!important}.selection-button .five-star{font-size:17px!important}.selection-button b{font-size:12px!important}
.filters{top:72px!important;padding:14px 5vw 12px!important;gap:8px!important}
.library-search-field input{height:34px!important}.filter-group{gap:12px!important}.filter-group>span{padding-top:3px!important}
.checks{gap:7px 22px!important}.filter-footer{gap:13px!important}.filter-footer>*+*:before{height:16px!important;margin-right:13px!important}
.card footer{min-height:27px!important;overflow:hidden!important}.card footer p{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.15!important}.card-code{flex:0 0 auto!important}.card-category{flex:1 1 auto!important;min-width:0!important}
.mobile-filter-combo{display:none}
.viewer-info{grid-column:4;grid-row:2;align-self:center;width:190px;margin-left:14px;padding:13px 14px;border:1px solid rgba(210,173,99,.18);border-radius:9px;color:#8e877d;background:rgba(8,8,7,.35);font-size:9px;line-height:1.35}
.viewer-info dl{margin:0}.viewer-info div{display:grid;grid-template-columns:68px 1fr;gap:7px;padding:3px 0}.viewer-info dt{color:#706a62}.viewer-info dd{margin:0;color:#a39b90;overflow-wrap:anywhere}
.viewer-panel{grid-template-columns:48px minmax(0,1fr) 48px 218px!important}
.viewer-top{grid-column:2/5!important}.transport{grid-column:2!important}
@media(max-width:1100px) and (orientation:landscape){.filters{padding-top:9px!important;padding-bottom:8px!important;gap:5px!important}.library-search-field input{height:30px!important}.checks{gap:4px 16px!important}.viewer-panel{grid-template-columns:42px minmax(0,1fr) 42px 190px!important}.viewer-info{width:172px;margin-left:8px}}
@media(max-width:850px){
 .topbar{height:62px!important;min-height:62px!important;padding:0 4vw!important}.brand-five{width:45px!important;height:45px!important}.brand-wordmark{width:86px!important;height:24px!important}.topcopy h1{font-size:clamp(15px,4vw,20px)!important;white-space:nowrap!important}.selection-button{min-height:34px!important;padding:7px 9px!important}
 .filters{top:62px!important;padding:7px 4vw 7px!important;gap:4px!important}.library-search-field input{height:27px!important}.filter-group{gap:1px!important}.filter-group>.chips{display:none!important}.filter-group>span{font-size:7px!important}
 .mobile-filter-combo{display:block;position:relative}.mobile-filter-combo summary{list-style:none;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:9px;cursor:pointer}.mobile-filter-combo summary::-webkit-details-marker{display:none}.mobile-filter-combo summary b{color:var(--gold2);font-weight:500}.mobile-filter-options{position:absolute;z-index:60;left:0;right:0;top:29px;max-height:190px;overflow:auto;padding:7px;background:#11100e;border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 35px #000}.mobile-filter-options label{display:flex;align-items:center;gap:7px;padding:6px 3px;color:var(--beige);font-size:10px}.mobile-filter-options input{accent-color:var(--gold2)}
 .checks{gap:0 7px!important}.filter-footer{gap:6px!important}.grid{padding-top:14px!important}.card footer{min-height:24px!important;padding-top:6px!important}.card footer p{font-size:8px!important}
 .viewer-panel{grid-template-columns:32px minmax(0,1fr) 32px!important;grid-template-rows:38px minmax(0,1fr) auto 36px!important;width:96vw!important;height:92svh!important}.viewer-top{grid-column:1/-1!important}.viewer-media{grid-row:2!important}.viewer-nav{grid-row:2!important}.viewer-info{grid-column:2!important;grid-row:3!important;width:100%!important;margin:7px 0 4px!important;padding:8px 10px!important;font-size:8px!important}.viewer-info dl{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}.viewer-info div{grid-template-columns:57px 1fr;padding:2px 0}.transport{grid-column:1/-1!important;grid-row:4!important}
}
@media(max-width:850px) and (orientation:landscape){.filters{padding:5px 4vw!important;gap:3px!important}.library-search{grid-template-columns:72px 1fr!important;gap:8px!important}.filter-group{grid-template-columns:72px 1fr!important;gap:8px!important}.mobile-filter-combo summary{height:23px}.checks{padding-left:80px!important}.viewer-info{grid-column:4!important;grid-row:2!important;width:165px!important;margin-left:6px!important}.viewer-panel{grid-template-columns:30px minmax(0,1fr) 30px 175px!important;grid-template-rows:34px minmax(0,1fr) 32px!important}.transport{grid-column:2!important;grid-row:3!important}}

/* v14.1 · consolidated taxonomy, text-only mobile combo and optical alignment */
@media(max-width:850px){
  .mobile-filter-combo summary{overflow:hidden!important;justify-content:flex-start!important}
  .mobile-filter-combo summary span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
  .mobile-filter-options label{cursor:pointer!important;gap:0!important}
  .mobile-filter-options label input{position:absolute!important;opacity:0!important;pointer-events:none!important}
  .mobile-filter-options label span{color:var(--muted)!important;transition:color .12s ease}
  .mobile-filter-options label.active span{color:var(--gold2)!important}
}
/* Favourites row: compensate the star glyph's low visual baseline. */
.checks .favorite-filter{display:inline-flex!important;align-items:center!important}
.checks .favorite-filter i.five-star{position:relative!important;top:-2px!important}
/* Thumbnail favourite: true geometric centring plus a tiny glyph correction. */
.card-favorite{display:grid!important;place-items:center!important;padding:0!important;line-height:1!important;text-indent:0!important}
.card-favorite::first-letter{line-height:1!important}
.card-favorite{padding-bottom:2px!important}


/* =========================================================
   FIVE DEMOFILMS LIBRARY v15 · RESPONSIVE + MODAL + FULLSCREEN
   ========================================================= */
/* Header */
.selection-button > span:not(.five-star){white-space:nowrap}
@media(max-width:850px){
  .topbar{grid-template-columns:minmax(94px,auto) minmax(0,1fr) auto!important;gap:6px!important}
  .topcopy{min-width:0!important;width:100%!important}
  .topcopy h1{font-size:clamp(12px,3.35vw,17px)!important;line-height:.98!important;white-space:normal!important;overflow-wrap:normal!important}
  .selection-button > span:not(.five-star){display:none!important}
}

/* Filters: only one mobile details menu remains open through JS. */
.mobile-filter-combo[open]{z-index:65}

/* Favourite glyph alignment, shared by desktop and mobile. */
.checks .favorite-filter i.five-star{top:-4px!important}
.card-favorite{display:flex!important;align-items:center!important;justify-content:center!important;padding:0 0 2px 0!important;line-height:1!important;font-family:Arial,sans-serif!important}

/* Desktop slider direction: left means more columns, right means fewer. */
.zoom-control input{direction:ltr}

/* Modal: media, transport, then technical information across full width. */
.viewer-panel{
  width:min(94vw,1280px)!important;
  height:min(94vh,980px)!important;
  grid-template-columns:48px minmax(0,1fr) 48px!important;
  grid-template-rows:42px minmax(0,1fr) 42px auto!important;
  align-content:stretch!important;
}
.viewer-top{grid-column:2!important;grid-row:1!important}
.viewer-media{grid-column:2!important;grid-row:2!important;max-width:100%!important;max-height:100%!important}
.viewer-nav{grid-row:2!important}
.viewer-nav.prev{grid-column:1!important}.viewer-nav.next{grid-column:3!important}
.transport{grid-column:2!important;grid-row:3!important;grid-template-columns:50px minmax(0,1fr) 50px 34px!important;gap:10px!important}
.viewer-fullscreen{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--beige);font-size:20px;line-height:1;cursor:pointer;padding:0}
.viewer-info{grid-column:2!important;grid-row:4!important;width:100%!important;margin:8px 0 0!important;padding:11px 13px!important;align-self:stretch!important}
.viewer-info dl{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px 18px!important}
.viewer-info div{display:grid!important;grid-template-columns:minmax(64px,auto) 1fr!important;gap:8px!important;padding:2px 0!important}
.fullscreen-close{display:none;position:absolute;z-index:12;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));width:44px;height:44px;border:1px solid rgba(233,224,208,.35);border-radius:50%;background:rgba(8,8,7,.62);color:var(--beige);font-size:29px;line-height:1;cursor:pointer}
.viewer-media:fullscreen,.viewer-media:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;background:#000!important;overflow:hidden!important}
.viewer-media:fullscreen video,.viewer-media:-webkit-full-screen video{object-fit:contain!important}
.viewer-media:fullscreen .fullscreen-close,.viewer-media:-webkit-full-screen .fullscreen-close{display:grid!important;place-items:center!important}
@media(max-width:900px){.viewer-info dl{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:850px){
  .viewer-panel{width:96vw!important;height:92svh!important;grid-template-columns:32px minmax(0,1fr) 32px!important;grid-template-rows:38px minmax(0,1fr) 38px auto!important}
  .viewer-top{grid-column:1/-1!important;grid-row:1!important;padding:0 34px!important}
  .viewer-media{grid-column:2!important;grid-row:2!important}
  .viewer-nav{grid-row:2!important}
  .transport{grid-column:1/-1!important;grid-row:3!important;grid-template-columns:42px minmax(0,1fr) 42px 30px!important;margin:0 6px!important}
  .viewer-info{grid-column:1/-1!important;grid-row:4!important;margin:6px 6px 0!important;width:calc(100% - 12px)!important}
  .viewer-info dl{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 10px!important}
}
@media(max-width:430px){.viewer-info dl{grid-template-columns:1fr!important}}
@media(max-width:850px) and (orientation:landscape){
  .viewer-panel{grid-template-columns:30px minmax(0,1fr) 30px!important;grid-template-rows:32px minmax(0,1fr) 34px auto!important}
  .viewer-info{grid-column:2!important;grid-row:4!important;width:100%!important;margin:5px 0 0!important}
  .transport{grid-column:2!important;grid-row:3!important}
}

/* =========================================================
   FIVE DEMOFILMS LIBRARY v15 MODAL REBUILD
   Stable stack: media > transport > information.
   ========================================================= */
html[data-view="1-1"]{--viewer-ar:1}
html[data-view="16-9"]{--viewer-ar:1.7777778}
html[data-view="9-16"]{--viewer-ar:.5625}
html[data-view="4-5"]{--viewer-ar:.8}

.viewer-panel{
  --side:48px;
  --top:42px;
  --transport-h:42px;
  --info-h:62px;
  --panel-pad:10px;
  --media-max-h:calc(92dvh - var(--top) - var(--transport-h) - var(--info-h) - (var(--panel-pad) * 2));
  --media-max-w:calc(92vw - (var(--side) * 2) - (var(--panel-pad) * 2));
  --media-w:min(var(--media-max-w),calc(var(--media-max-h) * var(--viewer-ar)));
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:calc(var(--media-w) + (var(--side) * 2) + (var(--panel-pad) * 2))!important;
  height:auto!important;
  max-width:94vw!important;
  max-height:94dvh!important;
  padding:var(--panel-pad)!important;
  display:grid!important;
  grid-template-columns:var(--side) minmax(0,var(--media-w)) var(--side)!important;
  grid-template-rows:var(--top) auto!important;
  align-items:stretch!important;
  align-content:start!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.viewer-top{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;padding:0!important}
.viewer-stack{
  grid-column:2!important;
  grid-row:2!important;
  width:var(--media-w)!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
}
.viewer-nav{grid-row:2!important;align-self:flex-start!important;height:calc(var(--media-w) / var(--viewer-ar))!important;display:grid!important;place-items:center!important}
.viewer-nav.prev{grid-column:1!important}.viewer-nav.next{grid-column:3!important}
.viewer-media,
html[data-view] .viewer-media{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:var(--viewer-ar)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:var(--media-max-h)!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(210,173,99,.16)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#050505!important;
}
.viewer-media video,
html[data-view] .viewer-media video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.transport{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 var(--transport-h)!important;
  width:100%!important;
  height:var(--transport-h)!important;
  min-height:var(--transport-h)!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}
.viewer-info{
  position:relative!important;
  inset:auto!important;
  flex:0 0 var(--info-h)!important;
  width:100%!important;
  height:var(--info-h)!important;
  min-height:var(--info-h)!important;
  margin:0!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
  overflow:hidden!important;
}
.viewer-info dl{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:3px 18px!important;
  height:100%!important;
  margin:0!important;
}
.viewer-info div:nth-child(1){grid-column:1!important;grid-row:1!important}
.viewer-info div:nth-child(2){grid-column:1!important;grid-row:2!important}
.viewer-info div:nth-child(3){grid-column:2!important;grid-row:1!important}
.viewer-info div:nth-child(4){grid-column:2!important;grid-row:2!important}
.viewer-info div:nth-child(5){grid-column:3!important;grid-row:1!important}
.viewer-info div:nth-child(6){grid-column:3!important;grid-row:2!important}

/* Full screen: selected crop ratio, fitted inside the monitor without clipping. */
.viewer-media:fullscreen,
.viewer-media:-webkit-full-screen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  border:0!important;
  background:#000!important;
  overflow:hidden!important;
}
html[data-view] .viewer-media:fullscreen video,
html[data-view] .viewer-media:-webkit-full-screen video{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(100vw,calc(100vh * var(--viewer-ar)))!important;
  height:min(100vh,calc(100vw / var(--viewer-ar)))!important;
  aspect-ratio:var(--viewer-ar)!important;
  object-fit:cover!important;
  object-position:center center!important;
}

@media(max-width:850px){
 .viewer-panel{
   --side:32px;--top:38px;--transport-h:38px;--info-h:58px;--panel-pad:7px;
   --media-max-h:calc(94dvh - var(--top) - var(--transport-h) - var(--info-h) - (var(--panel-pad) * 2));
   --media-max-w:calc(96vw - (var(--side) * 2) - (var(--panel-pad) * 2));
   max-width:96vw!important;max-height:94dvh!important;
 }
 .viewer-top{grid-column:2!important;grid-row:1!important;padding:0!important}
 .viewer-info dl{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px 7px!important}
}
@media(max-width:850px) and (orientation:landscape){
 .viewer-panel{--side:30px;--top:32px;--transport-h:34px;--info-h:55px}
}


/* =========================================================
   CONSOLIDATED MODAL MODULE
   Previously: modal_v15.css
   ========================================================= */
/* Five DemoFilms Library v15 - isolated modal layout */
html[data-view="1-1"]{--modal-ratio:1/1}
html[data-view="16-9"]{--modal-ratio:16/9}
html[data-view="9-16"]{--modal-ratio:9/16}
html[data-view="4-5"]{--modal-ratio:4/5}

#viewer.modal{position:fixed!important;inset:0!important;z-index:100!important}
#viewer .viewer-panel{
  --panel-pad:10px;
  --side:48px;
  --head-h:42px;
  --transport-h:42px;
  --info-h:62px;
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  box-sizing:border-box!important;
  width:calc(var(--modal-media-w,640px) + (2 * var(--side)) + (2 * var(--panel-pad)))!important;
  height:calc(var(--modal-media-h,360px) + var(--head-h) + var(--transport-h) + var(--info-h) + (2 * var(--panel-pad)))!important;
  max-width:94vw!important;
  max-height:94dvh!important;
  margin:0!important;
  padding:var(--panel-pad)!important;
  display:grid!important;
  grid-template-columns:var(--side) minmax(0,1fr) var(--side)!important;
  grid-template-rows:var(--head-h) minmax(0,1fr)!important;
  align-items:stretch!important;
  align-content:stretch!important;
  overflow:hidden!important;
  background:rgba(5,5,5,.82)!important;
  border:1px solid rgba(210,173,99,.12)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
}
#viewer .viewer-top{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
#viewer .viewer-stack{
  grid-column:2!important;
  grid-row:2!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) var(--transport-h) var(--info-h)!important;
  gap:0!important;
  overflow:hidden!important;
}
#viewer .viewer-nav{grid-row:2!important;align-self:start!important;height:var(--modal-media-h,360px)!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important}
#viewer .viewer-nav.prev{grid-column:1!important}
#viewer .viewer-nav.next{grid-column:3!important}
#viewer .viewer-media,
html[data-view] #viewer .viewer-media{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:var(--modal-ratio)!important;
  overflow:hidden!important;
  background:#050505!important;
  border:1px solid rgba(210,173,99,.16)!important;
}
#viewer .viewer-media video,
html[data-view] #viewer .viewer-media video{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
#viewer .transport{
  grid-column:1!important;
  grid-row:2!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--transport-h)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  align-self:stretch!important;
}
#viewer .viewer-info{
  grid-column:1!important;
  grid-row:3!important;
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--info-h)!important;
  min-height:0!important;
  margin:0!important;
  padding:8px 12px!important;
  align-self:stretch!important;
  overflow:hidden!important;
}
#viewer .viewer-info dl{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,1fr)!important;gap:3px 18px!important;height:100%!important;margin:0!important}
#viewer .viewer-info div:nth-child(1){grid-column:1!important;grid-row:1!important}
#viewer .viewer-info div:nth-child(2){grid-column:1!important;grid-row:2!important}
#viewer .viewer-info div:nth-child(3){grid-column:2!important;grid-row:1!important}
#viewer .viewer-info div:nth-child(4){grid-column:2!important;grid-row:2!important}
#viewer .viewer-info div:nth-child(5){grid-column:3!important;grid-row:1!important}
#viewer .viewer-info div:nth-child(6){grid-column:3!important;grid-row:2!important}

html[data-view] #viewer .viewer-media:fullscreen,
html[data-view] #viewer .viewer-media:-webkit-full-screen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border:0!important;aspect-ratio:auto!important;background:#000!important}
html[data-view] #viewer .viewer-media:fullscreen video,
html[data-view] #viewer .viewer-media:-webkit-full-screen video{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:var(--fullscreen-w,100vw)!important;height:var(--fullscreen-h,100vh)!important;object-fit:cover!important;object-position:center!important}

@media(max-width:850px){
 #viewer .viewer-panel{--panel-pad:7px;--side:32px;--head-h:38px;--transport-h:38px;--info-h:58px;max-width:96vw!important;max-height:94dvh!important}
 #viewer .viewer-info dl{gap:2px 7px!important}
}
@media(max-width:850px) and (orientation:landscape){#viewer .viewer-panel{--side:30px;--head-h:32px;--transport-h:34px;--info-h:55px}}


/* v15 info labels and single-line truncation */
#viewer .viewer-info div{min-width:0!important;overflow:hidden!important}
#viewer .viewer-info dt,#viewer .viewer-info dd{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}


/* v16 · compact technical labels without changing card structure */
#viewer .viewer-info div{
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  column-gap:4px!important;
  min-width:0!important;
  overflow:hidden!important;
}
#viewer .viewer-info dt{
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
#viewer .viewer-info dt::after{content:":"}
#viewer .viewer-info dd{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
/* v17 count privacy preserved in v18. Modal untouched. */
.result-count.is-muted{opacity:.28!important}.result-count.is-muted b{color:transparent!important;min-width:1.5ch;display:inline-block!important}


/* v19 fixed exploration counter width */
.result-count{width:120px !important;flex:0 0 120px !important;white-space:nowrap !important;}

/* v19.1 · contador estable sin invadir separadores */

.result-count{
    width:120px !important;
    flex:0 0 120px !important;
    white-space:nowrap !important;
    margin-right:24px !important;
}