/* A viewport-sized transparent hit area around a contained, non-panning sheet. */
dialog.cardmodal:not([open]){display:none}
dialog.cardmodal[open]{
 position:fixed;inset:0;display:grid;place-items:center;
 width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;
 padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 14px);
 background:transparent;border:0;color:var(--text);overflow:hidden;overscroll-behavior:none;touch-action:pan-y;
}
dialog.cardmodal::backdrop{background:rgba(10,18,14,.66);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:backdrop-arrive .18s ease}
.card-sheet{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(880px,100%);height:min(760px,100%);min-height:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--sheet);box-shadow:0 20px 80px #0005;animation:dialog-arrive .2s var(--ease)}
.modalheading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:8px 12px 8px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}
.modalheading>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modalclose{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface)}
.modalclose .ui-icon{width:20px;height:20px}
.modalcontent{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:24px;padding:18px 20px;min-width:0;min-height:0;overflow:hidden}
.modalart{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}
.modalart img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.modaldetails{min-width:0;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
.modaldetails h2{font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:400;letter-spacing:-.4px;line-height:1.15;margin:0 0 8px;overflow-wrap:anywhere}
.modaldetails p{font-size:12px;line-height:1.45;color:var(--muted);margin:4px 0 8px}
.modaldetails .original{font-style:italic}
.modalprice{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12px;color:var(--accent);padding:6px 0;margin:0 0 6px}
.modalcontrols{gap:0;border:1px solid var(--line);border-radius:4px 12px 12px 4px;background:var(--surface);overflow:hidden;margin-top:8px}
.modalcontrols .variantrow{display:flex;flex-wrap:nowrap;gap:8px;padding:5px 10px;min-height:52px}
.modalcontrols .variantrow+.variantrow{border-top:1px solid var(--line)}
.modalcontrols .variantrow>span{font-size:11px;white-space:nowrap}
.modalcontrols .qty{width:136px;flex:none;grid-template-columns:44px minmax(20px,1fr) 44px}
.modalcontrols .qty button{width:44px;height:42px}
.modalcontrols .qty b{font-size:14px}
.dialogactions{display:flex;align-items:center;gap:8px;margin-top:8px;min-height:44px}
.dialogactions .fav{width:44px;height:44px;flex:none}
.card-feedback{flex:1;min-width:0;font-size:10px;color:var(--accent);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-feedback.is-error{color:var(--warning);-webkit-line-clamp:4}
@media(max-width:600px) and (orientation:portrait){
 .card-sheet{max-width:430px}
 .modalcontent{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:10px;padding:10px 14px 12px}
 .modaldetails{max-height:46dvh}
 .modaldetails h2{font-size:21px;line-height:1.15;margin-bottom:5px}
 .modaldetails h2,.modaldetails .card-metadata,.modaldetails .original{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .modaldetails p{font-size:10px;margin-bottom:5px}
 .modaldetails .original{-webkit-line-clamp:1}
 .modalprice{font-size:11px;padding:2px 0;margin:0}
 .modalcontrols{margin-top:6px}
 .dialogactions{margin-top:6px}
}
@media(max-height:480px) and (orientation:landscape){
 .card-sheet{max-width:780px}
 .modalheading{padding:4px 10px 4px 14px}
 .modalcontent{gap:16px;padding:8px 14px;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
 .modaldetails h2{font-size:20px;margin-bottom:5px}
 .modaldetails p{font-size:10px;margin-bottom:5px}
 .modalcontrols{margin-top:4px}.dialogactions{margin-top:4px}
 .modalcontrols .variantrow{padding:3px 8px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.card-sheet,dialog.cardmodal::backdrop{animation:none}}

.modalcontrols .variantrow>span{white-space:normal;overflow-wrap:anywhere;min-width:0}.dialogactions [data-flip]{flex:none;min-width:44px;min-height:44px;padding:5px;font-size:11px}

/* Touch focus must not leave a native iOS ring when the dialog restores focus. */
.zoomcard,.modalclose{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
:root[data-input-mode="pointer"] .zoomcard:focus{outline:none;outline-offset:0}
:root[data-input-mode="keyboard"] .zoomcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.discovery-status{color:var(--muted);font-size:11px;line-height:1.5;margin:0 0 14px}

:root[data-input-mode="pointer"] .extension-gallery:focus{outline:none}

/* Image-only zoom: the sheet, close cross and quantity controls stay fixed. */
.modalart{position:relative;touch-action:none;overscroll-behavior:none;isolation:isolate}
.modalart img{transform-origin:center center;will-change:transform;pointer-events:none}
.modalart.is-zoomed{cursor:grab}.modalart.is-zoomed:active{cursor:grabbing}
.modalart:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}