@use "sass:map"; @use "sass:list"; @use "sass:string"; @use "./functions.scss" as *; $overflowSelector: ".flex__overflow"; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; // Select button responsive chain for its selected state, falling through to the // default state when a selected-state property is left unconfigured in the builder. // prepareMediaVariable tails with `inherit`, so routing this through an intermediate // custom property would not work: the property is then always "set" and a var() // fallback on it never fires, leaving padding/width/gap collapsed once selected. // Variant-picker dropdown "Item Style" node, per state: dt (default), hr (hover), // sd (selected). Keeps the long `--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-*` // paths readable at the ~20 call sites in the option-row rules. @function itemState($state, $suffix) { @return prepareMediaVariable( string.unquote("--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-#{$state}-se-#{$suffix}") ); } @function selectButtonSelectedOrDefault($suffix) { $base: "--_ctm-dn-pt-pl-dn-st-bn-dn-"; $selected: string.unquote("#{$base}sd-se-#{$suffix}"); $default: string.unquote("#{$base}dt-se-#{$suffix}"); @return prepareMediaVariable($selected, prepareMediaVariable($default)); } $defaultValues: ( --_sf-flex-direckdaka-coldds: getListOfResponsive(row, column, column), --_sf-flex-direckdaka-mobile: getListOfResponsive(row, column), ); [data-div-type="element"] { &[data-element-type="bundleDetails"] { // width: var(--_sf-con-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: auto; margin: var( --_ctm-mob-lt-mn, var( --_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)))) ) ); background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr))); background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie))); background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))); background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))); background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt))); background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se))); padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg))); border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))); border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))); border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))); border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs))); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))) ); // &:not(:has(#{$resizerId}#{$resizeActive})) { // min-height: 100px !important; // } & > div { &.wrapper { width: 100%; // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important; } } .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; // overflow: hidden; .embla__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; .embla__container { width: 100%; height: 100%; display: grid; grid-template-rows: 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 { 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-mob-height, var(--_ctm-tab-height, var(--_ctm-height))); grid-template-columns: repeat(#{prepareMediaVariable(--_ctm-lt-is-pr-rw)}, 1fr); grid-template-rows: unset; grid-auto-flow: row; &[data-overflow-hidden="true"] { overflow: hidden; } } } } &[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-height); } .embla__container { overflow: hidden; 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-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-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; .embla__slide { 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="Side"] { .left-button, .right-button { background-color: transparent; } } &[data-background-shape="Round"] { .left-button, .right-button { background-color: #f2f5f5; box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1); } } &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } .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; &: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; &: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; } .left-button { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .right-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } &[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-lt-tl-se); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } &[data-thumbnail-placement="right"] { flex-direction: row; .embla__thumbs { width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } .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: 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-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; // margin: 10px; padding: 10px; .embla__thumbs__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; } .embla__thumbs__container { display: flex; flex-direction: row; margin-left: calc(var(--thumbs-slide-spacing) * -1); gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg))); width: 100%; // justify-content: center; // height: 200px; .embla__thumbs__slide { min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se))); & img { // width: 100%; // height: 100%; } } } } } .bundle__details__element__container { width: 100%; @include prepareMediaQueries($defaultValues); hr { border: none; height: 1px; background: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-dr-cr, #f2f4f7); } .bundle_details_heading_wrapper { display: flex; width: 100%; flex-direction: column; padding: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-pg, 24px 96px); // border-bottom: 1px solid #d0d5dd; gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-im-gp, 16px); box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-ae) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-br) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-br) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-cr); background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-rs); border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-se); border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-wh); .bundle_details_heading_text_wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; flex: 1 0 0; .bundle_name { background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs); border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue); } .bundle_description { background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-rs); border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-lr-sg); box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-cr); text-align: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ue); } } // Outer box around the whole category card row (Category Container). Its item gap // controls the spacing between cards, applied to the Embla track inside it. .category_container { width: 100%; padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-pg); background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-cr); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-wh); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-cr); // Show Border toggle (CONTROLS -> data-show-border on the element). Off removes // the border in every state; radius is untouched so shape stays. &[data-show-border="false"] { border: none; } // Gap between cards: the cards live in Embla's flex/grid track, so the // container's item gap is forwarded there. .embla__container { gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-im-gp); } // Slider arrows (Category Widget > Pagination Arrows). The icon glyph is chosen // in JS (getCMSSVG); everything else is CSS. Defaults preserve the previous // 20px / grey arrows with no background or border. .left-button, .right-button { background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-bd-cr); padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-pg); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-cr); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-wh); // Fall back to 0, NOT prepareMediaVariable's `inherit` tail — otherwise, with // no configured radius, "None" shape inherits the container's border-radius // and the arrows look rounded when they shouldn't. border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-rs, 0); // Show Border toggle for the arrow buttons. &[data-show-border="false"] { border: none; } // Shape option overrides the configured radius when set. "None" leaves it. &[data-background-shape="Round"] { border-radius: 50%; } &[data-background-shape="Square"] { border-radius: 0; } svg { width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-se, 20px); height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-se, 20px); path { stroke: prepareMediaVariable( --_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-cr, var(--_gray-500) ); } } } } .category_card_wrapper { cursor: pointer; display: flex; // padding + gap now configurable (Category Card > Layout). Fall back to the // previous hardcoded 16px / 12px so unconfigured cards look unchanged. padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-pg, 16px); gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-im-gp, 12px); background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-cr); &:hover { padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-pg, 16px); gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-im-gp, 12px); background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-cr); } &.active { padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-pg, 16px); gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-im-gp, 12px); background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-cr); } // Show Border toggle for the card. Placed after :hover/.active so it wins in // every state when off (equal specificity, later source order). &[data-show-border="false"] { border: none; } .category_image { // Sizing + border/radius configurable (Category Image). Defaults preserve the // previous fixed 48x72 thumbnail. width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-wh, 48px); height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-ht, 72px); object-fit: cover; border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-cr); border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-se); border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-wh); border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-rs); &[data-show-border="false"] { border: none; } } .category_card_info_wrapper { display: flex; flex-direction: column; gap: 4px; width: fit-content; white-space: nowrap; .category_card_category_name { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ue); } .category_card_product_count { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ue); } .category_card_product_select_count { // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ue); } } } } .bundle_details_product_list_wrapper { @import "./product-image-bundles.scss"; display: flex; flex-direction: column; gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-im-gp, 16px); padding: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-pg, 36px 96px); width: 100%; .add_to_cart_wrapper { display: flex; flex-direction: column; gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-ad-to-ct-im-gp, 16px); padding: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-ad-to-ct-pg, 16px); width: 100%; background-color: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-ad-to-ct-bd-cr, #f5f5f5); .add_to_cart_heading { // border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr); // border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs); // border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se); // border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-te-ue); } .add_to_cart_estimator_wrapper { display: flex; gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-ad-to-ct-im-gp, 48px); justify-content: space-between; width: 100%; flex-direction: var(--_sf-flex-direckdaka-mobile, row); .add_to_cart_estimate_wrapper { display: flex; flex-direction: column; gap: 6px; .add_to_cart_qty { width: 205px; // border: 1px solid #d0d5dd !important; // border-radius: 2px !important; outline: none; // padding: 8px 12px !important; &:disabled { // background-color: #f9fafb; cursor: no-drop; } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-le-ht); padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-pg); &[data-show-border="true"] { border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-cr); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-wh); } border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-rs); background: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-bd-cr); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-sw-cr); } .add_to_cart_price { background-color: transparent; color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ue); } .add_to_cart_estimate_label { font-family: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-wd-bk); line-height: 150%; font-size: 16px; color: #000000; &:not(:has(+ input)) { color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-pe-ll-ue); } &:has(+ input) { color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-qy-ll-ue); } } } } // Add to cart renders through ButtonComponent, so it carries `btn__with__text` // and the `.txt` / `.icon` children rather than a bare label. Default and hover // only — unlike the select button this is a transient action with no selected // state, so there is no `-sd-se-` set to fall through to. .btn__with__text[data-btn-name="addToCartButton"] { &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)}; --_sf-hr-sw-sd: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)}; --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic )}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-in-c1)}; // for padding and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } display: flex; align-items: center; flex-direction: var(--_sf-fd-bn); transition: all 0.3s ease; background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr) ); padding: var( --_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-pg, 10px 16px) ); width: var( --_sf-hr-wh, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wh) ); justify-content: var( --_sf-hr-at, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-at, center) ); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-gp)); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae) ) var( --_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br) ) var( --_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd) ) var( --_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr) ); &:disabled { cursor: not-allowed; } &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh) ); } .txt { display: flex; color: var( --_sf-hr-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr) ); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-tm) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wd-wp) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue) ); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-se) ); height: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-se) ); path { stroke: var( --_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-c1) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable( --_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-se-wh, 1.25 ); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { display: flex; } &:hover .icon--default { display: none; } } } .bundle_details_product_wrapper { display: flex; gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-im-gp, 48px); width: 100%; flex-direction: var(--_sf-flex-direckdaka-coldds, row); &.vertical_wrapper { flex-direction: row; .product_card_scroll_wrapper { min-width: 400px; max-width: 400px; display: flex; flex-direction: column; gap: 16px; .category_bundle_product_card { width: 100%; display: flex; padding: 16px; gap: 16px; background-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr); &:hover { background-color: prepareMediaVariable( --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr ); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr); } &.active { background-color: prepareMediaVariable( --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr ); border-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs); border-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr); .category_bundle_product_card_product_name { font-weight: bolder; } } .category_bundle_product_card_select { width: auto; } .category_bundle_product_card_img { width: 80px; height: auto; } .category_bundle_product_card_info { display: flex; flex-direction: column; gap: 24px; .category_bundle_product_card_info_wrapper { display: flex; flex-direction: column; gap: 6px; .category_bundle_product_card_product_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue); } .category_bundle_product_card_brand_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue); } .category_bundle_product_card_item_name { // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr // ); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue); } } .category_bundle_product_card_product_price { // background-color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue); } } } } } .gallery { display: flex; flex-direction: column; gap: 16px; .mainImage { position: relative; overflow: visible; border-radius: 8px; background-color: #f9fafb; aspect-ratio: 1 / 1; width: 360px; &::before { content: ""; display: block; padding-top: 100%; } } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; &:hover { transform: scale(1.05); } } .thumbnails { display: flex; gap: 8px; } .thumbnailButton { width: 80px; height: 80px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; transition: border-color 0.2s ease-in-out; &:hover { border-color: #dbeafe; } &.active { border-color: #2563eb; } &:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; } } .thumbnailImage { width: 100%; height: 100%; object-fit: cover; } } .bundle_detail_product_information { display: flex; flex-direction: column; flex: 1 0 0; width: 100%; gap: 24px; .bundle_detail_product_image_slide_wrapper { display: flex; max-width: 40rem; gap: 16px; overflow-x: scroll; .bundle_detail_product_image_slide { width: 148px; height: 248px; } } .bundle_detail_product_heading_wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; .bundle_detail_product_name { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-tm); width: 100%; &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .bundle_detail_product_info { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-io-dn-ue); width: 100%; } } .bundle_detail_product_price { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-wd-bk); font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se); font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue); width: 100%; } .variant__picker__static { .text-element { color: #333; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; margin-bottom: 6px; } .option__title { margin-bottom: 4px; color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); font-style: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue) ) ); } .is__combination_avail { color: red; font-size: 14px; font-weight: 600; } .variant__container { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg) ) ); white-space: nowrap; background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr); border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr); border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs); border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se); border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh); box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr); .standard_wrapper { // Select Colors .select__colors { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); // padding: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg)) // ); .select__group { display: flex; flex-direction: row; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg) ) ); &[data-swatch-dispaly="Vertically"] { flex-direction: column; } &[data-swatch-overflow="Scroll"] { flex-wrap: nowrap; overflow-x: auto; } &[data-swatch-overflow="Wrap"] { flex-wrap: wrap; } .show_more_button { background-color: var( --_ctm-mob-dn-sw-me-is-bn-bd-cr, var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)) ); font-family: var( --_ctm-mob-dn-sw-me-is-bn-ft-fy, var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-sw-me-is-bn-tt-tm, var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-sw-me-is-bn-wd-wp, var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)) ); word-break: var( --_ctm-mob-dn-sw-me-is-bn-wd-bk, var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)) ); border-color: var( --_ctm-mob-dn-sw-me-is-bn-br-cr, var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)) ); border-radius: var( --_ctm-mob-dn-sw-me-is-bn-br-rs, var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)) ); border-style: var( --_ctm-mob-dn-sw-me-is-bn-br-se, var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)) ); border-width: var( --_ctm-mob-dn-sw-me-is-bn-br-wh, var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)) ); font-size: var( --_ctm-mob-dn-sw-me-is-bn-ft-se, var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)) ); font-style: var( --_ctm-mob-dn-sw-me-is-bn-ft-se-ic, var( --_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic) ) ); font-weight: var( --_ctm-mob-dn-sw-me-is-bn-ft-wt, var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)) ); line-height: var( --_ctm-mob-dn-sw-me-is-bn-le-ht, var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-sw-me-is-bn-lr-sg, var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-sw-me-is-bn-sw-ae, var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-br, var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-sd, var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-cr, var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)) ); text-align: var( --_ctm-mob-dn-sw-me-is-bn-tt-an, var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)) ); color: var( --_ctm-mob-dn-sw-me-is-bn-tt-cr, var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)) ); text-decoration: var( --_ctm-mob-dn-sw-me-is-bn-ue, var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)) ); } .select__group__item { transition: width 0.3s ease; --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se: var( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); height: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); width: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se ); padding: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh ) ); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae ) ) var( --_sf-hr-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br ) ) var( --_sf-hr-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd ) ) var( --_sf-hr-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr ) ); cursor: pointer; overflow: hidden; .product-select-image { object-fit: cover; width: 100%; height: 100%; } &[data-background-shape="circle"] { border-radius: 50%; } &[data-background-shape="square"] { border-radius: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); } &[data-background-shape="capsule"] { --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se); --toggle-width: calc( var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se) * 1.5 ); width: var(--toggle-width); height: var(--toggle-height); border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape="circle"] { & div, .product-select-image { border-radius: 50%; } // border-radius: 50%; } &[data-swatch-shape="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } // border-radius: 50%; } &[data-swatch-shape="square"] { & div, .product-select-image { border-radius: var( --_sf-hr-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); } // border-radius: 50%; } &[data-selected="true"] { border-color: var( --_sf-sd-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr ) ); &[data-background-shape-selected="circle"] { border-radius: 50%; } &[data-background-shape-selected="square"] { border-radius: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs ); } &[data-background-shape-selected="capsule"] { border-radius: 80%; // width: calc( // var(--_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se))) + // 8px // ); } &[data-swatch-shape-selected="circle"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="capsule"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="square"] { & div, .product-select-image { border-radius: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs ); } } } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr) ) ); --_sf-hr-br-rs: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs )}; --_sf-hr-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr) ) ); --_sf-hr-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se) ) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh) ) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs) ) ); // new --_sf-hr-sw-ae: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae) ) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br) ) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-hr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr) ) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-on-ve-se-hr-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr) ) ); } &:hover { &[data-background-shape-hover="circle"] { border-radius: 50%; } // &[data-background-shape-hover="square"] { // border-radius: 5px; // } &[data-background-shape-hover="capsule"] { border-radius: 80%; // width: calc( // var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se)) // ) + // 8px // ); } &[data-swatch-shape-hover="circle"] { & div, .product-select-image { border-radius: 50%; } // border-radius: 50%; } &[data-swatch-shape-hover="capsule"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-hover="square"] { & div, .product-select-image { border-radius: 5px; } } } &[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr) ) ); --_sf-sd-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr) ) ); --_sf-sd-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se) ) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh) ) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs) ) ); // new --_sf-sd-sw-ae: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae) ) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br) ) ); --_sf-sd-sw-sd: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-sd, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd) ) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr) ) ); border-color: var( --_sf-sd-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh ) ); border-radius: var( --_sf-sd-br-rs, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr ) ); &[data-background-shape-selected="circle"] { border-radius: 50%; } &[data-background-shape-selected="square"] { border-radius: 5px; } &[data-background-shape-selected="capsule"] { --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se); --toggle-width: calc( var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se) * 1.5 ); width: var(--toggle-width); height: var(--toggle-height); border-radius: var(--toggle-height); /* Full pill shape */ box-sizing: border-box; } &[data-swatch-shape-selected="circle"] { & div, .product-select-image { border-radius: 50%; } } &[data-swatch-shape-selected="capsule"] { & div, .product-select-image { // border-radius: 50%; width: 100%; height: 100%; border-radius: inherit; } } &[data-swatch-shape-selected="square"] { & div, .product-select-image { border-radius: 5px; } } } // &.disabled { // cursor: not-allowed; // opacity: 0.4; // &[data-swatch-type="Swatch Image"] { // position: relative; // overflow: hidden; // &::after { // content: ""; // width: 172%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(48deg); // /* -webkit-transform: rotate(48deg); */ // -moz-transform: rotate(48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // &::before { // content: ""; // width: 164%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(-48deg); // -webkit-transform: rotate(-48deg); // -moz-transform: rotate(-48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // } // } position: relative; &.disabled { color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; opacity: 0.3; overflow: hidden; } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } .product-select-image { width: 100%; height: 100%; } } } } // Select Fit and Size .select__fit { font-size: 16px; color: var(--_gray-500); display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); // padding: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg)) // ); .select__group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; flex-direction: row; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg) ) ); &[data-single-dispaly="Vertically"] { flex-direction: column; } &[data-single-overflow="Scroll"] { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; } &[data-swatch-overflow="Scroll"] { overflow-x: auto; flex-wrap: nowrap; overflow-y: hidden; } .show_more_button { background-color: var( --_ctm-mob-dn-sw-me-is-bn-bd-cr, var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr)) ); font-family: var( --_ctm-mob-dn-sw-me-is-bn-ft-fy, var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-sw-me-is-bn-tt-tm, var(--_ctm-tab-dn-sw-me-is-bn-tt-tm, var(--_ctm-dn-sw-me-is-bn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-sw-me-is-bn-wd-wp, var(--_ctm-tab-dn-sw-me-is-bn-wd-wp, var(--_ctm-dn-sw-me-is-bn-wd-wp)) ); word-break: var( --_ctm-mob-dn-sw-me-is-bn-wd-bk, var(--_ctm-tab-dn-sw-me-is-bn-wd-bk, var(--_ctm-dn-sw-me-is-bn-wd-bk)) ); border-color: var( --_ctm-mob-dn-sw-me-is-bn-br-cr, var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr)) ); border-radius: var( --_ctm-mob-dn-sw-me-is-bn-br-rs, var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs)) ); border-style: var( --_ctm-mob-dn-sw-me-is-bn-br-se, var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se)) ); border-width: var( --_ctm-mob-dn-sw-me-is-bn-br-wh, var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh)) ); font-size: var( --_ctm-mob-dn-sw-me-is-bn-ft-se, var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se)) ); font-style: var( --_ctm-mob-dn-sw-me-is-bn-ft-se-ic, var( --_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic) ) ); font-weight: var( --_ctm-mob-dn-sw-me-is-bn-ft-wt, var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt)) ); line-height: var( --_ctm-mob-dn-sw-me-is-bn-le-ht, var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-sw-me-is-bn-lr-sg, var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg)) ); box-shadow: var( --_ctm-mob-dn-sw-me-is-bn-sw-ae, var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-br, var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-sd, var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd)) ) var( --_ctm-mob-dn-sw-me-is-bn-sw-cr, var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr)) ); text-align: var( --_ctm-mob-dn-sw-me-is-bn-tt-an, var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an)) ); color: var( --_ctm-mob-dn-sw-me-is-bn-tt-cr, var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr)) ); text-decoration: var( --_ctm-mob-dn-sw-me-is-bn-ue, var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue)) ); } &[data-single-dispaly="Grid"] { display: grid; grid-template-columns: repeat( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw) ) ), minmax(auto, 1fr) ); } .select__group__item { transition: color 0.3s ease; // border-radius: 6px; // border: 1px solid var(--_gray-200); cursor: pointer; display: flex; align-items: center; justify-content: center; // height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se); // width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se); padding: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg ); min-width: 20px; min-height: 20px; box-sizing: content-box; border-radius: var( --_sf-hr-br-crrr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs ) ); // border-radius: var( // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs, // var( // --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs, // var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs) // ) // ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-hr-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh ) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae ) ) var( --_sf-hr-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br ) ) var( --_sf-hr-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd ) ) var( --_sf-hr-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr ) ); // font is pending color: var( --_sf-hr-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr ) ); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy ) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-tm ) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-wp ) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-bk ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se ) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt ) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic ) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an ) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg ) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc ) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue ) ); &[data-background-shape="circle"] { border-radius: 50%; } // &[data-background-shape="square"] { // border-radius: 5px; // } &[data-background-shape="capsule"] { border-radius: 40px; /* Full pill shape */ box-sizing: border-box; } &:hover { --_sf-hr-bd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr) ) ); --_sf-hr-br-crrr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs )}; --_sf-hr-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr) ) ); --_sf-hr-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se) ) ); --_sf-hr-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh) ) ); --_sf-hr-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs) ) ); // new --_sf-hr-sw-ae: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae) ) ); --_sf-hr-sw-br: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br) ) ); --_sf-hr-sw-hr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr) ) ); --_sf-hr-sw-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr) ) ); // for font --_sf-hr-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr) ) ); --_sf-hr-ft-fy: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy) ) ); --_sf-hr-tt-tm: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-tm) ) ); --_sf-hr-wd-wp: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-wp) ) ); --_sf-hr-wd-bk: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-wd-bk) ) ); --_sf-hr-ft-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se) ) ); --_sf-hr-ft-wt: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt) ) ); --_sf-hr-ft-se-ic: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic) ) ); --_sf-hr-tt-an: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an) ) ); --_sf-hr-lr-sg: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg) ) ); --_sf-hr-le-ht: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht) ) ); --_sf-hr-ue: var( --_ctm-mob-dn-on-ve-se-hr-se-ue, var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue)) ); } &.child { border: 0; border-radius: 0; border-bottom: 2px solid var(--_gray-200); } &[data-selected="true"] { --_sf-sd-bd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr) ) ); --_sf-hr-br-crrr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs )}; --_sf-sd-br-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr) ) ); --_sf-sd-br-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se) ) ); --_sf-sd-br-wh: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh) ) ); --_sf-sd-br-bs: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs) ) ); // new --_sf-sd-sw-ae: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae) ) ); --_sf-sd-sw-br: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br) ) ); --_sf-sd-sw-hr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-hr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr) ) ); --_sf-sd-sw-cr: var( --_ctm-mob-dn-on-ve-se-sd-se-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr) ) ); // for font --_sf-sd-cr: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr) ) ); --_sf-sd-ft-fy: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy) ) ); --_sf-sd-tt-tm: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-tm) ) ); --_sf-sd-wd-wp: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-wp) ) ); --_sf-sd-wd-bk: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-wd-bk) ) ); --_sf-sd-ft-se: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se) ) ); --_sf-sd-ft-wt: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt) ) ); --_sf-sd-ft-se-ic: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic) ) ); --_sf-sd-tt-an: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an) ) ); --_sf-sd-lr-sg: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg) ) ); --_sf-sd-le-ht: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht) ) ); --_sf-sd-ue: var( --_ctm-mob-dn-on-ve-se-sd-se-ue, var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue)) ); border-color: var( --_sf-sd-br-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr ) ); background-color: var( --_sf-sd-bd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr ) ); border-style: var( --_sf-sd-br-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se ) ); border-width: var( --_sf-sd-br-wh, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh ) ); box-shadow: var( --_sf-sd-sw-ae, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae ) ) var( --_sf-sd-sw-br, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br ) ) var( --_sf-sd-sw-sd, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd ) ) var( --_sf-sd-sw-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr ) ); // font is pending color: var( --_sf-sd-cr, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr ) ); font-family: var( --_sf-sd-ft-fy, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy ) ); text-transform: var( --_sf-sd-tt-tm, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-tm ) ); word-wrap: var( --_sf-sd-wd-wp, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-wp ) ); word-break: var( --_sf-sd-wd-bk, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-wd-bk ) ); font-size: var( --_sf-sd-ft-se, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se ) ); font-weight: var( --_sf-sd-ft-wt, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt ) ); font-style: var( --_sf-sd-ft-se-ic, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic ) ); text-align: var( --_sf-sd-tt-an, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an ) ); letter-spacing: var( --_sf-sd-lr-sg, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg ) ); line-height: var( --_sf-sd-le-ht, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc ) ); text-decoration: var( --_sf-sd-ue, prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue ) ); } &.selected__child { border: 0px; border-bottom: 2px solid var(--_primary-400); } // &.disabled { // cursor: not-allowed; // opacity: 0.4; // position: relative; // overflow: hidden; // &::after { // content: ""; // width: 172%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(48deg); // /* -webkit-transform: rotate(48deg); */ // -moz-transform: rotate(48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // &::before { // content: ""; // width: 164%; // height: 1px; // position: absolute; // background: #f00; // left: -14px; // transform: rotate(-48deg); // -webkit-transform: rotate(-48deg); // -moz-transform: rotate(-48deg); // top: 14px; // box-shadow: 2px 0 5px rgba(255, 255, 255, 1); // } // } position: relative; &.disabled { color: #aaa; background-color: #f9f9f9; border-color: #ddd; cursor: not-allowed; overflow: hidden; } .cross-line { position: absolute; inset: 0; background-color: #cccccc; clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%); pointer-events: none; } } } } &[data-show-divider="true"] { &:not(:last-child)::after { content: ""; position: relative; // Colour and thickness come from the variant picker's widgetStyle // node (dividerColor / dividerWidth), which already existed in the // schema but was never read here — the line was hardcoded black 1px. background-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr, #000 )}; height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh, 1px )}; width: 100%; display: flex; top: calc( calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) + 10px ) / 2 ); } } .title { margin-bottom: 4px; color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); font-style: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue) ) ); } } //Dropdown .est__dropdown__main { position: relative; // Widget width; falls back to 100% so an unconfigured picker keeps // filling the product card. width: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-wh, 100% )}; display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg) ) ); margin-top: 10px; label { font-size: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se) ) ); font-family: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, // Was `var(--_gray-700, )` — inverted, so the theme // token always won and the configured colour was unreachable. var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_gray-700)) ) ); font-weight: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt) ) ); text-decoration: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue) ) ); letter-spacing: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an) ) ); line-height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht) ) ); display: block; } .est__dropdown { cursor: pointer; position: relative; color: var(--_gray-700); display: flex; justify-content: space-between; align-items: center; width: 100%; .value__selected { width: 100%; } // Trigger box — builder panel "Dropdown Style > Widget Style". // A hardcoded `border-radius: 6px` / white background used to sit on // .est__dropdown and mask every one of these settings. .est__dropdown__button { display: flex; align-items: center; width: 100%; position: relative; gap: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-im-gp )}; padding: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-pg )}; background-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-bd-cr )}; // Border only when the widget style's showBorder toggle is on. // Radius stays outside the gate — it applies to the background too. &[data-show-border="true"] { border-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-cr )}; border-style: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-se )}; border-width: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-wh )}; } border-radius: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-rs )}; box-shadow: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-ae )} #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-br)} #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-sd)} #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-cr)}; color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-cr )}; font-family: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-fy )}; font-size: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-se )}; font-weight: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-wt )}; font-style: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-se-ic )}; text-decoration: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ue )}; text-align: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-tt-an )}; letter-spacing: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-lr-sg )}; line-height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-le-ht )}; .option_select, .value__selected__new { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Placeholder shown until a variant is picked — builder panel // "Dropdown Style > Widget Placeholder Text". .value__selected__new { color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-cr )}; font-family: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-fy )}; font-size: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-se )}; font-weight: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-wt )}; font-style: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-se-ic )}; text-decoration: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ue )}; text-align: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-tt-an )}; letter-spacing: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-lr-sg )}; line-height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-le-ht )}; padding: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-pg )}; } } // Option rows — builder panel "Dropdown Style > Item Style". // Hover/selected override via the `--_sf-hr-*` layer, the same // pattern the buttons in this stylesheet use. .option { width: 100%; display: flex; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; // Item divider. The row carries `data-show-divider` from the widget // style panel; the existing `.list__option` rules in this file never // matched anything, because the DOM renders `.option`. // Divider colour/width come from DividerStylesInstance on widgetStyle // (dividerWeight / dividerColor), with defaults so the line still // renders when nothing is configured. // Rows sit flush against each other, so the divider is pushed just // below the row and the row keeps that much margin for it — // otherwise a thick one grew up over its own label. &[data-show-divider="true"]:not(:last-child) { @include dividerGapReserve(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh); } &[data-show-divider="true"]:not(:last-child)::after { content: ""; position: absolute; left: 0; bottom: dividerGapOffset( 0px, --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh ); width: 100%; height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh, 1px )}; background-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr, var(--_gray-200) )}; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-bd-cr )}; --_sf-hr-br-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-br-cr )}; --_sf-hr-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-cr )}; --_sf-hr-br-se: #{itemState(hr, br-se)}; --_sf-hr-br-wh: #{itemState(hr, br-wh)}; --_sf-hr-br-rs: #{itemState(hr, br-rs)}; --_sf-hr-pg: #{itemState(hr, pg)}; --_sf-hr-ft-fy: #{itemState(hr, ft-fy)}; --_sf-hr-ft-se: #{itemState(hr, ft-se)}; --_sf-hr-ft-wt: #{itemState(hr, ft-wt)}; --_sf-hr-ft-se-ic: #{itemState(hr, ft-se-ic)}; --_sf-hr-ue: #{itemState(hr, ue)}; --_sf-hr-tt-an: #{itemState(hr, tt-an)}; --_sf-hr-lr-sg: #{itemState(hr, lr-sg)}; --_sf-hr-le-ht: #{itemState(hr, le-ht)}; --_sf-hr-sw-ae: #{itemState(hr, sw-ae)}; --_sf-hr-sw-br: #{itemState(hr, sw-br)}; --_sf-hr-sw-sd: #{itemState(hr, sw-sd)}; --_sf-hr-sw-cr: #{itemState(hr, sw-cr)}; } &.selected, &[aria-selected="true"] { --_sf-hr-bd-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-bd-cr )}; --_sf-hr-br-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-br-cr )}; --_sf-hr-cr: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-cr )}; --_sf-hr-br-se: #{itemState(sd, br-se)}; --_sf-hr-br-wh: #{itemState(sd, br-wh)}; --_sf-hr-pg: #{itemState(sd, pg)}; --_sf-hr-ft-fy: #{itemState(sd, ft-fy)}; --_sf-hr-ft-se: #{itemState(sd, ft-se)}; --_sf-hr-ft-wt: #{itemState(sd, ft-wt)}; --_sf-hr-ft-se-ic: #{itemState(sd, ft-se-ic)}; --_sf-hr-ue: #{itemState(sd, ue)}; --_sf-hr-tt-an: #{itemState(sd, tt-an)}; --_sf-hr-lr-sg: #{itemState(sd, lr-sg)}; --_sf-hr-le-ht: #{itemState(sd, le-ht)}; --_sf-hr-sw-ae: #{itemState(sd, sw-ae)}; --_sf-hr-sw-br: #{itemState(sd, sw-br)}; --_sf-hr-sw-sd: #{itemState(sd, sw-sd)}; --_sf-hr-sw-cr: #{itemState(sd, sw-cr)}; } background-color: var(--_sf-hr-bd-cr, #{itemState(dt, bd-cr)}); color: var(--_sf-hr-cr, #{itemState(dt, cr)}); border-radius: var(--_sf-hr-br-rs, #{itemState(dt, br-rs)}); // Each item state carries its own showBorder toggle, so the border // is gated per state rather than once on the row. &[data-show-border="true"], &[data-hover-show-border="true"]:hover, &[data-selected-show-border="true"][aria-selected="true"] { border-color: var(--_sf-hr-br-cr, #{itemState(dt, br-cr)}); border-style: var(--_sf-hr-br-se, #{itemState(dt, br-se)}); border-width: var(--_sf-hr-br-wh, #{itemState(dt, br-wh)}); } padding: var(--_sf-hr-pg, #{itemState(dt, pg)}); font-family: var(--_sf-hr-ft-fy, #{itemState(dt, ft-fy)}); text-transform: var(--_sf-hr-tt-tm, #{itemState(dt, ft-fy)}); word-wrap: var(--_sf-hr-wd-wp, #{itemState(dt, ft-fy)}); word-break: var(--_sf-hr-wd-bk, #{itemState(dt, ft-fy)}); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, #{itemState(dt, ft-se)}); font-weight: var(--_sf-hr-ft-wt, #{itemState(dt, ft-wt)}); font-style: var(--_sf-hr-ft-se-ic, #{itemState(dt, ft-se-ic)}); text-decoration: var(--_sf-hr-ue, #{itemState(dt, ue)}); text-align: var(--_sf-hr-tt-an, #{itemState(dt, tt-an)}); letter-spacing: var(--_sf-hr-lr-sg, #{itemState(dt, lr-sg)}); line-height: var(--_sf-hr-le-ht, #{itemState(dt, le-ht)}); box-shadow: var(--_sf-hr-sw-ae, #{itemState(dt, sw-ae)}) var(--_sf-hr-sw-br, #{itemState(dt, sw-br)}) var(--_sf-hr-sw-sd, #{itemState(dt, sw-sd)}) var(--_sf-hr-sw-cr, #{itemState(dt, sw-cr)}); } // `.open` is set on .est__dropdown by CommonDropdown when isOpen. // This rule (0,3,0) outranks the closed default on `.list` below. &.open .list { display: flex; // Gap between the trigger box (Widget Style) and this panel, from // Widget Dropdown > Top Spacing. Falls back to the layout's // option/label spacing, which this rule borrowed before the // dedicated field existed, so saved configs keep their offset. margin-top: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-tp-sg ); // Panel's own padding, from "Widget Dropdown". padding: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-pg )}; // Panel gap prefers its own Widget Dropdown setting, falling back to // the layout-level item spacing this rule used before. gap: prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-im-gp ); background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr) ) ); } .list { // Closed by default; the `.open` rule above reveals it. This was // `display: flex !important`, which beat the open/closed rules // outright and left the panel permanently on screen. display: none; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg) ) ); // Border only when the Widget Dropdown showBorder toggle is on. // The colour previously read `var(--_gray-200, )`, which // is inverted: --_gray-200 is globally defined, so it always won and // the configured colour was unreachable. &[data-show-border="true"] { border-width: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-wh )}; border-style: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-se )}; border-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-cr )}; } border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs) ) ); box-shadow: var( --_show-shadow-dn-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr) ) ) ); position: absolute; top: 100%; left: 0; width: 100%; background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr) ) ); // `border-radius: 4px` used to sit here. It came after the // configured radius above and silently won, so the Widget Dropdown // radius setting could never take effect. z-index: var(--_higher-zIndex); max-height: 200px; overflow-y: auto; &.top { bottom: 100%; top: auto; } .list__option { padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg) ) ); cursor: pointer; &:hover { background-color: var(--_primary-25); color: var(--_primary-400); } &.disabled { cursor: not-allowed; opacity: 0.4; } } } } } // variant dropdown selection .var__drop__selection { display: flex; width: 100%; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) ); flex-direction: row; &[data-dropdown-style="Vertical List"] { flex-direction: column; // Vertical list: horizontal rule under each item. Uses the same in-flow // `::after` as the standard items — position: relative with a `top` // offset that centres it in the gap — so it lays out identically. .dropdown_wrapper[data-show-divider="true"]:not(:last-child)::after { position: relative; left: auto; right: auto; bottom: auto; top: calc( calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, 0px) ) ) + 10px ) / 2 ); width: 100%; height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh, 1px )}; } gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); } .dropdown_wrapper { position: relative; // Separator between variant option groups. Driven by the layout's // `dividerBetweenItems` toggle, NOT by showBorder — so it persists // when borders are turned off. Colour/width were hardcoded to a solid // black 1px; they now follow the widget style's border settings. // // The line has to run across the flow, so its geometry depends on the // list direction: a full-width horizontal rule under each item in a // vertical list, and a full-height vertical rule beside each item in a // horizontal one. Only the vertical case existed before, which is why // the divider appeared to work in one direction only. &[data-show-divider="true"] { &:not(:last-child)::after { content: ""; position: absolute; // Divider has its own controls (DividerStylesInstance: // dividerWeight / dividerColor, now on widgetDropdown). It used to // borrow the border colour+width, so it only appeared when a // border happened to be configured. Defaults keep it visible when // nothing is set. background-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr, var(--_gray-200) )}; // Horizontal list (the default): vertical rule centred in the gap. // This one has to be absolutely positioned — an in-flow ::after // sits *below* its own item, so it cannot draw a line *between* // items in a row. top/bottom rather than height:100% so it does // not depend on the wrapper stretching. top: 0; bottom: 0; width: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh, 1px )}; right: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, 0px) ) ) / -2 ); } } &[data-show-item-divider="true"] { .est__dropdown__main { .est__dropdown { .list { // NOTE: CommonDropdown (used by the variant picker) renders // option rows as `.option`, not `.list__option`, so this rule // does not apply there — the working divider lives on `.option` // above. Kept for the other dropdown components that do render // `.list__option`, with the hardcoded black 1px variablised. :not(:last-child).list__option { &::after { content: ""; position: relative; background-color: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-cr )}; height: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-wh )}; width: 100%; display: flex; top: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg) ) ) / 2 ); } } } } } } } & > div { width: 100%; } } // Quantity Fields .field__group { // display: flex; // flex-wrap: wrap; // gap: 8px; display: grid; grid-template-columns: repeat( auto-fit, minmax( var( --_ctm-mob-var-lt-mn-cn-wh, var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh)) ), var(--_ctm-mob-var-lt-mn-cn-wh) ) ); gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg) ) ); .field__group__item { font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; input[type="number"] { // width: 70px !important; width: 100%; border: 1px solid var(--_gray-300); padding-inline: 10px; border-radius: 4px; text-align: center; height: 40px; &:focus-within { border: 1px solid var(--_primary-200); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } &:disabled { cursor: not-allowed; opacity: 0.4; } } } } // Enter quantity styles .quantiy__details { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg) ) ); .title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 18px; & > button { border-bottom: 1px solid var(--_gray-400); color: var(--_gray-600); font-size: 14px; } } .fit__details { display: flex; flex-direction: column; gap: 12px; .fit__desc { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg) ) ); font-size: 16px; color: var(--_gray-900); .each__price { font-weight: 600; } } } } .grouped_items { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); .tab__accordion { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ); .tab__container { display: flex; flex-direction: column; .tab { &:first-child { margin-bottom: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg) ) ); } } .tab__content { display: flex; flex-direction: column; padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg) ) ); .field__group { gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg) ) ); .field__group__item { gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg) ) ); } } } } } &[data-show-divider="true"] { & > div { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) / 2 ); } } .tab__accordion { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) / 2 ); } } } } // tabs .tabs__container { display: flex; position: relative; .tab { flex: 1; padding-block: 20px; font-weight: 600; text-align: center; cursor: pointer; position: relative; &.tab__active { font-weight: bold; } } .tab__active-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background-color: #000; transition: left 0.3s ease, width 0.3s ease; } } // accordion tabs .tab__accordion_wrapper { .tab__accordion { display: flex; flex-direction: column; padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg) ) ); .tab__container { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg) ) ); .tab_acc_wrapper { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg) ) ); .tab { display: flex; padding-inline: 2px; position: relative; cursor: pointer; flex-direction: row; &[data-expand-icon="Left"] { flex-direction: row-reverse; justify-content: flex-end; } &[data-item-dividers="true"] { &::after { content: ""; position: absolute; bottom: 0; height: 2px; width: 100%; border-bottom: 1px solid var(--_gray-200); } } span { padding-block: 12px; display: inline-block; } .active { border-bottom: 2px solid var(--_primary-400); } &.inactive { height: 0px; } } .tab__content { &.d-none { display: none; } &.d-block { display: block; } } } } } &[data-show-dividers="true"] { .tab__accordion { .tab__container { .tab_acc_wrapper { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg) ) ) / 2 ); } } } } } &[data-icon-position="Left"] { .tab__accordion { .tab__container { .tab_acc_wrapper { .tab { flex-direction: row-reverse; align-self: flex-start; } } } } } } // table .table_container, .tab__content { .table__class { border: 1px solid var(--_gray-200); border-radius: 8px; .custom__table { border: 1px solid var(--_gray-200); width: 100%; table-layout: fixed; // height: 300px; border-collapse: collapse; &[data-header-divider="true"] { thead tr th { border-bottom: 1px solid var(--_gray-200); } } &[data-row-divider="true"] { tbody tr td { border-bottom: 1px solid var(--_gray-200); } } &[data-column-divider="true"] { tbody tr td, thead tr th { border-right: 1px solid var(--_gray-200); } tbody tr td:last-child, thead tr th:last-child { border-right: none; } } &[data-alternative-row-colors="true"] { tbody tr:nth-child(odd) { background-color: var(--_gray-300); width: 100%; } } thead { height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht) ) ); th { height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht) ) ); text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg) ) ); background-color: var(--_gray-50); font-weight: 600; color: var(--_gray-600); word-break: break-word; } } tbody { tr { border-bottom: 1px solid var(--_gray-200); height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht) ) ); td { text-align: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at) ) ); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg) ) ); .disocunted__price { color: var(--_gray-900); } .actual__price { color: var(--_gray-500); } .qty__input { border: 1px solid var(--_gray-200); padding-inline: 10px; text-align: center; border-radius: 6px; height: 40px; } input[type="number"] { &:focus-within { border: 1px solid var(--_primary-200); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } &:disabled { cursor: not-allowed; opacity: 0.4; } } } } } } } &[data-show-divider="true"] { & > div { &:not(:last-child)::after { content: ""; position: relative; background-color: #000; height: 1px; width: 100%; display: flex; top: calc( var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg) ) ) / 2 ); } } } } // horizontal tabs .tabs__main { &.tabs__vertical { .tabs { .tabs__container { flex-direction: column; min-width: 120px; } } } &.tabs__hr { .tabs { flex-direction: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg) ) ); .tabs__container { width: 100%; } } } .tabs { display: flex; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg) ) ); .tabs__container { display: flex; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg) ) ); .tab { display: flex; justify-content: var(--_tab-aliginment); padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg) ) ) var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg) ) ); background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr) ) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr) ) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se) ) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs) ) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs) ); &:hover { background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr) ) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr) ) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se) ) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs) ) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr) ) ); } &.active { background-color: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr) ) ); border-color: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr) ) ) ); border-style: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se) ) ) ); border-width: var( --_show-border-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh) ) ) ); border-radius: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs) ) ); box-shadow: var( --_show-shadow-im-se, var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd) ), var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr) ) ); } } } .tab__content { padding: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg) ) ); } } } // embla .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; // overflow: hidden; .embla__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; .embla__container { width: 100%; height: 100%; display: flex; grid-template-rows: 100%; // grid-template-columns: 100%; // grid-template-columns: repeat( // var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se), // calc(100% / var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se)) // ); // grid-auto-flow: column; gap: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg) ) ); &[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)) ) + 8px ) ); } &[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 { // width: 100%; height: 100%; } } } .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="Side"] { .left-button, .right-button { background-color: transparent; } } &[data-background-shape="Round"] { .left-button, .right-button { background-color: #f2f5f5; box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1); } } &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } .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; &: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; &: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-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-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } &[data-thumbnail-placement="right"] { flex-direction: row; .embla__thumbs { width: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); height: 100%; & .embla__thumbs__container { flex-direction: column; height: 100%; } } } &[data-control-type="Side"] { display: flex; align-self: center; flex-direction: row; .left-button:disabled, .right-button:disabled { display: none; } } .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-dn-pn-ds-or-dt-cr, var(--_tst-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-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se)); height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-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-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se)); height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-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-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr) ); } &[data-slider-control="Pagination Line"] { .embla__dot { width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)); height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht)); background-color: var( --_ctm-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-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)); height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht)); // background-color: #fff; background-color: var( --_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr) ); } } } .embla__thumbs { width: 100%; height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; // margin: 10px; padding: 10px; .embla__thumbs__viewport { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; overflow: hidden; } .embla__thumbs__container { display: flex; flex-direction: row; margin-left: calc(var(--thumbs-slide-spacing) * -1); gap: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-sg); width: 100%; // justify-content: center; // height: 200px; .embla__thumbs__slide { min-width: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); max-width: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); height: var( --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var( --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se) ) ); & img { width: 100%; height: 100%; } } } } } } } .bundle_detail_product_qty_select { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; flex-direction: var(--_sf-flex-direckdaka-mobile, row); row-gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-im-gp, 12px); & > span { font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-ll-le-ht); } .add_to_cart_qty_wrapper { display: flex; flex-direction: column; gap: 6px; .add_to_cart_qty { width: 205px; // border: 1px solid #d0d5dd !important; // border-radius: 2px !important; outline: none; // padding: 8px 12px !important; &:disabled { // background-color: #f9fafb; cursor: no-drop; } font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-se); font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-wd-bk); color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-te-cr); font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-te-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-lr-sg); text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-tt-an); line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-le-ht); padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-pg); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-cr); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-wh); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-se); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-br-rs); background: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-bd-cr); box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-ae) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-br) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-sd) prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-qy-qy-it-sw-cr); } small { color: red; } // .btn__with__text[data-btn-name="selectButton"] { // &[data-show-shadow="false"] { // --_show-shadow: none; // } // &[data-icon-position="left"] { // --_sf-fd-bn: row; // } // &[data-icon-position="right"] { // --_sf-fd-bn: row-reverse; // } // &[data-icon-position="center"] { // --_sf-fd-bn: row; // } // &:hover { // --_sf-hr-bd-cr: var( // --_ctm-mob-dn-rm-bn-hr-se-bd-cr, // var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr)) // ); // --_sf-hr-br-cr: var( // --_ctm-mob-dn-rm-bn-hr-se-br-cr, // var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr)) // ); // --_sf-hr-br-se: var( // --_ctm-mob-dn-rm-bn-hr-se-br-se, // var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se)) // ); // --_sf-hr-br-wh: var( // --_ctm-mob-dn-rm-bn-hr-se-br-wh, // var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh)) // ); // --_sf-hr-br-rs: var( // --_ctm-mob-dn-rm-bn-hr-se-br-rs, // var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs)) // ); // --_sf-hr-at: var( // --_ctm-mob-dn-rm-bn-hr-se-at, // var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at)) // ); // --_sf-hr-gp: var( // --_ctm-mob-dn-rm-bn-hr-se-gp, // var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp)) // ); // // for shadow // --_sf-hr-sw-ae: var( // --_ctm-mob-dn-rm-bn-hr-se-sw-ae, // var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae)) // ); // --_sf-hr-sw-br: var( // --_ctm-mob-dn-rm-bn-hr-se-sw-br, // var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br)) // ); // --_sf-hr-sw-hr: var( // --_ctm-mob-dn-rm-bn-hr-se-sw-hr, // var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr)) // ); // --_sf-hr-sw-cr: var( // --_ctm-mob-dn-rm-bn-hr-se-sw-cr, // var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr)) // ); // // for font // --_sf-hr-cr: var( // --_ctm-mob-dn-rm-bn-hr-se-cr, // var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr)) // ); // --_sf-hr-ft-fy: var( // --_ctm-mob-dn-rm-bn-hr-se-ft-fy, // var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy)) // ); // --_sf-hr-ft-se: var( // --_ctm-mob-dn-rm-bn-hr-se-ft-se, // var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se)) // ); // --_sf-hr-ft-wt: var( // --_ctm-mob-dn-rm-bn-hr-se-ft-wt, // var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt)) // ); // --_sf-hr-ft-se-ic: var( // --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic, // var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic)) // ); // --_sf-hr-tt-an: var( // --_ctm-mob-dn-rm-bn-hr-se-tt-an, // var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an)) // ); // --_sf-hr-lr-sg: var( // --_ctm-mob-dn-rm-bn-hr-se-lr-sg, // var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg)) // ); // --_sf-hr-le-ht: var( // --_ctm-mob-dn-rm-bn-hr-se-le-ht, // var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht)) // ); // --_sf-hr-in-se: var( // --_ctm-mob-dn-rm-bn-hr-se-in-se, // var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)) // ); // --_sf-hr-in-se: var( // --_ctm-mob-dn-rm-bn-hr-se-in-se, // var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)) // ); // --_sf-hr-in-c1: var( // --_ctm-mob-dn-rm-bn-hr-se-in-c1, // var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1)) // ); // --_sf-hr-ue: var( // --_ctm-mob-dn-rm-bn-hr-se-ue, // var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue)) // ); // // for pading and width // --_sf-hr-pg: var( // --_ctm-mob-dn-rm-bn-hr-pg, // var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg)) // ); // --_sf-hr-wh: var( // --_ctm-mob-dn-rm-bn-hr-wh, // var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh)) // ); // &[data-hover-show-shadow="false"] { // --_hover-show-shadow: none; // } // &[data-hover-show-icon="false"] { // --_hover-show-icon: none; // } // } // background-color: prepareMediaVariable( // --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr // ); // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg)); // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh)); // display: flex; // flex-direction: var(--_sf-fd-bn); // align-items: center; // justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at)); // gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp)); // border-radius: var( // --_sf-hr-br-rs, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs) // ); // box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae)) // var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br)) // var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd)) // var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr)); // &[data-show-border="true"] { // border-color: var( // prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr) // ); // border-style: var( // --_sf-hr-br-se, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se) // ); // border-width: var( // --_sf-hr-br-wh, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh) // ); // } // .txt { // display: flex; // color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr)); // font-family: var( // --_sf-hr-ft-fy, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy) // ); // font-size: var( // --_sf-hr-ft-se, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se) // ); // font-weight: var( // --_sf-hr-ft-wt, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt) // ); // font-style: var( // --_sf-hr-ft-se-ic, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic) // ); // text-align: var( // --_sf-hr-tt-an, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an) // ); // letter-spacing: var( // --_sf-hr-lr-sg, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg) // ); // line-height: var( // --_sf-hr-le-ht, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht) // ); // text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); // } // .icon { // display: var(--_hover-show-icon, var(--_show-icon, flex)); // svg { // width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se)); // height: var( // --_sf-hr-in-se, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se) // ); // path { // stroke: var( // --_sf-hr-in-c1, // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1) // ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-se-wh, 1.25); // } // } // } // [data-element-style="Text"] { // display: inline-block; // width: 100%; // } // .icon--hover { // // position: absolute; // // inset: 0; // // opacity: 0; // display: none; // transition: opacity 0.2s ease; // } // &:hover .icon--hover { // // opacity: 1; // display: flex; // } // &:hover .icon--default { // // opacity: 0; // display: none; // } // } } .btn__with__text[data-btn-name="selectButton"] { &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)}; --_sf-hr-sw-sd: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)}; --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable( --_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic )}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue)}; // for padding and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr) ); white-space: nowrap; padding: var( --_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-pg) ); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var( --_sf-hr-at, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-at) ); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-gp)); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae) ) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr)); &[data-show-border="true"] { border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh) ); } .txt { display: flex; color: var( --_sf-hr-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr) ); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-tm) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wd-wp) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht) ); text-decoration: var( --_sf-hr-ue, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue) ); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-se) ); height: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-se) ); path { stroke: var( --_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-c1) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable( --_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-se-wh, 1.25 ); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } // Selected state. Serves the same role as `[data-is-selected]` in // bundle.scss, but chains the two states inside a single var() rather than // going through an intermediate `--_sf-sd-*`: the selected-state responsive // chain falls through to the DEFAULT-state chain when that state is left // unconfigured. An intermediate variable cannot do this — prepareMediaVariable // tails with `inherit`, so the variable is always "set" and a var() fallback // on it is dead code, leaving padding/width/gap to collapse to 0/auto. &[data-is-selected="true"] { background-color: #{selectButtonSelectedOrDefault(bd-cr)}; padding: #{selectButtonSelectedOrDefault(pg)}; width: #{selectButtonSelectedOrDefault(wh)}; justify-content: #{selectButtonSelectedOrDefault(at)}; gap: #{selectButtonSelectedOrDefault(gp)}; border-radius: #{selectButtonSelectedOrDefault(br-rs)}; box-shadow: #{selectButtonSelectedOrDefault(sw-ae)} #{selectButtonSelectedOrDefault(sw-br)} #{selectButtonSelectedOrDefault(sw-sd)} #{selectButtonSelectedOrDefault(sw-cr)}; &[data-show-border="true"] { border-color: #{selectButtonSelectedOrDefault(br-cr)}; border-style: #{selectButtonSelectedOrDefault(br-se)}; border-width: #{selectButtonSelectedOrDefault(br-wh)}; } .txt { color: #{selectButtonSelectedOrDefault(cr)}; font-family: #{selectButtonSelectedOrDefault(ft-fy)}; font-size: #{selectButtonSelectedOrDefault(ft-se)}; font-weight: #{selectButtonSelectedOrDefault(ft-wt)}; font-style: #{selectButtonSelectedOrDefault(ft-se-ic)}; text-align: #{selectButtonSelectedOrDefault(tt-an)}; letter-spacing: #{selectButtonSelectedOrDefault(lr-sg)}; line-height: #{selectButtonSelectedOrDefault(le-ht)}; text-decoration: #{selectButtonSelectedOrDefault(ue)}; } .icon svg { width: #{selectButtonSelectedOrDefault(in-se)}; height: #{selectButtonSelectedOrDefault(in-se)}; path { stroke: #{selectButtonSelectedOrDefault(in-c1)}; } } } } // .select-button { // display: flex; // align-items: center; // padding: 10px 16px; // transition: all 0.3s ease; // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr); // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs); // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr); // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy); // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se); // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic); // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt); // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht); // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg); // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr); // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an); // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue); // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr); // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se); // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh); // &:hover { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr); // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs); // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr); // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy); // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se); // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic); // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt); // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht); // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg); // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr); // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an); // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue); // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr); // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se); // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh); // } // .icon { // margin-right: 8px; // color: #003366; // } // &.selected { // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr); // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr); // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs); // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se); // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh); // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr); // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy); // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se); // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic); // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt); // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht); // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg); // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd) // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr); // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an); // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue); // .icon { // color: white; // } // } // } } } } hr { &:last-child { display: none; } } } .popover-container { position: relative; display: inline-block; .popover-trigger { cursor: pointer; font-weight: 500; color: #2b6cb0; } .popover-box { // position: absolute; // top: calc(100% + 10px); // right: 0; // background: white; // padding: 12px 16px; // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); // border-radius: 8px; // min-width: 150px; // z-index: 10; position: absolute; // border: 1px solid #ccc; min-width: 150px; max-width: 300px; z-index: 1000; left: 30px; top: 0; padding: 8px; border-radius: 4px; max-height: 150px; overflow-y: auto; } .popover-box { display: flex; flex-direction: column; // width: 100%; gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp); background-color: var( --_ctm-mob-dn-pr-se-bd-cr, var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)) ); border-color: var( --_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)) ); border-style: var( --_ctm-mob-dn-pr-se-br-se, var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)) ); border-width: var( --_ctm-mob-dn-pr-se-br-wh, var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-pr-se-br-rs, var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-pr-se-sw-ae, var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae)) ) var( --_ctm-mob-dn-pr-se-sw-br, var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br)) ) var( --_ctm-mob-dn-pr-se-sw-sd, var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd)) ) var( --_ctm-mob-dn-pr-se-sw-cr, var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr)) ) ); padding: var( --_ctm-mob-dn-pr-se-pg, var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)) ); } .popover-box strong { display: block; margin-bottom: 6px; font-weight: bold; } .popover-arrow { position: absolute; top: 8px; left: -5px; width: 12px; height: 12px; // background-color: var( // --_ctm-mob-dn-pr-se-bd-cr, // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)) // ); transform: rotate(-45deg); box-shadow: -1px -1px 0px var( --_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)) ); } .popover_item { // padding-inline: var(--_sf-cd-gp); color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))); font-family: var( --_ctm-mob-dn-pr-se-ft-fy, var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pr-se-tt-tm, var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pr-se-wd-wp, var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-pr-se-wd-bk, var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)) ); font-size: var( --_ctm-mob-dn-pr-se-ft-se, var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)) ); font-weight: var( --_ctm-mob-dn-pr-se-ft-wt, var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)) ); font-style: var( --_ctm-mob-dn-pr-se-ft-se-ic, var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pr-se-tt-an, var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pr-se-lr-sg, var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-pr-se-le-ht, var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)) ); text-decoration: var( --_ctm-mob-dn-pr-se-ue, var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)) ); // margin-left: 10px; } } .error__message__wraper { background-color: var( --_ctm-mob-dn-er-me-bd-cr, var(--_ctm-tab-dn-er-me-bd-cr, var(--_ctm-dn-er-me-bd-cr)) ); border-color: var( --_ctm-mob-dn-er-me-br-cr, var(--_ctm-tab-dn-er-me-br-cr, var(--_ctm-dn-er-me-br-cr)) ); border-style: var( --_ctm-mob-dn-er-me-br-se, var(--_ctm-tab-dn-er-me-br-se, var(--_ctm-dn-er-me-br-se)) ); border-width: var( --_ctm-mob-dn-er-me-br-wh, var(--_ctm-tab-dn-er-me-br-wh, var(--_ctm-dn-er-me-br-wh)) ); border-radius: var( --_ctm-mob-dn-er-me-br-rs, var(--_ctm-tab-dn-er-me-br-rs, var(--_ctm-dn-er-me-br-rs)) ); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-er-me-sw-ae, var(--_ctm-tab-dn-er-me-sw-ae, var(--_ctm-dn-er-me-sw-ae))) var( --_ctm-mob-dn-er-me-sw-br, var(--_ctm-tab-dn-er-me-sw-br, var(--_ctm-dn-er-me-sw-br)) ) var( --_ctm-mob-dn-er-me-sw-sd, var(--_ctm-tab-dn-er-me-sw-sd, var(--_ctm-dn-er-me-sw-sd)) ) var( --_ctm-mob-dn-er-me-sw-cr, var(--_ctm-tab-dn-er-me-sw-cr, var(--_ctm-dn-er-me-sw-cr)) ) ); white-space: nowrap; .error__message { color: var(--_ctm-mob-dn-er-me-cr, var(--_ctm-tab-dn-er-me-cr, var(--_ctm-dn-er-me-cr))); font-family: var( --_ctm-mob-dn-er-me-ft-fy, var(--_ctm-tab-dn-er-me-ft-fy, var(--_ctm-dn-er-me-ft-fy)) ); text-transform: var( --_ctm-mob-dn-er-me-tt-tm, var(--_ctm-tab-dn-er-me-tt-tm, var(--_ctm-dn-er-me-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-er-me-wd-wp, var(--_ctm-tab-dn-er-me-wd-wp, var(--_ctm-dn-er-me-wd-wp)) ); word-break: var( --_ctm-mob-dn-er-me-wd-bk, var(--_ctm-tab-dn-er-me-wd-bk, var(--_ctm-dn-er-me-wd-bk)) ); font-size: var( --_ctm-mob-dn-er-me-ft-se, var(--_ctm-tab-dn-er-me-ft-se, var(--_ctm-dn-er-me-ft-se)) ); font-weight: var( --_ctm-mob-dn-er-me-ft-wt, var(--_ctm-tab-dn-er-me-ft-wt, var(--_ctm-dn-er-me-ft-wt)) ); font-style: var( --_ctm-mob-dn-er-me-ft-se-ic, var(--_ctm-tab-dn-er-me-ft-se-ic, var(--_ctm-dn-er-me-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-er-me-tt-an, var(--_ctm-tab-dn-er-me-tt-an, var(--_ctm-dn-er-me-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-er-me-lr-sg, var(--_ctm-tab-dn-er-me-lr-sg, var(--_ctm-dn-er-me-lr-sg)) ); line-height: var( --_ctm-mob-dn-er-me-le-ht, var(--_ctm-tab-dn-er-me-le-ht, var(--_ctm-dn-er-me-le-ht)) ); text-decoration: var( --_ctm-mob-dn-er-me-ue, var(--_ctm-tab-dn-er-me-ue, var(--_ctm-dn-er-me-ue)) ); padding: prepareMediaVariable(--_ctm-dn-er-me-pg); } } .icon { cursor: pointer; svg { width: prepareMediaVariable(--_ctm-dn-er-me-in-se); height: prepareMediaVariable(--_ctm-dn-er-me-in-se); path { stroke: prepareMediaVariable(--_ctm-dn-er-me-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-er-me-se-wh, 1.25); } } } .add_to_cart_wrapper { .error__message { text-align: center; } } } } }