Custom CSS For Hana's custom product template

CSS.css

@media (min-width: 981px) {
	body {
		--custom-height: 100vh;
		--menu-height: 68.5px;
		--buttons-wrapper-height: 35px;
	}
}

@media (max-width: 980px) {
	body {
		--custom-height: 100vh;
		--menu-height: 86px;
		--buttons-wrapper-height: 35px;
		--ihone-bottom-bar-height: 110px;
		--ipad-top-bar-height: 60px;
	}
}

/*Styling Woocommerce Specific Elements*/
.woocommerce .dt-add-to-cart form.variations_form.cart::before,
.woocommerce .dt-add-to-cart form.variations_form.cart::after,
.dt-add-to-cart form.cart .variations td.value span:after {
	display: none;
}

/*Create Grid layout for the Variation selection and Add To cart Button*/
.dt-add-to-cart form.variations_form.cart {
	display: grid;
	grid-template-columns: 50% 50%;
}

.dt-add-to-cart th.label,
.dt-add-to-cart a.reset_variations {
	display: none !important;
}

.woocommerce div.product .dt-add-to-cart form.cart .variations,
.woocommerce div.product .dt-add-to-cart form.cart .variations td:last-child {
	margin: 0;
	padding: 0 !important;
}

/*Customize the Variation's select option*/
.woocommerce div.product .dt-add-to-cart form.cart .variations td select {
	background-color: white;
	border: 2px solid black!important;
	text-align: center;
	border-radius: 0;
	display: grid;
	min-height: 34.5px;
	font-size: 17px;
	color: #333333 !important;
}

/*Safari doesn't allow text-align: center for <select>*/
/*Fix <select> text indentation for iPhone only*/
body.iphone.woocommerce div.product .dt-add-to-cart form.cart .variations td select {
	text-indent: 50px;
}

body #page-container .et_pb_section .dt-add-to-cart .button {
	line-height: 35px !important
}

body.iphone #page-container .et_pb_section .dt-add-to-cart .button {
	line-height: 36px !important
}

@media (min-width: 981px) {
	.dt-product-gallery-column {
		margin-top: calc(-1 * var(--menu-height));
	}
}

/*Tablets and Mobile Layout*/
@media (max-width: 980px) {

	.logged-in .dt-product-gallery,
	.logged-in .dt-product-gallery .et_pb_gallery_item,
	.logged-in .dt-product-gallery .et_pb_gallery_image,
	.logged-in .dt-product-gallery .et_pb_gallery_image img {
		min-height: calc(100vh - 32px - var(--buttons-wrapper-height));
	}

	.single-product .et-l.et-l--header>.et_builder_inner_content.product {
		z-index: 22;
	}

	.dt-product-gallery,
	.dt-product-gallery .et_pb_gallery_item,
	.dt-product-gallery .et_pb_gallery_image,
	.dt-product-gallery .et_pb_gallery_image img {
		min-height: calc(100vh - var(--buttons-wrapper-height));
	}

	/*iPhone*/
	body.iphone .dt-product-gallery,
	body.iphone .dt-product-gallery .et_pb_gallery_item,
	body.iphone .dt-product-gallery .et_pb_gallery_image,
	body.iphone .dt-product-gallery .et_pb_gallery_image img {
		min-height: calc(100vh - var(--buttons-wrapper-height) - var(--ihone-bottom-bar-height));
	}

	/*iPad*/
	body.et_mobile_device_not_ipad.uiwebview .dt-product-gallery,
	body.et_mobile_device_not_ipad.uiwebview .dt-product-gallery .et_pb_gallery_item,
	body.et_mobile_device_not_ipad.uiwebview .dt-product-gallery .et_pb_gallery_image,
	body.et_mobile_device_not_ipad.uiwebview .dt-product-gallery .et_pb_gallery_image img {
		min-height: calc(100vh - var(--buttons-wrapper-height) - var(--ipad-top-bar-height));
	}


	.dt-product-gallery .et_pb_gallery_image img {
		object-fit: cover;
	}

	.dt-product-gallery-column.et_pb_column.et_pb_column {
		margin-top: calc(-1 * var(--menu-height)) !important;
	}

	.dt-add-to-cart.et_pb_sticky.et_pb_sticky--bottom {
		width: 100% !important;
		left: 0 !important;
	}

	#main-footer {
		position: relative;
		z-index: 21;
	}

	body.iphone #main-footer {
		z-index: 20;
	}

	body.iphone .et-l.et-l--footer .et_builder_inner_content.product,
	body.et_mobile_device_not_ipad.uiwebview .et-l.et-l--footer .et_builder_inner_content.product {
		z-index: 21;
	}
}