@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +968 -3031
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1604
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3092
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -2386
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -903
  35. package/dist/cartDropdownOverlay.scss +514 -231
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +98 -46
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +2418 -2418
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -558
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +4 -3
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +209 -209
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +198 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1945 -381
  172. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  173. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  174. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  175. package/dist/uom-selector.scss +1169 -1169
  176. package/dist/user-elements copy.scss +1437 -1437
  177. package/dist/user-elements.scss +2471 -2471
  178. package/dist/variant-picker.scss +2384 -2384
  179. package/dist/video.scss +476 -476
  180. package/dist/volume-pricing copy 2.scss +1468 -1468
  181. package/dist/volume-pricing copy.scss +1077 -1077
  182. package/dist/volume-pricing.scss +1175 -1175
  183. package/dist/widget.scss +148 -148
  184. package/dist/wishlist-overlay.scss +48 -48
  185. package/package.json +1 -1
package/dist/bundleDetails copy.scss CHANGED
@@ -1,1431 +1,1431 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- $resizerId: "[data-cms-tool='cms-element-resizer']";
5
- $resizeActive: '[data-cms-element-resizer="true"]';
6
- [data-div-type="element"] {
7
- &[data-element-type="bundleDetails"] {
8
- // width: var(--_sf-con-nw-wh);
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
13
- )
14
- );
15
-
16
- height: auto;
17
-
18
- margin: var(
19
- --_ctm-mob-lt-mn,
20
- var(
21
- --_ctm-tab-lt-mn,
22
- var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
23
- )
24
- );
25
-
26
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
27
- background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
28
- background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
29
- background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
30
- background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
31
- background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
32
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
33
-
34
- border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
35
-
36
- border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
37
-
38
- border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
39
-
40
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
41
-
42
- box-shadow: var(
43
- --_show-shadow,
44
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
45
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
46
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
47
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
48
- );
49
-
50
- // &:not(:has(#{$resizerId}#{$resizeActive})) {
51
- // min-height: 100px !important;
52
- // }
53
-
54
- & > div {
55
- &.wrapper {
56
- width: 100%;
57
- // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important;
58
- }
59
- }
60
-
61
- .embla {
62
- width: 100%;
63
- height: 100%;
64
- position: relative;
65
- display: flex;
66
- flex-direction: column;
67
- // overflow: hidden;
68
-
69
- .embla__viewport {
70
- width: 100%;
71
- height: 100%;
72
- position: relative;
73
- display: flex;
74
- flex-direction: column;
75
-
76
- overflow: hidden;
77
-
78
- .embla__container {
79
- width: 100%;
80
- height: 100%;
81
- display: grid;
82
- grid-template-rows: 100%;
83
-
84
- grid-template-columns: repeat(
85
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
86
- calc(
87
- 100% /
88
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
89
- )
90
- );
91
-
92
- grid-auto-flow: column;
93
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
94
-
95
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
96
- height: calc(
97
- 100% - calc(
98
- var(
99
- --_ctm-mob-dn-pn-as-aw-se,
100
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
101
- ) +
102
- 10px
103
- )
104
- );
105
- }
106
-
107
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
108
- height: calc(
109
- 100% - calc(
110
- var(
111
- --_ctm-mob-dn-pn-le-le-ht,
112
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
113
- ) +
114
- 20px
115
- )
116
- );
117
- }
118
-
119
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
120
- height: calc(
121
- 100% - calc(
122
- var(
123
- --_ctm-mob-dn-pn-ds-dt-se,
124
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
125
- ) +
126
- 20px
127
- )
128
- );
129
- }
130
-
131
- .embla__slide {
132
- width: 100%;
133
- height: 100%;
134
- }
135
- }
136
- }
137
- &:not([data-display-style="Column"]) {
138
- .embla__container {
139
- grid-auto-columns: calc(
140
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
141
- );
142
- }
143
- }
144
-
145
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
146
- // overflow: unset;
147
-
148
- .embla__viewport {
149
- overflow: unset;
150
- height: 80%;
151
- flex-grow: 1;
152
- &:not([data-is-builder-type="true"]) {
153
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
154
- }
155
-
156
- .embla__container {
157
- overflow: unset;
158
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
159
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
160
-
161
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
162
- grid-template-rows: unset;
163
-
164
- grid-auto-flow: row;
165
-
166
- &[data-overflow-hidden="true"] {
167
- overflow: hidden;
168
- }
169
- }
170
- }
171
- }
172
-
173
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
174
- .embla__viewport {
175
- .embla__container {
176
- grid-template-rows: repeat(
177
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
178
- calc(
179
- 100% /
180
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
181
- )
182
- );
183
- }
184
- }
185
- }
186
-
187
- &[data-display-style="Rows"] {
188
- // overflow: unset;
189
-
190
- .embla__viewport {
191
- overflow: unset;
192
- height: 80%;
193
- flex-grow: 1;
194
-
195
- &:not([data-is-builder-type="true"]) {
196
- height: var(--_ctm-height);
197
- }
198
-
199
- .embla__container {
200
- overflow: hidden;
201
- height: var(--_ctm-height);
202
- // min-height: var(--_ctm-height);
203
-
204
- grid-template-columns: repeat(
205
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
206
- 1fr
207
- );
208
- grid-template-rows: unset;
209
- grid-auto-flow: row;
210
- }
211
- }
212
- }
213
-
214
- &[data-display-style="Column"] {
215
- // overflow: unset;
216
-
217
- .embla__viewport {
218
- .embla__container {
219
- display: flex;
220
- .embla__slide {
221
- width: unset;
222
- height: 100%;
223
- aspect-ratio: 1 / 2;
224
- }
225
- }
226
- }
227
- }
228
- &[data-display-style="Masonry"] {
229
- // overflow: unset;
230
-
231
- .embla__viewport {
232
- overflow: hidden;
233
- height: 80%;
234
- flex-grow: 1;
235
-
236
- &:not([data-is-builder-type="true"]) {
237
- height: var(--_ctm-height);
238
- }
239
-
240
- .embla__container {
241
- overflow: unset;
242
- display: block;
243
-
244
- column-count: var(
245
- --_ctm-mob-lt-is-pr-rw,
246
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
247
- );
248
- gap: unset;
249
-
250
- column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
251
-
252
- height: auto;
253
-
254
- .embla__slide {
255
- margin-bottom: var(
256
- --_ctm-mob-lt-im-gp,
257
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
258
- );
259
- height: unset;
260
-
261
- .gallery__slide {
262
- height: unset;
263
- }
264
- }
265
- }
266
- }
267
- }
268
-
269
- .arrow-navigation {
270
- display: flex;
271
- position: absolute;
272
- top: 50%;
273
- left: 50%;
274
- width: 100%;
275
- justify-content: space-between;
276
- transform: translate(-50%, -50%);
277
- // padding-left: 20px;
278
- &[data-control-type="Side"] {
279
- .left-button,
280
- .right-button {
281
- background-color: transparent;
282
- }
283
- }
284
- &[data-background-shape="Round"] {
285
- .left-button,
286
- .right-button {
287
- background-color: #f2f5f5;
288
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
289
- }
290
- }
291
- &[data-control-type="Bottom-Overflow"] {
292
- transform: translateX(-50%);
293
- width: 100%;
294
- justify-content: center;
295
- gap: 12px;
296
- top: unset;
297
- bottom: 6px;
298
- }
299
- &[data-control-type="Bottom"] {
300
- transform: unset;
301
- position: static;
302
- width: 100%;
303
- justify-content: center;
304
- gap: 12px;
305
- margin-top: 10px;
306
- }
307
- .left-button {
308
- padding: 10px;
309
- border-radius: 50%;
310
- border: none;
311
- width: var(
312
- --_ctm-mob-dn-pn-as-aw-se,
313
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
314
- );
315
- height: var(
316
- --_ctm-mob-dn-pn-as-aw-se,
317
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
- );
319
-
320
- display: flex;
321
- align-items: center;
322
- justify-content: center;
323
- cursor: pointer;
324
- outline: none;
325
- margin-left: 12px;
326
- &:disabled {
327
- & svg {
328
- path {
329
- stroke: rgb(192, 192, 192);
330
- }
331
- }
332
- }
333
- }
334
- .right-button {
335
- border-radius: 50%;
336
- border: none;
337
- width: var(
338
- --_ctm-mob-dn-pn-as-aw-se,
339
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
340
- );
341
- height: var(
342
- --_ctm-mob-dn-pn-as-aw-se,
343
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
- );
345
-
346
- display: flex;
347
- align-items: center;
348
- justify-content: center;
349
- cursor: pointer;
350
- outline: none;
351
- margin-right: 12px;
352
- padding: 10px;
353
-
354
- &:disabled {
355
- & svg {
356
- path {
357
- stroke: rgb(192, 192, 192);
358
- }
359
- }
360
- }
361
- }
362
- .icon {
363
- display: flex;
364
-
365
- svg {
366
- width: calc(
367
- var(
368
- --_ctm-mob-dn-pn-as-aw-se,
369
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
370
- ) *
371
- 0.5
372
- );
373
- height: calc(
374
- var(
375
- --_ctm-mob-dn-pn-as-aw-se,
376
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
377
- ) *
378
- 0.5
379
- );
380
-
381
- path {
382
- stroke: var(
383
- --_ctm-mob-dn-pn-as-aw-cr,
384
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
385
- );
386
- }
387
- }
388
- }
389
- }
390
-
391
- &[data-control-type="Side"] {
392
- .embla__viewport {
393
- width: calc(100% - 120px);
394
- margin-inline: auto;
395
- }
396
- .left-button {
397
- position: absolute;
398
- left: 0;
399
- top: 50%;
400
- transform: translateY(-50%);
401
- }
402
- .right-button {
403
- position: absolute;
404
-
405
- right: 0;
406
- top: 50%;
407
- transform: translateY(-50%);
408
- }
409
- }
410
-
411
- &[data-thumbnail-placement="top"] {
412
- flex-direction: column-reverse;
413
- }
414
- &[data-thumbnail-placement="bottom"] {
415
- flex-direction: column;
416
- }
417
- &[data-thumbnail-placement="left"] {
418
- flex-direction: row-reverse;
419
-
420
- .embla__thumbs {
421
- width: var(--_ctm-lt-tl-se);
422
- height: 100%;
423
-
424
- & .embla__thumbs__container {
425
- flex-direction: column;
426
- height: 100%;
427
- }
428
- }
429
- }
430
- &[data-thumbnail-placement="right"] {
431
- flex-direction: row;
432
- .embla__thumbs {
433
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
434
-
435
- height: 100%;
436
-
437
- & .embla__thumbs__container {
438
- flex-direction: column;
439
- height: 100%;
440
- }
441
- }
442
- }
443
- .embla__dots {
444
- display: flex;
445
- flex-wrap: wrap;
446
- justify-content: center;
447
- align-items: center;
448
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
449
- gap: 6px;
450
- margin-top: 16px;
451
-
452
- &[data-control-type="Bottom-Overflow"] {
453
- position: absolute;
454
- bottom: 10px;
455
- left: 50%;
456
- transform: translateX(-50%);
457
- width: 75%;
458
- }
459
- .embla__dot {
460
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
461
- -webkit-appearance: none;
462
- appearance: none;
463
- background-color: var(
464
- --_ctm-mob-dn-pn-ds-or-dt-cr,
465
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
466
- );
467
-
468
- touch-action: manipulation;
469
- display: inline-flex;
470
- text-decoration: none;
471
- cursor: pointer;
472
- border: 0;
473
- padding: 0;
474
- margin: 0;
475
- // width: 0.6rem;
476
- // height: 0.6rem;
477
- width: var(
478
- --_ctm-mob-dn-pn-ds-dt-se,
479
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
480
- );
481
- height: var(
482
- --_ctm-mob-dn-pn-ds-dt-se,
483
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
484
- );
485
-
486
- display: flex;
487
- align-items: center;
488
- justify-content: center;
489
- border-radius: 50%;
490
- }
491
- .embla__dot:after {
492
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
493
- width: var(
494
- --_ctm-mob-dn-pn-ds-dt-se,
495
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
496
- );
497
- height: var(
498
- --_ctm-mob-dn-pn-ds-dt-se,
499
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
500
- );
501
-
502
- border-radius: 50%;
503
- display: flex;
504
- align-items: center;
505
- content: "";
506
- }
507
- .embla__dot--selected:after {
508
- box-shadow: inset 0 0 0 1px var(--text-body);
509
- background-color: var(
510
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
511
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
512
- );
513
- }
514
- &[data-slider-control="Pagination Line"] {
515
- .embla__dot {
516
- width: var(
517
- --_ctm-mob-dn-pn-le-le-wh,
518
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
519
- );
520
- height: var(
521
- --_ctm-mob-dn-pn-le-le-ht,
522
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
523
- );
524
- background-color: var(
525
- --_ctm-mob-dn-pn-le-or-le-cr,
526
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
527
- );
528
- border-radius: 6px;
529
- }
530
-
531
- .embla__dot--selected:after {
532
- box-shadow: inset 0 0 0 1px var(--text-body);
533
- border-radius: 6px;
534
- width: var(
535
- --_ctm-mob-dn-pn-le-le-wh,
536
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
537
- );
538
- height: var(
539
- --_ctm-mob-dn-pn-le-le-ht,
540
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
541
- );
542
- background-color: var(
543
- --_ctm-mob-dn-pn-le-ct-le-cr,
544
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
545
- );
546
- }
547
- }
548
- }
549
-
550
- .embla__thumbs {
551
- width: 100%;
552
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
553
-
554
- position: relative;
555
- display: grid;
556
- grid-template-columns: 1fr;
557
- overflow: hidden;
558
- // margin: 10px;
559
- padding: 10px;
560
-
561
- .embla__thumbs__viewport {
562
- width: 100%;
563
- height: 100%;
564
- position: relative;
565
- display: flex;
566
- flex-direction: column;
567
-
568
- overflow: hidden;
569
- }
570
- .embla__thumbs__container {
571
- display: flex;
572
- flex-direction: row;
573
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
574
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
575
-
576
- width: 100%;
577
- // justify-content: center;
578
- // height: 200px;
579
-
580
- .embla__thumbs__slide {
581
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
582
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
583
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
584
-
585
- & img {
586
- width: 100%;
587
- height: 100%;
588
- }
589
- }
590
- }
591
- }
592
- }
593
-
594
- .bundle__details__element__container {
595
- width: 100%;
596
- }
597
-
598
- .bundle_details_heading_wrapper {
599
- display: flex;
600
- width: 100%;
601
- flex-direction: column;
602
- padding: 24px 96px;
603
- border-bottom: 1px solid #d0d5dd;
604
- gap: 16px;
605
-
606
- .bundle_details_heading_text_wrapper {
607
- display: flex;
608
- flex-direction: column;
609
- gap: 6px;
610
- width: 100%;
611
- flex: 1 0 0;
612
-
613
- .bundle_name {
614
- background-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr);
615
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
616
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
617
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
618
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
619
- color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
620
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
621
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
622
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
623
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
624
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
625
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
626
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
627
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
628
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
629
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
630
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
631
- }
632
-
633
- .bundle_description {
634
- background-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-bd-cr);
635
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-cr);
636
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-rs);
637
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-se);
638
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-wh);
639
- color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-cr);
640
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-fy);
641
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se);
642
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se-ic);
643
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-wt);
644
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-le-ht);
645
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-lr-sg);
646
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-ae)
647
- var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-sd)
648
- var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-cr);
649
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-an);
650
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ue);
651
- }
652
- }
653
-
654
- .category_card_wrapper {
655
- display: flex;
656
- padding: 16px;
657
- gap: 12px;
658
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
659
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
660
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
661
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
662
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
663
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
664
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
665
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
666
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
667
-
668
- &:hover {
669
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
670
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
671
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
672
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
673
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
674
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
675
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
676
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
677
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
678
- }
679
-
680
- &.active {
681
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
682
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
683
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
684
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
685
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
686
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
687
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
688
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
689
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
690
- }
691
-
692
- .category_image {
693
- width: 48px;
694
- height: 72px;
695
- }
696
-
697
- .category_card_info_wrapper {
698
- display: flex;
699
- flex-direction: column;
700
- gap: 4px;
701
- width: fit-content;
702
- white-space: nowrap;
703
-
704
- .category_card_category_name {
705
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
706
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
707
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
708
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
709
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
710
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
711
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
712
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
713
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
714
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
715
- }
716
-
717
- .category_card_product_count {
718
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
719
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
720
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
721
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
722
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
723
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
724
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
725
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
726
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
727
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
728
- }
729
-
730
- .category_card_product_select_count {
731
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
732
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
733
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
734
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
735
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
736
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
737
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
738
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
739
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
740
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
741
- }
742
- }
743
- }
744
- }
745
-
746
- .bundle_details_product_list_wrapper {
747
- display: flex;
748
- flex-direction: column;
749
- gap: 16px;
750
- padding: 36px 96px;
751
- width: 100%;
752
-
753
- .add_to_cart_wrapper {
754
- display: flex;
755
- flex-direction: column;
756
- gap: 16px;
757
- padding: 16px;
758
- width: 100%;
759
- background-color: #f5f5f5;
760
-
761
- .add_to_cart_heading {
762
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
763
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
764
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
765
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
766
- color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
767
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
768
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
769
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
770
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
771
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
772
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
773
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
774
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
775
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
776
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
777
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
778
- }
779
-
780
- .add_to_cart_estimator_wrapper {
781
- display: flex;
782
- gap: 48px;
783
- justify-content: space-between;
784
- width: 100%;
785
-
786
- .add_to_cart_estimate_wrapper {
787
- display: flex;
788
- flex-direction: column;
789
- gap: 6px;
790
-
791
- .add_to_cart_qty {
792
- width: 205px;
793
- border: 1px solid #d0d5dd !important;
794
- border-radius: 2px !important;
795
- outline: none;
796
- padding: 8px 12px !important;
797
- background-color: #f9fafb;
798
- }
799
-
800
- .add_to_cart_price {
801
- background-color: transparent;
802
- color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
803
- font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
804
- font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
805
- font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
806
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
807
- line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
808
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
809
- text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
810
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
811
- }
812
-
813
- .add_to_cart_estimate_label {
814
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
815
- line-height: 150%;
816
- font-size: 16px;
817
- color: #000000;
818
- }
819
- }
820
- }
821
-
822
- .add_to_cart_btn {
823
- display: flex;
824
- justify-content: center;
825
- align-items: center;
826
- padding: 10px 16px;
827
- transition: all 0.3s ease;
828
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
829
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
830
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
831
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
832
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
833
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
834
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
835
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
836
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
837
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
838
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
839
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
840
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
841
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
842
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
843
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
844
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
845
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
846
-
847
- &:disabled {
848
- cursor: not-allowed;
849
- }
850
-
851
- &:hover {
852
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
853
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
854
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
855
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
856
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
857
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
858
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
859
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
860
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
861
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
862
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
863
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
864
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
865
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
866
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
867
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
868
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
869
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
870
- }
871
-
872
- &.selected {
873
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
874
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
875
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
876
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
877
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
878
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
879
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
880
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
881
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
882
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
883
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
884
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
885
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
886
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
887
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
888
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
889
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
890
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
891
-
892
- .icon {
893
- color: white;
894
- }
895
- }
896
- }
897
- }
898
-
899
- .bundle_details_product_wrapper {
900
- display: flex;
901
- gap: 48px;
902
- width: 100%;
903
-
904
- &.vertical_wrapper {
905
- flex-direction: row;
906
-
907
- .product_card_scroll_wrapper {
908
- min-width: 400px;
909
- max-width: 400px;
910
- display: flex;
911
- flex-direction: column;
912
- gap: 16px;
913
-
914
- .category_bundle_product_card {
915
- width: 100%;
916
- display: flex;
917
- padding: 16px;
918
- gap: 16px;
919
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr);
920
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr);
921
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs);
922
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se);
923
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh);
924
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae)
925
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br)
926
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd)
927
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr);
928
-
929
- &:hover {
930
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr);
931
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr);
932
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs);
933
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se);
934
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh);
935
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae)
936
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br)
937
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd)
938
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr);
939
- }
940
-
941
- &.active {
942
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr);
943
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr);
944
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs);
945
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se);
946
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh);
947
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae)
948
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br)
949
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd)
950
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr);
951
-
952
- .category_bundle_product_card_product_name {
953
- font-weight: bolder;
954
- }
955
- }
956
-
957
- .category_bundle_product_card_select {
958
- width: auto;
959
- }
960
-
961
- .category_bundle_product_card_img {
962
- width: 80px;
963
- height: auto;
964
- }
965
-
966
- .category_bundle_product_card_info {
967
- display: flex;
968
- flex-direction: column;
969
- gap: 24px;
970
-
971
- .category_bundle_product_card_info_wrapper {
972
- display: flex;
973
- flex-direction: column;
974
- gap: 6px;
975
-
976
- .category_bundle_product_card_product_name {
977
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr);
978
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr);
979
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy);
980
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se);
981
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic);
982
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt);
983
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht);
984
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg);
985
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an);
986
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue);
987
- }
988
-
989
- .category_bundle_product_card_brand_name {
990
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
991
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
992
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
993
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
994
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
995
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
996
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
997
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
998
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
999
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1000
- }
1001
-
1002
- .category_bundle_product_card_item_name {
1003
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
1004
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
1005
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
1006
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
1007
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
1008
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
1009
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
1010
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
1011
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
1012
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1013
- }
1014
- }
1015
-
1016
- .category_bundle_product_card_product_price {
1017
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr);
1018
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
1019
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
1020
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
1021
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
1022
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
1023
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
1024
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
1025
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
1026
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
1027
- }
1028
- }
1029
- }
1030
- }
1031
- }
1032
-
1033
- .gallery {
1034
- display: flex;
1035
- flex-direction: column;
1036
- gap: 16px;
1037
-
1038
- .mainImage {
1039
- position: relative;
1040
- overflow: visible;
1041
- border-radius: 8px;
1042
- background-color: #f9fafb;
1043
- aspect-ratio: 1 / 1;
1044
- width: 360px;
1045
-
1046
- &::before {
1047
- content: "";
1048
- display: block;
1049
- padding-top: 100%;
1050
- }
1051
- }
1052
-
1053
- .image {
1054
- position: absolute;
1055
- top: 0;
1056
- left: 0;
1057
- width: 100%;
1058
- height: 100%;
1059
- object-fit: cover;
1060
- transition: transform 0.3s ease-in-out;
1061
-
1062
- &:hover {
1063
- transform: scale(1.05);
1064
- }
1065
- }
1066
-
1067
- .thumbnails {
1068
- display: flex;
1069
- gap: 8px;
1070
- }
1071
-
1072
- .thumbnailButton {
1073
- width: 80px;
1074
- height: 80px;
1075
- padding: 0;
1076
- border: 2px solid transparent;
1077
- border-radius: 6px;
1078
- overflow: hidden;
1079
- cursor: pointer;
1080
- background: none;
1081
- transition: border-color 0.2s ease-in-out;
1082
-
1083
- &:hover {
1084
- border-color: #dbeafe;
1085
- }
1086
-
1087
- &.active {
1088
- border-color: #2563eb;
1089
- }
1090
-
1091
- &:focus {
1092
- outline: none;
1093
- border-color: #2563eb;
1094
- box-shadow: 0 0 0 2px #dbeafe;
1095
- }
1096
- }
1097
-
1098
- .thumbnailImage {
1099
- width: 100%;
1100
- height: 100%;
1101
- object-fit: cover;
1102
- }
1103
- }
1104
-
1105
- .bundle_detail_product_information {
1106
- display: flex;
1107
- flex-direction: column;
1108
- flex: 1 0 0;
1109
- width: 100%;
1110
- gap: 24px;
1111
-
1112
- .bundle_detail_product_image_slide_wrapper {
1113
- display: flex;
1114
- max-width: 40rem;
1115
- gap: 16px;
1116
- overflow-x: scroll;
1117
-
1118
- .bundle_detail_product_image_slide {
1119
- width: 148px;
1120
- height: 248px;
1121
- }
1122
- }
1123
-
1124
- .bundle_detail_product_heading_wrapper {
1125
- display: flex;
1126
- flex-direction: column;
1127
- gap: 6px;
1128
- width: 100%;
1129
-
1130
- .bundle_detail_product_name {
1131
- background-color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr);
1132
- color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr);
1133
- font-family: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy);
1134
- font-size: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se);
1135
- font-style: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic);
1136
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt);
1137
- line-height: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht);
1138
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg);
1139
- text-align: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an);
1140
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue);
1141
- width: 100%;
1142
- }
1143
-
1144
- .bundle_detail_product_info {
1145
- background-color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr);
1146
- color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-cr);
1147
- font-family: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy);
1148
- font-size: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se);
1149
- font-style: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic);
1150
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt);
1151
- line-height: var(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht);
1152
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg);
1153
- text-align: var(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an);
1154
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ue);
1155
- width: 100%;
1156
- }
1157
- }
1158
-
1159
- .bundle_detail_product_price {
1160
- background-color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr);
1161
- color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
1162
- font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
1163
- font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
1164
- font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
1165
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
1166
- line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
1167
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
1168
- text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
1169
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
1170
- width: 100%;
1171
- }
1172
-
1173
- .standard_wrapper {
1174
- // Select Colors
1175
- .select__colors {
1176
- font-size: 16px;
1177
- color: var(--_gray-500);
1178
- display: flex;
1179
- flex-direction: column;
1180
- gap: 8px;
1181
- padding: 12px;
1182
-
1183
- .title {
1184
- margin-bottom: 4px;
1185
- color: #000000;
1186
- font-size: 16px;
1187
- }
1188
-
1189
- .select__group {
1190
- display: flex;
1191
- flex-direction: row;
1192
- gap: 8px;
1193
-
1194
- .item {
1195
- background-color: #ffffff;
1196
-
1197
- &.selected_item {
1198
- width: fit-content;
1199
- border: 1px solid #000000;
1200
- }
1201
- .select__group__item {
1202
- transition: width 0.3s ease;
1203
- width: 30px;
1204
- height: 30px;
1205
- border: 1px solid #d0d5dd;
1206
- cursor: pointer;
1207
- overflow: hidden;
1208
-
1209
- &.selected {
1210
- width: 45px;
1211
- border: 1px solid #000;
1212
- }
1213
-
1214
- &.disabled {
1215
- cursor: not-allowed;
1216
- opacity: 0.4;
1217
- }
1218
- .product-select-image {
1219
- width: 40px;
1220
- height: 40px;
1221
- object-fit: contain;
1222
- }
1223
- }
1224
- }
1225
- }
1226
- }
1227
- // Select Fit and Size
1228
- .select__fit {
1229
- font-size: 16px;
1230
- color: var(--_gray-500);
1231
- display: flex;
1232
- flex-direction: column;
1233
- gap: 8px;
1234
-
1235
- padding: 12px;
1236
-
1237
- .title {
1238
- margin-bottom: 4px;
1239
- color: #000000;
1240
- font-size: 16px;
1241
- line-height: 150%;
1242
- }
1243
- .select__group {
1244
- display: flex;
1245
- gap: 8px;
1246
- flex-wrap: wrap;
1247
- margin-bottom: 10px;
1248
- flex-direction: row;
1249
- gap: 8px;
1250
-
1251
- .select__group__item {
1252
- transition: color 0.3s ease;
1253
- padding: 5px 12px;
1254
- border-radius: 6px;
1255
- border: 1px solid var(--_gray-200);
1256
- font-size: 16px;
1257
- font-weight: 600;
1258
- cursor: pointer;
1259
- border: 1px solid #d0d5dd;
1260
- color: #000000;
1261
- font-size: 16px;
1262
- line-height: 150%;
1263
-
1264
- &.child {
1265
- border: 0;
1266
- border-radius: 0;
1267
- border-bottom: 2px solid var(--_gray-200);
1268
- }
1269
- &.selected {
1270
- border: 1px solid var(--_primary-200);
1271
- background-color: var(--_primary-25);
1272
- color: var(--_primary-400);
1273
-
1274
- border: 1pxsolid #000000;
1275
- color: #000000;
1276
- font-weight: bold;
1277
- }
1278
-
1279
- &.selected__child {
1280
- border: 0px;
1281
- border-bottom: 2px solid var(--_primary-400);
1282
- }
1283
- &.disabled {
1284
- cursor: not-allowed;
1285
- opacity: 0.4;
1286
- position: relative;
1287
- overflow: hidden;
1288
- &::after {
1289
- content: "";
1290
- width: 172%;
1291
- height: 1px;
1292
- position: absolute;
1293
- background: #f00;
1294
- left: -14px;
1295
- transform: rotate(48deg);
1296
- /* -webkit-transform: rotate(48deg); */
1297
- -moz-transform: rotate(48deg);
1298
- top: 14px;
1299
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1300
- }
1301
- &::before {
1302
- content: "";
1303
- width: 164%;
1304
- height: 1px;
1305
- position: absolute;
1306
- background: #f00;
1307
- left: -14px;
1308
- transform: rotate(-48deg);
1309
- -webkit-transform: rotate(-48deg);
1310
- -moz-transform: rotate(-48deg);
1311
- top: 14px;
1312
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1313
- }
1314
- }
1315
- }
1316
- }
1317
- }
1318
- }
1319
-
1320
- .bundle_detail_product_qty_select {
1321
- display: flex;
1322
- justify-content: space-between;
1323
- align-items: flex-start;
1324
- width: 100%;
1325
-
1326
- .add_to_cart_qty_wrapper {
1327
- display: flex;
1328
- flex-direction: column;
1329
- gap: 6px;
1330
-
1331
- .add_to_cart_qty {
1332
- width: 205px;
1333
- border: 1px solid #d0d5dd !important;
1334
- border-radius: 2px !important;
1335
- outline: none;
1336
- padding: 8px 12px !important;
1337
- background-color: #f9fafb;
1338
- }
1339
-
1340
- small {
1341
- color: red;
1342
- }
1343
- }
1344
-
1345
- .select-button {
1346
- display: flex;
1347
- align-items: center;
1348
- padding: 10px 16px;
1349
- transition: all 0.3s ease;
1350
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
1351
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
1352
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
1353
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
1354
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
1355
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
1356
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
1357
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
1358
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
1359
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
1360
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
1361
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
1362
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
1363
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
1364
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
1365
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
1366
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
1367
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
1368
-
1369
- &:hover {
1370
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
1371
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
1372
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
1373
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
1374
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
1375
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
1376
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
1377
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
1378
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
1379
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
1380
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
1381
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
1382
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
1383
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
1384
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
1385
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
1386
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
1387
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
1388
- }
1389
-
1390
- .icon {
1391
- margin-right: 8px;
1392
- color: #003366;
1393
- }
1394
-
1395
- &.selected {
1396
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
1397
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
1398
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
1399
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
1400
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
1401
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
1402
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
1403
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
1404
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
1405
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
1406
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
1407
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
1408
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
1409
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
1410
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
1411
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
1412
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
1413
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
1414
-
1415
- .icon {
1416
- color: white;
1417
- }
1418
- }
1419
- }
1420
- }
1421
- }
1422
- }
1423
-
1424
- hr {
1425
- &:last-child {
1426
- display: none;
1427
- }
1428
- }
1429
- }
1430
- }
1431
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="bundleDetails"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
13
+ )
14
+ );
15
+
16
+ height: auto;
17
+
18
+ margin: var(
19
+ --_ctm-mob-lt-mn,
20
+ var(
21
+ --_ctm-tab-lt-mn,
22
+ var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
23
+ )
24
+ );
25
+
26
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
27
+ background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
28
+ background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
29
+ background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
30
+ background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
31
+ background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
32
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
33
+
34
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
35
+
36
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
37
+
38
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
39
+
40
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
41
+
42
+ box-shadow: var(
43
+ --_show-shadow,
44
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
45
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
46
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
47
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
48
+ );
49
+
50
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
51
+ // min-height: 100px !important;
52
+ // }
53
+
54
+ & > div {
55
+ &.wrapper {
56
+ width: 100%;
57
+ // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important;
58
+ }
59
+ }
60
+
61
+ .embla {
62
+ width: 100%;
63
+ height: 100%;
64
+ position: relative;
65
+ display: flex;
66
+ flex-direction: column;
67
+ // overflow: hidden;
68
+
69
+ .embla__viewport {
70
+ width: 100%;
71
+ height: 100%;
72
+ position: relative;
73
+ display: flex;
74
+ flex-direction: column;
75
+
76
+ overflow: hidden;
77
+
78
+ .embla__container {
79
+ width: 100%;
80
+ height: 100%;
81
+ display: grid;
82
+ grid-template-rows: 100%;
83
+
84
+ grid-template-columns: repeat(
85
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
86
+ calc(
87
+ 100% /
88
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
89
+ )
90
+ );
91
+
92
+ grid-auto-flow: column;
93
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
94
+
95
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
96
+ height: calc(
97
+ 100% - calc(
98
+ var(
99
+ --_ctm-mob-dn-pn-as-aw-se,
100
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
101
+ ) +
102
+ 10px
103
+ )
104
+ );
105
+ }
106
+
107
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
108
+ height: calc(
109
+ 100% - calc(
110
+ var(
111
+ --_ctm-mob-dn-pn-le-le-ht,
112
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
113
+ ) +
114
+ 20px
115
+ )
116
+ );
117
+ }
118
+
119
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
120
+ height: calc(
121
+ 100% - calc(
122
+ var(
123
+ --_ctm-mob-dn-pn-ds-dt-se,
124
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
125
+ ) +
126
+ 20px
127
+ )
128
+ );
129
+ }
130
+
131
+ .embla__slide {
132
+ width: 100%;
133
+ height: 100%;
134
+ }
135
+ }
136
+ }
137
+ &:not([data-display-style="Column"]) {
138
+ .embla__container {
139
+ grid-auto-columns: calc(
140
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
141
+ );
142
+ }
143
+ }
144
+
145
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
146
+ // overflow: unset;
147
+
148
+ .embla__viewport {
149
+ overflow: unset;
150
+ height: 80%;
151
+ flex-grow: 1;
152
+ &:not([data-is-builder-type="true"]) {
153
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
154
+ }
155
+
156
+ .embla__container {
157
+ overflow: unset;
158
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
159
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
160
+
161
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
162
+ grid-template-rows: unset;
163
+
164
+ grid-auto-flow: row;
165
+
166
+ &[data-overflow-hidden="true"] {
167
+ overflow: hidden;
168
+ }
169
+ }
170
+ }
171
+ }
172
+
173
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
174
+ .embla__viewport {
175
+ .embla__container {
176
+ grid-template-rows: repeat(
177
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
178
+ calc(
179
+ 100% /
180
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
181
+ )
182
+ );
183
+ }
184
+ }
185
+ }
186
+
187
+ &[data-display-style="Rows"] {
188
+ // overflow: unset;
189
+
190
+ .embla__viewport {
191
+ overflow: unset;
192
+ height: 80%;
193
+ flex-grow: 1;
194
+
195
+ &:not([data-is-builder-type="true"]) {
196
+ height: var(--_ctm-height);
197
+ }
198
+
199
+ .embla__container {
200
+ overflow: hidden;
201
+ height: var(--_ctm-height);
202
+ // min-height: var(--_ctm-height);
203
+
204
+ grid-template-columns: repeat(
205
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
206
+ 1fr
207
+ );
208
+ grid-template-rows: unset;
209
+ grid-auto-flow: row;
210
+ }
211
+ }
212
+ }
213
+
214
+ &[data-display-style="Column"] {
215
+ // overflow: unset;
216
+
217
+ .embla__viewport {
218
+ .embla__container {
219
+ display: flex;
220
+ .embla__slide {
221
+ width: unset;
222
+ height: 100%;
223
+ aspect-ratio: 1 / 2;
224
+ }
225
+ }
226
+ }
227
+ }
228
+ &[data-display-style="Masonry"] {
229
+ // overflow: unset;
230
+
231
+ .embla__viewport {
232
+ overflow: hidden;
233
+ height: 80%;
234
+ flex-grow: 1;
235
+
236
+ &:not([data-is-builder-type="true"]) {
237
+ height: var(--_ctm-height);
238
+ }
239
+
240
+ .embla__container {
241
+ overflow: unset;
242
+ display: block;
243
+
244
+ column-count: var(
245
+ --_ctm-mob-lt-is-pr-rw,
246
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
247
+ );
248
+ gap: unset;
249
+
250
+ column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
251
+
252
+ height: auto;
253
+
254
+ .embla__slide {
255
+ margin-bottom: var(
256
+ --_ctm-mob-lt-im-gp,
257
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
258
+ );
259
+ height: unset;
260
+
261
+ .gallery__slide {
262
+ height: unset;
263
+ }
264
+ }
265
+ }
266
+ }
267
+ }
268
+
269
+ .arrow-navigation {
270
+ display: flex;
271
+ position: absolute;
272
+ top: 50%;
273
+ left: 50%;
274
+ width: 100%;
275
+ justify-content: space-between;
276
+ transform: translate(-50%, -50%);
277
+ // padding-left: 20px;
278
+ &[data-control-type="Side"] {
279
+ .left-button,
280
+ .right-button {
281
+ background-color: transparent;
282
+ }
283
+ }
284
+ &[data-background-shape="Round"] {
285
+ .left-button,
286
+ .right-button {
287
+ background-color: #f2f5f5;
288
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
289
+ }
290
+ }
291
+ &[data-control-type="Bottom-Overflow"] {
292
+ transform: translateX(-50%);
293
+ width: 100%;
294
+ justify-content: center;
295
+ gap: 12px;
296
+ top: unset;
297
+ bottom: 6px;
298
+ }
299
+ &[data-control-type="Bottom"] {
300
+ transform: unset;
301
+ position: static;
302
+ width: 100%;
303
+ justify-content: center;
304
+ gap: 12px;
305
+ margin-top: 10px;
306
+ }
307
+ .left-button {
308
+ padding: 10px;
309
+ border-radius: 50%;
310
+ border: none;
311
+ width: var(
312
+ --_ctm-mob-dn-pn-as-aw-se,
313
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
314
+ );
315
+ height: var(
316
+ --_ctm-mob-dn-pn-as-aw-se,
317
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
+ );
319
+
320
+ display: flex;
321
+ align-items: center;
322
+ justify-content: center;
323
+ cursor: pointer;
324
+ outline: none;
325
+ margin-left: 12px;
326
+ &:disabled {
327
+ & svg {
328
+ path {
329
+ stroke: rgb(192, 192, 192);
330
+ }
331
+ }
332
+ }
333
+ }
334
+ .right-button {
335
+ border-radius: 50%;
336
+ border: none;
337
+ width: var(
338
+ --_ctm-mob-dn-pn-as-aw-se,
339
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
340
+ );
341
+ height: var(
342
+ --_ctm-mob-dn-pn-as-aw-se,
343
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
+ );
345
+
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ cursor: pointer;
350
+ outline: none;
351
+ margin-right: 12px;
352
+ padding: 10px;
353
+
354
+ &:disabled {
355
+ & svg {
356
+ path {
357
+ stroke: rgb(192, 192, 192);
358
+ }
359
+ }
360
+ }
361
+ }
362
+ .icon {
363
+ display: flex;
364
+
365
+ svg {
366
+ width: calc(
367
+ var(
368
+ --_ctm-mob-dn-pn-as-aw-se,
369
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
370
+ ) *
371
+ 0.5
372
+ );
373
+ height: calc(
374
+ var(
375
+ --_ctm-mob-dn-pn-as-aw-se,
376
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
377
+ ) *
378
+ 0.5
379
+ );
380
+
381
+ path {
382
+ stroke: var(
383
+ --_ctm-mob-dn-pn-as-aw-cr,
384
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
385
+ );
386
+ }
387
+ }
388
+ }
389
+ }
390
+
391
+ &[data-control-type="Side"] {
392
+ .embla__viewport {
393
+ width: calc(100% - 120px);
394
+ margin-inline: auto;
395
+ }
396
+ .left-button {
397
+ position: absolute;
398
+ left: 0;
399
+ top: 50%;
400
+ transform: translateY(-50%);
401
+ }
402
+ .right-button {
403
+ position: absolute;
404
+
405
+ right: 0;
406
+ top: 50%;
407
+ transform: translateY(-50%);
408
+ }
409
+ }
410
+
411
+ &[data-thumbnail-placement="top"] {
412
+ flex-direction: column-reverse;
413
+ }
414
+ &[data-thumbnail-placement="bottom"] {
415
+ flex-direction: column;
416
+ }
417
+ &[data-thumbnail-placement="left"] {
418
+ flex-direction: row-reverse;
419
+
420
+ .embla__thumbs {
421
+ width: var(--_ctm-lt-tl-se);
422
+ height: 100%;
423
+
424
+ & .embla__thumbs__container {
425
+ flex-direction: column;
426
+ height: 100%;
427
+ }
428
+ }
429
+ }
430
+ &[data-thumbnail-placement="right"] {
431
+ flex-direction: row;
432
+ .embla__thumbs {
433
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
434
+
435
+ height: 100%;
436
+
437
+ & .embla__thumbs__container {
438
+ flex-direction: column;
439
+ height: 100%;
440
+ }
441
+ }
442
+ }
443
+ .embla__dots {
444
+ display: flex;
445
+ flex-wrap: wrap;
446
+ justify-content: center;
447
+ align-items: center;
448
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
449
+ gap: 6px;
450
+ margin-top: 16px;
451
+
452
+ &[data-control-type="Bottom-Overflow"] {
453
+ position: absolute;
454
+ bottom: 10px;
455
+ left: 50%;
456
+ transform: translateX(-50%);
457
+ width: 75%;
458
+ }
459
+ .embla__dot {
460
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
461
+ -webkit-appearance: none;
462
+ appearance: none;
463
+ background-color: var(
464
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
465
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
466
+ );
467
+
468
+ touch-action: manipulation;
469
+ display: inline-flex;
470
+ text-decoration: none;
471
+ cursor: pointer;
472
+ border: 0;
473
+ padding: 0;
474
+ margin: 0;
475
+ // width: 0.6rem;
476
+ // height: 0.6rem;
477
+ width: var(
478
+ --_ctm-mob-dn-pn-ds-dt-se,
479
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
480
+ );
481
+ height: var(
482
+ --_ctm-mob-dn-pn-ds-dt-se,
483
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
484
+ );
485
+
486
+ display: flex;
487
+ align-items: center;
488
+ justify-content: center;
489
+ border-radius: 50%;
490
+ }
491
+ .embla__dot:after {
492
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
493
+ width: var(
494
+ --_ctm-mob-dn-pn-ds-dt-se,
495
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
496
+ );
497
+ height: var(
498
+ --_ctm-mob-dn-pn-ds-dt-se,
499
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
500
+ );
501
+
502
+ border-radius: 50%;
503
+ display: flex;
504
+ align-items: center;
505
+ content: "";
506
+ }
507
+ .embla__dot--selected:after {
508
+ box-shadow: inset 0 0 0 1px var(--text-body);
509
+ background-color: var(
510
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
511
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
512
+ );
513
+ }
514
+ &[data-slider-control="Pagination Line"] {
515
+ .embla__dot {
516
+ width: var(
517
+ --_ctm-mob-dn-pn-le-le-wh,
518
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
519
+ );
520
+ height: var(
521
+ --_ctm-mob-dn-pn-le-le-ht,
522
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
523
+ );
524
+ background-color: var(
525
+ --_ctm-mob-dn-pn-le-or-le-cr,
526
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
527
+ );
528
+ border-radius: 6px;
529
+ }
530
+
531
+ .embla__dot--selected:after {
532
+ box-shadow: inset 0 0 0 1px var(--text-body);
533
+ border-radius: 6px;
534
+ width: var(
535
+ --_ctm-mob-dn-pn-le-le-wh,
536
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
537
+ );
538
+ height: var(
539
+ --_ctm-mob-dn-pn-le-le-ht,
540
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
541
+ );
542
+ background-color: var(
543
+ --_ctm-mob-dn-pn-le-ct-le-cr,
544
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
545
+ );
546
+ }
547
+ }
548
+ }
549
+
550
+ .embla__thumbs {
551
+ width: 100%;
552
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
553
+
554
+ position: relative;
555
+ display: grid;
556
+ grid-template-columns: 1fr;
557
+ overflow: hidden;
558
+ // margin: 10px;
559
+ padding: 10px;
560
+
561
+ .embla__thumbs__viewport {
562
+ width: 100%;
563
+ height: 100%;
564
+ position: relative;
565
+ display: flex;
566
+ flex-direction: column;
567
+
568
+ overflow: hidden;
569
+ }
570
+ .embla__thumbs__container {
571
+ display: flex;
572
+ flex-direction: row;
573
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
574
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
575
+
576
+ width: 100%;
577
+ // justify-content: center;
578
+ // height: 200px;
579
+
580
+ .embla__thumbs__slide {
581
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
582
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
583
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
584
+
585
+ & img {
586
+ width: 100%;
587
+ height: 100%;
588
+ }
589
+ }
590
+ }
591
+ }
592
+ }
593
+
594
+ .bundle__details__element__container {
595
+ width: 100%;
596
+ }
597
+
598
+ .bundle_details_heading_wrapper {
599
+ display: flex;
600
+ width: 100%;
601
+ flex-direction: column;
602
+ padding: 24px 96px;
603
+ border-bottom: 1px solid #d0d5dd;
604
+ gap: 16px;
605
+
606
+ .bundle_details_heading_text_wrapper {
607
+ display: flex;
608
+ flex-direction: column;
609
+ gap: 6px;
610
+ width: 100%;
611
+ flex: 1 0 0;
612
+
613
+ .bundle_name {
614
+ background-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr);
615
+ border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
616
+ border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
617
+ border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
618
+ border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
619
+ color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
620
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
621
+ font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
622
+ font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
623
+ font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
624
+ line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
625
+ letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
626
+ box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
627
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
628
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
629
+ text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
630
+ text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
631
+ }
632
+
633
+ .bundle_description {
634
+ background-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-bd-cr);
635
+ border-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-cr);
636
+ border-radius: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-rs);
637
+ border-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-se);
638
+ border-width: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-wh);
639
+ color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-cr);
640
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-fy);
641
+ font-size: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se);
642
+ font-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se-ic);
643
+ font-weight: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-wt);
644
+ line-height: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-le-ht);
645
+ letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-lr-sg);
646
+ box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-ae)
647
+ var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-sd)
648
+ var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-cr);
649
+ text-align: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-an);
650
+ text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ue);
651
+ }
652
+ }
653
+
654
+ .category_card_wrapper {
655
+ display: flex;
656
+ padding: 16px;
657
+ gap: 12px;
658
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
659
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
660
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
661
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
662
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
663
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
664
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
665
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
666
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
667
+
668
+ &:hover {
669
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
670
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
671
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
672
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
673
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
674
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
675
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
676
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
677
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
678
+ }
679
+
680
+ &.active {
681
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
682
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
683
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
684
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
685
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
686
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
687
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
688
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
689
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
690
+ }
691
+
692
+ .category_image {
693
+ width: 48px;
694
+ height: 72px;
695
+ }
696
+
697
+ .category_card_info_wrapper {
698
+ display: flex;
699
+ flex-direction: column;
700
+ gap: 4px;
701
+ width: fit-content;
702
+ white-space: nowrap;
703
+
704
+ .category_card_category_name {
705
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
706
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
707
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
708
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
709
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
710
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
711
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
712
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
713
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
714
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
715
+ }
716
+
717
+ .category_card_product_count {
718
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
719
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
720
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
721
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
722
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
723
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
724
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
725
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
726
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
727
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
728
+ }
729
+
730
+ .category_card_product_select_count {
731
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
732
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
733
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
734
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
735
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
736
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
737
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
738
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
739
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
740
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
741
+ }
742
+ }
743
+ }
744
+ }
745
+
746
+ .bundle_details_product_list_wrapper {
747
+ display: flex;
748
+ flex-direction: column;
749
+ gap: 16px;
750
+ padding: 36px 96px;
751
+ width: 100%;
752
+
753
+ .add_to_cart_wrapper {
754
+ display: flex;
755
+ flex-direction: column;
756
+ gap: 16px;
757
+ padding: 16px;
758
+ width: 100%;
759
+ background-color: #f5f5f5;
760
+
761
+ .add_to_cart_heading {
762
+ border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
763
+ border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
764
+ border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
765
+ border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
766
+ color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
767
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
768
+ font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
769
+ font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
770
+ font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
771
+ line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
772
+ letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
773
+ box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
774
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
775
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
776
+ text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
777
+ text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
778
+ }
779
+
780
+ .add_to_cart_estimator_wrapper {
781
+ display: flex;
782
+ gap: 48px;
783
+ justify-content: space-between;
784
+ width: 100%;
785
+
786
+ .add_to_cart_estimate_wrapper {
787
+ display: flex;
788
+ flex-direction: column;
789
+ gap: 6px;
790
+
791
+ .add_to_cart_qty {
792
+ width: 205px;
793
+ border: 1px solid #d0d5dd !important;
794
+ border-radius: 2px !important;
795
+ outline: none;
796
+ padding: 8px 12px !important;
797
+ background-color: #f9fafb;
798
+ }
799
+
800
+ .add_to_cart_price {
801
+ background-color: transparent;
802
+ color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
803
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
804
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
805
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
806
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
807
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
808
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
809
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
810
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
811
+ }
812
+
813
+ .add_to_cart_estimate_label {
814
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
815
+ line-height: 150%;
816
+ font-size: 16px;
817
+ color: #000000;
818
+ }
819
+ }
820
+ }
821
+
822
+ .add_to_cart_btn {
823
+ display: flex;
824
+ justify-content: center;
825
+ align-items: center;
826
+ padding: 10px 16px;
827
+ transition: all 0.3s ease;
828
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
829
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
830
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
831
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
832
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
833
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
834
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
835
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
836
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
837
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
838
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
839
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
840
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
841
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
842
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
843
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
844
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
845
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
846
+
847
+ &:disabled {
848
+ cursor: not-allowed;
849
+ }
850
+
851
+ &:hover {
852
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
853
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
854
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
855
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
856
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
857
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
858
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
859
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
860
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
861
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
862
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
863
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
864
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
865
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
866
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
867
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
868
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
869
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
870
+ }
871
+
872
+ &.selected {
873
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
874
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
875
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
876
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
877
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
878
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
879
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
880
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
881
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
882
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
883
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
884
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
885
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
886
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
887
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
888
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
889
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
890
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
891
+
892
+ .icon {
893
+ color: white;
894
+ }
895
+ }
896
+ }
897
+ }
898
+
899
+ .bundle_details_product_wrapper {
900
+ display: flex;
901
+ gap: 48px;
902
+ width: 100%;
903
+
904
+ &.vertical_wrapper {
905
+ flex-direction: row;
906
+
907
+ .product_card_scroll_wrapper {
908
+ min-width: 400px;
909
+ max-width: 400px;
910
+ display: flex;
911
+ flex-direction: column;
912
+ gap: 16px;
913
+
914
+ .category_bundle_product_card {
915
+ width: 100%;
916
+ display: flex;
917
+ padding: 16px;
918
+ gap: 16px;
919
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr);
920
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr);
921
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs);
922
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se);
923
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh);
924
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae)
925
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br)
926
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd)
927
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr);
928
+
929
+ &:hover {
930
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr);
931
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr);
932
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs);
933
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se);
934
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh);
935
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae)
936
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br)
937
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd)
938
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr);
939
+ }
940
+
941
+ &.active {
942
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr);
943
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr);
944
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs);
945
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se);
946
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh);
947
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae)
948
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br)
949
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd)
950
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr);
951
+
952
+ .category_bundle_product_card_product_name {
953
+ font-weight: bolder;
954
+ }
955
+ }
956
+
957
+ .category_bundle_product_card_select {
958
+ width: auto;
959
+ }
960
+
961
+ .category_bundle_product_card_img {
962
+ width: 80px;
963
+ height: auto;
964
+ }
965
+
966
+ .category_bundle_product_card_info {
967
+ display: flex;
968
+ flex-direction: column;
969
+ gap: 24px;
970
+
971
+ .category_bundle_product_card_info_wrapper {
972
+ display: flex;
973
+ flex-direction: column;
974
+ gap: 6px;
975
+
976
+ .category_bundle_product_card_product_name {
977
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr);
978
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr);
979
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy);
980
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se);
981
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic);
982
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt);
983
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht);
984
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg);
985
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an);
986
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue);
987
+ }
988
+
989
+ .category_bundle_product_card_brand_name {
990
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
991
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
992
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
993
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
994
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
995
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
996
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
997
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
998
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
999
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1000
+ }
1001
+
1002
+ .category_bundle_product_card_item_name {
1003
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
1004
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
1005
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
1006
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
1007
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
1008
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
1009
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
1010
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
1011
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
1012
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1013
+ }
1014
+ }
1015
+
1016
+ .category_bundle_product_card_product_price {
1017
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr);
1018
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
1019
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
1020
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
1021
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
1022
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
1023
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
1024
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
1025
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
1026
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
1027
+ }
1028
+ }
1029
+ }
1030
+ }
1031
+ }
1032
+
1033
+ .gallery {
1034
+ display: flex;
1035
+ flex-direction: column;
1036
+ gap: 16px;
1037
+
1038
+ .mainImage {
1039
+ position: relative;
1040
+ overflow: visible;
1041
+ border-radius: 8px;
1042
+ background-color: #f9fafb;
1043
+ aspect-ratio: 1 / 1;
1044
+ width: 360px;
1045
+
1046
+ &::before {
1047
+ content: "";
1048
+ display: block;
1049
+ padding-top: 100%;
1050
+ }
1051
+ }
1052
+
1053
+ .image {
1054
+ position: absolute;
1055
+ top: 0;
1056
+ left: 0;
1057
+ width: 100%;
1058
+ height: 100%;
1059
+ object-fit: cover;
1060
+ transition: transform 0.3s ease-in-out;
1061
+
1062
+ &:hover {
1063
+ transform: scale(1.05);
1064
+ }
1065
+ }
1066
+
1067
+ .thumbnails {
1068
+ display: flex;
1069
+ gap: 8px;
1070
+ }
1071
+
1072
+ .thumbnailButton {
1073
+ width: 80px;
1074
+ height: 80px;
1075
+ padding: 0;
1076
+ border: 2px solid transparent;
1077
+ border-radius: 6px;
1078
+ overflow: hidden;
1079
+ cursor: pointer;
1080
+ background: none;
1081
+ transition: border-color 0.2s ease-in-out;
1082
+
1083
+ &:hover {
1084
+ border-color: #dbeafe;
1085
+ }
1086
+
1087
+ &.active {
1088
+ border-color: #2563eb;
1089
+ }
1090
+
1091
+ &:focus {
1092
+ outline: none;
1093
+ border-color: #2563eb;
1094
+ box-shadow: 0 0 0 2px #dbeafe;
1095
+ }
1096
+ }
1097
+
1098
+ .thumbnailImage {
1099
+ width: 100%;
1100
+ height: 100%;
1101
+ object-fit: cover;
1102
+ }
1103
+ }
1104
+
1105
+ .bundle_detail_product_information {
1106
+ display: flex;
1107
+ flex-direction: column;
1108
+ flex: 1 0 0;
1109
+ width: 100%;
1110
+ gap: 24px;
1111
+
1112
+ .bundle_detail_product_image_slide_wrapper {
1113
+ display: flex;
1114
+ max-width: 40rem;
1115
+ gap: 16px;
1116
+ overflow-x: scroll;
1117
+
1118
+ .bundle_detail_product_image_slide {
1119
+ width: 148px;
1120
+ height: 248px;
1121
+ }
1122
+ }
1123
+
1124
+ .bundle_detail_product_heading_wrapper {
1125
+ display: flex;
1126
+ flex-direction: column;
1127
+ gap: 6px;
1128
+ width: 100%;
1129
+
1130
+ .bundle_detail_product_name {
1131
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr);
1132
+ color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr);
1133
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy);
1134
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se);
1135
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic);
1136
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt);
1137
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht);
1138
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg);
1139
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an);
1140
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue);
1141
+ width: 100%;
1142
+ }
1143
+
1144
+ .bundle_detail_product_info {
1145
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr);
1146
+ color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-cr);
1147
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy);
1148
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se);
1149
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic);
1150
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt);
1151
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht);
1152
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg);
1153
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an);
1154
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ue);
1155
+ width: 100%;
1156
+ }
1157
+ }
1158
+
1159
+ .bundle_detail_product_price {
1160
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr);
1161
+ color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
1162
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
1163
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
1164
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
1165
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
1166
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
1167
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
1168
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
1169
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
1170
+ width: 100%;
1171
+ }
1172
+
1173
+ .standard_wrapper {
1174
+ // Select Colors
1175
+ .select__colors {
1176
+ font-size: 16px;
1177
+ color: var(--_gray-500);
1178
+ display: flex;
1179
+ flex-direction: column;
1180
+ gap: 8px;
1181
+ padding: 12px;
1182
+
1183
+ .title {
1184
+ margin-bottom: 4px;
1185
+ color: #000000;
1186
+ font-size: 16px;
1187
+ }
1188
+
1189
+ .select__group {
1190
+ display: flex;
1191
+ flex-direction: row;
1192
+ gap: 8px;
1193
+
1194
+ .item {
1195
+ background-color: #ffffff;
1196
+
1197
+ &.selected_item {
1198
+ width: fit-content;
1199
+ border: 1px solid #000000;
1200
+ }
1201
+ .select__group__item {
1202
+ transition: width 0.3s ease;
1203
+ width: 30px;
1204
+ height: 30px;
1205
+ border: 1px solid #d0d5dd;
1206
+ cursor: pointer;
1207
+ overflow: hidden;
1208
+
1209
+ &.selected {
1210
+ width: 45px;
1211
+ border: 1px solid #000;
1212
+ }
1213
+
1214
+ &.disabled {
1215
+ cursor: not-allowed;
1216
+ opacity: 0.4;
1217
+ }
1218
+ .product-select-image {
1219
+ width: 40px;
1220
+ height: 40px;
1221
+ object-fit: contain;
1222
+ }
1223
+ }
1224
+ }
1225
+ }
1226
+ }
1227
+ // Select Fit and Size
1228
+ .select__fit {
1229
+ font-size: 16px;
1230
+ color: var(--_gray-500);
1231
+ display: flex;
1232
+ flex-direction: column;
1233
+ gap: 8px;
1234
+
1235
+ padding: 12px;
1236
+
1237
+ .title {
1238
+ margin-bottom: 4px;
1239
+ color: #000000;
1240
+ font-size: 16px;
1241
+ line-height: 150%;
1242
+ }
1243
+ .select__group {
1244
+ display: flex;
1245
+ gap: 8px;
1246
+ flex-wrap: wrap;
1247
+ margin-bottom: 10px;
1248
+ flex-direction: row;
1249
+ gap: 8px;
1250
+
1251
+ .select__group__item {
1252
+ transition: color 0.3s ease;
1253
+ padding: 5px 12px;
1254
+ border-radius: 6px;
1255
+ border: 1px solid var(--_gray-200);
1256
+ font-size: 16px;
1257
+ font-weight: 600;
1258
+ cursor: pointer;
1259
+ border: 1px solid #d0d5dd;
1260
+ color: #000000;
1261
+ font-size: 16px;
1262
+ line-height: 150%;
1263
+
1264
+ &.child {
1265
+ border: 0;
1266
+ border-radius: 0;
1267
+ border-bottom: 2px solid var(--_gray-200);
1268
+ }
1269
+ &.selected {
1270
+ border: 1px solid var(--_primary-200);
1271
+ background-color: var(--_primary-25);
1272
+ color: var(--_primary-400);
1273
+
1274
+ border: 1pxsolid #000000;
1275
+ color: #000000;
1276
+ font-weight: bold;
1277
+ }
1278
+
1279
+ &.selected__child {
1280
+ border: 0px;
1281
+ border-bottom: 2px solid var(--_primary-400);
1282
+ }
1283
+ &.disabled {
1284
+ cursor: not-allowed;
1285
+ opacity: 0.4;
1286
+ position: relative;
1287
+ overflow: hidden;
1288
+ &::after {
1289
+ content: "";
1290
+ width: 172%;
1291
+ height: 1px;
1292
+ position: absolute;
1293
+ background: #f00;
1294
+ left: -14px;
1295
+ transform: rotate(48deg);
1296
+ /* -webkit-transform: rotate(48deg); */
1297
+ -moz-transform: rotate(48deg);
1298
+ top: 14px;
1299
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1300
+ }
1301
+ &::before {
1302
+ content: "";
1303
+ width: 164%;
1304
+ height: 1px;
1305
+ position: absolute;
1306
+ background: #f00;
1307
+ left: -14px;
1308
+ transform: rotate(-48deg);
1309
+ -webkit-transform: rotate(-48deg);
1310
+ -moz-transform: rotate(-48deg);
1311
+ top: 14px;
1312
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1313
+ }
1314
+ }
1315
+ }
1316
+ }
1317
+ }
1318
+ }
1319
+
1320
+ .bundle_detail_product_qty_select {
1321
+ display: flex;
1322
+ justify-content: space-between;
1323
+ align-items: flex-start;
1324
+ width: 100%;
1325
+
1326
+ .add_to_cart_qty_wrapper {
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+ gap: 6px;
1330
+
1331
+ .add_to_cart_qty {
1332
+ width: 205px;
1333
+ border: 1px solid #d0d5dd !important;
1334
+ border-radius: 2px !important;
1335
+ outline: none;
1336
+ padding: 8px 12px !important;
1337
+ background-color: #f9fafb;
1338
+ }
1339
+
1340
+ small {
1341
+ color: red;
1342
+ }
1343
+ }
1344
+
1345
+ .select-button {
1346
+ display: flex;
1347
+ align-items: center;
1348
+ padding: 10px 16px;
1349
+ transition: all 0.3s ease;
1350
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
1351
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
1352
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
1353
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
1354
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
1355
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
1356
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
1357
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
1358
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
1359
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
1360
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
1361
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
1362
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
1363
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
1364
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
1365
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
1366
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
1367
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
1368
+
1369
+ &:hover {
1370
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
1371
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
1372
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
1373
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
1374
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
1375
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
1376
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
1377
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
1378
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
1379
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
1380
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
1381
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
1382
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
1383
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
1384
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
1385
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
1386
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
1387
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
1388
+ }
1389
+
1390
+ .icon {
1391
+ margin-right: 8px;
1392
+ color: #003366;
1393
+ }
1394
+
1395
+ &.selected {
1396
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
1397
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
1398
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
1399
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
1400
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
1401
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
1402
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
1403
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
1404
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
1405
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
1406
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
1407
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
1408
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
1409
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
1410
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
1411
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
1412
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
1413
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
1414
+
1415
+ .icon {
1416
+ color: white;
1417
+ }
1418
+ }
1419
+ }
1420
+ }
1421
+ }
1422
+ }
1423
+
1424
+ hr {
1425
+ &:last-child {
1426
+ display: none;
1427
+ }
1428
+ }
1429
+ }
1430
+ }
1431
+ }