twenty-twenty-one.scss — WooCommerce 10.8.0-beta.1

woocommerce / assets / css / twenty-twenty-one.scss

woocommerce / assets / css Last commit date

twenty-twenty-one.scss

2838 lines

1	@import "mixins";
2
3	/**
4	* Sass variables
5	*/
6
7	$headings: var(--heading--font-family);
8	$body: var(--global--font-secondary);
9
10	$body-color: currentcolor;
11	$highlights-color: var(--wc-highlight, #777335);
12
13	/**
14	* Fonts
15	*/
16	@import "fonts";
17
18	/**
19	* Forms
20	*/
21	@import "forms";
22
23	/**
24	* Global elements
25	*/
26	a.button {
27	display: inline-block;
28	text-align: center;
29	box-sizing: border-box;
30	word-break: break-word;
31	text-decoration: none !important;
32
33	&:hover,
34	&:visited {
35	text-decoration: underline !important;
36	}
37	}
38
39	body {
40	--wc-input-border-color: var(--form--border-color);
41	--wc-input-border-radius: var(--form--border-radius);
42	--wc-form-border-width: var(--form--border-width);
43	--wc-form-color-text: var(--form--color-text);
44	}
45
46	.woocommerce {
47	form.woocommerce-form-login,
48	form.woocommerce-form-register {
49	p,
50	label {
51	font-family: $headings;
52	}
53
54	input {
55	border: 1px solid #ddd;
56	}
57	}
58
59	.woocommerce-form-login__rememberme {
60	margin: 1rem 0 3rem 0;
61	}
62
63	.show-password-input {
64	background-color: transparent !important;
65	color: var(--form--color-text) !important;
66	display: inherit;
67	outline-offset: 0;
68	}
69	}
70
71	.woocommerce-notices-wrapper:empty {
72	margin: 0 auto;
73	}
74
75	.woocommerce-view-order {
76	.woocommerce-MyAccount-content {
77	table {
78	border: 0;
79
80	tbody {
81	border-bottom: 1px solid $body-color;
82	}
83
84	tfoot {
85	tr:last-of-type {
86	border-top: 1px solid $body-color;
87
88	.woocommerce-Price-amount {
89	font-weight: 700;
90	}
91	}
92	}
93
94	td,
95	tr,
96	th {
97	border: 0;
98	}
99	}
100	}
101	}
102
103	.site-main {
104	.woocommerce-breadcrumb {
105	margin-bottom: var(--global--spacing-vertical);
106	font-size: 0.88889em;
107	font-family: $headings;
108	}
109
110	.woocommerce-products-header {
111	margin-top: var(--global--spacing-vertical);
112	}
113	}
114
115	.woocommerce-pagination {
116	font-family: $headings;
117	font-size: 0.88889em;
118
119	ul.page-numbers {
120	margin: 0;
121	padding: 0;
122	display: block;
123	font-weight: 700;
124	letter-spacing: -0.02em;
125	line-height: 1.2;
126	}
127
128	span.page-numbers,
129	a.page-numbers,
130	.next.page-numbers,
131	.prev.page-numbers {
132	padding: 0 calc(0.5 * 1rem);
133	display: inline-block;
134	}
135	}
136
137	.onsale {
138	position: absolute;
139	top: -0.7rem;
140	right: -0.7rem;
141	background: $highlights-color;
142	color: #fff;
143	font-family: $headings;
144	font-size: 1.2rem;
145	font-weight: 700;
146	letter-spacing: -0.02em;
147	z-index: 1;
148	border-radius: 50%;
149	text-align: center;
150	padding: 0.8rem;
151	margin: 0;
152	display: inline-flex;
153	align-items: center;
154	justify-content: center;
155
156	&::before {
157	content: "";
158	float: left;
159	padding-top: 100%;
160	}
161	}
162
163	.onsale + .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
164	top: 1em;
165	right: 1em;
166	}
167
168	.single-product .type-product.sale > .onsale {
169	right: calc(52% - 0.7rem);
170	}
171
172	.price {
173	font-family: $headings;
174	font-size: 1rem;
175
176	del {
177	opacity: 0.9;
178	display: inline-block;
179	}
180
181	ins {
182	display: inline-block;
183	text-decoration: none;
184	}
185	}
186
187	.woocommerce-message,
188	.woocommerce-error,
189	.woocommerce-info {
190	color: #000;
191	border-top: 3px solid $highlights-color;
192	margin-bottom: 2rem;
193	padding: 0;
194	margin-left: 0;
195	background: #eee;
196	font-size: 0.88889em;
197	font-family: $headings;
198	list-style: none;
199	overflow: hidden;
200
201	a.button {
202	background: #111;
203	color: #fff;
204	}
205	}
206
207	.woocommerce-store-notice__dismiss-link {
208	float: right;
209	color: #000;
210
211	&:hover {
212	text-decoration: none;
213	color: #000;
214	}
215	}
216
217	.flex-viewport {
218	margin-bottom: 1.5em;
219	}
220
221	#main {
222	.post-inner {
223	padding-top: 0;
224	}
225
226	.wp-block-cover {
227	margin-top: 0;
228	}
229	}
230
231	.cross-sells {
232	.woocommerce-loop-product__title {
233	font-family: $headings;
234	}
235
236	.star-rating {
237	font-size: 1.4rem;
238	}
239	}
240
241	/* Make thumbnails in the gallery affect parent's height and wrapping */
242	.flex-control-nav::after {
243	clear: both;
244	content: "";
245	display: table;
246	}
247
248	/**
249	* Tables
250	*/
251	.woocommerce,
252	.woocommerce-page {
253	&.is-dark-theme {
254	--wc-form-color-background: var(--global--color-white-90);
255
256	.select2-dropdown {
257	color: var(--global--color-dark-gray);
258	}
259	}
260
261	table.shop_table {
262	td,
263	th {
264	word-break: normal;
265	border-left: none;
266	border-right: none;
267	}
268
269	.product-thumbnail {
270	max-width: 120px;
271	}
272	}
273	}
274
275	/**
276	* Shop page
277	*/
278	.woocommerce-result-count,
279	.woocommerce-ordering {
280	margin: 0 0 1rem;
281	padding: 0.75rem 0;
282	}
283
284	.woocommerce-ordering > label {
285	margin-right: 0.25rem;
286	}
287
288	/**
289	* Products
290	*/
291	ul.products {
292	margin: 0;
293	padding: 0;
294
295	li.product {
296	list-style: none;
297
298	.woocommerce-loop-product__link {
299	display: block;
300	text-decoration: none;
301	position: relative;
302	}
303
304	.woocommerce-loop-product__title {
305	margin: 0.5rem 0 0.5rem;
306	font-size: 1.5rem;
307	font-weight: 400;
308
309	&::before {
310	content: none;
311	}
312	}
313
314	.woocommerce-loop-product__title,
315	.price,
316	.star-rating {
317	color: $body-color;
318	}
319
320	.star-rating {
321	margin-bottom: 0.8rem;
322	}
323
324	.price {
325	margin-bottom: 1rem;
326	}
327
328	.price,
329	.star-rating {
330	display: block;
331	}
332
333	.woocommerce-placeholder {
334	border: 1px solid #f2f2f2;
335	}
336
337	.button {
338	vertical-align: middle;
339	background-color: transparent;
340	color: var(--button--color-text-hover);
341	text-decoration: none !important;
342
343	&.loading {
344	opacity: 0.5;
345	}
346
347	&:hover {
348	background-color: var(--button--color-background);
349	color: var(--button--color-text);
350	}
351	}
352
353	.added_to_cart {
354	margin: 0.5rem;
355	}
356	}
357	}
358
359	.star-rating {
360	overflow: hidden;
361	position: relative;
362	height: 1em;
363	line-height: 1;
364	font-size: 1em;
365	width: 5.4em;
366	font-family: WooCommerce;
367	margin-bottom: 0.7rem;
368
369	&::before {
370	content: "\73\73\73\73\73";
371	float: left;
372	top: 0;
373	left: 0;
374	position: absolute;
375	}
376
377	span {
378	overflow: hidden;
379	float: left;
380	top: 0;
381	left: 0;
382	position: absolute;
383	padding-top: 1.5em;
384	}
385
386	span::before {
387	content: "\53\53\53\53\53";
388	top: 0;
389	position: absolute;
390	left: 0;
391	}
392	}
393
394	a.remove {
395	display: inline-block;
396	width: 20px;
397	height: 20px;
398	line-height: 18px;
399	font-size: 20px;
400	font-weight: 700;
401	text-align: center;
402	border-radius: 100%;
403	text-decoration: none !important;
404	background: #fff;
405	color: #000;
406
407	&:hover {
408	background: $highlights-color;
409	color: #fff !important;
410	}
411	}
412
413	dl.variation,
414	.wc-item-meta {
415	list-style: none outside;
416
417	dt,
418	.wc-item-meta-label {
419	float: left;
420	clear: both;
421	margin-right: 0.25rem;
422	margin-top: 0;
423	list-style: none outside;
424	font-weight: 400;
425	}
426
427	dd {
428	margin: 0;
429	}
430
431	p,
432	&:last-child {
433	margin-bottom: 0;
434	}
435	}
436
437	/**
438	* Single product
439	*/
440	.single-product {
441	div.product {
442	position: relative;
443
444	.product_meta {
445	clear: both;
446	font-size: 0.7em;
447	padding-top: 0.5em;
448	margin-top: 3rem;
449	}
450	}
451
452	.single_add_to_cart_button {
453	line-height: var(--global--line-height-body) !important;
454	padding-top: var(--form--spacing-unit) !important;
455	padding-bottom: var(--form--spacing-unit) !important;
456	font-size: 1.6rem;
457	}
458
459	.single-featured-image-header {
460	display: none;
461	}
462
463	&.singular {
464	// Needed for higher specificity to target the entry title font size
465	.entry-title {
466	font-size: var(--global--font-size-xl);
467	font-weight: 400;
468	margin: 0 0 2.5rem;
469
470	&::before {
471	margin-top: 0;
472	}
473	}
474	}
475
476	.summary {
477	margin-bottom: 8rem;
478
479	p.price {
480	margin-bottom: 2rem;
481	}
482
483	.woocommerce-product-details__short-description {
484	margin-bottom: 1rem;
485	}
486	}
487
488	.woocommerce-variation-price {
489	margin: 2rem 0;
490	}
491
492	.woocommerce-product-rating {
493	margin: -1rem 0 4rem;
494	line-height: 1;
495	font-size: 1.4rem;
496
497	.star-rating {
498	float: left;
499	margin-right: 0.25rem;
500	}
501	}
502
503	form.cart {
504	.quantity {
505	float: left;
506	margin-right: 0.5rem;
507	}
508
509	input[type="number"]="number""] {
510	width: 5em;
511	}
512	}
513
514	.woocommerce-variation-add-to-cart {
515	.button {
516	padding-top: 1.55rem;
517	padding-bottom: 1.59rem;
518	font-size: 1.6rem;
519	}
520
521	.button.disabled {
522	opacity: 0.2;
523	}
524	}
525
526	.woocommerce-Tabs-panel--additional_information,
527	.woocommerce-Tabs-panel--reviews {
528	table {
529	border: 1px solid #ddd;
530
531	tr,
532	td,
533	th {
534	border: 1px solid #ddd;
535	}
536	}
537
538	p {
539	font-family: $headings;
540	}
541
542	input {
543	border: 1px solid #ddd;
544	}
545	}
546
547	.woocommerce-product-attributes-item__value {
548	p {
549	margin-bottom: 0;
550	}
551	}
552	}
553
554	table.variations {
555	margin: 1rem 0;
556
557	label {
558	margin: 0;
559	padding: 6px 0;
560	}
561
562	select {
563	margin-right: 0.5rem;
564	}
565	}
566
567	a.reset_variations {
568	margin-left: 0.5em;
569	}
570
571	.woocommerce-product-gallery {
572	max-width: 600px;
573	position: relative;
574	margin-bottom: 2rem;
575
576	figure {
577	margin: 0;
578	padding: 0;
579	}
580
581	.woocommerce-product-gallery__wrapper {
582	margin: 0;
583	padding: 0;
584	}
585
586	.zoomImg {
587	background-color: #fff;
588	opacity: 0;
589	}
590
591	.woocommerce-product-gallery__image--placeholder {
592	border: 1px solid #f2f2f2;
593	}
594
595	.woocommerce-product-gallery__image:nth-child(n + 2) {
596	width: 25%;
597	display: inline-block;
598	}
599
600	.woocommerce-product-gallery__image a {
601	display: block;
602	}
603
604	.woocommerce-product-gallery__image a:focus img {
605	outline-offset: -2px;
606	}
607
608	.flex-control-thumbs {
609	li {
610	list-style: none;
611	cursor: pointer;
612	float: left;
613	}
614
615	img {
616	opacity: 0.5;
617
618	&:hover,
619	&.flex-active {
620	opacity: 1;
621	}
622	}
623	}
624
625	img {
626	display: block;
627	height: auto;
628	}
629	}
630
631	.woocommerce-product-gallery--columns-3 {
632	.flex-control-thumbs li {
633	width: 33.3333%;
634	}
635
636	.flex-control-thumbs li:nth-child(3n + 1) {
637	clear: left;
638	}
639	}
640
641	.woocommerce-product-gallery--columns-4 {
642	ol {
643	margin-left: 0;
644	margin-bottom: 0;
645	}
646
647	.flex-control-thumbs li {
648	width: 14.2857142857%;
649	margin: 0 14.2857142857% 1.6em 0;
650	}
651
652	.flex-control-thumbs li:nth-child(4n) {
653	margin-right: 0;
654	}
655
656	.flex-control-thumbs li:nth-child(4n + 1) {
657	clear: left;
658	}
659	}
660
661	.woocommerce-product-gallery--columns-5 {
662	.flex-control-thumbs li {
663	width: 20%;
664	}
665
666	.flex-control-thumbs li:nth-child(5n + 1) {
667	clear: left;
668	}
669	}
670
671	.woocommerce-product-gallery__trigger {
672	@include woocommerce-product-gallery__trigger;
673
674	&:focus {
675	outline-offset: 2px;
676	outline: 2px dotted var(--form--border-color) !important;
677	}
678	}
679
680	.woocommerce-tabs {
681	margin: 4rem 0 2rem;
682
683	/* reset description tab width to full width */
684	#tab-description {
685	h2,
686	p {
687	max-width: 100vw;
688	width: 100%;
689	}
690	}
691
692	/* reset additional info tab width to full width */
693	#tab-additional_information {
694	.woocommerce-product-attributes {
695	max-width: 100vw;
696	width: 100%;
697	}
698	}
699
700	#tab-reviews {
701	/* reset reviews tab width to full width */
702	.woocommerce-Reviews {
703	max-width: 100vw;
704	width: 100%;
705	}
706
707	#submit {
708	float: right;
709	}
710	}
711
712	ul {
713	margin: 0 0 1.5rem;
714	padding: 0;
715	font-family: $headings;
716	border-bottom: var(--button--border-width) solid
717	var(--button--color-background);
718
719	li {
720	display: inline-flex !important;
721
722	a {
723	color: $body-color;
724	text-decoration: none;
725	font-weight: 700;
726	padding: var(--button--padding-vertical)
727	var(--button--padding-horizontal);
728	}
729
730	&.active {
731	a {
732	color: var(--button--color-text);
733	background-color: var(--button--color-background);
734	border: var(--button--border-width) solid
735	var(--button--color-background);
736
737	&:focus {
738	color: $body-color;
739	}
740	}
741	}
742	}
743	}
744
745	.panel {
746	> * {
747	margin-top: 0 !important;
748	}
749
750	h1,
751	h2 {
752	&::before {
753	content: none;
754	}
755	}
756
757	h2:first-of-type {
758	font-size: var(--global--font-size-lg);
759	margin: 0 0 2rem !important;
760	}
761	}
762
763	#comments {
764	padding-top: 0;
765	}
766
767	.comment-reply-title {
768	font-family: $headings;
769	font-size: 1em;
770	font-weight: 700;
771	display: block;
772	}
773
774	#reviews {
775	ol.commentlist {
776	padding: 0;
777	margin: 0;
778	}
779
780	li.review,
781	li.comment {
782	list-style: none;
783	margin: 0.5rem 0 2.5rem 0;
784
785	.avatar {
786	max-height: 36px;
787	width: auto;
788	float: right;
789	}
790
791	p.meta {
792	margin-bottom: 0.5em;
793	}
794	}
795
796	.comment-form-rating {
797	label {
798	max-width: 58rem;
799	margin: 0 auto;
800	}
801	}
802
803	p.stars {
804	margin-top: 0;
805
806	a {
807	position: relative;
808	height: 1em;
809	width: 1em;
810	text-indent: -999em;
811	display: inline-block;
812	text-decoration: none;
813	box-shadow: none;
814	font-size: 24px;
815
816	&::before {
817	display: block;
818	position: absolute;
819	top: 0;
820	left: 0;
821	width: 1em;
822	height: 1em;
823	line-height: 1;
824	font-family: WooCommerce;
825	content: "\e021";
826	text-indent: 0;
827	}
828
829	&:hover {
830	~ a::before {
831	content: "\e021";
832	}
833	}
834	}
835
836	&:hover {
837	a {
838	&::before {
839	content: "\e020";
840	}
841	}
842	}
843
844	&.selected {
845	a.active {
846	&::before {
847	content: "\e020";
848	}
849
850	~ a::before {
851	content: "\e021";
852	}
853	}
854
855	a:not(.active) {
856	&::before {
857	content: "\e020";
858	}
859	}
860	}
861	}
862
863	.comment-form-author,
864	.comment-form-email {
865	float: none;
866	margin-left: auto;
867	}
868	}
869	}
870
871	/**
872	* Related products
873	*/
874
875	.related.products,
876	.up-sells {
877	h2 {
878	margin-bottom: 2rem;
879	}
880
881	clear: both;
882
883	ul.products {
884	display: flex;
885	justify-content: space-evenly;
886	align-items: stretch;
887
888	li.product {
889	display: flex;
890	flex-direction: column;
891	justify-content: space-between;
892	align-items: flex-start;
893	}
894	}
895	}
896
897	/**
898	* Widgets
899	*/
900	.widget.woocommerce {
901	ul {
902	padding-left: 0;
903
904	li {
905	list-style: none;
906	}
907	}
908	}
909
910	.widget .product_list_widget,
911	.site-footer .widget .product_list_widget {
912	margin-bottom: 1.5rem;
913
914	a {
915	display: block;
916	box-shadow: none;
917
918	&:hover {
919	box-shadow: none;
920	}
921	}
922
923	li {
924	padding: 0.5rem 0;
925
926	a.remove {
927	float: left;
928	margin-top: 7px;
929	line-height: 20px;
930	color: #fff;
931	margin-right: 0.5rem;
932	}
933	}
934
935	img {
936	display: none;
937	}
938	}
939
940	.widget_shopping_cart {
941	.buttons {
942	a {
943	display: inline-block;
944	margin: 0 0.5rem 0 0;
945	}
946	}
947	}
948
949	.woocommerce-shopping-totals {
950	vertical-align: text-top;
951	}
952
953	.widget_layered_nav {
954	.chosen {
955	&::before {
956	content: "×";
957	display: inline-block;
958	width: 16px;
959	height: 16px;
960	line-height: 16px;
961	font-size: 16px;
962	text-align: center;
963	border-radius: 100%;
964	border: 1px solid #000;
965	margin-right: 0.25rem;
966	}
967	}
968	}
969
970	.widget_price_filter {
971	.price_slider {
972	margin-bottom: 1rem;
973	}
974
975	.price_slider_amount {
976	text-align: right;
977	line-height: 2.4;
978	font-size: 0.8751em;
979
980	.button {
981	float: left;
982	padding: 0.4rem 1rem;
983	}
984	}
985
986	.ui-slider {
987	position: relative;
988	text-align: left;
989	margin-left: 0.5rem;
990	margin-right: 0.5rem;
991	}
992
993	.ui-slider .ui-slider-handle {
994	position: absolute;
995	z-index: 2;
996	width: 1em;
997	height: 1em;
998	background-color: #000;
999	border-radius: 1em;
1000	cursor: ew-resize;
1001	outline: none;
1002	top: -0.3em;
1003	margin-left: -0.5em;
1004	}
1005
1006	.ui-slider .ui-slider-range {
1007	position: absolute;
1008	z-index: 1;
1009	font-size: 0.7em;
1010	display: block;
1011	border: 0;
1012	border-radius: 1em;
1013	background-color: #000;
1014	}
1015
1016	.price_slider_wrapper .ui-widget-content {
1017	border-radius: 1em;
1018	background-color: #666;
1019	border: 0;
1020	}
1021
1022	.ui-slider-horizontal {
1023	height: 0.5em;
1024	}
1025
1026	.ui-slider-horizontal .ui-slider-range {
1027	top: 0;
1028	height: 100%;
1029	}
1030
1031	.ui-slider-horizontal .ui-slider-range-min {
1032	left: -1px;
1033	}
1034
1035	.ui-slider-horizontal .ui-slider-range-max {
1036	right: -1px;
1037	}
1038	}
1039
1040	.widget_rating_filter {
1041	li {
1042	text-align: right;
1043
1044	.star-rating {
1045	float: left;
1046	margin-top: 0.3rem;
1047	}
1048	}
1049	}
1050
1051	.widget_product_search {
1052	form {
1053	position: relative;
1054	}
1055
1056	.search-field {
1057	padding-right: 100px;
1058	}
1059
1060	input[type="submit"]="submit""] {
1061	position: absolute;
1062	top: 0.5rem;
1063	right: 0.5rem;
1064	padding-left: 1rem;
1065	padding-right: 1rem;
1066	}
1067	}
1068
1069	/**
1070	* Account section
1071	*/
1072	.woocommerce-account {
1073	#main {
1074	.post-inner {
1075	padding-top: 0;
1076	}
1077
1078	.woocommerce {
1079	max-width: 1600px;
1080	padding: 0 6vw;
1081	margin: 0 auto;
1082	}
1083	}
1084
1085	.woocommerce-MyAccount-navigation {
1086	font-family: $headings;
1087	margin: 0 0 2rem;
1088
1089	ul {
1090	margin: 0;
1091	padding: 0;
1092	}
1093
1094	li {
1095	list-style: none;
1096	padding: 0.5rem 0;
1097	font-family: $headings;
1098	font-size: 2rem;
1099
1100	&:first-child {
1101	padding-top: 0;
1102	}
1103
1104	a {
1105	box-shadow: none;
1106	text-decoration: none;
1107	font-weight: 600;
1108	color: #aaa;
1109
1110	&:hover {
1111	color: #000;
1112	text-decoration: underline;
1113	}
1114	}
1115
1116	&.is-active {
1117	a {
1118	text-decoration: underline;
1119	color: $highlights-color;
1120	}
1121	}
1122	}
1123	}
1124
1125	.woocommerce-MyAccount-content {
1126	p {
1127	font-family: $headings;
1128	font-size: 2rem;
1129	}
1130
1131	form {
1132	h3 {
1133	margin-top: 0;
1134	}
1135	}
1136
1137	.woocommerce-Addresses {
1138	margin-top: -1rem;
1139
1140	.woocommerce-Address-title {
1141	h3 {
1142	display: inline-block;
1143	margin-right: 1rem;
1144	font-size: 1.8rem;
1145	margin-top: 2rem;
1146	}
1147	}
1148
1149	address {
1150	line-height: 1.8rem;
1151	}
1152	}
1153
1154	.woocommerce-address-fields {
1155	label {
1156	font-size: 1.5rem;
1157	margin-bottom: 0.1rem;
1158	}
1159
1160	select,
1161	input,
1162	.selection {
1163	font-size: 1.5rem;
1164	padding-top: 0.3rem;
1165	padding-bottom: 0.3rem;
1166	}
1167
1168	.form-row {
1169	margin-top: 1.5rem !important;
1170	margin-bottom: 0 !important;
1171	}
1172
1173	#billing_company_field {
1174	padding-top: 1.5rem !important;
1175	}
1176
1177	.woocommerce-address-fields__field-wrapper {
1178	margin-bottom: 2rem;
1179	}
1180	}
1181	}
1182
1183	&.woocommerce-lost-password {
1184	.woocommerce {
1185	max-width: var(--responsive--alignwide-width) !important;
1186	padding: 0 !important;
1187	flex-wrap: wrap;
1188
1189	.woocommerce-notices-wrapper {
1190	flex: 1 0 100%;
1191	}
1192
1193	.woocommerce-ResetPassword {
1194	width: 100%;
1195
1196	#user_login {
1197	margin-bottom: 10px;
1198	}
1199	}
1200	}
1201	}
1202
1203	table.account-orders-table {
1204	margin-top: 0;
1205	border: 0;
1206
1207	tr,
1208	td,
1209	th {
1210	border: 0;
1211	}
1212
1213	td {
1214	padding-left: 1.5rem;
1215	}
1216
1217	thead {
1218	border-bottom: 1px solid #ddd;
1219	}
1220
1221	.button {
1222	margin: 0 0.35rem 0.35rem 0;
1223	width: 80%;
1224	}
1225	}
1226
1227	table.account-orders-table:not(.has-background) {
1228	tbody {
1229	tr:nth-child(2n + 1) {
1230	td {
1231	background: var(--global--color-background);
1232	filter: brightness(88%);
1233
1234	.is-dark-theme & {
1235	filter: brightness(112%);
1236	}
1237	}
1238	}
1239	}
1240	}
1241
1242	.woocommerce-EditAccountForm {
1243	label {
1244	font-size: 1.5rem;
1245	}
1246
1247	input,
1248	select {
1249	border: var(--form--border-width) solid var(--form--border-color);
1250	font-size: 1.5rem;
1251	}
1252
1253	fieldset {
1254	border: none;
1255	padding-left: 0;
1256	padding-right: 0;
1257	margin-top: 30px;
1258
1259	legend {
1260	display: contents;
1261	font-size: 2rem;
1262	}
1263
1264	p {
1265	margin-top: 20px;
1266	margin-bottom: 0 !important;
1267	}
1268	}
1269
1270	button {
1271	margin-top: 0;
1272	}
1273
1274	#account_display_name + span {
1275	font-size: 1.5rem;
1276	}
1277
1278	p {
1279	margin-top: 20px;
1280
1281	&:nth-of-type(4) {
1282	margin-top: 30px;
1283	}
1284	}
1285	}
1286	}
1287
1288	.logged-in.woocommerce-account {
1289	#main {
1290	.woocommerce {
1291	display: flex;
1292	flex-direction: row;
1293	}
1294	}
1295	}
1296
1297	.checkout-button {
1298	display: block;
1299	padding: 1rem 2rem;
1300	border: 2px solid #000;
1301	text-align: center;
1302	font-weight: 800;
1303
1304	&:hover {
1305	border-color: #999;
1306	}
1307
1308	&::after {
1309	content: "→";
1310	margin-left: 0.5rem;
1311	}
1312	}
1313
1314	.woocommerce-cart {
1315	table.woocommerce-cart-form__contents {
1316	thead,
1317	tfoot {
1318	text-align: left;
1319	}
1320	}
1321
1322	.post-inner {
1323	padding-top: 0;
1324	}
1325
1326	#main {
1327	.woocommerce {
1328	max-width: var(--responsive--alignwide-width);
1329	margin: 0 auto;
1330	}
1331	}
1332
1333	p.form-row {
1334	input {
1335	border: 1px solid #ddd;
1336	}
1337	}
1338
1339	table.cart img.woocommerce-placeholder {
1340	height: auto !important;
1341	}
1342	}
1343
1344	/**
1345	* Checkout
1346	*/
1347	.woocommerce-form-coupon-toggle .woocommerce-info {
1348	display: block;
1349	margin-bottom: 2rem;
1350	padding: 1rem;
1351	}
1352
1353	.woocommerce-form-coupon {
1354	background: #eee;
1355	padding: 1rem;
1356	font-size: 0.88889em;
1357	color: var(--form--color-text);
1358
1359	#coupon_code {
1360	border: var(--form--border-width) solid var(--form--border-color);
1361	}
1362
1363	button[name="apply_coupon"]="apply_coupon""] {
1364	padding: 0.5rem;
1365
1366	.is-dark-theme & {
1367	border-color: var(--global--color-background);
1368
1369	&:hover,
1370	&:active {
1371	background: var(--global--color-background);
1372	}
1373	}
1374	}
1375	}
1376
1377	#ship-to-different-address {
1378	font-size: 1em;
1379	display: inline-block;
1380	margin: 1.42em 0;
1381
1382	label {
1383	font-weight: 400;
1384	cursor: pointer;
1385
1386	span {
1387	position: relative;
1388	display: block;
1389	text-align: right;
1390	padding-right: 45px;
1391
1392	&::before {
1393	content: "";
1394	display: block;
1395	height: 16px;
1396	width: 30px;
1397	border: 2px solid var(--form--border-color);
1398	background: var(--global--color-primary);
1399	border-radius: 13rem;
1400	box-sizing: content-box;
1401	transition: all ease-in-out 0.3s;
1402	position: absolute;
1403	top: 0;
1404	right: 0;
1405	}
1406
1407	&::after {
1408	content: "";
1409	display: block;
1410	width: 14px;
1411	height: 14px;
1412	background: var(--global--color-background);
1413	position: absolute;
1414	top: 3px;
1415	right: 17px;
1416	border-radius: 13rem;
1417	transition: all ease-in-out 0.3s;
1418	}
1419	}
1420
1421	input[type="checkbox"]="checkbox""] {
1422	display: none;
1423	}
1424
1425	input[type="checkbox"]="checkbox""]:checked + span::after {
1426	right: 3px;
1427	background: var(--global--color-primary);
1428	}
1429
1430	input[type="checkbox"]="checkbox""]:checked + span::before {
1431	background: var(--global--color-background);
1432	}
1433	}
1434	}
1435
1436	.woocommerce-no-js {
1437	form.woocommerce-form-login,
1438	form.woocommerce-form-coupon {
1439	display: block !important;
1440	}
1441
1442	.woocommerce-form-login-toggle,
1443	.woocommerce-form-coupon-toggle,
1444	.showcoupon {
1445	display: none !important;
1446	}
1447	}
1448
1449	.woocommerce-terms-and-conditions {
1450	border: 1px solid rgba(0, 0, 0, 0.2);
1451	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
1452	background: rgba(0, 0, 0, 0.05);
1453	}
1454
1455	.woocommerce-terms-and-conditions-link {
1456	display: inline-block;
1457
1458	&::after {
1459	content: "";
1460	display: inline-block;
1461	border-style: solid;
1462	margin-bottom: 2px;
1463	margin-left: 0.25rem;
1464	border-width: 6px 6px 0 6px;
1465	border-color: $body-color transparent transparent transparent;
1466	}
1467
1468	&.woocommerce-terms-and-conditions-link--open::after {
1469	border-width: 0 6px 6px 6px;
1470	border-color: transparent transparent $body-color transparent;
1471	}
1472	}
1473
1474	.woocommerce-checkout {
1475	.woocommerce {
1476	max-width: var(--responsive--alignwide-width);
1477	margin: 0 auto;
1478	}
1479
1480	ul.woocommerce-error {
1481	flex-direction: column;
1482	align-items: flex-start;
1483
1484	li {
1485	font-family: $headings;
1486	margin: 0.5rem 0 0.5rem;
1487	}
1488	}
1489
1490	.post-inner {
1491	padding-top: 0;
1492	}
1493
1494	.woocommerce-billing-fields {
1495	h3 {
1496	margin: 2rem 0;
1497	}
1498	}
1499
1500	form[name="checkout"]="checkout""] {
1501	display: table;
1502	}
1503
1504	.blockUI.blockOverlay {
1505	position: relative;
1506
1507	@include loader();
1508	}
1509
1510	form {
1511	.col2-set {
1512	width: 50%;
1513	float: left;
1514	padding-right: 1.5vw;
1515
1516	.col-1,
1517	.col-2 {
1518	float: none;
1519	width: 100%;
1520	}
1521
1522	label {
1523	font-family: $headings;
1524	letter-spacing: normal;
1525	}
1526
1527	p {
1528	margin-bottom: 1.15em;
1529	}
1530	}
1531
1532	#order_review_heading {
1533	margin-top: 2rem;
1534	}
1535
1536	#order_review_heading,
1537	#order_review {
1538	width: 50%;
1539	padding-left: 1.5vw;
1540	float: right;
1541	clear: right;
1542
1543	.woocommerce-checkout-review-order-table {
1544	margin-top: 2rem;
1545	border: 0;
1546
1547	th,
1548	td {
1549	border: 0;
1550	}
1551
1552	thead {
1553	display: none;
1554	}
1555
1556	.woocommerce-Price-amount {
1557	font-weight: 700;
1558	}
1559
1560	.cart-subtotal,
1561	.order-total {
1562	border-top: 2px solid var(--form--border-color);
1563	}
1564	}
1565	}
1566
1567	.form-row.woocommerce-invalid {
1568	input.input-text {
1569	border: 2px solid var(--wc-red);
1570	}
1571	}
1572	}
1573
1574	.woocommerce-input-wrapper {
1575	.description {
1576	background: #4169e1;
1577	color: #fff;
1578	border-radius: 3px;
1579	padding: 1rem;
1580	margin: 0.5rem 0 0;
1581	clear: both;
1582	display: none;
1583	position: relative;
1584
1585	a {
1586	color: #fff;
1587	text-decoration: underline;
1588	border: 0;
1589	box-shadow: none;
1590	}
1591
1592	&::before {
1593	left: 50%;
1594	top: 0;
1595	margin-top: -4px;
1596	transform: translateX(-50%) rotate(180deg);
1597	content: "";
1598	position: absolute;
1599	border-width: 4px 6px 0 6px;
1600	border-style: solid;
1601	border-color: #4169e1 transparent transparent transparent;
1602	z-index: 100;
1603	display: block;
1604	}
1605	}
1606	}
1607
1608	.woocommerce-form-login {
1609	p.form-row.form-row-first,
1610	p.form-row.form-row-last {
1611	float: none;
1612	}
1613	}
1614	}
1615
1616	.woocommerce-checkout-review-order-table {
1617	ul li {
1618	list-style-type: none;
1619	}
1620
1621	input[type="radio"]="radio""].shipping_method {
1622	display: none;
1623
1624	& + label {
1625	&::before {
1626	content: "";
1627	display: inline-block;
1628	width: 14px !important;
1629	height: 14px;
1630	border: var(--form--border-width) solid
1631	var(--form--border-color);
1632	background: var(--global--color-white);
1633	margin-left: 4px;
1634	margin-right: 1.2rem;
1635	border-radius: 100%;
1636	transform: translateY(2px);
1637	}
1638	}
1639
1640	&:checked + label {
1641	&::before {
1642	background: var(--global--color-border);
1643	}
1644
1645	.is-dark-theme &::before {
1646	background: var(--global--color-background);
1647	}
1648	}
1649	}
1650
1651	td {
1652	padding: 1rem 0.5em;
1653	}
1654
1655	dl.variation {
1656	margin: 0;
1657
1658	p {
1659	margin: 0;
1660	}
1661
1662	dt,
1663	dd {
1664	font-family: $headings;
1665
1666	p {
1667	padding-top: 1px;
1668	font-family: $headings;
1669	}
1670	}
1671	}
1672
1673	tfoot {
1674	text-align: left;
1675	}
1676	}
1677
1678	.woocommerce-order-received {
1679	.woocommerce-order {
1680	p,
1681	li {
1682	font-family: $headings;
1683	}
1684	}
1685
1686	table {
1687	border: 0;
1688
1689	td,
1690	th,
1691	tr {
1692	border: 0;
1693	}
1694
1695	tr {
1696	height: 5rem;
1697	}
1698
1699	tfoot {
1700	border-top: 1px solid #ddd;
1701
1702	/* Targeting total */
1703	tr:last-of-type {
1704	border-top: 1px solid #ddd;
1705
1706	.woocommerce-Price-amount {
1707	font-weight: 700;
1708	}
1709	}
1710	}
1711	}
1712	}
1713
1714	.woocommerce-checkout-review-order {
1715	ul {
1716	margin: 2rem 0 3rem;
1717	padding-left: 0;
1718	}
1719
1720	#place_order {
1721	width: 100%;
1722	}
1723	}
1724
1725	.wc_payment_method {
1726	list-style: none;
1727
1728	.payment_box {
1729	padding: 1rem;
1730	background: #eee;
1731	color: var(--global--color-dark-gray);
1732
1733	a,
1734	a:hover,
1735	a:visited {
1736	color: var(--global--color-dark-gray);
1737	}
1738
1739	ul,
1740	ol {
1741	&:last-of-type {
1742	margin-bottom: 0;
1743	}
1744	}
1745
1746	fieldset {
1747	padding: 1.5rem;
1748	padding-bottom: 0;
1749	border: 0;
1750	background: #f6f6f6;
1751	}
1752
1753	li {
1754	list-style: none;
1755	}
1756
1757	p {
1758	&:first-child {
1759	margin-top: 0;
1760	}
1761
1762	&:last-child {
1763	margin-bottom: 0;
1764	}
1765	}
1766
1767	input[type="checkbox"]="checkbox""] {
1768	width: 25px !important;
1769	}
1770
1771	input[type="radio"]="radio""] {
1772	& + label::before {
1773	background: #fff !important;
1774	border: var(--form--border-width) solid #000 !important;
1775	}
1776
1777	&:checked + label::before {
1778	background: #000 !important;
1779	}
1780	}
1781	}
1782
1783	> label:first-of-type {
1784	display: block;
1785	margin: 1rem 0;
1786
1787	img {
1788	max-height: 24px;
1789	max-width: 200px;
1790	float: right;
1791	}
1792	}
1793
1794	label {
1795	cursor: pointer;
1796	}
1797
1798	input[type="radio"]="radio""] {
1799	display: none;
1800
1801	& + label {
1802	font-family: $headings;
1803
1804	&::before {
1805	content: "";
1806	display: inline-block;
1807	width: 14px;
1808	height: 14px;
1809	border: var(--form--border-width) solid
1810	var(--form--border-color);
1811	background: var(--global--color-white);
1812	margin-left: 4px;
1813	margin-right: 1.2rem;
1814	border-radius: 100%;
1815	transform: translateY(2px);
1816	}
1817	}
1818
1819	&:checked + label {
1820	&::before {
1821	background: var(--global--color-border);
1822	}
1823
1824	.is-dark-theme &::before {
1825	background: var(--global--color-background);
1826	}
1827	}
1828	}
1829	}
1830
1831	.wc_payment_methods {
1832	.payment_box {
1833	p {
1834	font-family: $headings;
1835	}
1836	}
1837	}
1838
1839	.account-payment-methods-table {
1840	padding-top: 0 !important;
1841	margin-bottom: 1rem;
1842
1843	table,
1844	tr {
1845	border-style: hidden;
1846	}
1847
1848	tr:nth-child(2n) {
1849	td {
1850	background: transparent !important;
1851	}
1852	}
1853
1854	tr:nth-child(2n + 1) {
1855	td {
1856	background: var(--global--color-background);
1857	filter: brightness(88%);
1858
1859	.is-dark-theme & {
1860	filter: brightness(112%);
1861	}
1862	}
1863	}
1864
1865	td.payment-method-actions {
1866	padding-right: 0.5rem;
1867	padding-left: 0.5rem;
1868	padding-top: 0.3rem;
1869	padding-bottom: 0.3rem;
1870
1871	display: grid;
1872	border: none;
1873
1874	font-size: 0;
1875
1876	a {
1877	width: 100%;
1878	padding-top: 0.3rem !important;
1879	padding-bottom: 0.3rem !important;
1880	margin-top: 0.5rem !important;
1881	margin-bottom: 0.5rem !important;
1882
1883	@include inversebuttoncolors();
1884	}
1885	}
1886	}
1887
1888	.woocommerce-terms-and-conditions-wrapper {
1889	margin-bottom: 5rem;
1890
1891	.woocommerce-privacy-policy-text {
1892	p {
1893	font-family: $headings;
1894	font-size: 1.6rem;
1895	}
1896	}
1897	}
1898
1899	.woocommerce-order-overview {
1900	margin-bottom: 2rem;
1901	}
1902
1903	.woocommerce-table--order-details {
1904	margin-bottom: 2rem;
1905
1906	thead,
1907	tfoot {
1908	text-align: left;
1909	}
1910	}
1911
1912	/**
1913	* Layout stuff
1914	*/
1915	.woocommerce {
1916	section {
1917	padding-top: 2rem;
1918	padding-bottom: 0;
1919	}
1920
1921	.content-area {
1922	.site-main {
1923	margin: 0 5vw;
1924	}
1925	}
1926
1927	/* Shop layout */
1928	ul.products {
1929	display: flex;
1930	align-items: stretch;
1931	flex-direction: row;
1932	flex-wrap: wrap;
1933	box-sizing: border-box;
1934	word-break: break-word;
1935	min-width: 12vw;
1936
1937	&.columns-2 {
1938	li.product {
1939	width: calc(100% / 2 - 16px) !important;
1940	}
1941	}
1942
1943	&.columns-3 {
1944	li.product {
1945	width: calc(100% / 3 - 16px) !important;
1946	}
1947	}
1948
1949	&.columns-4 {
1950	li.product {
1951	width: calc(100% / 4 - 16px) !important;
1952	}
1953	}
1954
1955	&.columns-5 {
1956	li.product {
1957	width: calc(100% / 5 - 16px) !important;
1958	}
1959	}
1960
1961	&.columns-6 {
1962	li.product {
1963	width: calc(100% / 6 - 16px) !important;
1964	}
1965	}
1966
1967	li.product {
1968	display: flex;
1969	flex-direction: column;
1970	justify-content: space-between;
1971	align-items: flex-start;
1972	margin: 0 8px 16px 8px;
1973	box-sizing: border-box;
1974
1975	img.attachment-woocommerce_thumbnail,
1976	img.woocommerce-placeholder {
1977	height: auto !important;
1978	}
1979	}
1980
1981	li.product-category {
1982	a {
1983	text-align: left;
1984	text-decoration: none;
1985
1986	h2.woocommerce-loop-category__title {
1987	margin-top: 0.4rem;
1988	font-family: $headings;
1989	font-size: 1.5rem;
1990
1991	.count {
1992	background-color: transparent;
1993	color: $body-color;
1994	}
1995	}
1996	}
1997
1998	mark {
1999	background-color: initial;
2000	}
2001	}
2002	}
2003	}
2004
2005	@media only screen and (max-width: 600px) {
2006	.woocommerce {
2007	.woocommerce-ordering {
2008	float: left;
2009	clear: both;
2010	margin-top: 0;
2011	}
2012
2013	.woocommerce-result-count {
2014	margin-top: 0;
2015	margin-bottom: 20px;
2016	}
2017	}
2018	}
2019
2020	@media only screen and (max-width: 667px) {
2021	.woocommerce,
2022	.woocommerce-page {
2023	ul.products[class="columns-"]="columns-""] {
2024	li.product {
2025	width: auto !important;
2026	margin-left: auto;
2027	margin-right: auto;
2028	}
2029	}
2030	}
2031	}
2032
2033	@media only screen and (min-width: 668px) and (max-width: 768px) {
2034	.woocommerce,
2035	.woocommerce-page {
2036	.related.products {
2037	ul.products[class="columns-"]="columns-""] {
2038	li.product {
2039	padding: 0 2vw 3em 0 !important;
2040	margin-bottom: 2em;
2041	}
2042	}
2043	}
2044
2045	ul.products[class="columns-"]="columns-""] {
2046	justify-content: center;
2047
2048	li.product {
2049	width: 50%;
2050	padding: 0 2vw 3em 0;
2051	}
2052	}
2053
2054	.onsale {
2055	font-size: 1rem;
2056	}
2057	}
2058	}
2059
2060	@media only screen and (max-width: 768px) {
2061	.woocommerce section.content-area {
2062	padding-top: 0;
2063	}
2064
2065	#main {
2066	.woocommerce {
2067	.woocommerce-cart-form {
2068	.actions {
2069	.coupon {
2070	margin-bottom: 2rem;
2071
2072	button {
2073	width: 100%;
2074	}
2075	}
2076	}
2077
2078	#coupon_code {
2079	width: 100% !important;
2080	}
2081	}
2082	}
2083
2084	#shipping_method {
2085	li {
2086	display: flex;
2087	justify-content: flex-end;
2088	}
2089	}
2090	}
2091
2092	.woocommerce,
2093	.woocommerce-page {
2094	.onsale {
2095	right: -0.7rem !important;
2096	}
2097
2098	.woocommerce-tabs {
2099	ul {
2100	li {
2101	font-size: 1rem;
2102
2103	a {
2104	padding: calc(0.75 * var(--button--padding-vertical))
2105	calc(0.75 * var(--button--padding-horizontal));
2106	}
2107	}
2108	}
2109	}
2110
2111	table.shop_table_responsive {
2112	.button {
2113	@include inversebuttoncolors();
2114	}
2115
2116	tr {
2117	margin: 0 0 1.5rem;
2118
2119	&:first-child {
2120	border-top: 1px solid;
2121
2122	td.product-remove:first-child {
2123	border-top: inherit;
2124	}
2125	}
2126
2127	&:last-child {
2128	margin-bottom: 0;
2129	}
2130
2131	&:nth-child(2n) {
2132	td {
2133	background: transparent;
2134	}
2135	}
2136
2137	&:nth-child(2n + 1) {
2138	td {
2139	background: var(--global--color-background);
2140	filter: brightness(88%);
2141
2142	.is-dark-theme & {
2143	filter: brightness(112%);
2144	}
2145	}
2146	}
2147
2148	td {
2149	border-bottom-width: 0;
2150
2151	&:last-child {
2152	border-bottom-width: 1px;
2153	}
2154	}
2155
2156	td.product-quantity::before {
2157	padding-top: 0.9rem;
2158	}
2159
2160	.product-remove {
2161	float: right;
2162	position: relative;
2163	z-index: 1;
2164	}
2165
2166	.product-thumbnail {
2167	display: block;
2168
2169	img {
2170	width: 70px;
2171	}
2172
2173	&::before {
2174	content: "";
2175	}
2176	}
2177	}
2178	}
2179
2180	.woocommerce-breadcrumb {
2181	margin-bottom: 4rem;
2182	font-size: 0.8em;
2183	font-family: $headings;
2184	}
2185
2186	.related.products {
2187	ul.products {
2188	display: flex;
2189	flex-direction: column;
2190	align-items: flex-start;
2191
2192	li.product {
2193	margin-bottom: 5em;
2194	}
2195	}
2196	}
2197
2198	.woocommerce-products-header__title.page-title {
2199	margin: 3rem auto 4rem;
2200	}
2201
2202	.woocommerce-result-count,
2203	.woocommerce-ordering {
2204	font-size: 0.8em;
2205	}
2206
2207	.woocommerce-ordering {
2208	margin-bottom: 3rem;
2209	}
2210	}
2211
2212	.woocommerce-cart-form {
2213	table {
2214	td.product-name {
2215	padding-left: 0.5em;
2216	}
2217
2218	input.qty {
2219	padding: 1rem 1.5rem;
2220	}
2221	}
2222	}
2223
2224	.woocommerce-checkout {
2225	form {
2226	.col2-set {
2227	width: 100%;
2228	float: none;
2229	padding-right: 0;
2230
2231	.col-1,
2232	.col-2 {
2233	float: none;
2234	width: 100%;
2235	}
2236	}
2237
2238	#order_review_heading {
2239	margin-top: 2rem;
2240	}
2241
2242	#order_review_heading,
2243	#order_review {
2244	width: 100%;
2245	padding-left: 0;
2246	float: none;
2247	}
2248
2249	table {
2250	tbody {
2251	td.product-total {
2252	text-align: end;
2253	}
2254	}
2255
2256	tfoot {
2257	.cart-subtotal,
2258	.order-total {
2259	td {
2260	text-align: end;
2261	}
2262	}
2263	}
2264	}
2265	}
2266	}
2267
2268	.logged-in.woocommerce-account {
2269	#main {
2270	.woocommerce {
2271	flex-direction: column;
2272	}
2273
2274	.woocommerce-MyAccount-navigation,
2275	.woocommerce-MyAccount-content {
2276	width: 100%;
2277	}
2278
2279	table.account-orders-table {
2280	.button {
2281	padding-left: 0.5em;
2282	padding-right: 0.5em;
2283	width: 100%;
2284	margin: 2rem 0;
2285	}
2286	}
2287	}
2288
2289	table.account-orders-table {
2290	td {
2291	padding-bottom: 1.5rem;
2292	}
2293	}
2294	}
2295	}
2296
2297	@media only screen and (min-width: 768px) {
2298	/**
2299	* Tables
2300	*/
2301	.woocommerce,
2302	.woocommerce-page {
2303	table.shop_table {
2304	tbody {
2305	tr {
2306	font-size: 0.88889em;
2307	}
2308	}
2309	}
2310
2311	.onsale {
2312	font-size: 1rem;
2313	}
2314	}
2315
2316	/**
2317	* Home page
2318	*/
2319	.home #main {
2320	[class="woocommerce columns-"]="woocommerce columns-""] {
2321	word-break: break-word;
2322	max-width: var(--responsive--aligndefault-width);
2323	margin-left: auto;
2324	margin-right: auto;
2325	}
2326	}
2327
2328	/**
2329	* Shop page
2330	*/
2331
2332	.woocommerce-pagination {
2333	span.page-numbers,
2334	a.page-numbers,
2335	.next.page-numbers,
2336	.prev.page-numbers {
2337	padding: 1rem;
2338	}
2339	}
2340
2341	/**
2342	* Account section
2343	*/
2344	.woocommerce-account {
2345	.woocommerce-MyAccount-navigation {
2346	float: none;
2347	width: 20%;
2348	margin-bottom: 1.5rem;
2349	margin-right: 3rem;
2350
2351	li {
2352	margin: 0 1rem 3rem 0;
2353	padding: 0;
2354	border-bottom: 0;
2355
2356	&:last-child {
2357	margin-right: 0;
2358	}
2359	}
2360	}
2361
2362	.woocommerce-MyAccount-content {
2363	float: none;
2364	width: 75%;
2365	}
2366
2367	table.account-orders-table {
2368	margin-top: 0;
2369	border: 0;
2370	margin-bottom: 1rem;
2371
2372	tr,
2373	td,
2374	th {
2375	border: 0;
2376	padding: 0;
2377	}
2378
2379	th,
2380	td,
2381	td.woocommerce-orders-table__cell-order-actions {
2382	width: 1%;
2383	padding-right: 0.5rem;
2384	padding-left: 0.5rem;
2385
2386	a {
2387	padding-top: 0.3rem !important;
2388	padding-bottom: 0.3rem !important;
2389	margin-top: 0.5rem !important;
2390	margin-bottom: 0.5rem !important;
2391	}
2392	}
2393
2394	td.woocommerce-orders-table__cell-order-date {
2395	padding-right: 0;
2396	}
2397
2398	thead {
2399	border-bottom: 1px solid $body-color;
2400	}
2401
2402	.button {
2403	padding-left: 0.5em;
2404	padding-right: 0.5em;
2405	width: 100%;
2406	margin: 1.5rem 0;
2407
2408	@include inversebuttoncolors();
2409	}
2410	}
2411	}
2412
2413	/**
2414	* Layout stuff
2415	*/
2416	.woocommerce {
2417	.content-area {
2418	margin: 0 auto;
2419	padding: 0 6vw;
2420
2421	.site-main {
2422	margin: 0;
2423	}
2424	}
2425	}
2426
2427	.single-product {
2428	.entry {
2429	.entry-content,
2430	.entry-summary {
2431	max-width: none;
2432	margin: 0 0 3rem;
2433	padding: 0;
2434
2435	> * {
2436	max-width: none;
2437	}
2438	}
2439	}
2440	}
2441
2442	.woocommerce-breadcrumb {
2443	margin-bottom: 5rem;
2444	font-size: 0.88889em;
2445	font-family: $headings;
2446	}
2447
2448	.woocommerce-product-gallery {
2449	margin-bottom: 8rem;
2450	}
2451
2452	.woocommerce-checkout {
2453	#main {
2454	.woocommerce {
2455	max-width: 1600px;
2456	padding: 0 6vw;
2457	margin: 0 auto;
2458	}
2459	}
2460	}
2461	}
2462
2463	@media only screen and (min-width: 1168px) {
2464	.woocommerce {
2465	.content-area {
2466	max-width: 1600px;
2467	margin: 0 auto;
2468	padding: 0 6vw;
2469
2470	.site-main {
2471	}
2472	}
2473
2474	.onsale {
2475	font-size: 1.2rem;
2476	}
2477	}
2478
2479	.woocommerce-breadcrumb {
2480	margin-bottom: 5rem;
2481	font-size: 0.88889em;
2482	font-family: $headings;
2483	}
2484
2485	.woocommerce-product-gallery {
2486	margin-bottom: 8rem;
2487	}
2488
2489	.woocommerce-account {
2490	table.account-orders-table {
2491	th,
2492	td,
2493	td.woocommerce-orders-table__cell-order-actions {
2494	padding-right: 1.5rem;
2495	padding-left: 1.5rem;
2496	}
2497	}
2498	}
2499	}
2500
2501	@media only screen and (max-width: 768px) {
2502	.woocommerce-products-header {
2503	border-bottom: none !important;
2504	padding-bottom: 0;
2505	margin-bottom: 0 !important;
2506	}
2507	}
2508
2509	@media only screen and (min-width: 600px) {
2510	.woocommerce-products-header {
2511	padding-bottom: 1.5vw;
2512	}
2513
2514	.woocommerce-ordering,
2515	.woocommerce-result-count {
2516	margin-top: 0 !important;
2517	}
2518	}
2519
2520	@media only screen and (min-width: 690px) {
2521	.woocommerce-products-header {
2522	border-bottom: 3px solid var(--global--color-border);
2523	}
2524	}
2525
2526	.woocommerce-account {
2527	.woocommerce-MyAccount-content {
2528	p:first-of-type {
2529	margin-bottom: 2rem;
2530	}
2531
2532	#add_payment_method {
2533	ul {
2534	list-style-type: none !important;
2535	}
2536
2537	.woocommerce-PaymentMethod {
2538	margin-bottom: 1.5rem;
2539	}
2540	}
2541
2542	input[type="radio"]="radio""] {
2543	float: left;
2544	margin-top: 0.5rem;
2545	margin-right: 0.5rem;
2546	}
2547
2548	label {
2549	font-size: 1.5rem;
2550	display: flex;
2551	justify-content: flex-end;
2552
2553	img {
2554	margin-left: 10px !important;
2555	}
2556
2557	img:first-child {
2558	margin-left: auto !important;
2559	}
2560
2561	img:last-child {
2562	margin-right: 5px !important;
2563	}
2564	}
2565
2566	.woocommerce-PaymentBox {
2567	p,
2568	label {
2569	font-size: 1.3rem;
2570	}
2571
2572	p {
2573	margin-bottom: 1.5rem;
2574	}
2575
2576	br {
2577	display: none;
2578	}
2579
2580	.woocommerce_error {
2581	margin-top: 1rem;
2582	margin-bottom: 0;
2583	}
2584	}
2585	}
2586
2587	.woocommerce-MyAccount-navigation-link {
2588	margin-bottom: 20px !important;
2589
2590	a {
2591	color: $body-color !important;
2592	font-weight: 400 !important;
2593	font-size: 1.8rem;
2594
2595	&:hover {
2596	color: $body-color !important;
2597	text-decoration: underline solid $body-color 1px !important;
2598	}
2599	}
2600	}
2601	}
2602
2603	.alignwide .woocommerce {
2604	& > * {
2605	max-width: var(--responsive--alignwide-width);
2606	display: block;
2607	margin: var(--global--spacing-vertical) auto;
2608	}
2609	}
2610
2611	.woocommerce {
2612	.return-to-shop,
2613	.wc-proceed-to-checkout {
2614	a.button {
2615	margin-top: var(--global--spacing-vertical);
2616	float: left;
2617	display: inline-block;
2618	width: 100%;
2619	}
2620	}
2621
2622	.woocommerce-cart-form {
2623	text-align: center;
2624
2625	.shop_table_responsive {
2626	margin-top: var(--global--spacing-vertical);
2627	margin-bottom: var(--global--spacing-vertical);
2628
2629	th {
2630	border: none;
2631	}
2632
2633	input#coupon_code.input-text {
2634	min-width: 9rem;
2635	width: auto !important;
2636	}
2637	}
2638
2639	button[name="update_cart"]="update_cart""],
2640	button[name="apply_coupon"]="apply_coupon""] {
2641	padding: 0.5rem;
2642	color: var(--global--color-primary);
2643	background: var(--global--color-background);
2644	border: var(--form--border-width) solid var(--global--color-primary);
2645
2646	&:hover,
2647	&:active {
2648	color: var(--global--color-background);
2649	background: var(--global--color-primary);
2650	}
2651	}
2652
2653	.product-thumbnail {
2654	.attachment-woocommerce_thumbnail {
2655	height: auto !important;
2656	}
2657	}
2658
2659	input.qty {
2660	width: 6em;
2661	text-align: center;
2662	}
2663	}
2664
2665	.cart-collaterals {
2666	h2 {
2667	margin-bottom: var(--global--spacing-vertical);
2668	}
2669
2670	#shipping_method {
2671	list-style: none;
2672	padding-left: 0;
2673	}
2674
2675	.shipping-calculator-form {
2676	p {
2677	margin-bottom: 0.5rem;
2678	}
2679	}
2680
2681	.cross-sells {
2682	li {
2683	list-style: none;
2684	}
2685
2686	li > em,
2687	a {
2688	display: inline-block;
2689	}
2690	}
2691	}
2692	}
2693
2694	/**
2695	* Downloads
2696	*/
2697
2698	.woocommerce-order-downloads {
2699	padding-top: 0 !important;
2700
2701	table,
2702	tr {
2703	border-style: hidden;
2704
2705	td.download-remaining {
2706	text-align: center !important;
2707	}
2708	}
2709
2710	tr:nth-child(2n) {
2711	td {
2712	background: transparent !important;
2713	}
2714	}
2715
2716	tr:nth-child(2n + 1) {
2717	td {
2718	background: var(--global--color-background);
2719	filter: brightness(88%);
2720
2721	.is-dark-theme & {
2722	filter: brightness(112%);
2723	}
2724	}
2725	}
2726
2727	td.download-file {
2728	padding-right: 0.5rem;
2729	padding-left: 0.5rem;
2730	padding-top: 0.3rem;
2731	padding-bottom: 0.3rem;
2732
2733	a {
2734	width: 100%;
2735	padding-top: 0.3rem !important;
2736	padding-bottom: 0.3rem !important;
2737	margin-top: 0.5rem !important;
2738	margin-bottom: 0.5rem !important;
2739
2740	@include inversebuttoncolors();
2741	}
2742	}
2743	}
2744
2745	.woocommerce-message,
2746	.woocommerce-error li,
2747	.woocommerce-info {
2748	padding: 1.5rem 3rem;
2749	display: flex;
2750	justify-content: space-between;
2751	align-items: center;
2752
2753	.button {
2754	order: 2;
2755	}
2756	}
2757
2758	@media only screen and (max-width: 768px) {
2759	.woocommerce-message,
2760	.woocommerce-error li,
2761	.woocommerce-info {
2762	padding: 1rem 1.5rem;
2763
2764	a.button {
2765	margin-left: 10px;
2766	min-width: 100px;
2767	padding: calc(0.7 * var(--button--padding-vertical))
2768	calc(0.5 * var(--button--padding-horizontal));
2769	}
2770	}
2771	}
2772
2773	.woocommerce-info {
2774	border-top-color: var(--wc-blue);
2775	}
2776
2777	.woocommerce-error {
2778	border-top-color: #b22222;
2779
2780	> li {
2781	margin: 0;
2782	}
2783	}
2784
2785	.woocommerce-store-notice {
2786	background: #eee;
2787	color: #000;
2788	border-top: 2px solid $highlights-color;
2789	padding: 2rem;
2790	position: absolute;
2791	top: 0;
2792	left: 0;
2793	width: 100%;
2794	z-index: 999;
2795	}
2796
2797	.admin-bar .woocommerce-store-notice {
2798	top: 32px;
2799	}
2800
2801	.woocommerce-store-notice__dismiss-link {
2802	float: right;
2803	color: #000;
2804
2805	&:hover {
2806	text-decoration: none;
2807	color: #000;
2808	}
2809	}
2810
2811	/**
2812	* Coupon error notice
2813	*/
2814	.woocommerce-cart {
2815	td.actions .coupon .coupon-error-notice {
2816	@include coupon-error-notice-cart();
2817	}
2818	}
2819
2820	form.checkout_coupon {
2821	.coupon-error-notice {
2822	@include coupon-error-notice-checkout();
2823	}
2824
2825	.input-text.has-error:focus {
2826	border-color: var(--wc-red);
2827	}
2828	}
2829
2830	/**
2831	* Checkout error message
2832	*/
2833	.checkout {
2834	.checkout-inline-error-message {
2835	@include checkout-inline-error-message();
2836	}
2837	}
2838