@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; $resizerId: "[data-cms-tool='cms-element-resizer']"; $resizeActive: '[data-cms-element-resizer="true"]'; $overflowSelector: ".flex__overflow"; // Text Transform / Word Wrap / Word Break are emitted by the Typography panel for // every cart details text section. Each section repeats its typography block in the // desktop and the responsive layout, so the three declarations live in one mixin // that both call with the section's variable prefix. @mixin cartDetailsTextFlow($prefix) { text-transform: prepareMediaVariable(#{$prefix}-tt-tm, none); word-wrap: prepareMediaVariable(#{$prefix}-wd-wp, normal); word-break: prepareMediaVariable(#{$prefix}-wd-bk, normal); } // Text Overflow is a `controls` property, not a CSS one, so it cannot come through as // a variable — the renderer opts the node in with `.flex__overflow` and carries the // line count in `--_sf-line-clamp`. Same contract as cart-summary and order-status. @mixin cartDetailsTextClamp { &#{$overflowSelector} { @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } } // $defaultValues: ( // --_dm-flt: getListOfResponsive(flex-end, flex-start), // ); [data-div-type="element"] { &[data-element-type="cartDetails"] { // 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%; } } .cart_details_wrapper { display: flex; // padding: 16px 0px; align-items: flex-start; align-self: stretch; .cart_header_wrapper { display: flex; padding: var(--_ctm-lt-pg); flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 24px; flex: 1 0 0; max-width: 100%; .cart_group_item { width: 100%; .cart_group_title { display: flex; align-items: center; cursor: pointer; margin-bottom: 16px; gap: 8px; h4 { font-size: 20px; color: var(--_gray-900); font-weight: 700; margin-right: 8px; .cart_items_length { font-size: 14px; color: var(--_gray-600); margin-left: 4px; } } .toggle_btn { display: flex; margin-right: 6px; svg { width: 24px; height: 24px; path { stroke: var(--_gray-600); } } } } .attr_header { display: flex; justify-content: space-between; align-items: center; padding: 8px; .group_attr_info_sec { display: flex; align-items: center; gap: 8px; .attributes_validation_info_sec { display: flex; .attr_val_info_detail { font-size: 14px; color: #475467; display: flex; gap: 4px; b { color: #000; } } } } } } .cart_details_section { width: 100%; .cart_title_wrapper { display: flex; // padding: 0px 36px 0px 96px; align-items: center; gap: 12px; align-self: stretch; padding-bottom: 24px; .cart_title { color: prepareMediaVariable(--_ctm-dn-ct-hg-ss-cr); font-size: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ft-se); font-weight: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ft-wt); line-height: prepareMediaVariable(--_ctm-dn-ct-hg-ss-le-ht); font-style: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ft-se-ic); text-decoration: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ue); letter-spacing: prepareMediaVariable(--_ctm-dn-ct-hg-ss-lr-sg); font-family: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ft-fy); text-transform: prepareMediaVariable(--_ctm-dn-ct-hg-ss-tt-tm); word-wrap: prepareMediaVariable(--_ctm-dn-ct-hg-ss-wd-wp); word-break: prepareMediaVariable(--_ctm-dn-ct-hg-ss-wd-bk); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } text-align: prepareMediaVariable(--_ctm-dn-ct-hg-ss-tt-an); @include cartDetailsTextFlow(--_ctm-dn-ct-hg-ss); display: block; width: 100%; @include cartDetailsTextClamp; } .number_of_items { color: #101828; font-size: 14px; font-weight: 600; line-height: 20px; } } .cart_actions_wrapper { display: flex; align-items: center; gap: var( --_ctm-mob-dn-ct-an-ss-im-gp, var(--_ctm-tab-dn-ct-an-ss-im-gp, var(--_ctm-dn-ct-an-ss-im-gp)) ); align-self: stretch; white-space: nowrap; flex-wrap: wrap; .cart_action_button { display: flex; justify-content: center; align-items: center; // gap: 8px; padding: var( --_ctm-mob-dn-ct-an-ss-pg, var(--_ctm-tab-dn-ct-an-ss-pg, var(--_ctm-dn-ct-an-ss-pg)) ); &[data-has-link="true"] { cursor: pointer; } // color: var(--_ctm-dn-ct-an-ss-cr); // font-size: var(--_ctm-dn-ct-an-ss-ft-se); // font-weight: var(--_ctm-dn-ct-an-ss-ft-wt); // line-height: var(--_ctm-dn-ct-an-ss-lh); // font-family: var(--_ctm-dn-ct-an-ss-ft-fy); // color: var( // --_ctm-mob-dn-ct-an-ss-cr, // var(--_ctm-tab-dn-ct-an-ss-cr, var(--_ctm-dn-ct-an-ss-cr)) // ); color: var(--_thm-cs-tt-ls-as); font-size: var( --_ctm-mob-dn-ct-an-ss-ft-se, var(--_ctm-tab-dn-ct-an-ss-ft-se, var(--_ctm-dn-ct-an-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-ct-an-ss-ft-wt, var(--_ctm-tab-dn-ct-an-ss-ft-wt, var(--_ctm-dn-ct-an-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-ct-an-ss-ft-se-ic, var(--_ctm-tab-dn-ct-an-ss-ft-se-ic, var(--_ctm-dn-ct-an-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-ct-an-ss-tt-an, var(--_ctm-tab-dn-ct-an-ss-tt-an, var(--_ctm-dn-ct-an-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-ct-an-ss-lr-sg, var(--_ctm-tab-dn-ct-an-ss-lr-sg, var(--_ctm-dn-ct-an-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-ct-an-ss-le-ht, var(--_ctm-tab-dn-ct-an-ss-le-ht, var(--_ctm-dn-ct-an-ss-le-ht)) ); @include cartDetailsTextFlow(--_ctm-dn-ct-an-ss); &:hover { text-decoration: underline; } &.disabled { opacity: 0.5; pointer-events: none; } span { display: flex; transition: transform 0.4s ease-in-out; &.rotate__180 { transform: rotate(180deg); } &.rotate__0 { transform: rotate(0deg); } } &:has(span) { gap: 4px; } } } } } } @media (max-width: 677px) { .cart_details_wrapper { width: 100%; } } } } .wishlist-modal { display: flex; flex-direction: column; // gap: 1rem; //cart template modal issue // padding: 10px 16px; width: 100%; overflow-y: auto; .form-group { display: flex; flex-direction: column; gap: 6px; // label { // display: block; // font-size: 0.875rem; // font-weight: 500; // color: #374151; // } .primary_text_label { font-weight: 700; } input[type="radio"], textarea { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; outline: none; box-sizing: border-box; transition: all 0.2s; &:focus { border-color: #2563eb; // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); } &[type="radio"] { width: fit-content; height: fit-content; } } .radio-group { display: flex; flex-direction: column; gap: 12px; font-weight: normal; .radio-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; width: fit-content; span { color: var(--_thm-ty-p2-tt-cr); span { color: var(--_thm-ty-p1-tt-cr); font-weight: 500; } } } } textarea { min-height: 100px; resize: vertical; } .global-can-edit { display: flex; flex-direction: column; align-items: flex-start; margin-left: 20px; margin-top: 6px; gap: 6px; input[type="checkbox"] { margin: 0; width: 16px; height: 16px; cursor: pointer; } span { font-size: 0.875rem; font-weight: 600; color: var(--_gray-900); margin-left: -15px; } } } .employee-row-wrapper { display: flex; flex-direction: column; gap: 12px; .employee-row { display: flex; align-items: center; gap: 1rem; .dropdown { display: flex; flex-direction: column; gap: 6px; } // .dropdown { // flex: 1; // display: flex; // flex-direction: column; // gap: 8px; // max-width: 400px; // .quick-order-product-dropdown-section { // &:focus { // &:focus { // border-color: #2563eb; // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); // } // } // .dropdown-input-section { // // padding: 0.5rem; // .input-field { // border: none; // box-shadow: none; // padding: 0px; // } // .dropdown-menu { // top: 40px; // } // } // } // } .checkbox-wrapper { display: flex; align-items: center; flex-direction: column; gap: 0.5rem; white-space: nowrap; align-self: stretch; align-items: flex-start; .checkbox-container { display: flex; width: 3.5rem; align-items: center; flex: 1 1 auto; justify-content: center; input[type="checkbox"] { width: 16px; height: 16px; border: 1px solid var(--_thm-cs-be-se-3); 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); } } } } .delete-icon-wrapper { display: flex; align-items: center; flex-direction: column; gap: 0.5rem; white-space: nowrap; align-self: stretch; align-items: flex-start; // margin-left: 130px; .delete-icon-container { display: flex; width: 100%; align-items: center; flex: 1 1 auto; justify-content: center; .delete-icon { cursor: pointer; display: flex; svg { width: 24px; height: 24px; path { stroke: #6b7280; // gray-500 } &:hover { path { stroke: #ef4444; } } } } } } } } .action-buttons { display: flex; gap: 1rem; align-items: flex-end; justify-content: flex-end; flex: 1 1 auto; .create-btn { background-color: #243dc6; color: #fff; padding: 12px 24px; border-radius: 0.375rem; border: none; cursor: pointer; line-height: 24px; font-weight: 500; &:hover { background-color: #1d4ed8; } } .discard-btn { background: none; border: none; padding: 8px 16px; color: var(--_gray-600); font-size: 16px; cursor: pointer; line-height: 24px; border-radius: 6px; &:hover { background-color: var(--_gray-50); color: var(--_gray-900); } } } } .border_dashed { border: 1px dashed var(--_thm-cs-be-se-3); } .cart_products_wrapper, .infinite-list-container { flex: 1 1 auto; overflow-y: auto; // padding: 1rem; .cart_item_wrapper { .cart-item-attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 1rem; margin-top: 24px; .attriTitle { font-weight: 600; font-size: 14px; line-height: 20px; color: #101828; padding-bottom: 6px; } .attriDes { font-weight: 400; font-size: 14px; line-height: 20px; } .attribute { width: 100%; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; padding: 10px; background-color: var(--_base-white); border-radius: 4px; .label { display: block; color: var(--_thm-cs-be-cr-1); font-weight: 500; font-size: 14px; line-height: 20px; @include cartDetailsTextFlow(--_ctm-dn-pt-as-is); @include cartDetailsTextClamp; &.required::after { content: " *"; color: var(--_error-500); } } .attribute_field { width: 100% !important; input { background-color: var(--_base-white); padding: 8px 12px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &::placeholder { color: var(--_gray-500); font-weight: 500; font-size: 14px; line-height: 24px; } &:focus { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100); border: 1px solid var(--primary-300); } } .date_picker_container { position: relative; .svg_icon { position: absolute; left: 8px; top: 9px; } .react-datepicker-wrapper { .react-datepicker__input-container { input { padding-left: 32px !important; } } } } .color-picker-container { .custom_hex_color_picker_div { margin-top: 8px; label { display: inline-block; margin-bottom: 4px; color: var(--_gray-700); font-size: 14px; font-weight: 500; line-height: 20px; } } .custom__div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; label { display: flex; flex-direction: column; color: var(--_gray-700); font-size: 14px; font-weight: 500; input { border: none; border: 1px solid var(--_thm-cs-be-se-3); padding: 8px; outline: none; text-align: center; border-radius: 0; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &:focus { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100); border: 1px solid var(--primary-300); } } &:first-child input { border-right: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child input { border-left: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } &:not(:first-child):not(:last-child) input { border-radius: 0; } } } } .attribute_form_field { background-color: var(--_base-white); padding: 8px 12px; border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; height: 40px; } .attribute_text_area_field { width: 100% !important; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &:focus { outline: 0 none; outline-offset: 0; border-radius: 4px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100); border: 1px solid var(--primary-300); } } // .dropdown-input-section { // height: 40px; // background-color: var(--_base-white); // padding: 8px 8px 8px 12px; // border: 1px solid var(--_gray-300); // border-radius: 4px; // cursor: pointer; // transition: // background-color 0.2s, // color 0.2s, // border-color 0.2s, // box-shadow 0.2s; // &::placeholder { // color: var(--_gray-500); // font-weight: 500; // font-size: 14px; // line-height: 24px; // } // &:focus-within { // outline: 0 none; // outline-offset: 0; // border-radius: 4px; // box-shadow: // 0px 1px 2px rgba(16, 24, 40, 0.05), // 0px 0px 0px 2px var(--primary-100); // border: 1px solid var(--primary-300); // } // input { // border: none; // padding: 0; // &:focus { // box-shadow: none; // border: none; // } // } // .dropdown__icon { // .icon { // transition: rotate 0.4s ease-in-out; // padding-left: 4px; // } // } // .selected-display { // .selected-item { // display: flex; // align-items: center; // gap: 4px; // font-size: 14px; // font-weight: 500; // line-height: 20px; // color: #344054; // .svg_icon { // vertical-align: middle; // display: flex; // svg { // width: 12px; // height: 12px; // cursor: pointer; // vertical-align: middle; // g { // path { // stroke: #98a2b3; // } // } // } // } // } // .multi-selected-display { // display: flex; // align-items: center; // gap: 8px; // .selected-item { // border: 1px solid var(--_gray-300); // border-radius: 4px; // padding: 2px 4px; // font-size: 12px; // } // } // } // } &:focus { border-color: var(--_primary-400); outline: 2px solid var(--_primary-200); } &.error { border-color: #dc2626; background-color: #fef2f2; } .react-datepicker-wrapper { width: 100%; .react-datepicker__close-icon::after { background-color: transparent; font-size: 25px; color: var(--_gray-500); } } .custom-upload { display: flex; // flex-direction: column; align-items: center; align-self: stretch; position: relative; padding: 16px; gap: 12px; background-color: var(--_base-white); border: 1px solid var(--_thm-cs-be-se-3); border-radius: 4px; .clear_upload_icon { // display: none; width: 30px; height: 30px; // position: absolute; // right: 0; background: #fff; border-radius: 50%; margin-top: 3px; padding: 3px; .svg_icon { // position: absolute; // top: 4px; // left: 5px; svg { width: 20px; height: 20px; } } &:hover { .svg_icon { svg { path { stroke: var(--_error-500); } } } } } .preview_image { display: flex; align-items: center; gap: 8px; img { // width: 40px; // height: 40px; border-radius: 50%; } p { color: var(--_gray-700); font-size: 14px; font-weight: 400; line-height: 150%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } } &:hover { .clear_upload_icon { display: block; } } .file_upload_text { text-align: center; display: flex; flex-direction: column; gap: 4px; p { strong { color: var(--_primary-400); font-size: 14px; font-weight: 600; line-height: 150%; } } span { color: var(--_gray-600); font-size: 12px; font-weight: 400; line-height: 150%; } } .uploadicon { // padding: 10px; // background: #f2f4f7; display: inline-block; // border-radius: 50%; // color: var(--_gray-600); } .preview_file { display: flex; align-items: center; gap: 8px; .file_extension { color: var(--_gray-700); font-size: 14px; font-weight: 400; line-height: 150%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } } } .has-file { justify-content: space-between; } } .input_percent_a { position: relative; .svg_icon { position: absolute; top: 12px; right: 10px; background-color: var(--_base-white); } } // toggle styles .input_toggle_switch_container { display: flex; gap: 10px; .input_toggle_switch { position: relative; display: inline-block; width: 50px; height: 24px; input[type="checkbox"] { opacity: 0; width: 0; height: 0; &:checked + .slider { background-color: var(--_primary-700); &::before { transform: translateX(17px); } } } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 28px; &::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.4s; } } } .input_toggle_switch_text { gap: 2px; display: flex; flex-direction: column; .checkbox_title { color: var(--_gray-700); font-size: 16px; font-weight: 500; line-height: 24px; } .checkbox_des { color: var(--_gray-600); font-size: 16px; font-weight: 400; line-height: 24px; } } &.active { border: 1px solid var(--_primary-500); border-radius: 4px; background: var(--_primary-25); } } } .error-text { font-size: 12px; color: var(--_error-500); } .text_area_attribute { width: 100%; .input_textarea_a { width: 100%; } } .cart_item_attr_disabled { pointer-events: none; opacity: 0.5; cursor: auto; } // .attr-grid-item input { // border: 1px solid#000 !important; // height: 40px; // } } border-radius: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-rs); box-shadow: prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-ae) prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-br) prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-sd) prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-cr); padding: prepareMediaVariable(--_ctm-dn-ct-im-ss-pg); background: prepareMediaVariable(--_ctm-dn-ct-im-ss-bd-cr); max-width: 100%; min-width: 100%; border-style: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-se); border-color: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-cr); border-width: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-wh); gap: 16px; display: grid; // @include prepareMediaQueries($defaultValues); .cart_product_wrapper { display: flex; justify-content: space-between; align-items: flex-start; align-self: stretch; height: auto; // flex-wrap: wrap; .cart_product_left_wrapper { display: flex; align-items: flex-start; // gap: 16px; gap: prepareMediaVariable(--_ctm-dn-pt-in-wr-im-gp, 16px); // max-width: 60%; height: 100%; .checkbox_wrapper { width: fit-content; } .product_image { width: 100%; height: 130px; background-color: prepareMediaVariable(--_ctm-dn-pt-ie-ss-bd-cr); border-radius: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-rs); border-width: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-wh); border-color: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-cr); border-style: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-se); overflow: hidden; flex-shrink: 0; box-shadow: var( --_show-shadow, var( --_ctm-mob-dn-pt-ie-ss-sw-ae, var(--_ctm-tab-dn-pt-ie-ss-sw-ae, var(--_ctm-dn-pt-ie-ss-sw-ae)) ) var( --_ctm-mob-dn-pt-ie-ss-sw-br, var(--_ctm-tab-dn-pt-ie-ss-sw-br, var(--_ctm-dn-pt-ie-ss-sw-br)) ) var( --_ctm-mob-dn-pt-ie-ss-sw-sd, var(--_ctm-tab-dn-pt-ie-ss-sw-sd, var(--_ctm-dn-pt-ie-ss-sw-sd)) ) var( --_ctm-mob-dn-pt-ie-ss-sw-cr, var(--_ctm-tab-dn-pt-ie-ss-sw-cr, var(--_ctm-dn-pt-ie-ss-sw-cr)) ) ); object-fit: cover; img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } } .product_info_wrapper { display: flex; width: 380px; flex-direction: column; justify-content: space-between; align-items: flex-start; align-self: stretch; margin-right: 16px; @media (min-width: 767px) and (max-width: 1023px) { width: 280px; } .product_info_container { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; align-self: stretch; word-break: normal; .product_title { // color: var(--_gray-900); // // font-size: 18px; // font-weight: 700; // line-height: 28px; // width: 380px; // white-space: nowrap; // overflow: hidden; text-overflow: ellipsis; line-height: 24px; margin-bottom: 4px; color: var( --_ctm-mob-dn-pt-ne-ss-cr, var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-ne-ss-ft-fy, var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-ne-ss-tt-tm, var(--_ctm-tab-dn-pt-ne-ss-tt-tm, var(--_ctm-dn-pt-ne-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-ne-ss-wd-wp, var(--_ctm-tab-dn-pt-ne-ss-wd-wp, var(--_ctm-dn-pt-ne-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-ne-ss-wd-bk, var(--_ctm-tab-dn-pt-ne-ss-wd-bk, var(--_ctm-dn-pt-ne-ss-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-pt-ne-ss-ft-se, var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-ne-ss-ft-wt, var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-ne-ss-ft-se-ic, var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ne-ss-tt-an, var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an)) ); text-decoration: var( --_ctm-mob-dn-pt-ne-ss-ue, var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-ne-ss); @include cartDetailsTextClamp; } .product_code { display: flex; @include cartDetailsTextClamp; align-items: center; align-self: stretch; flex-wrap: wrap; font-size: 14px; span { // color: var(--_gray-600); color: var( --_ctm-mob-dn-pt-in-ss-cr, var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-in-ss-ft-fy, var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-in-ss-tt-tm, var(--_ctm-tab-dn-pt-in-ss-tt-tm, var(--_ctm-dn-pt-in-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-in-ss-wd-wp, var(--_ctm-tab-dn-pt-in-ss-wd-wp, var(--_ctm-dn-pt-in-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-in-ss-wd-bk, var(--_ctm-tab-dn-pt-in-ss-wd-bk, var(--_ctm-dn-pt-in-ss-wd-bk)) ) ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); font-weight: var( --_ctm-mob-dn-pt-in-ss-ft-wt, var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-in-ss-ft-se-ic, var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-in-ss-tt-an, var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-in-ss-lr-sg, var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-in-ss-le-ht, var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-in-ss-ue, var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss); &:not(:last-child)::after { content: ""; display: inline-block; height: 10px; margin-inline: 12px; width: 1px; background-color: var(--_gray-400); } &:last-of-type::after { border-right: 0; } } } .product_options { display: flex; align-items: center; gap: 4px; align-self: stretch; flex-wrap: wrap; font-size: 14px; @include cartDetailsTextClamp; span { white-space: nowrap; color: var( --_ctm-mob-dn-pt-in-ss-cr, var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-in-ss-ft-fy, var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-in-ss-tt-tm, var(--_ctm-tab-dn-pt-in-ss-tt-tm, var(--_ctm-dn-pt-in-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-in-ss-wd-wp, var(--_ctm-tab-dn-pt-in-ss-wd-wp, var(--_ctm-dn-pt-in-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-in-ss-wd-bk, var(--_ctm-tab-dn-pt-in-ss-wd-bk, var(--_ctm-dn-pt-in-ss-wd-bk)) ) ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); font-weight: var( --_ctm-mob-dn-pt-in-ss-ft-wt, var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-in-ss-ft-se-ic, var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-in-ss-tt-an, var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-in-ss-lr-sg, var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-in-ss-le-ht, var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-in-ss-ue, var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss); &::after { content: "/"; padding-left: 4px; } &:last-of-type::after { content: ""; } } } } .product_customization_container { display: flex; align-items: center; gap: 16px; min-height: 28px; .svg_icon { display: flex; // svg path { // stroke: var(--_primary-400); // } } .customization_button { display: flex; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; // color: var( // --_ctm-mob-dn-pt-as-ss-cr, // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)) // ); color: var(--_thm-cs-tt-ls-as); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-as-ss-ft-fy, var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-as-ss-tt-tm, var(--_ctm-tab-dn-pt-as-ss-tt-tm, var(--_ctm-dn-pt-as-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-as-ss-wd-wp, var(--_ctm-tab-dn-pt-as-ss-wd-wp, var(--_ctm-dn-pt-as-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-as-ss-wd-bk, var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-as-ss-ft-se, var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-as-ss-ft-wt, var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-as-ss-ft-se-ic, var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-as-ss-tt-an, var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-as-ss-lr-sg, var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-as-ss-le-ht, var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-as-ss-ue, var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss); .attr_val_info_detail { b { margin-right: 4px; } } .svg_icon { display: flex; transition: all 400ms linear; svg { path { // stroke: var( // --_ctm-mob-dn-pt-as-ss-cr, // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)) // ); stroke: var(--_thm-cs-tt-ls-as); } width: 18px; height: 18px; margin-top: 2px; transition: transform 400ms linear; } } } .attributes_validation_info_sec { display: flex; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; b { margin-right: 4px; } } .svg_icon svg { vertical-align: middle; } .svg_icon.down svg { transform: rotate(180deg); transition: transform 400ms linear; // width: 20px; // height: 20px; } .customizationInfo_button { display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; color: var( --_ctm-mob-dn-pt-rd-io-cr, var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-rd-io-ft-fy, var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-rd-io-tt-tm, var(--_ctm-tab-dn-pt-rd-io-tt-tm, var(--_ctm-dn-pt-rd-io-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-rd-io-wd-wp, var(--_ctm-tab-dn-pt-rd-io-wd-wp, var(--_ctm-dn-pt-rd-io-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-rd-io-wd-bk, var(--_ctm-tab-dn-pt-rd-io-wd-bk, var(--_ctm-dn-pt-rd-io-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-rd-io-ft-se, var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-rd-io-ft-wt, var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-rd-io-ft-se-ic, var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-rd-io-tt-an, var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-rd-io-lr-sg, var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-rd-io-le-ht, var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-rd-io-ss-ue, var(--_ctm-tab-dn-pt-rd-io-ss-ue, var(--_ctm-dn-pt-rd-io-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-rd-io); @include cartDetailsTextClamp; } } } } .cart_product_right_wrapper { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; align-self: stretch; .product_qty_price_wrapper { display: flex; justify-content: var(--_dm-flt); // align-items: center; gap: 32px; align-self: stretch; .product_qty_wrapper { display: flex; // width: 124px; flex-direction: column; align-items: flex-start; gap: 6px; // width: 113px; .product_qty_container { display: flex; align-items: flex-start; align-self: stretch; border-radius: 4px; border: 0.5px solid var(--_thm-cs-be-se-3); background: #fff; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); margin-top: 2px; &:focus-within { outline: 2px solid var(--_gray-100); border: 1px solid var(--_gray-300); } .product_qty_label { display: flex; padding: 8px 12px; align-items: center; align-self: center; border-radius: 8px 0px 0px 8px; p { color: var(--_thm-ty-p1-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); // line-height: 24px; line-height: var(--_thm-ty-p1-le-ht); } } .product_qty_input_container { height: 40px; display: flex; position: relative; width: 55px; border-radius: 0px 4px 4px 0px; background: #fff; border-left: 1px solid var(--_thm-cs-be-se-3); padding: 8px 12px; .svg_icon { position: absolute; top: 8px; right: 0px; g { rect { fill: var(--_gray-500); width: 10px; height: 10px; } } } } .product_qty_number { // display: flex; // padding: 8px 12px; align-items: center; color: var(--_thm-ty-p2-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); line-height: var(--_thm-ty-p1-le-ht); // gap: 8px; // flex: 1 0 0; // align-self: stretch; // border-radius: 0px 4px 4px 0px; // background: #fff; // border-left: 1px solid var(--_thm-cs-be-se-3); // max-width: 80px; text-align: center; width: 75%; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } } } .product_price { // color: var(--_gray-900); // text-align: right; // font-size: 20px; // font-weight: 700; // line-height: 30px; // white-space: nowrap; // min-width: 80px; 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)) ); 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)) ); font-style: var( --_ctm-mob-dn-pt-pe-ss-ft-se-ic, var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic)) ); text-align: right; letter-spacing: var( --_ctm-mob-dn-pt-pe-ss-lr-sg, var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-pe-ss-le-ht, var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-pe-ss-ue, var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-pe-ss); min-width: 80px; } } .product_actions_wrapper { display: flex; align-items: center; gap: 16px; & > a, span { cursor: pointer; } & > * { display: flex; align-items: center; justify-content: center; } button { display: flex; } & > a, & > span { width: 32px; height: 32px; border-radius: 4px; &:hover { background-color: var(--_gray-100); // The hover target is this 32px wrapper, but the icons carry their own // :hover stroke rule and are smaller than it - hovering the surrounding // padding lit the background while the icon kept its base color. Drive // the stroke from the wrapper so both change together, as the responsive // block below already does. .edit_icon svg path, .wishlist_icon svg path { stroke: var(--_thm-cs-at-py); } } } span:hover { background-color: var(--_gray-100); } .delete_cart_icon:hover { background-color: var(--_error-50); } .edit_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); height: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); path { // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-et-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1)) // ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-et-se-wh, 1.25); stroke: var(--_thm-cs-be-se-1); } } &:hover { svg { width: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); height: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); path { stroke: var(--_thm-cs-at-py); // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-et-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1)) // ); } } } } .wishlist_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1)) // ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25); stroke: var(--_thm-cs-be-se-1); } } &:hover { svg { width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1)) // ); stroke: var(--_thm-cs-at-py); } } } } .delete_cart_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); path { stroke: var( --_ctm-mob-dn-pt-an-pt-an-de-in-c1, var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1)) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25); } } &:hover { svg { width: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); path { stroke: var( --_ctm-mob-dn-pt-an-pt-an-de-in-c1, var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1)) ); } } } } .svg_icon { display: flex; justify-content: center; align-items: center; // &:hover { // svg { // path { // stroke: var(--_gray-900); // } // } // } // svg { // path { // stroke: var(--_gray-600); // } // } } .product_action_button { display: flex; justify-content: center; align-items: center; gap: 8px; } } } } .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( --_ctm-mob-dn-pt-as-ss-cr, var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr, var(--_thm-cs-tt-ls-as))) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-as-ss-ft-fy, var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-as-ss-tt-tm, var(--_ctm-tab-dn-pt-as-ss-tt-tm, var(--_ctm-dn-pt-as-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-as-ss-wd-wp, var(--_ctm-tab-dn-pt-as-ss-wd-wp, var(--_ctm-dn-pt-as-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-as-ss-wd-bk, var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-pt-as-ss-ft-se, var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-as-ss-ft-wt, var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-as-ss-ft-se-ic, var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic)) ); line-height: var( --_ctm-mob-dn-pt-as-ss-le-ht, var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht)) ); letter-spacing: var( --_ctm-mob-dn-pt-as-ss-lr-sg, var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg)) ); text-decoration: var( --_ctm-mob-dn-pt-as-ss-ue, var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss); } .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-cs-tt-ls-as); } 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; } } } } } } // .cart_product_wrapper { // display: flex; // justify-content: space-between; // align-items: flex-start; // align-self: stretch; // height: auto; // // flex-wrap: wrap; // .cart_product_left_wrapper { // display: flex; // align-items: flex-start; // gap: 16px; // // max-width: 60%; // height: 100%; // .checkbox_wrapper { // width: fit-content; // } // .product_image { // width: 100px; // background-size: 100%; // height: 148px; // background-repeat: no-repeat; // background-position: center; // background-color: #eaeaea; // border-style: var( // --_ctm-mob-dn-pt-ie-ss-br-se, // var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se)) // ); // border-width: var( // --_ctm-mob-dn-pt-ie-ss-br-wh, // var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh)) // ); // // border: ; // border-radius: var( // --_ctm-mob-dn-pt-ie-ss-br-rs, // var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs)) // ); // border-color: var( // --_ctm-mob-dn-pt-ie-ss-br-cr, // var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr)) // ); // } // .product_info_wrapper { // display: flex; // width: 380px; // flex-direction: column; // justify-content: space-between; // align-items: flex-start; // align-self: stretch; // .product_info_container { // display: flex; // flex-direction: column; // align-items: flex-start; // gap: 2px; // align-self: stretch; // word-break: normal; // .product_title { // // color: var(--_ctm-dn-pt-ne-ss-cr); // // font-size: var(--_ctm-dn-pt-ne-ss-ft-se); // // font-weight: 700; // // align-self: stretch; // // line-height: 28px; // // font-family: var(--_ctm-dn-pt-ne-ss-ft-fy); // color: var( // --_ctm-mob-dn-pt-ne-ss-cr, // var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr)) // ); // font-family: var( // --_sf-hr-ff, // var( // --_ctm-mob-dn-pt-ne-ss-ft-fy, // var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy)) // ) // ); // font-size: var( // --_ctm-mob-dn-pt-ne-ss-ft-se, // var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se)) // ); // font-weight: var( // --_ctm-mob-dn-pt-ne-ss-ft-wt, // var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt)) // ); // font-style: var( // --_ctm-mob-dn-pt-ne-ss-ft-se-ic, // var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-ne-ss-tt-an, // var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-ne-ss-lr-sg, // var(--_ctm-tab-dn-pt-ne-ss-lr-sg, var(--_ctm-dn-pt-ne-ss-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-ne-ss-le-ht, // var(--_ctm-tab-dn-pt-ne-ss-le-ht, var(--_ctm-dn-pt-ne-ss-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-ne-ss-ue, // var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue)) // ); // } // .product_code { // display: flex; // align-items: center; // gap: 6px; // align-self: stretch; // flex-wrap: wrap; // background-color: var(--_ctm-dn-pt-in-ss-bd-cr); // p { // // color: #475467; // // font-size: 14px; // // font-weight: 400; // // line-height: 20px; // white-space: nowrap; // color: var( // --_ctm-mob-dn-pt-in-ss-cr, // var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) // ); // font-family: var( // --_sf-hr-ff, // var( // --_ctm-mob-dn-pt-in-ss-ft-fy, // var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) // ) // ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); // font-weight: var( // --_ctm-mob-dn-pt-in-ss-ft-wt, // var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) // ); // font-style: var( // --_ctm-mob-dn-pt-in-ss-ft-se-ic, // var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-in-ss-tt-an, // var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-in-ss-lr-sg, // var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-in-ss-le-ht, // var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-in-ss-ue, // var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) // ); // } // } // .product_options { // display: flex; // align-items: center; // gap: 4px; // align-self: stretch; // flex-wrap: wrap; // background-color: var(--_ctm-dn-pt-in-ss-bd-cr); // p { // white-space: nowrap; // color: var( // --_ctm-mob-dn-pt-in-ss-cr, // var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) // ); // font-family: var( // --_sf-hr-ff, // var( // --_ctm-mob-dn-pt-in-ss-ft-fy, // var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) // ) // ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); // font-weight: var( // --_ctm-mob-dn-pt-in-ss-ft-wt, // var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) // ); // font-style: var( // --_ctm-mob-dn-pt-in-ss-ft-se-ic, // var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-in-ss-tt-an, // var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-in-ss-lr-sg, // var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-in-ss-le-ht, // var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-in-ss-ue, // var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) // ); // } // } // } // .product_customization_container { // display: flex; // align-items: center; // gap: 8px; // min-height: 28px; // .customization_button { // display: flex; // justify-content: center; // align-items: center; // gap: 8px; // white-space: nowrap; // // color: #243dc6; // // font-size: 14px; // // font-weight: 400; // // line-height: 20px; // // color: prepareMediaVariable(--_ctm-dn-pt-as-ss-cr); // color: var( // --_ctm-mob-dn-pt-as-ss-cr, // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)) // ); // font-family: var( // --_sf-hr-ff, // var( // --_ctm-mob-dn-pt-as-ss-ft-fy, // var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy)) // ) // ); // font-size: var( // --_ctm-mob-dn-pt-as-ss-ft-se, // var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se)) // ); // font-weight: var( // --_ctm-mob-dn-pt-as-ss-ft-wt, // var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt)) // ); // font-style: var( // --_ctm-mob-dn-pt-as-ss-ft-se-ic, // var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-as-ss-tt-an, // var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-as-ss-lr-sg, // var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-as-ss-le-ht, // var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-as-ss-ue, // var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue)) // ); // // &:hover { // // font-weight: 600; // // } // } // .customizationInfo_button { // display: flex; // justify-content: center; // align-items: center; // gap: 8px; // white-space: nowrap; // color: var( // --_ctm-mob-dn-pt-rd-io-cr, // var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr)) // ); // font-family: var( // --_sf-hr-ff, // var( // --_ctm-mob-dn-pt-rd-io-ft-fy, // var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy)) // ) // ); // font-size: var( // --_ctm-mob-dn-pt-rd-io-ft-se, // var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se)) // ); // font-weight: var( // --_ctm-mob-dn-pt-rd-io-ft-wt, // var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt)) // ); // font-style: var( // --_ctm-mob-dn-pt-rd-io-ft-se-ic, // var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-rd-io-tt-an, // var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-rd-io-lr-sg, // var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-rd-io-le-ht, // var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-qy-ss-ue, // var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue)) // ); // } // } // } // } // .cart_product_right_wrapper { // display: flex; // flex-direction: column; // justify-content: space-between; // align-items: flex-end; // align-self: stretch; // .product_qty_price_wrapper { // display: flex; // justify-content: var(--_dm-flt); // align-items: center; // gap: 32px; // align-self: stretch; // .product_qty_wrapper { // display: flex; // // width: 124px; // flex-direction: column; // align-items: flex-start; // gap: 6px; // .product_qty_container { // display: flex; // align-items: flex-start; // align-self: stretch; // border-radius: 4px; // border: 0.5px solid var(--_thm-cs-be-se-3); // background: #fff; // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); // .product_qty_label { // display: flex; // padding: 8px 12px; // align-items: center; // border-radius: 8px 0px 0px 8px; // p { // color: #475467; // font-size: 16px; // font-weight: 400; // line-height: 24px; // } // } // .product_qty_number { // display: flex; // padding: 8px 12px; // align-items: center; // gap: 8px; // flex: 1 0 0; // align-self: stretch; // border-radius: 0px 4px 4px 0px; // background: #fff; // border-left: 1px solid var(--_thm-cs-be-se-3); // max-width: 80px; // } // } // } // .product_price { // // color: #101828; // // text-align: right; // // font-size: 20px; // // font-weight: 700; // // line-height: 30px; // 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)) // ) // ); // 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)) // ); // 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)) // ); // font-style: var( // --_ctm-mob-dn-pt-pe-ss-ft-se-ic, // var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic)) // ); // text-align: var( // --_ctm-mob-dn-pt-pe-ss-tt-an, // var(--_ctm-tab-dn-pt-pe-ss-tt-an, var(--_ctm-dn-pt-pe-ss-tt-an)) // ); // letter-spacing: var( // --_ctm-mob-dn-pt-pe-ss-lr-sg, // var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg)) // ); // line-height: var( // --_ctm-mob-dn-pt-pe-ss-le-ht, // var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht)) // ); // text-decoration: var( // --_ctm-mob-dn-pt-pe-ss-ue, // var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue)) // ); // min-width: 80px; // } // } // .product_actions_wrapper { // display: flex; // align-items: center; // gap: 16px; // .svg_icon { // display: flex; // justify-content: center; // align-items: center; // // &:last-child svg { // // width: 16px; // // height: 16px; // // path { // // stroke: #dc2626; // // } // // } // } // .product_action_button { // display: flex; // justify-content: center; // align-items: center; // gap: 8px; // // color: #243dc6; // // font-size: 14px; // // font-weight: 400; // // line-height: 20px; // // &:hover { // // font-weight: 600; // // } // } // // .remove_button { // // display: flex; // // justify-content: center; // // align-items: center; // // color: #dc2626; // // font-size: 14px; // // font-weight: 400; // // line-height: 20px; // // white-space: nowrap; // // // &:hover { // // // font-weight: 600; // // // } // // } // } // } // } } // Responsive for Mobile @media (max-width: 767px) { .cart_item_wrapper { .cart-item-attr-grid { grid-template-columns: 1fr; margin-top: 0px; } .cart_product_responsive_wrapper { display: flex; flex-direction: column; gap: 16px; .cart_product_top_section_wrapper { display: flex; align-items: flex-start; gap: 16px; .product_info_wrapper { .product_info_container { display: flex; flex-direction: column; gap: 2px; .product_title { text-overflow: ellipsis; line-height: 125%; margin-bottom: 4px; color: var( --_ctm-mob-dn-pt-ne-ss-cr, var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-ne-ss-ft-fy, var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-ne-ss-tt-tm, var(--_ctm-tab-dn-pt-ne-ss-tt-tm, var(--_ctm-dn-pt-ne-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-ne-ss-wd-wp, var(--_ctm-tab-dn-pt-ne-ss-wd-wp, var(--_ctm-dn-pt-ne-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-ne-ss-wd-bk, var(--_ctm-tab-dn-pt-ne-ss-wd-bk, var(--_ctm-dn-pt-ne-ss-wd-bk)) ) ); font-size: var( --_ctm-mob-dn-pt-ne-ss-ft-se, var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-ne-ss-ft-wt, var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-ne-ss-ft-se-ic, var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-ne-ss-tt-an, var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an)) ); text-decoration: var( --_ctm-mob-dn-pt-ne-ss-ue, var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-ne-ss); @include cartDetailsTextClamp; } .product_code { display: flex; align-items: center; align-self: stretch; flex-wrap: wrap; font-size: 14px; @include cartDetailsTextClamp; span { // color: var(--_gray-600); color: var( --_ctm-mob-dn-pt-in-ss-cr, var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-in-ss-ft-fy, var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-in-ss-tt-tm, var(--_ctm-tab-dn-pt-in-ss-tt-tm, var(--_ctm-dn-pt-in-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-in-ss-wd-wp, var(--_ctm-tab-dn-pt-in-ss-wd-wp, var(--_ctm-dn-pt-in-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-in-ss-wd-bk, var(--_ctm-tab-dn-pt-in-ss-wd-bk, var(--_ctm-dn-pt-in-ss-wd-bk)) ) ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); font-weight: var( --_ctm-mob-dn-pt-in-ss-ft-wt, var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-in-ss-ft-se-ic, var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-in-ss-tt-an, var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-in-ss-lr-sg, var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-in-ss-le-ht, var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-in-ss-ue, var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss); &:not(:last-child)::after { content: ""; display: inline-block; height: 10px; margin-inline: 12px; width: 1px; background-color: var(--_gray-400); } &:last-of-type::after { border-right: 0; } } } .product_options { display: flex; align-items: center; gap: 4px; align-self: stretch; flex-wrap: wrap; font-size: 14px; @include cartDetailsTextClamp; span { white-space: nowrap; color: var( --_ctm-mob-dn-pt-in-ss-cr, var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-in-ss-ft-fy, var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-in-ss-tt-tm, var(--_ctm-tab-dn-pt-in-ss-tt-tm, var(--_ctm-dn-pt-in-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-in-ss-wd-wp, var(--_ctm-tab-dn-pt-in-ss-wd-wp, var(--_ctm-dn-pt-in-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-in-ss-wd-bk, var(--_ctm-tab-dn-pt-in-ss-wd-bk, var(--_ctm-dn-pt-in-ss-wd-bk)) ) ); // font-size: var( // --_ctm-mob-dn-pt-in-ss-ft-se, // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se)) // ); font-weight: var( --_ctm-mob-dn-pt-in-ss-ft-wt, var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-in-ss-ft-se-ic, var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-in-ss-tt-an, var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-in-ss-lr-sg, var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-in-ss-le-ht, var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-in-ss-ue, var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss); &::after { content: "/"; padding-left: 4px; } &:last-of-type::after { content: ""; } } } } } .cart_product_info_wrapper { display: flex; flex-direction: column; gap: 16px; .product_details_wrapper { display: flex; gap: 16px; } .product_qty_price_wrapper { display: flex; justify-content: space-between; align-items: center; align-self: stretch; .product_qty_wrapper { display: flex; // width: 124px; flex-direction: column; align-items: flex-start; gap: 6px; width: 113px; .product_qty_container { display: flex; align-items: flex-start; align-self: stretch; border-radius: 4px; border: 0.5px solid var(--_thm-cs-be-se-3); background: #fff; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); .product_qty_label { display: flex; padding: 8px 12px; align-items: center; border-radius: 8px 0px 0px 8px; height: 40px; p { color: var(--_thm-ty-p1-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); // line-height: 24px; line-height: var(--_thm-ty-p1-le-ht); } } .product_qty_input_container { height: 40px; display: flex; position: relative; width: 55px; border-radius: 0px 4px 4px 0px; background: #fff; border-left: 1px solid var(--_thm-cs-be-se-3); padding: 8px 12px; .svg_icon { position: absolute; top: 8px; right: 0px; g { rect { fill: var(--_gray-500); width: 10px; height: 10px; } } } } .product_qty_number { // display: flex; // padding: 8px 12px; align-items: center; color: var(--_thm-ty-p2-tt-cr); font-size: var(--_thm-ty-p1-ft-se); font-weight: var(--_thm-ty-p1-bd); line-height: var(--_thm-ty-p1-le-ht); // gap: 8px; // flex: 1 0 0; // align-self: stretch; // border-radius: 0px 4px 4px 0px; // background: #fff; // border-left: 1px solid var(--_thm-cs-be-se-3); // max-width: 80px; text-align: center; width: 75%; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } } } .product_price { // color: var(--_gray-900); // text-align: right; // font-size: 20px; // font-weight: 700; // line-height: 30px; // white-space: nowrap; // min-width: 80px; 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)) ); 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)) ); font-style: var( --_ctm-mob-dn-pt-pe-ss-ft-se-ic, var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic)) ); text-align: right; letter-spacing: var( --_ctm-mob-dn-pt-pe-ss-lr-sg, var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-pe-ss-le-ht, var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-pe-ss-ue, var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-pe-ss); min-width: 80px; } } .product_customization_container { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--_thm-cs-be-se-3); .product_customization_left_container { display: flex; align-items: center; gap: 16px; min-height: 28px; .wishlist_icon { cursor: pointer; svg { padding: 4px; border-radius: 4px; width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1)) // ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25); stroke: var(--_thm-cs-be-se-1); } } &:hover { svg { background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent); width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { // stroke: var( // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1, // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1)) // ); stroke: var(--_thm-cs-at-py); } } } } .svg_icon { display: flex; // svg path { // stroke: var(--_primary-400); // } } .customization_button { display: flex; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; // color: var( // --_ctm-mob-dn-pt-as-ss-cr, // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)) // ); color: var(--_thm-cs-tt-ls-as); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-as-ss-ft-fy, var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-as-ss-tt-tm, var(--_ctm-tab-dn-pt-as-ss-tt-tm, var(--_ctm-dn-pt-as-ss-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-as-ss-wd-wp, var(--_ctm-tab-dn-pt-as-ss-wd-wp, var(--_ctm-dn-pt-as-ss-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-as-ss-wd-bk, var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-as-ss-ft-se, var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-as-ss-ft-wt, var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-as-ss-ft-se-ic, var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-as-ss-tt-an, var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-as-ss-lr-sg, var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-as-ss-le-ht, var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-as-ss-ue, var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss); .attr_val_info_detail { b { margin-right: 4px; } } .svg_icon { display: flex; transition: all 400ms linear; svg { path { // stroke: var( // --_ctm-mob-dn-pt-as-ss-cr, // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)) // ); stroke: var(--_thm-cs-tt-ls-as); } width: 18px; height: 18px; // margin-top: 2px; transition: transform 400ms linear; } } } .attributes_validation_info_sec { display: flex; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; b { margin-right: 4px; } } .svg_icon svg { vertical-align: middle; } .svg_icon.down svg { transform: rotate(180deg); transition: transform 400ms linear; // width: 20px; // height: 20px; } .customizationInfo_button { display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; color: var( --_ctm-mob-dn-pt-rd-io-cr, var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr)) ); font-family: var( --_sf-hr-ff, var( --_ctm-mob-dn-pt-rd-io-ft-fy, var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy)) ) ); text-transform: var( --_sf-hr-tt-tm, var( --_ctm-mob-dn-pt-rd-io-tt-tm, var(--_ctm-tab-dn-pt-rd-io-tt-tm, var(--_ctm-dn-pt-rd-io-tt-tm)) ) ); word-wrap: var( --_sf-hr-wd-wp, var( --_ctm-mob-dn-pt-rd-io-wd-wp, var(--_ctm-tab-dn-pt-rd-io-wd-wp, var(--_ctm-dn-pt-rd-io-wd-wp)) ) ); word-break: var( --_sf-hr-wd-bk, var( --_ctm-mob-dn-pt-rd-io-wd-bk, var(--_ctm-tab-dn-pt-rd-io-wd-bk, var(--_ctm-dn-pt-rd-io-wd-bk)) ) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_ctm-mob-dn-pt-rd-io-ft-se, var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se)) ); font-weight: var( --_ctm-mob-dn-pt-rd-io-ft-wt, var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt)) ); font-style: var( --_ctm-mob-dn-pt-rd-io-ft-se-ic, var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-pt-rd-io-tt-an, var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an)) ); letter-spacing: var( --_ctm-mob-dn-pt-rd-io-lr-sg, var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg)) ); line-height: var( --_ctm-mob-dn-pt-rd-io-le-ht, var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht)) ); text-decoration: var( --_ctm-mob-dn-pt-rd-io-ss-ue, var(--_ctm-tab-dn-pt-rd-io-ss-ue, var(--_ctm-dn-pt-rd-io-ss-ue)) ); @include cartDetailsTextFlow(--_ctm-dn-pt-rd-io); @include cartDetailsTextClamp; } } } .product_actions_wrapper { padding-block: 16px; border-block: 1px solid var(--_thm-cs-be-se-3); display: flex; align-items: center; gap: 16px; & > a, span { cursor: pointer; display: flex; align-items: center; border-radius: 4px; } & > * { display: flex; align-items: center; justify-content: center; } button { display: flex; } & > a, & > span { border-radius: 4px; padding: 4px; } .edit_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); height: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); path { stroke: var(--_thm-cs-be-se-1); } } &:hover { svg { width: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); height: var( --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se, var( --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se) ) ); path { stroke: var(--_thm-cs-at-py); } } } } .wishlist_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { stroke: var(--_thm-cs-be-se-1); } } &:hover { svg { width: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-wt-in-se, var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se)) ); path { stroke: var(--_thm-cs-at-py); } } } } .delete_cart_icon { cursor: pointer; svg { width: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); path { stroke: var( --_ctm-mob-dn-pt-an-pt-an-de-in-c1, var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1)) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25); } } &:hover { background-color: var(--_error-50); svg { width: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); height: var( --_ctm-mob-dn-pt-an-pt-an-de-in-se, var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se)) ); path { stroke: var( --_ctm-mob-dn-pt-an-pt-an-de-in-c1, var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1)) ); } } } } .svg_icon { display: flex; justify-content: center; align-items: center; } .product_action_button { display: flex; justify-content: center; align-items: center; gap: 8px; } a { width: 33%; display: flex; justify-content: center; border-radius: 4px; padding: 4px !important; &:hover { background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent); svg { path { stroke: var(--_thm-cs-at-py); } } } } button { width: 33%; display: flex; justify-content: center; border-radius: 4px; padding: 4px !important; } span:has(.cart-dropdown-container) { width: 33%; display: flex; justify-content: center; border-radius: 4px; button { width: 100%; padding: 0 !important; span { display: flex; align-items: center; border-radius: 4px; } } &:hover { background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent); span { svg { path { stroke: var(--_thm-cs-at-py); } } } } } .line_divider { height: 12px; background: var(--_thm-cs-be-se-3); width: 1px; } .primary_link { display: flex; justify-content: center; align-items: center; color: var( --_sf-ft-clr, var( --_ctm-mob-ty-bs-dt-se-tt-cr, var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit)) ) ) !important; span { svg { path { stroke: var( --_sf-ft-clr, var( --_ctm-mob-ty-bs-dt-se-tt-cr, var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit)) ) ); } } } } .destructive { color: var(--_gray-900); display: flex; align-items: center; justify-content: center; span { svg { path { stroke: var(--_gray-600); } } } &:hover { color: var(--_error-500); background-color: var(--_error-50); span { svg { path { stroke: var(--_error-500); } } } } } } } } } } } .brand_group_wrapper { .brand_title { margin-bottom: 8px; padding: 4px; } } } .infinite-group-list-container { max-height: calc(100vh - 200px); &.cart_items_grouped { margin-left: 30px; } } .space-y-4 > div { width: 100%; } .cart-form { padding-top: 12px; .section { padding: 12px; border: 1px solid #d9d9d9; .section-title { font-size: 1rem; font-weight: 600; color: #111827; cursor: pointer; &.error { color: #dc2626; } } } // .error-text { // font-size: 0.75rem; // color: #dc2626; // margin-top: 0.25rem; // } } .infinite-list-container { display: flex; flex-direction: column; gap: 32px; max-width: 100%; min-width: 100%; .list-item { max-width: 100%; min-width: 100%; } .pagination { display: flex; justify-content: center; align-items: center; margin-top: 1.5rem; gap: 0.5rem; button { padding: 0.5rem 1rem; border: 1px solid #d0d0d0; border-radius: 8px; background-color: #f9f9f9; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; &:hover:not(:disabled) { background-color: #007bff; color: white; border-color: #007bff; } &:disabled { opacity: 0.5; cursor: not-allowed; } &.active { background-color: #007bff; color: white; border-color: #007bff; } } } .loading { text-align: center; color: #666; font-size: 0.95rem; padding: 2rem 0; margin: auto; } .no-data { text-align: center; color: #aaa; font-size: 0.95rem; padding: 2rem 0; margin: auto; } .sentinel { height: 1px; } } @media (max-width: 767px) { .infinite-list-container { gap: 48px; } } // @media (max-width: 750px) { // .product_qty_price_wrapper { // // justify-content: flex-start !important; // } // .cart_product_right_wrapper { // flex-direction: inherit; // align-items: center; // margin-top: 24px !important; // width: 100%; // } // } // @media (max-width: 448px) { // // .wrapper { // // background-color: red; // // } // .cart_product_right_wrapper { // display: block; // } // .product_qty_price_wrapper { // margin-bottom: 12px; // } // .cart_product_left_wrapper { // display: block; // } // .cart_product_left_wrapper .product_image { // margin-bottom: 12px; // } // .product_info_wrapper { // width: 100%; // } // } // cart wrapper styles .wrapper { &[data-div-type="cms-cart-element-wrapper"] { background-color: var(--_base-white); } } .cart_wrapper_container { display: flex; flex-direction: column; gap: 24px; height: 400px; background-color: var(--_base-white); h2 { margin-bottom: 24px; } .cart_wrapper_empty_styles { height: 400px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: var(--_gray-900); } .cart_wrapper_loading { height: 400px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: var(--_gray-900); } } // cart loader .cart_loading_wpr { width: 100%; text-align: right; padding-left: 350px; height: 300px; display: flex; justify-content: center; align-items: center; .cart_loader { width: 50%; height: 8px; display: inline-block; position: relative; overflow: hidden; border-radius: 30px; } .cart_loader::before { content: ""; box-sizing: border-box; top: 0; left: 0; height: 100%; width: 100%; position: absolute; background-color: var(--_gay-400); background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent ); background-size: 15px 15px; z-index: 10; } .cart_loader::after { content: ""; box-sizing: border-box; width: 0%; height: 100%; background-color: var(--_gray-200); position: absolute; border-radius: 0 4px 4px 0; top: 0; left: 0; animation: animFw 4s ease-in infinite; } @keyframes animFw { 0% { width: 0; } 100% { width: 100%; } } } .product_qty_wrapper { .product_qty_uom { color: var(--_thm-ty-p3-tt-cr, var(--_gray-500)); font-size: var(--_thm-ty-p3-ft-se, 12px); font-weight: var(--_thm-ty-p3-bd, 400); line-height: var(--_thm-ty-p3-le-ht, 18px); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } }