@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; // $defaultValues: ( // --_dm-flt: getListOfResponsive(flex-end, flex-start), // ); div[data-div-type="cms-buy-for-tabs-container-wrapper"] { display: flow-root !important; } [data-div-type="element"] { &[data-element-type="addProductsTab"] { // Import additional styles from partial file @import "./add-products-tab-details"; @import "./add-products-tab-uom-details"; @import "./product-image-bundles.scss"; // width: var( // --_sf-el-wh-st-mx, // calc( // 1% * // var( // --_mob-ctm-ele-nw-wh-vl, // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))) // ) // ) // ); // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); & > div { &.wrapper { width: 100%; // &:has(.buyfor_content_loader) { // display: flex; // justify-content: center; // align-items: center; // width: 100%; // height: 100%; // } } } .buyfor_content_loader { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px; .spinner_sm { border: 4px solid var(--_gray-200); border-top: 4px solid var(--_thm-cs-at-py); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { font-size: 1.2rem; letter-spacing: 2px; animation: fade 1.5s infinite; } @keyframes fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } } .product-section { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--_thm-cs-be-se-3); padding-bottom: 24px; .section-title { font-size: var( --_ctm-mob-dn-hr-te-ft-se, var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se)) ); font-family: var( --_ctm-mob-dn-hr-te-ft-fy, var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-hr-te-tt-tm, var(--_ctm-tab-dn-hr-te-tt-tm, var(--_ctm-dn-hr-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-hr-te-wd-wp, var(--_ctm-tab-dn-hr-te-wd-wp, var(--_ctm-dn-hr-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-hr-te-wd-bk, var(--_ctm-tab-dn-hr-te-wd-bk, var(--_ctm-dn-hr-te-wd-bk)) ); font-weight: var( --_ctm-mob-dn-hr-te-ft-wt, var(--_ctm-tab-dn-hr-te-ft-wt, var(--_ctm-dn-hr-te-ft-wt)) ); line-height: var( --_ctm-mob-dn-hr-te-le-ht, var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-hr-te-lr-sg, var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg)) ); color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr))); } .search-bar { display: flex; align-items: center; gap: 0.5rem; .search-input { display: flex; align-items: center; border: 1px solid var(--_gray-300); border-radius: 4px; padding: 12px; background: transparent; // height: 40px; transition: outline border 0.2s ease, border 0.2s ease; &:focus-within { // border: 1px solid var(--_thm-cs-tt-by-tt); border: 1px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 40%, transparent); outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent); } .icon { margin-right: 8px; color: var(--_thm-cs-be-se-3); } .close-icon { svg { height: 12px; } } input { border: none; outline: none; font-size: 14px; width: 160px; } } .filter-btn { border: 1px solid #d1d5db; background: white; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 18px; cursor: pointer; } } } .buyforcart_empty_wrp { height: 300px; } .add-product-wrapper { display: grid; grid-template-columns: 1fr 1fr; // gap: 48px; &:has(.empty_template) { display: flex; padding: 48px; } .product-list { display: flex; flex-direction: column; gap: 48px; .product-category { display: flex; flex-direction: column; gap: 16px; .product-header { display: flex; gap: 6px; border-bottom: 0.5px solid #d0d5dd; padding-bottom: 16px; flex-direction: column; h2 { font-size: 20px; color: var(--_gray-900); font-weight: 700; line-height: 30px; } .product-subheader { display: flex; flex-direction: row; gap: 12px; word-break: keep-all; align-items: center; @media (max-width: 500px) { flex-direction: column; white-space: nowrap; align-items: flex-start; } .product-quota { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0%; color: var(--_gray-500); padding-right: 12px; border-right: 1px solid var(--_border-light-color); gap: 6px; display: flex; span { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--_gray-900); } } .product-payment-methods { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0%; color: var(--_gray-500); gap: 6px; display: flex; span { font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0%; color: var(--_gray-900); } } } } .product-grid { display: grid; // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-template-columns: 1fr 1fr; gap: 16px; max-height: 900px; overflow-y: auto; overflow-x: hidden; padding: 24px 24px 24px 0; background-color: var(--_base-white); @media (max-width: 500px) { grid-template-columns: 1fr; } .product-card { display: flex; flex-direction: column; } .product-card, .tile { gap: 24px; transition: background border 400ms ease-in-out; // padding: 16px; // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr); @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%); padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-pg); border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-wh); border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-cr); border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-se); border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-cr); // border: 0.5px solid transparent; &:hover { // background-color: var(--_gray-100); // border: 0.5px solid #243dc6; cursor: pointer; // border-radius: 4px; // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr); @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr), 5%); padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-pg); border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-wh); border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-cr); border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-se); border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-cr); } &.active { // border: 0.5px solid #243dc6; // border-radius: 4px; // border-width: 0.5px; padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-pg)); // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr); @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr), 5%); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-wh) ); border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-se) ); border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-cr); } .product-image { width: 268px; height: 240px; display: flex; align-items: center; justify-content: center; align-self: center; } .product-info { gap: 4px; display: flex; flex-direction: column; .product-title { font-family: var( --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-cd-pt-cd-te-tt-tm, var(--_ctm-tab-dn-pt-cd-pt-cd-te-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-cd-pt-cd-te-wd-wp, var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-cd-pt-cd-te-wd-bk, var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-te-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt)) ); color: var( --_ctm-mob-dn-pt-cd-pt-cd-te-cr, var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr)) ); line-height: var( --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg)) ); text-decoration: var( --_ctm-mob-dn-pt-cd-pt-cd-te-ue, var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue)) ); font-style: var( --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic, var( --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic) ) ); padding: var( --_ctm-mob-dn-pt-cd-pt-cd-te-pg, var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg)) ); } .product-code { font-family: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-tt-tm, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-dn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-wp, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-bk, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt)) ); color: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr)) ); line-height: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg)) ); text-decoration: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue)) ); font-style: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic, var( --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic) ) ); padding: var( --_ctm-mob-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg)) ); } .product-price { font-family: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-tt-tm, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-pe-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-wp, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-bk, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt)) ); color: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr)) ); line-height: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg)) ); text-decoration: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue)) ); font-style: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic, var( --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic) ) ); padding: var( --_ctm-mob-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg)) ); } .product-meta { font-size: 0.75rem; display: flex; gap: 0.5rem; margin-top: 0.5rem; justify-content: space-between; align-items: center; .product-views { gap: 6px; display: flex; flex-direction: row; align-items: center; .svg_icon { svg { path { stroke: var(--_thm-cs-tt-ss); } } } .product_info { gap: 6px; display: flex; flex-direction: row; align-items: center; .icon { display: flex; svg { width: 20px; height: 20px; path { stroke: var(--_thm-cs-be-se-3); } } } // // font-weight: 700; // font-size: 16px; // line-height: 150%; // color: var(--_gray-600); font-family: var( --_ctm-mob-dn-pt-cd-pt-cd-io-ft-fy, var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-io-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-cd-pt-cd-io-tt-tm, var(--_ctm-tab-dn-pt-cd-pt-cd-io-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-io-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-cd-pt-cd-io-wd-wp, var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-io-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-cd-pt-cd-io-wd-bk, var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-io-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se, var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-se, var(--_ctm-dn-pt-cd-pt-cd-io-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-cd-pt-cd-io-ft-wt, var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-io-ft-wt)) ); color: var( --_ctm-mob-dn-pt-cd-pt-cd-io-cr, var(--_ctm-tab-dn-pt-cd-pt-cd-io-cr, var(--_ctm-dn-pt-cd-pt-cd-io-cr)) ); line-height: var( --_ctm-mob-dn-pt-cd-pt-cd-io-le-ht, var(--_ctm-tab-dn-pt-cd-pt-cd-io-le-ht, var(--_ctm-dn-pt-cd-pt-cd-io-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-cd-pt-cd-io-lr-sg, var(--_ctm-tab-dn-pt-cd-pt-cd-io-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-io-lr-sg)) ); text-decoration: var( --_ctm-mob-dn-pt-cd-pt-cd-io-ue, var(--_ctm-tab-dn-pt-cd-pt-cd-io-ue, var(--_ctm-dn-pt-cd-pt-cd-io-ue)) ); font-style: var( --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se-ic, var( --_ctm-tab-dn-pt-cd-pt-cd-io-ft-se-ic, var(--_ctm-dn-pt-cd-pt-cd-io-ft-se-ic) ) ); padding: var( --_ctm-mob-dn-pt-cd-pt-cd-io-pg, var(--_ctm-tab-dn-pt-cd-pt-cd-io-pg, var(--_ctm-dn-pt-cd-pt-cd-io-pg)) ); } } .product-cart { position: relative; // width: 50px; // height: 50px; .icon { display: flex; svg { width: 32px; height: 32px; path { stroke: var(--_gray-400); } } } .cart-badge { background-color: var(--_thm-cs-at-py); color: #ffffff; border-radius: 4px; font-size: 12px; font-weight: 400; height: 20px; width: 20px; position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; } } } } } } } } .add-product-list-details { // border-left: 1px solid var(--_thm-cs-be-se-3); border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr); border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh); border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se); } .customizer-panel { display: flex; flex-direction: column; // gap: 12px; // border-left: 0.5px solid #d0d5dd; // padding-left: 48px; padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg); gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp); border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs); background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr); // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr); // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh); // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se); .product-header { display: flex; flex-direction: column; gap: 12px; h2 { font-family: var( --_ctm-mob-dn-pt-ds-pt-te-ft-fy, var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-pt-te-tt-tm, var(--_ctm-tab-dn-pt-ds-pt-te-tt-tm, var(--_ctm-dn-pt-ds-pt-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-pt-te-wd-wp, var(--_ctm-tab-dn-pt-ds-pt-te-wd-wp, var(--_ctm-dn-pt-ds-pt-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-pt-te-wd-bk, var(--_ctm-tab-dn-pt-ds-pt-te-wd-bk, var(--_ctm-dn-pt-ds-pt-te-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-ds-pt-te-ft-se, var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-ds-pt-te-ft-wt, var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt)) ); color: var( --_ctm-mob-dn-pt-ds-pt-te-cr, var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr)) ); line-height: var( --_ctm-mob-dn-pt-ds-pt-te-le-ht, var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-pt-te-lr-sg, var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg)) ); // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue); // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic); padding: var( --_ctm-dn-mob-pt-ds-pt-te-pg, var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg)) ); } p { font-family: var( --_ctm-mob-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-pt-dn-tt-tm, var(--_ctm-tab-dn-pt-ds-pt-dn-tt-tm, var(--_ctm-dn-pt-ds-pt-dn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-pt-dn-wd-wp, var(--_ctm-tab-dn-pt-ds-pt-dn-wd-wp, var(--_ctm-dn-pt-ds-pt-dn-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-pt-dn-wd-bk, var(--_ctm-tab-dn-pt-ds-pt-dn-wd-bk, var(--_ctm-dn-pt-ds-pt-dn-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-ds-pt-dn-ft-se, var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt)) ); color: var( --_ctm-mob-dn-pt-ds-pt-dn-cr, var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr)) ); line-height: var( --_ctm-mob-dn-pt-ds-pt-dn-le-ht, var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg)) ); // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue); // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic); padding: var( --_ctm-dn-mob-pt-ds-pt-dn-pg, var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg)) ); } } // .product_qty_wrapper { // display: flex; // // width: 124px; // flex-direction: column; // align-items: flex-start; // gap: 6px; // width: 120px; // .product_qty_container { // display: flex; // align-items: flex-start; // align-self: stretch; // border-radius: 4px; // border: 0.5px solid #d0d5dd; // background: #fff; // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); // .product_qty_label { // display: flex; // padding: 8px 12px; // align-items: center; // border-radius: 8px 0px 0px 8px; // p { // color: #475467; // font-size: 16px; // font-weight: 400; // line-height: 24px; // } // } // .product_qty_number { // display: flex; // padding: 8px 12px; // align-items: center; // gap: 8px; // flex: 1 0 0; // align-self: stretch; // border-radius: 0px 4px 4px 0px; // background: #fff; // border-left: 1px solid #d0d5dd; // max-width: 80px; // text-align: center; // &::-webkit-outer-spin-button, // &::-webkit-inner-spin-button { // -webkit-appearance: none; // margin: 0; // } // } // } // } .denominations_container { // font-size: 16px; display: flex; flex-direction: column; // gap: 6px; // padding-bottom: 14px; background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-bd-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-bd-cr)) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-cr)) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-rs, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-rs)) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-se, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-se)) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-wh, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-wh)) ); box-shadow: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-ae, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-ae)) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-br, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-br)) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-sd, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-sd)) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-cr)) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-pg)) ); gap: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp)) ); .denominations_title { // margin-bottom: 4px; // font-size: 16px; // color: #000000; // font-weight: 500; // line-height: 150%; font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk)) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an)) ); } .denominations_grid { display: flex; // gap: 8px; flex-wrap: wrap; margin-top: 12px; flex-direction: row; gap: 12px; // gap: var( // --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-im-gp, // var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-im-gp)) // ); .amount_btn { transition: color 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; // padding: 4px; min-width: 20px; min-height: 20px; box-sizing: content-box; // font-size: 16px; // font-weight: 600; // line-height: 150%; // background-color: #ffffff; // border: 1px solid #d6d6d6; background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-bd-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-bd-cr) ) ); font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-fy, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-tm, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-wp, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-bk, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-wt, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-wt) ) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se) ) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-lr-sg, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-le-ht, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-le-ht, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-le-ht) ) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-an, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-an, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-an) ) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-cr) ) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-rs, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-rs) ) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-se, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-se) ) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-wh, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-wh) ) ); box-shadow: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-ae, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-ae) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-br, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-br) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-sd, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-sd) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-cr) ) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-pg)) ); &.active { background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-bd-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-bd-cr) ) ); font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-fy, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-tm, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-wp, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-bk, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-bk) ) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-wt, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-wt) ) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se) ) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-lr-sg, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-le-ht, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-le-ht, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-le-ht) ) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-an, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-an, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-an) ) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-cr) ) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-rs, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-rs) ) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-se, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-se) ) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-wh, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-wh) ) ); box-shadow: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-ae, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-ae) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-br, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-br) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-sd, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-sd) ) ) var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-cr, var( --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-cr) ) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-pg)) ); // background-color: #f5f5f5; // border: 1px solid #3e4784; // color: #000080; } } } .custom_amount_container { display: flex; flex-direction: column; gap: 8px; .error_text { font-size: 12px; color: var(--_error-500); } .custom_amount_label { font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk)) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an)) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg)) ); } .custom_amount_input { height: 40px; display: flex; position: relative; // gap: 6px; align-items: center; // border-radius: 4px; // background: #fff; // border: 1px solid #d0d5dd; // padding: 8px 12px; background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr)) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr)) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs)) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se)) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh)) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-is-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg)) ); // width: 220px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; .svg_icon { color: var(--_gray-700); font-weight: 500; font-size: 14px; line-height: 24px; white-space: nowrap; position: absolute; top: 7px; } input { color: var(--_gray-700); margin-top: 2px; &::placeholder { font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk)) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic, var( --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an)) ); // color: var(--_gray-500); // font-weight: 500; // font-size: 14px; // line-height: 24px; } padding-left: 24px; } &:focus-within { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--_primary-100); border: 1px solid var(--_primary-300); } } } .delivery_details_container { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp)) ); .delivery_details_title { display: inline-block; // margin-top: 8px; // margin-bottom: 4px; // font-size: 16px; // color: #000000; // font-weight: 500; // line-height: 150%; font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an)) ); } .horizontal_line { // border: 1px solid #d0d5dd; // display: block; // width: 100%; // border-style: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se); // border-color: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr); // border-width: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh); border-top: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh) var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se) var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr); } .input_container { display: flex; flex-direction: column; gap: 4px; // margin-bottom: 12px; &:last-child { margin-bottom: 0; } label { display: block; font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an)) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg)) ); // color: var(--_gray-700); // font-weight: 400; // font-size: 14px; // line-height: 20px; } .message_text { resize: none; // background-color: var(--_base-white); // padding: 5px 12px; // border: 1px solid var(--_gray-300); // border-radius: 4px; background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr)) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr)) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs)) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se)) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh)) ); padding: var( --_ctm-mob-dn-pt-ds-gt-cd-is-pg, var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg)) ); // margin-bottom: 8px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; height: 90px; &::placeholder { // color: var(--_gray-500); // font-weight: 500; // font-size: 14px; // line-height: 24px; font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk)) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic, var( --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an)) ); } &:focus { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--_primary-100); border: 1px solid var(--_primary-300); } } input { // background-color: var(--_base-white); // padding: 8px 12px; // border: 1px solid var(--_gray-300); // border-radius: 4px; background-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr)) ); border-color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr)) ); border-radius: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs)) ); border-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se)) ); border-width: var( --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh)) ); // padding: var( // --_ctm-mob-dn-pt-ds-gt-cd-is-pg, // var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg)) // ); padding: 10px 12px 12px 12px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &::placeholder { // color: var(--_gray-500); // font-weight: 500; // font-size: 14px; // line-height: 24px; font-family: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk)) ); color: var( --_ctm-mob-dn-pt-ds-gt-cd-is-cr, var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr)) ); font-weight: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt)) ); font-size: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se)) ); text-decoration: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ue, var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic, var( --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an)) ); } &:focus { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--_primary-100); border: 1px solid var(--_primary-300); } } .error_text { font-size: 12px; color: var(--_error-500); } } } } .product_qty_wrapper { display: flex; // width: 124px; flex-direction: column; align-items: flex-start; gap: 6px; width: 113px; margin-block: 12px; .product_qty_container { display: flex; align-items: flex-start; align-self: stretch; border-radius: 4px; border: 0.5px solid var(--_thm-cs-be-se-3); background: #fff; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); &:focus-within { outline: 2px solid var(--_gray-200); } .product_qty_label { display: flex; padding: 8px 12px; align-items: center; border-radius: 8px 0px 0px 8px; p { color: var(--_thm-ty-p1-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); // line-height: 24px; line-height: var(--_thm-ty-p1-le-ht); } } .product_qty_input_container { height: 40px; display: flex; // position: relative; width: 55px; border-radius: 0px 4px 4px 0px; background: transparent; border-left: 1px solid var(--_thm-cs-be-se-3); padding: 8px 12px; } .product_qty_number { // display: flex; // padding: 8px 12px; align-items: center; color: var(--_thm-ty-p2-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); line-height: var(--_thm-ty-p1-le-ht); // gap: 8px; // flex: 1 0 0; // align-self: stretch; // border-radius: 0px 4px 4px 0px; // background: #fff; // border-left: 1px solid #d0d5dd; // max-width: 80px; text-align: center; width: 75%; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } } } .add-to-cart { padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 24px; transition: background 200ms ease-in-out; span { display: flex; svg path { stroke: var(--_base-white); } } // padding: var( // --_ctm-mob-dn-pt-ds-at-pg, // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg)) // ); // border-style: var( // --_ctm-mob-dn-pt-ds-at-br-se, // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se)) // ); // border-width: var( // --_ctm-mob-dn-pt-ds-at-br-wh, // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh)) // ); // border-radius: var( // --_ctm-mob-dn-pt-ds-at-br-rs, // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs)) // ); // border-color: var( // --_ctm-mob-dn-pt-ds-at-br-cr, // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr)) // ); // background: var( // --_ctm-mob-dn-pt-ds-at-bd-cr, // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr)) // ); // box-shadow: 0px 1px 2px 0px #1018280d; // text-align: center; // font-family: var( // --_ctm-mob-dn-pt-ds-at-ft-fy, // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy)) // ); // font-weight: var( // --_ctm-mob-dn-pt-ds-at-ft-wt, // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt)) // ); // font-size: var( // --_ctm-mob-dn-pt-ds-at-ft-se, // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se)) // ); // line-height: var( // --_ctm-mob-dn-pt-ds-at-le-ht, // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-ds-at-lr-sg, // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg)) // ); // color: var( // --_ctm-mob-dn-pt-ds-at-cr, // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr)) // ); // span { // vertical-align: middle; // } // button { // font-family: var( // --_ctm-mob-dn-pt-ds-at-ft-fy, // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy)) // ); // font-weight: var( // --_ctm-mob-dn-pt-ds-at-ft-wt, // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt)) // ); // font-size: var( // --_ctm-mob-dn-pt-ds-at-ft-se, // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se)) // ); // line-height: var( // --_ctm-mob-dn-pt-ds-at-le-ht, // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-ds-at-lr-sg, // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg)) // ); // color: var( // --_ctm-mob-dn-pt-ds-at-cr, // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr)) // ); // } } } @media (max-width: 768px) { grid-template-columns: 1fr; .customizer-panel { border-left: none; padding-left: 0; margin-top: 2rem; } } } .embla { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; // padding: 20px; // 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(50px + 10px)); } &[data-control-type="Bottom"][data-slider-control="Pagination Line"] { height: calc(100% - calc(50px + 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%; & > img { width: 100%; height: 100%; object-fit: contain; } } } } &: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))) ); } } .arrow-navigation { display: flex; position: absolute; top: 50%; left: 50%; width: 100%; justify-content: space-between; transform: translate(-50%, -50%); // padding-left: 20px; &[data-control-type="Bottom-Overflow"] { transform: translateX(-50%); width: 100%; justify-content: center; gap: 12px; top: unset; bottom: 6px; } &[data-control-type="Bottom"] { transform: unset; position: static; width: 100%; justify-content: center; gap: 12px; margin-top: 10px; } } &[data-control-type="Side"] { .left-button, .right-button { background-color: transparent; } } &[data-background-shape="Round"] { .left-button, .right-button { background-color: #f2f5f5; box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1); } } .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: #c3b7b7; } } } } .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: #c3b7b7; } } } } .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: #514949; } } } &[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; &[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%; } } } } } // for bundle details } } .text_ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; white-space: normal; overflow: hidden; }