@total_onion/onion-library 2.0.149 → 2.0.151

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 (86) hide show
  1. package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue +4 -1
  2. package/components/block-raw-html-v3/raw-html-v3.js +7 -0
  3. package/components/block-raw-html-v3/raw-html-v3.scss +2 -0
  4. package/createDynamicBlockScss-v3.js +0 -1
  5. package/package.json +1 -1
  6. package/public/assetList.mjs +1 -1
  7. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +11 -11
  8. package/public/dynamicBlockScss-v3.scss +1 -0
  9. package/public/jsAssets.mjs +1 -1
  10. package/public/block-video-content-v3/video-content-v3.js +0 -11
  11. package/public/components/block-accent-image-v3/accent-image-v3.css +0 -0
  12. package/public/components/block-accent-image-v3/accent-image-v3.js +0 -7
  13. package/public/components/block-accordion-v3/accordion-v3.css +0 -474
  14. package/public/components/block-accordion-v3/accordion-v3.js +0 -117
  15. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.css +0 -62
  16. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.js +0 -12
  17. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.css +0 -96
  18. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.js +0 -7
  19. package/public/components/block-block-interactions-v3/block-interactions-v3.css +0 -34
  20. package/public/components/block-block-interactions-v3/block-interactions-v3.js +0 -44
  21. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -928
  22. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +0 -169
  23. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.css +0 -317
  24. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js +0 -93
  25. package/public/components/block-cover-link-v3/cover-link-v3.css +0 -0
  26. package/public/components/block-cover-link-v3/cover-link-v3.js +0 -7
  27. package/public/components/block-divider-v3/divider-v3.css +0 -74
  28. package/public/components/block-divider-v3/divider-v3.js +0 -7
  29. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -102
  30. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.js +0 -44
  31. package/public/components/block-form-selection-v3/form-selection-v3.css +0 -32
  32. package/public/components/block-form-selection-v3/form-selection-v3.js +0 -61
  33. package/public/components/block-gradient-layer-v3/gradient-layer-v3.css +0 -52
  34. package/public/components/block-gradient-layer-v3/gradient-layer-v3.js +0 -7
  35. package/public/components/block-group-container-v3/group-container-v3.css +0 -323
  36. package/public/components/block-group-container-v3/group-container-v3.js +0 -7
  37. package/public/components/block-lottie-content-v3/lottie-content-v3.css +0 -0
  38. package/public/components/block-lottie-content-v3/lottie-content-v3.js +0 -25
  39. package/public/components/block-market-selector-v3/market-selector-v3.css +0 -139
  40. package/public/components/block-market-selector-v3/market-selector-v3.js +0 -7
  41. package/public/components/block-modal-form-v3/modal-form-v3.css +0 -0
  42. package/public/components/block-modal-form-v3/modal-form-v3.js +0 -44
  43. package/public/components/block-modal-form-v3/modal-form-v3.scss.css +0 -0
  44. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.css +0 -3
  45. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.js +0 -7
  46. package/public/components/block-post-info-v3/post-info-v3.css +0 -1310
  47. package/public/components/block-post-info-v3/post-info-v3.js +0 -7
  48. package/public/components/block-post-info-v3/post-info-v3.scss.css +0 -1310
  49. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css +0 -859
  50. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +0 -13
  51. package/public/components/block-product-info-v3/product-info-v3.css +0 -993
  52. package/public/components/block-product-info-v3/product-info-v3.js +0 -7
  53. package/public/components/block-product-info-v3/product-info-v3.scss.css +0 -993
  54. package/public/components/block-responsive-table-v3/responsive-table-v3.css +0 -48
  55. package/public/components/block-responsive-table-v3/responsive-table-v3.js +0 -7
  56. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.css +0 -85
  57. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.js +0 -106
  58. package/public/components/block-section-separator-v3/section-separator-v3.css +0 -43
  59. package/public/components/block-section-separator-v3/section-separator-v3.js +0 -7
  60. package/public/components/block-single-column-container-v3/single-column-container-v3.css +0 -14
  61. package/public/components/block-single-column-container-v3/single-column-container-v3.js +0 -7
  62. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.css +0 -60
  63. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.js +0 -7
  64. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.css +0 -0
  65. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.js +0 -7
  66. package/public/components/block-site-logo-container-v3/site-logo-container-v3.css +0 -18
  67. package/public/components/block-site-logo-container-v3/site-logo-container-v3.js +0 -7
  68. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -14
  69. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js +0 -7
  70. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css +0 -25
  71. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +0 -8
  72. package/public/components/block-social-networks-v3/social-networks-v3.css +0 -74
  73. package/public/components/block-social-networks-v3/social-networks-v3.js +0 -7
  74. package/public/components/block-spacer-v3/spacer-v3.css +0 -16
  75. package/public/components/block-spacer-v3/spacer-v3.js +0 -2
  76. package/public/components/block-spacer-v3/spacer-v3.scss.css +0 -16
  77. package/public/components/block-spotify-embed-v3/spotify-embed-v3.css +0 -7
  78. package/public/components/block-spotify-embed-v3/spotify-embed-v3.js +0 -7
  79. package/public/components/block-standard-content-v3/standard-content-v3.css +0 -529
  80. package/public/components/block-standard-content-v3/standard-content-v3.js +0 -7
  81. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.css +0 -0
  82. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js +0 -7
  83. package/public/components/block-sub-group-container-v3/sub-group-container-v3.css +0 -308
  84. package/public/components/block-sub-group-container-v3/sub-group-container-v3.js +0 -2
  85. package/public/components/block-video-content-v3/video-content-v3.css +0 -105
  86. package/public/components/block-video-content-v3/video-content-v3.js +0 -11
@@ -1,993 +0,0 @@
1
- @charset "UTF-8";
2
- .product-info-v3 {
3
- display: grid;
4
- grid-auto-columns: 1fr;
5
- grid-template: "main"/1fr;
6
- }
7
- .product-info-v3__inner-container {
8
- grid-area: main;
9
- align-self: var(--content-box-vert-align-mobile);
10
- justify-self: var(--content-box-horiz-align-mobile);
11
- place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
12
- z-index: 5;
13
- z-index: var(--content-z-index, 5);
14
- overflow: var(--content-box-overflow);
15
- min-width: -moz-min-content;
16
- min-width: min-content;
17
- aspect-ratio: var(--content-box-aspect-ratio);
18
- border-radius: var(--border-radius);
19
- border-width: var(--border-width);
20
- border-color: var(--border-colour);
21
- border-style: var(--border-style);
22
- display: flex;
23
- flex-direction: column;
24
- flex-direction: var(--content-box-items-direction-mobile, column);
25
- justify-content: var(--content-items-alignment-mobile);
26
- align-items: center;
27
- background-color: var(--cb-bg-colour);
28
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
29
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
30
- -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
31
- column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
32
- }
33
- @media screen and (min-width: 768px) {
34
- .product-info-v3__inner-container {
35
- justify-content: var(--content-items-alignment-portrait);
36
- align-self: var(--content-box-vert-align-portrait);
37
- justify-self: var(--content-box-horiz-align-portrait);
38
- place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
39
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
40
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
41
- }
42
- }
43
- @media screen and (min-width: 1024px) {
44
- .product-info-v3__inner-container {
45
- -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
46
- column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
47
- justify-content: var(--content-items-alignment);
48
- max-width: var(--cb-max-width);
49
- align-self: var(--content-box-vert-align);
50
- justify-self: var(--content-box-horiz-align);
51
- place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
52
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
53
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
54
- }
55
- }
56
- .product-info-v3__inner-container {
57
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
58
- }
59
- .product-info-v3__content-box,
60
- .product-info-v3__content-container {
61
- max-width: var(--wysiwyg-max-width-mobile);
62
- margin-left: auto;
63
- margin-right: auto;
64
- display: grid;
65
- word-break: normal;
66
- width: 100%;
67
- width: var(--content-box-width, 100%);
68
- -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
69
- }
70
- .product-info-v3__content-box:last-child,
71
- .product-info-v3__content-container:last-child {
72
- margin-bottom: 0;
73
- }
74
- .product-info-v3__content-box,
75
- .product-info-v3__content-container {
76
- color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
77
- }
78
- @media screen and (min-width: 768px) {
79
- .product-info-v3__content-box,
80
- .product-info-v3__content-container {
81
- color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
82
- }
83
- }
84
- @media screen and (min-width: 1024px) {
85
- .product-info-v3__content-box,
86
- .product-info-v3__content-container {
87
- color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
88
- }
89
- }
90
- .product-info-v3__content-box,
91
- .product-info-v3__content-container {
92
- text-transform: var(--default-text-transform-mobile);
93
- }
94
- @media screen and (min-width: 768px) {
95
- .product-info-v3__content-box,
96
- .product-info-v3__content-container {
97
- text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
98
- }
99
- }
100
- @media screen and (min-width: 1024px) {
101
- .product-info-v3__content-box,
102
- .product-info-v3__content-container {
103
- text-transform: var(--default-text-transform-desktop);
104
- }
105
- }
106
- .product-info-v3__content-box,
107
- .product-info-v3__content-container {
108
- text-align: var(--default-text-align-mobile);
109
- }
110
- @media screen and (min-width: 768px) {
111
- .product-info-v3__content-box,
112
- .product-info-v3__content-container {
113
- text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
114
- }
115
- }
116
- @media screen and (min-width: 1024px) {
117
- .product-info-v3__content-box,
118
- .product-info-v3__content-container {
119
- text-align: var(--default-text-align-desktop);
120
- }
121
- }
122
- .product-info-v3__content-box,
123
- .product-info-v3__content-container {
124
- display: block;
125
- display: var(--display-mobile, block);
126
- }
127
- @media screen and (min-width: 768px) {
128
- .product-info-v3__content-box,
129
- .product-info-v3__content-container {
130
- display: block;
131
- display: var(--display-portrait, block);
132
- }
133
- }
134
- @media screen and (min-width: 1024px) {
135
- .product-info-v3__content-box,
136
- .product-info-v3__content-container {
137
- display: block;
138
- display: var(--display-desktop, block);
139
- }
140
- }
141
- .product-info-v3__content-box p,
142
- .product-info-v3__content-box h1,
143
- .product-info-v3__content-box h2,
144
- .product-info-v3__content-box h3,
145
- .product-info-v3__content-box h4,
146
- .product-info-v3__content-box h5,
147
- .product-info-v3__content-box h6,
148
- .product-info-v3__content-box a,
149
- .product-info-v3__content-box li,
150
- .product-info-v3__content-box div,
151
- .product-info-v3__content-container p,
152
- .product-info-v3__content-container h1,
153
- .product-info-v3__content-container h2,
154
- .product-info-v3__content-container h3,
155
- .product-info-v3__content-container h4,
156
- .product-info-v3__content-container h5,
157
- .product-info-v3__content-container h6,
158
- .product-info-v3__content-container a,
159
- .product-info-v3__content-container li,
160
- .product-info-v3__content-container div {
161
- font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
162
- }
163
- @media screen and (min-width: 768px) {
164
- .product-info-v3__content-box p,
165
- .product-info-v3__content-box h1,
166
- .product-info-v3__content-box h2,
167
- .product-info-v3__content-box h3,
168
- .product-info-v3__content-box h4,
169
- .product-info-v3__content-box h5,
170
- .product-info-v3__content-box h6,
171
- .product-info-v3__content-box a,
172
- .product-info-v3__content-box li,
173
- .product-info-v3__content-box div,
174
- .product-info-v3__content-container p,
175
- .product-info-v3__content-container h1,
176
- .product-info-v3__content-container h2,
177
- .product-info-v3__content-container h3,
178
- .product-info-v3__content-container h4,
179
- .product-info-v3__content-container h5,
180
- .product-info-v3__content-container h6,
181
- .product-info-v3__content-container a,
182
- .product-info-v3__content-container li,
183
- .product-info-v3__content-container div {
184
- font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
185
- }
186
- }
187
- @media screen and (min-width: 1024px) {
188
- .product-info-v3__content-box p,
189
- .product-info-v3__content-box h1,
190
- .product-info-v3__content-box h2,
191
- .product-info-v3__content-box h3,
192
- .product-info-v3__content-box h4,
193
- .product-info-v3__content-box h5,
194
- .product-info-v3__content-box h6,
195
- .product-info-v3__content-box a,
196
- .product-info-v3__content-box li,
197
- .product-info-v3__content-box div,
198
- .product-info-v3__content-container p,
199
- .product-info-v3__content-container h1,
200
- .product-info-v3__content-container h2,
201
- .product-info-v3__content-container h3,
202
- .product-info-v3__content-container h4,
203
- .product-info-v3__content-container h5,
204
- .product-info-v3__content-container h6,
205
- .product-info-v3__content-container a,
206
- .product-info-v3__content-container li,
207
- .product-info-v3__content-container div {
208
- font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
209
- }
210
- }
211
- .product-info-v3__content-box p,
212
- .product-info-v3__content-box h1,
213
- .product-info-v3__content-box h2,
214
- .product-info-v3__content-box h3,
215
- .product-info-v3__content-box h4,
216
- .product-info-v3__content-box h5,
217
- .product-info-v3__content-box h6,
218
- .product-info-v3__content-box a,
219
- .product-info-v3__content-box li,
220
- .product-info-v3__content-box div,
221
- .product-info-v3__content-container p,
222
- .product-info-v3__content-container h1,
223
- .product-info-v3__content-container h2,
224
- .product-info-v3__content-container h3,
225
- .product-info-v3__content-container h4,
226
- .product-info-v3__content-container h5,
227
- .product-info-v3__content-container h6,
228
- .product-info-v3__content-container a,
229
- .product-info-v3__content-container li,
230
- .product-info-v3__content-container div {
231
- font-style: var(--default-font-style-mobile);
232
- }
233
- @media screen and (min-width: 768px) {
234
- .product-info-v3__content-box p,
235
- .product-info-v3__content-box h1,
236
- .product-info-v3__content-box h2,
237
- .product-info-v3__content-box h3,
238
- .product-info-v3__content-box h4,
239
- .product-info-v3__content-box h5,
240
- .product-info-v3__content-box h6,
241
- .product-info-v3__content-box a,
242
- .product-info-v3__content-box li,
243
- .product-info-v3__content-box div,
244
- .product-info-v3__content-container p,
245
- .product-info-v3__content-container h1,
246
- .product-info-v3__content-container h2,
247
- .product-info-v3__content-container h3,
248
- .product-info-v3__content-container h4,
249
- .product-info-v3__content-container h5,
250
- .product-info-v3__content-container h6,
251
- .product-info-v3__content-container a,
252
- .product-info-v3__content-container li,
253
- .product-info-v3__content-container div {
254
- font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
255
- }
256
- }
257
- @media screen and (min-width: 1024px) {
258
- .product-info-v3__content-box p,
259
- .product-info-v3__content-box h1,
260
- .product-info-v3__content-box h2,
261
- .product-info-v3__content-box h3,
262
- .product-info-v3__content-box h4,
263
- .product-info-v3__content-box h5,
264
- .product-info-v3__content-box h6,
265
- .product-info-v3__content-box a,
266
- .product-info-v3__content-box li,
267
- .product-info-v3__content-box div,
268
- .product-info-v3__content-container p,
269
- .product-info-v3__content-container h1,
270
- .product-info-v3__content-container h2,
271
- .product-info-v3__content-container h3,
272
- .product-info-v3__content-container h4,
273
- .product-info-v3__content-container h5,
274
- .product-info-v3__content-container h6,
275
- .product-info-v3__content-container a,
276
- .product-info-v3__content-container li,
277
- .product-info-v3__content-container div {
278
- font-style: var(--default-font-style-desktop);
279
- }
280
- }
281
- @media screen and (min-width: 768px) {
282
- .product-info-v3__content-box,
283
- .product-info-v3__content-container {
284
- max-width: var(--wysiwyg-max-width-portrait);
285
- }
286
- }
287
- @media screen and (min-width: 1024px) {
288
- .product-info-v3__content-box,
289
- .product-info-v3__content-container {
290
- max-width: var(--wysiwyg-max-width);
291
- }
292
- }
293
- .product-info-v3--text-shadow {
294
- text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
295
- }
296
- .product-info-v3__cta-selection-container {
297
- width: 100%;
298
- display: var(--cta-container-display);
299
- grid-template-columns: var(--grid-columns-mobile);
300
- flex-wrap: wrap;
301
- flex-direction: var(--cta-flex-direction);
302
- justify-content: var(--cta-alignment-mobile);
303
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
304
- }
305
- @media screen and (min-width: 768px) {
306
- .product-info-v3__cta-selection-container {
307
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
308
- justify-content: var(--cta-alignment-portrait);
309
- grid-template-columns: var(--grid-columns-portrait);
310
- }
311
- }
312
- @media screen and (min-width: 1024px) {
313
- .product-info-v3__cta-selection-container {
314
- justify-content: var(--cta-alignment);
315
- grid-template-columns: var(--grid-columns-desktop);
316
- }
317
- }
318
- .product-info-v3 {
319
- display: "grid";
320
- display: var(--display-type, "grid");
321
- position: relative;
322
- scroll-behavior: smooth;
323
- overscroll-behavior-x: contain;
324
- scroll-snap-type: none;
325
- scroll-snap-type: var(--scroll-snap-type-mobile, none);
326
- }
327
- .product-info-v3 > div {
328
- scroll-snap-align: start;
329
- scroll-snap-align: var(--scroll-snap-align-mobile, start);
330
- }
331
- .product-info-v3 {
332
- overflow: hidden;
333
- overflow: var(--container-overflow-type-mobile, hidden);
334
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
335
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
336
- grid-auto-flow: row;
337
- grid-auto-flow: var(--grid-auto-flow-mobile, row);
338
- grid-auto-columns: 1fr;
339
- grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
340
- grid-auto-rows: auto;
341
- grid-auto-rows: var(--grid-auto-rows-mobile, auto);
342
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), 1fr));
343
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), var(--grid-auto-columns-mobile, 1fr)));
344
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), 1fr));
345
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), var(--grid-auto-rows-mobile, 1fr)));
346
- }
347
- @media screen and (min-width: 1024px) {
348
- .product-info-v3.scroll-btns-desktop::scroll-button(left) {
349
- content: "\25c4";
350
- position: absolute;
351
- align-self: center;
352
- justify-self: flex-start;
353
- place-self: center flex-start;
354
- z-index: 50;
355
- }
356
- .product-info-v3.scroll-btns-desktop::scroll-button(right) {
357
- content: "\25ba";
358
- position: absolute;
359
- align-self: center;
360
- justify-self: flex-end;
361
- place-self: center flex-end;
362
- z-index: 50;
363
- }
364
- .product-info-v3.scroll-btns-desktop::scroll-button(*) {
365
- border: 1px solid black;
366
- border-radius: 10px;
367
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
368
- background: rgba(0, 0, 0, 0.163);
369
- color: white;
370
- opacity: 0.7;
371
- cursor: pointer;
372
- transition: scale 0.3s ease-in-out;
373
- }
374
- .product-info-v3.scroll-btns-desktop::scroll-button(*):hover,
375
- .product-info-v3.scroll-btns-desktop::scroll-button(*):focus {
376
- opacity: 1;
377
- scale: 1.2;
378
- }
379
- .product-info-v3.scroll-btns-desktop::scroll-button(*):active {
380
- translate: 1px 1px;
381
- }
382
- .product-info-v3.scroll-btns-desktop::scroll-button(*):disabled {
383
- opacity: 0.2;
384
- cursor: inherit;
385
- }
386
- }
387
- @media screen and (min-width: 768px) and (max-width: 1023px) {
388
- .product-info-v3.scroll-btns-portrait::scroll-button(left) {
389
- content: "\25c4";
390
- position: absolute;
391
- align-self: center;
392
- justify-self: flex-start;
393
- place-self: center flex-start;
394
- z-index: 50;
395
- }
396
- .product-info-v3.scroll-btns-portrait::scroll-button(right) {
397
- content: "\25ba";
398
- position: absolute;
399
- align-self: center;
400
- justify-self: flex-end;
401
- place-self: center flex-end;
402
- z-index: 50;
403
- }
404
- .product-info-v3.scroll-btns-portrait::scroll-button(*) {
405
- border: 1px solid black;
406
- border-radius: 10px;
407
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
408
- background: rgba(0, 0, 0, 0.163);
409
- color: white;
410
- opacity: 0.7;
411
- cursor: pointer;
412
- transition: scale 0.3s ease-in-out;
413
- }
414
- .product-info-v3.scroll-btns-portrait::scroll-button(*):hover,
415
- .product-info-v3.scroll-btns-portrait::scroll-button(*):focus {
416
- opacity: 1;
417
- scale: 1.2;
418
- }
419
- .product-info-v3.scroll-btns-portrait::scroll-button(*):active {
420
- translate: 1px 1px;
421
- }
422
- .product-info-v3.scroll-btns-portrait::scroll-button(*):disabled {
423
- opacity: 0.2;
424
- cursor: inherit;
425
- }
426
- }
427
- @media screen and (max-width: 767px) {
428
- .product-info-v3.scroll-btns-mobile::scroll-button(left) {
429
- content: "\25c4";
430
- position: absolute;
431
- align-self: center;
432
- justify-self: flex-start;
433
- place-self: center flex-start;
434
- z-index: 50;
435
- }
436
- .product-info-v3.scroll-btns-mobile::scroll-button(right) {
437
- content: "\25ba";
438
- position: absolute;
439
- align-self: center;
440
- justify-self: flex-end;
441
- place-self: center flex-end;
442
- z-index: 50;
443
- }
444
- .product-info-v3.scroll-btns-mobile::scroll-button(*) {
445
- border: 1px solid black;
446
- border-radius: 10px;
447
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
448
- background: rgba(0, 0, 0, 0.163);
449
- color: white;
450
- opacity: 0.7;
451
- cursor: pointer;
452
- transition: scale 0.3s ease-in-out;
453
- }
454
- .product-info-v3.scroll-btns-mobile::scroll-button(*):hover,
455
- .product-info-v3.scroll-btns-mobile::scroll-button(*):focus {
456
- opacity: 1;
457
- scale: 1.2;
458
- }
459
- .product-info-v3.scroll-btns-mobile::scroll-button(*):active {
460
- translate: 1px 1px;
461
- }
462
- .product-info-v3.scroll-btns-mobile::scroll-button(*):disabled {
463
- opacity: 0.2;
464
- cursor: inherit;
465
- }
466
- }
467
- @media screen and (min-width: 768px) {
468
- .product-info-v3 {
469
- scroll-snap-type: none;
470
- scroll-snap-type: var(--scroll-snap-type-portrait, none);
471
- }
472
- .product-info-v3 > div {
473
- scroll-snap-align: start;
474
- scroll-snap-align: var(--scroll-snap-align-portrait, start);
475
- }
476
- .product-info-v3 {
477
- overflow: hidden;
478
- overflow: var(--container-overflow-type-portrait, hidden);
479
- grid-auto-flow: row;
480
- grid-auto-flow: var(--grid-auto-flow-portrait, row);
481
- grid-auto-columns: 1fr;
482
- grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
483
- grid-auto-rows: auto;
484
- grid-auto-rows: var(--grid-auto-rows-portrait, auto);
485
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
486
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
487
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), 1fr));
488
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), var(--grid-auto-columns-portrait, 1fr)));
489
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), 1fr));
490
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), var(--grid-auto-rows-portrait, 1fr)));
491
- }
492
- }
493
- @media screen and (min-width: 1024px) {
494
- .product-info-v3 {
495
- scroll-snap-type: none;
496
- scroll-snap-type: var(--scroll-snap-type-desktop, none);
497
- }
498
- .product-info-v3 > div {
499
- scroll-snap-align: start;
500
- scroll-snap-align: var(--scroll-snap-align-desktop, start);
501
- }
502
- .product-info-v3 {
503
- overflow: hidden;
504
- overflow: var(--container-overflow-type-desktop, hidden);
505
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
506
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
507
- grid-auto-flow: row;
508
- grid-auto-flow: var(--grid-auto-flow-desktop, row);
509
- grid-auto-columns: 1fr;
510
- grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
511
- grid-auto-rows: auto;
512
- grid-auto-rows: var(--grid-auto-rows-desktop, auto);
513
- grid-template-columns: repeat(1, 1fr);
514
- grid-template-columns: var(--grid-template-columns-custom-desktop, repeat(var(--grid-template-columns-desktop, 1), var(--grid-auto-columns-desktop, 1fr)));
515
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), 1fr));
516
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
517
- }
518
- }
519
- .product-info-v3__post-cover-link {
520
- grid-area: unset;
521
- position: absolute;
522
- top: 0;
523
- right: 0;
524
- bottom: 0;
525
- left: 0;
526
- width: 100%;
527
- height: 100%;
528
- z-index: 99;
529
- opacity: 0;
530
- }
531
- .product-info-v3__post-cover-label {
532
- position: absolute;
533
- width: 1px;
534
- height: 1px;
535
- margin: -1px;
536
- padding: 0;
537
- overflow: hidden;
538
- clip: rect(0, 0, 0, 0);
539
- white-space: nowrap;
540
- border: 0;
541
- }
542
- .product-info-v3__info-item {
543
- display: grid;
544
- z-index: 5;
545
- z-index: var(--element-z-index, 5);
546
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
547
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
548
- align-self: var(--grid-vertical-placement-mobile);
549
- justify-self: var(--grid-horizontal-placement-mobile);
550
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
551
- }
552
- .product-info-v3__info-item:has(> .subgrid-layout-mobile) {
553
- grid-template-rows: subgrid;
554
- }
555
- .product-info-v3__info-item:has(> .subgrid-layout-mobile) > section {
556
- grid-row: 1/-1;
557
- grid-column: 1/-1;
558
- }
559
- @media screen and (min-width: 768px) {
560
- .product-info-v3__info-item {
561
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
562
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
563
- align-self: var(--grid-vertical-placement-portrait);
564
- justify-self: var(--grid-horizontal-placement-portrait);
565
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
566
- }
567
- .product-info-v3__info-item:has(> .subgrid-layout-portrait) {
568
- grid-template-rows: subgrid;
569
- }
570
- .product-info-v3__info-item:has(> .subgrid-layout-portrait) > section {
571
- grid-row: 1/-1;
572
- grid-column: 1/-1;
573
- }
574
- }
575
- @media screen and (min-width: 1024px) {
576
- .product-info-v3__info-item {
577
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
578
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
579
- align-self: var(--grid-vertical-placement-desktop);
580
- justify-self: var(--grid-horizontal-placement-desktop);
581
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
582
- }
583
- .product-info-v3__info-item:has(> .subgrid-layout-desktop) {
584
- grid-template-rows: subgrid;
585
- }
586
- .product-info-v3__info-item:has(> .subgrid-layout-desktop) > section {
587
- grid-row: 1/-1;
588
- grid-column: 1/-1;
589
- }
590
- }
591
- .product-info-v3__info-item {
592
- width: 100%;
593
- position: relative;
594
- }
595
- .product-info-v3__content-container {
596
- width: 100%;
597
- }
598
- .product-info-v3__cta-selection-container {
599
- display: grid;
600
- z-index: 5;
601
- z-index: var(--element-z-index, 5);
602
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
603
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
604
- align-self: var(--grid-vertical-placement-mobile);
605
- justify-self: var(--grid-horizontal-placement-mobile);
606
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
607
- }
608
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-mobile) {
609
- grid-template-rows: subgrid;
610
- }
611
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-mobile) > section {
612
- grid-row: 1/-1;
613
- grid-column: 1/-1;
614
- }
615
- @media screen and (min-width: 768px) {
616
- .product-info-v3__cta-selection-container {
617
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
618
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
619
- align-self: var(--grid-vertical-placement-portrait);
620
- justify-self: var(--grid-horizontal-placement-portrait);
621
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
622
- }
623
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-portrait) {
624
- grid-template-rows: subgrid;
625
- }
626
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-portrait) > section {
627
- grid-row: 1/-1;
628
- grid-column: 1/-1;
629
- }
630
- }
631
- @media screen and (min-width: 1024px) {
632
- .product-info-v3__cta-selection-container {
633
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
634
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
635
- align-self: var(--grid-vertical-placement-desktop);
636
- justify-self: var(--grid-horizontal-placement-desktop);
637
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
638
- }
639
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-desktop) {
640
- grid-template-rows: subgrid;
641
- }
642
- .product-info-v3__cta-selection-container:has(> .subgrid-layout-desktop) > section {
643
- grid-row: 1/-1;
644
- grid-column: 1/-1;
645
- }
646
- }
647
- .product-info-v3__cta {
648
- display: flex;
649
- }
650
- .product-info-v3__cta-style-post-colour,
651
- .product-info-v3__cta-style-post-text-colour-style {
652
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
653
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
654
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
655
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
656
- }
657
- @media screen and (min-width: 768px) {
658
- .product-info-v3__cta-style-post-colour,
659
- .product-info-v3__cta-style-post-text-colour-style {
660
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
661
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
662
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
663
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
664
- }
665
- }
666
- @media screen and (min-width: 1024px) {
667
- .product-info-v3__cta-style-post-colour,
668
- .product-info-v3__cta-style-post-text-colour-style {
669
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
670
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
671
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
672
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
673
- }
674
- }
675
- .product-info-v3__cta-style-post-colour {
676
- color: var(--post-colour);
677
- border: 1px solid var(--post-colour);
678
- }
679
- .product-info-v3__cta-style-post-text-colour-style {
680
- color: var(--post-text-colour-style);
681
- border: 1px solid var(--post-text-colour-style);
682
- }
683
- .product-info-v3__post-link,
684
- .product-info-v3__better-reviews {
685
- max-width: -moz-max-content;
686
- max-width: max-content;
687
- }
688
- .product-info-v3__gradient-overlay {
689
- height: 100%;
690
- --spread: calc(100% - var(--gradient-spread));
691
- }
692
- .product-info-v3__gradient-overlay__gradient-overlay-element {
693
- position: absolute;
694
- top: 0;
695
- right: 0;
696
- bottom: 0;
697
- left: 0;
698
- z-index: var(--gradient-zindex);
699
- grid-area: var(--gradient-grid-area);
700
- }
701
- .product-info-v3__gradient-overlay__gradient-overlay-element::before,
702
- .product-info-v3__gradient-overlay__gradient-overlay-element:after {
703
- content: "";
704
- pointer-events: none;
705
- position: absolute;
706
- top: 0;
707
- right: 0;
708
- bottom: 0;
709
- left: 0;
710
- opacity: var(--gradient-opacity);
711
- }
712
- .product-info-v3__gradient-overlay__gradient-overlay-element::before {
713
- background:
714
- linear-gradient(
715
- var(--gradient-origin-before),
716
- rgba(255, 255, 255, 0) 0%,
717
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
718
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
719
- }
720
- .product-info-v3__gradient-overlay__gradient-overlay-element::after {
721
- content: var(--enable-after);
722
- background:
723
- linear-gradient(
724
- var(--gradient-origin-after),
725
- rgba(255, 255, 255, 0) 0%,
726
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
727
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
728
- }
729
- .product-info-v3__gradient-overlay__blur-overlay-element {
730
- background: var(--blur-colour);
731
- backdrop-filter: blur(var(--blur-value));
732
- position: absolute;
733
- top: 0;
734
- right: 0;
735
- bottom: 0;
736
- left: 0;
737
- z-index: var(--blur-zindex);
738
- }
739
- .product-info-v3__post-tags {
740
- pointer-events: none;
741
- display: flex;
742
- width: auto;
743
- display: grid;
744
- z-index: 5;
745
- z-index: var(--element-z-index, 5);
746
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
747
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
748
- align-self: var(--grid-vertical-placement-mobile);
749
- justify-self: var(--grid-horizontal-placement-mobile);
750
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
751
- }
752
- .product-info-v3__post-tags:has(> .subgrid-layout-mobile) {
753
- grid-template-rows: subgrid;
754
- }
755
- .product-info-v3__post-tags:has(> .subgrid-layout-mobile) > section {
756
- grid-row: 1/-1;
757
- grid-column: 1/-1;
758
- }
759
- @media screen and (min-width: 768px) {
760
- .product-info-v3__post-tags {
761
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
762
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
763
- align-self: var(--grid-vertical-placement-portrait);
764
- justify-self: var(--grid-horizontal-placement-portrait);
765
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
766
- }
767
- .product-info-v3__post-tags:has(> .subgrid-layout-portrait) {
768
- grid-template-rows: subgrid;
769
- }
770
- .product-info-v3__post-tags:has(> .subgrid-layout-portrait) > section {
771
- grid-row: 1/-1;
772
- grid-column: 1/-1;
773
- }
774
- }
775
- @media screen and (min-width: 1024px) {
776
- .product-info-v3__post-tags {
777
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
778
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
779
- align-self: var(--grid-vertical-placement-desktop);
780
- justify-self: var(--grid-horizontal-placement-desktop);
781
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
782
- }
783
- .product-info-v3__post-tags:has(> .subgrid-layout-desktop) {
784
- grid-template-rows: subgrid;
785
- }
786
- .product-info-v3__post-tags:has(> .subgrid-layout-desktop) > section {
787
- grid-row: 1/-1;
788
- grid-column: 1/-1;
789
- }
790
- }
791
- .product-info-v3__post-image-container {
792
- display: grid;
793
- grid-template: "main"/1fr;
794
- }
795
- .product-info-v3__post-image-container--image-accent {
796
- position: relative;
797
- }
798
- .product-info-v3__post-image-container--image-accent img,
799
- .product-info-v3__post-image-container--image-accent svg {
800
- margin: 0;
801
- margin: initial;
802
- position: relative;
803
- position: var(--element-position, relative);
804
- z-index: var(--element-z-index);
805
- align-self: var(--mobile-vertical-placement);
806
- justify-self: var(--mobile-horizontal-placement);
807
- place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
808
- translate: 0 0;
809
- translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
810
- rotate: 0deg;
811
- rotate: var(--element-rotation-mobile, 0deg);
812
- }
813
- @media screen and (min-width: 1024px) {
814
- .product-info-v3__post-image-container--image-accent img,
815
- .product-info-v3__post-image-container--image-accent svg {
816
- align-self: var(--desktop-vertical-placement);
817
- justify-self: var(--desktop-horizontal-placement);
818
- place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
819
- translate: 0 0;
820
- translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
821
- rotate: 0deg;
822
- rotate: var(--element-rotation-desktop, 0deg);
823
- }
824
- }
825
- .product-info-v3__post__image {
826
- display: flex;
827
- justify-content: center;
828
- margin-left: auto;
829
- margin-right: auto;
830
- grid-area: main;
831
- height: auto;
832
- aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
833
- display: grid;
834
- z-index: 5;
835
- z-index: var(--element-z-index, 5);
836
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
837
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
838
- align-self: var(--grid-vertical-placement-mobile);
839
- justify-self: var(--grid-horizontal-placement-mobile);
840
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
841
- }
842
- .product-info-v3__post__image:has(> .subgrid-layout-mobile) {
843
- grid-template-rows: subgrid;
844
- }
845
- .product-info-v3__post__image:has(> .subgrid-layout-mobile) > section {
846
- grid-row: 1/-1;
847
- grid-column: 1/-1;
848
- }
849
- @media screen and (min-width: 768px) {
850
- .product-info-v3__post__image {
851
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
852
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
853
- align-self: var(--grid-vertical-placement-portrait);
854
- justify-self: var(--grid-horizontal-placement-portrait);
855
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
856
- }
857
- .product-info-v3__post__image:has(> .subgrid-layout-portrait) {
858
- grid-template-rows: subgrid;
859
- }
860
- .product-info-v3__post__image:has(> .subgrid-layout-portrait) > section {
861
- grid-row: 1/-1;
862
- grid-column: 1/-1;
863
- }
864
- }
865
- @media screen and (min-width: 1024px) {
866
- .product-info-v3__post__image {
867
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
868
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
869
- align-self: var(--grid-vertical-placement-desktop);
870
- justify-self: var(--grid-horizontal-placement-desktop);
871
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
872
- }
873
- .product-info-v3__post__image:has(> .subgrid-layout-desktop) {
874
- grid-template-rows: subgrid;
875
- }
876
- .product-info-v3__post__image:has(> .subgrid-layout-desktop) > section {
877
- grid-row: 1/-1;
878
- grid-column: 1/-1;
879
- }
880
- }
881
- .product-info-v3__post__image {
882
- width: var(--post-image-width-mobile);
883
- }
884
- @media screen and (min-width: 768px) {
885
- .product-info-v3__post__image {
886
- aspect-ratio: var(--image-aspect-ratio-portrait);
887
- }
888
- }
889
- @media screen and (min-width: 1024px) {
890
- .product-info-v3__post__image {
891
- width: var(--post-image-width-desktop);
892
- aspect-ratio: var(--image-aspect-ratio-desktop);
893
- }
894
- }
895
- .product-info-v3__post__image {
896
- -o-object-fit: var(--image-fit-style);
897
- object-fit: var(--image-fit-style);
898
- margin: auto;
899
- }
900
- .product-info-v3__global-image {
901
- z-index: var(--global-image-zindex);
902
- max-width: var(--global-image-max-width);
903
- min-height: 100%;
904
- }
905
- .product-info-v3__global-image__picture {
906
- width: var(--global-image-width);
907
- display: flex;
908
- position: var(--global-image-position);
909
- top: 0;
910
- right: 0;
911
- bottom: 0;
912
- left: 0;
913
- }
914
- .product-info-v3__global-image__image {
915
- -o-object-fit: var(--global-image-fit-style);
916
- object-fit: var(--global-image-fit-style);
917
- }
918
- .product-info-v3__product-logo {
919
- max-width: calc(var(--logo-max-width-mobile) / var(--design-reference) * var(--screen-width));
920
- }
921
- @media screen and (min-width: 1024px) {
922
- .product-info-v3__product-logo {
923
- max-width: calc(var(--logo-max-width-desktop) / var(--design-reference) * var(--screen-width));
924
- }
925
- }
926
- .product-info-v3__person-rating {
927
- display: flex;
928
- gap: 1em;
929
- }
930
- .product-info-v3__person-rating-star {
931
- --rating-star-colour: gold;
932
- width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
933
- }
934
- .product-info-v3__person-questionaire-list {
935
- list-style-type: none;
936
- }
937
- .product-info-v3__person-email {
938
- display: flex;
939
- gap: 1em;
940
- }
941
- .product-info-v3__person-email-icon {
942
- width: 1em;
943
- }
944
- .product-info-v3__post-text-alternative-style {
945
- width: auto;
946
- display: grid;
947
- z-index: 5;
948
- z-index: var(--element-z-index, 5);
949
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
950
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
951
- align-self: var(--grid-vertical-placement-mobile);
952
- justify-self: var(--grid-horizontal-placement-mobile);
953
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
954
- }
955
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-mobile) {
956
- grid-template-rows: subgrid;
957
- }
958
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-mobile) > section {
959
- grid-row: 1/-1;
960
- grid-column: 1/-1;
961
- }
962
- @media screen and (min-width: 768px) {
963
- .product-info-v3__post-text-alternative-style {
964
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
965
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
966
- align-self: var(--grid-vertical-placement-portrait);
967
- justify-self: var(--grid-horizontal-placement-portrait);
968
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
969
- }
970
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-portrait) {
971
- grid-template-rows: subgrid;
972
- }
973
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-portrait) > section {
974
- grid-row: 1/-1;
975
- grid-column: 1/-1;
976
- }
977
- }
978
- @media screen and (min-width: 1024px) {
979
- .product-info-v3__post-text-alternative-style {
980
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
981
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
982
- align-self: var(--grid-vertical-placement-desktop);
983
- justify-self: var(--grid-horizontal-placement-desktop);
984
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
985
- }
986
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-desktop) {
987
- grid-template-rows: subgrid;
988
- }
989
- .product-info-v3__post-text-alternative-style:has(> .subgrid-layout-desktop) > section {
990
- grid-row: 1/-1;
991
- grid-column: 1/-1;
992
- }
993
- }