/*
Theme Name: HAPREAT Shop
Theme URI: https://hapreat.com/
Description: 株式会社HAPREAT オンラインショップ用テーマ。Welcart Simple Plus の子テーマ。外観をコーポレートサイト（hapreat03）に合わせ、ゲスト購入不可（未ログインはログイン画面へ転送）などの本番カスタマイズを含む。
Author: EMS
Template: welcart_simple-plus
Version: 1.0.0
*/

/* ============================================================
   HAPREAT オンラインショップ 外観調整（Welcart Simple Plus 子テーマ）
   - ヘッダー/フッター/ボタン等のベース見た目は css/hapreat03.css
     （コーポレートサイトと共通のスタイル）を読み込んで再現
   - ここでは Welcart のコンテンツ部分を 03 のトーンに寄せる差分のみ記述
   ※ 色・フォント変数（--color-*, --font-ja 等）は hapreat03.css の :root を利用
   ============================================================ */

/* ベースフォント・配色をコーポレートサイトに合わせる */
body {
	font-family: var(--font-ja);
	color: var(--color-ink);
	background-color: var(--color-bg);
}

/* フッターは常に全幅で表示する
   （親テーマのテンプレートによってはコンテンツ用コンテナ内に入り幅が制限されるため、
     コンテナ内に置かれても全幅になるよう full-bleed 化。body は overflow-x:hidden のため横スクロールは出ない） */
.site-footer {
	position: relative;
	width: 100vw !important;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

/* stickyヘッダー下のコンテンツ領域（幅・余白を 03 のトーンに） */
#primary.site-content {
	max-width: 1100px;
	margin: 0 auto 80px;
	padding: 48px 24px 0;
	box-sizing: border-box;
}

#primary.site-content #content {
	width: 100%;
}

/* 見出し */
#content h1,
#content h2,
#content h3,
#content .entry-title,
#content .card-title {
	font-family: var(--font-ja);
	color: var(--color-ink);
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* 本文中のテキストリンクのみブランド色に（ボタン類＝クラス付きのaには影響させない）
   ※ #content a を全掛けすると .cart_button 等の a ボタンの文字色(#fff)を上書きして
     ボタンが見えなくなるため、クラスの無いテキストリンクだけに限定する */
#content .entry-content a:not([class]),
#content .item_body a:not([class]),
#content p a:not([class]) {
	color: var(--color-mint-deep);
}
#content .entry-content a:not([class]):hover,
#content .item_body a:not([class]):hover,
#content p a:not([class]):hover {
	color: var(--color-pink-deep);
}

/* --- Welcart 各種ボタンを 03 のプライマリボタンに寄せる --- */
#content input[type="submit"],
#content input[type="button"],
#content button[type="submit"],
.usces_cart input[type="submit"],
.usces_cart input[type="button"],
.cart_button,
.send input[type="submit"],
.send input[type="button"],
#memberpages input[type="submit"],
#memberpages input[type="button"],
.back_to_top_button {
	font-family: var(--font-ja);
	color: #fff;
	background-color: var(--color-mint-deep);
	border: 0;
	border-radius: 999px;
	/* padding は指定しない：Welcart側の従来CSS（数量更新ボタン等のレイアウト依存指定）を優先させる */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow: 0 6px 0 #37927e;
	transition: transform 0.25s var(--ease-pop), box-shadow 0.25s var(--ease-out);
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button[type="submit"]:hover,
.usces_cart input[type="submit"]:hover,
.usces_cart input[type="button"]:hover,
.cart_button:hover,
.send input[type="submit"]:hover,
.back_to_top_button:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 #37927e;
}

/* 戻る等のサブ的なボタンは主張を弱める */
.usces_cart input.back_button {
	background-color: var(--color-gray);
	box-shadow: 0 6px 0 #6c7684;
}

/* 削除（delButton）はWelcart既定のテキストリンク表示を尊重。当方の装飾を打ち消し、中央寄せにする */
#cart .action input.delButton {
	background: none;
	box-shadow: none;
	border-radius: 0;
	text-align: center;
}

/* 商品一覧カードの角丸をコーポレートサイトのトーンに */
.item-category .card,
.post-category .card {
	border-radius: var(--radius);
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 8px 24px rgba(63, 74, 90, 0.06);
}

/* --- ヘッダー内 ショップ機能（カート・ログイン/マイページ） --- */
.nav-item-utils {
	display: flex;
	align-items: center;
}
.nav-utils {
	display: flex;
	align-items: center;
	gap: 16px;
}
.nav-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-ink);
}
.nav-cart svg {
	width: 20px;
	height: 20px;
	fill: var(--color-mint-deep);
}
.nav-cart .nav-cart-count {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--color-pink-deep);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}
.nav-login {
	/* ログイン中は「マイページ」で文字数が増えヘッダーが折り返して崩れるため、
	   少し小さめ＋折り返し禁止にして1行で収める */
	font-size: 12px;
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.nav-login:hover {
	color: var(--color-mint-deep);
}

/* スマホ表示ではユーティリティも縦並びに馴染ませる */
@media (max-width: 1100px) {
	.nav-item-utils {
		justify-content: center;
		margin-top: 8px;
	}
}

/* --- 商品カテゴリ一覧（/category/item/）を見やすく ---
   親テーマ既定は画像の上に白文字を重ねる（オーバーレイ）表示のため見づらい。
   文字を画像の「下」に出し、白文字・影・暗転グラデーションを廃止して
   コーポレートサイトのトーン（濃色文字）に統一する。 */
.item-category .card {
	position: relative;
	color: var(--color-ink) !important;
}
/* 画像上の暗転グラデーション（オーバーレイ）を消す */
.item-category .card::before {
	display: none !important;
}
/* 商品名・価格を画像の下（通常フロー）に配置 */
.item-category .card .card-body {
	position: static !important;
	z-index: auto;
	bottom: auto;
	padding: 1rem 0.75rem !important;
	color: var(--color-ink) !important;
}
/* 白文字・文字影を廃止し、濃色文字に */
.item-category .card .card-body .card-title,
.item-category .card .card-body .card-text,
.item-category .card .card-body .card-text .field_cprice,
.item-category .card .card-body .card-text .tax,
.item-category .card .card-body .card-text .tax_inc_block,
.item-category .card .card-body .card-text .tax_inc_block .tax_inc_label,
.item-category .card .card-body h3,
.item-category .card .card-body p {
	color: var(--color-ink) !important;
	text-shadow: none !important;
}
/* セール前価格（取り消し線）だけは補足色を維持 */
.item-category .card .card-body .card-text .field_cprice {
	color: var(--color-gray) !important;
}

/* --- ログイン画面「新規ご入会はこちら」ボタンを通常ボタンと同じ配色に ---
   親テーマ既定はグレー背景＋（テキストリンク色が乗って）視認性が低いため、
   コーポレートサイトのプライマリボタン（ミント地に白文字）に統一する。 */
article.wc_login .new-entry .nav a {
	background-color: var(--color-mint-deep) !important;
	color: #fff !important;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 6px 0 #37927e;
	transition: transform 0.25s var(--ease-pop), box-shadow 0.25s var(--ease-out);
}
article.wc_login .new-entry .nav a:hover {
	background-color: var(--color-mint-deep) !important;
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 9px 0 #37927e;
}