@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $overflowSelector: ".flex__overflow"; $defaultValues: ( --_column-count-two: getListOfResponsive(2, 1), --_column-count-three: getListOfResponsive(3, 1, 2), --_column-count: getListOfResponsive(3, 2, 2), ); [data-div-type="element"] { &[data-element-type="orderStatus"] { // width: var( // --_ctm-mob-ele-nw-wh-st-mx, // var( // --_ctm-tab-ele-nw-wh-st-mx, // var(--_sf-el-wh-st-mx, calc(1% * 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))); // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important; // aspect-ratio: var( // --_ctm-mob-aspect-ratio, // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio)) // ); position: relative; & > .wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: prepareMediaVariable(--_ctm-lt-mn-ht); } .order-confirmation { display: flex; flex-direction: column; padding: prepareMediaVariable(--_ctm-dn-or-wt-pg); width: 100%; height: 100%; color: var(--_gray-600); 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)) ); 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)) ); @include prepareMediaQueries($defaultValues); box-shadow: var( --_show-shadow, var(--_ctm-mob-dn-or-wt-sw-ae, var(--_ctm-tab-dn-or-wt-sw-ae, var(--_ctm-dn-or-wt-sw-ae))) var(--_ctm-mob-dn-or-wt-sw-br, var(--_ctm-tab-dn-or-wt-sw-br, var(--_ctm-dn-or-wt-sw-br))) var(--_ctm-mob-dn-or-wt-sw-sd, var(--_ctm-tab-dn-or-wt-sw-sd, var(--_ctm-dn-or-wt-sw-sd))) var(--_ctm-mob-dn-or-wt-sw-cr, var(--_ctm-tab-dn-or-wt-sw-cr, var(--_ctm-dn-or-wt-sw-cr))) ); .each-order { display: flex; flex-direction: column; gap: prepareMediaVariable(--_ctm-dn-or-wt-im-gp); // 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)) ); .user-info { display: flex; flex-direction: column; padding-bottom: 16px; margin-bottom: 24px; 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)) ); // 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-hr-cr-te-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-hr-cr-te-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-hr-cr-te-wd-bk); margin-bottom: 6px; span { margin-left: 6px; svg { path { stroke: #475467; } } } } .user-meta-list { display: flex; align-items: center; .meta-item { display: flex; gap: 6px; 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)) ); // 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)) // ); font-size: 14px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-wd-bk); padding-right: 7px; } &:not(:first-child)::before { content: ""; display: inline-block; width: 5px; height: 5px; background: #d0d5dd; border-radius: 50%; margin-right: 2px; } } } } } /* ─────────── 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-bottom: 24px; .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: var(--_thm-ty-h1-tt-cr); font-size: 20px; font-weight: 600; line-height: 32px; } } p { color: var(--_thm-ty-p2-tt-cr); font-size: 14px; font-weight: 400; line-height: 20px; word-break: break-word; } } } .order_success_loading_container { display: flex; align-items: center; padding: 12px; margin-bottom: 24px; border-radius: 6px; border: 1px solid var(--_gray-50); background-color: var(--_gray-100); .success-text { display: flex; flex-direction: column; justify-content: center; gap: 8px; .success_toast_header { display: flex; gap: 6px; align-items: center; } } } .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; grid-template-columns: repeat(var(--_column-count-two, 2), 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-wr-im-gp, var(--_ctm-tab-dn-or-io-or-io-wr-im-gp, var(--_ctm-dn-or-io-or-io-wr-im-gp)) ); padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-wr-pg); 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)) ); border-color: prepareMediaVariable(--_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-tab-dn-or-io-or-io-wr-br-rs, var(--_ctm-dn-or-io-or-io-wr-br-rs)) ); .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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-wd-bk); // Order Info > Order Info Header > Text Overflow. `textOverflow` is a // `controls` property, so the renderer adds the class and publishes the // line count rather than emitting a variable for it. &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } 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-qk-as-wr-im-gp, var(--_ctm-tab-dn-qk-as-qk-as-wr-im-gp, var(--_ctm-dn-qk-as-qk-as-wr-im-gp)) ); padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-wr-pg); background-color: var( --_ctm-mob-dn-qk-as-qk-as-wr-bd-cr, var(--_ctm-tab-dn-qk-as-qk-as-wr-bd-cr, var(--_ctm-dn-qk-as-qk-as-wr-bd-cr)) ); border-color: var( --_ctm-mob-dn-qk-as-qk-as-wr-br-cr, var(--_ctm-tab-dn-qk-as-qk-as-wr-br-cr, var(--_ctm-dn-qk-as-qk-as-wr-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-qk-as-wr-br-se, var(--_ctm-tab-dn-qk-as-qk-as-wr-br-se, var(--_ctm-dn-qk-as-qk-as-wr-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-qk-as-wr-br-wh, var(--_ctm-tab-dn-qk-as-qk-as-wr-br-wh, var(--_ctm-dn-qk-as-qk-as-wr-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-qk-as-wr-br-rs, var(--_ctm-tab-dn-qk-as-qk-as-wr-br-rs, var(--_ctm-dn-qk-as-qk-as-wr-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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } } } .order-info { display: flex; flex-direction: column; /* space between the two rows */ 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)) ); gap: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-im-gp); padding: var( --_ctm-mob-dn-or-io-or-io-cr-pg, var(--_ctm-tab-dn-or-io-or-io-cr-pg, var(--_ctm-dn-or-io-or-io-cr-pg)) ); border-color: var( --_ctm-mob-dn-or-io-or-io-cr-br-cr, var(--_ctm-tab-dn-or-io-or-io-cr-br-cr, var(--_ctm-dn-or-io-or-io-cr-br-cr)) ); border-style: var( --_ctm-mob-dn-or-io-or-io-cr-br-se, var(--_ctm-tab-dn-or-io-or-io-cr-br-se, var(--_ctm-dn-or-io-or-io-cr-br-se)) ); border-width: var( --_ctm-mob-dn-or-io-or-io-cr-br-wh, var(--_ctm-tab-dn-or-io-or-io-cr-br-wh, var(--_ctm-dn-or-io-or-io-cr-br-wh)) ); border-radius: var( --_ctm-mob-dn-or-io-or-io-cr-br-rs, var(--_ctm-tab-dn-or-io-or-io-cr-br-rs, var(--_ctm-dn-or-io-or-io-cr-br-rs)) ); .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(--_thm-cs-be-se-3); padding-bottom: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-im-gp); } /* Second row: three equal columns */ &:nth-child(2) { // grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(var(--_column-count, 3), 2fr); } /* Each individual info‐cell styling */ > div { display: flex; flex-direction: column; gap: 4px; 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)) ); &.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)) ); // font-size: 14px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-ne-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-or-ne-pg, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .order_number_skeleton { display: inline-flex; gap: 4px; align-items: flex-end; } .delivery-date, .order_number_id { margin: 0; // font-size: 20px; // font-weight: 700; // color: var(--_gray-900); // line-height: 30px; line-height: prepareMediaVariable(--_ctm-dn-or-io-or-id-le-ht, 24px); 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)) ); 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)) ); // font-size: 16px; 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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-id-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-id-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-or-id-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-or-id-pg, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .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 { // Order Id > Item Gap spaces the badge from the number. Deliberately a // margin rather than a flex `gap` on `.order_number_id`: a flex parent // blockifies this badge and the parent's text-decoration would then paint // through it, with the `text-decoration: none` below unable to stop it. margin-left: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 6px); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 18px; // background-color: #eff8ff; // @include BgColorLighter(var(--_thm-cs-at-py), 5%); // color: var(--_thm-cs-at-py); text-decoration: none; font-style: normal; display: inline-flex; align-items: center; gap: 6px; &::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; } &.success { background-color: var(--_success-50); color: var(--_success-600); &::before { background-color: var(--_success-700); } } &.failed { background-color: var(--_error-50); color: var(--_error-700); &::before { background-color: var(--_error-700); } } } .link-button { // color: #243dc6; color: var(--_thm-cs-tt-ls-as); font-size: 14px; font-weight: 400; line-height: 20px; align-self: flex-start; } .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)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } 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)) ); // font-size: 14px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-de-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-de-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-or-de-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-or-de-pg, 0); display: flex; align-items: center; gap: prepareMediaVariable(--_ctm-dn-or-io-or-de-im-gp, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .expected_delivery { line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht); font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se); // font-size: 16px; color: prepareMediaVariable(--_ctm-dn-or-io-sg-md-cr); font-weight: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-sg-md-lr-sg); font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an); text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0); display: flex; align-items: center; gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .total_amount { line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht, 24px); font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se); // font-size: 16px; color: prepareMediaVariable(--_ctm-dn-or-io-sg-md-cr); font-weight: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-sg-md-lr-sg); font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an); text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0); display: inline-flex; align-items: center; gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .inclusive-tax { margin-left: 4px; font-size: 12px; color: var(--_thm-ty-p2-tt-cr); } } } } .shipping-method, .payment-mode { .sgmd_title { // font-size: 14px; // 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-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)) ); 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)) ); // font-size: 14px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-ne-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-or-ne-pg, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .sgmd_details { line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht, 24px); font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se); // font-size: 16px; color: prepareMediaVariable(--_ctm-dn-or-io-sg-md-cr); font-weight: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-sg-md-lr-sg); font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an); text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk); padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0); display: flex; align-items: center; gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } } } /* ───────── Quick Actions ───────── */ .quick-actions { display: flex; flex-direction: column; gap: var( --_ctm-mob-dn-qk-as-qk-as-cr-im-gp, var(--_ctm-tab-dn-qk-as-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-qk-as-cr-im-gp)) ); background-color: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-bd-cr); padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-pg); border-color: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-cr); border-style: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-se); border-width: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-wh); border-radius: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-rs); .action-button { width: fit-content; padding: var( --_ctm-mob-dn-qk-as-as-dt-se-pg, var(--_ctm-tab-dn-qk-as-as-dt-se-pg, var(--_ctm-dn-qk-as-as-dt-se-pg)) ); border-color: var( --_ctm-mob-dn-qk-as-as-dt-se-br-cr, var(--_ctm-tab-dn-qk-as-as-dt-se-br-cr, var(--_ctm-dn-qk-as-as-dt-se-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-as-dt-se-br-se, var(--_ctm-tab-dn-qk-as-as-dt-se-br-se, var(--_ctm-dn-qk-as-as-dt-se-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-as-dt-se-br-wh, var(--_ctm-tab-dn-qk-as-as-dt-se-br-wh, var(--_ctm-dn-qk-as-as-dt-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-as-dt-se-br-rs, var(--_ctm-tab-dn-qk-as-as-dt-se-br-rs, var(--_ctm-dn-qk-as-as-dt-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-qk-as-as-dt-se-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-dt-se-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-dt-se-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-dt-se-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); background-color: var( --_ctm-mob-dn-qk-as-as-dt-se-bd-cr, var(--_ctm-tab-dn-qk-as-as-dt-se-bd-cr, var(--_ctm-dn-qk-as-as-dt-se-bd-cr)) ); font-family: var( --_ctm-mob-dn-qk-as-as-dt-se-ft-fy, var(--_ctm-tab-dn-qk-as-as-dt-se-ft-fy, var(--_ctm-dn-qk-as-as-dt-se-ft-fy)) ); font-size: var( --_ctm-mob-dn-qk-as-as-dt-se-ft-se, var(--_ctm-tab-dn-qk-as-as-dt-se-ft-se, var(--_ctm-dn-qk-as-as-dt-se-ft-se)) ); color: var( --_ctm-mob-dn-qk-as-as-dt-se-cr, var(--_ctm-tab-dn-qk-as-as-dt-se-cr, var(--_ctm-dn-qk-as-as-dt-se-cr)) ); // color: var(--_thm-cs-tt-ls-as); font-weight: var( --_ctm-mob-dn-qk-as-as-dt-se-ft-wt, var(--_ctm-tab-dn-qk-as-as-dt-se-ft-wt, var(--_ctm-dn-qk-as-as-dt-se-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-qk-as-as-dt-se-ue, var(--_ctm-tab-dn-qk-as-as-dt-se-ue, var(--_ctm-dn-qk-as-as-dt-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-qk-as-as-dt-se-lr-sg, var(--_ctm-tab-dn-qk-as-as-dt-se-lr-sg, var(--_ctm-dn-qk-as-as-dt-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-qk-as-as-dt-se-le-ht, var(--_ctm-tab-dn-qk-as-as-dt-se-le-ht, var(--_ctm-dn-qk-as-as-dt-se-le-ht)) ); font-style: var( --_ctm-mob-dn-qk-as-as-dt-se-ft-se-ic, var(--_ctm-tab-dn-qk-as-as-dt-se-ft-se-ic, var(--_ctm-dn-qk-as-as-dt-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-qk-as-as-dt-se-tt-an, var(--_ctm-tab-dn-qk-as-as-dt-se-tt-an, var(--_ctm-dn-qk-as-as-dt-se-tt-an)) ); padding: var( --_ctm-mob-dn-qk-as-as-dt-se-pg, var(--_ctm-tab-dn-qk-as-as-dt-se-pg, var(--_ctm-dn-qk-as-as-dt-se-pg)) ); text-transform: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } cursor: pointer; // text-align: start; &:hover { // color: #0d60e5; // background-color: var(--_gray-100); // border-radius: 6px; padding: var( --_ctm-mob-dn-qk-as-as-hr-se-pg, var(--_ctm-tab-dn-qk-as-as-hr-se-pg, var(--_ctm-dn-qk-as-as-hr-se-pg)) ); border-color: var( --_ctm-mob-dn-qk-as-as-hr-se-br-cr, var(--_ctm-tab-dn-qk-as-as-hr-se-br-cr, var(--_ctm-dn-qk-as-as-hr-se-br-cr)) ); border-style: var( --_ctm-mob-dn-qk-as-as-hr-se-br-se, var(--_ctm-tab-dn-qk-as-as-hr-se-br-se, var(--_ctm-dn-qk-as-as-hr-se-br-se)) ); border-width: var( --_ctm-mob-dn-qk-as-as-hr-se-br-wh, var(--_ctm-tab-dn-qk-as-as-hr-se-br-wh, var(--_ctm-dn-qk-as-as-hr-se-br-wh)) ); border-radius: var( --_ctm-mob-dn-qk-as-as-hr-se-br-rs, var(--_ctm-tab-dn-qk-as-as-hr-se-br-rs, var(--_ctm-dn-qk-as-as-hr-se-br-rs)) ); box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-qk-as-as-hr-se-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-hr-se-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-hr-se-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-hr-se-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr)) ) ); background-color: var( --_ctm-mob-dn-qk-as-as-hr-se-bd-cr, var(--_ctm-tab-dn-qk-as-as-hr-se-bd-cr, var(--_ctm-dn-qk-as-as-hr-se-bd-cr)) ); font-family: var( --_ctm-mob-dn-qk-as-as-hr-se-ft-fy, var(--_ctm-tab-dn-qk-as-as-hr-se-ft-fy, var(--_ctm-dn-qk-as-as-hr-se-ft-fy)) ); font-size: var( --_ctm-mob-dn-qk-as-as-hr-se-ft-se, var(--_ctm-tab-dn-qk-as-as-hr-se-ft-se, var(--_ctm-dn-qk-as-as-hr-se-ft-se)) ); color: var( --_ctm-mob-dn-qk-as-as-hr-se-cr, var(--_ctm-tab-dn-qk-as-as-hr-se-cr, var(--_ctm-dn-qk-as-as-hr-se-cr)) ); // color: var(--_thm-cs-tt-ls-as); font-weight: var( --_ctm-mob-dn-qk-as-as-hr-se-ft-wt, var(--_ctm-tab-dn-qk-as-as-hr-se-ft-wt, var(--_ctm-dn-qk-as-as-hr-se-ft-wt)) ); text-decoration: var( --_ctm-mob-dn-qk-as-as-hr-se-ue, var(--_ctm-tab-dn-qk-as-as-hr-se-ue, var(--_ctm-dn-qk-as-as-hr-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-qk-as-as-hr-se-lr-sg, var(--_ctm-tab-dn-qk-as-as-hr-se-lr-sg, var(--_ctm-dn-qk-as-as-hr-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-qk-as-as-hr-se-le-ht, var(--_ctm-tab-dn-qk-as-as-hr-se-le-ht, var(--_ctm-dn-qk-as-as-hr-se-le-ht)) ); font-style: var( --_ctm-mob-dn-qk-as-as-hr-se-ft-se-ic, var(--_ctm-tab-dn-qk-as-as-hr-se-ft-se-ic, var(--_ctm-dn-qk-as-as-hr-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-qk-as-as-hr-se-tt-an, var(--_ctm-tab-dn-qk-as-as-hr-se-tt-an, var(--_ctm-dn-qk-as-as-hr-se-tt-an)) ); padding: var( --_ctm-mob-dn-qk-as-as-hr-se-pg, var(--_ctm-tab-dn-qk-as-as-hr-se-pg, var(--_ctm-dn-qk-as-as-hr-se-pg)) ); text-transform: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-wd-bk); } } } /* ───────── 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: 12px; // 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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-wd-bk); } .items-grid { display: grid; // grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(var(--_column-count-three, 3), 1fr); gap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-wt-wr-im-gp, 16px); 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; flex-wrap: wrap; .cart_item_img { background-color: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-bd-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-rs); border-color: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-cr); border-style: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-se); border-width: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-wh); padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-pg); object-fit: cover; } .cart_item_accordians { display: flex; flex-direction: column; gap: 0; width: 100%; overflow: hidden; // padding-left: 44px; .cart_item_accordion { border-top: 1px solid var(--_thm-cs-be-se-3); &:last-child { border-bottom: 1px solid var(--_thm-cs-be-se-3); } .cart_item_accordion_header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 0; cursor: pointer; background: none; border: none; .cart_item_accordion_title { color: var(--_thm-ty-p1-tt-cr); font-family: var(--_thm-ty-p2-ft-fy); text-transform: var(--_thm-ty-p2-tt-tm); word-wrap: var(--_thm-ty-p2-wd-wp); word-break: var(--_thm-ty-p2-wd-bk); font-size: var(--_thm-ty-p2-ft-se); font-weight: var(--_thm-ty-p2-bd); font-style: var(--_thm-ty-p2-ic); text-align: var(--_thm-ty-p2-tt-an); letter-spacing: var(--_thm-ty-p2-cr-sg); line-height: var(--_thm-ty-p2-le-ht); } .cart_item_accordion_left { display: flex; align-items: center; gap: 8px; .svg_icon { display: flex; align-items: center; justify-content: center; svg { path { stroke: var(--_thm-ty-p1-tt-cr); } width: 18px; height: 18px; transition: transform 400ms linear; transform: rotate(-90deg); } } .svg_icon.down svg { transform: rotate(0deg); } } .cart_item_accordion_right { display: flex; align-items: center; gap: 8px; .cart_item_accordion_price { white-space: nowrap; color: var( --_ctm-mob-dn-pt-pe-ss-cr, var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-pe-ss-ft-fy, var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-pe-ss-tt-tm, var(--_ctm-tab-dn-pt-pe-ss-tt-tm, var(--_ctm-dn-pt-pe-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-pe-ss-wd-wp, var(--_ctm-tab-dn-pt-pe-ss-wd-wp, var(--_ctm-dn-pt-pe-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-pe-ss-wd-bk, var(--_ctm-tab-dn-pt-pe-ss-wd-bk, var(--_ctm-dn-pt-pe-ss-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-pt-pe-ss-ft-se, var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se, 14px)) ); font-weight: var( --_ctm-mob-dn-pt-pe-ss-ft-wt, var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt)) ); } } } .cart_item_accordion_body { padding: 0 0 12px 0; .bundle-products-list { padding: 16px; display: grid; gap: 16px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; .bundle-product-item { .product_qty_price_wrapper { gap: 8px; } } } } } } margin-top: 8px; // 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 { display: flex; flex-direction: column; gap: 4px; flex: 1; .item-name { // margin: 0 0 4px; // font-size: 14px; // font-weight: 600; // color: var(--_gray-900); // line-height: 20px; padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-pg, 0); 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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .item-specs, .item-sku-code, .item-options { 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)) ); 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)) ); // font-size: 12px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .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)) ); 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)) ); // font-size: 12px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } 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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm-dc); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-wr-dc); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-bk-dc); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } } .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)) ); 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)) ); // font-size: 12px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .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)) ); 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)) ); // font-size: 12px; 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-wr-dc); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-bk-dc); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } } .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)) ); 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)) ); text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } // margin-left: 12px; } } .show-more-wrapper { margin: 32px 16px 16px 0px; button { padding: 12px 16px; // color: var(--_primary-400); color: var(--_thm-cs-tt-ls-as); font-weight: 600; border-radius: 6px; &:hover { background-color: var(--_primary-25); } } } } /* ───────── Order Attributes ───────── */ .order-attributes { border-top: 1px solid var(--_thm-cs-be-se-3); padding-top: 24px; .order_attribute_text { font-weight: 700; color: var(--_thm-ty-p1-tt-cr); } // 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; } } } } } .os-order-overlay { position: relative; .os-order-info-wrapper { display: none; position: absolute; z-index: 99; padding: 12px; border: 1px solid var(--_gray-200); border-radius: 4px; bottom: 100%; background: var(--_base-white); min-width: 170px; max-width: 200px; font-size: 12px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); ul { display: flex; flex-direction: column; gap: 8px; li { display: flex; justify-content: space-between; font-size: 12px; .key_label { color: var(--_gray-600); } .key_label { color: var(--_gray-900); } .total { color: var(--_gray-600); } .price { color: var(--_gray-900); font-weight: 600; } } } } .order-summary-breakup { .breakup-item { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; .breakup-label { line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht); font-family: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-fy); font-size: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se); // font-size: 16px; color: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-cr); font-weight: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-wt); text-decoration: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-lr-sg); font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic); text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an); padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg); text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr); word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk); &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } .break_up_amount { line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht-dc); font-family: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-fy-dc); font-size: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-dc); color: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-cr-dc); font-weight: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-wt-dc); text-decoration: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ue-dc); letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-lr-sg-dc); font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic-dc); text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an-dc); padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg-dc); text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm-dc); word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr-dc); word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk-dc); } } } &:hover .os-order-info-wrapper { display: block; } } .bg-gray-100 { background-color: var(--_gray-100) !important; }