/* Gallery image viewport with a separate controls/thumbnail footer. */
.hhcg-dialog{box-sizing:border-box;width:min(1180px,calc(100vw - 28px));height:min(84dvh,780px);max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid #ffffff40;border-radius:12px;background:#202020;color:#fff;box-shadow:0 10px 60px #0008;overflow:hidden}
.hhcg-dialog[open]{display:flex;flex-direction:column}
.hhcg-dialog::backdrop{background:#0009}
.hhcg-heading{position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 16px;min-height:52px;box-sizing:border-box;background:linear-gradient(to bottom,#202020d9,#20202000);color:#fff}
.hhcg-heading h3{text-shadow:0 1px 3px #000b;font:500 14px/1.5 system-ui;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.hhcg-dialog button,.hhcg-dialog a{box-sizing:border-box;font-family:system-ui,sans-serif;text-decoration:none;cursor:pointer;touch-action:manipulation}
.hhcg-close{pointer-events:auto;flex-shrink:0;min-width:70px;min-height:40px;border:0;border-radius:6px;padding:6px 10px;background:#202020b3;color:#fff;font:14px/1.5 system-ui}
.hhcg-screen{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;flex:1;min-height:0;min-width:0;width:100%;background:#202020;overflow:hidden}
.hhcg-dialog .hhcg-image-area{position:relative;inset:auto;grid-column:1/-1;grid-row:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;user-select:none}
.hhcg-image-area img{display:block;width:100%;height:100%;object-fit:contain;margin:0;pointer-events:none}
.hhcg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:48px;border:0;border-radius:8px;background:transparent;box-shadow:none;text-shadow:0 1px 4px #000c;color:#fff;font:28px/1 system-ui;z-index:2}
.hhcg-prev{left:10px}.hhcg-next{right:10px}
.hhcg-dialog [hidden]{display:none!important}
.hhcg-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 14px;background:#202020ed;border:1px solid #ffffff30;border-radius:8px;color:#fff;font:13px/1.5 system-ui;text-align:center;max-width:calc(100% - 70px)}
.hhcg-quote{position:relative;inset:auto;transform:none;z-index:3;grid-column:3;grid-row:1;justify-self:end;align-self:end;width:44px;height:44px;min-width:44px;margin:0 max(12px,env(safe-area-inset-right)) 64px 0;padding:8px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#202020b3;color:#25d366;backdrop-filter:blur(5px);box-shadow:none;cursor:pointer}
.hhcg-quote svg{width:28px;height:28px;fill:currentColor}
.hhcg-quote span{display:none}
.hhcg-quote:hover{background:#202020cc;color:#25d366}
.hhcg-more{position:relative;inset:auto;transform:none;z-index:3;grid-column:3;grid-row:1;justify-self:end;align-self:end;margin:0 max(12px,env(safe-area-inset-right)) 12px 0;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 10px;color:#fff;background:#202020b3;border-radius:8px;font:12px/1.5 system-ui}
.hhcg-counter{display:none;position:relative;inset:auto;transform:none;z-index:3;grid-column:1;grid-row:1;justify-self:start;align-self:end;margin:0 0 12px 12px;color:#fff;font:12px/1.5 system-ui;padding:3px 7px;border-radius:5px;background:#20202099;text-shadow:0 1px 2px #0008}
.hhcg-dialog :is(button,a):focus-visible{outline:3px solid #ff6600;outline-offset:2px}
html:has(.hhcg-dialog[open]){overflow:hidden}
@media(max-width:767px){.hhcg-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:8px}.hhcg-heading{padding-left:10px}.hhcg-nav{width:40px;height:44px}.hhcg-prev{left:6px}.hhcg-next{right:6px}.hhcg-more{margin-right:10px;padding:8px;font-size:12px}.hhcg-dialog:not(.hhcg-review-mode) .hhcg-quote{display:flex!important;grid-column:1/-1;grid-row:1;justify-self:center;align-self:end;width:44px;height:44px;min-width:44px;margin:0 0 12px;padding:8px;border:0;border-radius:50%;background:#202020b3;box-shadow:none;color:#25d366}.hhcg-quote span{display:none}.hhcg-quote svg{width:28px;height:28px}.hhcg-dialog:not(.hhcg-review-mode) .hhcg-counter{margin-left:68px;margin-bottom:22px}}

/* Thumbnails occupy their own row, below the image and the view-more action. */
.hhcg-thumbs{position:relative;inset:auto;transform:none;z-index:3;grid-column:1/-1;grid-row:3;justify-self:center;justify-content:safe center;margin:4px auto max(8px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px);background:#20202066;border-radius:7px;height:60px;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;padding:3px;touch-action:pan-x;box-sizing:border-box}
.hhcg-thumb{flex:0 0 48px;width:48px;height:52px;padding:0;border:2px solid transparent;border-radius:5px;overflow:hidden;background:#333;color:#fff}
.hhcg-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hhcg-thumb[aria-current=true]{border-color:#98c652;box-shadow:0 0 0 1px #98c65255}
.hhcg-thumb:focus-visible{outline:2px solid #ff6600;outline-offset:1px}

/* Three adjacent slides follow the finger; navigation stays outside the moving track. */
.hhcg-image-area{overflow:hidden;cursor:grab}
.hhcg-image-area.is-dragging{cursor:grabbing}
.hhcg-track{position:absolute;inset:0;transform:translate3d(0,0,0);will-change:transform;pointer-events:none}
.hhcg-track .hhcg-slide{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none}
.hhcg-track .hhcg-peek-prev{transform:translateX(-100%)}
.hhcg-track .hhcg-peek-next{transform:translateX(100%)}

/* Keep the close control keyboard-operable without a focus highlight. */
.hhcg-dialog .hhcg-close:is(:focus,:focus-visible){outline:none;box-shadow:none}

/* A short image-only gradient supports the overlaid image counter. */
.hhcg-image-area::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:54px;background:linear-gradient(to bottom,#20202000,#20202080);pointer-events:none}
.hhcg-status{z-index:4}

/* Feedback uses the same viewer, without a product-quotation action. */
.hhcg-review-mode .hhcg-quote{display:none!important}

.hhcg-screen::after{display:none}