@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $defaultValues: ( --_sf-mgn-wdth-vl: getListOfResponsive(1117px, 100%, 747px), --_sf-mgn-height-vl: getListOfResponsive(1400px, 700px, 1040px), ); [data-div-type="element"] { &[data-element-type="productImage"] { // width: var(--_sf-nw-wh, var(--_tst-lt-wh)); // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))); width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))))); // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))); margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); // aspect-ratio --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))); // Display styles whose items stack vertically, with scroll control left at "Non". // These size to their content, so the element grows as more images arrive — 6 // products make it taller than 1. The same three modes are what EmblaCarousel's // own height effect treats as content-sized, and "Non" is the branch there that // takes the container's full scrollHeight instead of clamping to the viewport. // Every other combination (Slider, Column, Grid + Horizontal, or any mode set to // Scroll / Load More Button) keeps a fixed box and pages or scrolls inside it. $contentSizedGallery: '.embla[data-scroll-control="Non"]:is([data-display-style="Grid"][data-scroll-direction="Vertical"], [data-display-style="Rows"], [data-display-style="Masonry"])'; &:not(:has(#{$contentSizedGallery})) { height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))); } // Content-sized modes can't take a fixed height or they would clip the extra rows, // but the Height set in Layout still has to mean something — it becomes the floor // the element starts from and grows past. `min-height` is not a percentage base, so // the inner `height: 80%` / `--_ctm-height` chain stays content-driven as before. &:has(#{$contentSizedGallery}) { min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))); } // &[data-view-state="full"] { // width: auto; // // height: 100%; // margin: 0; // justify-self: stretch !important; // align-self: stretch !important; // cursor: auto; // } // &[data-view-state="full"] { // aspect-ratio: 1/0.01; // & > .wrapper { // & > div { // height: 100%; // } // } // img { // height: 100%; // object-fit: cover; // } // } &>.wrapper { width: 100%; height: 100%; &:has(.text-element) { display: flex; align-items: start; justify-content: center; } * { user-select: none; // width: 100%; } .product__img__wrapper { width: 100%; height: 100%; &:has(.image__fallback__contain) { display: flex; justify-content: center; align-items: center; } .image__fallback__contain { object-fit: contain !important; } } } &[data-show-shadow="false"] { --_show-shadow: none; } .product_image { height: 100%; object-fit: contain; } .main-image { position: relative; flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; // cursor: zoom-in; img { width: 100%; height: auto; object-fit: contain; display: block; } // .lens-overlay { // position: absolute; // width: 100px; // height: 100px; // pointer-events: none; // border-radius: 50%; // border: 1px solid rgba(0, 0, 0, 0.2); // box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); // background-repeat: no-repeat; // backdrop-filter: brightness(1.1); // z-index: 5; // } .lens-overlay { position: absolute; pointer-events: none; border: 1px solid rgba(0, 0, 0, 0.3); z-index: 10; background-color: rgba(255, 255, 255, 0.3); pointer-events: none; z-index: 10; } } // .magnifier-box { // position: absolute; // top: 0; // right: -102%; // z-index: 10; // // width: 70vw; // // height: 95vh; // width: 600px; // height: 600px; // background: white; // border: 1px solid #ccc; // box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); // .magnifier { // width: 100%; // height: 100%; // background-repeat: no-repeat; // background-position: center; // border-radius: 4px; // } // .magnifier-placeholder { // text-align: center; // padding: 1rem; // } // } .magnifier-box { position: absolute; right: -70%; top: 0; overflow: hidden; border: 1px solid #ccc; background: #fff; z-index: 9; img { position: absolute; will-change: transform; } } a:has(> img.text-element) { max-height: 100%; } .text-element { // background: #6d96e4; // padding: 10px; // font-weight: 600; // color: rgba(75, 69, 70, 1); max-width: 100%; max-height: 100%; // object-fit: contain; } .gallery-slider-element { --text-high-contrast-rgb-value: 49, 49, 49; --detail-medium-contrast: rgb(234, 234, 234); --text-body: rgb(54, 49, 61); overflow: hidden; position: relative; background-color: var(--_ctm-mob-dn-gy-wt-se-bd-cr, var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr)))); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); display: flex; flex-direction: column; --_sf-cd-gp: calc(var(--_sf-gp) * 0.5); gap: var(--_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))); width: 100%; height: 100%; // Gallery Widget Style > Border / Shadow toggles. Distinct names from the item // ones below, because .gallery__slide is a descendant and would otherwise // inherit whatever is set here. &[data-show-border="false"] { --_show-gy-border: none; } &[data-show-shadow="false"] { --_show-gy-shadow: none; } border-color: var(--_show-gy-border, var(--_ctm-mob-dn-gy-wt-se-br-cr, var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr)))); border-style: var(--_show-gy-border, var(--_ctm-mob-dn-gy-wt-se-br-se, var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se)))); border-width: var(--_show-gy-border, var(--_ctm-mob-dn-gy-wt-se-br-wh, var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh)))); border-radius: var(--_ctm-mob-dn-gy-wt-se-br-rs, var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))); box-shadow: var(--_show-gy-shadow, var(--_ctm-mob-dn-gy-wt-se-sw-ae, var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))) var(--_ctm-mob-dn-gy-wt-se-sw-br, var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))) var(--_ctm-mob-dn-gy-wt-se-sw-sd, var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))) var(--_ctm-mob-dn-gy-wt-se-sw-cr, var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr)))); .gallery-header { // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an)); // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg)); display: flex; flex-direction: column; gap: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))); padding-block: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))); padding-inline: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))); background-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))); width: 100%; border-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))); border-style: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))); border-width: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))); border-radius: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))); box-shadow: var(--_show-shadow, var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr)))); & h3 { color: var(--_ctm-mob-dn-gy-wt-se-cr, var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))); font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy, var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))); text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm, var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm))); word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp, var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp))); word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk, var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk))); font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se, var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))); font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt, var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))); font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic, var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))); text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an, var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))); letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg, var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))); line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht, var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))); text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue, var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))); } & p { color: var(--_ctm-mob-dn-gy-wt-se-cr-dc, var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))); font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy-dc, var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))); text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm-dc, var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc))); word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp-dc, var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc))); word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk-dc, var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc))); font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se-dc, var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))); font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt-dc, var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))); font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))); text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an-dc, var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))); letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg-dc, var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))); line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht-dc, var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))); text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue-dc, var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))); } // h3 { // margin-bottom: var(--_mb-4); // } } } &[data-text-position="top"] { .gallery-slider-element { flex-direction: column; } } &[data-text-position="bottom"] { .gallery-slider-element { flex-direction: column-reverse; } } &[data-text-position="left"] { .gallery-slider-element { flex-direction: row; } .gallery-header { width: fit-content; height: 100%; } &[data-widget-alignment="top"] { .gallery-slider-element { align-items: flex-start; } .gallery-header { justify-content: flex-start; } } &[data-widget-alignment="center"] { .gallery-slider-element { align-items: center; } .gallery-header { justify-content: center; } } &[data-widget-alignment="bottom"] { .gallery-slider-element { align-items: flex-end; } .gallery-header { justify-content: flex-end; } } } &[data-text-position="right"] { .gallery-header { width: fit-content; height: 100%; } .gallery-slider-element { flex-direction: row-reverse; } &[data-widget-alignment="top"] { .gallery-slider-element { align-items: flex-start; } .gallery-header { justify-content: flex-start; } } &[data-widget-alignment="center"] { .gallery-slider-element { align-items: center; } .gallery-header { justify-content: center; } } &[data-widget-alignment="bottom"] { .gallery-slider-element { align-items: flex-end; } .gallery-header { justify-content: flex-end; } } } .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; // overflow: hidden; .embla__viewport { width: 100%; // height: 100%; height: auto; flex-grow: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; .embla__container { width: 100%; height: 100%; display: grid; grid-template-rows: 100%; // grid-template-columns: 100%; grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))), calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))))); grid-auto-flow: column; gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); &[data-control-type="Bottom"][data-slider-control="Arrows"] { height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px)); } &[data-control-type="Bottom"][data-slider-control="Pagination Line"] { height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px)); } &[data-control-type="Bottom"][data-slider-control="Dots"] { height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px)); } .embla__slide { flex: 0 0 auto; width: 100%; height: 100%; } } } &:not([data-display-style="Column"]) { .embla__container { grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))); } } &[data-display-style="Grid"][data-scroll-direction="Vertical"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); } .embla__container { overflow: unset; height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); // min-height: var(--_ctm-height); grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))), 1fr); grid-template-rows: unset; grid-auto-flow: row; &[data-overflow-hidden="true"] { overflow: hidden; } .embla__slide { aspect-ratio: 1/1.1; } } } } &[data-display-style="Grid"][data-scroll-direction="Horizontal"] { .embla__viewport { .embla__container { grid-template-rows: repeat(var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))), calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))))); } } } &[data-display-style="Rows"] { // overflow: unset; .embla__viewport { overflow: unset; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); } .embla__container { // overflow: hidden; height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); // min-height: var(--_ctm-height); grid-template-columns: repeat(1, 1fr); grid-template-rows: unset; grid-auto-flow: row; .embla__slide { aspect-ratio: 7 / 2; } } } } &[data-display-style="Column"] { // overflow: unset; .embla__viewport { .embla__container { display: flex; .embla__slide { width: unset; height: 100%; aspect-ratio: 1 / 2; } } } } &[data-display-style="Masonry"] { // overflow: unset; .embla__viewport { overflow: hidden; height: 80%; flex-grow: 1; &:not([data-is-builder-type="true"]) { height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); } .embla__container { overflow: unset; display: block; column-count: var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))); gap: unset; column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); // height: auto; height: auto; .embla__slide { // break-inside: avoid; margin-bottom: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))); height: unset; .gallery__slide { height: unset; } } } } } .arrow-navigation { display: flex; position: absolute; top: 50%; left: 50%; width: 100%; justify-content: space-between; transform: translate(-50%, -50%); // padding-left: 20px; &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; // top: unset; // bottom: 6px; bottom: 10px; top: unset; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } } &[data-control-type="Side"] { .left-button, .right-button { background-color: transparent; } } &[data-background-shape="Round"] { .left-button, .right-button { @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%); &:not(:disabled):hover { @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%); } } } .left-button { padding: 10px; border-radius: 50%; border: none; width: var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))); height: var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; margin-left: 12px; span { display: flex; svg { width: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); height: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); path { stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))); } } } &:disabled { & svg { path { stroke: rgb(192, 192, 192); } } } } .right-button { border-radius: 50%; border: none; width: var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))); height: var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; margin-right: 12px; padding: 10px; span { display: flex; svg { width: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); height: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); path { stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))); } } } &:disabled { & svg { path { stroke: rgb(192, 192, 192); } } } } .icon { display: flex; svg { width: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); height: calc(var(--_ctm-mob-dn-pn-as-aw-se, var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5); path { stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))); } } } &[data-control-type="Side"] { .embla__viewport { width: calc(100% - 120px); margin-inline: auto; } } &[data-thumbnail-placement="top"] { flex-direction: column-reverse; } &[data-thumbnail-placement="bottom"] { flex-direction: column; } &[data-thumbnail-placement="left"] { flex-direction: row-reverse; .embla__thumbs { width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh))); height: 100%; flex-direction: column; margin-top: 0; margin-right: var(--_ctm-mob-lt-sr-ad-tl-gp, var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))); & .embla__thumbs__container { flex-direction: column; height: 100%; justify-content: prepareMediaVariable(--_ctm-lt-an-is); } .thumb-prev-button, .thumb-next-button { span { transform: rotate(90deg); } } .embla__thumbs__viewport { min-height: 0; } } } &[data-thumbnail-placement="right"] { flex-direction: row; .embla__thumbs { width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh))); height: 100%; flex-direction: column; margin-top: 0; margin-left: var(--_ctm-mob-lt-sr-ad-tl-gp, var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))); & .embla__thumbs__container { flex-direction: column; height: 100%; justify-content: prepareMediaVariable(--_ctm-lt-an-is); } .thumb-prev-button, .thumb-next-button { span { transform: rotate(90deg); } } .embla__thumbs__viewport { min-height: 0; } } } &[data-control-type="Side"] { flex-direction: row; align-items: center; } .embla__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-right: calc((2.6rem - 1.4rem) / 2 * -1); gap: 6px; margin-top: 16px; &[data-control-type="Bottom-Overflow"] { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 75%; } .embla__dot { -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5); -webkit-appearance: none; appearance: none; background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr, var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; // width: 0.6rem; // height: 0.6rem; width: var(--_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))); height: var(--_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .embla__dot:after { // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); width: var(--_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))); height: var(--_ctm-mob-dn-pn-ds-dt-se, var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))); border-radius: 50%; display: flex; align-items: center; content: ""; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr, var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))); } &[data-slider-control="Pagination Line"] { .embla__dot { width: var(--_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))); height: var(--_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))); background-color: var(--_ctm-mob-dn-pn-le-or-le-cr, var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))); border-radius: 6px; } .embla__dot--selected:after { box-shadow: inset 0 0 0 1px var(--text-body); border-radius: 6px; width: var(--_ctm-mob-dn-pn-le-le-wh, var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))); height: var(--_ctm-mob-dn-pn-le-le-ht, var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))); // background-color: #fff; background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr, var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))); } } } .embla__thumbs { width: 100%; height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht))); margin-top: var(--_ctm-mob-lt-sr-ad-tl-gp, var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))); position: relative; display: flex; flex-direction: row; align-items: center; overflow: hidden; // Thumbnail arrow shared styles .thumb-prev-button, .thumb-next-button { flex-shrink: 0; padding: 6px; border-radius: 50%; border: none; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; background-color: transparent; z-index: 1; width: var(--_ctm-mob-dn-tl-as-aw-se, var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))); height: var(--_ctm-mob-dn-tl-as-aw-se, var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))); span { display: flex; svg { width: calc(var(--_ctm-mob-dn-tl-as-aw-se, var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5); height: calc(var(--_ctm-mob-dn-tl-as-aw-se, var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5); path { stroke: var(--_ctm-mob-dn-tl-as-aw-cr, var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr))); } } } &:disabled { opacity: 0.3; cursor: not-allowed; } } &[data-background-shape="Round"] { .thumb-prev-button, .thumb-next-button { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); &:not(:disabled):hover { @include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%); } } } // margin: 10px; // padding: 10px; .embla__thumbs__viewport { width: 100%; height: 100%; flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; } .embla__thumbs__container { display: flex; flex-direction: row; justify-content: prepareMediaVariable(--_ctm-lt-jy-ct); gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg))); width: 100%; // height: 200px; .embla__thumbs__slide { flex-shrink: 0; max-width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh))); height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht))); cursor: pointer; overflow: hidden; padding: var(--_ctm-mob-lt-tl-pg, var(--_ctm-tab-lt-tl-pg, var(--_ctm-lt-tl-pg))); // thumbnailStyle - hoverState &:hover { --_sf-hr-bd-cr: var(--_ctm-mob-dn-tl-se-hr-se-bd-cr, var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr))); --_sf-hr-br-cr: var(--_ctm-mob-dn-tl-se-hr-se-br-cr, var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr))); --_sf-hr-br-se: var(--_ctm-mob-dn-tl-se-hr-se-br-se, var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se))); --_sf-hr-br-wh: var(--_ctm-mob-dn-tl-se-hr-se-br-wh, var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh))); --_sf-hr-br-rs: var(--_ctm-mob-dn-tl-se-hr-se-br-rs, var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs))); --_sf-hr-sw-ae: var(--_ctm-mob-dn-tl-se-hr-se-sw-ae, var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae))); --_sf-hr-sw-br: var(--_ctm-mob-dn-tl-se-hr-se-sw-br, var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br))); --_sf-hr-sw-sd: var(--_ctm-mob-dn-tl-se-hr-se-sw-sd, var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd))); --_sf-hr-sw-cr: var(--_ctm-mob-dn-tl-se-hr-se-sw-cr, var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr))); } // thumbnailStyle - defaultState background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)); border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr)); // thumbnailStyle - selectedState &[data-selected="true"] { --_sf-sd-bd-cr: var(--_ctm-mob-dn-tl-se-sd-se-bd-cr, var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr))); --_sf-sd-br-cr: var(--_ctm-mob-dn-tl-se-sd-se-br-cr, var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr))); --_sf-sd-br-se: var(--_ctm-mob-dn-tl-se-sd-se-br-se, var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se))); --_sf-sd-br-wh: var(--_ctm-mob-dn-tl-se-sd-se-br-wh, var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh))); --_sf-sd-br-rs: var(--_ctm-mob-dn-tl-se-sd-se-br-rs, var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs))); --_sf-sd-sw-ae: var(--_ctm-mob-dn-tl-se-sd-se-sw-ae, var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae))); --_sf-sd-sw-br: var(--_ctm-mob-dn-tl-se-sd-se-sw-br, var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br))); --_sf-sd-sw-sd: var(--_ctm-mob-dn-tl-se-sd-se-sw-sd, var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd))); --_sf-sd-sw-cr: var(--_ctm-mob-dn-tl-se-sd-se-sw-cr, var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr))); background-color: var(--_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)); border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr)); border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se)); border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh)); border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs)); box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr)); } &>div { height: 100%; } & img { width: 100%; height: 100%; object-fit: cover; } } } } } .gallery__slide { position: relative; img[data-has-link="true"] { cursor: pointer; } img[data-zoom="true"]:is([data-element-type="productDetails"] *) { cursor: zoom-in; } width: 100%; max-width: 100%; height: 100%; display: flex; flex: 0 0 auto; div { position: relative; overflow: hidden; width: 100%; height: 100%; } // flex-direction: column; background-color: var(--_ctm-mob-dn-im-se-bd-cr, var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))); // Item Style > Border / Shadow toggles. &[data-show-border="false"] { --_show-im-border: none; } &[data-show-shadow="false"] { --_show-im-shadow: none; } border-color: var(--_show-im-border, var(--_ctm-mob-dn-im-se-br-cr, var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)))); border-style: var(--_show-im-border, var(--_ctm-mob-dn-im-se-br-se, var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)))); border-width: var(--_show-im-border, var(--_ctm-mob-dn-im-se-br-wh, var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)))); border-radius: var(--_ctm-mob-dn-im-se-br-rs, var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))); box-shadow: var(--_show-im-shadow, var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))); gap: var(--_ctm-mob-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))); overflow: hidden; .gallery-header { display: flex; flex-direction: column; gap: var(--_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))); padding-block: var(--_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))); padding-inline: var(--_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))); background-color: var(--_ctm-mob-dn-im-tt-cr-dn-bd-cr, var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))); width: 100%; border-color: var(--_ctm-mob-dn-im-tt-cr-dn-br-cr, var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))); border-style: var(--_ctm-mob-dn-im-tt-cr-dn-br-se, var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))); border-width: var(--_ctm-mob-dn-im-tt-cr-dn-br-wh, var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))); border-radius: var(--_ctm-mob-dn-im-tt-cr-dn-br-rs, var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))); box-shadow: var(--_show-shadow, var(--_ctm-mob-dn-im-tt-cr-dn-sw-ae, var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-br, var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-sd, var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-cr, var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr)))); & h3 { color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr))); font-family: var(--_ctm-mob-dn-im-se-ft-fy, var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))); text-transform: var(--_ctm-mob-dn-im-se-tt-tm, var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))); word-wrap: var(--_ctm-mob-dn-im-se-wd-wp, var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))); word-break: var(--_ctm-mob-dn-im-se-wd-bk, var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))); font-size: var(--_ctm-mob-dn-im-se-ft-se, var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))); font-weight: var(--_ctm-mob-dn-im-se-ft-wt, var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))); font-style: var(--_ctm-mob-dn-im-se-ft-se-ic, var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))); text-align: var(--_ctm-mob-dn-im-se-tt-an, var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))); letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg, var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))); line-height: var(--_ctm-mob-dn-im-se-le-ht, var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))); text-decoration: var(--_ctm-mob-dn-im-se-ue, var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))); } & p { color: var(--_ctm-mob-dn-im-se-cr-dc, var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))); font-family: var(--_ctm-mob-dn-im-se-ft-fy-dc, var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))); text-transform: var(--_ctm-mob-dn-im-se-tt-tm-dc, var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))); word-wrap: var(--_ctm-mob-dn-im-se-wd-wp-dc, var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))); word-break: var(--_ctm-mob-dn-im-se-wd-bk-dc, var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))); font-size: var(--_ctm-mob-dn-im-se-ft-se-dc, var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))); font-weight: var(--_ctm-mob-dn-im-se-ft-wt-dc, var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))); font-style: var(--_ctm-mob-dn-im-se-ft-se-ic-dc, var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))); text-align: var(--_ctm-mob-dn-im-se-tt-an-dc, var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))); letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg-dc, var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))); line-height: var(--_ctm-mob-dn-im-se-le-ht-dc, var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))); text-decoration: var(--_ctm-mob-dn-im-se-ue-dc, var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))); } } img { // object-fit: contain; } &[data-text-position="On Image"] { .gallery-header { width: 100%; // height: 100%; position: absolute; } a:has(img) { width: 100%; } &[data-widget-alignment="top"] { // align-items: flex-start; .gallery-header { top: 0; justify-content: flex-start; } } &[data-widget-alignment="center"] { // align-items: center; .gallery-header { top: 50%; transform: translateY(-50%); justify-content: center; } } &[data-widget-alignment="bottom"] { // align-items: flex-end; .gallery-header { bottom: 0; justify-content: flex-end; } } } &[data-text-position="top"] { flex-direction: column; } &[data-text-position="bottom"] { flex-direction: column-reverse; } &[data-text-position="left"] { flex-direction: row; .gallery-header { width: fit-content; height: 100%; } &[data-widget-alignment="top"] { align-items: flex-start; .gallery-header { justify-content: flex-start; } } &[data-widget-alignment="center"] { align-items: center; .gallery-header { justify-content: center; } } &[data-widget-alignment="bottom"] { align-items: flex-end; .gallery-header { justify-content: flex-end; } } } &[data-text-position="right"] { flex-direction: row-reverse; .gallery-header { width: fit-content; height: 100%; } &[data-widget-alignment="top"] { align-items: flex-start; .gallery-header { justify-content: flex-start; } } &[data-widget-alignment="center"] { align-items: center; .gallery-header { justify-content: center; } } &[data-widget-alignment="bottom"] { align-items: flex-end; .gallery-header { justify-content: flex-end; } } } img { width: 100%; height: 100%; overflow: hidden; // border-radius: var( // --_ctm-mob-dn-im-se-br-rs, // var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)) // ); // object-fit: cover; // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft)); // object-fit: cover; &[data-has-title="true"] { height: 85%; } /* display: block; */ } .zoom-icon-overlay { position: absolute !important; top: 12px; left: 12px; z-index: 20; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 20px; pointer-events: none; transition: opacity 0.2s ease; } } .load__more__div { display: flex; justify-content: center; margin-block: 12px; &>button { padding-inline: 24px; border: 1px solid gray; padding-block: 12px; border-radius: 6px; } } } } html:has(.pim__main) { scrollbar-gutter: stable; } body:has(.pim__main) { overflow-y: clip; } // Product Magnifier .pim__main { position: var(--_p-fixed); inset: 0 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: calc(var(--_higher-zIndex, 9999) + 9999999); display: var(--_d-flex); align-items: center; justify-content: center; @include prepareMediaQueries($defaultValues); &>.pim__wrapper { display: var(--_d-flex); align-items: center; justify-content: center; background: #fff; max-width: var(--_sf-mgn-wdth-vl, 1140px); min-width: var(--_sf-mgn-wdth-vl, 1140px); height: 100dvh; overflow: clip; border: 1px solid #98a2b3; position: relative; &>button { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: #fff; z-index: 2; display: var(--_d-flex); align-items: center; justify-content: center; svg { width: 18px; height: 18px; path { color: #000; } } } .pim__img__main { width: 100%; height: 100%; position: relative; &>.pim__img__wrapper { height: 100%; } img { max-width: 100%; } .pim__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #98a2b3; z-index: 2; display: var(--_d-flex); align-items: center; justify-content: center; cursor: pointer; svg { width: 16px; height: 16px; path { color: #000; } } &.pim__nav--prev { left: 20px; } &.pim__nav--next { right: 20px; } } .pim__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; line-height: 1.4; z-index: 2; } } } }