@media (max-width: 1023px) { body:not(.prk-mobile-product-template-active) .prk-desktop-product-gallery { display: none !important; } } @media (min-width: 1024px) { .prk-desktop-product-gallery { display: block; width: 100%; position: relative; --prk-dpg-main-ratio: 1 / 1; --prk-dpg-main-bg: #fff; --prk-dpg-main-radius: 16px; --prk-dpg-thumb-size: 82px; --prk-dpg-thumb-radius: 9px; --prk-dpg-thumb-gap: 8px; --prk-dpg-thumb-border: #e7e7e9; --prk-dpg-thumb-active: #ff5c35; --prk-dpg-fit: contain; --prk-dpg-main-image-max-size: 480px; --prk-dpg-action-button-size: 38px; } .prk-dpg-shell { display: flex; align-items: stretch; justify-content: center; gap: 16px; width: 100%; } .prk-dpg--thumbs-bottom .prk-dpg-shell, .prk-dpg--thumbs-top .prk-dpg-shell { flex-direction: column; gap: 10px; } .prk-dpg--thumbs-top .prk-dpg-thumbs-swiper { order: 1; } .prk-dpg--thumbs-top .prk-dpg-main-wrap { order: 2; } .prk-dpg--thumbs-bottom .prk-dpg-main-wrap { order: 1; } .prk-dpg--thumbs-bottom .prk-dpg-thumbs-swiper { order: 2; } .prk-dpg--thumbs-right .prk-dpg-shell { flex-direction: row; } .prk-dpg--thumbs-left .prk-dpg-shell { flex-direction: row-reverse; } .prk-dpg-main-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .prk-dpg-main, .prk-dpg-main-swiper, .prk-dpg-main-card, .prk-dpg-list__item, .prk-dpg-mosaic__item { background: var(--prk-dpg-main-bg); border-radius: var(--prk-dpg-main-radius); } .prk-dpg-main-swiper { width: 100%; aspect-ratio: var(--prk-dpg-main-ratio); overflow: hidden; } .prk-dpg--static .prk-dpg-main { position: relative; aspect-ratio: var(--prk-dpg-main-ratio); background: var(--prk-dpg-main-bg); border-radius: 8px; overflow: hidden; } .prk-dpg-main-card { position: relative; overflow: hidden; cursor: pointer; min-height: 0; } .prk-dpg-media { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: 0; } .prk-dpg-main-img { display: block; object-fit: var(--prk-dpg-fit); user-select: none; } .prk-dpg[data-main-image-fit="contain"] .prk-dpg-main-img { width: auto; height: auto; max-width: min(100%, var(--prk-dpg-main-image-max-size)); max-height: min(100%, var(--prk-dpg-main-image-max-size)); } .prk-dpg[data-main-image-fit="cover"] .prk-dpg-main-img { width: 100%; height: 100%; max-width: none; max-height: none; } .prk-dpg-placeholder { width: 100%; min-height: 320px; display: grid; place-items: center; font-size: 12px; color: #81858b; } .prk-dpg-thumbs, .prk-dpg-thumbs-swiper { width: 100%; min-width: 0; } .prk-dpg--thumbs-right .prk-dpg-thumbs-swiper, .prk-dpg--thumbs-left .prk-dpg-thumbs-swiper { width: calc(var(--prk-dpg-thumb-size) + 6px); height: auto; max-height: min(590px, calc(100vw * .52)); flex: 0 0 calc(var(--prk-dpg-thumb-size) + 6px); padding: 2px 0; } .prk-dpg--thumbs-bottom .prk-dpg-thumbs-swiper, .prk-dpg--thumbs-top .prk-dpg-thumbs-swiper { height: calc(var(--prk-dpg-thumb-size) + 8px); padding: 2px 0; } .prk-dpg-thumbs-swiper .swiper-wrapper { align-items: center; } .prk-dpg--thumbs-right .prk-dpg-thumbs-swiper .swiper-wrapper, .prk-dpg--thumbs-left .prk-dpg-thumbs-swiper .swiper-wrapper { align-items: center; } .prk-dpg-thumb { width: var(--prk-dpg-thumb-size) !important; height: var(--prk-dpg-thumb-size) !important; border: 1px solid var(--prk-dpg-thumb-border); border-radius: var(--prk-dpg-thumb-radius); padding: 3px; background: #fff; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; } .prk-dpg-thumb:hover { border-color: color-mix(in srgb, var(--prk-dpg-thumb-active) 55%, var(--prk-dpg-thumb-border)); } .prk-dpg-thumb.is-active, .pmg-thumb.is-active { border-color: var(--prk-dpg-thumb-active); } .prk-dpg-thumb__img { width: 100%; height: 100%; object-fit: contain; border-radius: max(0px, calc(var(--prk-dpg-thumb-radius) - 4px)); display: block; } .prk-dpg-thumb__play, .prk-dpg-play, .prk-dpg-thumb__more { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .prk-dpg-thumb__play { color: #fff; background: rgba(0, 0, 0, .18); } .prk-dpg-thumb__play svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); } .prk-dpg-play svg { width: 58px; height: 58px; filter: drop-shadow(0 4px 16px rgba(0,0,0,.25)); } .prk-dpg-thumb--more .prk-dpg-thumb__img { filter: blur(2px); opacity: .55; } .prk-dpg-arrow { position: absolute; top: 50%; z-index: 5; width: 42px; height: 42px; transform: translateY(-50%); border: 0; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6e6d7a; transition: opacity .2s ease, transform .2s ease, background .2s ease; } .prk-dpg-arrow svg { width: 24px; height: 24px; fill: currentColor; } .prk-dpg-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.04); } .prk-dpg-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; } .prk-dpg-arrow--prev { right: 14px; } .prk-dpg-arrow--next { left: 14px; } .prk-dpg-pagination.prk-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; right: 0; left: 0; bottom: 14px; z-index: 6; } .prk-dpg-pagination .prk-bullet { width: 4px; height: 4px; border-radius: 999px; background: #555; opacity: .8; transition: all .3s ease; margin: 0 !important; } .prk-dpg-pagination .prk-bullet.swiper-pagination-bullet-active { width: 16px; height: 5px; border-radius: 20px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); opacity: 1; } .prk-dpg-list { display: flex; flex-direction: column; gap: 12px; position: relative; } .prk-dpg-list__item { aspect-ratio: var(--prk-dpg-main-ratio); border: 1px solid #efefef; overflow: hidden; } .prk-dpg-mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); gap: 8px; position: relative; } .prk-dpg-mosaic__item { min-height: 0; aspect-ratio: 1 / 1; border: 1px solid #efefef; overflow: hidden; position: relative; cursor: pointer; } .prk-dpg-mosaic__item--hero { grid-row: span 2; aspect-ratio: auto; } .prk-dpg-mosaic__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.46); color: #fff; font-size: 28px; font-weight: 800; z-index: 3; font-family: 'prk-font' !important; } .prk-dpg [data-prk-action-icons] { z-index: 8; } .zoomContainer { z-index: 999; } } @media (min-width: 1024px) { .prk-dpg-zoom-container { position: absolute; top: 0; inset-inline-start: calc(100% + 12px); width: 1px; height: 1px; z-index: 20; } } @media (min-width: 1024px) { .prk-dpg-main-wrap, .prk-dpg-main, .prk-dpg-list, .prk-dpg-mosaic { position: relative; } .prk-dpg-main-wrap > [data-prk-action-icons], .prk-dpg-main > [data-prk-action-icons], .prk-dpg-list > [data-prk-action-icons], .prk-dpg--mosaic > [data-prk-action-icons] { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 12; margin: 0 !important; padding: 0; pointer-events: auto; } .prk-dpg-zoom-container { position: absolute; top: var(--prk-dpg-zoom-offset-y, 0px); width: 1px; height: 1px; z-index: 30; pointer-events: none; } .prk-dpg-zoom-container[data-position="left"] { left: auto; right: calc(100% + var(--prk-dpg-zoom-offset-x, 14px)); } .prk-dpg-zoom-container[data-position="right"] { right: auto; left: calc(100% + var(--prk-dpg-zoom-offset-x, 14px)); } .prk-dpg-zoom-container[data-position="inside"] { inset-inline-start: 0; } .prk-dpg .zoomContainer, .prk-dpg .zoomWindowContainer, .prk-dpg .zoomWindow, .prk-dpg .zoomLens, .prk-dpg .zoomTint { z-index: 999 !important; } .prk-dpg .zoomLens { box-shadow: 0 10px 30px rgba(0,0,0,.12); } .prk-dpg-thumb--3d { display: grid; place-items: center; background: linear-gradient(145deg, #ffffff, #f5f5f7); } .prk-dpg-thumb__3d { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #0c0c0c; font-size: 13px; font-weight: 900; font-family: prk-font !important; letter-spacing: .08em; background: rgba(255,255,255,.5); pointer-events: none; } .prk-dpg-slide--3d, .prk-dpg-media--3d, .prk-dpg-list__item--3d, .prk-dpg-mosaic__item--3d { cursor: grab; } .prk-dpg-media--3d .prk-3d-viewer { min-height: 100%; } } .prk-mobile-3d-holder .prk-3d-viewer, .prk-mobile-gallery-stack__card--3d .prk-3d-viewer, .prk-mobile-gallery-mosaic__card--3d .prk-3d-viewer { min-height: 240px; } .prk-mobile-gallery-stack__card--3d, .prk-mobile-gallery-mosaic__card--3d, .prk-mobile-3d-slide { overflow: hidden; } @media (min-width: 1024px) { .prk-dpg { overflow: visible; } .prk-dpg-main-wrap { overflow: visible; } .prk-dpg .zoomContainer, .prk-dpg .zoomWindowContainer, .prk-dpg .zoomWindow, .prk-dpg .zoomLens, .prk-dpg .zoomTint { pointer-events: none; } .prk-dpg .prk-dpg-main-wrap > [data-prk-action-icons], .prk-dpg .prk-dpg-main > [data-prk-action-icons], .prk-dpg .prk-dpg-list > [data-prk-action-icons], .prk-dpg.prk-dpg--mosaic > [data-prk-action-icons] { position: absolute !important; z-index: 12; margin: 0 !important; padding: 0 !important; gap: var(--prk-dpg-action-gap, 24px) !important; pointer-events: auto; } .prk-dpg[data-action-icons-direction="vertical"] [data-prk-action-icons] { flex-direction: column !important; } .prk-dpg[data-action-icons-direction="horizontal"] [data-prk-action-icons] { flex-direction: row !important; align-items: center !important; } .prk-dpg[data-action-icons-position="inside_right_top"] [data-prk-action-icons] { top: var(--prk-dpg-action-top, 16px) !important; right: var(--prk-dpg-action-right, 16px) !important; bottom: auto !important; left: auto !important; transform: none !important; } .prk-dpg[data-action-icons-position="inside_right_bottom"] [data-prk-action-icons] { right: var(--prk-dpg-action-right, 16px) !important; bottom: var(--prk-dpg-action-bottom, 16px) !important; top: auto !important; left: auto !important; transform: none !important; } .prk-dpg[data-action-icons-position="inside_left_top"] [data-prk-action-icons] { top: var(--prk-dpg-action-top, 16px) !important; left: var(--prk-dpg-action-left, 16px) !important; right: auto !important; bottom: auto !important; transform: none !important; } .prk-dpg[data-action-icons-position="inside_left_bottom"] [data-prk-action-icons] { left: var(--prk-dpg-action-left, 16px) !important; bottom: var(--prk-dpg-action-bottom, 16px) !important; top: auto !important; right: auto !important; transform: none !important; } .prk-dpg[data-action-icons-position="inside_top_center"] [data-prk-action-icons] { top: var(--prk-dpg-action-top, 16px) !important; right: auto !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; } .prk-dpg[data-action-icons-position="inside_bottom_center"] [data-prk-action-icons] { bottom: var(--prk-dpg-action-bottom, 16px) !important; right: auto !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; } .prk-dpg[data-action-icons-position="outside_right"] .prk-dpg-main, .prk-dpg[data-action-icons-position="outside_right"] .prk-dpg-main-wrap, .prk-dpg[data-action-icons-position="outside_right"] .prk-dpg-list, .prk-dpg.prk-dpg--mosaic[data-action-icons-position="outside_right"] { box-sizing: border-box; padding-right: calc(var(--prk-dpg-action-right, 16px) + var(--prk-dpg-action-button-size, 38px) + 12px) !important; } .prk-dpg[data-action-icons-position="outside_left"] .prk-dpg-main, .prk-dpg[data-action-icons-position="outside_left"] .prk-dpg-main-wrap, .prk-dpg[data-action-icons-position="outside_left"] .prk-dpg-list, .prk-dpg.prk-dpg--mosaic[data-action-icons-position="outside_left"] { box-sizing: border-box; padding-left: calc(var(--prk-dpg-action-left, 16px) + var(--prk-dpg-action-button-size, 38px) + 12px) !important; } .prk-dpg[data-action-icons-position="outside_right"] [data-prk-action-icons] { top: var(--prk-dpg-action-top, 16px) !important; right: var(--prk-dpg-action-right, 16px) !important; bottom: auto !important; left: auto !important; transform: none !important; } .prk-dpg[data-action-icons-position="outside_left"] [data-prk-action-icons] { top: var(--prk-dpg-action-top, 16px) !important; left: var(--prk-dpg-action-left, 16px) !important; right: auto !important; bottom: auto !important; transform: none !important; } } @media (min-width: 1024px) { .prk-dpg--static .prk-dpg-main-card--3d, .prk-dpg--static .prk-dpg-main-card--3d .prk-dpg-media--3d, .prk-dpg--static .prk-dpg-main-card--3d .prk-3d-viewer, .prk-dpg--static .prk-dpg-main-card--3d model-viewer { width: 100%; height: 100%; min-height: 100%; } .prk-dpg--static .prk-dpg-main-card--3d { cursor: grab; } .prk-dpg--static .prk-dpg-main-card--3d:active { cursor: grabbing; } .prk-dpg--static .prk-dpg-thumb--3d.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--prk-dpg-thumb-active) 22%, transparent); } } @media (min-width: 1024px) { body.single-product > .zoomContainer, body.single-product > .zoomContainer .zoomWindowContainer, body.single-product > .zoomContainer .zoomWindow, body.single-product > .zoomContainer .zoomLens, body.single-product > .zoomContainer .zoomTint { z-index: 980 !important; pointer-events: none !important; } body.single-product > .zoomContainer .zoomWindowContainer, body.single-product > .zoomContainer .zoomWindow, body.single-product > .zoomContainer .zoomLens { border-radius: 0 !important; } body.single-product > .mega-menu-overlay.is-active ~ .zoomContainer, body.single-product > .mega-menu-overlay.is-activem ~ .zoomContainer, body.single-product > .mega-menu-overlay.is-closing ~ .zoomContainer, body.single-product > .mega-menu-overlay.is-closingm ~ .zoomContainer { opacity: 0 !important; visibility: hidden !important; } .prk-dpg [data-prk-action-icons] { z-index: 981 !important; } .prk-dpg--static .prk-dpg-thumb--more.is-active, .prk-dpg--static .pmg-thumb.prk-dpg-thumb--more.is-active { border-color: var(--prk-dpg-thumb-border) !important; box-shadow: none !important; transform: none !important; } } @media (min-width: 1280px) { .pr-main-container article.mobile-info-overlay > .continer > .flex:has(> section .prk-desktop-product-gallery) > section:nth-of-type(2), .pr-main-container article.mobile-info-overlay > .continer > .flex > section:nth-of-type(2) { flex: 0 1 50% !important; width: 50% !important; min-width: 0; } } @media (min-width: 1024px) and (max-width: 1279px) { .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 { display: grid !important; grid-template-columns: minmax(285px, 0.85fr) minmax(360px, 1.15fr) minmax(260px, 302px); align-items: start !important; gap: 12px !important; width: 100%; min-width: 0; } .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 > section { width: auto !important; min-width: 0 !important; max-width: none !important; margin-inline: 0 !important; } .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 > section:nth-of-type(1) { grid-column: 1; grid-row: 1; } .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 > section:nth-of-type(2) { grid-column: 2; grid-row: 1; } .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 > section:nth-of-type(3) { grid-column: 3; grid-row: 1; align-self: start; } .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 > section > .pr-sticky, .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 .prk-desktop-product-gallery, .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 .prk-purchase-form, .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 .product-title, .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 .product-feature-box, .prk-single-product-inner > .flex.flex-col.lg\:flex-row.gap-3 .product-seller-card { min-width: 0; max-width: 100%; } .prk-dpg--static .prk-dpg-thumbs--classic { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; max-width: 100%; padding-block: 2px; scroll-snap-type: inline proximity; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .prk-dpg--static .prk-dpg-thumbs--classic::-webkit-scrollbar { display: none; } .prk-dpg--static .prk-dpg-thumbs--classic > .prk-dpg-thumb { flex: 0 0 var(--prk-dpg-thumb-size) !important; scroll-snap-align: start; } .prk-dpg-main, .prk-dpg-main-card, .prk-dpg-media { min-width: 0; max-width: 100%; } .prk-purchase-form .variations, .prk-purchase-form .variations tbody, .prk-purchase-form .variations tr, .prk-purchase-form .variations td.value { min-width: 0; max-width: 100%; } .prk-purchase-form .product-color-text-swiper-container, .prk-purchase-form .product-color-text-swiper-container > .swiper { min-width: 0; max-width: 100%; } }