/**
 * WooCommerce カート・チェックアウト共通
 * 本文 14px / 項目名・見出し 14px / 合計 15px
 */

:root {
	--naturel-shop-font-body: 14px;
	--naturel-shop-font-label: 14px;
	--naturel-shop-font-total: 15px;
	--naturel-shop-line-height: 1.6;
	--naturel-shop-box-padding: 28px 32px;
	--naturel-shop-box-padding-mobile: 24px 20px;
	--naturel-shop-inner-padding: 12px 14px;
	--naturel-shop-border: 1px solid #e5e5e5;
	--naturel-shop-radius: 8px;
	--naturel-shop-divider-space: 12px;
}

/* 通知メッセージ：左アイコンを枠の高さ中央に */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: none;
	flex-shrink: 0;
	margin-left: auto;
}

/* 購入ガイド */
.naturel-purchase-guide {
	margin: 0 0 16px;
	padding: var(--naturel-shop-inner-padding);
	background: #f7f7f7;
	border: var(--naturel-shop-border);
	border-radius: var(--naturel-shop-radius);
	color: #333;
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
	text-align: left;
}

h3.naturel-purchase-guide__title,
.naturel-purchase-guide__title {
	margin: 0 0 10px !important;
	padding: 0 0 8px !important;
	font-size: 15px;
	font-weight: 700;
	color: #111;
	line-height: 1.4;
	border-bottom: 1px dotted;
	text-align: center !important;
	position: static !important;
	transform: none !important;
	filter: none !important;
}

.naturel-purchase-guide__about {
	margin: 0 0 12px !important;
	padding: 0;
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
	color: #333;
}

.naturel-purchase-guide__about strong {
	font-weight: 700;
	color: #111;
}

.naturel-purchase-guide__steps {
	margin: 0 0 20px;
	padding-left: 1.25em;
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
}

.naturel-purchase-guide__steps li {
	margin: 0.35em 0;
}

.naturel-purchase-guide__steps li.is-current {
	font-weight: 700;
	color: #007185;
}

.naturel-purchase-guide__options {
	display: grid;
	gap: 8px;
	margin-top: 4px;
}

.naturel-purchase-guide__methods {
	margin: 0 0 12px;
	padding-left: 1.25em;
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
}

.naturel-purchase-guide__methods li {
	margin: 0.35em 0;
}

.naturel-purchase-guide__methods strong {
	font-weight: 700;
	color: #111;
}

.naturel-purchase-guide__option {
	padding: var(--naturel-shop-inner-padding);
	background: #fff;
	border: var(--naturel-shop-border);
	border-radius: var(--naturel-shop-radius);
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
}

.naturel-purchase-guide__option strong {
	display: block;
	margin-bottom: 0.25em;
	font-size: var(--naturel-shop-font-label);
	font-weight: 700;
	color: #111;
}

.naturel-purchase-guide__highlight {
	margin: 8px 0 0;
	padding: var(--naturel-shop-inner-padding);
	background: #fff8e7;
	border: 1px solid #f0d080;
	border-radius: var(--naturel-shop-radius);
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
	color: #333;
}

.naturel-purchase-guide__highlight strong {
	font-size: var(--naturel-shop-font-label);
	font-weight: 700;
	color: #111;
}

.naturel-checkout-payment-note {
	margin: 0 0 12px;
	padding: var(--naturel-shop-inner-padding);
	background: #f7f7f7;
	border: var(--naturel-shop-border);
	border-radius: var(--naturel-shop-radius);
	font-size: var(--naturel-shop-font-body);
	line-height: var(--naturel-shop-line-height);
	color: #333;
	text-align: left;
}

.naturel-checkout-payment-note strong {
	display: block;
	margin-bottom: 0.25em;
	font-size: var(--naturel-shop-font-label);
	font-weight: 700;
	color: #111;
}

/* ===== ショップ レスポンシブ（WP追加CSSより後に読み込み・上書き） ===== */

#shopHero #shopTop img {
	box-shadow: none !important;
}

/* カテゴリ：プルダウンとスクロールリンクは排他的（同時表示しない） */
#storeFlex .naturel-category-select {
	display: none !important;
}

#storeFlex.is-dropdown .naturel-category-select {
	display: block !important;
}

#storeFlex.is-dropdown ul {
	display: none !important;
}

.naturel-category-select {
	max-width: 520px;
	margin: 0 auto 30px;
	padding: 14px 20px;
	background: #e8e8e8;
	box-sizing: border-box;
}

#naturelCategorySelect {
	display: block;
	width: 100%;
	padding: 12px 40px;
	font-size: 15px;
	line-height: 1.4;
	color: #303030;
	text-align: center;
	text-align-last: center;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23303030' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid #ccc;
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-sizing: border-box;
}

#naturelCategorySelect option {
	text-align: center;
}

#naturelCategorySelect:focus {
	outline: 2px solid #f1d8a8;
	outline-offset: 2px;
}

/* タブレット横（1280px以下）：モバイルヘッダー＋ヒーロー調整 */
@media (max-width: 1280px) {
	/* ハンバーガーメニュー（960px相当のSP仕様） */
	body:has(#shopHeroCenter) .l-header__menuBtn.sp_ {
		display: block !important;
		position: fixed !important;
		right: 0 !important;
		top: 0 !important;
		z-index: 10003 !important;
		background: #fff !important;
		height: 45px !important;
		width: 45px !important;
	}

	body:has(#shopHeroCenter) .l-header__gnav,
	body:has(#shopHeroCenter) .l-fixHeader__gnav,
	body:has(#shopHeroCenter) .l-header .w-header {
		display: none !important;
	}

	body:has(#shopHeroCenter) .l-header__customBtn.sp_ {
		display: none !important;
	}

	/* 左上ロゴ：1280px以下もPCサイズ（160px）を維持 */
	body:has(#shopHeroCenter) .c-headLogo.-img {
		position: fixed !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: 0 0 5px #ffaed0;
		top: 0 !important;
		left: 0 !important;
		opacity: 0.9;
		height: auto !important;
		z-index: 10002 !important;
	}

	body:has(#shopHeroCenter) .c-headLogo__img,
	body:has(#shopHeroCenter) .l-fixHeader__inner .c-headLogo__img {
		height: 160px !important;
		width: auto !important;
		filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
	}

	body:has(#shopHeroCenter) .-img .c-headLogo__link {
		padding: 0 !important;
	}

	body:has(#shopHeroCenter) .l-header__logo {
		margin-right: auto !important;
	}

	body:has(#shopHeroCenter) .l-header__inner {
		justify-content: flex-end !important;
	}

	body:has(#shopHeroCenter) .l-fixHeader__inner .c-gnav {
		display: none !important;
	}

	body:has(#shopHeroCenter) #schoolBnr {
		display: none !important;
	}

	/* SWELL既定（960px以上で .p-spMenu{display:none}）を上書き */
	body:has(#shopHeroCenter) .p-spMenu {
		display: block !important;
	}

	/* ヒーロー背景 */
	#shopHero #c-pageTitle__Back img,
	.home #c-pageTitle__Back img,
	.page-id-12140 #c-pageTitle__Back img,
	body:not(.home):not(.page-id-12140) #c-pageTitle__Back img {
		height: 280px !important;
		max-height: none !important;
		object-fit: cover !important;
		object-position: center 30% !important;
	}

	/* ONLINE SHOP：画面幅の左右中央 */
	body:has(#shopHeroCenter) #shopHero:has(#shopHeroCenter) #shopHeroCenter {
		left: 50% !important;
		right: auto !important;
		width: 100% !important;
		transform: translate(-50%, -50%) !important;
		-webkit-transform: translate(-50%, -50%) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	body:has(#shopHeroCenter) #shopHero:has(#shopHeroCenter) #shopTop {
		width: 100% !important;
	}

	/* shopTop：960px以上はPCサイズ（max-width 400px / width 55%）を維持 */
	body:has(#shopHeroCenter) #shopHero:has(#shopHeroCenter) #shopTop img {
		display: block !important;
		max-width: 400px !important;
		width: 55% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body:has(#shopHeroCenter) #cosmetics li {
		width: calc(33.333% - 7px) !important;
	}

	body:has(#shopHeroCenter) #cosmetics img {
		height: 260px !important;
	}
}

/* タブレット縦（960px以下＝モバイル）：ロゴ縮小 */
@media (max-width: 959px) {
	body:has(#shopHeroCenter) .c-headLogo__img,
	body:has(#shopHeroCenter) .l-fixHeader__inner .c-headLogo__img,
	.c-headLogo__img,
	.l-fixHeader__inner .c-headLogo__img {
		height: 60px !important;
	}

	#shopHero #c-pageTitle__Back img,
	.home #c-pageTitle__Back img,
	.page-id-12140 #c-pageTitle__Back img,
	body:not(.home):not(.page-id-12140) #c-pageTitle__Back img {
		height: 200px !important;
		object-position: center 25% !important;
	}

	#shopHero:has(#shopHeroCenter) #shopTop {
		margin-top: 51px;
	}

	body:has(#shopHeroCenter) #shopHero:has(#shopHeroCenter) #shopTop img {
		display: block !important;
		width: 60% !important;
		max-width: none !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body:has(#shopHeroCenter) #cosmetics li {
		width: calc(50% - 5px) !important;
	}

	body:has(#shopHeroCenter) #cosmetics img {
		height: 180px !important;
	}

	#producttopTit {
		font-size: 14px !important;
		padding: 12px 0 !important;
	}

	body:has(#shopHeroCenter) .shopHeroPageTitle {
		padding: 8px 16px 10px;
		font-size: 13px;
		white-space: normal;
		text-align: center;
		max-width: calc(100% - 40px);
	}

	.naturel-category-select {
		padding: 12px 16px;
		margin-bottom: 30px;
	}
}

/* スマホ（600px以下） */
@media (max-width: 600px) {
	#shopHero #c-pageTitle__Back img,
	.home #c-pageTitle__Back img,
	.page-id-12140 #c-pageTitle__Back img,
	body:not(.home):not(.page-id-12140) #c-pageTitle__Back img {
		height: 150px !important;
	}

	#shopHero:has(#shopHeroCenter) #shopTop {
		margin-top: 43px;
	}

	body:has(#shopHeroCenter) #cosmetics li {
		width: 100% !important;
	}

	body:has(#shopHeroCenter) #cosmetics img {
		height: 220px !important;
	}
}

/* モバイル：プロフィールブロック上余白を除去（ショップページ） */
@media (max-width: 1280px) {
	body:has(#shopHeroCenter) #profileSet {
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* モバイルスライドメニュー（白背景に対して左右20px余白） */
@media (max-width: 1280px) {
	body:has(#shopHeroCenter) .p-spMenu__inner {
		width: 240px !important;
		max-width: 88vw;
	}

	body:has(#shopHeroCenter) .p-spMenu__body {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body:has(#shopHeroCenter) .c-widget__title.-spmenu {
		background: #acacac !important;
		color: #fff !important;
		font-size: 13px !important;
		line-height: 1 !important;
	}

	body:has(#shopHeroCenter) .p-spMenu__nav .c-spnav a,
	body:has(#shopHeroCenter) .p-spMenu__nav .c-listMenu a {
		font-size: 14px !important;
		line-height: 1.6 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body:has(#shopHeroCenter) .p-spMenu__nav .c-spnav li,
	body:has(#shopHeroCenter) .p-spMenu__nav .c-listMenu li {
		font-size: 14px !important;
		text-align: left;
	}
}

/* スライドメニュー内：公式サイトバナー（PC #schoolBnr と同サイズ） */
.naturel-spmenu-schoolBnr {
	margin-top: 12px;
	padding: 0 0 16px;
}

.naturel-spmenu-schoolBnr__link {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px;
	line-height: 1.6;
	color: #fff;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	background-blend-mode: soft-light;
	text-decoration: none;
	box-sizing: border-box;
	vertical-align: top;
}

.naturel-spmenu-schoolBnr__link:hover {
	opacity: 0.8;
	transition: opacity 0.3s ease-in-out;
}

.naturel-spmenu-schoolBnr__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.naturel-spmenu-schoolBnr__img {
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.naturel-spmenu-schoolBnr__tit {
	margin: 0;
	padding: 0 6px 0 8px;
	flex-shrink: 1;
	min-width: 0;
	line-height: 1;
}

.naturel-spmenu-schoolBnr__img img {
	display: block;
	width: 50px;
	height: auto;
	filter: drop-shadow(0 0 4px rgb(93, 190, 197));
}

.naturel-spmenu-schoolBnr__tit img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}

/* 商品詳細：購入フォーム（共通ベース） */
#proRight .naturel-purchase-form,
.post-type-product .naturel-purchase-form {
	border: 1px solid #ffc5c5;
	padding: 15px;
	box-shadow: 4px 4px 3px #ededed;
	border-radius: 5px;
	width: 100%;
	background: #fff3f3;
}

/* 単品：従来どおりの幅 */
#proRight .naturel-purchase-form--simple,
.post-type-product .naturel-purchase-form--simple {
	max-width: 320px;
}

#proRight .naturel-purchase-form--variable,
.post-type-product .naturel-purchase-form--variable {
	max-width: 560px;
}

.naturel-purchase-form__heading {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 700;
	text-align: left;
	color: #303030;
}

/* サイズタイル（横並び） */
.naturel-variation-tiles {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin: 0 0 16px;
	-webkit-overflow-scrolling: touch;
}

.naturel-variation-tile {
	flex: 1 1 0;
	min-width: 96px;
	border: 2px solid #ddd;
	border-radius: 8px;
	background: #fff;
	padding: 10px 8px;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.naturel-variation-tile.is-active {
	border-color: #c97a7a;
	box-shadow: 0 0 0 1px #ffc5c5;
}

.naturel-variation-tile__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: #303030;
}

.naturel-variation-tile__price {
	font-size: 13px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: #303030;
}

.naturel-variation-tile__price .woocommerce-Price-amount.amount {
	display: inline;
	margin: 0;
	font-size: 13px !important;
}

.naturel-variation-tile__qty-label {
	display: block;
	font-size: 11px;
	color: #666;
	margin: 0 0 4px;
}

/* 数量コントロール（商品詳細・カート共通ベース） */
.naturel-qty-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.naturel-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: #f5f5f5;
	color: #333;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.naturel-qty-btn:hover {
	background: #ebebeb;
}

.naturel-purchase-form .naturel-qty-control input.qty,
.naturel-purchase-form .naturel-qty-control input.naturel-tile-qty {
	width: 2.8em;
	min-width: 2.8em;
	height: 32px;
	margin: 0;
	padding: 0 4px;
	border: none;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-radius: 0;
	text-align: center;
	font-size: 14px;
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
}

.naturel-purchase-form .naturel-qty-control input.qty::-webkit-outer-spin-button,
.naturel-purchase-form .naturel-qty-control input.qty::-webkit-inner-spin-button,
.naturel-purchase-form .naturel-qty-control input.naturel-tile-qty::-webkit-outer-spin-button,
.naturel-purchase-form .naturel-qty-control input.naturel-tile-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.naturel-purchase-form .quantity {
	display: contents;
}

.naturel-purchase-form .quantity label.screen-reader-text {
	display: none;
}

/* 単品：価格（左）＋数量（右） */
.naturel-simple-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.naturel-simple-qty-row__price {
	font-size: 18px;
	font-weight: 700;
	color: #303030;
	line-height: 1.2;
	white-space: nowrap;
}

.naturel-simple-qty-row__price .woocommerce-Price-amount.amount {
	font-size: 18px !important;
	font-weight: 700;
}

.naturel-simple-qty-row__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.naturel-simple-qty-row__label {
	font-size: 14px;
	font-weight: 700;
	color: #303030;
	white-space: nowrap;
}

.naturel-qty-control--simple {
	margin-left: 0;
}

/* カート追加ボタン */
.naturel-purchase-form--simple .naturel-simple-add-to-cart.button {
	max-width: 290px;
	margin: 0 auto;
	display: block;
}

.naturel-purchase-form .naturel-bulk-add-to-cart.button,
.naturel-purchase-form .naturel-simple-add-to-cart.button {
	background: dimgray !important;
	color: #fff !important;
	width: 100%;
	text-align: center;
	line-height: 1 !important;
	padding: 12px 0 !important;
	font-size: 13px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.naturel-purchase-form .naturel-bulk-add-to-cart.button:hover,
.naturel-purchase-form .naturel-simple-add-to-cart.button:hover {
	opacity: 0.9;
}

.naturel-purchase-form .naturel-bulk-add-to-cart.button:disabled,
.naturel-purchase-form .naturel-simple-add-to-cart.button:disabled {
	opacity: 0.6;
	cursor: wait;
}

@media screen and (max-width: 480px) {
	.naturel-variation-tile {
		min-width: 88px;
	}

	#proRight .naturel-purchase-form--variable,
	.post-type-product .naturel-purchase-form--variable {
		max-width: 100%;
	}
}