/* Message */
.woocommerce-message {
    padding: 1em;
    text-align: center;
    background: #4BB543;
    outline: 0 none;
}

.woocommerce-message .button.wc-forward {
    font-weight: 700;
}

.woocommerce-message {
    position: fixed;
    top: var(--header-height);
    width: 100%;
    z-index: 2;
}

/* Product */
.woocommerce div.product {
	display: grid;
	grid-template-columns: var(--grid-margin) repeat(12, 1fr) var(--grid-margin);
	grid-column-gap: var(--grid-gap);
	margin: var(--m-medium) 0;
}

.woocommerce div.product .woocommerce-product-gallery {
	grid-area: 1/3/1/span 6;
	opacity: 1 !important;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: var(--grid-gap);
	width: 100%;
	position: sticky;
	height: 100%;
}

.woocommerce div.product .woocommerce-product-gallery .default-slider-pagination {
	grid-area: 1/1/1/1;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: var(--m-30);
	position: sticky !important;
	top: calc(var(--header-height) + 16px);
}

.woocommerce div.product .woocommerce-product-gallery .default-slider {
	grid-area: 1/2/1/span 5;
	height: auto !important;
	aspect-ratio: 946/1000;
	position: sticky !important;
	top: calc(var(--header-height) + 16px);
	width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    aspect-ratio: 946/1000;
    width: 100%;
}

.woocommerce div.product div.images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.woocommerce div.product div.summary {
	grid-area: 1/10/1/span 3;
	width: 100%;
    display: flex;
    flex-direction: column;
}

.woocommerce div.product div.summary .woocommerce-variation-add-to-cart,
.woocommerce div.product div.summary form.cart {
    order: 2;
}

.woocommerce .type-product .wcpay-express-checkout-wrapper,
.wp-block-add-to-cart-form .wcpay-express-checkout-wrapper
.wc-proceed-to-checkout .wcpay-express-checkout-wrapper {
    order: 3;
}

.woocommerce div.product div.summary .ppc-button-wrapper {
    order: 4;
}

.woocommerce div.product div.summary #payment-method-message {
    order: 4;
}

.woocommerce div.product div.summary .woocommerce-product-details__short-description {
	margin-bottom: var(--m-50);
	line-height: 1.4;
}

.woocommerce div.product div.summary div:not(.wapf-swatch) > label,
.woocommerce div.product div.summary label[for="quantity"],
.woocommerce div.product div.summary label[for="price"] {
	font-family: "Montserrat";
	font-size: var(--fs-20);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: uppercase;
}

.woocommerce div.product div.summary label[for="price"] {
    display: block;
    margin-top: var(--m-50);
}

.woocommerce div.product div.summary .amount {
    font-family: "Chonburi";
    font-size: var(--fs-25);
    font-weight: 400;
}

.woocommerce div.product div.summary .wapf-image-swatch-wrapper label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--grid-gap);
}

.woocommerce div.product div.summary .wapf-field-group {
	gap: var(--m-50);
	margin: var(--m-30) 0 var(--m-50);
}

.woocommerce div.product div.summary .wapf-wrapper {
    margin: 0;
}

.woocommerce div.product div.summary .wapf-field-container {
    padding: 0;
}

.woocommerce div.product div.summary .wapf-field-color-swatch .wapf-swatch-wrapper {
    flex-direction: column;
}

.woocommerce div.product div.summary .wapf-field-color-swatch .wapf-swatch-wrapper .wapf-swatch--color > label {
    display: flex;
    align-items: center;
    gap: var(--grid-gap);
}

.woocommerce div.product div.summary .wapf-field-color-swatch .wapf-swatch-wrapper .wapf-swatch--color > label .wapf-color {
    margin: 0;
}

.woocommerce div.product div.summary .wapf img {
	max-width: 100%;
	height: auto;
}

.wapf-field-container.product-grid .wapf-swatch label {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
}

.woocommerce div.product div.summary .wapf .wapf-swatch--image.apf-pick-box {
	padding: 16px 6px 12px;
}

.woocommerce div.product div.summary .wapf .wapf-swatch--image .wapf-swatch-label {
	text-align: center;
	padding: 4px;
	hyphens: auto;
	text-wrap: balance;
	text-align: center;
}

.woocommerce div.product div.summary .wapf select {
	text-transform: none;
	letter-spacing: 0;
    background: url("../img/arrow-down.svg") calc(100% - .7em) center no-repeat;
    background-size: auto 30%;
}

.woocommerce div.product div.summary .wapf-image-swatch-wrapper img {
	aspect-ratio: 54/30;
	width: max(48px, 3.75vw);
    object-fit: contain;
}

.woocommerce div.product form.cart .variations {
    display: flex;
    flex-direction: column;
    gap: var(--m-50);
}

.woocommerce div.product form.cart .variations .variation-wrapper {
    display: flex;
    flex-direction: column;
    gap: max(12px, .625vw);
}

.woocommerce div.product form.cart .variations select {
	font-family: "DM Sans";
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	padding: max(12px, 0.625vw) max(16px, .78125vw);
    width: 100%;
}

.woocommerce div.product form.cart .reset_variations {
	margin-top: 1em;
	display: block;
}

.woocommerce div.product form.cart .single_variation_wrap {
    display: flex;
    flex-direction: column;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    margin-top: var(--m-30);
}

.woocommerce div.product form.cart .quantity .qty {
    width: 100%;
    text-align: left;
    padding: max(12px, 0.625vw) max(16px, .78125vw);
    line-height: 1.25;
    font-family: "DM Sans";
    margin-top: max(12px, .625vw);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
    grid-area: 2/3/2/span 10;
    margin-top: var(--m-medium);
}

.woocommerce div.product .woocommerce-tabs .tabs {
    display: flex;
    gap: var(--grid-gap);
}

.woocommerce div.product .woocommerce-tabs .tabs a {
    display: flex;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: space-between;
    gap: max(12px, 0.78125vw);
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-family: "DM Sans";
    font-size: var(--fs-20);
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1.25;
    color: currentColor;
    background: transparent;
    padding: max(5px, 0.2734375vw) max(12px, 22px);
    border: 2px solid currentColor;
    z-index: 1;
    transition: var(--def-trans);
}

.woocommerce div.product .woocommerce-tabs .tabs a::after {
    content: "";
    display: block;
    height: 0%;
    width: 100%;
    background: var(--black);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: var(--def-trans);
}

.woocommerce div.product .woocommerce-tabs .tabs .active a {
    color: var(--white);
    border-color: var(--black);
}

.woocommerce div.product .woocommerce-tabs .tabs .active a::after {
    height: 100%;
}

.woocommerce div.product .woocommerce-tabs .panel {
    margin-top: var(--m-50);
}

.woocommerce-product-attributes {
    vertical-align: top;
    text-align: left;
}

.woocommerce-product-attributes tr td, .woocommerce-product-attributes tr th {
    padding: 10px 20px;
    vertical-align: top;
}

.woocommerce-product-attributes tr td p {
    margin: 0;
}

.woocommerce-product-attributes tr td, .woocommerce-product-attributes tr th {
    line-height: 1.5;
    border: 2px solid currentColor;
}

.woocommerce-product-attributes {
    margin-top: var(--m-30);
    border-collapse: collapse;
}

/* Related */
.woocommerce .related.products {
	grid-area: 3/1/3/span 14;
	padding: var(--m-medium) 0;
    display: grid;
    grid-template-columns: var(--grid-margin) repeat(12, 1fr) var(--grid-margin);
    grid-column-gap: var(--grid-gap);
}

.woocommerce .related.products .headline {
    grid-area: 1/3/1/span 10;
}

.woocommerce .related.products .related-products-nav {
	grid-area: 1/8/1/span 5;
}

.woocommerce .related.products .related-products-container {
    grid-area: 2/3/2/span 10;
    margin-top: var(--m-50);
	margin-right: calc(var(--grid-gap) * -1);
}

.woocommerce .related.products .related-products-container .product {
	margin-right: var(--grid-gap);
    text-align: center;
}

.woocommerce .related.products .related-products-container .product .product-title {
    margin-top: var(--m-30);
}

.woocommerce .related.products .related-products-container .product .product-price {
    margin-top: .75em;
}

.woocommerce .related.products .related-products-container .product .product-img {
    aspect-ratio: 1/1;
    width: 100%;
}

.woocommerce .related.products .related-products-container .product .product-img .tag-customizable {
    top: max(12px, 0.78125vw);
    right: max(12px, 0.78125vw);
	font-family: "Montserrat";
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
	padding: .25em 1em;
	background: var(--black);
	color: var(--white);
	border-radius: 100vmin;
}

@media (max-width: 1199.98px) {
    .woocommerce div.product div.images {
        grid-area: 1/2/1/span 6;
    }

    .woocommerce div.product div.summary {
        grid-area: 1/9/1/span 5;
    }
}

@media (max-width: 767.98px) {
    .woocommerce div.product div.images {
        grid-area: 1/3/1/span 10;
    }
    .woocommerce div.product div.summary {
        grid-area: 2/3/2/span 10;
        margin-top: var(--m-small);
    }

    .woocommerce div.product .woocommerce-tabs {
        grid-area: 3/3/3/span 10;
    }
}

@media (max-width: 575.98px) {
    .woocommerce div.product div.images {
        grid-area: 1/2/1/span 12;
    }
    .woocommerce div.product div.summary {
        grid-area: 2/2/2/span 12;
    }

    .woocommerce div.product .woocommerce-tabs {
        grid-area: 3/2/3/span 12;
    }

    .woocommerce .related.products .headline {
        grid-area: 1/2/1/span 12;
    }

    .woocommerce .related.products .related-products-container {
        grid-area: 2/2/2/span 12;
    }

    .woocommerce .related.products .related-products-nav {
        grid-area: 3/2/3/span 12;
        justify-self: center;
        margin-top: var(--m-small);
    }
}