@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; [data-div-type="element"] { &[data-element-type="buyForWithTabs"] { // 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%; .buy-for-container { // padding: 1rem; display: flex; flex-direction: column; border-color: var( --_ctm-mob-buy-dn-by-fr-wr-br-cr, var(--_ctm-tab-buy-dn-by-fr-wr-br-cr, var(--_ctm-buy-dn-by-fr-wr-br-cr)) ); border-style: var( --_ctm-mob-buy-dn-by-fr-wr-br-se, var(--_ctm-tab-buy-dn-by-fr-wr-br-se, var(--_ctm-buy-dn-by-fr-wr-br-se)) ); border-width: var( --_ctm-mob-buy-dn-by-fr-wr-br-wh, var(--_ctm-tab-buy-dn-by-fr-wr-br-wh, var(--_ctm-buy-dn-by-fr-wr-br-wh)) ); border-radius: var( --_ctm-mob-buy-dn-by-fr-wr-br-rs, var(--_ctm-tab-buy-dn-by-fr-wr-br-rs, var(--_ctm-buy-dn-by-fr-wr-br-rs)) ); gap: var( --_ctm-mob-buy-dn-by-fr-wr-im-gp, var(--_ctm-tab-buy-dn-by-fr-wr-im-gp, var(--_ctm-buy-dn-by-fr-wr-im-gp)) ); padding: var( --_ctm-mob-buy-dn-by-fr-wr-pg, var(--_ctm-tab-buy-dn-by-fr-wr-pg, var(--_ctm-buy-dn-by-fr-wr-pg)) ); background-color: var( --_ctm-mob-buy-dn-by-fr-wr-bd-cr, var(--_ctm-tab-buy-dn-by-fr-wr-bd-cr, var(--_ctm-buy-dn-by-fr-wr-bd-cr)) ); .buy-for-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; // margin-bottom: 1rem; border-color: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-br-cr, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-br-cr, var(--_ctm-buy-dn-by-fr-hr-hr-cr-br-cr)) ); border-style: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-br-se, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-br-se, var(--_ctm-buy-dn-by-fr-hr-hr-cr-br-se)) ); border-width: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-br-wh, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-br-wh, var(--_ctm-buy-dn-by-fr-hr-hr-cr-br-wh)) ); border-radius: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-br-rs, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-br-rs, var(--_ctm-buy-dn-by-fr-hr-hr-cr-br-rs)) ); gap: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-im-gp, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-im-gp, var(--_ctm-buy-dn-by-fr-hr-hr-cr-im-gp)) ); padding: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-pg, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-pg, var(--_ctm-buy-dn-by-fr-hr-hr-cr-pg)) ); background-color: var( --_ctm-mob-buy-dn-by-fr-hr-hr-cr-bd-cr, var(--_ctm-tab-buy-dn-by-fr-hr-hr-cr-bd-cr, var(--_ctm-buy-dn-by-fr-hr-hr-cr-bd-cr)) ); .buy-for-header-subtitle { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: normal; color: var(--_gray-600); .svg_icon { display: flex; justify-content: center; align-items: center; } .subtitle_container { // color: var(--_gray-500); // font-weight: 700; // font-size: 16px; // line-height: 24px; font-family: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-ft-fy, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-ft-fy, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-tt-tm, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-tt-tm, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-wd-wp, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-wd-wp, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-wd-bk, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-wd-bk, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-wd-bk) ) ); font-size: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-ft-se, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-ft-se, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-ft-se) ) ); color: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-cr, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-cr, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-cr) ) ); font-weight: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-ft-wt, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-ft-wt, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-ft-wt) ) ); text-decoration: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-ue, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-ue, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-ue) ) ); letter-spacing: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-lr-sg, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-lr-sg, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-le-ht, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-le-ht, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-le-ht) ) ); font-style: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-ft-se-ic, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-ft-se-ic, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-by-fr-hr-ae-tb-te-tt-an, var( --_ctm-tab-buy-dn-by-fr-hr-ae-tb-te-tt-an, var(--_ctm-buy-dn-by-fr-hr-ae-tb-te-tt-an) ) ); } svg path { stroke: #98a2b3; } } h1 { font-family: var( --_ctm-mob-buy-dn-by-fr-hr-te-ft-fy, var(--_ctm-tab-buy-dn-by-fr-hr-te-ft-fy, var(--_ctm-buy-dn-by-fr-hr-te-ft-fy)) ); text-transform: var( --_ctm-mob-buy-dn-by-fr-hr-te-tt-tm, var(--_ctm-tab-buy-dn-by-fr-hr-te-tt-tm, var(--_ctm-buy-dn-by-fr-hr-te-tt-tm)) ); word-wrap: var( --_ctm-mob-buy-dn-by-fr-hr-te-wd-wp, var(--_ctm-tab-buy-dn-by-fr-hr-te-wd-wp, var(--_ctm-buy-dn-by-fr-hr-te-wd-wp)) ); word-break: var( --_ctm-mob-buy-dn-by-fr-hr-te-wd-bk, var(--_ctm-tab-buy-dn-by-fr-hr-te-wd-bk, var(--_ctm-buy-dn-by-fr-hr-te-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-by-fr-hr-te-ft-se, var(--_ctm-tab-buy-dn-by-fr-hr-te-ft-se, var(--_ctm-buy-dn-by-fr-hr-te-ft-se)) ); color: var( --_ctm-mob-buy-dn-by-fr-hr-te-cr, var(--_ctm-tab-buy-dn-by-fr-hr-te-cr, var(--_ctm-buy-dn-by-fr-hr-te-cr)) ); font-weight: var( --_ctm-mob-buy-dn-by-fr-hr-te-ft-wt, var(--_ctm-tab-buy-dn-by-fr-hr-te-ft-wt, var(--_ctm-buy-dn-by-fr-hr-te-ft-wt)) ); text-decoration: var( --_ctm-mob-buy-dn-by-fr-hr-te-ue, var(--_ctm-tab-buy-dn-by-fr-hr-te-ue, var(--_ctm-buy-dn-by-fr-hr-te-ue)) ); letter-spacing: var( --_ctm-mob-buy-dn-by-fr-hr-te-lr-sg, var(--_ctm-tab-buy-dn-by-fr-hr-te-lr-sg, var(--_ctm-buy-dn-by-fr-hr-te-lr-sg)) ); line-height: var( --_ctm-mob-buy-dn-by-fr-hr-te-le-ht, var(--_ctm-tab-buy-dn-by-fr-hr-te-le-ht, var(--_ctm-buy-dn-by-fr-hr-te-le-ht)) ); font-style: var( --_ctm-mob-buy-dn-by-fr-hr-te-ft-se-ic, var(--_ctm-tab-buy-dn-by-fr-hr-te-ft-se-ic, var(--_ctm-buy-dn-by-fr-hr-te-ft-se-ic)) ); text-align: var( --_ctm-mob-buy-dn-by-fr-hr-te-tt-an, var(--_ctm-tab-buy-dn-by-fr-hr-te-tt-an, var(--_ctm-buy-dn-by-fr-hr-te-tt-an)) ); display: flex; align-items: center; gap: 12px; .separator { margin: 0 0.5rem; color: #ccc; } a { font-size: 1rem; color: #6c757d; text-decoration: none; &:hover { text-decoration: underline; } } } .impersonate-manage { display: flex; align-items: center; gap: 24px; text-wrap: nowrap; .dropdown-input-section { width: 200px !important; } .buyfor_emp_dropdown { right: 0 !important; left: auto !important; } .impersonate-text { position: relative; border-color: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-br-cr, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-br-cr, var(--_ctm-buy-dn-by-fr-hr-ur-io-br-cr) ) ); border-style: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-br-se, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-br-se, var(--_ctm-buy-dn-by-fr-hr-ur-io-br-se) ) ); border-width: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-br-wh, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-br-wh, var(--_ctm-buy-dn-by-fr-hr-ur-io-br-wh) ) ); border-radius: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-br-rs, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-br-rs, var(--_ctm-buy-dn-by-fr-hr-ur-io-br-rs) ) ); gap: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-im-gp, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-im-gp, var(--_ctm-buy-dn-by-fr-hr-ur-io-im-gp) ) ); padding: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-pg, var(--_ctm-tab-buy-dn-by-fr-hr-ur-io-pg, var(--_ctm-buy-dn-by-fr-hr-ur-io-pg)) ); background-color: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-bd-cr, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-bd-cr, var(--_ctm-buy-dn-by-fr-hr-ur-io-bd-cr) ) ); font-family: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-ft-fy, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-ft-fy, var(--_ctm-buy-dn-by-fr-hr-ur-io-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-tt-tm, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-tt-tm, var(--_ctm-buy-dn-by-fr-hr-ur-io-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-wd-wp, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-wd-wp, var(--_ctm-buy-dn-by-fr-hr-ur-io-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-wd-bk, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-wd-bk, var(--_ctm-buy-dn-by-fr-hr-ur-io-wd-bk) ) ); font-size: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-ft-se, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-ft-se, var(--_ctm-buy-dn-by-fr-hr-ur-io-ft-se) ) ); color: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-cr, var(--_ctm-tab-buy-dn-by-fr-hr-ur-io-cr, var(--_ctm-buy-dn-by-fr-hr-ur-io-cr)) ); font-weight: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-ft-wt, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-ft-wt, var(--_ctm-buy-dn-by-fr-hr-ur-io-ft-wt) ) ); text-decoration: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-ue, var(--_ctm-tab-buy-dn-by-fr-hr-ur-io-ue, var(--_ctm-buy-dn-by-fr-hr-ur-io-ue)) ); letter-spacing: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-lr-sg, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-lr-sg, var(--_ctm-buy-dn-by-fr-hr-ur-io-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-le-ht, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-le-ht, var(--_ctm-buy-dn-by-fr-hr-ur-io-le-ht) ) ); font-style: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-ft-se-ic, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-ft-se-ic, var(--_ctm-buy-dn-by-fr-hr-ur-io-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-by-fr-hr-ur-io-tt-an, var( --_ctm-tab-buy-dn-by-fr-hr-ur-io-tt-an, var(--_ctm-buy-dn-by-fr-hr-ur-io-tt-an) ) ); &::after { content: ""; width: 1px; height: 24px; display: inline-block; background: #eaecf0; position: absolute; right: -13px; } } .manage-link { border-color: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-br-cr, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-br-cr, var(--_ctm-buy-dn-by-fr-hr-me-ee-br-cr) ) ); border-style: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-br-se, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-br-se, var(--_ctm-buy-dn-by-fr-hr-me-ee-br-se) ) ); border-width: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-br-wh, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-br-wh, var(--_ctm-buy-dn-by-fr-hr-me-ee-br-wh) ) ); border-radius: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-br-rs, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-br-rs, var(--_ctm-buy-dn-by-fr-hr-me-ee-br-rs) ) ); gap: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-im-gp, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-im-gp, var(--_ctm-buy-dn-by-fr-hr-me-ee-im-gp) ) ); padding: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-pg, var(--_ctm-tab-buy-dn-by-fr-hr-me-ee-pg, var(--_ctm-buy-dn-by-fr-hr-me-ee-pg)) ); background-color: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-bd-cr, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-bd-cr, var(--_ctm-buy-dn-by-fr-hr-me-ee-bd-cr) ) ); font-family: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-ft-fy, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-ft-fy, var(--_ctm-buy-dn-by-fr-hr-me-ee-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-tt-tm, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-tt-tm, var(--_ctm-buy-dn-by-fr-hr-me-ee-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-wd-wp, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-wd-wp, var(--_ctm-buy-dn-by-fr-hr-me-ee-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-wd-bk, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-wd-bk, var(--_ctm-buy-dn-by-fr-hr-me-ee-wd-bk) ) ); font-size: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-ft-se, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-ft-se, var(--_ctm-buy-dn-by-fr-hr-me-ee-ft-se) ) ); color: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-cr, var(--_ctm-tab-buy-dn-by-fr-hr-me-ee-cr, var(--_ctm-buy-dn-by-fr-hr-me-ee-cr)) ); font-weight: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-ft-wt, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-ft-wt, var(--_ctm-buy-dn-by-fr-hr-me-ee-ft-wt) ) ); text-decoration: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-ue, var(--_ctm-tab-buy-dn-by-fr-hr-me-ee-ue, var(--_ctm-buy-dn-by-fr-hr-me-ee-ue)) ); letter-spacing: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-lr-sg, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-lr-sg, var(--_ctm-buy-dn-by-fr-hr-me-ee-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-le-ht, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-le-ht, var(--_ctm-buy-dn-by-fr-hr-me-ee-le-ht) ) ); font-style: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-ft-se-ic, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-ft-se-ic, var(--_ctm-buy-dn-by-fr-hr-me-ee-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-by-fr-hr-me-ee-tt-an, var( --_ctm-tab-buy-dn-by-fr-hr-me-ee-tt-an, var(--_ctm-buy-dn-by-fr-hr-me-ee-tt-an) ) ); cursor: pointer; &:hover { text-decoration: underline; } } .buy_for_back_btn { display: flex; gap: 8px; color: var(--_thm-cs-tt-by-tt); cursor: pointer; button { display: flex; } } .close_window { padding: 8px; border-radius: 6px; display: inline-block; display: flex; &:hover { background: var(--_gray-50); svg path { stroke: var(--_gray-900); } } } .employee-switch { display: flex; align-items: center; gap: 0.5rem; button { background: white; border: 1px solid #ddd; padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 1.2rem; &:hover { background-color: #f0f0f0; } } #employee-count { font-size: 0.95rem; } } } // button styles for primary .primary__btn { color: var(--_thm-py-bs-dt-se-tt-cr); background-color: var(--_thm-py-bs-dt-se-bd-cr); color: var(--_thm-py-bs-dt-se-tt-cr); text-align: center; border-radius: var(--_thm-py-bs-hr-se-br-rs); padding: 10px 16px; height: 40px; &:hover { background-color: var(--_thm-py-bs-hr-se-bd-cr); color: var(--_thm-py-bs-hr-se-tt-cr); } &:disabled { cursor: not-allowed; opacity: 0.5; } } } .employee-info { // border-top: 1px solid #eee; // margin: 24px 0; border-color: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-br-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-br-cr, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-br-cr) ) ); border-style: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-br-se, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-br-se, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-br-se) ) ); border-width: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-br-wh, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-br-wh, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-br-wh) ) ); border-radius: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-br-rs, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-br-rs, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-br-rs) ) ); gap: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-im-gp, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-im-gp, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-im-gp) ) ); padding: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-pg, var(--_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-pg, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-pg)) ); background-color: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr-bd-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr-bd-cr, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-bd-cr) ) ); .employee-details-section { display: flex; justify-content: space-between; padding-block: 24px; // border-bottom: 1px solid var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr-br-cr); .employee-meta-info { display: flex; .cart__section { display: flex; align-items: center; cursor: pointer; position: relative; gap: 8px; // &::after { // content: ""; // width: 1px; // height: 40px; // background-color: var(--_gray-200); // display: inline-block; // position: absolute; // margin-left: -16px; // top: 4px; // } .cart__div { position: relative; svg { width: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se) ) ); height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se) ) ); path { stroke: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1) ) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25); } } .badge { color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue) ) ); background-color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr) ) ); border-color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr) ) ); border-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se) ) ); border-width: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh) ) ); border-radius: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs) ) ); box-shadow: var( --_show-text-content-shadow, var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, none) ) ) ); height: 20px; width: 20px; position: absolute; top: -10px; right: -10px; display: flex; align-items: center; justify-content: center; } } .cart__content { display: flex; flex-direction: column; list-style: none; white-space: nowrap; margin-left: 12px; color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue) ) ); .cart__total { color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc) ) ); font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc) ) ); } } } li { display: flex; align-items: center; gap: 8px; font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-ft-se, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-ft-se) ) ); color: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-cr, var(--_ctm-tab-buy-dn-ee-ds-wr-ee-ds-cr, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-cr)) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-ft-wt) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-ue-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-ue-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-ue-dc) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-lr-sg-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-lr-sg-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-lr-sg-dc) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-le-ht-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-le-ht-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-le-ht-dc) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-ft-se-ic-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-ft-se-ic-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-tt-an-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-tt-an-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-tt-an-dc) ) ); padding: var( --_ctm-mob-buy-dn-ee-ds-wr-ee-ds-pg-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-ee-ds-pg-dc, var(--_ctm-buy-dn-ee-ds-wr-ee-ds-pg-dc) ) ); &:not(:last-child)::after { content: ""; width: 6px; height: 6px; margin-inline-end: 8px; display: inline-block; background-color: var(--_gray-200); border-radius: 50%; } .svg_icon { display: flex; justify-content: center; align-items: center; } } } .employee-details { display: flex; justify-content: space-between; align-items: center; gap: 12px; .employee-info-status { font-size: 14px; color: var(--_success-600); background: var(--_success-50); padding: 4px 8px 6px 8px; border-radius: 6px; font-weight: 400; } .employee-name { font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-ft-fy, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-ne-ft-fy)) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-tt-tm, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-ne-tt-tm)) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-wd-wp, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-ne-wd-wp)) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-wd-bk, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-ne-wd-bk)) ); font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-ft-se, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-ft-se, var(--_ctm-buy-dn-ee-ds-wr-ne-ft-se)) ); color: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-cr, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-cr, var(--_ctm-buy-dn-ee-ds-wr-ne-cr)) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-ft-wt, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-ne-ft-wt)) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-ue, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-ue, var(--_ctm-buy-dn-ee-ds-wr-ne-ue)) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-lr-sg, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-ne-lr-sg)) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-le-ht, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-le-ht, var(--_ctm-buy-dn-ee-ds-wr-ne-le-ht)) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-ne-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-ne-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-tt-an, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-tt-an, var(--_ctm-buy-dn-ee-ds-wr-ne-tt-an)) ); padding: var( --_ctm-mob-buy-dn-ee-ds-wr-ne-pg, var(--_ctm-tab-buy-dn-ee-ds-wr-ne-pg, var(--_ctm-buy-dn-ee-ds-wr-ne-pg)) ); .external-link-icon { margin-left: 0.5rem; font-size: 1rem; text-decoration: none; } .auto_saved { background-color: var(--_success-50); border-radius: 4px; padding-inline: 12px; font-size: 14px; font-weight: 500; display: inline-block; margin-left: 12px; color: var(--_success-600); } } .autosave-info { background: #e6f9ee; color: #28a745; padding: 0.4rem 0.8rem; border-radius: 5px; font-size: 0.85rem; } } } .buy-for-address-block { display: flex; gap: 24px; // border-block: 1px solid var(--_gray-200); padding-block: 24px !important; .cart__section { display: flex; align-items: center; cursor: pointer; position: relative; gap: 8px; &::after { content: ""; width: 1px; height: 40px; background-color: var(--_gray-200); display: inline-block; position: absolute; margin-left: -16px; top: 4px; } .cart__div { position: relative; svg { width: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se) ) ); height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se) ) ); path { stroke: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1) ) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25); } } .badge { color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-cr) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-wt) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-tt-an) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-le-ht) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-ue) ) ); background-color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-bd-cr) ) ); border-color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-cr) ) ); border-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-se) ) ); border-width: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-wh) ) ); border-radius: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-br-rs) ) ); box-shadow: var( --_show-text-content-shadow, var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-ae, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-br, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-sd, none) ) ) var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-is-ct-sw-cr, none) ) ) ); height: 20px; width: 20px; position: absolute; top: -10px; right: -10px; display: flex; align-items: center; justify-content: center; } } .cart__content { display: flex; flex-direction: column; list-style: none; white-space: nowrap; margin-left: 12px; color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ue) ) ); .cart__total { color: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-cr-dc) ) ); font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-fy-dc) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-tm-dc) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-wp-dc) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-wd-bk-dc) ) ); font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-dc) ) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-wt-dc) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-tt-an-dc) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-lr-sg-dc) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc, var(--_ctm-buy-dn-ee-ds-wr-my-ct-mi-ct-tt-le-ht-dc) ) ); } } } .buy-for-shipping-address { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; width: 100%; align-items: flex-start; .buy-for-shipping { display: flex; flex-direction: column; gap: 4px; position: relative; &:not(:first-child)::before { content: ""; width: 1px; height: 40px; background-color: var(--_gray-200); display: inline-block; position: absolute; margin-left: -16px; top: 4px; } h6 { font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-fy, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-fy, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-fy) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-tt-tm, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-tt-tm, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-tt-tm) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-wd-wp, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-wd-wp, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-wd-wp) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-wd-bk, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-wd-bk, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-wd-bk) ) ); font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-se, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-se, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-se) ) ); color: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-cr, var(--_ctm-tab-buy-dn-ee-ds-wr-sg-ds-cr, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-cr)) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-wt, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-wt, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-wt) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ue, var(--_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ue, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ue)) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-le-ht, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-le-ht) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-tt-an, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-tt-an) ) ); padding: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-pg, var(--_ctm-tab-buy-dn-ee-ds-wr-sg-ds-pg, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-pg)) ); } .buy-for-shipping-details { font-family: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-fy-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-fy-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-fy-dc) ) ); text-transform: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-tt-tm-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-tt-tm-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-tt-tm-dc) ) ); word-wrap: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-wd-wp-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-wd-wp-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-wd-wp-dc) ) ); word-break: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-wd-bk-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-wd-bk-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-wd-bk-dc) ) ); font-size: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-se-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-se-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-se-dc) ) ); color: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-dc, var(--_ctm-tab-buy-dn-ee-ds-wr-sg-ds-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-dc)) ); font-weight: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-wt-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-wt-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-wt-dc) ) ); text-decoration: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ue-dc, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ue-dc, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ue-dc) ) ); letter-spacing: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-lr-sg, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-lr-sg, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-lr-sg) ) ); line-height: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-le-ht, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-le-ht, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-le-ht) ) ); font-style: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-ft-se-ic, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-ft-se-ic, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-ft-se-ic) ) ); text-align: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-tt-an, var( --_ctm-tab-buy-dn-ee-ds-wr-sg-ds-tt-an, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-tt-an) ) ); padding: var( --_ctm-mob-buy-dn-ee-ds-wr-sg-ds-pg, var(--_ctm-tab-buy-dn-ee-ds-wr-sg-ds-pg, var(--_ctm-buy-dn-ee-ds-wr-sg-ds-pg)) ); } } } .buy-for-cart-main { width: 130px; display: flex; align-items: center; gap: 12px; height: 40px; border-left: 1px solid var(--_gray-200); padding-left: 12px; .cart-icon { position: relative; svg { width: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se); height: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se); path { stroke: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25); } } .badge { position: absolute; top: -9px; background: #ffd700; border-radius: 4px; left: 12px; padding: 2px 4px; line-height: normal; color: var(--_gray-900); font-weight: 400; } } .buy-for-cart-content { span { font-family: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-ft-fy-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-ft-fy-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-ft-fy-dc) ) ); text-transform: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-tt-tm-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-tt-tm-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-tt-tm-dc) ) ); word-wrap: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-wd-wp-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-wd-wp-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-wd-wp-dc) ) ); word-break: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-wd-bk-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-wd-bk-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-wd-bk-dc) ) ); font-size: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-ft-se-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-ft-se-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-ft-se-dc) ) ); color: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-cr-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-cr-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-cr-dc) ) ); font-weight: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-ft-wt-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-ft-wt-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-ft-wt-dc) ) ); text-decoration: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-ue-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-ue-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-ue-dc) ) ); letter-spacing: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-lr-sg-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-lr-sg-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-lr-sg-dc) ) ); line-height: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-le-ht-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-le-ht-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-le-ht-dc) ) ); font-style: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-ft-se-ic-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-ft-se-ic-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-tt-an-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-tt-an-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-tt-an-dc) ) ); padding: var( --_ctm-mob-buy-dn-my-ct-mi-ct-tt-pg-dc, var( --_ctm-tab-buy-dn-my-ct-mi-ct-tt-pg-dc, var(--_ctm-buy-dn-my-ct-mi-ct-tt-pg-dc) ) ); } .cart-amount { color: var(--_gray-900); font-size: 14px; font-weight: 600; line-height: 20px; } } } } .employee-meta { display: flex; align-items: center; margin: 0.8rem 0; flex-wrap: wrap; gap: 8px; .meta-item { // font-size: 0.9rem; // color: #555; font-family: var(--_ctm-buy-dn-ee-io-ss-ft-fy); text-transform: var(--_ctm-buy-dn-ee-io-ss-tt-tm); word-wrap: var(--_ctm-buy-dn-ee-io-ss-wd-wp); word-break: var(--_ctm-buy-dn-ee-io-ss-wd-bk); font-size: var(--_ctm-buy-dn-ee-io-ss-ft-se); color: var(--_ctm-buy-dn-ee-io-ss-cr); font-weight: var(--_ctm-buy-dn-ee-io-ss-ft-wt); font-style: var(--_ctm-buy-dn-ee-io-ss-ft-se-ic); text-decoration: var(--_ctm-buy-dn-ee-io-ss-ue); text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an); letter-spacing: var(--_ctm-buy-dn-ee-io-ss-lr-sg); line-height: var(--_ctm-buy-dn-ee-io-ss-le-ht); } .meta-separator { margin: 0 0.5rem; color: #bbb; } } .employee-address-info { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; position: relative; .info-block { min-width: 170px; max-width: 226px; .title, .sub_title { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .title { // font-size: 0.95rem; // color: #6c757d; font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy); text-transform: var(--_ctm-buy-dn-ee-dl-te-ss-tt-tm); word-wrap: var(--_ctm-buy-dn-ee-dl-te-ss-wd-wp); word-break: var(--_ctm-buy-dn-ee-dl-te-ss-wd-bk); font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se); color: var(--_ctm-buy-dn-ee-dl-te-ss-cr); font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt); font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic); text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue); text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an); letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg); line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht); margin-bottom: 0.2rem; } .sub_title { font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy); text-transform: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-tm); word-wrap: var(--_ctm-buy-dn-ee-dl-sb-te-ss-wd-wp); word-break: var(--_ctm-buy-dn-ee-dl-sb-te-ss-wd-bk); font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se); color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr); font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt); font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic); text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue); text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an); letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg); line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht); } } .cart-block { display: flex; align-items: center; gap: 0.5rem; position: absolute; right: 0; justify-content: right; .cart-icon { position: relative; font-size: 1.8rem; .cart-count { background: #ffcd00; color: #000; border-radius: 50%; font-size: 0.8rem; padding: 0.2rem 0.4rem; position: absolute; top: -10px; right: -10px; } } .cart-price { .title { font-family: var(--_ctm-buy-dn-ee-dl-te-ss-ft-fy); text-transform: var(--_ctm-buy-dn-ee-dl-te-ss-tt-tm); word-wrap: var(--_ctm-buy-dn-ee-dl-te-ss-wd-wp); word-break: var(--_ctm-buy-dn-ee-dl-te-ss-wd-bk); font-size: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se); color: var(--_ctm-buy-dn-ee-dl-te-ss-cr); font-weight: var(--_ctm-buy-dn-ee-dl-te-ss-ft-wt); font-style: var(--_ctm-buy-dn-ee-dl-te-ss-ft-se-ic); text-decoration: var(--_ctm-buy-dn-ee-dl-te-ss-ue); text-align: var(--_ctm-buy-dn-ee-io-ss-tt-an); letter-spacing: var(--_ctm-buy-dn-ee-dl-te-ss-lr-sg); line-height: var(--_ctm-buy-dn-ee-dl-te-ss-le-ht); } .sub_title { font-weight: bold; font-family: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-fy); text-transform: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-tm); word-wrap: var(--_ctm-buy-dn-ee-dl-sb-te-ss-wd-wp); word-break: var(--_ctm-buy-dn-ee-dl-sb-te-ss-wd-bk); font-size: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se); color: var(--_ctm-buy-dn-ee-dl-sb-te-ss-cr); // font-weight: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-wt); font-style: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ft-se-ic); text-decoration: var(--_ctm-buy-dn-ee-dl-sb-te-ss-ue); text-align: var(--_ctm-buy-dn-ee-dl-sb-te-ss-tt-an); letter-spacing: var(--_ctm-buy-dn-ee-dl-sb-te-ss-lr-sg); line-height: var(--_ctm-buy-dn-ee-dl-sb-te-ss-le-ht); } } } } } // Responsive @media (max-width: 768px) { .buy-for-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; } .employee-address-info { flex-direction: column; gap: 1rem; } } } // review cart styles for buy for .review_cart-main { border: 1px solid var(--_gray-200); border-radius: 6px; // margin: 24px; padding: 24px 24px 8px 24px; max-height: 550px; overflow-y: auto; &:not(:last-child) { margin-bottom: 16px; } .review_header { padding-bottom: 24px; border-bottom: 1px solid var(--_gray-200); display: flex; justify-content: space-between; align-items: center; h2 { font-size: 16px; font-weight: 700; color: var(--_gray-900); line-height: 24px; span { margin-left: 6px; } } ul { display: flex; align-items: center; list-style: none; li { line-height: 20px; font-size: 14px; font-weight: 400; color: var(--_gray-600); span { vertical-align: middle; margin-right: 6px; } &::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--_gray-300); display: inline-block; margin: 0 12px; } &:last-child::after { width: 0; margin: 0; } } } } .shipping_address { display: flex; grid-template-columns: auto auto auto; padding: 24px 0; border-bottom: 1px solid var(--_gray-200); .shipping { min-width: 40%; margin-right: 16px; border-right: 1px solid var(--_gray-200); padding-right: 12px; &:last-of-type { border-right: 0; } h6 { color: var(--_gray-500); font-weight: 400; font-size: 14px; line-height: 20px; } .shipping_details { font-size: 14px; font-weight: 600; color: var(--_gray-900); line-height: 20px; } } .cart_main { width: 150px; display: flex; gap: 16px; align-items: center; .cart_icon { position: relative; .badge { position: absolute; top: -9px; background: #ffd700; border-radius: 4px; left: 15px; padding: 2px 6px; line-height: normal; color: #1f1930; font-weight: 400; } } .cart_content { display: flex; flex-direction: column; .cart_amount { color: var(--_gray-900); font-size: 14px; font-weight: 600; line-height: 20px; } } } } } .cart-items { h6, .cart-items-title { font-size: 14px; font-weight: 600; color: var(--_gray-900); margin: 24px 0; line-height: 20px; } } .cart_item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 38px; padding-right: 12px; margin-top: 24px; .cart_item-card { display: flex; gap: 12px; img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; } .product_item-details { list-style: none; .product_item-name { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--_gray-900); } .delivery-date { color: var(--_gray-900); font-weight: 700; font-size: 14px; } .product_item-specs { display: flex; list-style: none; li { color: var(--_gray-600); font-size: 14px; font-weight: 400; line-height: 18px; &::after { content: " / "; padding: 0 4px; } &:last-child::after { content: ""; padding: 0; } } } } } .product_item-price { margin-left: auto; color: var(--_gray-900); font-size: 14px; font-weight: 700; } } .order_attributes { padding-block: 24px; border-top: 1px solid var(--_gray-200); .order_label { font-size: 14px; color: var(--_gray-600); } .order_description { font-size: 14px; color: var(--_gray-900); } } .show-more-wrapper { margin: 32px 16px 16px 0px; button { padding: 12px 16px; color: var(--_primary-400); font-weight: 600; border-radius: 6px; &:hover { background-color: var(--_primary-25); } } } } } // buy for checkout styles // checkout styles started for buy for .buy__for__chk { width: 100%; border-top: 1px solid var(--_gray-200); padding-top: 16px; .sh__pmnt__title { color: var(--_gray-900); font-size: 24px; font-weight: 600; margin-bottom: 24px; } .payment__options__heading { width: 100%; padding: 12px; border: 1px solid var(--_gray-200); border-radius: 4px; color: var(--_gray-900); font-weight: 600; display: flex; gap: 12px; align-items: center; } .buy_chk_wrapper { height: 100%; width: 1200px; margin: 0 auto; background-color: var(--_gray-50); .em_quota_container { display: flex; flex-direction: column; position: sticky; top: 0; z-index: 10; // employee checkout flow start .quota-bar-container { display: flex; align-items: center; padding: 10px 16px; background-color: #fff; border-bottom: 1px solid #ddd; font-size: 14px; white-space: nowrap; .quota-label { font-weight: 500; margin-right: 10px; color: #333; } .scroll-btn { background: none; border: none; font-size: 16px; padding: 4px 8px; cursor: pointer; color: #555; display: flex; &:hover { color: #000; } } .quota-scroll { display: flex; overflow-x: auto; scrollbar-width: none; // Firefox -ms-overflow-style: none; // IE 10+ flex: 1; &::-webkit-scrollbar { display: none; } } .quota-item { display: flex; align-items: center; gap: 4px; color: #444; &:not(:last-child):after { content: ""; display: inline-block; height: 20px; width: 1px; background: var(--_gray-300); margin-inline: 24px; } .quota-name { font-weight: 600; } .quota-count { color: #222; } .quota-expiry { font-size: 12px; color: #999; margin-left: 4px; } } } .user-info-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: #fff; border-bottom: 1px solid #ddd; font-size: 14px; .user-info-left { display: flex; align-items: center; flex-wrap: wrap; svg { display: flex; } .user-name { font-weight: 600; color: var(--_gray-900); border-right: 1px solid var(--_gray-400); padding-right: 16px; margin-right: 16px; } .user-item { display: flex; align-items: center; & > span { display: inline-block; margin-right: 4px; } color: #555; &:not(:last-child):after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--_gray-400); margin-inline: 16px; } .icon { margin-right: 6px; color: #888; } } } .user-info-right { .save-btn { padding: 8px 16px; border-radius: 4px; background-color: var(--_primary-500); color: var(--_base-white); font-weight: 500; font-size: 14px; } } .trigger-btn { display: flex; padding: 6px; border-radius: 4px; color: var(--_gray-600); &:hover { background: var(--_error-50); color: var(--_error-700); } } .user-info-right { display: flex; align-items: center; gap: 8px; .nav-button, .close-button { background: none; border: none; font-size: 16px; cursor: pointer; color: #555; padding: 4px 8px; &:hover { color: #000; } } .close-button { font-size: 20px; } } } .gallery-container { display: flex; align-items: center; padding: 8px 12px; background-color: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .nav-arrow { background: none; border: none; font-size: 18px; padding: 8px; cursor: pointer; color: #666; &:hover { color: #000; } } .gallery-scroll { display: flex; overflow-x: auto; gap: 16px; padding: 0 8px; scrollbar-width: none; -ms-overflow-style: none; flex: 1; &::-webkit-scrollbar { display: none; } } .gallery-item { min-width: 250px; background: var(--_base-white); border-radius: 4px; padding: 8px; cursor: pointer; border: 2px solid transparent; transition: border 0.2s ease; display: flex; gap: 8px; &.active { border-color: #3b82f6; background-color: #eef4ff; } .item-img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; background-color: var(--_gray-100); } .item-info { margin-top: 6px; font-size: 12px; color: #333; display: flex; align-items: center; color: #333; display: flex; align-items: start; flex-direction: column; justify-content: start; .item-title { font-weight: 600; } .item-id { color: #777; font-size: 11px; } .item-quota, .item-stock { font-size: 11px; color: #555; margin-top: 2px; } } } // employee checkout flow end } .buy_chk_container { display: flex; gap: 24px; margin: 0 auto; padding: 16px; width: 100%; height: 100%; background-color: var(--_base-white); .chk_section { // emp checkout started width: calc(100% - 400px); // skeletons .sktn_pmnt { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; .sklt_address { display: flex; justify-content: space-between; align-items: start; & > div { display: flex; flex-direction: column; gap: 12px; } } } .chk_checkout_accordion { display: flex; padding: var(--_ctm-lt-pg); flex-direction: column; gap: 4px; word-break: keep-all; padding-bottom: 24px; .chk_checkout_title { color: var(--_gray-900); font-size: 24px; font-weight: 600; line-height: 32px; } } .accordion { border-radius: 4px; display: flex; // gap: var(--_ctm-lt-an-hg-ad-ve-gp); flex-direction: column; transition: max-height 800ms ease-in; &.open { transition: max-height 800ms ease-in; .accordion-body { transition: max-height 800ms ease-in; max-height: 2000px; padding-block: 12px 24px; .shipping-address { max-height: fit-content; transition: max-height 800ms ease-in; } } } // accordion heaer .accordion-header { padding: 12px 16px; border-color: #f5f5f5; height: 55px; background-color: var(--_base-white); border: 1px solid var(--_gray-200); border-radius: 4px; color: var(--_gray-900); font-weight: 600; .accordion-title { margin-right: 1rem; white-space: nowrap; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 24px; span { display: flex; } } .edit-btn { cursor: pointer; color: var(--_primary-400); &:hover { color: var(--_primary-500); } } } // accordion body .accordion-body { transition: max-height 800ms ease-in; max-height: 0px; overflow: hidden; padding: 0; // shipping address .shipping-address { transition: max-height 800ms ease-in; max-height: 0; display: flex; flex-direction: column; gap: 16px; .btn_link { color: var(--_primary-400); &:hover { text-decoration: underline; } } .chk_saved_address_button { cursor: pointer; border-radius: 6px; color: var(--_primary-400); display: flex; align-items: center; gap: 4px; } .shipping_address_container { display: flex; flex-direction: column; gap: 24px; max-width: 485px; } .shipping_address_heading_container { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--_gray-900); .icon { display: flex; align-items: center; cursor: pointer; } } form { display: flex; flex-direction: column; gap: 0.75rem; // max-width: 85%; @media (max-width: 500px) { max-width: 100%; } } .chk_shipping_address_form_group { display: flex; justify-content: space-between; flex-direction: row; gap: 12px; } .chk_shipping_address_input_container { display: flex; width: 100%; } .chk_shipping_address_input_wrapper { display: flex; flex-direction: column; gap: 16px; width: 100%; } .chk_shipping_address_form_label { color: var(--_gray-600); font-size: 14px; padding-bottom: 6px; } .chk_shiping_address_form_input { padding: 8px 12px; width: -webkit-fill-available; background-color: var(--_base-white); color: var(--_gray-600); border: 1px solid var(--_gray-300); border-radius: 6px; height: 40px; &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } } input[type="checkbox"] { width: auto; } .error-msg { font-size: 12px; color: #ff0000; } label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; } .checkbox-group { display: flex; align-items: center; justify-content: start; gap: 8px; } .chk_shipping_address_use_as_billing_address_chkbx { display: flex; align-items: center; gap: 0.5rem; color: var(--_gray-600); font-size: 14px; .custom-checkbox { width: 20px; height: 20px; border: 1px solid #d0d5dd; border-radius: 4px; position: relative; background-color: #fff; transition: all 0.2s ease; &::after { content: ""; position: absolute; display: none; left: 5px; top: 0.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } } } input[type="checkbox"]:checked + label { .custom-checkbox { background-color: #004dff; border-color: #004dff; &::after { display: block; } } } } .summary { .chk_shipping_method_label { display: flex; align-items: center; gap: 4px; color: var(--_gray-500); } .chk_shipping_method_heading { color: var(--_gray-500); font-weight: 600; } } .chk_multi_address { display: flex; flex-direction: column; width: 100%; gap: 48px; &_product_container { display: flex; flex-direction: column; gap: 16px; width: 100%; } &_product_info_container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; @media (max-width: 500px) { flex-direction: column; } } &_product_left_container { display: flex; flex: 1 0 0; width: 100%; gap: var(--_ctm-lt-me-as-pt-io-vl-gp); } &_product_image { height: var(--_ctm-lt-me-as-pt-ie-ht); width: var(--_ctm-lt-me-as-pt-ie-wh); border: 1px solid var(--_gray-100); border-radius: 6px; } &_product_info_wrapper { display: flex; flex-direction: column; gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4); .chk_multi_address_product_name { color: var(--_gray-900); font-size: 18px; font-weight: 700; line-height: 28px; } .chk_multi_address_product_info { color: var(--_gray-600); font-size: 14px; list-style: 20px; } } &_product_right_container { display: flex; flex-direction: row; gap: 30px; align-items: center; @media (max-width: 500px) { align-self: flex-end; } .chk_multi_address_product_price { color: var(--_gray-900); font-size: 20px; font-weight: 700; } } &_qty_wrapper { display: flex; flex-direction: row; align-items: center; gap: 4px; .chk_multi_address_product_info { color: var(--_gray-600); font-size: 12px; line-height: 18px; } .chk_multi_address_product_qty { color: var(--_gray-900); font-size: 12px; font-weight: 700; } } &_shipping_option_container { display: flex; flex-direction: column; gap: 6px; @media (max-width: 500px) { flex-direction: row; } } &_shiping_option_heading_wrapper { display: grid; grid-template-columns: 0.5fr 2fr 2fr 20px; gap: var(--_ctm-lt-me-as-pt-io-vl-gp); white-space: nowrap; align-items: center; @media (max-width: 500px) { grid-template-columns: auto; } .chk_multi_address_product_label { color: var(--_gray-600); font-size: 12px; } } .chk_multi_address_icon { svg { width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se); height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se); path { stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25); } } &:hover { cursor: pointer; svg { path { stroke: var(--_error-700); } } } } .chk_shiping_address_form_input { padding: 8px 12px; width: -webkit-fill-available; border: 1px solid var(--_gray-300); border-radius: 6px; height: 40px; background-color: var(--_base-white); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } .custom-arrows { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; .arrow { all: unset; cursor: pointer; font-size: 10px; line-height: 1; } } // .input-field { // padding: 8px 12px; // width: -webkit-fill-available; // border: 1px solid var(--_gray-300); // border-radius: 6px; // height: 40px; // background-color: var(--_base-white); // &:focus-within { // border: 1px solid var(--_primary-300); // outline: 2px solid var(--_primary-100); // } // } } } .shipping-method { display: flex; flex-direction: column; gap: var(--_ctm-lt-sg-md-le-gp); &__grid { display: grid; grid-template-columns: 1fr; gap: var(--_ctm-lt-sg-md-le-gp); @media (min-width: 768px) { grid-template-columns: 1fr 1fr; gap: 32px; } } &__group { display: flex; flex-direction: column; gap: 8px; .chk_shipping_method_heading { color: var(--_gray-700); font-weight: 700; font-size: 16px; } } &__options { display: flex; flex-direction: column; gap: 12px; } &__option { display: flex; align-items: center; cursor: pointer; transition: all 0.2s ease; .custom_radio { width: 20px; margin-right: 12px; height: 20px; border: 1px solid transparent; /* blue ring */ border-radius: 50%; display: inline-block; box-sizing: border-box; background-color: white; transition: all 0.2s ease; input[type="radio"]:checked + .radio-style { background-color: #1a3dcc; border: 6px solid; } } .chk_shipping_method_label { color: var(--_gray-600); font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr); font-size: 14px; font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic); font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt); line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht); letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg); text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue); } .chk_shipping_method_value { color: var(--_gray-900); font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy); text-transform: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-tt-tm); word-wrap: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-wp); word-break: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-bk); font-size: 14px; font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic); font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt); line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht); letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg); text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue); } // input[type="radio"] { // margin-right: 12px; // width: 16px; // height: 16px; // accent-color: #2563eb; // cursor: pointer; // // display: none; // } .custom_radio { position: relative; input[type="radio"] { margin-right: 12px; width: 16px; height: 16px; accent-color: var(--_thm-py-bs-dt-se-tt-cr); cursor: pointer; display: none; } .radio-style { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #d0d5dd; background: white; display: inline-block; box-sizing: border-box; transition: all 0.2s; } input[type="radio"]:checked + .radio-style { background-color: var(--_base-white); border: 5px solid var(--_thm-py-bs-dt-se-br-cr); } } &.selected { background-color: var(--_base-white); border-color: var(--_thm-py-bs-dt-se-br-cr); } } // order level shipping .order_level_shipping { display: flex; gap: 24px; .order_level_shipping_img { width: 120px; height: 120px; background-color: var(--_gray-100); border-radius: 6px; } } } // payment options .chk_payment-options { display: flex; flex-direction: column; gap: var(--_ctm-lt-pt-os-gp-bn-cs); .gift_crd_chk_payment_option { border: 1px solid var(--_gray-300); border-radius: 4px; margin-bottom: 12px; .add_gift_card { display: flex; gap: 12px; padding: 16px; .gc_icon { svg { width: 18px; height: 14px; } } .gc_info { display: flex; justify-content: space-between; width: 100%; gap: 6px; .gc_title { font-size: 14px; font-weight: 600; } } .gc_tertiary_btn { color: var(--_primary-400); &:hover { color: var(--_primary-500); text-decoration: underline; } } } .chk_gft_crd_wrapper { display: flex; justify-content: space-between; align-items: center; padding: 16px; & > button { color: var(--_primary-400); &:hover { text-decoration: underline; } } &_item { display: flex; align-items: center; gap: 16px; &_icon { width: 40px; height: 40px; border: 1px solid var(--_gray-200); border-radius: 6px; display: flex; justify-content: center; align-items: center; } &_info { display: flex; flex-direction: column; &_title { font-size: 14px; margin-bottom: 4px; font-weight: 600; } &_desc { display: flex; &_value { font-size: 12px; color: var(--_gray-600); } &_label { font-size: 12px; color: var(--_gray-900); } } } &_pin { margin-left: 36px; input[type="number"] { border: 1px solid var(--_gray-300); border-radius: 4px; background-color: var(--_base-white); width: 95px; height: 44px; padding-inline: 10px; &:disabled { opacity: 0.8; cursor: not-allowed; } &:focus { outline: 2px solid var(--_primary-100); border: 1px solid var(--_primary-300); } } } } &_input { border: 1px solid var(--_gray-300); border-radius: 4px; background-color: var(--_base-white); height: 44px; width: 120px; display: flex; align-items: center; gap: 8px; padding-left: 10px; input[type="number"] { background-color: var(--_base-white); padding-right: 10px; &:disabled { opacity: 0.8; cursor: not-allowed; } } &:focus-within { outline: 2px solid var(--_primary-100); border: 1px solid var(--_primary-300); } } } } .payment_program { // padding: 0 12px; // skeletons .sltn__ppm { border: 1px solid var(--_gray-200); border-radius: 4px; .sltn__ppm_header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--_gray-200); } .sltn__ppm_card { padding: 16px; display: flex; justify-content: space-between; & > div { display: flex; justify-content: space-between; } } } .payment_program_header { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 16px; .payment_program_header_label { display: flex; justify-content: space-between; align-items: center; &_title { font-size: 14px; font-weight: 600; color: var(--_gray-600); } .payment_program_header_pds { &_label { font-size: 14px; color: var(--_gray-600); } &_value { font-size: 14px; color: var(--_gray-900); } } } } } .chk_payment_option_wrapper { display: flex; flex-direction: column; border: 1px solid var(--_gray-300); margin-bottom: 12px; border-radius: 4px; overflow: hidden; .pp_pmnt_method_groups { .pp_ppm_section { background: var(---base-white); border-bottom: 1px solid var(--_gray-300); padding: 12px 16px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; &:not(:first-child) { border-top: 1px solid var(--_gray-200); } .pp_ppm_section_label { font-size: 14px; font-weight: 700; color: var(--_gray-900); } .pp_ppm_section_value { font-size: 14px; font-weight: 700; color: var(--_gray-600); .pp_ppm_section_value_lable { font-weight: 500; color: var(--_gray-500); } } } .payment_methods { // padding: 12px; display: grid; gap: 8px; .credit_card_section { .credit_card_section { display: flex; flex-direction: column; justify-content: start; align-items: start; .add_credit_card { display: flex; align-items: center; width: 100%; padding: 12px; .cc_info { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-left: 12px; .cc_title { font-size: 14px; font-weight: 600; color: var(--_gray-600); } .chk_payment_cred_section_col_right { .chk_currency_inp { width: 120px; border: 1px solid var(--_gray-200); border-radius: 4px; display: flex; height: 40px; align-items: center; gap: 12px; padding-inline: 10px; & > span { font-size: 14px; white-space: nowrap; margin-top: 2px; } } } } } } } .chk_payment_option { .chk_payment_options_heading { padding: 16px; display: flex; justify-content: space-between; } .chk_payment_section_wrapper { width: 100%; display: flex; justify-content: space-between; padding: 16px; .chk_payment_section { display: flex; justify-content: space-between; align-items: center; width: 100%; .chk_payment_section_col_left { display: flex; gap: 12px; svg { width: 24px; height: 24px; } .chk_payment_section_method { display: flex; flex-direction: column; .chk_payment_section_method_details { display: flex; align-items: center; gap: 48px; .po-container { .po-grid { display: flex; gap: 8px; & > div { border: 1px solid var(--_gray-300); background-color: var(--_base-white); border-radius: 4px; width: 90px; input { padding-inline: 10px; } } } } } .chk_payment_section_method_name { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--_gray-700); display: flex; gap: 48px; white-space: nowrap; } & > div { display: flex; .label { font-size: 12px; color: var(--_gray-500); } .price { font-size: 12px; color: var(--_gray-900); } } } } &_col_right { .chk_currency_inp { height: 44px; border: 1px solid var(--_gray-200); border-radius: 4px; background-color: var(--_base-white); display: flex; width: 120px; overflow: hidden; align-items: center; padding-inline: 12px; gap: 12px; & > span { white-space: nowrap; } &:focus-within { border: 1px solid var(--_primary-200); outline: 2px solid var(--_primary-50); } input { height: inherit; &:disabled { opacity: 0.8; cursor: not-allowed; } } } .chk_currency_inp_sec { display: flex; justify-content: end; } .cur_conversion { font-size: 12px; font-weight: 600; } } } .chk_payment_options_heading { color: var(--_gray-900); font-size: 16px; font-weight: 700; } // gift card styles // payment other options styles .chk_pmnt_other_options { display: flex; justify-content: space-between; gap: 80px; padding: 16px; .chk_pmnt_other_options_left_container { display: flex; gap: 12px; .chk_pmnt_option_info_wrapper { display: flex; gap: 12px; .cards { display: flex; flex-direction: column; gap: 8px; .chk_payment_options_name { font-weight: 600; } span { font-size: 12px; .chk_payment_options_label { color: var(--_gray-600); } .chk_payment_options_value { color: var(--_gray-900); } } } } } .chk_pmnt_other_options_container { padding: 16px; } } &__other_option_wrapper { display: flex; width: 100%; justify-content: space-between; padding: 16px; @media (max-width: 500px) { flex-direction: column; } } &_left_container { display: flex; gap: 12px; align-items: flex-start; .chk_payment_option__info_wrapper { display: flex; gap: 0px; } @media (max-width: 500px) { flex-wrap: wrap; } } &__left_wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } &__card_icon { width: 60px; height: 40px; } &__info_wrapper { display: flex; flex-direction: column; .chk_payment_options_name { color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-pt-ne-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-bk); font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue); } .chk_payment_options_label { color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk); font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue); } .chk_payment_options_value { color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk); font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue); } } &_right_container { display: flex; gap: 6px; align-items: flex-start; @media (max-width: 500px) { justify-content: flex-end; } } &_input { display: flex; padding: 9px 12px; align-items: center; max-width: 96px; background-color: var(--_base-white); border: 1px solid var(--_gray-300); border-radius: 6px; color: var(--_gray-700); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } .icon { svg { path { stroke: var(--_primary-400); } } } .input_field { background-color: var(--_base-white); border: 1px solid var(--_gray-300); border-radius: 6px; color: var(--_gray-700); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } } } } } .add_new_credit_card { padding: 16px 16px 0px 16px; display: flex; justify-content: space-between; .cc_tertiary_btn { color: var(--_primary-400); &:hover { text-decoration: underline; } } } .chk_payment_cred_section { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px 16px; .chk_currency_inp { height: 44px; border: 1px solid var(--_gray-200); border-radius: 4px; background-color: var(--_base-white); display: flex; width: 120px; overflow: hidden; align-items: center; padding-inline: 12px; gap: 12px; &:focus-within { border: 1px solid var(--_primary-200); outline: 2px solid var(--_primary-50); } input { height: inherit; } } .chk_payment_cred_section_col_left { .chk_payment_cred_section_col_left_crd_details { display: flex; gap: 80px; align-items: center; & > div { display: flex; gap: 12px; .card_icon { width: 60px; height: 40px; border-radius: 4px; } .card_details { .card_details_num { font-size: 12px; font-weight: 600; color: var(--_gray-900); } & > div { display: flex; .card_details_label { font-size: 12px; color: var(--_gray-500); } .card_details_value { font-size: 12px; color: var(--_gray-900); } } } } } } } .chk_payment_remove_card { padding-inline: 16px; margin-bottom: 16px; .error_msg { font-size: 12px; color: var(--_error-700); } } } } } .chk_billing_address { width: 100%; display: flex; flex-direction: column; background-color: var(--_base-white); box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr); &_form_container { border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs); padding-top: 24px; display: flex; flex-direction: column; gap: 24px; } .chk_payment_options_heading { font-size: 16px; color: var(--_gray-900); font-weight: 600; &.pl_0 { padding-left: 0px; } } &_form_wrapper { display: flex; flex-direction: column; gap: 24px; border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs); } .shipping_address_container { display: flex; flex-direction: column; gap: 24px; } .shipping_address_heading_container { display: flex; justify-content: space-between; align-items: center; .chk_heading_info { color: var(--_ctm-dn-sg-md-dn-hg-dn-cr); font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy); text-transform: var(--_ctm-dn-sg-md-dn-hg-dn-tt-tm); word-wrap: var(--_ctm-dn-sg-md-dn-hg-dn-wd-wp); word-break: var(--_ctm-dn-sg-md-dn-hg-dn-wd-bk); font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se); font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic); font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt); line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht); letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg); text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue); } .icon { cursor: pointer; } } form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 85%; @media (max-width: 500px) { max-width: 100%; } } .chk_shipping_address_form_group { display: flex; justify-content: space-between; flex-direction: row; gap: 12px; } .chk_shipping_address_input_container { display: flex; width: 100%; } .chk_shipping_address_input_wrapper { display: flex; flex-direction: column; gap: var(--_ctm-lt-ll-ad-it-gp); width: 100%; } .chk_shipping_address_form_label { color: var(--_gray-600); font-size: 14px; } .chk_shiping_address_form_input { padding: 8px 12px; width: -webkit-fill-available; height: 40px; background-color: var(--_base-white); border-radius: 6px; border: 1px solid var(--_gray-300); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } // .input-field { // padding: 8px 12px; // width: -webkit-fill-available; // background-color: var(--_base-white); // border-radius: 6px; // border: 1px solid var(--_gray-300); // &:focus-within { // border: 1px solid var(--_primary-300); // outline: 2px solid var(--_primary-100); // } // } } input[type="checkbox"] { width: auto; } .error-msg { font-size: 12px; color: #ff0000; } .chk_shipping_address_use_as_billing_address_chkbx { display: flex; align-items: center; gap: 0.5rem; color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr); font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy); text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm); word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp); word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se); font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic); font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt); line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht); letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg); text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue); .custom-checkbox { width: 20px; height: 20px; border: 1px solid #d0d5dd; border-radius: 4px; position: relative; background-color: #fff; transition: all 0.2s ease; &::after { content: ""; position: absolute; display: none; left: 5px; top: 0.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } } } input[type="checkbox"]:checked + label { .custom-checkbox { background-color: #004dff; border-color: #004dff; &::after { display: block; } } } .checkbox-group { display: flex; align-items: center; justify-content: start; gap: 8px; } &_same_as_billing_address_chkbx { color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr); font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy); text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm); word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp); word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk); font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se); font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic); font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt); line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht); letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg); text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue); } &_button_wrapper { display: flex; align-items: center; gap: 16px; } } .payment_heading { padding: 12px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--_gray-100); font-weight: 600; .gc_tertiary_btn { color: var(--_primary-400); &:hover { text-decoration: underline; } } } .chk_payment_gift_card { border: 1px solid var(--_gray-200); border-radius: 6px; .chk_payment_options_heading { padding: 16px; border-bottom: 1px solid var(--_gray-200); display: flex; justify-content: space-between; .payment_options_heading { font-size: 14px; font-weight: 600; } .chk_primary_btn_link { color: var(--_primary-400); &:hover { text-decoration: underline; } } } // gift card styles // .chk_gft_crd_wrapper { // &_btn { // text-align: left; // margin-bottom: 16px; // color: var(--_primary-400); // &:hover { // text-decoration: underline; // } // } // } } .chk_gft_crd_container { width: 100%; display: flex; flex-direction: column; gap: var(--_ctm-lt-pt-os-cr-hl-gp); background-color: var(--_base-white); border: 1px solid var(--_gray-300); border-radius: 4px; overflow: hidden; .chk_gft_crd_option_heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--_gray-300); } // gift card styles .chk_gft_crd_wrapper { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 0 16px; &_item { display: flex; align-items: center; gap: 16px; &_icon { width: 40px; height: 40px; border: 1px solid var(--_gray-200); border-radius: 6px; display: flex; justify-content: center; align-items: center; } &_info { display: flex; flex-direction: column; &_title { font-size: 14px; margin-bottom: 4px; font-weight: 600; } &_desc { display: flex; &_value { font-size: 12px; color: var(--_gray-600); } &_label { font-size: 12px; color: var(--_gray-900); } } } &_pin { margin-left: 36px; input[type="number"] { border: 1px solid var(--_gray-300); border-radius: 4px; background-color: var(--_base-white); width: 95px; height: 44px; padding-inline: 10px; &:focus { outline: 2px solid var(--_primary-100); border: 1px solid var(--_primary-300); } } } } &_input { border: 1px solid var(--_gray-300); border-radius: 4px; background-color: var(--_base-white); height: 44px; width: 120px; display: flex; align-items: center; gap: 8px; padding-left: 10px; input[type="number"] { background-color: var(--_base-white); padding-right: 10px; } &:focus-within { outline: 2px solid var(--_primary-100); border: 1px solid var(--_primary-300); } } .chk_gft_crd_wrapper_btn { color: var(--_primary-400); &:hover { text-decoration: un; } } } // payment other options styles .chk_pmnt_other_options { display: flex; justify-content: space-between; gap: 80px; padding: 16px; .chk_pmnt_other_options_left_container { display: flex; gap: 12px; .chk_pmnt_option_info_wrapper { display: flex; gap: 12px; .cards { display: flex; flex-direction: column; gap: 8px; .chk_payment_options_name { font-weight: 600; } span { font-size: 12px; .chk_payment_options_label { color: var(--_gray-600); } .chk_payment_options_value { color: var(--_gray-900); } } } } } .chk_pmnt_other_options_container { padding: 16px; } } &__other_option_wrapper { display: flex; width: 100%; justify-content: space-between; padding: 16px; @media (max-width: 500px) { flex-direction: column; } } &_left_container { display: flex; gap: 12px; align-items: flex-start; & > div { display: flex; gap: 12px; } @media (max-width: 500px) { flex-wrap: wrap; } } &__left_wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } &__card_icon { width: 60px; height: 40px; } &__info_wrapper { display: flex; flex-direction: column; .chk_payment_options_name { color: var(--_gray-900); font-size: 16px; font-weight: 600; } .chk_payment_options_label { color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk); font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue); } .chk_payment_options_value { color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk); font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue); } } &_right_container { display: flex; gap: 6px; align-items: flex-start; @media (max-width: 500px) { justify-content: flex-end; } } &_input { display: flex; padding: 8px 12px; width: -webkit-fill-available; background-color: var(--_base-white); border-radius: 6px; border: 1px solid var(--_gray-300); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } .icon { svg { path { stroke: var(--_primary-400); } } } .input_field { padding: 8px 12px; width: -webkit-fill-available; background-color: var(--_base-white); border-radius: 6px; border: 1px solid var(--_gray-300); &:focus-within { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } } } } } .react-international-phone-country-selector-button { border: none !important; height: auto !important; } .react-international-phone-input { height: auto; border: none !important; color: var(--_ctm-dn-it-bx-dn-cr); font-family: var(--_ctm-dn-it-bx-dn-ft-fy); text-transform: var(--_ctm-dn-it-bx-dn-tt-tm); word-wrap: var(--_ctm-dn-it-bx-dn-wd-wp); word-break: var(--_ctm-dn-it-bx-dn-wd-bk); font-size: var(--_ctm-dn-it-bx-dn-ft-se); font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic); font-weight: var(--_ctm-dn-it-bx-dn-ft-wt); line-height: var(--_ctm-dn-it-bx-dn-le-ht); letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg); box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br) var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr); text-align: var(--_ctm-dn-it-bx-dn-tt-an); text-decoration: var(--_ctm-dn-it-bx-dn-ue); } .chk_checkbox_wrapper { display: flex; width: fit-content; align-items: center; gap: 12px; input[type="checkbox"] { display: none; } .payment_program_title { font-size: 14px; font-weight: 500; color: var(--_gray-900); } .chk_payment_options_use_as_billing_address_chkbx { display: flex; align-items: center; cursor: pointer; gap: 10px; color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue); .custom-checkbox { width: 20px; height: 20px; border: 1px solid #d0d5dd; border-radius: 4px; position: relative; background-color: #fff; transition: all 0.2s ease; &::after { content: ""; position: absolute; display: none; left: 5px; top: 0.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } } } .chk_shipping_address_use_as_billing_address_chkbx { display: flex; align-items: center; cursor: pointer; gap: 10px; color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr); font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy); text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm); word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp); word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se); font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic); font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt); line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht); letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg); text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue); .custom-checkbox { width: 20px; height: 20px; border: 1px solid #d0d5dd; border-radius: 4px; position: relative; background-color: #fff; transition: all 0.2s ease; &::after { content: ""; position: absolute; display: none; left: 5px; top: 0.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } } } input[type="checkbox"]:checked + label { .custom-checkbox { background-color: #004dff; border-color: #004dff; &::after { display: block; } } } } .chk_address_actions { display: flex; gap: 12px; } .chk_payment-card__note { padding: 8px 6px; display: flex; align-items: center; gap: 6px; padding: 8px 16px; background-color: var(--_warning-100); color: var(--_warning-700); .icon { svg { width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se); height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se); path { stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25); } } } } .accordion-summary { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; .summary-content { display: flex; flex-direction: row; justify-content: space-between; gap: 0.5rem; .chk_shipping-summary { display: flex; flex-direction: column; gap: var(--_ctm-lt-sd-sg-as-le-gp); max-width: 700px; .chk_address { display: flex; flex-direction: column; gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2); .chk_saved_address_name { color: var(--_gray-700); font-size: 16px; font-weight: 600; } .chk_saved_address { color: var(--_gray-600); font-size: 12px; } .chk_saved_address_label { color: var(--_gray-500); font-size: 12px; } .chk_saved_address_value { color: var(--_gray-700); font-size: 12px; } } .contact { font-size: 0.875rem; color: var(--_gray-700); line-height: 1.4; } } .right-btn { display: none; gap: 24px; &:has(.chk_saved_address_button.selected) { display: flex !important; } .chk_saved_address_button { display: flex; align-items: center; gap: 4px; color: var(--_primary-400); } } &:hover { .right-btn { display: flex; } } } } } } // credit card form syles .chk_cred_form_details { border-top: 1px solid var(--_gray-100); padding: 16px; width: 100%; .chk_basic_form_title { font-size: 14px; margin-bottom: 16px; font-weight: 600; } .chk_form_fields { h3 { font-size: 14px; margin-bottom: 8px; } display: flex; flex-direction: column; gap: 24px; width: 500px; .chk_form_field { width: 100%; &.expiry_details { width: 80px; } display: flex; flex-direction: column; gap: 6px; width: 100%; .chk_form_field_label { font-size: 14px; color: var(--_gray-600); } .chk_form_field_inp { height: 40px; border: 1px solid var(--_gray-300); border-radius: 4px; padding-inline: 10px; &:placeholder-shown { color: var(--_gray-400); padding-left: 16px; } &:focus { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } } .error_msg { display: block; color: var(--_error-700); font-size: 12px; } } .checkbox { width: auto; label { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; user-select: none; input[type="checkbox"] { display: none; &:checked + .custom-checkbox::after { opacity: 1; } } .custom-checkbox { width: 16px; height: 16px; border: 2px solid var(--_primary-400); border-radius: 4px; position: relative; display: inline-block; box-sizing: border-box; &::after { content: ""; position: absolute; left: 3px; top: 0px; width: 4px; height: 8px; border: solid var(--_primary-400); border-width: 0 1px 1px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease-in-out; } } } } .expiry_details { display: flex; gap: 12px; .cvv_inp { width: 110px; } } } } // giftcard form styles .chk_gift_card_details { border-top: 1px solid var(--_gray-300); padding: 16px; .chk_gift_card_form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; .chk_gift_cart_form_title { font-size: 14px; font-weight: 600; } .chk_gift_form_fields { display: flex; gap: 12px; width: 100%; .chk_gift_inp_field { display: flex; flex-direction: column; gap: 6px; width: 100%; label { color: var(--_gray-600); } .chk_gift_inp { border: 1px solid var(--_gray-300); border-radius: 6px; height: 40px; padding-inline: 10px; &:placeholder-shown { padding-left: 10px; color: var(--_gray-400); } &:focus { border: 1px solid var(--_primary-300); outline: 2px solid var(--_primary-100); } } &.pin { width: 110px; } .error_msg { display: block; color: var(--_error-700); font-size: 12px; } } .error_msg { color: var(--_error-700); font-size: 14px; } } } } .chk_form_actions { display: flex; gap: 12px; .chk_sav_btn { padding: 12px 16px; background-color: var(--_primary-400); border-radius: 6px; color: var(--_base-white); &:hover { background-color: var(--_primary-500); } } .chk_can_btn { padding: 12px 16px; background-color: transparent; border-radius: 6px; color: var(--_gray-600); padding-inline: 10px; &:hover { background-color: var(--_gray-50); color: var(--_gray-900); } } } .tertiary_primary_btn { font-size: 12px; color: var(--_primary-400); display: inline-flex; width: fit-content; &:hover { color: var(--_primary-500); text-decoration: underline; } } .chk_primary_bnt { padding: 12px 24px; background-color: var(--_primary-400); color: var(--_base-white); font-weight: 600; border-radius: 6px; width: max-content; &:hover { background-color: var(--_primary-500); } } .chk_secondary_bnt { padding: 16px 24px; background-color: transparent; color: var(--_gray-600); font-weight: 600; border-radius: 6px; &:hover { background-color: var(--_gray-50); color: var(--_gray-900); } } // emp checkout end } // summary started for checkout .summary_container { width: 400px; height: 100%; display: flex; flex-direction: column; gap: 24px; // order summary styles started .sklt_summary { display: flex; flex-direction: column; gap: 24px; .summary_line_item { display: flex; justify-content: space-between; align-items: center; } } // Coupon Styles .coupon_code { border: 1px solid var(--_gray-300); border-radius: 4px; .coupon_code_header { background-color: var(--_gray-100); padding: 12px 12px 14px 12px; border-bottom: 0.5px solid var(--_gray-300); h3 { font-size: 16px; color: var(--_gray-900); } } .coupon_code_body { display: flex; flex-direction: column; gap: 16px; padding: 16px; .coupon_code_apply_section { .coupon_code_fields_wrapper { display: flex; gap: 12px; &.divider { padding-bottom: 16px; border-bottom: 1px dashed var(--_gray-300); } .coupon-search-input { padding: 10px 16px; border: 1px solid var(--_gray-300); border-radius: 4px; height: 40px; &:focus { outline: 2px solid var(--_gray-100); } } .coupon-search-btn { padding: 10px 16px 12px 16px; white-space: nowrap; height: 40px; } } .coupon-list { .coupon-item { .coupon-info { .coupon-title { font-size: 16px; font-weight: 700; color: var(--_gray-900); } .coupon-desc { font-size: 14px; font-weight: 400; color: var(--_gray-600); } .remove-btn { padding: 12px; color: var(--_gray-900); } } } } } .apply_coupon_code_body { display: flex; align-items: center; justify-content: space-between; gap: 12px; &:not(:last-child) { margin-bottom: 12px; } .apply_coupon_code_flex { display: flex; gap: 12px; .cpn__sale__icon { margin-top: 4px; } .apply_coupon_code { display: flex; flex-direction: column; .cpn_sale_text { font-size: 14px; font-weight: 400; color: var(--_gray-900); } } } .cpn_sale_desc { font-size: 14px; font-weight: 400; color: var(--_gray-600); } .apply_coupon_code_btn { padding: 8px 16px; } .remove_coupon_code_btn { padding: 8px 16px; border: 1px solid var(--_gray-300); border-radius: 4px; color: var(--_gray-900); &:hover { background-color: var(--_gray-100); } } } } } .cart_summary_wrapper { display: flex; flex-direction: column; align-items: center; align-self: stretch; border-radius: 4px; border: 0px; background: #fff; word-break: keep-all; overflow: hidden; width: 380px; border: 1px solid var(--_thm-cs-be-se-3); .cart_summary_heading_wrapper { display: flex; padding: 0px; align-items: center; gap: 12px; align-self: stretch; background: var(--_base-white); border-bottom: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px 4px 0 0; .icon svg { path { stroke: #d0d5dd; } } .iconDesc svg { path { stroke: #101828; } } .cart_summary_heading { width: 100%; height: auto; max-height: 48px; display: flex; align-items: center; color: #101828; font-size: 24px; font-weight: 600; padding: 16px; } } .cart_summary_content_wrapper { padding: 16px; display: flex; flex-direction: column; width: 100%; gap: 16px; .cart_summary_products_container { display: flex; width: 100%; flex-direction: column; gap: 12px; // gap: var(--_ctm-lt-im-gp); .cart_summary_product_info_wrapper { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; .cart_summary_product_info_wrapper { display: flex; gap: 12px; align-items: flex-start; .cart_summary_product_img { width: 69px; height: 80px; background-color: var(--_base-white); border-radius: 4px; } .cart_summary_product_content_wrapper { display: flex; flex-direction: column; gap: 4px; // gap: calc(var(--_ctm-lt-im-gp) / 4); .cart_summary_product_content { display: flex; flex-direction: column; // pt-wt-pt-qy-ft-fy .cart_summary_heading_text { color: var(--_gray-600); font-weight: 600; font-size: 14px; } .cart_summary_qty_text { font-size: 12px; font-weight: 400; color: var(--_gray-400); } .cart_summary_qty_value { font-size: 12px; font-weight: 400; color: var(--_gray-900); } .cart_summary_estimatedDate_text { font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy) ) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-tm, var( --_ctm-tab-dn-pt-wt-pt-ed-de-tt-tm, var(--_ctm-dn-pt-wt-pt-ed-de-tt-tm) ) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp) ) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk) ) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr, var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt) ) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se) ) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg, var( --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg) ) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht, var( --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht) ) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an, var( --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an) ) ); } .cart_summary_estimatedDate_value { font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc) ) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-tm-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-tt-tm-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc) ) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp-dc) ) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk-dc) ) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc) ) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc) ) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc) ) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc) ) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc) ) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc) ) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc) ) ); } } } } } } .coupon_code_wrapper { display: flex; flex-direction: column; gap: 12px; width: 100%; .coupon_code_btn_wrapper { display: flex; justify-content: space-between; width: 100%; } .coupon_code_input { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid #d0d5dd; background-color: #ffffff; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); font-size: 16px; line-height: 24px; height: 40px; &::placeholder { font-size: 14px; } } .success_message { display: flex; flex: 1 0 0; flex-wrap: wrap; color: green; } .error_message { display: flex; flex: 1 0 0; flex-wrap: wrap; color: red; } } .subtotal_wrapper { display: flex; align-items: center; gap: 16px; align-self: stretch; justify-content: space-between; .cart_summary_number_text { color: #667085; font-weight: 400; font-size: 14px; text-align: left; } .cart_summary_number_value { color: #101828; font-size: 14px; font-weight: 600; } .cart_summary_shippingLabel_text { color: #667085; font-weight: 400; font-size: 14px; text-align: left; } } .cart_summary_content_details_wrapper { display: flex; flex-direction: column; gap: 8px; .cart_summary_shippingLabel_text { color: #667085; font-weight: 400; font-size: 14px; text-align: left; } .cart_summary_shippingLabel_value { color: #101828; font-size: 14px; font-weight: 600; } .cart_summary_tax_text { color: #667085; font-weight: 400; font-size: 14px; text-align: left; } .cart_summary_tax_value { color: #101828; font-size: 14px; font-weight: 600; } } .cart_summary_total_wrapper { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--_gray-300); padding-top: 12px; .subtotal_wrapper { display: flex; align-items: center; gap: 16px; align-self: stretch; justify-content: space-between; .cart_summary_subTotal_text { font-size: 16px; font-weight: 600; color: #101828; } .cart_summary_subTotal_value { font-size: 16px; font-weight: 600; color: #101828; } .cart_summary_total_text { font-size: 16px; font-weight: 600; color: #101828; } .cart_summary_total_value { font-size: 20px; font-weight: 600; color: #101828; } } } } .cart_summary_heading_text { font-size: 16px; font-weight: 600; color: var(--_gray-900); } .cart_summary_primary_text { font-size: 16px; font-weight: 600; color: var(--_gray-900); } .cart_summary_product_text { font-size: 14px; color: var(--_gray-600); } .cart_summary_secondary_text { color: var(--_ctm-dn-sy-tt-dn-cr); font-family: var(--_ctm-dn-sy-tt-dn-ft-fy); text-transform: var(--_ctm-dn-sy-tt-dn-tt-tm); word-wrap: var(--_ctm-dn-sy-tt-dn-wd-wp); word-break: var(--_ctm-dn-sy-tt-dn-wd-bk); font-size: var(--_ctm-dn-sy-tt-dn-ft-se); font-style: var(--_ctm-dn-sy-tt-dn-ft-se-ic); font-weight: var(--_ctm-dn-sy-tt-dn-ft-wt); line-height: var(--_ctm-dn-sy-tt-dn-le-ht); letter-spacing: var(--_ctm-dn-sy-tt-dn-lr-sg); text-align: var(--_ctm-dn-sy-tt-dn-tt-an); text-decoration: var(--_ctm-dn-sy-tt-dn-ue); } .cart_summary_primary_btn_wrapper { padding: 12px; width: 100%; height: auto; min-height: 48px; background: #243dc6; border-radius: 4px; border: 1px solid #243dc6; color: #fff; text-align: center; font-size: 16px; font-weight: 600; &:hover { padding: 12px; width: 100%; height: auto; min-height: 48px; background: #243dc6; border-radius: 4px; border: 1px solid #243dc6; color: #fff; text-align: center; font-size: 16px; font-weight: 600; } } .cart_summary_placeOrder_btn_wrapper { padding: 12px; width: 100%; height: auto; min-height: 48px; background-color: var(--_thm-py-bs-dt-se-bd-cr); border-radius: 4px; font-family: var(--_thm-py-bs-dt-se-ft); // border: 1px solid #243dc6; color: #fff; text-align: center; font-size: 16px; font-weight: 600; &:hover { padding: 12px; width: 100%; height: auto; min-height: 48px; background-color: var(--_thm-py-bs-hr-se-bd-cr); border-radius: 4px; // border: 1px solid #243dc6; color: #fff; text-align: center; font-size: 16px; font-weight: 600; } } .submit_quotes { padding: 12px; width: 100%; height: auto; min-height: 48px; background: #fff; border-radius: 4px; border: 1px solid #101828; color: #101828; text-align: center; font-size: 16px; font-weight: 600; &:hover { padding: 12px; width: 100%; height: auto; min-height: 48px; background: #fff; border-radius: 4px; border: 1px solid #101828; color: #101828; text-align: center; font-size: 16px; font-weight: 600; } } .cart_summary_secondary_btn_wrapper { color: #243dc6; font-size: 14px; font-weight: 400; } .coupon_code_text { color: #243dc6; font-size: 14px; font-weight: 400; } } } } } } // link styles .btn { &:hover { text-decoration: underline; } &.link { color: var(--_primary-400); } &.primary { padding: 12px 24px; background-color: var(--_primary-400); border-radius: 4px; color: var(--_base-white); font-size: 16px; font-weight: 600; } } // order status styles for buy for .order-confirmation { display: flex; flex-direction: column; border-color: var( --_ctm-mob-dn-or-wt-br-cr, var(--_ctm-tab-dn-or-wt-br-cr, var(--_ctm-dn-or-wt-br-cr)) ); border-style: var( --_ctm-mob-dn-or-wt-br-se, var(--_ctm-tab-dn-or-wt-br-se, var(--_ctm-dn-or-wt-br-se)) ); border-width: var( --_ctm-mob-dn-or-wt-br-wh, var(--_ctm-tab-dn-or-wt-br-wh, var(--_ctm-dn-or-wt-br-wh)) ); border-radius: var( --_ctm-mob-dn-or-wt-br-rs, var(--_ctm-tab-dn-or-wt-br-rs, var(--_ctm-dn-or-wt-br-rs)) ); gap: var( --_ctm-mob-dn-or-wt-im-gp, var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp)) ); padding: prepareMediaVariable(--_ctm-dn-or-wt-pg); width: 100%; height: 100%; // margin: 24px auto; color: #333; background-color: var( --_ctm-mob-dn-or-wt-bd-cr, var(--_ctm-tab-dn-or-wt-bd-cr, var(--_ctm-dn-or-wt-bd-cr)) ); .each-order { border: 1px solid var(--_gray-200); border-radius: 8px; padding: 16px; /* ───────────── Header ───────────── */ .order-header { color: var(--_ctm-mob-dn-dn-hr-cr, var(--_ctm-tab-dn-dn-hr-cr, var(--_ctm-dn-dn-hr-cr))); background-color: var( --_ctm-mob-dn-hr-cr-hr-wr-bd-cr, var(--_ctm-tab-dn-hr-cr-hr-wr-bd-cr, var(--_ctm-dn-hr-cr-hr-wr-bd-cr)) ); margin: var(--_ctm-mob-dn-dn-hr-mn, var(--_ctm-tab-dn-dn-hr-mn, var(--_ctm-dn-dn-hr-mn))); padding: var( --_ctm-mob-dn-hr-cr-hr-wr-pg, var(--_ctm-tab-dn-hr-cr-hr-wr-pg, var(--_ctm-dn-hr-cr-hr-wr-pg)) ); border-color: var( --_ctm-mob-dn-hr-cr-hr-wr-br-cr, var(--_ctm-tab-dn-hr-cr-hr-wr-br-cr, var(--_ctm-dn-hr-cr-hr-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-hr-cr-hr-wr-br-se, var(--_ctm-tab-dn-hr-cr-hr-wr-br-se, var(--_ctm-dn-hr-cr-hr-wr-br-se)) ); border-width: var( --_ctm-mob-dn-hr-cr-hr-wr-br-wh, var(--_ctm-tab-dn-hr-cr-hr-wr-br-wh, var(--_ctm-dn-hr-cr-hr-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-hr-cr-hr-wr-br-rs, var(--_ctm-tab-dn-hr-cr-hr-wr-br-rs, var(--_ctm-dn-hr-cr-hr-wr-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-hr-cr-hr-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-br, var(--_ctm-dn-hr-cr-hr-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-hr-cr-hr-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-hr-cr-hr-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); .user-info { display: flex; flex-direction: column; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--_gray-200); gap: var( --_ctm-mob-dn-hr-cr-hr-wr-im-gp, var(--_ctm-tab-dn-hr-cr-hr-wr-im-gp, var(--_ctm-dn-hr-cr-hr-wr-im-gp)) ); h3 { // font-size: 1.1rem; // margin: 0; // color: #1e293b; font-family: var( --_ctm-mob-dn-hr-cr-te-ft-fy, var(--_ctm-tab-dn-hr-cr-te-ft-fy, var(--_ctm-dn-hr-cr-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-hr-cr-te-tt-tm, var(--_ctm-tab-dn-hr-cr-te-tt-tm, var(--_ctm-dn-hr-cr-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-hr-cr-te-wd-wp, var(--_ctm-tab-dn-hr-cr-te-wd-wp, var(--_ctm-dn-hr-cr-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-hr-cr-te-wd-bk, var(--_ctm-tab-dn-hr-cr-te-wd-bk, var(--_ctm-dn-hr-cr-te-wd-bk)) ); // font-size: var( // --_ctm-mob-dn-hr-cr-te-ft-se, // var(--_ctm-tab-dn-hr-cr-te-ft-se, var(--_ctm-dn-hr-cr-te-ft-se)) // ); font-size: 20px; // color: var( // --_ctm-mob-dn-hr-cr-te-cr, // var(--_ctm-tab-dn-hr-cr-te-cr, var(--_ctm-dn-hr-cr-te-cr)) // ); color: var(--_gray-900); // font-weight: var( // --_ctm-mob-dn-hr-cr-te-ft-wt, // var(--_ctm-tab-dn-hr-cr-te-ft-wt, var(--_ctm-dn-hr-cr-te-ft-wt)) // ); font-weight: 700; text-decoration: var( --_ctm-mob-dn-hr-cr-te-ue, var(--_ctm-tab-dn-hr-cr-te-ue, var(--_ctm-dn-hr-cr-te-ue)) ); letter-spacing: var( --_ctm-mob-dn-hr-cr-te-lr-sg, var(--_ctm-tab-dn-hr-cr-te-lr-sg, var(--_ctm-dn-hr-cr-te-lr-sg)) ); line-height: var( --_ctm-mob-dn-hr-cr-te-le-ht, var(--_ctm-tab-dn-hr-cr-te-le-ht, var(--_ctm-dn-hr-cr-te-le-ht)) ); font-style: var( --_ctm-mob-dn-hr-cr-te-ft-se-ic, var(--_ctm-tab-dn-hr-cr-te-ft-se-ic, var(--_ctm-dn-hr-cr-te-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-hr-cr-te-tt-an, var(--_ctm-tab-dn-hr-cr-te-tt-an, var(--_ctm-dn-hr-cr-te-tt-an)) ); margin-bottom: 6px; span { margin-left: 6px; svg { path { stroke: #475467; } } } } .user-meta-list { display: flex; align-items: center; .meta-item { display: flex; flex-direction: row; align-items: center; padding: var( --_ctm-mob-dn-hr-cr-ee-ds-pg, var(--_ctm-tab-dn-hr-cr-ee-ds-pg, var(--_ctm-dn-hr-cr-ee-ds-pg)) ); // gap: 6px; .meta-icon { display: flex; svg { width: 18px; height: 18px; } } .meta-text { font-family: var( --_ctm-mob-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-tab-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-dn-hr-cr-ee-ds-ft-fy)) ); text-transform: var( --_ctm-mob-dn-hr-cr-ee-ds-tt-tm, var(--_ctm-tab-dn-hr-cr-ee-ds-tt-tm, var(--_ctm-dn-hr-cr-ee-ds-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-hr-cr-ee-ds-wd-wp, var(--_ctm-tab-dn-hr-cr-ee-ds-wd-wp, var(--_ctm-dn-hr-cr-ee-ds-wd-wp)) ); word-break: var( --_ctm-mob-dn-hr-cr-ee-ds-wd-bk, var(--_ctm-tab-dn-hr-cr-ee-ds-wd-bk, var(--_ctm-dn-hr-cr-ee-ds-wd-bk)) ); font-size: var( --_ctm-mob-dn-hr-cr-ee-ds-ft-se, var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se)) ); color: var( --_ctm-mob-dn-hr-cr-ee-ds-cr, var(--_ctm-tab-dn-hr-cr-ee-ds-cr, var(--_ctm-dn-hr-cr-ee-ds-cr)) ); font-weight: var( --_ctm-mob-dn-hr-cr-ee-ds-ft-wt, var(--_ctm-tab-dn-hr-cr-ee-ds-ft-wt, var(--_ctm-dn-hr-cr-ee-ds-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-hr-cr-ee-ds-ue, var(--_ctm-tab-dn-hr-cr-ee-ds-ue, var(--_ctm-dn-hr-cr-ee-ds-ue)) ); letter-spacing: var( --_ctm-mob-dn-hr-cr-ee-ds-lr-sg, var(--_ctm-tab-dn-hr-cr-ee-ds-lr-sg, var(--_ctm-dn-hr-cr-ee-ds-lr-sg)) ); line-height: var( --_ctm-mob-dn-hr-cr-ee-ds-le-ht, var(--_ctm-tab-dn-hr-cr-ee-ds-le-ht, var(--_ctm-dn-hr-cr-ee-ds-le-ht)) ); font-style: var( --_ctm-mob-dn-hr-cr-ee-ds-ft-se-ic, var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se-ic, var(--_ctm-dn-hr-cr-ee-ds-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-hr-cr-ee-ds-tt-an, var(--_ctm-tab-dn-hr-cr-ee-ds-tt-an, var(--_ctm-dn-hr-cr-ee-ds-tt-an)) ); } &:not(:first-child)::before { content: ""; display: inline-block; width: 5px; height: 5px; background: #d0d5dd; border-radius: 50%; } } } } } /* ─────────── Success Banner ─────────── */ .order-successful, .order-pending, .order-failed { display: flex; align-items: center; // background: #f0fdf4; // border-radius: 6px; // padding: 16px; // margin-bottom: 24px; background-color: #f6fef9; border-radius: 6px; border: 1px solid #d0d5dd; padding: 12px; margin-block: 16px; .check-icon { font-size: 28px; margin-right: 12px; } .success-text { display: flex; flex-direction: column; justify-content: center; gap: 8px; .success_toast_header { display: flex; gap: 6px; align-items: center; .success__dropdown__icon { display: flex; svg { width: 24px; height: 24px; path { stroke: #099250; fill: #fff; } } } h2 { color: #101828; font-size: 20px; font-weight: 600; line-height: 32px; } } p { color: #475467; font-size: 14px; font-weight: 400; line-height: 20px; } } } .order-failed { background-color: #fffbfa; border: 1px solid #fda29b; .success__dropdown__icon { svg path { stroke: var(--_error-700) !important; } } } .order-pending { background-color: #f5f6f9; border: 1px solid #c5d2fc; svg path { stroke: var(--_primary-700); } } .error_toast_message_wrapper { display: flex; justify-content: space-between; align-items: center; background-color: #fffbfa; border-radius: 6px; border: 1px solid #fda29b; padding: 12px; .error_toast_message_left_section { display: flex; flex-direction: column; gap: 8px; .error_toast_message_header { display: flex; gap: 8px; align-items: center; h2 { color: #101828; font-size: 24px; font-weight: 600; line-height: 32px; } .error__dropdown__icon { svg { width: 32px; height: 32px; path { stroke: #d92d20; fill: #ffffff; stroke-width: 0.8; } } } } p { color: #475467; font-size: 14px; font-weight: 400; line-height: 20px; } } .error_message_btn { background-color: #243dc6; color: #ffffff; border-radius: 6px; font-size: 16px; font-weight: 600; padding: 12px 24px; } } /* ──────────── Order Details ──────────── */ .order-details-wrapper { display: grid; grid-template-columns: 2fr 1fr; border-color: var( --_ctm-mob-dn-or-cr-br-cr, var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr)) ); border-style: var( --_ctm-mob-dn-or-cr-br-se, var(--_ctm-tab-dn-or-cr-br-se, var(--_ctm-dn-or-cr-br-se)) ); border-width: var( --_ctm-mob-dn-or-cr-br-wh, var(--_ctm-tab-dn-or-cr-br-wh, var(--_ctm-dn-or-cr-br-wh)) ); border-radius: var( --_ctm-mob-dn-or-cr-br-rs, var(--_ctm-tab-dn-or-cr-br-rs, var(--_ctm-dn-or-cr-br-rs)) ); gap: var( --_ctm-mob-dn-or-cr-im-gp, var(--_ctm-tab-dn-or-cr-im-gp, var(--_ctm-dn-or-cr-im-gp)) ); margin: var(--_ctm-mob-dn-or-cr-mn, var(--_ctm-tab-dn-or-cr-mn, var(--_ctm-dn-or-cr-mn))); padding: prepareMediaVariable(--_ctm-dn-or-cr-pg); background-color: var( --_ctm-mob-dn-or-cr-bd-cr, var(--_ctm-tab-dn-or-cr-bd-cr, var(--_ctm-dn-or-cr-bd-cr)) ); box-shadow: var( --_ctm-mob-dn-or-cr-sw-ae, var(--_ctm-tab-dn-or-cr-sw-ae, var(--_ctm-dn-or-cr-sw-ae)) ) var( --_ctm-mob-dn--or-cr-sw-br, var(--_ctm-tab-dn--or-cr-sw-br, var(--_ctm-dn--or-cr-sw-br)) ) var( --_ctm-mob-dn-or-cr-sw-sd, var(--_ctm-tab-dn-or-cr-sw-sd, var(--_ctm-dn-or-cr-sw-sd)) ) var( --_ctm-mob-dn-or-cr-sw-cr, var(--_ctm-tab-dn-or-cr-sw-cr, var(--_ctm-dn-or-cr-sw-cr)) ); } .order-info-section { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-or-io-or-io-cr-im-gp, var(--_ctm-tab-dn-or-io-or-io-cr-im-gp, var(--_ctm-dn-or-io-or-io-cr-im-gp)) ); margin: var( --_ctm-mob-dn-or-io-or-io-cr-mn, var(--_ctm-tab-dn-or-io-or-io-cr-mn, var(--_ctm-dn-or-io-or-io-cr-mn)) ); padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-pg); background-color: var( --_ctm-mob-dn-or-io-or-io-cr-bd-cr, var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr)) ); .order_info_header { font-family: var( --_ctm-mob-dn-or-io-or-io-hr-ft-fy, var(--_ctm-tab-dn-or-io-or-io-hr-ft-fy, var(--_ctm-dn-or-io-or-io-hr-ft-fy)) ); text-transform: var( --_ctm-mob-dn-or-io-or-io-hr-tt-tm, var(--_ctm-tab-dn-or-io-or-io-hr-tt-tm, var(--_ctm-dn-or-io-or-io-hr-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-or-io-or-io-hr-wd-wp, var(--_ctm-tab-dn-or-io-or-io-hr-wd-wp, var(--_ctm-dn-or-io-or-io-hr-wd-wp)) ); word-break: var( --_ctm-mob-dn-or-io-or-io-hr-wd-bk, var(--_ctm-tab-dn-or-io-or-io-hr-wd-bk, var(--_ctm-dn-or-io-or-io-hr-wd-bk)) ); font-size: var( --_ctm-mob-dn-or-io-or-io-hr-ft-se, var(--_ctm-tab-dn-or-io-or-io-hr-ft-se, var(--_ctm-dn-or-io-or-io-hr-ft-se)) ); color: var( --_ctm-mob-dn-or-io-or-io-hr-cr, var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr)) ); font-weight: var( --_ctm-mob-dn-or-io-or-io-hr-ft-wt, var(--_ctm-tab-dn-or-io-or-io-hr-ft-wt, var(--_ctm-dn-or-io-or-io-hr-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-or-io-or-io-hr-ue, var(--_ctm-tab-dn-or-io-or-io-hr-ue, var(--_ctm-dn-or-io-or-io-hr-ue)) ); letter-spacing: var( --_ctm-mob-dn-or-io-or-io-hr-lr-sg, var(--_ctm-tab-dn-or-io-or-io-hr-lr-sg, var(--_ctm-dn-or-io-or-io-hr-lr-sg)) ); line-height: var( --_ctm-mob-dn-or-io-or-io-hr-le-ht, var(--_ctm-tab-dn-or-io-or-io-hr-le-ht, var(--_ctm-dn-or-io-or-io-hr-le-ht)) ); font-style: var( --_ctm-mob-dn-or-io-or-io-hr-ft-se-ic, var(--_ctm-tab-dn-or-io-or-io-hr-ft-se-ic, var(--_ctm-dn-or-io-or-io-hr-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-or-io-or-io-hr-tt-an, var(--_ctm-tab-dn-or-io-or-io-hr-tt-an, var(--_ctm-dn-or-io-or-io-hr-tt-an)) ); padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-pg); background-color: var( --_ctm-mob-dn-or-io-or-io-hr-bd-cr, var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr)) ); border-color: var( --_ctm-mob-dn-or-io-or-io-hr-br-cr, var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr)) ); border-style: var( --_ctm-mob-dn-or-io-or-io-hr-br-se, var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se)) ); border-width: var( --_ctm-mob-dn-or-io-or-io-hr-br-wh, var(--_ctm-tab-dn-or-io-or-io-hr-br-wh, var(--_ctm-dn-or-io-or-io-hr-br-wh)) ); border-radius: var( --_ctm-mob-dn-or-io-or-io-hr-br-rs, var(--_ctm-tab-dn-or-io-or-io-hr-br-rs, var(--_ctm-dn-or-io-or-io-hr-br-rs)) ); span { font-size: 14px; font-weight: 600; color: var(--_gray-600); } } } .quick-actions-section { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-qk-as-cr-im-gp, var(--_ctm-tab-dn-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-cr-im-gp)) ); padding: prepareMediaVariable(--_ctm-dn-qk-as-cr-pg); background-color: var( --_ctm-mob-dn-qk-as-cr-bd-cr, var(--_ctm-tab-dn-qk-as-cr-bd-cr, var(--_ctm-dn-qk-as-cr-bd-cr)) ); border-color: var( --_ctm-mob-dn-qk-as-cr-br-cr, var(--_ctm-tab-dn-qk-as-cr-br-cr, var(--_ctm-dn-qk-as-cr-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-cr-br-se, var(--_ctm-tab-dn-qk-as-cr-br-se, var(--_ctm-dn-qk-as-cr-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-cr-br-wh, var(--_ctm-tab-dn-qk-as-cr-br-wh, var(--_ctm-dn-qk-as-cr-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-cr-br-rs, var(--_ctm-tab-dn-qk-as-cr-br-rs, var(--_ctm-dn-qk-as-cr-br-rs)) ); .quick_actions_header { padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-pg); background-color: var( --_ctm-mob-dn-qk-as-qk-hr-bd-cr, var(--_ctm-tab-dn-qk-as-qk-hr-bd-cr, var(--_ctm-dn-qk-as-qk-hr-bd-cr)) ); border-color: var( --_ctm-mob-dn-qk-as-qk-hr-br-cr, var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-qk-hr-br-se, var(--_ctm-tab-dn-qk-as-qk-hr-br-se, var(--_ctm-dn-qk-as-qk-hr-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-qk-hr-br-wh, var(--_ctm-tab-dn-qk-as-qk-hr-br-wh, var(--_ctm-dn-qk-as-qk-hr-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-qk-hr-br-rs, var(--_ctm-tab-dn-qk-as-qk-hr-br-rs, var(--_ctm-dn-qk-as-qk-hr-br-rs)) ); span { // font-size: 14px; // font-weight: 600; // color: var(--_gray-600); font-family: var( --_ctm-mob-dn-qk-as-qk-hr-ft-fy, var(--_ctm-tab-dn-qk-as-qk-hr-ft-fy, var(--_ctm-dn-qk-as-qk-hr-ft-fy)) ); text-transform: var( --_ctm-mob-dn-qk-as-qk-hr-tt-tm, var(--_ctm-tab-dn-qk-as-qk-hr-tt-tm, var(--_ctm-dn-qk-as-qk-hr-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-qk-as-qk-hr-wd-wp, var(--_ctm-tab-dn-qk-as-qk-hr-wd-wp, var(--_ctm-dn-qk-as-qk-hr-wd-wp)) ); word-break: var( --_ctm-mob-dn-qk-as-qk-hr-wd-bk, var(--_ctm-tab-dn-qk-as-qk-hr-wd-bk, var(--_ctm-dn-qk-as-qk-hr-wd-bk)) ); font-size: var( --_ctm-mob-dn-qk-as-qk-hr-ft-se, var(--_ctm-tab-dn-qk-as-qk-hr-ft-se, var(--_ctm-dn-qk-as-qk-hr-ft-se)) ); color: var( --_ctm-mob-dn-qk-as-qk-hr-cr, var(--_ctm-tab-dn-qk-as-qk-hr-cr, var(--_ctm-dn-qk-as-qk-hr-cr)) ); font-weight: var( --_ctm-mob-dn-qk-as-qk-hr-ft-wt, var(--_ctm-tab-dn-qk-as-qk-hr-ft-wt, var(--_ctm-dn-qk-as-qk-hr-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-qk-as-qk-hr-ue, var(--_ctm-tab-dn-qk-as-qk-hr-ue, var(--_ctm-dn-qk-as-qk-hr-ue)) ); letter-spacing: var( --_ctm-mob-dn-qk-as-qk-hr-lr-sg, var(--_ctm-tab-dn-qk-as-qk-hr-lr-sg, var(--_ctm-dn-qk-as-qk-hr-lr-sg)) ); line-height: var( --_ctm-mob-dn-qk-as-qk-hr-le-ht, var(--_ctm-tab-dn-qk-as-qk-hr-le-ht, var(--_ctm-dn-qk-as-qk-hr-le-ht)) ); font-style: var( --_ctm-mob-dn-qk-as-qk-hr-ft-se-ic, var(--_ctm-tab-dn-qk-as-qk-hr-ft-se-ic, var(--_ctm-dn-qk-as-qk-hr-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-qk-as-qk-hr-tt-an, var(--_ctm-tab-dn-qk-as-qk-hr-tt-an, var(--_ctm-dn-qk-as-qk-hr-tt-an)) ); } } } .order-info { display: flex; flex-direction: column; /* space between the two rows */ background-color: var( --_ctm-mob-dn-or-io-or-io-wr-bd-cr, var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr)) ); margin: var( --_ctm-mob-dn-or-io-or-io-wr-mn, var(--_ctm-tab-dn-or-io-or-io-wr-mn, var(--_ctm-dn-or-io-or-io-wr-mn)) ); padding: var( --_ctm-mob-dn-or-io-or-io-wr-pg, var(--_ctm-tab-dn-or-io-or-io-wr-pg, var(--_ctm-dn-or-io-or-io-wr-pg)) ); border-color: var( --_ctm-mob-dn-or-io-or-io-wr-br-cr, var(--_ctm-tab-dn-or-io-or-io-wr-br-cr, var(--_ctm-dn-or-io-or-io-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-or-io-or-io-wr-br-se, var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se)) ); border-width: var( --_ctm-mob-dn-or-io-or-io-wr-br-wh, var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-or-io-or-io-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-br, var(--_ctm-dn-or-io-or-io-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-or-io-or-io-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-or-io-or-io-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); .order-row { display: grid; gap: 12px 24px; /* 12px vertical, 24px horizontal */ /* First row: two equal columns + bottom border */ &:first-child { grid-template-columns: repeat(2, 1fr); border-bottom: 1px dashed var(--_gray-400); padding-bottom: 24px; } /* Second row: three equal columns */ &:nth-child(2) { grid-template-columns: repeat(3, 1fr); margin-top: 24px; } /* Each individual info‐cell styling */ > div { strong { display: block; // font-size: 14px; // color: var(--_gray-500); // line-height: 20px; margin-bottom: 4px; // font-weight: 400; font-family: var( --_ctm-mob-dn-or-io-or-ne-ft-fy, var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy)) ); text-transform: var( --_ctm-mob-dn-or-io-or-ne-tt-tm, var(--_ctm-tab-dn-or-io-or-ne-tt-tm, var(--_ctm-dn-or-io-or-ne-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-or-io-or-ne-wd-wp, var(--_ctm-tab-dn-or-io-or-ne-wd-wp, var(--_ctm-dn-or-io-or-ne-wd-wp)) ); word-break: var( --_ctm-mob-dn-or-io-or-ne-wd-bk, var(--_ctm-tab-dn-or-io-or-ne-wd-bk, var(--_ctm-dn-or-io-or-ne-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-or-io-or-ne-ft-se, var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se)) ); color: var( --_ctm-mob-dn-or-io-or-ne-cr, var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr)) ); font-weight: var( --_ctm-mob-dn-or-io-or-ne-ft-wt, var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-or-io-or-ne-ue, var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue)) ); letter-spacing: var( --_ctm-mob-dn-or-io-or-ne-lr-sg, var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg)) ); line-height: var( --_ctm-mob-dn-or-io-or-ne-le-ht, var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht)) ); font-style: var( --_ctm-mob-dn-or-io-or-ne-ft-se-ic, var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-or-io-or-ne-tt-an, var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an)) ); } p { margin: 0; margin-bottom: 4px; // font-size: 20px; // font-weight: 700; // color: var(--_gray-900); // line-height: 30px; font-family: var( --_ctm-mob-dn-or-io-or-id-ft-fy, var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy)) ); text-transform: var( --_ctm-mob-dn-or-io-or-id-tt-tm, var(--_ctm-tab-dn-or-io-or-id-tt-tm, var(--_ctm-dn-or-io-or-id-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-or-io-or-id-wd-wp, var(--_ctm-tab-dn-or-io-or-id-wd-wp, var(--_ctm-dn-or-io-or-id-wd-wp)) ); word-break: var( --_ctm-mob-dn-or-io-or-id-wd-bk, var(--_ctm-tab-dn-or-io-or-id-wd-bk, var(--_ctm-dn-or-io-or-id-wd-bk)) ); font-size: var( --_ctm-mob-dn-or-io-or-id-ft-se, var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se)) ); color: var( --_ctm-mob-dn-or-io-or-id-cr, var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr)) ); font-weight: var( --_ctm-mob-dn-or-io-or-id-ft-wt, var(--_ctm-tab-dn-or-io-or-id-ft-wt, var(--_ctm-dn-or-io-or-id-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-or-io-or-id-ue, var(--_ctm-tab-dn-or-io-or-id-ue, var(--_ctm-dn-or-io-or-id-ue)) ); letter-spacing: var( --_ctm-mob-dn-or-io-or-id-lr-sg, var(--_ctm-tab-dn-or-io-or-id-lr-sg, var(--_ctm-dn-or-io-or-id-lr-sg)) ); line-height: var( --_ctm-mob-dn-or-io-or-id-le-ht, var(--_ctm-tab-dn-or-io-or-id-le-ht, var(--_ctm-dn-or-io-or-id-le-ht)) ); font-style: var( --_ctm-mob-dn-or-io-or-id-ft-se-ic, var(--_ctm-tab-dn-or-io-or-id-ft-se-ic, var(--_ctm-dn-or-io-or-id-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-or-io-or-id-tt-an, var(--_ctm-tab-dn-or-io-or-id-tt-an, var(--_ctm-dn-or-io-or-id-tt-an)) ); } .delivery_address { font-size: 14px; font-weight: 400; color: var(--_gray-400); line-height: 20px; } .shipping-type { font-size: 14px; font-weight: 400; color: var(--_gray-900); line-height: 20px; } .status { margin-left: 6px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 18px; background-color: #eff8ff; color: #0040c1; display: inline-flex; align-items: center; gap: 6px; &::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #0040c1; } // &.success { // background-color: var(--_success-200); // &::before { // background-color: var(--_success-700); // } // } // &.failed { // background-color: var(--_error-100); // &::before { // background-color: var(--_error-700); // } // } } .link-button { color: #243dc6; font-size: 14px; font-weight: 400; line-height: 20px; } .submitted { font-size: 12px; font-weight: 500; line-height: 18px; background: #eff8ff; color: #0040c1; display: inline-block; height: 22px; &::before { content: ""; display: inline-block; width: 6px; height: 6px; background-color: #0040c1; border-radius: 50%; margin-right: 6px; vertical-align: middle; margin-top: -1px; } } .order-date { // font-size: 14px; // font-weight: 400; // color: var(--_gray-400); // line-height: 20px; font-family: var( --_ctm-mob-dn-or-io-or-de-ft-fy, var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy)) ); text-transform: var( --_ctm-mob-dn-or-io-or-de-tt-tm, var(--_ctm-tab-dn-or-io-or-de-tt-tm, var(--_ctm-dn-or-io-or-de-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-or-io-or-de-wd-wp, var(--_ctm-tab-dn-or-io-or-de-wd-wp, var(--_ctm-dn-or-io-or-de-wd-wp)) ); word-break: var( --_ctm-mob-dn-or-io-or-de-wd-bk, var(--_ctm-tab-dn-or-io-or-de-wd-bk, var(--_ctm-dn-or-io-or-de-wd-bk)) ); font-size: var( --_ctm-mob-dn-or-io-or-de-ft-se, var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se)) ); color: var( --_ctm-mob-dn-or-io-or-de-cr, var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr)) ); font-weight: var( --_ctm-mob-dn-or-io-or-de-ft-wt, var(--_ctm-tab-dn-or-io-or-de-ft-wt, var(--_ctm-dn-or-io-or-de-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-or-io-or-de-ue, var(--_ctm-tab-dn-or-io-or-de-ue, var(--_ctm-dn-or-io-or-de-ue)) ); letter-spacing: var( --_ctm-mob-dn-or-io-or-de-lr-sg, var(--_ctm-tab-dn-or-io-or-de-lr-sg, var(--_ctm-dn-or-io-or-de-lr-sg)) ); line-height: var( --_ctm-mob-dn-or-io-or-de-le-ht, var(--_ctm-tab-dn-or-io-or-de-le-ht, var(--_ctm-dn-or-io-or-de-le-ht)) ); font-style: var( --_ctm-mob-dn-or-io-or-de-ft-se-ic, var(--_ctm-tab-dn-or-io-or-de-ft-se-ic, var(--_ctm-dn-or-io-or-de-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-or-io-or-de-tt-an, var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an)) ); } .inclusive-tax { margin-left: 4px; font-size: 0.7rem; color: #6b7280; } } } } /* ───────── Quick Actions ───────── */ .quick-actions { display: flex; flex-direction: column; gap: 8px; background-color: var(--_ctm-dn-dn-qk-as-bd-cr); margin: var(--_ctm-dn-dn-qk-as-mn); padding: var(--_ctm-dn-dn-qk-as-pg); border-color: var(--_ctm-dn-dn-qk-as-br-cr); border-style: var(--_ctm-dn-dn-qk-as-br-se); border-width: var(--_ctm-dn-dn-qk-as-br-wh); border-radius: var(--_ctm-dn-dn-qk-as-br-rs); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-dn-qk-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-br, var(--_ctm-dn-dn-qk-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-dn-qk-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-dn-qk-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); .action-button { width: fit-content; margin: var( --_ctm-mob-dn-qk-as-as-mn, var(--_ctm-tab-dn-qk-as-as-mn, var(--_ctm-dn-qk-as-as-mn)) ); padding: var( --_ctm-mob-dn-qk-as-as-pg, var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg)) ); border-color: var( --_ctm-mob-dn-qk-as-as-br-cr, var(--_ctm-tab-dn-qk-as-as-br-cr, var(--_ctm-dn-qk-as-as-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-as-br-se, var(--_ctm-tab-dn-qk-as-as-br-se, var(--_ctm-dn-qk-as-as-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-as-br-wh, var(--_ctm-tab-dn-qk-as-as-br-wh, var(--_ctm-dn-qk-as-as-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-as-br-rs, var(--_ctm-mob-dn-qk-as-as-br-rs, var(--_ctm-mob-dn-qk-as-as-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-qk-as-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-br, var(--_ctm-dn-qk-as-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-qk-as-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-qk-as-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); background-color: var( --_ctm-mob-dn-qk-as-as-bd-cr, var(--_ctm-tab-dn-qk-as-as-bd-cr, var(--_ctm-dn-qk-as-as-bd-cr)) ); font-family: var( --_ctm-mob-dn-qk-as-as-ft-fy, var(--_ctm-tab-dn-qk-as-as-ft-fy, var(--_ctm-dn-qk-as-as-ft-fy)) ); text-transform: var( --_ctm-mob-dn-qk-as-as-tt-tm, var(--_ctm-tab-dn-qk-as-as-tt-tm, var(--_ctm-dn-qk-as-as-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-qk-as-as-wd-wp, var(--_ctm-tab-dn-qk-as-as-wd-wp, var(--_ctm-dn-qk-as-as-wd-wp)) ); word-break: var( --_ctm-mob-dn-qk-as-as-wd-bk, var(--_ctm-tab-dn-qk-as-as-wd-bk, var(--_ctm-dn-qk-as-as-wd-bk)) ); font-size: var( --_ctm-mob-dn-qk-as-as-ft-se, var(--_ctm-tab-dn-qk-as-as-ft-se, var(--_ctm-dn-qk-as-as-ft-se)) ); color: var( --_ctm-mob-dn-qk-as-as-cr, var(--_ctm-tab-dn-qk-as-as-cr, var(--_ctm-dn-qk-as-as-cr)) ); font-weight: var( --_ctm-mob-dn-qk-as-as-ft-wt, var(--_ctm-tab-dn-qk-as-as-ft-wt, var(--_ctm-dn-qk-as-as-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-qk-as-as-ue, var(--_ctm-tab-dn-qk-as-as-ue, var(--_ctm-dn-qk-as-as-ue)) ); letter-spacing: var( --_ctm-mob-dn-qk-as-as-lr-sg, var(--_ctm-tab-dn-qk-as-as-lr-sg, var(--_ctm-dn-qk-as-as-lr-sg)) ); line-height: var( --_ctm-mob-dn-qk-as-as-le-ht, var(--_ctm-tab-dn-qk-as-as-le-ht, var(--_ctm-dn-qk-as-as-le-ht)) ); font-style: var( --_ctm-mob-dn-qk-as-as-ft-se-ic, var(--_ctm-tab-dn-qk-as-as-ft-se-ic, var(--_ctm-dn-qk-as-as-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-qk-as-as-tt-an, var(--_ctm-tab-dn-qk-as-as-tt-an, var(--_ctm-dn-qk-as-as-tt-an)) ); padding: var( --_ctm-mob-dn-qk-as-as-pg, var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg)) ); cursor: pointer; // text-align: start; &:hover { color: #0d60e5; background-color: var(--_gray-100); border-radius: 6px; } } } /* ───────── Cart Items ───────── */ .cart-items { background-color: var( --_ctm-mob-dn-dn-ct-is-bd-cr, var(--_ctm-tab-dn-dn-ct-is-bd-cr, var(--_ctm-dn-dn-ct-is-bd-cr)) ); margin: var( --_ctm-mob-dn-dn-ct-is-mn, var(--_ctm-tab-dn-dn-ct-is-mn, var(--_ctm-dn-dn-ct-is-mn)) ); padding: var( --_ctm-mob-dn-dn-ct-is-pg, var(--_ctm-tab-dn-dn-ct-is-pg, var(--_ctm-dn-dn-ct-is-pg)) ); border-color: var( --_ctm-mob-dn-dn-ct-is-br-cr, var(--_ctm-tab-dn-dn-ct-is-br-cr, var(--_ctm-dn-dn-ct-is-br-cr)) ); border-style: var( --_ctm-mob-dn-dn-ct-is-br-se, var(--_ctm-tab-dn-dn-ct-is-br-se, var(--_ctm-dn-dn-ct-is-br-se)) ); border-width: var( --_ctm-mob-dn-dn-ct-is-br-wh, var(--_ctm-tab-dn-dn-ct-is-br-wh, var(--_ctm-dn-dn-ct-is-br-wh)) ); border-radius: var( --_ctm-mob-dn-dn-ct-is-br-rs, var(--_ctm-tab-dn-dn-ct-is-br-rs, var(--_ctm-dn-dn-ct-is-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-dn-ct-is-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-br, var(--_ctm-dn-dn-ct-is-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-dn-ct-is-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd)) ) var( --_ctm-mob-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-dn-ct-is-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); h3 { // font-size: 14px; // color: #667085; margin-bottom: 24px; // line-height: 20px; // font-weight: 400; padding: var( --_ctm-mob-dn-pt-wt-pt-te-pg, var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-te-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-te-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-te-tt-tm, var(--_ctm-dn-pt-wt-pt-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-te-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-te-wd-wp, var(--_ctm-dn-pt-wt-pt-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-te-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-te-wd-bk, var(--_ctm-dn-pt-wt-pt-te-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-te-ft-se, var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-te-cr, var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-te-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-te-ue, var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-te-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-te-le-ht, var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-te-tt-an, var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an)) ); } .items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp)) ); background-color: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr)) ); margin: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-dn-pt-wt-pt-wt-wr-mn)) ); padding: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg)) ); border-color: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se)) ); border-width: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs)) ); margin-bottom: 24px; } .item-card { // border-radius: 6px; gap: var( --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp)) ); background-color: var( --_ctm-mob-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-im-bd-cr)) ); margin: var( --_ctm-mob-dn-pt-wt-pt-wt-im-mn, var(--_ctm-tab-dn-pt-wt-pt-wt-im-mn, var(--_ctm-dn-pt-wt-pt-wt-im-mn)) ); padding: var( --_ctm-mob-dn-pt-wt-pt-wt-im-pg, var(--_ctm-tab-dn-pt-wt-pt-wt-im-pg, var(--_ctm-dn-pt-wt-pt-wt-im-pg)) ); border-color: var( --_ctm-mob-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-dn-pt-wt-pt-wt-im-br-cr)) ); border-style: var( --_ctm-mob-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-dn-pt-wt-pt-wt-im-br-se)) ); border-width: var( --_ctm-mob-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-dn-pt-wt-pt-wt-im-br-wh)) ); border-radius: var( --_ctm-mob-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-dn-pt-wt-pt-wt-im-br-rs)) ); display: flex; align-items: flex-start; img { width: 69px; height: 80px; object-fit: cover; // border-radius: 4px; // margin-right: 12px; gap: var( --_ctm-mob-dn-pt-wt-pt-ie-im-gp, var(--_ctm-tab-dn-pt-wt-pt-ie-im-gp, var(--_ctm-dn-pt-wt-pt-ie-im-gp)) ); background-color: var( --_ctm-mob-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr)) ); margin: var( --_ctm-mob-dn-pt-wt-pt-ie-mn, var(--_ctm-tab-dn-pt-wt-pt-ie-mn, var(--_ctm-dn-pt-wt-pt-ie-mn)) ); padding: var( --_ctm-mob-dn-pt-wt-pt-ie-pg, var(--_ctm-tab-dn-pt-wt-pt-ie-pg, var(--_ctm-dn-pt-wt-pt-ie-pg)) ); border-color: var( --_ctm-mob-dn-pt-wt-pt-ie-br-cr, var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr)) ); border-style: var( --_ctm-mob-dn-pt-wt-pt-ie-br-se, var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se)) ); border-width: var( --_ctm-mob-dn-pt-wt-pt-ie-br-wh, var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh)) ); border-radius: var( --_ctm-mob-dn-pt-wt-pt-ie-br-rs, var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs)) ); display: flex; align-items: flex-start; } .item-details { flex: 1; .item-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px; // font-size: 14px; // font-weight: 600; // color: var(--_gray-900); // line-height: 20px; padding: var( --_ctm-mob-dn-pt-wt-pt-ne-pg, var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ne-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-ne-tt-tm, var(--_ctm-dn-pt-wt-pt-ne-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ne-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-ne-wd-wp, var(--_ctm-dn-pt-wt-pt-ne-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ne-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-ne-wd-bk, var(--_ctm-dn-pt-wt-pt-ne-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-wt-pt-ne-ft-se, var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-ne-cr, var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ne-ue, var(--_ctm-tab-dn-pt-wt-pt-ne-ue, var(--_ctm-dn-pt-wt-pt-ne-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ne-le-ht, var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ne-tt-an, var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an)) ); } .item-specs { padding: var( --_ctm-mob-dn-pt-wt-pt-ce-pg, var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ce-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-ce-tt-tm, var(--_ctm-dn-pt-wt-pt-ce-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ce-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-ce-wd-wp, var(--_ctm-dn-pt-wt-pt-ce-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ce-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-ce-wd-bk, var(--_ctm-dn-pt-wt-pt-ce-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ce-ft-se, var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-ce-cr, var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ce-ue, var(--_ctm-tab-dn-pt-wt-pt-ce-ue, var(--_ctm-dn-pt-wt-pt-ce-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ce-le-ht, var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ce-tt-an, var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an)) ); } .item-qty { padding: var( --_ctm-mob-dn-pt-wt-pt-qy-pg, var(--_ctm-tab-dn-pt-wt-pt-qy-pg, var(--_ctm-dn-pt-wt-pt-qy-pg)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-tm, var(--_ctm-dn-pt-wt-pt-qy-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-wp, var(--_ctm-dn-pt-wt-pt-qy-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-bk, var(--_ctm-dn-pt-wt-pt-qy-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-qy-cr, var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-qy-ue, var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-qy-le-ht, var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-an, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an)) ); span { font-family: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-tm-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-tm-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-tm-dc)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-wp-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-wp-dc, var(--_ctm-dn-pt-wt-pt-qy-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-qy-wd-bk-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-wd-bk-dc, var(--_ctm-dn-pt-wt-pt-qy-wd-bk-dc)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc)) ); color: var( --_ctm-mob-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc, var( --_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc)) ); } } .estimated-delivery { margin: 0; // font-size: 12px; // color: var(--_gray-600); // line-height: 18px; padding: var( --_ctm-mob-dn-pt-wt-pt-ed-de-pg, var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg, var(--_ctm-dn-pt-wt-pt-ed-de-pg)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-tm, var(--_ctm-dn-pt-wt-pt-ed-de-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr, var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an)) ); } .delivery-date { margin: 0; padding: var( --_ctm-mob-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-pg-dc)) ); font-family: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-tm-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-tm-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-wp-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-wp-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-wp-dc)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-ed-de-wd-bk-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-wd-bk-dc, var(--_ctm-dn-pt-wt-pt-ed-de-wd-bk-dc)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc)) ); color: var( --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var( --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc) ) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc)) ); } } .item-price { // font-size: 0.85rem; // font-weight: 600; // color: #1e293b; font-family: var( --_ctm-mob-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy)) ); text-transform: var( --_ctm-mob-dn-pt-wt-pt-pe-tt-tm, var(--_ctm-tab-dn-pt-wt-pt-pe-tt-tm, var(--_ctm-dn-pt-wt-pt-pe-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-pt-wt-pt-pe-wd-wp, var(--_ctm-tab-dn-pt-wt-pt-pe-wd-wp, var(--_ctm-dn-pt-wt-pt-pe-wd-wp)) ); word-break: var( --_ctm-mob-dn-pt-wt-pt-pe-wd-bk, var(--_ctm-tab-dn-pt-wt-pt-pe-wd-bk, var(--_ctm-dn-pt-wt-pt-pe-wd-bk)) ); font-size: var( --_ctm-mob-dn-pt-wt-pt-pe-ft-se, var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se)) ); color: var( --_ctm-mob-dn-pt-wt-pt-pe-cr, var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr)) ); font-weight: var( --_ctm-mob-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-pt-wt-pt-pe-ue, var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue)) ); letter-spacing: var( --_ctm-mob-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-wt-pt-pe-le-ht, var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht)) ); font-style: var( --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-wt-pt-pe-tt-an, var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an)) ); margin-left: 12px; } } .show-more-wrapper { margin: 32px 16px 16px 0px; button { padding: 12px 16px; color: var(--_primary-400); font-weight: 600; border-radius: 6px; &:hover { background-color: var(--_primary-25); } } } } /* ───────── Order Attributes ───────── */ .order-attributes { border-top: 1px solid #eaecf0; padding-top: 24px; h4 { font-size: 14px; font-weight: 400; color: var(--_gray-500); line-height: 20px; } p { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--_gray-900); } } /* ───────── Responsive ───────── */ @media (max-width: 768px) { .order-details-wrapper { grid-template-columns: 1fr; } .items-grid { grid-template-columns: 1fr; } } } } } }