twenty-twenty.scss — WooCommerce 11.1.0

woocommerce / assets / css / twenty-twenty.scss

woocommerce / assets / css Last commit date

twenty-twenty.scss

2380 lines

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