@media (min-aspect-ratio: 161803/100000) {
	header {
		_background-color: red !important;
	}
	.sheet-main-productdetail {
		grid-template-columns: 38.2% 61.8%;
		grid-template-rows: minmax(0,1fr) min-content min-content 52px 52px minmax(0,2fr);
		grid-template-areas:
		"image ."
		"image name"
		"image price"
		"image action"
		"image ."
		"image description";
		_max-height: var(--vh100);
	}
	.sheet-main-productdetail::after {
		background-image: var(--url-noise),radial-gradient(circle at 18% center,transparent 20%,#666 50%,#202020 100%);
	}
	.sheet-main-productdetail .card-exhibit-name {
		grid-area: name;
		top: 0;
		height: auto;
		align-items: flex-start;
		text-align: left;
	}
	.sheet-main-productdetail figure img {
		height: 100%;
	}
	.sheet-main-productdetail .price-tag {
		grid-area: price;
		position: relative;
		top: 0;
		height: auto;
		margin-top: var(--owl,1em);
		text-align: left;
	}
	.sheet-main-productdetail .card-action {
		margin-top: var(--owl,1em);
		padding: 0;
		justify-content: flex-start;
	}
	.sheet-main-productdetail .card-description:not(:empty) {
		display: block;
		padding: 0;
	}
}

@media (min-width: 420px) {
	.app-header {
		grid-template-columns: 0 0 minmax(0,1fr) 48px 0 0 40px 16px;
	}
	.app-bar-top-page .app-header {
		grid-template-columns: 48px minmax(0,1fr) 0 48px 0 0 40px 16px;
	}
	.app-bar-top-leaf .app-header {
		grid-template-columns: 48px minmax(0,1fr) 0 48px 0 0 0 16px;
	}
	.menu-overflow {
		right: 24px;
	}
}

@media (min-width: 640px) {
	.app-header {
		_grid-template-columns: 0 0 300px 70px minmax(0,1fr) 70px 70px;
	}
	.app-header .ui-button-back {
		_width: 70px;
		_height: 70px;
	}
	.app-header .ui-button-logo-fe {
		width: 0;
		height: 0;
	}
	.app-header .ui-button-logo-floristexpress {
		width: 100%;
		height: 100%;
		_padding: 0 16px;
		_clip: rect(0,150px,55px,0);
	}
}

@media (min-width: 860px) {
	html {
		_font-size: 150%;
	}
	textarea + label,
	input[type=text] + label,
	input[type=number] + label,
	input[type=tel] + label,
	input[type=date] + label,
	input[type=email] + label {
		top: 11px;
	}
	input[type="checkbox"],
	input[type="radio"] {
		vertical-align: text-bottom;
	}
	input[type="date"] {
		padding-top: 1px;
	}
	input[type="date"]::-webkit-calendar-picker-indicator {
		padding: 14px 8px 13px 110px;
	}
	.input-text-deliverytype label,
	.delivery-price {
		_padding-top: 0;
	}
	.app-header {
		grid-template-columns: 0 0 minmax(0,1fr) 70px 0 0 70px 16px;
		grid-template-rows: 70px;
		_padding: 0 8px;
	}
	.app-bar-top-page .app-header {
		grid-template-columns: 70px minmax(0,1fr) 0 70px 0 0 70px 16px;
	}
	.app-bar-top-leaf .app-header {
		grid-template-columns: 70px minmax(0,1fr) 0 70px 0 0 0 16px;
	}
	.app-header .ui-button {
		border-radius: 70px;
	}
	.app-header .app-search {
		padding: 0 20px;
	}
	.app-header .app-search .ui-button-search {
		width: 0;
		height: 0;
	}
	.app-header .app-search form {
		display: block;
		width: 100%;
	}
	.sheet-main-productdetail {
		height: calc(var(--vh100) - 70px);
	}
	.menu-overflow {
		top: 16px;
		right: 32px;
		max-height: calc(var(--vh100) - 32px);
	}
	.app nav ul li {
		flex-grow: 0;
	}
	.app nav ul li a {
		padding: 0 2.5rem;
		font-size: var(--ui-type-body1-font-size);
	}
	.app nav ul li a::after {
		right: 2rem;
		left: 2rem;
	}
	.tab-bar-indicator-position-0 .tab-bar-indicator {
		width: 64px;
		transform: translateX(39px);
	}
	.tab-bar-indicator-position-1 .tab-bar-indicator {
		width: 67px;
		transform: translateX(183px);
	}
	.tab-bar-indicator-position-2 .tab-bar-indicator {
		width: 33px;
		transform: translateX(330px);
	}
	.tab-bar-indicator-position-3 .tab-bar-indicator {
		width: 47px;
		transform: translateX(443px);
	}
	.app-main {
		_grid-template-columns: calc(100% - 320px) 320px;
		min-height: calc(100% - 70px);
	}
	.app-main article {
		__padding: 1rem 0;
	}
	.sheet-main-checkout,
	.sheet-main-about,
	.sheet-main-orderplaced,
	.sheet-main-faq,
	.sheet-main-delivery,
	.sheet-main-terms,
	.sheet-main-refund,
	.sheet-main-privacy {
		padding: 1rem 1rem 1rem 86px;
		width: 46rem;
	}
	.card-collection-header a {
		padding: .5rem 3rem .5rem 3rem;
	}
	.card-collection-header h2 {
		_margin-bottom: 0;
		_padding: .5rem 0 0 3rem;
		_font-size: 1.4rem;
	}
	.card-collection-header p {
		_padding: 1rem 0 .5rem 3rem;
		font-size: var(--ui-type-h7-font-size);
	}
	.card-product-list {
		/*
		grid-auto-columns: 218px;
		grid-template-rows: 350px;
		*/
		height: calc(320px + (288px / var(--card-ratio-178)));
		padding: 16px 0 16px 2.25rem;
		scroll-padding: 2.25rem;
	}
	.card-exhibition.grid .card-product-list {
		grid-template-columns: repeat(auto-fill,minmax(172px,1fr));
		gap: 16px;
		padding: 8px 2.25rem 8px 2.25rem;
	}
	.card-product {
		width: calc(178px + (178px / var(--card-ratio-178)));
		height: calc(288px + (288px / var(--card-ratio-178)));
		margin-right: 12px;
	}
	.card-exhibition.grid .card-product {
		padding-top: 161.803%;
	}
	.card-product::after {
		padding-top: 161.803%; /* 125% */
	}
	.card-product .product-name {
		top: 81%;
		font-size: var(--ui-type-body1-font-size);
	}
	.card-product figure {
		_height: 250px;
		height: auto;
		padding-top: 161.803%; /* 125% */
	}
	.card-product .product-subname {
		display: block;
	}
	.card-product .price-tag {
		bottom: 2px;
	}
	.input-text-recipientsuburb {
		--snip: 58px;
	}
	.input-text-recipientpostcode {
		--snip: 76px;
	}
	.input-text-recipientstreetaddressline1,
	.input-text-recipientstreetaddressline2 {
		--snip: 142px;
	}
	.input-text-yourname,
	.input-text-recipientname {
		--snip: 74px;
		--snip: 4.6rem;
	}
	.input-text-recipientphone {
		--snip: 106px;
	}
	.input-text-youremail {
		--snip: 50px;
	}
	.input-text-yourphone {
		--snip: 54px;
	}
	.input-textarea-cardmessage {
		--snip: 98px;
	}
	.input-text-deliverydate {
		--snip: 90px;
	}
	.input-textarea-deliveryinstructions {
		--snip: 128px;
	}
	.input-text-couponcode {
		--snip: 92px;
	}
	/*
	.sheet-main-productdetail {
		width: 320px;
		padding: 12px;
		box-shadow: 0 0 40px 20px #0009;
		opacity: 1;
		pointer-events: none;
	}
	*/
}

@media (min-width: 1100px) {
	.app-header {
		grid-template-columns: 0 0 330px 200px minmax(0,1fr) /*240px*/0 70px 16px;
	}
	.app-bar-top-page .app-header {
		grid-template-columns: 70px minmax(420px,1.5fr) 70px 200px minmax(0,1fr) /*240px*/0 70px 16px;
	}
	.app-bar-top-leaf .app-header {
		grid-template-columns: 70px minmax(420px,1.5fr) 70px 200px minmax(0,1fr) /*240px*/0 0 16px;
	}
	.app-bar-top-page .app-header .ui-button-logo-fe,
	.app-bar-top-leaf .app-header .ui-button-logo-fe {
		width: 100%;
		height: 100%;
	}
	.app-bar-top-page .app-header .ui-button-logo-floristexpress,
	.app-bar-top-leaf .app-header .ui-button-logo-floristexpress {
		width: 0;
		height: 0;
	}
	.app-header .ui-button-phone div {
		width: auto;
		margin-left: .5rem;
	}
	.app-header .ui-button-account div {
		display: -webkit-box;
		width: auto;
		margin-left: .5rem;
		white-space: pre-wrap;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}