.image-gallery{width:100%;max-width:100%;min-width:0;align-self:start;display:block}
.gallery-track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border:2px solid var(--line);border-radius:6px;background:#fff}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;border:0;background:transparent;padding:0;cursor:zoom-in;color:inherit}
.gallery-slide img{display:block;width:100%;height: min(60vh,580px);object-fit:contain;user-select:none}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.gallery-controls button,.gallery-toolbar button{min-width:48px;min-height:46px;border:2px solid #bcc9b9;border-radius:6px;background:var(--paper);color:var(--ink);font-weight:800;font-size:20px}
.gallery-controls button:disabled{opacity:.3;cursor:default}.gallery-counter{font:700 15px ui-monospace,monospace}
.gallery-thumbs{display:flex;gap:8px;overflow:auto;padding:2px 0 10px}.gallery-thumb{flex:0 0 60px;padding:2px;border:2px solid transparent;background:#fff;border-radius:4px}
.gallery-thumb[aria-current=true]{border-color:var(--accent)}.gallery-thumb img{display:block;width:52px;height:60px;object-fit:contain}
.gallery-hint{font-size:12px!important;line-height:1.6!important;margin:4px 0;color:var(--muted)}
.gallery-viewer{box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:12px 16px;background:#171d19;color:#fff;border:0;overflow:hidden}
.gallery-toolbar{height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}.gallery-toolbar .gallery-zoom{font-size:15px;padding:8px 16px}.gallery-toolbar .gallery-close{font-size:28px}
.gallery-stage{position:relative;height:calc(100% - 52px);min-width:0}.gallery-viewer .gallery-track{height:calc(100% - 70px);border:0;background:transparent}
.gallery-viewer .gallery-slide img{height:100%;width:100%;object-fit:contain}.gallery-viewer .gallery-slide{height:100%}
.gallery-viewer .gallery-controls{height:70px;padding:10px 0;box-sizing:border-box}
.gallery-pan{position:absolute;inset:0 0 70px;overflow:auto;overscroll-behavior:contain;cursor:grab;background:#171d19;touch-action:pan-x pan-y;scrollbar-width:thin}
.gallery-pan:active{cursor:grabbing}.gallery-pan img{display:block;width:200%;height:200%;max-width:none;max-height:none;object-fit:contain;user-select:none}
.gallery-controls [hidden],.gallery-pan[hidden]{display:none}
.search-wait{position:fixed;z-index:10;top:16px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));padding:18px 22px;display:flex;align-items:center;gap:16px;background:#f5f8ef;color:#183d2a;border:2px solid #54775b;border-radius:10px;box-shadow:0 8px 28px #18281f30;pointer-events:none;box-sizing:border-box}
.search-wait strong{font-size:17px;line-height:1.6}.search-wait p{font-size:13px;line-height:1.7;margin:5px 0 0}
.wait-spinner,.image-loading.is-loading:before{content:'';display:block;flex-shrink:0;width:24px;height:24px;border:3px solid #b8cbb7;border-top-color:#24613b;border-radius:50%;animation:loading-turn .85s linear infinite;box-sizing:border-box}
.detail-loading{clear:both;display:flex;align-items:center;justify-content:center;gap:16px;min-height:180px;padding:24px;background:#eef3e8;border-radius:8px;margin-bottom:24px;line-height:1.8}
.gallery-slide,.product-image{position:relative}.image-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px;background:#eef1e9;color:#284431;font-size:14px;font-weight:700;line-height:1.8;text-align:center;pointer-events:none;box-sizing:border-box}
.gallery-viewer .image-loading{background:#171d19;color:#fff}.zoom-loading{bottom:70px}
.search-wait[hidden],.detail-loading[hidden],.image-loading[hidden]{display:none}
@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wait-spinner,.image-loading.is-loading:before{animation:none}}
@media(max-width:600px){.search-wait{top:12px;padding:14px;gap:12px}.search-wait strong{font-size:15px}.search-wait p{font-size:12px}.detail-loading{padding:20px 14px;font-size:15px}}
@media(max-width:600px){.customer-page .detail-layout{flex-direction:column}.gallery-slide img{height: min(48vh,420px)}.gallery-viewer{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.gallery-thumbs{gap:6px}.gallery-thumb{flex-basis:54px}.gallery-thumb img{width:46px;height:54px}}
