.cd-product-gallery {
    --cd-gallery-accent: #d5a400;
    --cd-gallery-border: #e8e8e8;
    --cd-gallery-background: #fff;
    --cd-gallery-button-background: rgba(255,255,255,.92);
    --cd-gallery-text: #181818;
    position: relative;
    display: grid;
    grid-template-columns: 94px minmax(0,1fr);
    gap: 22px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
}
.cd-product-gallery *, .cd-product-gallery *::before, .cd-product-gallery *::after { box-sizing: border-box; }
.cd-gallery-sidebar { display:grid; grid-template-rows:38px minmax(0,1fr) 38px; gap:10px; width:94px; height:630px; min-height:0; }
.cd-gallery-thumbnails { display:flex; flex-direction:column; gap:12px; min-height:0; padding:1px 3px; overflow-x:hidden; overflow-y:auto; scroll-behavior:smooth; overscroll-behavior:contain; scrollbar-width:none; }
.cd-gallery-thumbnails::-webkit-scrollbar { display:none; }
.cd-gallery-thumbnail { position:relative; flex:0 0 92px; width:88px; height:92px; margin:0; padding:5px; overflow:hidden; border:1px solid var(--cd-gallery-border); border-radius:11px; background:var(--cd-gallery-background); cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; appearance:none; -webkit-appearance:none; }
.cd-gallery-thumbnail:hover { border-color:#b7b7b7; transform:translateY(-1px); }
.cd-gallery-thumbnail.is-active { border:2px solid var(--cd-gallery-accent); box-shadow:0 5px 18px rgba(0,0,0,.08); }
.cd-gallery-thumbnail:focus-visible { outline:2px solid var(--cd-gallery-accent); outline-offset:2px; }
.cd-gallery-thumbnail img { display:block; width:100%; height:100%; margin:0; padding:0; object-fit:contain; object-position:center; border-radius:7px; user-select:none; -webkit-user-drag:none; }
.cd-video-thumb-visual { position:relative; display:block; width:100%; height:100%; }
.cd-video-thumb-placeholder { display:block; width:100%; height:100%; border-radius:7px; background:linear-gradient(135deg,#f5f5f5,#ddd); }
.cd-video-play-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cd-video-play-icon::before { content:""; position:absolute; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.68); }
.cd-video-play-icon svg { position:relative; z-index:1; width:18px; height:18px; fill:#fff; }
.cd-thumb-navigation { display:flex; align-items:center; justify-content:center; width:94px; height:38px; margin:0; padding:0; border:1px solid #ddd; border-radius:8px; background:#f7f6f4; color:#667080; cursor:pointer; appearance:none; -webkit-appearance:none; transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease; }
.cd-thumb-navigation:hover { border-color:#c9c9c9; background:#eeeeec; color:#111; }
.cd-thumb-navigation:active { transform:scale(.96); }
.cd-thumb-navigation:focus-visible { outline:2px solid var(--cd-gallery-accent); outline-offset:2px; }
.cd-thumb-navigation svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.cd-gallery-main { position:relative; min-width:0; }
.cd-gallery-image-stage { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:630px; min-width:0; overflow:hidden; border:1px solid #f1f1f1; border-radius:14px; background:var(--cd-gallery-background); touch-action:pan-y; }
.cd-main-image-link, .cd-gallery-video-wrap { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.cd-main-image-link { padding:18px; text-decoration:none; cursor:zoom-in; }
.cd-main-image-link.is-hidden, .cd-gallery-video-wrap.is-hidden { display:none; }
.cd-gallery-main-image { display:block; width:100%; height:100%; max-width:100%; max-height:100%; margin:0; padding:0; object-fit:contain; object-position:center; opacity:1; transform:scale(1); user-select:none; -webkit-user-drag:none; transition:opacity .22s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.cd-gallery-main-image.is-changing { opacity:0; transform:scale(.975); }
.cd-gallery-video-wrap { padding:18px; background:#fff; }
.cd-gallery-main-video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; background:#000; border-radius:8px; }
.cd-main-navigation { position:absolute; top:50%; z-index:5; display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0; padding:0; border:1px solid rgba(0,0,0,.05); border-radius:50%; background:var(--cd-gallery-button-background); color:var(--cd-gallery-text); box-shadow:0 7px 22px rgba(0,0,0,.09); cursor:pointer; opacity:.92; transform:translateY(-50%); appearance:none; -webkit-appearance:none; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:background-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease; }
.cd-main-navigation-prev { left:18px; }
.cd-main-navigation-next { right:18px; }
.cd-main-navigation:hover { background:#fff; box-shadow:0 9px 25px rgba(0,0,0,.14); opacity:1; transform:translateY(-50%) scale(1.06); }
.cd-main-navigation:active { transform:translateY(-50%) scale(.96); }
.cd-main-navigation:focus-visible { outline:2px solid var(--cd-gallery-accent); outline-offset:3px; }
.cd-main-navigation svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.cd-gallery-counter { position:absolute; right:14px; bottom:14px; z-index:6; display:inline-flex; align-items:center; justify-content:center; min-width:58px; height:31px; padding:0 11px; border-radius:50px; background:rgba(20,20,20,.72); color:#fff; font-size:12px; font-weight:600; line-height:1; letter-spacing:.2px; pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cd-gallery-counter-divider { margin:0 5px; opacity:.65; }
.cd-gallery-loader { position:absolute; top:50%; left:50%; z-index:8; width:32px; height:32px; margin:-16px 0 0 -16px; border:3px solid rgba(0,0,0,.12); border-top-color:var(--cd-gallery-accent); border-radius:50%; opacity:0; visibility:hidden; pointer-events:none; animation:cdGalleryRotation .7s linear infinite; transition:opacity .2s ease, visibility .2s ease; }
.cd-product-gallery.is-loading .cd-gallery-loader { opacity:1; visibility:visible; }
@keyframes cdGalleryRotation { to { transform:rotate(360deg); } }
.cd-product-gallery-empty { padding:30px; border:1px solid #ededed; border-radius:12px; background:#fafafa; color:#555; text-align:center; }
@media (max-width:1024px) {
    .cd-product-gallery { grid-template-columns:82px minmax(0,1fr); gap:16px; }
    .cd-gallery-sidebar { width:82px; height:540px; }
    .cd-thumb-navigation { width:82px; }
    .cd-gallery-thumbnail { flex-basis:80px; width:76px; height:80px; }
    .cd-gallery-image-stage { height:540px; }
}
@media (max-width:767px) {
    .cd-product-gallery { display:flex; flex-direction:column-reverse; gap:13px; }
    .cd-gallery-main { width:100%; }
    .cd-gallery-image-stage { height:min(105vw,520px); min-height:340px; border-radius:11px; }
    .cd-main-image-link, .cd-gallery-video-wrap { padding:10px; }
    .cd-gallery-sidebar { display:block; width:100%; height:auto; }
    .cd-gallery-thumbnails { display:flex; flex-direction:row; width:100%; gap:9px; padding:3px 1px 5px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; }
    .cd-gallery-thumbnail { flex:0 0 72px; width:72px; height:72px; scroll-snap-align:start; }
    .cd-thumb-navigation { display:none; }
    .cd-main-navigation { width:42px; height:42px; }
    .cd-main-navigation-prev { left:10px; }
    .cd-main-navigation-next { right:10px; }
    .cd-main-navigation svg { width:21px; height:21px; }
    .cd-gallery-counter { right:10px; bottom:10px; }
}
@media (max-width:480px) {
    .cd-gallery-image-stage { min-height:310px; }
    .cd-gallery-thumbnail { flex-basis:64px; width:64px; height:64px; }
    .cd-main-navigation { width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce) {
    .cd-gallery-thumbnails, .cd-gallery-main-image, .cd-gallery-thumbnail, .cd-main-navigation, .cd-thumb-navigation { scroll-behavior:auto; transition:none; }
}
