/* Lakri product gallery. Behaviour ported from the Karkhano build; colours from the lakri theme (sheesham accent). */ .km-gal { --km-gal-accent: var(--sheesham, #7a3b24); --km-gal-text: var(--walnut, #3b2a1f); --km-gal-radius: 6px; --km-gal-thumb-w: 20%; --km-gal-thumb-gap: 15px; --badge-top: 20px; --badge-left: 20px; } .km-gal, .km-gal *, .km-gal *::before, .km-gal *::after { box-sizing: border-box; } .km-gal { position: relative; } .km-gal__main { position: relative; } .km-gal__viewport { position: relative; overflow: hidden; aspect-ratio: var(--km-gal-ratio, 1 / 1); border-radius: var(--km-gal-radius); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; } .km-gal[data-count="1"] .km-gal__viewport { cursor: default; } .km-gal.is-dragging .km-gal__viewport { cursor: ew-resize; } .km-gal.is-dragging .km-gal__slide { pointer-events: none; } .km-gal__track { position: absolute; inset: 0; } .km-gal__slide { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.25,.1,.25,1); will-change: transform; } .km-gal__slide.is-instant { transition: none; } .km-gal.is-dragging .km-gal__slide { transition: none; } .km-gal__media { position: relative; display: block; width: 100%; height: 100%; margin: 0; overflow: hidden; isolation: isolate; border-radius: inherit; } .km-gal__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; max-width: none; } .km-gal .km-gal__zoomimg { position: absolute; z-index: 2; top: 0; left: 0; width: auto; height: auto; max-width: none; opacity: 0; cursor: default; background: #fff; transition: opacity .1s ease; pointer-events: none; object-fit: initial; } .km-gal .km-gal__zoomimg.is-on { opacity: 1; } /* badges */ .km-gal__badges { position: absolute; top: var(--badge-top); inset-inline-start: var(--badge-left); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; } .km-gal__badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 55px; padding: 5px 10px; border-radius: 3px; text-align: center; color: #fff; background-color: var(--km-gal-accent); font-size: 12px; font-weight: 500; line-height: 1.1; } @media (max-width: 689.98px) { .km-gal__badge { font-size: 10px; } } /* full screen trigger */ .km-gal__zoom { position: absolute; z-index: 9; top: 20px; inset-inline-end: 20px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 100%; color: var(--km-gal-text); background: #fff; cursor: pointer; } .km-gal__zoom:hover { color: #fff; background: var(--km-gal-accent); } .km-gal__zoom::before { position: absolute; inset: 0; content: ""; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M14 12a2 2 0 0 0-2 2v3h1.5v-3a.5.5 0 0 1 .5-.5h3V12h-3Zm3 14.5h-3a.5.5 0 0 1-.5-.5v-3H12v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H28v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5v-3a.5.5 0 0 0-.5-.5h-3V12h3Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M14 12a2 2 0 0 0-2 2v3h1.5v-3a.5.5 0 0 1 .5-.5h3V12h-3Zm3 14.5h-3a.5.5 0 0 1-.5-.5v-3H12v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H28v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5v-3a.5.5 0 0 0-.5-.5h-3V12h3Z'/%3E%3C/svg%3E"); } /* arrows */ .km-gal__arrow { position: absolute; top: calc(50% - 20px); z-index: 4; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; border-radius: 100%; color: var(--km-gal-text); background: #fff; box-shadow: 0 25px 40px rgba(0,0,0,.03); transition: all .12s cubic-bezier(.455,.03,.515,.955); } .km-gal__arrow svg { pointer-events: none; } .km-gal__arrow--prev { left: 20px; --km-tx: -10px; } .km-gal__arrow--next { right: 20px; --km-tx: 10px; } .km-gal__arrow--next svg { transform: rotate(180deg); } @media (any-hover: hover) { .km-gal__arrow { opacity: 0; transform: translateX(var(--km-tx, 0)); } .km-gal__arrow:hover { color: #fff; background: var(--km-gal-accent); } .km-gal__main:hover > .km-gal__arrow, .km-gal__thumbs:hover > .km-gal__arrow { opacity: 1; transform: none; } } .km-gal__arrow[hidden] { display: none; } @media (max-width: 689.98px) { .km-gal__arrow { display: none; } } /* thumbnails */ .km-gal__thumbs { position: relative; } .km-gal__thumbs .km-gal__arrow { top: calc(50% - 20px + var(--km-gal-thumb-gap) / 2); } .km-gal__thumbs-viewport { overflow: hidden; } .km-gal__thumbs-track { display: flex; flex-wrap: nowrap; margin: 0 calc(var(--km-gal-thumb-gap) / -2); transition: transform .35s cubic-bezier(.25,.1,.25,1); will-change: transform; } .km-gal__thumb { flex: 0 0 var(--km-gal-thumb-w); width: var(--km-gal-thumb-w); margin: 0; padding: var(--km-gal-thumb-gap) calc(var(--km-gal-thumb-gap) / 2) 0; border: 0; background: none; cursor: pointer; opacity: 1; transition: opacity .25s cubic-bezier(.215,.61,.355,1); } .km-gal__thumb:hover { opacity: .75; } .km-gal__thumb.is-active { opacity: 1; } .km-gal__thumb-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; border-radius: var(--km-gal-radius); } .km-gal__thumb-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .km-gal__thumb-media::after { position: absolute; content: ""; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; border: 2px solid rgba(0,0,0,0); transition: border-color .25s cubic-bezier(.215,.61,.355,1); } .km-gal__thumb.is-active .km-gal__thumb-media::after { border-color: rgba(0,0,0,.2); } .km-gal__thumb:focus-visible { outline: 2px solid var(--km-gal-accent); outline-offset: -2px; } @media (min-width: 480px) and (max-width: 689.98px) { .km-gal { --km-gal-thumb-w: 25%; } } @media (max-width: 479.98px) { .km-gal { --km-gal-thumb-w: 33.333%; } } .km-gal__thumb-media--video .km-gal__play svg { width: 30%; height: 30%; transform: none; } .km-gal__thumb-media--video .km-gal__play { pointer-events: none; } /* video: play indicator + player */ .km-gal__play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .12s cubic-bezier(.455,.03,.515,.955), visibility .12s cubic-bezier(.455,.03,.515,.955); } .km-gal__play svg { border-radius: 100%; transition: transform .12s cubic-bezier(.455,.03,.515,.955); } .km-gal__play svg:hover { transform: scale3d(1.1,1.1,1); } .km-gal__play .km-video-loader { visibility: hidden; } .km-gal__play.loading svg { background: #fff; } .km-gal__play.loading .km-video-loader { visibility: visible; } .km-gal__media:not([data-state=playing]) .km-pause-path { display: none; } .km-gal__media .km-gal__video { position: absolute; inset: 0; z-index: 2; background: #000; transition: opacity .12s cubic-bezier(.455,.03,.515,.955); } .km-gal__media .km-gal__video :is(video, iframe) { width: 100%; height: 100%; border: 0; } .km-gal__media:not([data-state]) .km-gal__video { opacity: 0; } .km-gal__media[data-state=playing] .km-gal__video { opacity: 1; } .km-gal__media:not(.km-gal__media--simplified)[data-state] .km-gal__play { opacity: 0; visibility: hidden; } .km-gal__media--simplified[data-state=playing] .km-play-path { display: none; } .km-gal__media--simplified[data-state=playing]:not(:hover) .km-gal__play { opacity: 0; } @media (hover: none) { .km-gal__media--simplified[data-state=playing] .km-gal__play { display: none; } } .km-gal__media--simplified[data-state*=paused] .km-gal__video { opacity: 0; } .km-gal__media [data-video-size=cover]:is([data-video-source=youtube],[data-video-source=vimeo]) { inset-inline: -100vw; } .km-gal__media [data-video-size=cover][data-video-source=youtube-shorts] { inset-block: -100vh; } .km-gal__media [data-video-size=cover][data-video-source=upload] video { object-fit: cover; } /* images shaped unlike the first one are shown whole on a soft backdrop (never cropped) */ /* (.woocommerce-product-gallery img { height: auto } from the theme would otherwise win and crop tall images) */ .km-gal.images .km-gal__media > img:not(.km-gal__zoomimg) { width: 100%; height: 100%; object-fit: cover; } /* beats `.woocommerce div.product div.images img` */ .km-gal__media--contain { background: var(--surface, #f0e8dc); } .km-gal.images .km-gal__media--contain > img:not(.km-gal__zoomimg) { object-fit: contain; } /* hover-zoom affordance (desktop pointers only) */ @media (any-hover: hover) { .km-gal:not([data-count="1"]) .km-gal__media[data-src]:not([data-media-id]) { cursor: zoom-in; } } /* pager: counter + dots (phones, where the arrows are hidden) */ .km-gal__pager { position: absolute; z-index: 5; left: 0; right: 0; bottom: 14px; display: none; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .km-gal__counter { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; } .km-gal__counter b { font-weight: 600; } .km-gal__dots { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: auto; } .km-gal__dot { width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 100%; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s cubic-bezier(.25,.1,.25,1), background-color .25s ease; } .km-gal__dot.is-active { width: 18px; border-radius: 999px; background: #fff; } @media (max-width: 689.98px) { .km-gal__pager { display: flex; } } @media (prefers-reduced-motion: reduce) { .km-gal__dot { transition: none; } } /* video thumbnail: dimmed poster, clear play badge and a "Video" tag */ .km-gal__thumb-media--video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.12) 60%); pointer-events: none; } .km-gal__thumb-media--video .km-gal__play { z-index: 3; } .km-gal__thumb-media--video .km-gal__play svg { width: 36%; height: 36%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .km-gal__thumb-tag { position: absolute; z-index: 3; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; } /* vertical thumbnail rail (data-thumbs="left", wide screens only) */ @media (min-width: 1000px) { .km-gal[data-thumbs="left"]:not([data-count="1"]) { --km-gal-rail: 84px; display: grid; grid-template-columns: var(--km-gal-rail) minmax(0, 1fr); column-gap: var(--km-gal-thumb-gap); align-items: stretch; } .km-gal[data-thumbs="left"] .km-gal__main { grid-column: 2; grid-row: 1; } .km-gal[data-thumbs="left"] .km-gal__thumbs { grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; } .km-gal[data-thumbs="left"] .km-gal__thumbs-viewport { position: absolute; inset: 0; overflow: hidden; } .km-gal[data-thumbs="left"] .km-gal__thumbs-track { flex-direction: column; margin: 0; } .km-gal[data-thumbs="left"] .km-gal__thumb { flex: 0 0 auto; width: 100%; padding: 0 0 var(--km-gal-thumb-gap); } .km-gal[data-thumbs="left"] .km-gal__thumbs .km-gal__arrow { left: calc(50% - 20px); top: auto; width: 32px; height: 32px; margin-left: 4px; } .km-gal[data-thumbs="left"] .km-gal__thumbs .km-gal__arrow--prev { top: 6px; transform: rotate(90deg); } .km-gal[data-thumbs="left"] .km-gal__thumbs .km-gal__arrow--next { right: auto; bottom: calc(var(--km-gal-thumb-gap) + 6px); transform: rotate(90deg); } .km-gal[data-thumbs="left"] .km-gal__thumbs .km-gal__arrow--next svg { transform: rotate(180deg); } } /* lakri theme gives every