/* Quick look overlay (the <dialog id="ql"> in pages/catalog.php, run by js/quicklook.js) */

html.ql-lock{overflow:hidden}                          /* the page behind doesn't scroll */
.cb-card[data-ql]>a{cursor:zoom-in}

.ql{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:24px;
  background:#fff;color:var(--site-ink,#1d1d1f);box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden}
.ql::backdrop{background:rgba(20,16,18,.55);backdrop-filter:blur(3px)}
.ql[open]{animation:ql-in .2s ease-out}
@keyframes ql-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.ql-close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);font-size:26px;line-height:1;cursor:pointer;color:var(--site-ink,#1d1d1f);
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ql-close:hover{background:#fff}

.ql-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-height:calc(100vh - 32px)}

/* Photos: swipe sideways, or use the arrows and thumbnails */
.ql-gallery{position:relative;background:#faf9f6;min-height:0}
.ql-track{display:flex;height:100%;max-height:calc(100vh - 32px);aspect-ratio:4/5;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.ql-track::-webkit-scrollbar{display:none}
.ql-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.ql-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);font-size:28px;line-height:1;cursor:pointer;color:var(--site-ink,#1d1d1f);
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ql-arrow[hidden]{display:none}
.ql-prev{left:14px}
.ql-next{right:14px}
.ql-thumbs{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;padding:0 14px}
.ql-thumbs[hidden]{display:none}
.ql-thumbs button{width:46px;height:58px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:#fff;cursor:pointer;opacity:.75;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.ql-thumbs button[aria-current="true"]{border-color:#fff;opacity:1;outline:2px solid var(--site-ink,#1d1d1f)}
.ql-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* Details */
.ql-info{display:flex;flex-direction:column;padding:44px 40px 32px;overflow-y:auto}
.ql-new{align-self:flex-start;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:#faf0ee;
  color:var(--site-red,#b3261e);font-size:12px;font-weight:600}
.ql-new[hidden]{display:none}
.ql-brand{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--site-muted,#6b6b70);
  text-decoration:none}
.ql-brand[href]:hover{color:var(--site-ink,#1d1d1f);text-decoration:underline}
.ql-name{margin:8px 0 10px;font-size:clamp(24px,2.6vw,32px);line-height:1.15}
.ql-price{margin:0 0 24px;font-size:20px}

.ql-facts{margin:0 0 28px;border-top:1px solid var(--site-line,#e4e2dd)}
.ql-facts>div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--site-line,#e4e2dd)}
.ql-facts>div[hidden]{display:none}
.ql-facts dt{font-size:14px;color:var(--site-muted,#6b6b70)}
.ql-facts dd{margin:0;font-size:15px}
.ql-colours{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ql-colours li{padding:4px 10px;border:1px solid var(--site-line,#e4e2dd);border-radius:999px;font-size:13px}

.ql-actions{display:flex;gap:10px;margin-top:auto}
.ql-shop{flex:1;padding:15px 20px;border-radius:999px;background:var(--site-ink,#1d1d1f);color:#fff;
  text-align:center;font-weight:600;text-decoration:none}
.ql-shop:hover{background:#000}
/* The heart sits in the row here instead of on a photo */
.ql .ql-save{position:static;flex:none;width:52px;height:52px;border:1px solid var(--site-line,#e4e2dd);border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ql .ql-save svg{width:22px;height:22px}
.ql-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--site-muted,#6b6b70)}

/* Phones: photo on top, details below, the whole overlay scrolls */
@media (max-width:760px){
  .ql{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;overflow-y:auto}
  .ql-body{display:block;max-height:none}
  .ql-track{max-height:none;aspect-ratio:4/5}
  .ql-info{padding:24px 20px 32px;overflow:visible}
  .ql-actions{position:sticky;bottom:0;padding:12px 0 4px;background:#fff}
  .ql-thumbs button{width:38px;height:48px}
}