.product-photo-button{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;background:transparent;color:inherit}
.product-photo-button:focus-visible{outline:3px solid var(--gold);outline-offset:-5px;z-index:3}
.product-photo-hint{position:absolute;right:12px;bottom:12px;z-index:3;padding:7px 12px;border-radius:20px;background:#ffffffed;color:var(--green);font:600 .76rem/1.4 var(--sans);box-shadow:0 2px 10px #0001}
.product-selection{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.product-selection label,.cart-size{display:flex;flex-direction:column;gap:5px;font:600 .8rem/1.5 var(--sans)}
.product-size{flex:1 1 140px}.product-quantity{flex:0 1 90px}.product-selection input,.product-selection select,.cart-size select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:var(--fa-surface,#fff);color:var(--ink);font:400 16px/1.4 var(--sans)}
.product-selection select:focus-visible,.cart-size select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cart-size{max-width:190px;margin:9px 0}.cart-size-hint{font-size:.83rem;padding:10px;background:#fff8dd;border-radius:8px;margin-bottom:12px;color:var(--ink)}
/* Une fenêtre encadrée, avec un viewport indépendant des dimensions du fichier. */
.product-photo-dialog{width:min(1180px,calc(100vw - 48px));height:min(850px,90vh);height:min(850px,90dvh);max-width:none;max-height:90vh;max-height:90dvh;margin:auto;padding:20px;box-sizing:border-box;border:1px solid var(--line);border-radius:20px;color:var(--ink);background:var(--fa-surface,#fff);box-shadow:0 24px 100px #0005;overflow:hidden;overscroll-behavior:contain}
.product-photo-dialog[open]{display:flex;flex-direction:column;gap:12px}.product-photo-dialog::backdrop{background:#0e211ad9}
.photo-dialog-header{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:20px;min-width:0}.photo-dialog-header>div{min-width:0}.photo-dialog-header .eyebrow{margin:0 0 5px;font-size:.68rem}.photo-dialog-header h2{font-size:clamp(1.25rem,3vw,1.8rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-dialog-header button,.photo-zoom-toolbar button{min-width:44px;min-height:44px;flex-shrink:0;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fa-surface,#fff);color:var(--ink);font-size:.85rem;touch-action:manipulation}
.photo-zoom-toolbar{display:flex;flex:none;align-items:center;gap:8px;flex-wrap:wrap}.photo-zoom-toolbar output{min-width:57px;text-align:center;font-size:.84rem;font-variant-numeric:tabular-nums}.photo-zoom-toolbar p{flex:1;min-width:190px;color:var(--muted);font-size:.75rem;line-height:1.4;margin-left:8px}
.photo-viewer-shell{position:relative;flex:1 1 0%;min-width:0;min-height:100px}
.photo-dialog-stage{position:relative;width:100%;height:100%;min-height:100px;overflow:hidden;border-radius:14px;background:var(--cream);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.photo-dialog-stage:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.photo-dialog-stage[data-zoomed="true"]{cursor:grab}.photo-dialog-stage[data-dragging="true"]{cursor:grabbing}
#productPhotoImage{position:absolute;top:50%;left:50%;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);transform-origin:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.photo-preview-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.photo-loading{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 12px;border-radius:20px;background:#ffffffed;color:#203b2c;font-size:.75rem;max-width:90%;text-align:center;pointer-events:none}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;font-size:2rem;line-height:1;color:var(--green);background:#ffffffec;box-shadow:0 2px 12px #0001;touch-action:manipulation}.photo-nav.previous{left:12px}.photo-nav.next{right:12px}
.photo-dialog-caption{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;font-size:.8rem;line-height:1.4}.photo-dialog-caption p{overflow-wrap:anywhere;max-height:2.8em;overflow:auto}.photo-dialog-caption span{white-space:nowrap;color:var(--muted)}
.photo-thumbnails{display:flex;flex:none;gap:10px;overflow:auto;min-width:0;padding:2px 2px 4px;scroll-snap-type:x proximity}.photo-thumbnail{flex:0 0 72px;height:62px;border:2px solid transparent;border-radius:10px;padding:3px;background:var(--cream);scroll-snap-align:center;touch-action:manipulation}.photo-thumbnail.selected{border-color:var(--green)}.photo-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
@media(max-width:760px){.product-photo-dialog{width:calc(100vw - 20px);height:90vh;height:90dvh;padding:12px;border-radius:16px}.product-photo-dialog[open]{gap:9px}.photo-dialog-header{gap:12px}.photo-dialog-header button{padding:7px 10px}.photo-dialog-header .eyebrow{font-size:.6rem}.photo-zoom-toolbar{gap:6px}.photo-zoom-toolbar p{flex-basis:100%;margin:0;font-size:.71rem}.photo-zoom-toolbar button{padding:7px 10px}.photo-thumbnail{flex-basis:60px;height:52px}.photo-nav.previous{left:6px}.photo-nav.next{right:6px}.product-photo-hint{right:8px;bottom:8px;padding:6px 9px;font-size:.7rem}.product-selection{gap:8px}.product-size{flex-basis:100%}.product-quantity{flex:1}.product-selection label{font-size:.76rem}}
@media(max-height:520px){.product-photo-dialog{height:92vh;height:92dvh;max-height:92vh;max-height:92dvh;padding:10px}.product-photo-dialog[open]{gap:6px}.photo-dialog-header .eyebrow,.photo-zoom-toolbar p{display:none}.photo-dialog-header h2{font-size:1.1rem}.photo-thumbnail{height:44px;flex-basis:52px}.photo-dialog-caption p{max-height:1.4em}.photo-viewer-shell,.photo-dialog-stage{min-height:80px}}
