/* /shop/assets/overlay.css – ensure close button clickable */
.modal-root { 
position: fixed; 
inset: 0; 
display: none; 
z-index: 1000; 
}

.modal-root.active { 
display: grid; 
grid-template-rows: 1fr; 
}

.modal-backdrop { 
position: absolute; 
inset: 0; 
background: 
rgba(0,0,0,.55); 
backdrop-filter: blur(2px); 
}

.modal-panel { 
position: absolute; 
margin: 6vh auto; 
max-width: 1100px; 
width: calc(100% - 0px); 
background: #fff; 
color: #0c0f14; 
border-radius: 16px; 
border: 1px solid #e5e7eb; 
padding: 16px; 
box-shadow: 0 20px 60px rgba(0,0,0,.35); 
z-index: 1001; 
}

.modal-close { 
position: absolute; 
top: 10px; 
right: 10px; 
background: transparent; 
border: 1px solid #e5e7eb; 
border-radius: 8px; 
padding:6px 10px; 
cursor: pointer; 
z-index: 1002; 
}

button.modal-close {
color: black;
}

.modal-content { 
max-height: 72vh; 
overflow: auto; 
}

.overlay-grid { 
display:grid; 
grid-template-columns: 1fr 1fr; 
gap:16px; 
}

@media (max-width: 900px) { 
.overlay-grid { 
grid-template-columns: 1fr; }
 }
.ov-main { 
width:100%; 
max-height: 52vh; 
object-fit: 
contain; 
border:1px solid #e5e7eb; 
border-radius:12px; 
background:#f9fafb; 
}

.thumbs { 
display:grid; 
grid-auto-flow: column; 
gap:8px; 
overflow-x:auto; 
padding-top:8px; 
}

.thumb { 
border:1px solid #e5e7eb; 
background:#fff; 
border-radius:10px; 
padding:0; 
cursor:pointer; 
}

.thumb img { 
width:84px; 
height:84px; 
object-fit:cover; 
display:block; 
border-radius:10px; 
}

.ov-title { 
margin:0 0 8px; 
}

.ov-short { 
color:#6b7280; 
margin:0 0 10px; 
}

.ov-detail { 
white-space: pre-wrap; 
border:1px solid #e5e7eb; 
border-radius:12px; 
padding:10px 12px; 
}