.commercial{max-width:1200px;margin:0 auto;padding:80px 5vw 120px}
.commercial-toolbar h1{font-family:var(--compact-type);font-size:14px;font-weight:500;color:#c93679;margin:0;line-height:normal}
.commercial-viewer{width:100%;margin:0 auto;background:#fff}
.commercial button,.commercial input,.commercial summary,.commercial-toolbar,.commercial-pagination,.commercial-nojs{font:500 12px/1.5 var(--compact-type);color:#000}
.commercial button{border:0;background:transparent;cursor:pointer;padding:9px 10px}
.commercial button:hover,.commercial-toolbar a:hover{color:var(--link-blue)}
.commercial button:disabled{opacity:.22;cursor:default;color:#000}
.commercial-toolbar{display:flex;justify-content:space-between;align-items:baseline;gap:22px;margin:0 0 38px;padding:0}
.commercial-spread-title{font:500 12px/1.5 var(--compact-type);margin:0 46px 12px;overflow-wrap:anywhere}
.commercial-spread-title:empty{display:none}
.commercial-actions{display:flex;align-items:baseline;gap:24px;flex-shrink:0}
.commercial-actions button{padding:0}
.commercial-stage{display:grid;grid-template-columns:26px minmax(0,1fr) 26px;gap:20px;align-items:center}
.commercial-stage>button{font:400 22px/1 Arial,sans-serif;padding:16px 0;align-self:stretch}
.commercial-surface{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;min-width:0;touch-action:pan-y pinch-zoom}
.commercial-surface img{display:block;width:100%;height:100%;max-height:calc(100svh - 235px);object-fit:contain}
.commercial-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:20px 0 0}
.commercial-pagination input{width:45px;padding:5px 2px;border:0;border-bottom:1px solid #ddd;background:#fff;text-align:center;appearance:textfield;-moz-appearance:textfield}
.commercial-pagination input::-webkit-inner-spin-button,.commercial-pagination input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.commercial-index{margin:42px auto 0}
.commercial-index>summary{position:relative;display:block;max-width:720px;margin:0 auto;text-align:center;padding:18px 36px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;cursor:pointer;list-style:none}
.commercial-index>summary::-webkit-details-marker{display:none}
.commercial-index>summary:after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--accent);font-size:19px}
.commercial-index[open]>summary:after{content:'−'}
.commercial-thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:30px 25px;margin-top:38px}
.commercial-thumbnail{display:block;width:100%;text-align:left}
.commercial-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.commercial-thumbnail>span{display:flex;gap:10px;font-size:10px;line-height:1.4;margin-top:10px}
.commercial-thumbnail>span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commercial-thumbnail[aria-current=true]{outline:1px solid var(--link-blue);outline-offset:5px;color:var(--link-blue)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.commercial-nojs{text-align:center;margin-top:28px}
.commercial-viewer:fullscreen,.commercial-viewer.fullscreen-fallback{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100dvh;max-width:none;padding:24px 36px;background:#fff}
.commercial-viewer:fullscreen .commercial-toolbar,.commercial-viewer.fullscreen-fallback .commercial-toolbar{margin-bottom:12px}
.commercial-viewer.fullscreen-fallback{position:fixed;inset:0;z-index:1000}
.commercial-fullscreen-open{overflow:hidden}
.commercial-viewer:fullscreen .commercial-stage,.commercial-viewer.fullscreen-fallback .commercial-stage{flex:1;min-height:0;width:100%}
.commercial-viewer:fullscreen .commercial-surface,.commercial-viewer.fullscreen-fallback .commercial-surface{aspect-ratio:auto;height:calc(100dvh - 130px)}
.commercial-viewer:fullscreen .commercial-surface img,.commercial-viewer.fullscreen-fallback .commercial-surface img{max-height:100%}
.commercial-viewer:fullscreen .commercial-pagination,.commercial-viewer.fullscreen-fallback .commercial-pagination{margin-top:12px}
@media(max-width:700px){
 .commercial{padding:50px 6vw 90px}
 .commercial-toolbar h1{margin-bottom:32px}
 .commercial-toolbar{flex-wrap:wrap;gap:12px;margin-bottom:32px;font-size:11px}
 .commercial-spread-title{margin:0 26px 12px;font-size:11px}
 .commercial-actions{gap:19px;margin-left:auto}
 .commercial-actions button{font-size:11px}
 .commercial-stage{grid-template-columns:18px minmax(0,1fr) 18px;gap:8px}
 .commercial-stage>button{font-size:19px}
 .commercial-surface img{max-height:none}
 .commercial-pagination{margin-top:22px;font-size:11px}
 .commercial-index{margin-top:35px}
 .commercial-thumbnail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
 .commercial-viewer:fullscreen,.commercial-viewer.fullscreen-fallback{padding:20px 18px}
 .commercial-viewer:fullscreen .commercial-surface,.commercial-viewer.fullscreen-fallback .commercial-surface{height:calc(100dvh - 145px)}
}
