woocommerce.scss — WooCommerce 11.1.0

woocommerce / assets / css / woocommerce.scss

woocommerce / assets / css Last commit date

woocommerce.scss

2549 lines

1	/**
2	* woocommerce.scss
3	* Governs the general look and feel of WooCommerce sections of stores using themes that do not
4	* integrate with WooCommerce specifically.
5	*/
6
7	/**
8	* Imports
9	*/
10	@import "mixins";
11	@import "variables";
12	@import "animation";
13	@import "fonts";
14	@import "forms";
15
16	/**
17	* Global styles
18	*/
19	p.demo_store,
20	.woocommerce-store-notice {
21	position: absolute;
22	top: 0;
23	left: 0;
24	right: 0;
25	margin: 0;
26	width: 100%;
27	font-size: 1em;
28	padding: 1em 0;
29	text-align: center;
30	background-color: $primary;
31	color: $primarytext;
32	z-index: 99998;
33	box-shadow: 0 1px 1em rgba(0, 0, 0, 0.2);
34	display: none;
35
36	a {
37	color: $primarytext;
38	text-decoration: underline;
39	}
40	}
41
42	.screen-reader-text {
43	clip: rect(1px, 1px, 1px, 1px);
44	height: 1px;
45	overflow: hidden;
46	position: absolute !important;
47	width: 1px;
48	word-wrap: normal !important;
49	}
50
51	.admin-bar p.demo_store {
52	top: 32px;
53	}
54
55	.woocommerce-product-gallery__photoswipe-video-wrapper {
56	display: flex;
57	align-items: center;
58	justify-content: center;
59	width: 100%;
60	height: 100%;
61	}
62
63	.woocommerce-product-gallery__photoswipe-video {
64	display: block;
65	width: 100%;
66	height: 100%;
67	max-width: 100%;
68	max-height: 100%;
69	object-fit: contain;
70	}
71
72	/**
73	* Utility classes
74	*/
75	.clear {
76	clear: both;
77	}
78
79	/**
80	* Main WooCommerce styles
81	*/
82	.woocommerce {
83	.blockUI.blockOverlay {
84	position: relative;
85
86	@include loader();
87	}
88
89	.loader {
90	@include loader();
91	}
92
93	a.remove {
94	display: block;
95	font-size: 1.5em;
96	height: 1em;
97	width: 1em;
98	text-align: center;
99	line-height: 1;
100	border-radius: 100%;
101	color: var(
102	--wc-red
103	) !important; // Required for default theme compatibility
104	text-decoration: none;
105	font-weight: 700;
106	border: 0;
107
108	&:hover {
109	color: #fff !important; // Required for default theme compatibility
110	background: var(--wc-red);
111	}
112	}
113
114	small.note {
115	display: block;
116	color: $subtext;
117	font-size: 0.857em;
118	margin-top: 10px;
119	}
120
121	.woocommerce-breadcrumb {
122	@include clearfix();
123	margin: 0 0 1em;
124	padding: 0;
125	}
126
127	.quantity .qty {
128	width: 3.631em;
129	text-align: center;
130	}
131
132	/**
133	* Product Page
134	*/
135	div.product {
136	margin-bottom: 0;
137	position: relative;
138
139	.product_title {
140	clear: none;
141	margin-top: 0;
142	padding: 0;
143	}
144
145	span.price,
146	p.price {
147	ins {
148	background: inherit;
149	font-weight: 700;
150	display: inline-block;
151	}
152
153	del {
154	opacity: 0.7;
155	display: inline-block;
156	}
157	}
158
159	p.stock {
160	font-size: 0.92em;
161	}
162
163	.woocommerce-product-rating {
164	margin-bottom: 1.618em;
165	}
166
167	div.images {
168	margin-bottom: 2em;
169
170	img {
171	display: block;
172	width: 100%;
173	height: auto;
174	box-shadow: none;
175	}
176
177	div.thumbnails {
178	padding-top: 1em;
179	}
180
181	&.woocommerce-product-gallery {
182	position: relative;
183	}
184
185	.woocommerce-product-gallery__wrapper {
186	transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
187	margin: 0;
188	padding: 0;
189	}
190
191	.woocommerce-product-gallery__wrapper .zoomImg {
192	background-color: #fff;
193	opacity: 0;
194	}
195
196	.woocommerce-product-gallery__image--placeholder {
197	border: 1px solid #f2f2f2;
198	}
199
200	.woocommerce-product-gallery__image:nth-child(n + 2) {
201	width: 25%;
202	display: inline-block;
203	}
204
205	.woocommerce-product-gallery__image a {
206	display: block;
207	outline-offset: -2px;
208	}
209
210	.woocommerce-product-gallery__video .wp-post-video {
211	display: block;
212	width: 100%;
213	height: auto;
214	}
215
216	.woocommerce-product-gallery__trigger {
217	@include woocommerce-product-gallery__trigger;
218	}
219
220	.flex-control-thumbs {
221	overflow: hidden;
222	zoom: 1;
223	margin: 0;
224	padding: 0;
225
226	li {
227	width: 25%;
228	float: left;
229	margin: 0;
230	list-style: none;
231	position: relative;
232
233	img,
234	.woocommerce-product-gallery__video-thumbnail-preview {
235	cursor: pointer;
236	opacity: 0.5;
237	margin: 0;
238
239	&.flex-active,
240	&:hover {
241	opacity: 1;
242	}
243	}
244
245	&.woocommerce-product-gallery__video-thumbnail {
246	&::before {
247	content: "\25B6";
248	position: absolute;
249	left: 50%;
250	top: 50%;
251	transform: translate(-50%, -50%);
252	z-index: 1;
253	color: $contentbg;
254	font-size: 1.4em;
255	text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.8);
256	pointer-events: none;
257	}
258
259	img.woocommerce-product-gallery__video-thumbnail-placeholder,
260	img.woocommerce-product-gallery__video-thumbnail-placeholder.flex-active,
261	img.woocommerce-product-gallery__video-thumbnail-placeholder:hover {
262	opacity: 0;
263	}
264
265	.woocommerce-product-gallery__video-thumbnail-preview {
266	position: absolute;
267	inset: 0;
268	width: 100%;
269	height: 100%;
270	object-fit: cover;
271	pointer-events: none;
272	}
273
274	&:hover .woocommerce-product-gallery__video-thumbnail-preview,
275	.woocommerce-product-gallery__video-thumbnail-placeholder.flex-active
276	+ .woocommerce-product-gallery__video-thumbnail-preview {
277	opacity: 1;
278	}
279	}
280	}
281	}
282	}
283
284	.woocommerce-product-gallery--columns-3 {
285	.flex-control-thumbs li:nth-child(3n + 1) {
286	clear: left;
287	}
288	}
289
290	.woocommerce-product-gallery--columns-4 {
291	.flex-control-thumbs li:nth-child(4n + 1) {
292	clear: left;
293	}
294	}
295
296	.woocommerce-product-gallery--columns-5 {
297	.flex-control-thumbs li:nth-child(5n + 1) {
298	clear: left;
299	}
300	}
301
302	div.summary {
303	margin-bottom: 2em;
304	}
305
306	div.social {
307	text-align: right;
308	margin: 0 0 1em;
309
310	span {
311	margin: 0 0 0 2px;
312
313	span {
314	margin: 0;
315	}
316
317	.stButton .chicklets {
318	padding-left: 16px;
319	width: 0;
320	}
321	}
322
323	iframe {
324	float: left;
325	margin-top: 3px;
326	}
327	}
328
329	.woocommerce-tabs {
330	ul.tabs {
331	list-style: none;
332	padding: 0 0 0 1em;
333	margin: 0 0 1.618em;
334	overflow: hidden;
335	position: relative;
336
337	li {
338	border: 1px solid darken($secondary, 10%);
339	background-color: $secondary;
340	color: $secondarytext;
341	display: inline-block;
342	position: relative;
343	z-index: 0;
344	border-radius: 4px 4px 0 0;
345	margin: 0 -5px;
346	padding: 0 1em;
347
348	a {
349	display: inline-block;
350	padding: 0.5em 0;
351	font-weight: 700;
352	color: $secondarytext;
353	text-decoration: none;
354
355	&:hover {
356	text-decoration: none;
357	color: lighten($secondarytext, 10%);
358	}
359	}
360
361	&.active {
362	background: $contentbg;
363	color: $secondarytext;
364	z-index: 2;
365	border-bottom-color: $contentbg;
366
367	a {
368	color: inherit;
369	text-shadow: inherit;
370	}
371
372	&::before {
373	box-shadow: 2px 2px 0 $contentbg;
374	}
375
376	&::after {
377	box-shadow: -2px 2px 0 $contentbg;
378	}
379	}
380
381	&::before,
382	&::after {
383	border: 1px solid darken($secondary, 10%);
384	position: absolute;
385	bottom: -1px;
386	width: 5px;
387	height: 5px;
388	content: " ";
389	box-sizing: border-box;
390	}
391
392	&::before {
393	left: -5px;
394	border-bottom-right-radius: 4px;
395	border-width: 0 1px 1px 0;
396	box-shadow: 2px 2px 0 $secondary;
397	}
398
399	&::after {
400	right: -5px;
401	border-bottom-left-radius: 4px;
402	border-width: 0 0 1px 1px;
403	box-shadow: -2px 2px 0 $secondary;
404	}
405	}
406
407	&::before {
408	position: absolute;
409	content: " ";
410	width: 100%;
411	bottom: 0;
412	left: 0;
413	border-bottom: 1px solid darken($secondary, 10%);
414	z-index: 1;
415	}
416	}
417
418	.panel {
419	margin: 0 0 2em;
420	padding: 0;
421	}
422	}
423
424	p.cart {
425	margin-bottom: 2em;
426
427	@include clearfix();
428	}
429
430	form.cart {
431	margin-bottom: 2em;
432
433	@include clearfix();
434
435	div.quantity {
436	float: left;
437	margin: 0 4px 0 0;
438	}
439
440	table {
441	border-width: 0 0 1px;
442
443	td {
444	padding-left: 0;
445	}
446
447	div.quantity {
448	float: none;
449	margin: 0;
450	}
451
452	small.stock {
453	display: block;
454	float: none;
455	}
456	}
457
458	.variations {
459	margin-bottom: 1em;
460	border: 0;
461	width: 100%;
462
463	td,
464	th {
465	border: 0;
466	line-height: 2em;
467	vertical-align: top;
468	}
469
470	label {
471	font-weight: 700;
472	text-align: left;
473	}
474
475	select {
476	max-width: 100%;
477	min-width: 75%;
478	display: inline-block;
479	margin-right: 1em;
480
481	/* We hide the default chevron because it cannot be directly modified. Instead, we add a custom chevron using a background image. */
482	appearance: none;
483	-webkit-appearance: none;
484	-moz-appearance: none;
485	padding-right: 3em;
486	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
487	no-repeat;
488	background-size: 16px;
489	-webkit-background-size: 16px;
490	background-position: calc(100% - 12px) 50%;
491	-webkit-background-position: calc(100% - 12px) 50%;
492	}
493
494	td.label {
495	padding-right: 1em;
496	}
497	}
498
499	.woocommerce-variation-description p {
500	margin-bottom: 1em;
501	}
502
503	.reset_variations {
504	visibility: hidden;
505	font-size: 0.83em;
506	}
507
508	.wc-no-matching-variations {
509	display: none;
510	}
511
512	.button {
513	vertical-align: middle;
514	float: left;
515	}
516
517	.group_table {
518	td.woocommerce-grouped-product-list-item__label {
519	padding-right: 1em;
520	padding-left: 1em;
521	}
522
523	td {
524	vertical-align: top;
525	padding-bottom: 0.5em;
526	border: 0;
527	}
528
529	td:first-child {
530	width: 4em;
531	text-align: center;
532	}
533
534	.wc-grouped-product-add-to-cart-checkbox {
535	display: inline-block;
536	width: auto;
537	margin: 0 auto;
538	transform: scale(1.5, 1.5);
539	}
540	}
541	}
542	}
543
544	span.onsale {
545	min-height: 3.236em;
546	min-width: 3.236em;
547	padding: 0.202em;
548	font-size: 1em;
549	font-weight: 700;
550	position: absolute;
551	text-align: center;
552	line-height: 3.236;
553	top: -0.5em;
554	left: -0.5em;
555	margin: 0;
556	border-radius: 100%;
557	background-color: $highlight;
558	color: $highlightext;
559	font-size: 0.857em;
560	z-index: 9;
561	}
562
563	/**
564	* Product loops
565	*/
566	.products ul,
567	ul.products {
568	margin: 0 0 1em;
569	padding: 0;
570	list-style: none outside;
571	clear: both;
572
573	@include clearfix();
574
575	li {
576	list-style: none outside;
577	}
578	}
579
580	ul.products li.product {
581	.onsale {
582	top: 0;
583	right: 0;
584	left: auto;
585	margin: -0.5em -0.5em 0 0;
586	}
587
588	h3,
589	.woocommerce-loop-product__title,
590	.woocommerce-loop-category__title {
591	padding: 0.5em 0;
592	margin: 0;
593	font-size: 1em;
594	}
595
596	a {
597	text-decoration: none;
598
599	&.woocommerce-loop-product__link {
600	display: block;
601	}
602	}
603
604	a img {
605	width: 100%;
606	height: auto;
607	display: block;
608	margin: 0 0 1em;
609	box-shadow: none;
610	}
611
612	strong {
613	display: block;
614	}
615
616	.woocommerce-placeholder {
617	border: 1px solid #f2f2f2;
618	}
619
620	.star-rating {
621	font-size: 0.857em;
622	}
623
624	.button {
625	display: inline-block;
626	margin-top: 1em;
627	}
628
629	.price {
630	display: block;
631	font-weight: normal;
632	margin-bottom: 0.5em;
633	font-size: 0.857em;
634
635	del {
636	color: inherit;
637	opacity: 0.7;
638	display: inline-block;
639	}
640
641	ins {
642	background: none;
643	font-weight: 700;
644	display: inline-block;
645	}
646
647	.from {
648	font-size: 0.67em;
649	margin: -2px 0 0 0;
650	text-transform: uppercase;
651	color: rgba(desaturate($highlight, 75%), 0.5);
652	}
653	}
654	}
655
656	.woocommerce-result-count {
657	margin: 0 0 1em;
658	}
659
660	.woocommerce-ordering {
661	margin: 0 0 1em;
662
663	> label {
664	margin-right: 0.25rem;
665	}
666
667	select {
668	vertical-align: top;
669	}
670	}
671
672	nav.woocommerce-pagination {
673	text-align: center;
674
675	ul {
676	display: inline-block;
677	white-space: nowrap;
678	padding: 0;
679	clear: both;
680	border: 1px solid darken($secondary, 10%);
681	border-right: 0;
682	margin: 1px;
683
684	li {
685	border-right: 1px solid darken($secondary, 10%);
686	padding: 0;
687	margin: 0;
688	float: left;
689	display: inline;
690	overflow: hidden;
691
692	a,
693	span {
694	margin: 0;
695	text-decoration: none;
696	padding: 0;
697	line-height: 1;
698	font-size: 1em;
699	font-weight: normal;
700	padding: 0.5em;
701	min-width: 1em;
702	display: block;
703	}
704
705	span.current,
706	a:hover,
707	a:focus {
708	background: $secondary;
709	color: darken($secondary, 40%);
710	}
711	}
712	}
713	}
714
715	.cart .button,
716	.cart input.button {
717	float: none;
718	}
719
720	a.added_to_cart {
721	padding-top: 0.5em;
722	display: inline-block;
723	}
724
725	/**
726	* Reviews
727	*/
728	#reviews {
729	h2 small {
730	float: right;
731	color: $subtext;
732	font-size: 15px;
733	margin: 10px 0 0;
734
735	a {
736	text-decoration: none;
737	color: $subtext;
738	}
739	}
740
741	h3 {
742	margin: 0;
743	}
744
745	#respond {
746	margin: 0;
747	border: 0;
748	padding: 0;
749	}
750
751	#comment {
752	height: 75px;
753	}
754
755	#comments {
756	.add_review {
757	@include clearfix();
758	}
759
760	h2 {
761	clear: none;
762	}
763
764	ol.commentlist {
765	@include clearfix();
766	margin: 0;
767	width: 100%;
768	background: none;
769	list-style: none;
770
771	li {
772	padding: 0;
773	margin: 0 0 20px;
774	border: 0;
775	position: relative;
776	background: 0;
777	border: 0;
778
779	img.avatar {
780	float: left;
781	position: absolute;
782	top: 0;
783	left: 0;
784	padding: 3px;
785	width: 32px;
786	height: auto;
787	background: $secondary;
788	border: 1px solid darken($secondary, 3%);
789	margin: 0;
790	box-shadow: none;
791	}
792
793	.comment-text {
794	margin: 0 0 0 50px;
795	border: 1px solid darken($secondary, 3%);
796	border-radius: 4px;
797	padding: 1em 1em 0;
798
799	@include clearfix();
800
801	p {
802	margin: 0 0 1em;
803	}
804
805	p.meta {
806	font-size: 0.83em;
807	}
808	}
809	}
810
811	ul.children {
812	list-style: none outside;
813	margin: 20px 0 0 50px;
814
815	.star-rating {
816	display: none;
817	}
818	}
819
820	#respond {
821	border: 1px solid darken($secondary, 3%);
822	border-radius: 4px;
823	padding: 1em 1em 0;
824	margin: 20px 0 0 50px;
825	}
826	}
827
828	.commentlist > li::before {
829	content: "";
830	}
831	}
832	}
833
834	/**
835	* Star ratings
836	*/
837	.star-rating {
838	float: right;
839	overflow: hidden;
840	position: relative;
841	height: 1em;
842	line-height: 1;
843	font-size: 1em;
844	width: 5.4em;
845	font-family: WooCommerce;
846
847	&::before {
848	content: "\73\73\73\73\73";
849	color: darken($secondary, 10%);
850	float: left;
851	top: 0;
852	left: 0;
853	position: absolute;
854	}
855
856	span {
857	overflow: hidden;
858	float: left;
859	top: 0;
860	left: 0;
861	position: absolute;
862	padding-top: 1.5em;
863	}
864
865	span::before {
866	content: "\53\53\53\53\53";
867	top: 0;
868	position: absolute;
869	left: 0;
870	}
871	}
872
873	.woocommerce-product-rating {
874	@include clearfix();
875	line-height: 2;
876	display: block;
877
878	.star-rating {
879	margin: 0.5em 4px 0 0;
880	float: left;
881	}
882	}
883
884	.products .star-rating {
885	display: block;
886	margin: 0 0 0.5em;
887	float: none;
888	}
889
890	.hreview-aggregate .star-rating {
891	margin: 10px 0 0;
892	}
893
894	#review_form #respond {
895	@include clearfix();
896	position: static;
897	margin: 0;
898	width: auto;
899	padding: 0;
900	background: transparent none;
901	border: 0;
902
903	p {
904	margin: 0 0 10px;
905	}
906
907	.form-submit input {
908	left: auto;
909	}
910
911	textarea {
912	box-sizing: border-box;
913	width: 100%;
914	}
915	}
916
917	p.stars {
918	a {
919	position: relative;
920	height: 1em;
921	width: 1em;
922	text-indent: -999em;
923	display: inline-block;
924	text-decoration: none;
925	font-size: 24px;
926
927	&::before {
928	display: block;
929	position: absolute;
930	top: 0;
931	left: 0;
932	width: 1em;
933	height: 1em;
934	line-height: 1;
935	font-family: "WooCommerce";
936	content: "\e021";
937	text-indent: 0;
938	}
939
940	&:hover ~ a::before {
941	content: "\e021";
942	}
943	}
944
945	&:hover a::before {
946	content: "\e020";
947	}
948
949	&.selected {
950	a.active {
951	&::before {
952	content: "\e020";
953	}
954
955	~ a::before {
956	content: "\e021";
957	}
958	}
959
960	a:not(.active)::before {
961	content: "\e020";
962	}
963	}
964	}
965
966	/**
967	* Tables
968	*/
969	table.shop_attributes {
970	border: 0;
971	border-top: 1px dotted rgba(0, 0, 0, 0.1);
972	margin-bottom: 1.618em;
973	width: 100%;
974
975	th {
976	width: 150px;
977	font-weight: 700;
978	padding: 8px;
979	border-top: 0;
980	border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
981	margin: 0;
982	line-height: 1.5;
983	}
984
985	td {
986	font-style: italic;
987	padding: 0;
988	border-top: 0;
989	border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
990	margin: 0;
991	line-height: 1.5;
992
993	p {
994	margin: 0;
995	padding: 8px 0;
996	}
997	}
998
999	tr:nth-child(even) td,
1000	tr:nth-child(even) th {
1001	background: rgba(0, 0, 0, 0.025);
1002	}
1003	}
1004
1005	table.shop_table {
1006	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
1007	margin: 0 -1px 24px 0;
1008	text-align: left;
1009	width: 100%;
1010	border-collapse: separate;
1011	border-spacing: 0;
1012	border-radius: 5px;
1013
1014	th {
1015	font-weight: 700;
1016	padding: 9px 12px;
1017	line-height: 1.5em;
1018	}
1019
1020	td {
1021	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
1022	padding: 9px 12px;
1023	vertical-align: middle;
1024	line-height: 1.5em;
1025
1026	small {
1027	font-weight: normal;
1028	}
1029
1030	del {
1031	font-weight: normal;
1032	}
1033	}
1034
1035	tbody:first-child tr:first-child {
1036	th,
1037	td {
1038	border-top: 0;
1039	}
1040	}
1041
1042	tfoot td,
1043	tfoot th,
1044	tbody th {
1045	font-weight: 700;
1046	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
1047	}
1048	}
1049
1050	table.my_account_orders {
1051	font-size: 0.85em;
1052
1053	th,
1054	td {
1055	padding: 4px 8px;
1056	vertical-align: middle;
1057	}
1058
1059	.button {
1060	white-space: nowrap;
1061	}
1062	}
1063
1064	table.woocommerce-MyAccount-downloads {
1065	td,
1066	th {
1067	vertical-align: top;
1068	text-align: center;
1069
1070	&:first-child {
1071	text-align: left;
1072	}
1073
1074	&:last-child {
1075	text-align: left;
1076	}
1077
1078	.woocommerce-MyAccount-downloads-file::before {
1079	content: "\2193";
1080	display: inline-block;
1081	}
1082	}
1083	}
1084
1085	td.product-name {
1086	dl.variation,
1087	.wc-item-meta {
1088	list-style: none outside;
1089
1090	dt,
1091	.wc-item-meta-label {
1092	float: left;
1093	clear: both;
1094	margin-right: 0.25em;
1095	display: inline-block;
1096	list-style: none outside;
1097	}
1098
1099	dd {
1100	margin: 0;
1101	}
1102
1103	p,
1104	&:last-child {
1105	margin-bottom: 0;
1106	}
1107	}
1108
1109	p.backorder_notification {
1110	font-size: 0.83em;
1111	}
1112	}
1113
1114	td.product-quantity {
1115	min-width: 80px;
1116	}
1117
1118	/**
1119	* Cart sidebar
1120	*/
1121	ul.cart_list,
1122	ul.product_list_widget {
1123	list-style: none outside;
1124	padding: 0;
1125	margin: 0;
1126
1127	li {
1128	padding: 4px 0;
1129	margin: 0;
1130
1131	@include clearfix();
1132	list-style: none;
1133
1134	a {
1135	display: block;
1136	font-weight: 700;
1137	}
1138
1139	img {
1140	float: right;
1141	margin-left: 4px;
1142	width: 32px;
1143	height: auto;
1144	box-shadow: none;
1145	}
1146
1147	dl {
1148	margin: 0;
1149	padding-left: 1em;
1150	border-left: 2px solid rgba(0, 0, 0, 0.1);
1151
1152	@include clearfix();
1153
1154	dt,
1155	dd {
1156	display: inline-block;
1157	float: left;
1158	margin-bottom: 1em;
1159	}
1160
1161	dt {
1162	font-weight: 700;
1163	padding: 0 0 0.25em;
1164	margin: 0 4px 0 0;
1165	clear: left;
1166	}
1167
1168	dd {
1169	padding: 0 0 0.25em;
1170
1171	p:last-child {
1172	margin-bottom: 0;
1173	}
1174	}
1175	}
1176
1177	.star-rating {
1178	float: none;
1179	}
1180	}
1181	}
1182
1183	&.widget_shopping_cart,
1184	.widget_shopping_cart {
1185	.total {
1186	border-top: 3px double $secondary;
1187	padding: 4px 0 0;
1188
1189	strong {
1190	min-width: 40px;
1191	display: inline-block;
1192	}
1193	}
1194
1195	.cart_list li {
1196	padding-left: 2em;
1197	position: relative;
1198	padding-top: 0;
1199
1200	a.remove {
1201	position: absolute;
1202	top: 0;
1203	left: 0;
1204	}
1205	}
1206
1207	.buttons {
1208	@include clearfix();
1209
1210	a {
1211	margin-right: 5px;
1212	margin-bottom: 5px;
1213	}
1214	}
1215	}
1216
1217	/**
1218	* Forms
1219	*/
1220	form.login,
1221	form.checkout_coupon,
1222	form.register {
1223	border: 1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
1224	padding: 20px;
1225	margin: 2em 0;
1226	text-align: left;
1227	border-radius: 5px;
1228	}
1229
1230	form.checkout_coupon {
1231	.coupon-error-notice {
1232	@include coupon-error-notice-checkout();
1233	}
1234
1235	.input-text.has-error:focus {
1236	border-color: var(--wc-red);
1237	}
1238	}
1239
1240	ul#shipping_method {
1241	list-style: none outside;
1242	margin: 0;
1243	padding: 0;
1244
1245	li {
1246	margin: 0 0 0.5em;
1247	line-height: 1.5em;
1248	list-style: none outside;
1249
1250	input {
1251	margin: 3px 0.4375em 0 0;
1252	vertical-align: top;
1253	}
1254
1255	label {
1256	display: inline;
1257	}
1258	}
1259
1260	.amount {
1261	font-weight: 700;
1262	}
1263	}
1264
1265	p.woocommerce-shipping-contents {
1266	margin: 0;
1267	}
1268
1269	/**
1270	* Back in stock form
1271	*/
1272	.wc_bis_form {
1273	margin: 2em 0;
1274	padding: 0;
1275
1276	&.hidden {
1277	display: none;
1278	}
1279
1280	&__form-row {
1281	display: flex;
1282	flex-wrap: wrap;
1283	flex-direction: row;
1284	align-items: center;
1285	justify-content: flex-start;
1286	gap: 0.7em;
1287	margin: .7em 0;
1288	}
1289
1290	&__input {
1291	box-sizing: border-box;
1292	width: auto;
1293	white-space: nowrap;
1294	}
1295
1296	&__button {
1297	box-sizing: border-box;
1298	white-space: nowrap;
1299	}
1300
1301	&__checkbox {
1302	font-size: var(--wp--preset--font-size--small, .7em);
1303	display: block;
1304	}
1305	}
1306
1307	:where(.wc_bis_form__input, .wc_bis_form__button) {
1308	padding: .9rem 1.1rem;
1309	line-height: 1;
1310	}
1311
1312	/**
1313	* Order page
1314	*/
1315	ul.order_details {
1316	@include clearfix();
1317	margin: 0 0 3em;
1318	list-style: none;
1319
1320	li {
1321	float: left;
1322	margin-right: 2em;
1323	text-transform: uppercase;
1324	font-size: 0.715em;
1325	line-height: 1;
1326	border-right: 1px dashed darken($secondary, 10%);
1327	padding-right: 2em;
1328	margin-left: 0;
1329	padding-left: 0;
1330	list-style-type: none;
1331
1332	strong {
1333	display: block;
1334	font-size: 1.4em;
1335	text-transform: none;
1336	line-height: 1.5;
1337	}
1338
1339	&:last-of-type {
1340	border: none;
1341	}
1342	}
1343	}
1344
1345	.wc-bacs-bank-details-account-name {
1346	font-weight: bold;
1347	}
1348
1349	.woocommerce-order-downloads,
1350	.woocommerce-customer-details,
1351	.woocommerce-order-details {
1352	margin-bottom: 2em;
1353
1354	.order-actions--heading {
1355	vertical-align: middle;
1356	}
1357
1358	.order-actions-button {
1359	margin-right: 10px;
1360
1361	&:last-child {
1362	margin-right: 0;
1363	}
1364	}
1365
1366	*:last-child {
1367	margin-bottom: 0;
1368	}
1369	}
1370
1371	.woocommerce-customer-details .addresses,
1372	.woocommerce-customer-details .additional-fields {
1373	margin-bottom: 2em;
1374
1375	&:last-child {
1376	margin-bottom: 0;
1377	}
1378	}
1379
1380	.addresses .wc-block-components-additional-fields-list {
1381	margin: 0;
1382	padding: 0;
1383
1384	dt {
1385	margin: 0;
1386	padding: 0;
1387	font-style: normal;
1388	font-weight: bold;
1389	display: inline;
1390
1391	&::after {
1392	content: ": ";
1393	}
1394
1395	&::before {
1396	content: "";
1397	display: block;
1398	}
1399	}
1400
1401	dd {
1402	margin: 0;
1403	padding: 0;
1404	font-style: normal;
1405	display: inline;
1406	}
1407	}
1408
1409	.wc-block-order-confirmation-additional-fields-wrapper
1410	.wc-block-components-additional-fields-list {
1411	border: 1px solid rgba(0, 0, 0, 0.1);
1412	padding: 0;
1413	display: grid;
1414	grid-template-columns: 1fr max-content;
1415
1416	dt {
1417	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1418	font-style: normal;
1419	font-weight: bold;
1420	padding: 1rem;
1421	box-sizing: border-box;
1422	margin: 0 !important;
1423
1424	&::after {
1425	display: none;
1426	}
1427
1428	&:last-of-type {
1429	border-bottom: 0;
1430	}
1431	}
1432
1433	dd {
1434	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1435	padding: 1rem;
1436	box-sizing: border-box;
1437	text-align: right;
1438	margin: 0 !important;
1439
1440	&:last-of-type {
1441	border-bottom: 0;
1442	}
1443	}
1444	}
1445
1446	.woocommerce-customer-details {
1447	.woocommerce-column__title {
1448	margin-top: 0;
1449	}
1450
1451	address {
1452	font-style: normal;
1453	margin-bottom: 0;
1454	border: 1px solid rgba(0, 0, 0, 0.1);
1455	border-bottom-width: 2px;
1456	border-right-width: 2px;
1457	text-align: left;
1458	width: 100%;
1459	border-radius: 5px;
1460	padding: 6px 12px;
1461	box-sizing: border-box;
1462	}
1463
1464	.woocommerce-customer-details--phone,
1465	.woocommerce-customer-details--email {
1466	padding-left: 1.5em;
1467
1468	&:last-child {
1469	margin-bottom: 0;
1470	}
1471	}
1472
1473	.woocommerce-customer-details--phone::before {
1474	@include iconbefore("\e037");
1475	margin-left: -1.5em;
1476	line-height: 1.75;
1477	position: absolute;
1478	}
1479
1480	.woocommerce-customer-details--email::before {
1481	@include iconbefore("\e02d");
1482	margin-left: -1.5em;
1483	line-height: 1.75;
1484	position: absolute;
1485	}
1486	}
1487
1488	/**
1489	* Layered nav widget
1490	*/
1491	.woocommerce-widget-layered-nav-list {
1492	margin: 0;
1493	padding: 0;
1494	border: 0;
1495	list-style: none outside;
1496
1497	.woocommerce-widget-layered-nav-list__item {
1498	@include clearfix();
1499	padding: 0 0 1px;
1500	list-style: none;
1501
1502	a,
1503	span {
1504	padding: 1px 0;
1505	}
1506	}
1507
1508	.woocommerce-widget-layered-nav-list__item--chosen a::before {
1509	@include iconbefore("\e013");
1510	color: var(--wc-red);
1511	}
1512	}
1513
1514	.woocommerce-widget-layered-nav-dropdown__submit {
1515	margin-top: 1em;
1516	}
1517
1518	.widget_layered_nav_filters ul {
1519	margin: 0;
1520	padding: 0;
1521	border: 0;
1522	list-style: none outside;
1523	overflow: hidden;
1524	zoom: 1;
1525
1526	li {
1527	float: left;
1528	padding: 0 1em 1px 1px;
1529	list-style: none;
1530
1531	a {
1532	text-decoration: none;
1533
1534	&::before {
1535	@include iconbefore("\e013");
1536	color: var(--wc-red);
1537	vertical-align: inherit;
1538	margin-right: 0.5em;
1539	}
1540	}
1541	}
1542	}
1543
1544	/**
1545	* Price filter widget
1546	*/
1547	.widget_price_filter {
1548	.price_slider {
1549	margin-bottom: 1em;
1550	}
1551
1552	.price_slider_amount {
1553	text-align: right;
1554	line-height: 2.4;
1555	font-size: 0.8751em;
1556
1557	.button {
1558	font-size: 1.15em;
1559	float: left;
1560	}
1561	}
1562
1563	.ui-slider {
1564	position: relative;
1565	text-align: left;
1566	margin-left: 0.5em;
1567	margin-right: 0.5em;
1568	}
1569
1570	.ui-slider .ui-slider-handle {
1571	position: absolute;
1572	z-index: 2;
1573	width: 1em;
1574	height: 1em;
1575	// We use the old WooCommerce color on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1576	background-color: #7f54b3;
1577	border-radius: 1em;
1578	cursor: ew-resize;
1579	outline: none;
1580	top: -0.3em;
1581
1582	/* rtl:ignore */
1583	margin-left: -0.5em;
1584	}
1585
1586	.ui-slider .ui-slider-range {
1587	position: absolute;
1588	z-index: 1;
1589	font-size: 0.7em;
1590	display: block;
1591	border: 0;
1592	border-radius: 1em;
1593	// We use the old WooCommerce color on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1594	background-color: #7f54b3;
1595	}
1596
1597	.price_slider_wrapper .ui-widget-content {
1598	border-radius: 1em;
1599	// We use the old WooCommerce color as the base on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1600	background-color: darken(#7f54b3, 30%);
1601	border: 0;
1602	}
1603
1604	.ui-slider-horizontal {
1605	height: 0.5em;
1606	}
1607
1608	.ui-slider-horizontal .ui-slider-range {
1609	top: 0;
1610	height: 100%;
1611	}
1612
1613	.ui-slider-horizontal .ui-slider-range-min {
1614	left: -1px;
1615	}
1616
1617	.ui-slider-horizontal .ui-slider-range-max {
1618	right: -1px;
1619	}
1620	}
1621
1622	/**
1623	* Rating Filter Widget
1624	*/
1625	.widget_rating_filter ul {
1626	margin: 0;
1627	padding: 0;
1628	border: 0;
1629	list-style: none outside;
1630
1631	li {
1632	@include clearfix();
1633	padding: 0 0 1px;
1634	list-style: none;
1635
1636	a {
1637	padding: 1px 0;
1638	text-decoration: none;
1639	}
1640
1641	.star-rating {
1642	float: none;
1643	display: inline-block;
1644	}
1645	}
1646
1647	li.chosen a::before {
1648	@include iconbefore("\e013");
1649	color: var(--wc-red);
1650	}
1651	}
1652
1653	.woocommerce-form-login {
1654	.woocommerce-form-login__submit {
1655	float: left;
1656	margin-right: 1em;
1657	}
1658
1659	.woocommerce-form-login__rememberme {
1660	display: inline-block;
1661	}
1662	}
1663	}
1664
1665	/**
1666	* Buttons
1667	*/
1668	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)),
1669	:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
1670	:not(.edit-post-visual-editor)
1671	)
1672	.woocommerce {
1673	a.button,
1674	button.button,
1675	input.button,
1676	#respond input#submit {
1677	font-size: 100%;
1678	margin: 0;
1679	line-height: 1;
1680	cursor: pointer;
1681	position: relative;
1682	text-decoration: none;
1683	overflow: visible;
1684	padding: 0.618em 1em;
1685	font-weight: 700;
1686	border-radius: 3px;
1687	left: auto;
1688	color: $secondarytext;
1689	background-color: $secondary;
1690	border: 0;
1691	display: inline-block;
1692	background-image: none;
1693	box-shadow: none;
1694	text-shadow: none;
1695
1696	&.loading {
1697	opacity: 0.25;
1698	padding-right: 2.618em;
1699
1700	&::after {
1701	font-family: "WooCommerce";
1702	content: "\e01c";
1703	vertical-align: top;
1704	font-weight: 400;
1705	position: absolute;
1706	top: 0.618em;
1707	right: 1em;
1708	animation: spin 2s linear infinite;
1709	}
1710	}
1711
1712	&.added::after {
1713	font-family: "WooCommerce";
1714	content: "\e017";
1715	margin-left: 0.53em;
1716	vertical-align: bottom;
1717	}
1718
1719	&:hover {
1720	background-color: darken($secondary, 5%);
1721	text-decoration: none;
1722	background-image: none;
1723	color: $secondarytext;
1724	}
1725
1726	&.alt {
1727	// We use the old WooCommerce colors on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1728	background-color: #7f54b3;
1729	color: desaturate(lighten(#7f54b3, 50%), 18%);
1730	-webkit-font-smoothing: antialiased;
1731
1732	&:hover {
1733	// We use the old WooCommerce colors on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1734	background-color: darken(#7f54b3, 5%);
1735	color: desaturate(lighten(#7f54b3, 50%), 18%);
1736	}
1737
1738	&.disabled,
1739	&:disabled,
1740	&:disabled[disabled]],
1741	&.disabled:hover,
1742	&:disabled:hover,
1743	&:disabled[disabled]]:hover {
1744	// We use the old WooCommerce colors on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
1745	background-color: #7f54b3;
1746	color: desaturate(lighten(#7f54b3, 50%), 18%);
1747	}
1748	}
1749
1750	&:disabled,
1751	&.disabled,
1752	&:disabled[disabled]] {
1753	color: inherit;
1754	cursor: not-allowed;
1755	opacity: 0.5;
1756	padding: 0.618em 1em;
1757
1758	&:hover {
1759	color: inherit;
1760	background-color: $secondary;
1761	}
1762	}
1763	}
1764	}
1765
1766	/**
1767	* WooCommerce specific styles for legacy themes.
1768	*/
1769	.woocommerce:where(body:not(.woocommerce-uses-block-theme)) {
1770	.woocommerce-breadcrumb {
1771	font-size: 0.92em;
1772	color: $subtext;
1773
1774	a {
1775	color: $subtext;
1776	}
1777	}
1778
1779	div.product {
1780	span.price,
1781	p.price {
1782	color: $highlight;
1783	font-size: 1.25em;
1784	}
1785
1786	.stock {
1787	color: $highlight;
1788	}
1789
1790	.out-of-stock {
1791	color: var(--wc-red);
1792	}
1793	}
1794
1795	ul.products li.product .price {
1796	color: $highlight;
1797	}
1798
1799	#reviews #comments ol.commentlist li .meta {
1800	color: $subtext;
1801	font-size: 0.75em;
1802	}
1803	}
1804
1805	.woocommerce-no-js {
1806	form.woocommerce-form-login,
1807	form.woocommerce-form-coupon {
1808	display: block !important;
1809	}
1810
1811	.woocommerce-form-login-toggle,
1812	.woocommerce-form-coupon-toggle,
1813	.showcoupon {
1814	display: none !important;
1815	}
1816	}
1817
1818	.woocommerce-message,
1819	.woocommerce-error,
1820	.woocommerce-info {
1821	padding: 1em 2em 1em 3.5em;
1822	margin: 0 0 2em;
1823	position: relative;
1824	background-color: lighten($secondary, 5%);
1825	color: $secondarytext;
1826	border-top: 3px solid $primary;
1827	list-style: none outside;
1828
1829	@include clearfix();
1830	width: auto;
1831	word-wrap: break-word;
1832
1833	&::before {
1834	font-family: "WooCommerce";
1835	content: "\e028";
1836	content: "\e028"/ ""; // Add an empty alternative text so screen readers ignore it
1837	display: inline-block;
1838	position: absolute;
1839	top: 1em;
1840	left: 1.5em;
1841	}
1842
1843	.button {
1844	float: right;
1845	}
1846
1847	li {
1848	list-style: none outside !important; // Required for default theme compatibility
1849	padding-left: 0 !important; // Required for default theme compatibility
1850	margin-left: 0 !important; // Required for default theme compatibility
1851	}
1852	}
1853
1854	/**
1855	* Right to left styles
1856	*/
1857	.rtl.woocommerce .price_label,
1858	.rtl.woocommerce .price_label span {
1859	/* rtl:ignore */
1860	direction: ltr;
1861	unicode-bidi: embed;
1862	}
1863
1864	.woocommerce-message {
1865	border-top-color: #8fae1b;
1866
1867	&::before {
1868	content: "\e015";
1869	color: #8fae1b;
1870	}
1871	}
1872
1873	.woocommerce-info {
1874	border-top-color: #1e85be;
1875
1876	&::before {
1877	color: #1e85be;
1878	}
1879	}
1880
1881	.woocommerce-error {
1882	border-top-color: #b81c23;
1883
1884	&::before {
1885	content: "\e016";
1886	color: #b81c23;
1887	}
1888	}
1889
1890	/**
1891	* Account page
1892	*/
1893	.woocommerce-account {
1894	.woocommerce {
1895	@include clearfix();
1896	}
1897
1898	.addresses .title {
1899	@include clearfix();
1900
1901	h3 {
1902	float: left;
1903	}
1904
1905	.edit {
1906	float: right;
1907	}
1908	}
1909
1910	ol.commentlist.notes li.note {
1911	p.meta {
1912	font-weight: 700;
1913	margin-bottom: 0;
1914	}
1915
1916	.description p:last-child {
1917	margin-bottom: 0;
1918	}
1919	}
1920
1921	ul.digital-downloads {
1922	margin-left: 0;
1923	padding-left: 0;
1924
1925	li {
1926	list-style: none;
1927	margin-left: 0;
1928	padding-left: 0;
1929
1930	&::before {
1931	@include iconbefore("\e00a");
1932	}
1933
1934	.count {
1935	float: right;
1936	}
1937	}
1938	}
1939	}
1940
1941	/**
1942	* Cart/checkout page
1943	*/
1944	.woocommerce-cart,
1945	.woocommerce-checkout,
1946	#add_payment_method {
1947	table.cart {
1948	.product-thumbnail {
1949	min-width: 32px;
1950	}
1951
1952	img {
1953	width: 32px;
1954	box-shadow: none;
1955	}
1956
1957	th,
1958	td {
1959	vertical-align: middle;
1960	}
1961
1962	td.actions .coupon .input-text {
1963	float: left;
1964	box-sizing: border-box;
1965	border: 1px solid darken($secondary, 10%);
1966	padding: 6px 6px 5px;
1967	margin: 0 4px 0 0;
1968	outline: 0;
1969
1970	&.has-error:focus {
1971	border-color: var(--wc-red);
1972	}
1973	}
1974
1975	td.actions .coupon .coupon-error-notice {
1976	@include coupon-error-notice-cart();
1977	}
1978
1979	input {
1980	margin: 0;
1981	vertical-align: middle;
1982	}
1983	}
1984
1985	.wc-proceed-to-checkout {
1986	@include clearfix;
1987	padding: 1em 0;
1988
1989	a.checkout-button {
1990	display: block;
1991	text-align: center;
1992	margin-bottom: 1em;
1993	font-size: 1.25em;
1994	padding: 1em;
1995	}
1996	}
1997
1998	.cart-collaterals {
1999	.shipping-calculator-button {
2000	float: none;
2001	margin-top: 0.5em;
2002	display: inline-block;
2003	}
2004
2005	.shipping-calculator-button::after {
2006	@include iconafter("\e019");
2007	content: "\e019" / "";
2008	}
2009
2010	.shipping-calculator-form {
2011	margin: 1em 0 0 0;
2012	}
2013
2014	.cart_totals {
2015	p small {
2016	color: $subtext;
2017	font-size: 0.83em;
2018	}
2019
2020	table {
2021	border-collapse: separate;
2022	margin: 0 0 6px;
2023	padding: 0;
2024
2025	tr:first-child {
2026	th,
2027	td {
2028	border-top: 0;
2029	}
2030	}
2031
2032	th {
2033	width: 35%;
2034	}
2035
2036	td,
2037	th {
2038	vertical-align: top;
2039	border-left: 0;
2040	border-right: 0;
2041	line-height: 1.5em;
2042	}
2043
2044	small {
2045	color: $subtext;
2046	}
2047
2048	select {
2049	width: 100%;
2050	}
2051	}
2052
2053	.discount td {
2054	color: $highlight;
2055	}
2056
2057	tr td,
2058	tr th {
2059	border-top: 1px solid $secondary;
2060	}
2061
2062	.woocommerce-shipping-destination {
2063	margin-bottom: 0;
2064	}
2065	}
2066
2067	.cross-sells ul.products li.product {
2068	margin-top: 0;
2069	}
2070	}
2071
2072	.checkout {
2073	.col-2 {
2074	h3#ship-to-different-address {
2075	float: left;
2076	clear: none;
2077	}
2078
2079	.notes {
2080	clear: left;
2081	}
2082
2083	.form-row-first {
2084	clear: left;
2085	}
2086	}
2087
2088	.create-account small {
2089	font-size: 11px;
2090	color: $subtext;
2091	font-weight: normal;
2092	}
2093
2094	div.shipping-address {
2095	padding: 0;
2096	clear: left;
2097	width: 100%;
2098	}
2099
2100	.shipping_address {
2101	clear: both;
2102	}
2103
2104	.checkout-inline-error-message {
2105	color: var(--wc-red);
2106	font-size: 0.75em;
2107	margin-bottom: 0;
2108	}
2109	}
2110
2111	#payment {
2112	// We use the old WooCommerce color as the base on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
2113	background: desaturate(rgba(#7f54b3, 0.14), 21%);
2114	border-radius: 5px;
2115
2116	ul.payment_methods {
2117	@include clearfix();
2118	text-align: left;
2119	padding: 1em;
2120	// We use the old WooCommerce color as the base on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
2121	border-bottom: 1px solid
2122	darken(desaturate(rgba(#7f54b3, 0.14), 21%), 10%);
2123	margin: 0;
2124	list-style: none outside;
2125
2126	li {
2127	line-height: 2;
2128	text-align: left;
2129	margin: 0;
2130	font-weight: normal;
2131
2132	input {
2133	margin: 0 1em 0 0;
2134	}
2135
2136	img {
2137	vertical-align: middle;
2138	margin: -2px 0 0 0.5em;
2139	padding: 0;
2140	position: relative;
2141	box-shadow: none;
2142	}
2143
2144	img + img {
2145	margin-left: 2px;
2146	}
2147	}
2148
2149	// PayPal logo in payment methods list on classic checkout page, more specific selector for precedence over general theme styles.
2150	li.payment_method_paypal {
2151	img {
2152	max-height: 24px;
2153	vertical-align: middle;
2154	float: right;
2155	margin: 0;
2156	}
2157	}
2158
2159	li:not(.woocommerce-notice) {
2160	@include clearfix;
2161	}
2162	}
2163
2164	div.form-row {
2165	padding: 1em;
2166	}
2167
2168	div.payment_box {
2169	position: relative;
2170	box-sizing: border-box;
2171	width: 100%;
2172	padding: 1em;
2173	margin: 1em 0;
2174	font-size: 0.92em;
2175	border-radius: 2px;
2176	line-height: 1.5;
2177	background-color: darken($secondary, 5%);
2178	color: $secondarytext;
2179
2180	input.input-text,
2181	textarea {
2182	border-color: darken($secondary, 15%);
2183	border-top-color: darken($secondary, 20%);
2184	}
2185
2186	::-webkit-input-placeholder {
2187	color: darken($secondary, 20%);
2188	}
2189
2190	:-moz-placeholder {
2191	color: darken($secondary, 20%);
2192	}
2193
2194	:-ms-input-placeholder {
2195	color: darken($secondary, 20%);
2196	}
2197
2198	.woocommerce-SavedPaymentMethods {
2199	list-style: none outside;
2200	margin: 0;
2201
2202	.woocommerce-SavedPaymentMethods-token,
2203	.woocommerce-SavedPaymentMethods-new {
2204	margin: 0 0 0.5em;
2205
2206	label {
2207	cursor: pointer;
2208	}
2209	}
2210
2211	.woocommerce-SavedPaymentMethods-tokenInput {
2212	vertical-align: middle;
2213	margin: -3px 1em 0 0;
2214	position: relative;
2215	}
2216	}
2217
2218	.wc-credit-card-form {
2219	border: 0;
2220	padding: 0;
2221	margin: 1em 0 0;
2222	}
2223
2224	.wc-credit-card-form-card-number,
2225	.wc-credit-card-form-card-expiry,
2226	.wc-credit-card-form-card-cvc {
2227	font-size: 1.5em;
2228	padding: 8px;
2229	background-repeat: no-repeat;
2230	background-position: right 0.618em center;
2231	background-size: 32px 20px;
2232
2233	&.visa {
2234	background-image: url("../images/icons/credit-cards/visa.svg");
2235	}
2236
2237	&.mastercard {
2238	background-image: url("../images/icons/credit-cards/mastercard.svg");
2239	}
2240
2241	&.laser {
2242	background-image: url("../images/icons/credit-cards/laser.svg");
2243	}
2244
2245	&.dinersclub {
2246	background-image: url("../images/icons/credit-cards/diners.svg");
2247	}
2248
2249	&.maestro {
2250	background-image: url("../images/icons/credit-cards/maestro.svg");
2251	}
2252
2253	&.jcb {
2254	background-image: url("../images/icons/credit-cards/jcb.svg");
2255	}
2256
2257	&.amex {
2258	background-image: url("../images/icons/credit-cards/amex.svg");
2259	}
2260
2261	&.discover {
2262	background-image: url("../images/icons/credit-cards/discover.svg");
2263	}
2264	}
2265
2266	span.help {
2267	font-size: 0.857em;
2268	color: $subtext;
2269	font-weight: normal;
2270	}
2271
2272	.form-row {
2273	margin: 0 0 1em;
2274	}
2275
2276	p:last-child {
2277	margin-bottom: 0;
2278	}
2279
2280	&::before {
2281	content: "";
2282	display: block;
2283	border: 1em solid darken($secondary, 5%); /* arrow size / color */
2284	border-right-color: transparent;
2285	border-left-color: transparent;
2286	border-top-color: transparent;
2287	position: absolute;
2288	top: -0.75em;
2289	left: 0;
2290	margin: -1em 0 0 2em;
2291	}
2292	}
2293
2294	.payment_method_paypal {
2295	.about_paypal {
2296	float: right;
2297	line-height: 52px;
2298	font-size: 0.83em;
2299	}
2300
2301	img {
2302	max-height: 24px;
2303	vertical-align: middle;
2304	float: right;
2305	}
2306	}
2307	}
2308	}
2309
2310	.woocommerce-terms-and-conditions {
2311	border: 1px solid rgba(0, 0, 0, 0.2);
2312	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
2313	background: rgba(0, 0, 0, 0.05);
2314	}
2315
2316	.woocommerce-invalid {
2317	#terms {
2318	outline: 2px solid var(--wc-red);
2319	outline-offset: 2px;
2320	}
2321	}
2322
2323	/**
2324	* Order withdrawal form
2325	*/
2326	.woocommerce-order-withdrawal-content {
2327	max-width: 680px;
2328
2329	&__intro {
2330	margin-bottom: 0.5em;
2331	}
2332
2333	&__note,
2334	&__field-description,
2335	.description {
2336	color: $subtext;
2337	font-size: 0.875em;
2338	line-height: 1.4;
2339	}
2340
2341	&__field-description,
2342	.description {
2343	display: block;
2344	margin-top: 0.25em;
2345	}
2346
2347	&__field-error {
2348	color: var(--wc-red);
2349	display: block;
2350	font-size: 0.875em;
2351	margin: -0.25em 0 0.75em;
2352	}
2353
2354	&__steps {
2355	display: flex;
2356	gap: 1em;
2357	list-style: none;
2358	margin: 2em 0;
2359	padding: 0;
2360	color: $subtext;
2361	font-size: 0.875em;
2362	}
2363
2364	&__step {
2365	&:not(:last-child)::after {
2366	content: "";
2367	display: inline-block;
2368	width: 0.25em;
2369	height: 0.25em;
2370	margin-left: 1em;
2371	border-radius: 50%;
2372	background: currentColor;
2373	vertical-align: middle;
2374	}
2375
2376	&--current {
2377	color: inherit;
2378	font-weight: 700;
2379	}
2380	}
2381
2382	&__radio-field {
2383	clear: both;
2384	border: 0;
2385	margin: 0 0 6px;
2386	padding: 3px;
2387
2388	legend {
2389	line-height: 2;
2390	padding: 0;
2391	}
2392
2393	&.woocommerce-invalid legend {
2394	color: var(--wc-red);
2395	}
2396	}
2397
2398	&__radio-label {
2399	display: block;
2400	line-height: 1.7;
2401	margin: 0;
2402	}
2403
2404	&__review {
2405	margin: 2em 0;
2406	}
2407
2408	&__review-row {
2409	padding: 0.75em 0 0.8em;
2410
2411	&:not(:last-child) {
2412	border-bottom: 1px solid $secondary;
2413	}
2414
2415	dt,
2416	dd {
2417	margin: 0;
2418	line-height: 1.4;
2419	}
2420
2421	dt {
2422	color: $subtext;
2423	font-size: 0.875em;
2424	margin-bottom: 0.25em;
2425	}
2426
2427	dd {
2428	font-size: 1em;
2429	}
2430	}
2431
2432	&__actions {
2433	display: flex;
2434	gap: 1em;
2435	align-items: center;
2436	flex-wrap: wrap;
2437	margin-top: 2em;
2438	}
2439
2440	&__button--secondary.button {
2441	background: transparent;
2442	border: 1px solid currentColor;
2443	color: inherit;
2444
2445	&:hover,
2446	&:focus {
2447	background: transparent;
2448	color: inherit;
2449	}
2450	}
2451
2452	.required {
2453	visibility: visible;
2454	}
2455	}
2456
2457	/**
2458	* Password strength meter
2459	*/
2460	.woocommerce-password-strength {
2461	text-align: center;
2462	font-weight: 600;
2463	padding: 3px 0.5em;
2464	font-size: 1em;
2465
2466	&.strong {
2467	background-color: #c1e1b9;
2468	border-color: #83c373;
2469	}
2470
2471	&.short {
2472	background-color: #f1adad;
2473	border-color: #e35b5b;
2474	}
2475
2476	&.bad {
2477	background-color: #fbc5a9;
2478	border-color: #f78b53;
2479	}
2480
2481	&.good {
2482	background-color: #ffe399;
2483	border-color: #ffc733;
2484	}
2485	}
2486
2487	.woocommerce-password-hint {
2488	margin: 0.5em 0 0;
2489	display: block;
2490	}
2491
2492	/**
2493	* Twenty Eleven specific styles
2494	*/
2495	#content.twentyeleven .woocommerce-pagination a {
2496	font-size: 1em;
2497	line-height: 1;
2498	}
2499
2500	/**
2501	* Twenty Thirteen specific styles
2502	*/
2503	.single-product .twentythirteen {
2504	.entry-summary,
2505	#reply-title,
2506	#respond #commentform {
2507	padding: 0;
2508	}
2509
2510	p.stars {
2511	clear: both;
2512	}
2513	}
2514
2515	.twentythirteen .woocommerce-breadcrumb {
2516	padding-top: 40px;
2517	}
2518
2519	/**
2520	* Twenty Fourteen specific styles
2521	*/
2522	.twentyfourteen ul.products li.product {
2523	margin-top: 0 !important;
2524	}
2525
2526	/**
2527	* Twenty Sixteen specific styles
2528	*/
2529	body:not(.search-results) .twentysixteen .entry-summary {
2530	color: inherit;
2531	font-size: inherit;
2532	line-height: inherit;
2533	}
2534
2535	.twentysixteen .price ins {
2536	background: inherit;
2537	color: inherit;
2538	}
2539
2540	/**
2541	* Hides default button when a gateway with custom "place order" button is selected.
2542	* This applies to checkout, order-pay, and add-payment-method pages.
2543	*
2544	* @since 10.6.0
2545	*/
2546	form.has-custom-place-order-button #place_order {
2547	display: none !important;
2548	}
2549