twenty-twenty-three.scss — WooCommerce 8.5.0-beta.1

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

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

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