.image-viewer-dialog{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden;background:#fff8f0;color:#30221c;box-shadow:none;overscroll-behavior:none}
.image-viewer-dialog[open]{display:flex;flex-direction:column}
.image-viewer-dialog::backdrop{background:#281e1a99}
.image-viewer-dialog [hidden]{display:none!important}
.image-viewer-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;min-height:56px;padding:calc(4px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 4px max(10px,env(safe-area-inset-left,0px));gap:12px}
.image-viewer-count{font-size:12px;letter-spacing:.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.image-viewer-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:50%}
.image-viewer-dialog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.image-viewer-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.image-viewer-stage.is-zoomed{cursor:grab}.image-viewer-stage.is-dragging{cursor:grabbing}
.image-viewer-photo{position:absolute;left:50%;top:50%;display:block;max-width:none;max-height:none;width:var(--viewer-width,0px);height:var(--viewer-height,0px);transform:translate(calc(-50% + var(--viewer-x,0px)),calc(-50% + var(--viewer-y,0px))) scale(var(--viewer-scale,1));transform-origin:center;pointer-events:none;object-fit:contain;-webkit-user-drag:none}
.image-viewer-step{position:absolute;top:calc(50% - 22px);z-index:1;width:44px;height:44px;padding:0;border:0;display:grid;place-items:center;background:radial-gradient(circle,#fff8f0ed 0 16px,transparent 17px);border-radius:50%}
.image-viewer-previous{left:max(6px,env(safe-area-inset-left,0px))}.image-viewer-next{right:max(6px,env(safe-area-inset-right,0px))}
.image-viewer-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;color:#7b675c;font-size:13px}
.image-viewer-status button{pointer-events:auto;padding:8px 14px;border:1px solid #e5d8cb;border-radius:5px}
.image-viewer-tools{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;padding:12px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:#fff8f0;color:#30221c}
.image-viewer-tools button{height:42px;min-width:44px;padding:0 12px;display:grid;place-items:center;border:1px solid #e5d8cb;border-radius:6px;font-size:12px;font-variant-numeric:tabular-nums;background:transparent}
.image-viewer-tools button:disabled{opacity:.3}
.image-viewer-reset{min-width:64px!important}
#detail-main[role=button]{cursor:zoom-in}
#detail-main[role=button]:focus-visible{outline:2px solid #9c4028;outline-offset:-3px}
.product-dialog .main-photo{display:grid;grid-template-columns:44px minmax(0,1fr) 48px;gap:8px;padding-right:0}
.product-dialog .detail-main{grid-column:2;grid-row:1;min-width:0;min-height:0;object-position:center center}
.product-dialog .gallery-arrow.previous{left:0}
.product-dialog .gallery-arrow.next{right:2px}
.product-dialog .main-photo:has(.gallery-arrow.previous[hidden]){grid-template-columns:minmax(0,1fr) 48px}
.product-dialog .main-photo:has(.gallery-arrow.previous[hidden]) .detail-main{grid-column:1}
.product-image-zoom-hint{position:absolute;right:0;bottom:var(--zoom-hint-bottom,0px);z-index:2;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;color:#30221c;box-shadow:none;visibility:hidden}
.product-image-zoom-hint svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.product-dialog .main-photo{grid-template-rows:minmax(0,1fr)}.product-dialog .detail-main{max-height:100%}}
@media(max-height:500px){.image-viewer-header{min-height:44px;padding-top:0;padding-bottom:0}.image-viewer-tools{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom,0px))}.image-viewer-tools button{height:38px}}