woocommerce.scss — WooCommerce 10.9.4

woocommerce / assets / css / woocommerce.scss

woocommerce / assets / css Last commit date

woocommerce.scss

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