twenty-nineteen.scss — WooCommerce 10.9.4

woocommerce / assets / css / twenty-nineteen.scss

woocommerce / assets / css Last commit date

twenty-nineteen.scss

1392 lines

1	@import "mixins";
2
3	/**
4	* Sass variables
5	*/
6
7	$headings: -apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen,ubuntu,cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
8	$body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", garamond, "Times New Roman", serif;
9
10	$body-color: #111;
11	$highlights-color: #0073aa;
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-all;
31	color: #fff;
32	text-decoration: none !important;
33
34	&:hover,
35	&:visited {
36	color: #fff;
37	}
38	}
39
40	body {
41	--wc-form-border-color: #ccc;
42	--wc-form-border-radius: 0;
43	}
44
45	.woocommerce-breadcrumb {
46	margin-bottom: 3rem;
47	font-size: 0.88889em;
48	font-family: $headings;
49	}
50
51	.woocommerce-pagination {
52	font-family: $headings;
53	font-size: 0.88889em;
54
55	ul.page-numbers {
56	margin: 0;
57	padding: 0;
58	display: block;
59	font-weight: 700;
60	letter-spacing: -0.02em;
61	line-height: 1.2;
62	}
63
64	span.page-numbers,
65	a.page-numbers,
66	.next.page-numbers,
67	.prev.page-numbers {
68	padding: 0 calc(0.5 * 1rem);
69	display: inline-block;
70	}
71	}
72
73	.onsale {
74	left: 0;
75	background: $highlights-color;
76	color: #fff;
77	display: inline-block;
78	font-family: $headings;
79	font-size: 0.71111em;
80	font-weight: 700;
81	letter-spacing: -0.02em;
82	line-height: 1.2;
83	padding: 0.5rem;
84	position: absolute;
85	text-transform: uppercase;
86	top: 0;
87	z-index: 1;
88	}
89
90	.price {
91	font-family: $headings;
92
93	del {
94	opacity: 0.7;
95	display: inline-block;
96	}
97
98	ins {
99	display: inline-block;
100	}
101	}
102
103	/**
104	* Tables
105	*/
106	.woocommerce,
107	.woocommerce-page {
108	table.shop_table {
109	td,
110	th {
111	word-break: normal;
112	}
113	}
114	}
115
116	/**
117	* Shop page
118	*/
119	.woocommerce-products-header__title.page-title {
120	font-size: 1.6875em;
121	font-weight: 700;
122	font-family: $headings;
123	}
124
125	.woocommerce-result-count {
126	margin: 0;
127	padding: 0.75rem 0;
128	}
129
130	.woocommerce-ordering > label {
131	margin-right: 0.25rem;
132	}
133
134	/**
135	* Products
136	*/
137	ul.products {
138	margin: 0;
139	padding: 0;
140
141	li.product {
142	list-style: none;
143
144	.woocommerce-loop-product__link {
145	display: block;
146	}
147
148	.woocommerce-loop-product__title {
149	margin: 0.8rem 0;
150	font-size: 0.88889em;
151
152	&::before {
153	content: none;
154	}
155	}
156
157	.woocommerce-loop-product__title,
158	.price,
159	.star-rating {
160	color: $body-color;
161	}
162
163	.star-rating {
164	margin-bottom: 0.8rem;
165	}
166
167	.price {
168	margin-bottom: 1.3rem;
169	}
170
171	.price,
172	.star-rating {
173	display: block;
174	font-size: 0.88889em;
175	}
176
177	.woocommerce-placeholder {
178	border: 1px solid #f2f2f2;
179	}
180
181	.button {
182	vertical-align: middle;
183
184	&.loading {
185	opacity: 0.5;
186	}
187	}
188
189	.added_to_cart {
190	margin-left: 0.5rem;
191	font-size: 0.88889em;
192	font-family: $headings;
193	}
194	}
195	}
196
197	.star-rating {
198	overflow: hidden;
199	position: relative;
200	height: 1em;
201	line-height: 1;
202	font-size: 1em;
203	width: 5.4em;
204	font-family: WooCommerce;
205
206	&::before {
207	content: "\73\73\73\73\73";
208	float: left;
209	top: 0;
210	left: 0;
211	position: absolute;
212	}
213
214	span {
215	overflow: hidden;
216	float: left;
217	top: 0;
218	left: 0;
219	position: absolute;
220	padding-top: 1.5em;
221	}
222
223	span::before {
224	content: "\53\53\53\53\53";
225	top: 0;
226	position: absolute;
227	left: 0;
228	}
229	}
230
231	a.remove {
232	display: inline-block;
233	width: 20px;
234	height: 20px;
235	line-height: 17px;
236	font-size: 20px;
237	font-weight: 700;
238	text-align: center;
239	border-radius: 100%;
240	text-decoration: none !important;
241	background: firebrick;
242	color: #fff;
243
244	&:hover {
245	background: #000;
246	color: #fff !important;
247	}
248	}
249
250	dl.variation,
251	.wc-item-meta {
252	list-style: none outside;
253
254	dt,
255	.wc-item-meta-label {
256	float: left;
257	clear: both;
258	margin-right: 0.25rem;
259	list-style: none outside;
260	}
261
262	dd {
263	margin: 0;
264	}
265
266	p,
267	&:last-child {
268	margin-bottom: 0;
269	}
270	}
271
272	/**
273	* Single product
274	*/
275	.single-product {
276	div.product {
277	position: relative;
278	}
279
280	.single-featured-image-header {
281	display: none;
282	}
283
284	.entry {
285	.entry-title {
286	margin-top: 0;
287
288	&::before {
289	margin-top: 0;
290	}
291	}
292	}
293
294	.summary {
295	p.price {
296	margin-bottom: 2rem;
297	}
298	}
299
300	.woocommerce-product-rating {
301	margin-bottom: 2rem;
302	line-height: 1;
303
304	.star-rating {
305	float: left;
306	margin-right: 0.25rem;
307	}
308	}
309
310	form.cart {
311	.quantity {
312	float: left;
313	margin-right: 0.5rem;
314	}
315
316	input {
317	width: 5em;
318	}
319	}
320
321	.woocommerce-variation-add-to-cart {
322	.button {
323	padding-top: 0.72rem;
324	padding-bottom: 0.72rem;
325	}
326
327	.button.disabled {
328	opacity: 0.2;
329	}
330	}
331	}
332
333	table.variations {
334	label {
335	margin: 0;
336	}
337
338	select {
339	margin-right: 0.5rem;
340	}
341	}
342
343	.woocommerce-product-gallery {
344	position: relative;
345	margin-bottom: 3rem;
346
347	figure {
348	margin: 0;
349	padding: 0;
350	}
351
352	.woocommerce-product-gallery__wrapper {
353	margin: 0;
354	padding: 0;
355	}
356
357	.zoomImg {
358	background-color: #fff;
359	opacity: 0;
360	}
361
362	.woocommerce-product-gallery__image--placeholder {
363	border: 1px solid #f2f2f2;
364	}
365
366	.woocommerce-product-gallery__image:nth-child(n + 2) {
367	width: 25%;
368	display: inline-block;
369	}
370
371	.woocommerce-product-gallery__image a {
372	display: block;
373	}
374
375	.woocommerce-product-gallery__image a:focus img {
376	outline: thin dotted;
377	outline-offset: -1px;
378	}
379
380	.flex-control-thumbs {
381	li {
382	list-style: none;
383	cursor: pointer;
384	float: left;
385	}
386
387	img {
388	opacity: 0.5;
389
390	&:hover,
391	&.flex-active {
392	opacity: 1;
393	}
394	}
395	}
396
397	img {
398	display: block;
399	height: auto;
400	}
401	}
402
403	.woocommerce-product-gallery--columns-3 {
404	.flex-control-thumbs li {
405	width: 33.3333%;
406	}
407
408	.flex-control-thumbs li:nth-child(3n + 1) {
409	clear: left;
410	}
411	}
412
413	.woocommerce-product-gallery--columns-4 {
414	.flex-control-thumbs li {
415	width: 25%;
416	}
417
418	.flex-control-thumbs li:nth-child(4n + 1) {
419	clear: left;
420	}
421	}
422
423	.woocommerce-product-gallery--columns-5 {
424	.flex-control-thumbs li {
425	width: 20%;
426	}
427
428	.flex-control-thumbs li:nth-child(5n + 1) {
429	clear: left;
430	}
431	}
432
433	.woocommerce-product-gallery__trigger {
434	@include woocommerce-product-gallery__trigger;
435	}
436
437	.woocommerce-tabs {
438	margin: 0 0 2rem;
439
440	ul {
441	margin: 0 0 1.5rem;
442	padding: 0;
443	font-family: $headings;
444
445	li {
446	margin-right: 1rem;
447
448	a {
449	color: $body-color;
450	text-decoration: none;
451	font-weight: 700;
452	}
453
454	&.active {
455	a {
456	color: $highlights-color;
457	box-shadow: 0 2px 0 $highlights-color;
458	}
459	}
460	}
461	}
462
463	.panel {
464	> * {
465	margin-top: 0 !important;
466	}
467
468	h1,
469	h2 {
470	&::before {
471	content: none;
472	}
473	}
474
475	h2:first-of-type {
476	font-size: 1em;
477	margin: 0 0 1rem;
478	}
479	}
480
481	#comments {
482	padding-top: 0;
483	}
484
485	.comment-reply-title {
486	font-family: $headings;
487	font-size: 1em;
488	font-weight: 700;
489	margin: 0 0 0.75rem;
490	display: block;
491	}
492
493	#reviews {
494	ol.commentlist {
495	padding: 0;
496	}
497
498	li.review,
499	li.comment {
500	list-style: none;
501	margin-right: 0;
502	margin-bottom: 2.5rem;
503
504	.avatar {
505	max-height: 36px;
506	width: auto;
507	float: right;
508	}
509
510	p.meta {
511	margin-bottom: 0.5em;
512	}
513	}
514
515	p.stars {
516	margin-top: 0;
517
518	a {
519	position: relative;
520	height: 1em;
521	width: 1em;
522	text-indent: -999em;
523	display: inline-block;
524	text-decoration: none;
525	box-shadow: none;
526	font-size: 24px;
527
528	&::before {
529	display: block;
530	position: absolute;
531	top: 0;
532	left: 0;
533	width: 1em;
534	height: 1em;
535	line-height: 1;
536	font-family: WooCommerce;
537	content: "\e021";
538	text-indent: 0;
539	}
540
541	&:hover {
542	~ a::before {
543	content: "\e021";
544	}
545	}
546	}
547
548	&:hover {
549	a {
550	&::before {
551	content: "\e020";
552	}
553	}
554	}
555
556	&.selected {
557	a.active {
558	&::before {
559	content: "\e020";
560	}
561
562	~ a::before {
563	content: "\e021";
564	}
565	}
566
567	a:not(.active) {
568	&::before {
569	content: "\e020";
570	}
571	}
572	}
573	}
574	}
575	}
576
577	/**
578	* Widgets
579	*/
580	.widget.woocommerce {
581	ul {
582	padding-left: 0;
583
584	li {
585	list-style: none;
586	}
587	}
588	}
589
590	.widget .product_list_widget,
591	.site-footer .widget .product_list_widget {
592	margin-bottom: 1.5rem;
593
594	a {
595	display: block;
596	box-shadow: none;
597
598	&:hover {
599	box-shadow: none;
600	}
601	}
602
603	li {
604	padding: 0.5rem 0;
605
606	a.remove {
607	float: left;
608	margin-top: 7px;
609	line-height: 20px;
610	color: #fff;
611	margin-right: 0.5rem;
612	}
613	}
614
615	img {
616	display: none;
617	}
618	}
619
620	.widget_shopping_cart {
621	.buttons {
622	a {
623	display: inline-block;
624	margin: 0 0.5rem 0 0;
625	}
626	}
627	}
628
629	.widget_layered_nav {
630	.chosen {
631	&::before {
632	content: "×";
633	display: inline-block;
634	width: 16px;
635	height: 16px;
636	line-height: 16px;
637	font-size: 16px;
638	text-align: center;
639	border-radius: 100%;
640	border: 1px solid black;
641	margin-right: 0.25rem;
642	}
643	}
644	}
645
646	.widget_price_filter {
647	.price_slider {
648	margin-bottom: 1rem;
649	}
650
651	.price_slider_amount {
652	text-align: right;
653	line-height: 2.4;
654	font-size: 0.8751em;
655
656	.button {
657	float: left;
658	padding: 0.4rem 1rem;
659	}
660	}
661
662	.ui-slider {
663	position: relative;
664	text-align: left;
665	margin-left: 0.5rem;
666	margin-right: 0.5rem;
667	}
668
669	.ui-slider .ui-slider-handle {
670	position: absolute;
671	z-index: 2;
672	width: 1em;
673	height: 1em;
674	background-color: #000;
675	border-radius: 1em;
676	cursor: ew-resize;
677	outline: none;
678	top: -0.3em;
679	margin-left: -0.5em;
680	}
681
682	.ui-slider .ui-slider-range {
683	position: absolute;
684	z-index: 1;
685	font-size: 0.7em;
686	display: block;
687	border: 0;
688	border-radius: 1em;
689	background-color: #000;
690	}
691
692	.price_slider_wrapper .ui-widget-content {
693	border-radius: 1em;
694	background-color: #666;
695	border: 0;
696	}
697
698	.ui-slider-horizontal {
699	height: 0.5em;
700	}
701
702	.ui-slider-horizontal .ui-slider-range {
703	top: 0;
704	height: 100%;
705	}
706
707	.ui-slider-horizontal .ui-slider-range-min {
708	left: -1px;
709	}
710
711	.ui-slider-horizontal .ui-slider-range-max {
712	right: -1px;
713	}
714	}
715
716	.widget_rating_filter {
717	li {
718	text-align: right;
719
720	.star-rating {
721	float: left;
722	margin-top: 0.3rem;
723	}
724	}
725	}
726
727	.widget_product_search {
728	form {
729	position: relative;
730	}
731
732	.search-field {
733	padding-right: 100px;
734	}
735
736	input[type="submit"]="submit""] {
737	position: absolute;
738	top: 0.5rem;
739	right: 0.5rem;
740	padding-left: 1rem;
741	padding-right: 1rem;
742	}
743	}
744
745	/**
746	* Account section
747	*/
748	.woocommerce-account {
749	.woocommerce-MyAccount-navigation {
750	font-family: $headings;
751	margin: 0 0 2rem;
752
753	ul {
754	margin: 0;
755	padding: 0;
756	}
757
758	li {
759	list-style: none;
760	padding: 0.5rem 0;
761	border-bottom: 1px solid #ccc;
762
763	&:first-child {
764	padding-top: 0;
765	}
766
767	a {
768	box-shadow: none;
769	text-decoration: none;
770	font-weight: 600;
771
772	&:hover {
773	color: #005177;
774	text-decoration: underline;
775	}
776	}
777
778	&.is-active {
779	a {
780	text-decoration: underline;
781	}
782	}
783	}
784	}
785
786	table.account-orders-table {
787	.button {
788	margin: 0 0.35rem 0.35rem 0;
789	}
790	}
791	}
792
793	/**
794	* Cart
795	*/
796	.woocommerce-cart-form {
797	img {
798	max-width: 42px;
799	height: auto;
800	display: block;
801	}
802
803	dl.variation {
804	margin-top: 0;
805
806	p,
807	&:last-child {
808	margin-bottom: 0;
809	}
810	}
811
812	.product-remove {
813	text-align: center;
814	}
815
816	.actions {
817	.input-text {
818	width: 200px !important;
819	float: left;
820	margin-right: 0.25rem;
821	}
822	}
823
824	.quantity {
825	input {
826	width: 4rem;
827	}
828	}
829	}
830
831	.cart_totals {
832	th,
833	td {
834	vertical-align: top;
835	}
836
837	th {
838	padding-right: 1rem;
839	}
840
841	.woocommerce-shipping-destination {
842	margin-bottom: 0;
843	}
844	}
845
846	.shipping-calculator-button {
847	margin-top: 0.5rem;
848	display: inline-block;
849	}
850
851	.shipping-calculator-form {
852	margin: 1rem 0 0 0;
853	}
854
855	#shipping_method {
856	list-style: none;
857	margin: 0;
858	padding: 0;
859
860	li {
861	margin-bottom: 0.5rem;
862
863	input {
864	float: left;
865	margin-top: 0.17rem;
866	}
867
868	label {
869	line-height: 1.5rem;
870	}
871	}
872	}
873
874	.checkout-button {
875	display: block;
876	padding: 1rem 2rem;
877	border: 2px solid #000;
878	text-align: center;
879	font-weight: 800;
880
881	&:hover {
882	border-color: #999;
883	}
884
885	&::after {
886	content: "→";
887	margin-left: 0.5rem;
888	}
889	}
890
891	.is-large.wc-block-cart .wc-block-cart__totals-title::before {
892	content: none;
893	}
894
895	/**
896	* Checkout
897	*/
898	#ship-to-different-address {
899	font-size: 1em;
900	display: inline-block;
901	margin: 1.42em 0;
902
903	label {
904	font-weight: 300;
905	cursor: pointer;
906
907	span {
908	position: relative;
909	display: block;
910	text-align: right;
911	padding-right: 45px;
912
913	&::before {
914	content: "";
915	display: block;
916	height: 16px;
917	width: 30px;
918	border: 2px solid #bbb;
919	background: #bbb;
920	border-radius: 13rem;
921	box-sizing: content-box;
922	transition: all ease-in-out 0.3s;
923	position: absolute;
924	top: 4px;
925	right: 0;
926	}
927
928	&::after {
929	content: "";
930	display: block;
931	width: 14px;
932	height: 14px;
933	background: white;
934	position: absolute;
935	top: 7px;
936	right: 17px;
937	border-radius: 13rem;
938	transition: all ease-in-out 0.3s;
939	}
940	}
941
942	input[type="checkbox"]="checkbox""] {
943	display: none;
944	}
945
946	input[type="checkbox"]="checkbox""]:checked + span::after {
947	right: 3px;
948	}
949
950	input[type="checkbox"]="checkbox""]:checked + span::before {
951	border-color: #000;
952	background: #000;
953	}
954	}
955	}
956
957	.woocommerce-no-js {
958	form.woocommerce-form-login,
959	form.woocommerce-form-coupon {
960	display: block !important;
961	}
962
963	.woocommerce-form-login-toggle,
964	.woocommerce-form-coupon-toggle,
965	.showcoupon {
966	display: none !important;
967	}
968	}
969
970	.woocommerce-terms-and-conditions {
971	border: 1px solid rgba(0, 0, 0, 0.2);
972	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
973	background: rgba(0, 0, 0, 0.05);
974	}
975
976	.woocommerce-terms-and-conditions-link {
977	display: inline-block;
978
979	&::after {
980	content: "";
981	display: inline-block;
982	border-style: solid;
983	margin-bottom: 2px;
984	margin-left: 0.25rem;
985	border-width: 6px 6px 0 6px;
986	border-color: $body-color transparent transparent transparent;
987	}
988
989	&.woocommerce-terms-and-conditions-link--open::after {
990	border-width: 0 6px 6px 6px;
991	border-color: transparent transparent $body-color transparent;
992	}
993	}
994
995	.woocommerce-checkout {
996	.woocommerce-input-wrapper {
997	.description {
998	background: royalblue;
999	color: #fff;
1000	border-radius: 3px;
1001	padding: 1rem;
1002	margin: 0.5rem 0 0;
1003	clear: both;
1004	display: none;
1005	position: relative;
1006
1007	a {
1008	color: #fff;
1009	text-decoration: underline;
1010	border: 0;
1011	box-shadow: none;
1012	}
1013
1014	&::before {
1015	left: 50%;
1016	top: 0%;
1017	margin-top: -4px;
1018	transform: translateX(-50%) rotate(180deg);
1019	content: "";
1020	position: absolute;
1021	border-width: 4px 6px 0 6px;
1022	border-style: solid;
1023	border-color: royalblue transparent transparent transparent;
1024	z-index: 100;
1025	display: block;
1026	}
1027	}
1028	}
1029	}
1030
1031	.woocommerce-checkout-review-order-table {
1032	td {
1033	padding: 1rem 0.5rem;
1034	}
1035
1036	dl.variation {
1037	margin: 0;
1038
1039	p {
1040	margin: 0;
1041	}
1042	}
1043	}
1044
1045	.woocommerce-checkout-review-order {
1046	ul {
1047	margin: 2rem 0 1rem;
1048	padding-left: 0;
1049	}
1050	}
1051
1052	.wc_payment_method {
1053	list-style: none;
1054
1055	.payment_box {
1056	padding: 1rem;
1057	background: #eee;
1058
1059	ul,
1060	ol {
1061	&:last-of-type {
1062	margin-bottom: 0;
1063	}
1064	}
1065
1066	fieldset {
1067	padding: 1.5rem;
1068	padding-bottom: 0;
1069	border: 0;
1070	background: #f6f6f6;
1071	}
1072
1073	li {
1074	list-style: none;
1075	}
1076
1077	p {
1078	&:first-child {
1079	margin-top: 0;
1080	}
1081
1082	&:last-child {
1083	margin-bottom: 0;
1084	}
1085	}
1086	}
1087
1088	> label:first-of-type {
1089	display: block;
1090	margin: 1rem 0;
1091
1092	img {
1093	max-height: 24px;
1094	max-width: 200px;
1095	float: right;
1096	}
1097	}
1098
1099	label {
1100	cursor: pointer;
1101	}
1102
1103	input.input-radio[name="payment_method"]="payment_method""] {
1104	display: none;
1105
1106	& + label {
1107	&::before {
1108	content: "";
1109	display: inline-block;
1110	width: 16px;
1111	height: 16px;
1112	border: 2px solid white;
1113	box-shadow: 0 0 0 2px black;
1114	background: white;
1115	margin-left: 4px;
1116	margin-right: 0.5rem;
1117	border-radius: 100%;
1118	transform: translateY(2px);
1119	}
1120	}
1121
1122	&:checked + label {
1123	&::before {
1124	background: black;
1125	}
1126	}
1127	}
1128	}
1129
1130	.woocommerce-order-overview {
1131	margin-bottom: 2rem;
1132	}
1133
1134	.woocommerce-table--order-details {
1135	margin-bottom: 2rem;
1136	}
1137
1138	/**
1139	* Layout stuff
1140	*/
1141	.woocommerce {
1142	.content-area {
1143	.site-main {
1144	margin: calc(2 * 1rem) 1rem;
1145	}
1146	}
1147	}
1148
1149	@media only screen and (max-width: 768px) {
1150	.woocommerce,
1151	.woocommerce-page {
1152	table.shop_table_responsive {
1153	tr {
1154	margin: 0 0 1.5rem;
1155
1156	&:first-child {
1157	border-top: 1px solid;
1158	}
1159
1160	&:last-child {
1161	margin-bottom: 0;
1162	}
1163
1164	td {
1165	border-bottom-width: 0;
1166
1167	&:last-child {
1168	border-bottom-width: 1px;
1169	}
1170	}
1171	}
1172	}
1173	}
1174	}
1175
1176	@media only screen and (min-width: 768px) {
1177	/**
1178	* Tables
1179	*/
1180	.woocommerce,
1181	.woocommerce-page {
1182	table.shop_table {
1183	tbody {
1184	tr {
1185	font-size: 0.88889em;
1186	}
1187	}
1188	}
1189	}
1190
1191	/**
1192	* Shop page
1193	*/
1194	.woocommerce-products-header__title.page-title {
1195	font-size: 2.25em;
1196	}
1197
1198	.woocommerce-pagination {
1199	span.page-numbers,
1200	a.page-numbers,
1201	.next.page-numbers,
1202	.prev.page-numbers {
1203	padding: 1rem;
1204	}
1205	}
1206
1207	/**
1208	* Account section
1209	*/
1210	.woocommerce-account {
1211	.woocommerce-MyAccount-navigation {
1212	float: none;
1213	width: 100%;
1214	margin-bottom: 1.5rem;
1215
1216	li {
1217	display: inline-block;
1218	margin: 0 1rem 0 0;
1219	padding: 0;
1220	border-bottom: 0;
1221
1222	&:last-child {
1223	margin-right: 0;
1224	}
1225	}
1226	}
1227
1228	.woocommerce-MyAccount-content {
1229	float: none;
1230	width: 100%;
1231	}
1232	}
1233
1234	/**
1235	* Checkout
1236	*/
1237	#ship-to-different-address {
1238	display: block;
1239	}
1240
1241	/**
1242	* Layout stuff
1243	*/
1244	.woocommerce {
1245	.content-area {
1246	margin: 0 calc(10% + 60px);
1247
1248	.site-main {
1249	margin: 0;
1250	max-width: calc(8 * (100vw / 12) - 28px);
1251	}
1252	}
1253	}
1254
1255	.single-product {
1256	.entry {
1257	.entry-content,
1258	.entry-summary {
1259	max-width: none;
1260	margin: 0 0 3rem;
1261	padding: 0;
1262
1263	> * {
1264	max-width: none;
1265	}
1266	}
1267	}
1268	}
1269	}
1270
1271	@media only screen and (min-width: 1168px) {
1272	.woocommerce {
1273	.content-area {
1274	.site-main {
1275	max-width: calc(6 * (100vw / 12) - 28px);
1276	}
1277	}
1278	}
1279	}
1280
1281	.woocommerce-message,
1282	.woocommerce-error,
1283	.woocommerce-info {
1284	margin-bottom: 1.5rem;
1285	padding: 1rem;
1286	background: #eee;
1287	font-size: 0.88889em;
1288	font-family: $headings;
1289	list-style: none;
1290	overflow: hidden;
1291	}
1292
1293	.woocommerce-message {
1294	background: #eee;
1295	color: $body-color;
1296	}
1297
1298	.woocommerce-error,
1299	.woocommerce-info {
1300	color: #fff;
1301
1302	a {
1303	color: #fff;
1304
1305	&:hover {
1306	color: #fff;
1307	}
1308
1309	&.button {
1310	background: #111;
1311	}
1312	}
1313	}
1314
1315	.woocommerce-error {
1316	background: firebrick;
1317	}
1318
1319	.woocommerce-info {
1320	background: $highlights-color;
1321	}
1322
1323	.woocommerce-store-notice {
1324	background: $highlights-color;
1325	color: #fff;
1326	padding: 1rem;
1327	position: absolute;
1328	top: 0;
1329	left: 0;
1330	width: 100%;
1331	z-index: 999;
1332	}
1333
1334	.admin-bar .woocommerce-store-notice {
1335	top: 32px;
1336	}
1337
1338	.woocommerce-store-notice__dismiss-link {
1339	float: right;
1340	color: #fff;
1341
1342	&:hover {
1343	text-decoration: underline;
1344	color: #fff;
1345	}
1346	}
1347
1348	/**
1349	* Coupon error notice
1350	*/
1351	.woocommerce-cart {
1352	td.actions .coupon .coupon-error-notice {
1353	@include coupon-error-notice-cart();
1354	}
1355	}
1356
1357	form.checkout_coupon {
1358	.coupon-error-notice {
1359	@include coupon-error-notice-checkout();
1360	}
1361
1362	.input-text.has-error:focus {
1363	border-color: var(--wc-red);
1364	}
1365	}
1366
1367	/**
1368	* Checkout error message
1369	*/
1370	.woocommerce-checkout {
1371	form .form-row.woocommerce-invalid input.input-text {
1372	border-color: var(--wc-red);
1373	}
1374
1375	.checkout-inline-error-message {
1376	@include checkout-inline-error-message();
1377	}
1378	}
1379
1380	/**
1381	* Log in form
1382	*/
1383	.woocommerce-page {
1384	form {
1385	.password-input {
1386	input[type="text"]="text""] {
1387	padding-right: 2.5rem;
1388	}
1389	}
1390	}
1391	}
1392