twenty-twenty-two.scss — WooCommerce 7.7.0-rc.1

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

woocommerce / assets / css Last commit date

twenty-twenty-two.scss

1232 lines

1	/**
2	* Fonts
3	*/
4	@font-face {
5	font-family: star;
6	src: url(../fonts/star.eot);
7	src:
8	url(../fonts/star.eot?#iefix) format("embedded-opentype"),
9	url(../fonts/star.woff) format("woff"),
10	url(../fonts/star.ttf) format("truetype"),
11	url(../fonts/star.svg#star) format("svg");
12	font-weight: 400;
13	font-style: normal;
14	}
15
16	@font-face {
17	font-family: WooCommerce;
18	src: url(../fonts/WooCommerce.eot);
19	src:
20	url(../fonts/WooCommerce.eot?#iefix) format("embedded-opentype"),
21	url(../fonts/WooCommerce.woff) format("woff"),
22	url(../fonts/WooCommerce.ttf) format("truetype"),
23	url(../fonts/WooCommerce.svg#WooCommerce) format("svg");
24	font-weight: 400;
25	font-style: normal;
26	}
27
28	@import "mixins";
29	@import "animation";
30	@import "variables";
31
32	$tt2-gray: #f7f7f7;
33
34	/**
35	* Main layout.
36	*/
37
38	.woocommerce-page {
39
40	h1.wp-block-post-title {
41	font-size: var(--wp--preset--font-size--huge);
42	}
43
44	h2 {
45	font-size: var(--wp--preset--font-size--large);
46	}
47
48	main {
49	.woocommerce {
50	@include clearfix();
51	max-width: 1000px;
52	}
53	}
54	}
55
56	.woocommerce {
57
58	// Common
59	.woocommerce-products-header {
60	h1.page-title {
61	font-family: var(--wp--preset--font-family--source-serif-pro);
62	font-size: var(--wp--custom--typography--font-size--gigantic);
63	font-weight: 300;
64	line-height: var(--wp--custom--typography--line-height--tiny);
65	margin-bottom: var(--wp--custom--spacing--medium);
66	}
67	}
68
69	span.onsale {
70	top: -1rem;
71	right: -1rem;
72	position: absolute;
73	background: var(--wp--preset--color--secondary);
74	color: inherit;
75	border-radius: 2rem;
76	line-height: 2.6rem;
77	font-size: 0.8rem;
78	padding: 0 0.5rem 0 0.5rem;
79	}
80
81	.quantity {
82	input[type="number"]="number""] {
83	width: 3em;
84	}
85
86	input[type="number"]="number""]::-webkit-inner-spin-button,
87	input[type="number"]="number""]::-webkit-outer-spin-button {
88	opacity: 1;
89	}
90	}
91
92	&.woocommerce-shop .woocommerce-breadcrumb {
93	display: none;
94	}
95
96	.woocommerce-breadcrumb {
97	margin-bottom: 1rem;
98	}
99
100	.woocommerce-NoticeGroup-checkout {
101	ul.woocommerce-error[role="alert"]="alert""] {
102	&::before {
103	display: none;
104	}
105	li {
106	display: inherit;
107	margin-bottom: 1rem;
108	}
109	}
110	}
111
112	a.button,
113	button[name="add-to-cart"]="add-to-cart""],
114	input[name="submit"]="submit""],
115	button.single_add_to_cart_button,
116	button[type="submit"]="submit""]:not(.wp-block-search__button) {
117	display: inline-block;
118	text-align: center;
119	word-break: break-word;
120	background-color: var(--wp--preset--color--primary);
121	color: #fff;
122	border: 1px solid var(--wp--preset--color--black);
123	padding: 1rem 2rem;
124	margin-top: 1rem;
125	text-decoration: none;
126	font-size: medium;
127	cursor: pointer;
128
129	&:hover,
130	&:visited {
131	color: var(--wp--preset--color--white);
132	text-decoration: underline;
133	}
134	}
135
136	// Moved from blocktheme.css to make sure TT2 won't be changed.
137	#respond input#submit,
138	input.button {
139	// Style primary WooCommerce CTAs in theme colors by default.
140	background-color: var(--wp--preset--color--foreground, $primary);
141	color: var(--wp--preset--color--background, $primarytext);
142
143	&:hover {
144	background-color: var(--wp--preset--color--foreground, $primary);
145	color: var(--wp--preset--color--background, $primarytext);
146	}
147
148	&.disabled,
149	&:disabled,
150	&:disabled[disabled]],
151	&.disabled:hover,
152	&:disabled:hover,
153	&:disabled[disabled]]:hover {
154	background-color: var(--wp--preset--color--foreground, $primary);
155	color: var(--wp--preset--color--background, $primarytext);
156	}
157	}
158
159	#respond input#submit.alt,
160	a.button.alt,
161	button.button.alt,
162	input.button.alt {
163	background-color: var(--wp--preset--color--primary);
164	color: #fff;
165
166	&:hover {
167	background-color: var(--wp--preset--color--primary);
168	color: #fff;
169	opacity: 1;
170	}
171
172	&.disabled,
173	&:disabled,
174	&:disabled[disabled]],
175	&.disabled:hover,
176	&:disabled:hover,
177	&:disabled[disabled]]:hover {
178	background-color: var(--wp--preset--color--primary);
179	color: #fff;
180	opacity: 0.5;
181	cursor: not-allowed;
182	}
183	}
184
185	button.woocommerce-form-login__submit,
186	button.single_add_to_cart_button,
187	a.checkout-button {
188	font-size: 18px;
189	padding: 1.5rem 3.5rem;
190	}
191
192	// Moved from blockthemes.css to make sure TT2 won't be changed.
193	button.button,
194	a.button {
195	background-color: var(--wp--preset--color--foreground, $primary);
196	color: var(--wp--preset--color--background, $primarytext);
197
198	&.disabled,
199	&:disabled,
200	&:disabled[disabled]],
201	&.disabled:hover,
202	&:disabled:hover,
203	&:disabled[disabled]]:hover {
204	background-color: var(--wp--preset--color--foreground, $primary);
205	color: var(--wp--preset--color--background, $primarytext);
206	}
207	}
208
209	// Shop page
210
211	.woocommerce-result-count {
212	margin-top: 0;
213	font-size: 0.9rem;
214	}
215
216	.woocommerce-ordering {
217	margin-top: -0.2rem;
218	margin-bottom: 3rem;
219
220	select {
221	padding: 0.2rem 0 0.2rem 0.5rem;
222	}
223	}
224
225	// Products.
226	ul.products {
227
228	padding-inline-start: 0;
229
230	li.product {
231	list-style: none;
232	margin-top: var(--wp--style--block-gap);
233	text-align: center;
234
235	a.woocommerce-loop-product__link {
236	text-decoration: none;
237	display: block;
238	}
239
240	h2.woocommerce-loop-product__title {
241	color: var(--wp--preset--color--primary);
242	font-family: var(--wp--preset--font-family--system-font);
243	text-decoration: none;
244	margin-bottom: 0;
245	}
246
247	a.add_to_cart_button {
248	padding: 0.8rem 2.7rem;
249
250	&.loading {
251	opacity: 0.5;
252	}
253	}
254
255	}
256	}
257
258	ul.page-numbers {
259	text-align: center;
260	}
261
262	div.product {
263	position: relative;
264
265	> span.onsale {
266	position: absolute;
267	left: -1rem;
268	top: -1rem;
269	width: 1.8rem;
270	z-index: 1;
271	}
272
273	div.woocommerce-product-gallery {
274	position: relative;
275
276	a.woocommerce-product-gallery__trigger {
277	position: absolute;
278	top: 1rem;
279	right: 1rem;
280	z-index: 1;
281	text-decoration: none;
282	border-radius: 1rem;
283	border-style: solid;
284	line-height: 1.5rem;
285	padding: 0;
286	font-size: 0.6rem;
287	background: var(--wp--preset--color--white);
288	border-color: var(--wp--preset--color--white);
289	height: 1.5rem;
290	width: 1.5rem;
291	overflow: hidden;
292
293	&::before {
294	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" width="24" height="24"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" /></svg>');
295	display: block;
296	transform: rotateY(180deg);
297	margin-left: 1.55rem;
298	}
299	}
300
301	figure.woocommerce-product-gallery__wrapper {
302	margin: 0;
303	}
304
305	}
306
307	div.summary {
308	font-size: 1rem;
309
310	h1.product_title {
311	font-size: 2.5rem;
312	margin: 0;
313	}
314
315	figure.woocommerce-product-gallery__wrapper {
316	margin: 0;
317	}
318
319	.woocommerce-product-rating {
320	.star-rating {
321	display: inline-block;
322	}
323	.woocommerce-review-link {
324	display: inline-block;
325	overflow: hidden;
326	position: relative;
327	top: -0.5em;
328	font-size: 1em;
329	}
330	}
331	}
332
333	form.cart button[name="add-to-cart"]="add-to-cart""],
334	form.cart button.single_add_to_cart_button {
335	display: block;
336	margin-top: 0.5rem;
337	margin-bottom: var(--wp--style--block-gap);
338	}
339
340	ol.flex-control-thumbs {
341	padding-left: 0;
342	float: left;
343
344	li {
345	list-style: none;
346	cursor: pointer;
347	float: left;
348	width: 18%;
349	margin-right: 1rem;
350	}
351
352	}
353
354	a.reset_variations {
355	margin-left: 0.5em;
356	}
357
358	table.group_table {
359	td {
360	padding-right: 0.5rem;
361	padding-bottom: 1rem;
362	}
363
364	margin-bottom: var(--wp--style--block-gap);
365	}
366
367	.related.products {
368	margin-top: 7rem;
369	}
370	}
371
372	.woocommerce-Reviews {
373	ol.commentlist {
374	list-style: none;
375	padding-left: 0;
376
377	img.avatar {
378	float: left;
379	}
380
381	p.meta {
382	font-size: 1rem;
383	}
384
385	.comment-text {
386	display: inline-block;
387	padding-left: var(--wp--style--block-gap);
388
389	.star-rating {
390	margin-top: 0;
391	margin-right: unset;
392	margin-left: unset;
393	}
394	}
395	}
396
397	.comment-form-rating {
398	label {
399	display: inline-block;
400	padding-right: var(--wp--style--block-gap);
401	padding-top: var(--wp--style--block-gap);
402	}
403
404	p.stars {
405	display: inline;
406	a::before {
407	color: var(--wp--preset--color--secondary);
408	}
409	}
410	}
411
412	.comment-form-comment {
413	label {
414	float: left;
415	padding-right: var(--wp--style--block-gap);
416	}
417	}
418
419	#review_form_wrapper {
420	margin-top: 5rem;
421	}
422	}
423
424
425	.star-rating {
426	overflow: hidden;
427	position: relative;
428	height: 1em;
429	line-height: 1;
430	width: 5.4rem;
431	font-family: star;
432	color: var(--wp--preset--color--secondary);
433	margin: 1rem auto 0.7rem auto;
434
435	&::before {
436	content: "\73\73\73\73\73";
437	float: left;
438	top: 0;
439	left: 0;
440	position: absolute;
441	font-size: 1rem;
442	}
443
444	span {
445	overflow: hidden;
446	float: left;
447	top: 0;
448	left: 0;
449	position: absolute;
450	padding-top: 1.5em;
451	}
452
453	span::before {
454	content: "\53\53\53\53\53";
455	top: 0;
456	position: absolute;
457	left: 0;
458	font-size: 1rem;
459	}
460	}
461
462	p.stars {
463	margin-top: 0;
464
465	a {
466	position: relative;
467	height: 1em;
468	width: 1em;
469	text-indent: -999em;
470	display: inline-block;
471	text-decoration: none;
472	box-shadow: none;
473
474	&::before {
475	display: block;
476	position: absolute;
477	top: 0;
478	left: 0;
479	width: 1em;
480	height: 1em;
481	line-height: 1;
482	font-family: WooCommerce;
483	content: "\e021";
484	text-indent: 0;
485	}
486
487	&:hover {
488
489	~ a::before {
490	content: "\e021";
491	}
492	}
493	}
494
495	&:hover {
496
497	a {
498
499	&::before {
500	content: "\e020";
501	}
502	}
503	}
504
505	&.selected {
506
507	a.active {
508
509	&::before {
510	content: "\e020";
511	}
512
513	~ a::before {
514	content: "\e021";
515	}
516	}
517
518	a:not(.active) {
519
520	&::before {
521	content: "\e020";
522	}
523	}
524	}
525	}
526
527	.woocommerce-product-gallery__trigger {
528	position: absolute;
529	top: 1rem;
530	right: 1rem;
531	z-index: 99;
532	}
533
534	.return-to-shop {
535	a.button {
536	background-color: #fff;
537	color: var(--wp--preset--color--primary);
538	border: 2px solid var(--wp--preset--color--primary);
539	padding: 0.7rem 2rem;
540	}
541	}
542
543	mark {
544	background: var(--wp--preset--color--secondary);
545	color: initial;
546	}
547	}
548
549	// Description/Additional info/Reviews tabs.
550	.woocommerce-tabs {
551	padding-top: var(--wp--style--block-gap);
552	}
553
554	ul.wc-tabs {
555	padding: 0;
556	border-bottom-style: solid;
557	border-bottom-width: 1px;
558	border-bottom-color: #eae9eb;
559
560	li {
561	background: #eae9eb;
562	margin: 0;
563	padding: 0.5em 1em 0.5em 1em;
564	border-color: #eae9eb;
565	border-top-left-radius: 5px;
566	border-top-right-radius: 5px;
567	float: left;
568	border-style: solid;
569	border-width: 1px;
570	border-left-color: var(--wp--preset--color--background);
571	font-weight: 600;
572	font-size: var(--wp--preset--font-size--medium);
573
574	&:first-child {
575	border-left-color: #eae9eb;
576	margin-left: 1em;
577	}
578
579	&.active {
580	// Style active tab in theme colors.
581	background: var(--wp--preset--color--background, $contentbg);
582	border-bottom-color: var(--wp--preset--color--background, $contentbg);
583	box-shadow: 0 1px var(--wp--preset--color--background);
584	}
585
586	a {
587	text-decoration: none;
588	}
589	}
590	}
591
592	.woocommerce-Tabs-panel {
593	padding-top: var(--wp--style--block-gap);
594	font-size: var(--wp--preset--font-size--small);
595	margin-left: 1em;
596
597	// Hide repeated heading.
598	h2:first-of-type {
599	display: none;
600	}
601
602	// Attributes table styles.
603	table.woocommerce-product-attributes {
604	tbody {
605
606	td, th {
607	padding: 0.2rem 0.2rem 0.2rem 0;
608
609	p {
610	margin: 0;
611	}
612	}
613
614	th {
615	text-align: left;
616	padding-right: 1rem;
617	}
618	}
619	}
620	}
621
622	/**
623	* Form fields
624	*/
625	.woocommerce-page {
626
627	form {
628
629	.input-text {
630	border: 1px solid var(--wp--preset--color--black);
631	border-radius: 0;
632	}
633
634	abbr.required {
635	text-decoration: none;
636	}
637
638	ul {
639	margin-top: 0;
640	margin-bottom: 0;
641	list-style-type: none;
642	padding-left: 0;
643	}
644	}
645
646	input[type="radio"]="radio""][name="payment_method"]="payment_method""],
647	input[type="radio"]="radio""].shipping_method {
648	display: none;
649
650	& + label {
651
652	&::before {
653	content: "";
654	display: inline-block;
655	width: 1rem;
656	height: 1rem;
657	border: 2px solid var(--wp--preset--color--black);
658	background: var(--wp--preset--color--white);
659	margin-left: 4px;
660	margin-right: 1.2rem;
661	border-radius: 100%;
662	transform: translateY(0.2rem);
663	}
664	}
665
666	& ~ .payment_box {
667	padding-left: 3rem;
668	margin-top: 1rem;
669	}
670
671	&:checked + label {
672
673	&::before {
674	background: radial-gradient(circle at center, black 45%, white 0);
675	}
676	}
677	}
678
679	label.woocommerce-form__label-for-checkbox {
680	font-weight: normal;
681	cursor: pointer;
682
683	span {
684
685	&::before {
686	content: "";
687	display: inline-block;
688	height: 1rem;
689	width: 1rem;
690	border: 2px solid var(--wp--preset--color--black);
691	background: var(--wp--preset--color--white);
692	margin-right: 0.5rem;
693	transform: translateY(0.2rem);
694	}
695	}
696
697	input[type="checkbox"]="checkbox""] {
698	display: none;
699	}
700
701	input[type="checkbox"]="checkbox""]:checked + span::before {
702	background: var(--wp--preset--color--black);
703	box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
704	}
705	}
706
707	table.shop_table_responsive {
708	text-align: left;
709
710	th,
711	td {
712	font-size: var(--wp--preset--font-size--small);
713	font-weight: normal;
714	}
715
716	th {
717	padding-bottom: 1rem;
718	}
719
720	tbody {
721
722	tr {
723	border-top: 1px solid var(--wp--preset--color--black);
724	}
725
726	td {
727	a.button,
728	button {
729	margin-bottom: 1rem;
730	border: none;
731	background: #ebe9eb;
732	color: var(--wp--preset--color--black);
733	padding: 0.5rem 1rem 0.5rem 1rem;
734
735	&:hover,
736	&:visited {
737	color: var(--wp--preset--color--black);
738	}
739	}
740
741	&.woocommerce-orders-table__cell-order-actions {
742	a.button {
743	display: block;
744	}
745	}
746	}
747	}
748	}
749
750	table.shop_table,
751	table.shop_table_responsive {
752	tbody {
753	.product-name {
754	a:not(:hover) {
755	text-decoration: none;
756	}
757
758	a:hover {
759	text-decoration: underline;
760	text-decoration-thickness: 1px;
761	}
762
763	.variation {
764	dt {
765	font-style: italic;
766	margin-right: 0.25rem;
767	float: left;
768	}
769
770	dd {
771	font-style: normal;
772
773	a {
774	font-style: normal;
775	}
776	}
777	}
778	}
779	}
780	}
781
782	/*
783	* Cart / Checkout
784	*/
785	.woocommerce-cart-form {
786
787	#coupon_code,
788	.actions .button {
789	margin-right: 0;
790	}
791
792	table.shop_table_responsive {
793
794	td,
795	th {
796	padding: 1rem 0 0.5rem 1rem;
797	}
798
799	tbody {
800
801	tr:last-of-type {
802	border-top: none;
803	}
804
805	@media only screen and (max-width: 768px) {
806	td {
807	padding-left: 0;
808	}
809
810	.product-remove {
811	text-align: left !important;
812	}
813
814	#coupon_code {
815	float: left;
816	margin-bottom: 1rem;
817	}
818	}
819	}
820
821	button[name="apply_coupon"]="apply_coupon""],
822	button[name="update_cart"]="update_cart""] {
823	padding: 1rem 2rem;
824	border: 2px solid #ebe9eb;
825	margin: 0;
826	}
827
828	.product-remove {
829	font-size: var(--wp--preset--font-size--large);
830
831	a {
832	text-decoration: none;
833	}
834	}
835	}
836	}
837
838	.cart-collaterals {
839	margin-top: 1.5rem;
840
841	h2 {
842	text-transform: uppercase;
843	font-family: inherit;
844	}
845
846	table.shop_table_responsive {
847
848	tr {
849	border-top: none;
850	}
851
852	th {
853	width: 11rem;
854	}
855
856	td,
857	th {
858	padding: 1rem 0;
859	vertical-align: text-top;
860	}
861	}
862
863	button[name="calc_shipping"]="calc_shipping""] {
864	padding: 1rem 2rem;
865	}
866
867	.woocommerce-Price-amount {
868	font-weight: normal;
869	}
870	}
871
872	.woocommerce-checkout,
873	&.woocommerce-order-pay {
874	display: table;
875
876	h3 {
877	font-family: inherit;
878	font-size: var(--wp--preset--font-size--normal);
879	font-weight: 700;
880	}
881
882	.col2-set {
883	width: 43%;
884	float: right;
885	}
886
887	.blockUI.blockOverlay {
888	position: relative;
889	@include loader();
890	}
891
892	#customer_details {
893	width: 53%;
894	float: left;
895
896	.col-1,
897	.col-2 {
898	width: 100%;
899	float: none;
900	}
901	}
902
903	@media only screen and (max-width: 768px) {
904	.col2-set,
905	#customer_details {
906	width: 100%;
907	float: none;
908	}
909	}
910
911	.woocommerce-billing-fields__field-wrapper,
912	.woocommerce-checkout-review-order-table,
913	.woocommerce-checkout-payment,
914	#payment {
915	margin-top: 4rem;
916	}
917
918	.woocommerce-checkout-review-order-table,
919	#order_review .shop_table {
920	border-collapse: collapse;
921	width: 100%;
922
923	thead {
924	display: none;
925	}
926
927	th {
928	text-align: left;
929	font-weight: normal;
930	}
931
932	th,
933	td {
934	padding: 1rem 1rem 1rem 0;
935	vertical-align: text-top;
936	}
937
938	tbody {
939	border-bottom: 1px solid #d2ced2;
940	}
941
942	tr.order-total {
943	border-top: 1px solid #d2ced2;
944	}
945
946	.product-quantity {
947	font-weight: normal;
948	}
949
950	.product-total,
951	.cart-subtotal,
952	.order-total,
953	.tax-rate,
954	input[type="radio"]="radio""].shipping_method:checked + label,
955	input[type="hidden"]="hidden""].shipping_method + label {
956	.woocommerce-Price-amount {
957	font-weight: bold;
958	}
959	}
960	}
961
962	button#place_order {
963	width: 100%;
964	text-transform: uppercase;
965	}
966	}
967
968	form.checkout_coupon {
969	background: $tt2-gray;
970	padding-left: 1.5rem;
971	float: left;
972	// 1.5 rem is to account for extra padding we added above.
973	width: calc(100% - 1.5rem);
974
975	.form-row {
976	button[name="apply_coupon"]="apply_coupon""] {
977	margin-top: 0;
978	}
979	}
980	}
981
982	ul.wc_payment_methods,
983	ul.woocommerce-shipping-methods {
984	margin-top: 0;
985	margin-bottom: 0;
986	list-style-type: none;
987	padding-left: 0;
988
989	input[type="radio"]="radio""] {
990	margin-right: 0.6rem;
991	}
992
993	li.wc_payment_method {
994	margin-bottom: 1rem;
995	}
996	}
997
998	.woocommerce-thankyou-order-received {
999	margin-top: 0;
1000	}
1001
1002	.woocommerce-thankyou-order-received,
1003	h2.woocommerce-column__title {
1004	font-family: var(--wp--preset--font-family--source-serif-pro);
1005	}
1006
1007	.woocommerce-order > * {
1008	margin-bottom: var(--wp--style--block-gap);
1009	}
1010
1011	ul.woocommerce-order-overview {
1012
1013	li {
1014	display: inline;
1015	text-transform: uppercase;
1016
1017	strong {
1018	text-transform: none;
1019	display: block;
1020	}
1021	}
1022	}
1023
1024	.woocommerce-customer-details {
1025	address {
1026	border: 1px solid var(--wp--preset--color--black);
1027	font-style: inherit;
1028
1029	p[class^="woocommerce-customer-details--"]^="woocommerce-customer-details--""] {
1030	&:first-of-type {
1031	margin-top: 2rem;
1032	}
1033
1034	margin-top: 1rem;
1035	margin-bottom: 0;
1036	}
1037
1038	.woocommerce-customer-details--phone::before {
1039	content: "\01F4DE";
1040	margin-right: 1rem;
1041	}
1042
1043	.woocommerce-customer-details--email::before {
1044	content: "\2709";
1045	margin-right: 1rem;
1046	font-size: 1.8rem;
1047	}
1048	}
1049	}
1050
1051	.woocommerce-table--order-details {
1052	border: 1px solid var(--wp--preset--color--black);
1053
1054	th,
1055	td {
1056	text-align: left;
1057	border-top: 1px solid var(--wp--preset--color--black);
1058	border-bottom: 1px solid var(--wp--preset--color--black);
1059	font-weight: normal;
1060	}
1061
1062	thead th {
1063	text-transform: uppercase;
1064	}
1065	}
1066	}
1067
1068	.select2-container {
1069
1070	.select2-selection,
1071	.select2-dropdown {
1072	border: 1px solid var(--wp--preset--color--black);
1073	border-radius: 0;
1074	}
1075
1076	.select2-dropdown {
1077	border-top: 0;
1078
1079	.select2-search__field {
1080	border: 1px solid var(--wp--preset--color--black);
1081	border-radius: 0;
1082	}
1083	}
1084	}
1085
1086	/**
1087	* Account section
1088	*/
1089	.woocommerce-account {
1090
1091	.woocommerce-MyAccount-navigation {
1092
1093	li {
1094
1095	a {
1096	box-shadow: none;
1097	}
1098
1099	&.is-active {
1100
1101	a {
1102	color: var(--wp--preset--color--primary);
1103	}
1104	}
1105	}
1106	}
1107
1108	table.shop_table_responsive.my_account_orders th {
1109	padding-top: 0;
1110	}
1111
1112	.woocommerce-form-login {
1113	max-width: 516px;
1114	margin: 0 auto;
1115	}
1116	}
1117
1118	.wp-block-search {
1119	.wp-block-search__label {
1120	font-weight: normal;
1121	}
1122	.wp-block-search__input {
1123	padding: 0.9rem 1.1rem;
1124	border: 1px solid var(--wp--preset--color--black);
1125	}
1126	.wp-block-search__button {
1127	padding: 1rem 1.2rem;
1128	}
1129	}
1130
1131	.wc-block-product-search {
1132	form {
1133	.wc-block-product-search__fields {
1134	display: flex;
1135	flex: auto;
1136	flex-wrap: nowrap;
1137	max-width: 100%;
1138
1139	.wc-block-product-search__field {
1140	padding: 0.9rem 1.1rem;
1141	flex-grow: 1;
1142	border: 1px solid var(--wp--preset--color--black);
1143	font-size: inherit;
1144	font-family: inherit;
1145	}
1146
1147	.wc-block-product-search__button {
1148	display: flex;
1149	background-color: var(--wp--preset--color--primary);
1150	color: #fff;
1151	border: 1px solid var(--wp--preset--color--black);
1152	padding: 1rem 1.2rem;
1153	margin: 0 0 0 0.7rem;
1154	}
1155	}
1156	}
1157	}
1158
1159	.theme-twentytwentytwo .woocommerce-store-notice {
1160	color: var(--wp--preset--color--black);
1161	border-top: 2px solid var(--wp--preset--color--primary);
1162	background: $tt2-gray;
1163	padding: 2rem;
1164	position: fixed;
1165	bottom: 0;
1166	left: 0;
1167	width: 100%;
1168	z-index: 999;
1169	margin: 0;
1170
1171	.woocommerce-store-notice__dismiss-link {
1172	float: right;
1173	margin-right: 4rem;
1174	color: inherit;
1175	}
1176	}
1177
1178	.woocommerce-message,
1179	.woocommerce-error,
1180	.woocommerce-info {
1181	background: $tt2-gray;
1182	border-top-color: var(--wp--preset--color--primary);
1183	border-top-style: solid;
1184	padding: 1rem 1.5rem;
1185	margin-bottom: 2rem;
1186	list-style: none;
1187	font-size: var(--wp--preset--font-size--small);
1188
1189	&[role="alert"]="alert""]::before {
1190	color: var(--wp--preset--color--background);
1191	background: var(--wp--preset--color--primary);
1192	border-radius: 5rem;
1193	font-size: 1rem;
1194	padding-left: 3px;
1195	padding-right: 3px;
1196	margin-right: 1rem;
1197	}
1198
1199	a.button {
1200	margin-top: -0.5rem;
1201	border: none;
1202	background: #ebe9eb;
1203	color: var(--wp--preset--color--black);
1204	padding: 0.5rem 1rem;
1205
1206	&:hover,
1207	&:visited {
1208	color: var(--wp--preset--color--black);
1209	}
1210	}
1211	}
1212
1213	.woocommerce-error[role="alert"]="alert""] {
1214	margin: 0;
1215
1216	&::before {
1217	content: "X";
1218	padding-right: 4px;
1219	padding-left: 4px;
1220	}
1221
1222	li {
1223	display: inline-block;
1224	}
1225	}
1226
1227	.woocommerce-message {
1228	&[role="alert"]="alert""]::before {
1229	content: "\2713";
1230	}
1231	}
1232