@import '../../../../itrocks/framework/skins/default/responsive.scss';

@media screen and (max-width: $phone-max-width) {

	body {
		display: block;
		overflow: initial;

		> #categories,
		> #quick-menu {
			display: none;
		}

		> #title-bar {

			> .business-hours,
			> .contact,
			> .phone-number {
				display: none;
			}

			> .mini.cart {

				> p,
				> h3 {
					display: none;
				}
			}
		}

		> main > article {

			> header {

				> .breadcrumb > .account {
					display: none !important;
				}

				.sort,
				.summary {
					display: none;
				}
			}

			.total.amount {
				display: none;
			}
		}
	}

	#title-bar {
		display: grid;
		grid-template-areas: "search cart user";
		grid-template-columns: 1fr auto auto;

		> .mini.cart {
			grid-area: cart;
		}

		> .mini.user {
			grid-area: user;
			position: initial;
		}

		> .search {
			grid-area: search;
			position: relative;

			> input {
				width: calc(100% - 64px);
			}
		}
	}

	.company.logo > a {
		background-position: 32px 0 !important;
		border: none !important;

		&:after {
			border: none !important;
			display: none !important;
		}
	}

	body.min-left .company.logo > a {
		background: white url("img/olympique-cycles.jpg") center -2px no-repeat;
		background-size: auto 100%;
	}

	nav#menu {
		border: none;
	}

	article {

		.general.actions {
			bottom: 0;
			position: absolute;
			width: 100%;
		}
	}
}