.cwd-pg{--cwd-thumbs:5;--cwd-tgap:10px;--cwd-tw:90px;--cwd-active:#111827;position:relative;width:100%;box-sizing:border-box}
.cwd-pg *{box-sizing:border-box}
.cwd-pg__main{position:relative;min-width:0}
.cwd-pg__stage{position:relative;overflow:hidden;background:#f6f7f9;border-radius:14px;aspect-ratio:1/1}
.cwd-pg[data-lightbox="1"] .cwd-pg__stage{cursor:zoom-in}
.cwd-pg__img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
@media(hover:hover){.cwd-pg--zoom .cwd-pg__stage:hover .cwd-pg__img{transform:scale(1.07)}}
.cwd-pg__badge{position:absolute;top:12px;left:12px;background:#dc2626;color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:2;line-height:1.3}
.cwd-pg__arrow,.cwd-pg__tnav{position:absolute;display:grid;place-items:center;padding:0;border:0;background:rgba(255,255,255,.94);color:#111;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;z-index:3}
.cwd-pg__arrow{top:50%;transform:translateY(-50%);width:38px;height:38px}
.cwd-pg__arrow--prev{left:10px}.cwd-pg__arrow--next{right:10px}
@media(hover:hover) and (min-width:768px){.cwd-pg__arrow{opacity:0;transition:opacity .2s}.cwd-pg__stage:hover .cwd-pg__arrow{opacity:1}}
/* thumbnails */
.cwd-pg__thumbs-wrap{position:relative;margin-top:var(--cwd-tgap);min-width:0}
.cwd-pg__thumbs{position:relative;display:flex;gap:var(--cwd-tgap);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cwd-pg__thumbs::-webkit-scrollbar{display:none}
.cwd-pg__thumb{flex:0 0 calc((100% - (var(--cwd-thumbs) - 1) * var(--cwd-tgap)) / var(--cwd-thumbs));aspect-ratio:1/1;border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;background:#f6f7f9;cursor:pointer;scroll-snap-align:start;opacity:.65;transition:opacity .2s,border-color .2s}
.cwd-pg__thumb:hover{opacity:1}
.cwd-pg__thumb.is-active{border-color:var(--cwd-active);opacity:1}
.cwd-pg__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cwd-pg__tnav{top:50%;transform:translateY(-50%);width:28px;height:28px}
.cwd-pg__tnav[hidden]{display:none}
.cwd-pg__tnav--prev{left:4px}.cwd-pg__tnav--next{right:4px}
/* left layout (desktop only) */
@media(min-width:768px){
.cwd-pg--left{display:grid;grid-template-columns:var(--cwd-tw) minmax(0,1fr);gap:var(--cwd-tgap);align-items:stretch}
.cwd-pg--left .cwd-pg__thumbs-wrap{order:-1;margin:0}
.cwd-pg--left .cwd-pg__thumbs{position:absolute;inset:0;flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity}
.cwd-pg--left .cwd-pg__thumb{flex:0 0 calc((100% - (var(--cwd-thumbs) - 1) * var(--cwd-tgap)) / var(--cwd-thumbs));aspect-ratio:auto;width:100%}
.cwd-pg--left .cwd-pg__tnav{left:50%;transform:translateX(-50%) rotate(90deg)}
.cwd-pg--left .cwd-pg__tnav--prev{top:4px}
.cwd-pg--left .cwd-pg__tnav--next{top:auto;bottom:4px}
}
/* lightbox */
.cwd-lb{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.cwd-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.cwd-lb__x{position:absolute;top:14px;right:18px;color:#fff;font-size:34px;line-height:1;background:none;border:0;cursor:pointer}