@charset "utf-8";

/*-------------------------------------------*/
/*	Product common
/*-------------------------------------------*/
/*	Archive
/*-------------------------------------------*/
/*	single
/*-------------------------------------------*/
/*	cart
/*-------------------------------------------*/
/*	Account
/*-------------------------------------------*/
/*	.wc-block-grid__products
/*-------------------------------------------*/
/*	Layout confrict adjustment
/*-------------------------------------------*/

$price_color: #c00;
$price_color_delete: #555;
// fallback
$color-key-default: #337ab7;
$color-key-dark-default: #2e6da4;

:root {
	--color-woo-image-border: #e5e5e5;
	--text-color: #464646;
}

@mixin title_design_reset {
	position: relative;
	background-color: transparent;
	outline: unset;
	outline-offset: unset;
	box-shadow: unset;
	border: none;
	border-radius:unset;
	padding: 0;
	color: inherit;
	&::before,
	&::after {
		content: none;
	}
}

/*-------------------------------------------*/
/*	Form common
/*-------------------------------------------*/

.woocommerce {

	label {
		font-weight: normal;
	}

	input[type="text"],
	input[type="number"] {
		border: 1px solid #ced4da;
		border-radius: 0.25rem;
		padding: 0.375rem 0.8rem;
	}
}

.woocommerce-product-search {
	button[type="submit"] {
		background-color: var(--color-key, $color-key-default);
	}
}

/*-------------------------------------------*/
/*	Product common
/*-------------------------------------------*/

// .woocommerce-product-gallery__image,
// .size-woocommerce_thumbnail,
// .product_list_widget li img {
// 	border: 1px solid #e5e5e5;
// }

.woocommerce {
	span.onsale {
		background-color: $price_color;
	}
}

.product_list_widget,
.price {
	.woocommerce-Price-currencySymbol {
		font-weight: normal;
		font-size: 0.7em;
		margin-right: 0.2em;
	}

	del {
		text-decoration-color: $price_color_delete;

		.woocommerce-Price-amount {
			color: $price_color_delete;
			font-weight: normal;
			font-size: 12p;
			margin-right: 0.2em;
		}
	}

	ins {
		text-decoration: none;
		font-size: 1.25em;
	}
}

.woocommerce-Price-amount {
	color: $price_color;
	font-weight: 700;
}

/*
	Button
-------------------------------------------*/

.woocommerce {
	a.button.add_to_cart_button {
		color: #fff;
	}
}

.fa_v5_css {
	.wc-block-grid__product-add-to-cart .add_to_cart_button::after,
	.wp-block-product-category .wp-block-button__link::after,
	button.single_add_to_cart_button::after,
	a.button.add_to_cart_button::after {
		margin-left: 0.2em;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		font-family: "Font Awesome 5 Free";
		content: "\f218";
		font-weight: 900;
	}
}

.wp-block-product-category .wp-block-button__link {
	background-color: var(--color-key-dark, $color-key-dark-default);
}

.wp-block-product-category .wp-block-button__link:hover {
	text-decoration: none;
	background-color: var(--color-key, $color-key-default);
}

.wc-block-grid__product-add-to-cart .add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	color: #fff;
	background-color: var(--color-key-dark, $color-key-dark-default);
}

.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	color: #fff;
	background-color: var(--color-key, $color-key-default);
	text-decoration: none;
}

.wc-block-grid__product-add-to-cart .add_to_cart_button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	color: #fff;
	background-color: var(--color-key-dark, $color-key-dark-default);
}

.wc-block-grid__product-add-to-cart .add_to_cart_button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: #fff;
	background-color: var(--color-key, $color-key-default);
}

.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
	color: #fff;
}

.woocommerce #respond input#submit.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover {
	color: #fff;
	background-color: var(--color-key, $color-key-default);
}

.product,
div[class*="wp-block-product"] {
	.added_to_cart.wc-forward {
		display: block;
		overflow: hidden;
		position: relative;
		text-align: center;
		font-size: 12px;
		line-height: 1;
		top: 0.2rem;
		margin-bottom: 3px;
		border-radius: 3px;
		padding: 0.618em 1em;
		color: var(--text-color);
		border: 1px solid var(--text-color);

		&:hover {
			text-decoration: none;
			color: #fff;
			background-color: var(--color-key, #337ab7);
			border-color: var(--color-key-dark, #2e6da4);
		}
	}
}

/*-------------------------------------------*/
/*	Archive
/*-------------------------------------------*/
.woocommerce {
	ul.products[class*="columns-"] {
		li.product {
			.woocommerce-loop-category__title,
			.woocommerce-loop-product__title,
			h3 {
				border: none;
				background: none;
				padding: 0;
				color: #333;
			}

			.add_to_cart_button {
				box-sizing: border-box;
				width: 100%;
				font-size: 12px;
			}
		}
	}
}

@media (max-width: 768px) {
	.woocommerce {
		ul.products[class*="columns-"] {
			margin-left: -2%;
			margin-right: -2%;

			li.product {
				width: 46%;
				margin: 2%;
			}
		}
	}
}

// .woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget {
	display: flex;
	flex-wrap: wrap;

	li {
		width: 50%;
		box-sizing: border-box;
		padding: 0 10px 15px;

		@media (min-width: 576px) {
			padding: 0 15px 2em;
		}
		line-height: inherit;

		a {
			display: block;
			overflow: hidden;

			&:hover {
				text-decoration: none;

				img {
					border-color: #337ab7;
					border-color: var(--color-key, $color-key-default);
				}
			}
		}

		img {
			margin: 0 0 1em;
			float: none;
			width: 100%;
			height: auto;
			box-sizing: border-box;
		}
	}

	.product-title {
		display: block;
		font-weight: normal;
		color: #333;
		font-size: 14px;
	}
}

.mainSection {
	ul.product_list_widget {
		margin-left: -15px;
		margin-right: -15px;

		li {
			@media (min-width: 576px) {
				width: 33.3%;
			}

			@media (min-width: 992px) {
				width: 25%;
			}

			@media (min-width: 1200px) {
				width: 20%;
			}
		}
	}
	.media .alert{
		overflow: hidden;
	}
}
// for Subscription Product type
.woocommerce ul.products li.product-type-subscription {
	.price {
		// subscription-detailsの緑の文字が重なるので削除←こちらに伴い不要となったので削除
		// position: relative;
		// bottom: 0;
	}
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	border: none;

	li {
		margin: 0 5px;
		border: none;
	}
}

/*-------------------------------------------*/
/*	single
/*-------------------------------------------*/
.woocommerce {
	.entry-body {
		padding-top: 0;
	}
}

.single .entry-summary {
	.product_title.entry-title {
		font-size: 24px;
		margin-bottom: 1rem;
		border-bottom: 1px dotted #ccc;
		padding-bottom: 0.5rem;

		@media (min-width: 992px) {
			font-size: 28px;
		}
	}

	.price {
		line-height: 1;
		margin-bottom: 1rem;
	}

	ins {
		font-size: 1.5rem;
	}

	.quantity input,
	.single_add_to_cart_button {
		box-sizing: border-box;
		height: 3rem;
	}

	.quantity {
		width: 20%;
	}

	.quantity input {
		padding: 6px 10px 6px 6px;
		text-align: right;
		border-radius: 3px;
		border: 1px solid #ccc;
	}

	.single_add_to_cart_button {
		width: 78%;
	}

	.product_meta {
		font-size: 0.875rem;
	}
}

.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;

	li.product,
	li.products {
		padding-bottom: 35px;
		position: relative;
	}

	.woocommerce-loop-product__title {
		font-size: 14px;
		line-height: 1.5em;
		@include title_design_reset;
	}

	// subscription-detailsの緑の文字が重なるので削除
	// li.product-type-subscription .price,
	// .price {	
		// position: absolute;
		// bottom: 30px;
	// }

	.add_to_cart_button {
		text-align: center;
		position: absolute;
		bottom: 0;
		font-weight: lighter;
		font-size: 14px;
	}
}

button {
	/* Don't use! This property effect to default block editor UI */
}

.related.products {
	clear: both;
	padding-top: 3em;
}

.woocommerce-price-suffix {
	color: #333;
}

/*-------------------------------------------*/
/*	cart
/*-------------------------------------------*/
.woocommerce {
	table.shop_table {
		font-size: 14px;

		th {
			font-weight: normal;
		}

		th,
		td {
			border-bottom: none;
		}

		thead {
			th {
				background-color: #f5f5f5;
			}
		}

		.product-name {
			a {
				color: #333;
			}
		}

		.tax-rate {
			/* 「日本の消費税」表記 */
			small {
				white-space: nowrap;
			}
		}
		// td[data-title],
		td.product-price,
		td.product-subtotal,
		td.product-total,
		tr.tax-rate td,
		tr.cart-subtotal td,
		tr.order-total td,
		tfoot td {
			text-align: right;
		}

		tr.checkout_discount_headings {
			th {
				padding: 9px 12px !important;
			}
		}

		tr.order_table_item {
			td {
				padding: 9px 12px !important;
			}
		}

		td.actions input[type="text"].input-text {
			line-height: 1;
			padding: 4px 6px 3px;
			height: auto;
		}

		.form-control {
			font-size: 14px;
		}

		.order-total {
			.woocommerce-Price-amount {
				font-size: 1.2em;
			}
		}

		.quantity {
			text-align: right;

			.qty {
				display: inline-block;
				min-width: 5em;
				padding-left: 0.5rem;
				padding-right: 0.5rem;
			}
		}
	}
}

.cart_item {
	.product-name {
		text-align: left;
	}
}

.cart_totals {
	h2 {
		border: none;
		background: none;
		padding: 0;
		margin-bottom: 5px;
		font-size: 18px;
		font-weight: 700;
	}
}

.woocommerce form {
	.form-row.woocommerce-invalid label {
		color: inherit;
	}
}

.woocommerce-checkout-payment input[type="checkbox"] {
	position: relative;
}

#customer_details {
	#order_comments_field {
		label,
		.woocommerce-input-wrapper {
			width: 100%;
		}
	}
}

/*	cart discount
/*-------------------------------------------*/
tr.cart-discount td {
	text-align: right;

	.woocommerce-remove-coupon {
		display: block;
		letter-spacing: 2px;
	}
}

.woocommerce .form-row {
	display: inherit;
}

.woocommerce .woocommerce-customer-details address {
	padding: 1.5em;
	border-width: 1px;
}

/*-------------------------------------------*/
/*	Thank you Page
/*-------------------------------------------*/
.woocommerce ul.order_details {
	padding: 0;
}

/*-------------------------------------------*/
/*	Account
/*-------------------------------------------*/
.mainSection header.woocommerce-Address-title {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation {
	ul {
		list-style: none;
		margin-top: 0;
		padding: 0;
		font-size: 14px;

		@media (min-width: 768px) {
			margin-right: 3em;
		}
		border-top: 1px solid #e5e5e5;

		li {
			border-bottom: 1px solid #e5e5e5;
			margin-bottom: 0;

			a {
				color: #333;
				padding: 0.7em 0;
				display: block;
				overflow: hidden;
			}
		}
	}
}

.woocommerce {
	&-form {
		font-size: 14px;

		&-login__rememberme {
			width: 100%;
		}

		.form-row input.input-text.woocommerce-Input--email {
			margin-bottom: 2em;
		}
	}
}

.woocommerce-table,
.woocommerce-orders-table {
	font-size: 14px;
}

.woocommerce-orders-table__cell-order-status {
	text-align: center;
}

.woocommerce a.woocommerce-MyAccount-downloads-file.button {
	display: block;
	text-align: center;
}

/*-------------------------------------------*/
/*	.wc-block-grid__products
/*-------------------------------------------*/
.wc-block-grid__products {
	.wc-block-grid__product {
		&-image {
			img{
				border: 1px solid var(--color-woo-image-border);
			}
		}

		&-link {
			color: var(--text-color);
		}

		&-title{
			color: var(--text-color);
			font-weight: normal;
			font-size: 14px;
			margin-bottom: 10px;
			@include title_design_reset;
			a{
				color: var(--text-color);
			}
		}

		.wc-block-grid__product-onsale {
			margin-top: 0;
			background-color: $price_color;
			color: #fff;
			border: none;
		}

		&-price {
			del .woocommerce-Price-amount {
				font-weight: normal;
				color: $price_color_delete;
			}

			ins {
				text-decoration: none;

				.woocommerce-Price-amount {
					font-size: 1rem;
				}
			}
		}

		&-add-to-cart {
			.add_to_cart_button {
				display: inline-block;
				font-size: 0.875rem;
				padding: 10px 1.5em;
				width: 100%;
			}
		}
		&-price__value{
			.wc-block-components-formatted-money-amount{
				color: $price_color;
			}
		}
	}
}

/*-------------------------------------------*/
/*	Layout confrict adjustment
/*-------------------------------------------*/
/*
* 支払い画面
* ログイン画面
* etc （都度追加）
*/
.woocommerce form .col-1,
.woocommerce form .col-2,
.woocommerce .u-columns .col-1,
.woocommerce .u-columns .col-2,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	@media (max-width: 767.98px) {
		width: 100%;
		max-width: 100%;
	}
	@media (min-width: 768px) {
		width: 48%;
		max-width: 48%;
	}
}