/*
Theme Name: Japan Vapor
Template: blocksy
Description: Japan Vapor customizations on top of Blocksy. Managed in Git — edit the repository, not this file on the server.
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: japanvapor
*/

/* Brand tokens (see docs/04-design-and-ux.md) */
:root {
	--jv-ink: #0b0b0b;
	--jv-accent: #3565e0;
	--jv-logo-color: var(--jv-ink);
	--jv-logo-height: 20px; /* ~145px wide; 16px on phones (below) */
}

/* Same rule as the old PNG logos: white on transparent header rows (home, shop), black elsewhere. */
[data-transparent-row="yes"] {
	--jv-logo-color: #fff;
}

/* Inline SVG logo: the wordmark uses fill="currentColor", so --jv-logo-color sets its colour. */
.site-logo-container:has(> svg) {
	display: flex;
	align-items: center;
	min-height: var(--logo-max-height, 30px);
}

.site-logo-container svg {
	display: block;
	width: auto;
	height: var(--jv-logo-height);
	color: var(--jv-logo-color);
}

@media (max-width: 689.98px) {
	:root {
		--jv-logo-height: 16px;
	}
}

/* ---------- Header (inc/header.php, scripts/apply-header.php) ---------- */

/* Text element = search bar + 🔰 / ❓ links */
[data-row] .ct-header-text:has(.jv-header-search) {
	flex: 1;
	min-width: 0;
}

[data-row] .ct-header-text > .entry-content:has(.jv-header-search) {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.jv-header-search {
	flex: 1;
	min-width: 0;
	max-width: 560px;
}

/* .entry-content gives its children a bottom margin, which pushed the search bar above the logo and icons */
[data-row] .ct-header-text > .entry-content > .jv-header-search,
[data-row] .ct-header-text > .entry-content > .jv-help {
	margin: 0;
}

/* Desktop: logo, then the search row fills the space up to the icons */
[data-device="desktop"] [data-column="start"] {
	flex: 1;
}

[data-device="desktop"] [data-column="start"] .ct-header-text:has(.jv-header-search) {
	margin-inline-start: clamp(16px, 3vw, 48px);
}

/* Field colours go on Blocksy's rounded wrapper (.ct-pseudo-input); a fill on the input itself showed as a square left corner */
.jv-header-search .ct-search-form {
	--theme-form-field-height: 42px;
	--theme-form-field-border-radius: 999px;
	--theme-form-field-background-initial-color: #f3f4f6;
	--theme-form-field-background-focus-color: #fff;
	--theme-form-field-border-initial-color: transparent;
}

/* The live results panel uses the same radius variable; keep it a normal rounded box */
.jv-header-search .ct-search-results {
	border-radius: 12px;
}

.jv-header-search input[type="search"] {
	font-size: 16px; /* 16px stops iOS from zooming into the field */
}

.jv-help {
	display: flex;
	flex-shrink: 0;
	gap: 14px;
}

.jv-help a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--jv-ink);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.jv-help a:hover {
	color: var(--jv-accent);
}

/* Logo row: black, with the white logo, help links, account and cart (client 2026-10-29);
   also while stuck to the top (Blocksy's sticky row colour is white) */
[data-header*="type-1"] .ct-header [data-row*="middle"],
[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
	--jv-logo-color: #fff;
	background-color: var(--jv-ink);
}

[data-header*="type-1"] .ct-header [data-row*="middle"] :is(.ct-header-account, .ct-header-cart, .ct-header-trigger) {
	--theme-icon-color: #fff;
	--theme-icon-hover-color: #c7d4f8;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #c7d4f8;
	--theme-text-color: #fff;
}

/* Account dropdown (logged in): dark text on a white panel — the white above is for the black row only (client 2026-10-30) */
[data-header*="type-1"] .ct-header [data-row*="middle"] .ct-header-account-dropdown {
	--dropdown-background-color: #fff;
	--theme-text-color: var(--jv-ink);
	--theme-link-initial-color: var(--jv-ink);
	--theme-link-hover-color: var(--jv-accent);
}

/* Cart count badge: white number on the blue circle (client 2026-11-05; Blocksy's default was grey) */
.ct-header-cart .ct-dynamic-count-cart {
	--theme-cart-badge-text: #fff;
	color: #fff !important;
}

/* Room for the cart count badge before the menu button */
[data-header*="type-1"] [data-row*="middle"] [data-id="trigger"] {
	--margin: 0 0 0 16px !important;
}

[data-row*="middle"] .jv-help a {
	color: #fff;
}

[data-row*="middle"] .jv-help a:hover {
	color: #c7d4f8;
}

[data-row*="middle"] .jv-header-search .ct-search-form {
	--theme-form-field-background-initial-color: #fff;
}

/* PC menu row under the search row: brand blue like the old site's top bar (client 2026-11-03;
   the notice bar below is the deeper #323aa8, client 2026-11-05); also when sticky. Phones keep
   their white search row (also "bottom"). */
[data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="bottom"],
[data-header*="type-1"] .ct-header [data-device="desktop"] [data-sticky*="yes"] [data-row*="bottom"] {
	background-color: var(--jv-accent);
	border-top: 0;
}

[data-device="desktop"] [data-row*="bottom"] .header-menu-1 > ul > li > a {
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	--theme-link-active-color: #fff;
	color: #fff;
}

[data-device="desktop"] [data-row*="bottom"] .header-menu-1 > ul > li > a .ct-toggle-dropdown-desktop svg {
	fill: #fff;
}

[data-device="desktop"] [data-row*="bottom"] .header-menu-1 > ul > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a {
	background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 999.98px) {
	[data-row] .ct-header-text > .entry-content:has(.jv-header-search) {
		gap: 10px;
	}

	.jv-header-search {
		max-width: none;
	}

	.jv-help {
		gap: 8px;
	}

	.jv-help a {
		flex-direction: column;
		gap: 0;
		font-size: 0.65rem;
	}

	.jv-help a > span[aria-hidden] {
		font-size: 1.1rem;
		line-height: 1.1;
	}
}

/* Off-canvas (mobile menu) logo: white on the dark panel */
#offcanvas {
	--jv-logo-color: #fff;
}

#offcanvas .site-logo-container svg {
	height: 22px;
}

/* ---------- Home sections (patterns/home-*.php) ---------- */

/* Space between sections: padding only, no extra block margin (client 2026-10-30: was 136px, now ~80px) */
.jv-section {
	padding-block: clamp(20px, 3vw, 40px);
}

.entry-content > .jv-section:not(:last-child) {
	margin-bottom: 0;
}

.jv-section h2 {
	margin-bottom: 0.75em;
	font-size: clamp(1.25rem, 3.5vw, 1.6rem);
}

.jv-section h3 {
	margin: 1.5em 0 0.6em;
	font-size: 1rem;
}

.jv-more {
	font-size: 0.9rem;
	text-align: right;
}

.jv-more a {
	color: var(--jv-accent);
	text-decoration: none;
}

/* Section heading row: title left, 「すべて見る」 button right */
.jv-section__head {
	align-items: center;
	gap: 12px;
	margin-bottom: 0.9rem;
}

.jv-section__head h2 {
	margin: 0;
}

.jv-section__head .jv-more {
	flex-shrink: 0;
	margin: 0;
}

.jv-section__head .jv-more a {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--jv-accent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.jv-section__head .jv-more a::after {
	content: "›";
	margin-left: 6px;
}

.jv-section__head .jv-more a:hover {
	background: #2448a8;
	color: #fff;
}

/* Hover zoom on images, like the shop / collection cards (Blocksy "zoom-in") */
.jv-banners .wp-block-image,
.jv-new-arrivals .wc-block-components-product-image,
.jv-brand-gallery__img,
.jv-posts .wp-block-latest-posts__featured-image {
	overflow: hidden;
	border-radius: 12px;
}

.jv-banners img,
.jv-new-arrivals .wc-block-components-product-image img,
.jv-brand-gallery img,
.jv-posts .wp-block-latest-posts__featured-image img {
	transition: transform 0.5s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.jv-new-arrivals .wc-block-components-product-image:hover img {
		transform: scale(1.1);
	}

	.jv-banners a:hover img,
	.jv-brand-gallery a:hover img,
	.jv-posts .wp-block-latest-posts__featured-image:hover img {
		transform: scale(1.06);
	}
}

/* Notice bar (colours are block settings, default #323aa8, client 2026-11-05); rounded like the banners below,
   with a gap under the menu row (client 2026-11-05) */
.jv-notice {
	padding-block: 9px;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.jv-notice p {
	margin: 0;
}

/* WordPress's layout rule zeroes the first block's top margin, so this needs the extra classes */
.entry-content.is-layout-constrained > .jv-notice {
	margin-block-start: 12px;
}

.jv-notice a {
	color: inherit;
	text-decoration: underline;
}

/* Top banners: 3 across, stacked on phones (core Columns block) */
.jv-banners.wp-block-columns {
	margin-top: clamp(12px, 3vw, 32px);
	margin-bottom: 0;
	gap: clamp(10px, 1.5vw, 20px);
}

.jv-banners .wp-block-image {
	margin: 0;
}

.jv-banners img {
	display: block;
	width: 100%;
	height: auto;
}

/* 4 or more banners: carousel (inc/banner-carousel.php), 3 / 2 / 1 visible */
.jv-carousel-wrap {
	--jv-banner-gap: clamp(10px, 1.5vw, 20px);
	--jv-banner-visible: 3;
	position: relative;
	margin-top: clamp(12px, 3vw, 32px);
}

.jv-banners.jv-carousel {
	margin-top: 0;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: var(--jv-banner-gap);
}

.jv-banners.jv-carousel::-webkit-scrollbar {
	display: none;
}

.jv-banners.jv-carousel > .wp-block-column {
	flex: 0 0 calc((100% - (var(--jv-banner-visible) - 1) * var(--jv-banner-gap)) / var(--jv-banner-visible)) !important;
	scroll-snap-align: start;
}

.jv-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: var(--jv-ink);
	font-size: 26px;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.jv-carousel__nav--prev {
	left: 8px;
}

.jv-carousel__nav--next {
	right: 8px;
}

@media (max-width: 999.98px) {
	.jv-carousel-wrap {
		--jv-banner-visible: 2;
	}
}

@media (max-width: 689.98px) {
	.jv-carousel-wrap {
		--jv-banner-visible: 1.15;
	}

	.jv-carousel__nav {
		display: none;
	}
}

/* Spotlight */
.jv-spotlight {
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: clamp(16px, 4vw, 40px) auto 0;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
}

.jv-spotlight .wp-block-media-text__content {
	padding: clamp(20px, 4vw, 48px);
}

.jv-spotlight h2 {
	margin: 0.2em 0 0.4em;
	font-size: clamp(1.4rem, 4vw, 2.1rem);
	line-height: 1.3;
}

.jv-label {
	display: inline-block;
	margin: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--jv-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* New arrivals: horizontal swipe row on phones */
@media (max-width: 689.98px) {
	.jv-new-arrivals .wc-block-product-template {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

	.jv-new-arrivals .wc-block-product-template > li {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
}

/* Ranking (inc/ranking.php): rank badges, 5 columns on desktop, swipe row on phones */
.jv-section-lead {
	margin-top: -0.3rem;
	color: #6b7280;
	font-size: 0.85rem;
}

.jv-ranking-list [data-products] {
	--shop-columns: repeat(5, minmax(0, 1fr));
	counter-reset: jv-rank;
}

.jv-ranking-list [data-products] > li {
	position: relative;
	counter-increment: jv-rank;
}

.jv-ranking-list [data-products] > li::before {
	content: counter(jv-rank);
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--jv-ink);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

/* 1st–3rd: gold / silver / bronze crowns with the rank on them (client 2026-11-05); 4th–10th keep the circle */
.jv-ranking-list [data-products] > li:nth-child(-n+3)::before {
	top: 4px;
	width: 40px;
	height: 34px;
	padding-top: 9px;
	border-radius: 0;
	background: var(--jv-crown) center / contain no-repeat;
	font-size: 0.9rem;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.jv-ranking-list [data-products] > li:nth-child(1) { --jv-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23d4a017' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round' d='M3 11l9 8 8-15 8 15 9-8-3 20H6z'/%3E%3Ccircle cx='3' cy='10' r='2.6' fill='%23d4a017'/%3E%3Ccircle cx='20' cy='3.5' r='2.6' fill='%23d4a017'/%3E%3Ccircle cx='37' cy='10' r='2.6' fill='%23d4a017'/%3E%3C/svg%3E"); }
.jv-ranking-list [data-products] > li:nth-child(2) { --jv-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%239aa3ad' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round' d='M3 11l9 8 8-15 8 15 9-8-3 20H6z'/%3E%3Ccircle cx='3' cy='10' r='2.6' fill='%239aa3ad'/%3E%3Ccircle cx='20' cy='3.5' r='2.6' fill='%239aa3ad'/%3E%3Ccircle cx='37' cy='10' r='2.6' fill='%239aa3ad'/%3E%3C/svg%3E"); }
.jv-ranking-list [data-products] > li:nth-child(3) { --jv-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23b07445' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round' d='M3 11l9 8 8-15 8 15 9-8-3 20H6z'/%3E%3Ccircle cx='3' cy='10' r='2.6' fill='%23b07445'/%3E%3Ccircle cx='20' cy='3.5' r='2.6' fill='%23b07445'/%3E%3Ccircle cx='37' cy='10' r='2.6' fill='%23b07445'/%3E%3C/svg%3E"); }

@media (max-width: 999.98px) {
	.jv-ranking-list [data-products] {
		--shop-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	.jv-ranking-list [data-products] {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

	.jv-ranking-list [data-products] > li {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
}

/* Brand gallery (inc/brand-gallery.php): image tiles above the brand chips */
.jv-brand-gallery {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.jv-brand-gallery li {
	margin: 0;
}

.jv-brand-gallery a {
	display: block;
	color: var(--jv-ink);
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.jv-brand-gallery__img {
	display: block;
	margin-bottom: 6px;
}

.jv-brand-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

@media (max-width: 999.98px) {
	.jv-brand-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	.jv-brand-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
}

/* お客様の声 (inc/store-reviews.php): 4 cards per row, swipe row with all reviews on phones */
.jv-voices__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: -0.3rem 0 16px;
	color: #6b7280;
	font-size: 0.85rem;
}

.jv-voices__summary strong {
	color: var(--jv-ink);
	font-size: 1.6rem;
	line-height: 1;
}

.jv-voices .star-rating {
	margin: 0;
}

.jv-voices__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jv-voices__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}

.jv-voices__item.jv-is-hidden {
	display: none;
}

.jv-voices__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.6;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

.jv-voices__meta {
	margin: auto 0 0;
	color: #6b7280;
	font-size: 0.75rem;
}

@media (max-width: 999.98px) {
	.jv-voices__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	.jv-voices__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

	.jv-voices__item,
	.jv-voices__item.jv-is-hidden {
		display: flex;
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	.jv-voices__more {
		display: none !important;
	}
}

/* Chips: brand list (Terms List block) and flavor / puff buttons */
.jv-chips,
ul.jv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.jv-chips li {
	margin: 0;
}

ul.jv-chips a,
.jv-chips .wp-block-button__link {
	display: inline-block;
	min-height: 0;
	padding: 8px 14px;
	letter-spacing: normal;
	text-transform: none;
	border: 1px solid #d6d9de;
	border-radius: 999px;
	background: #fff;
	color: var(--jv-ink);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

ul.jv-chips a:hover,
.jv-chips .wp-block-button__link:hover {
	border-color: var(--jv-accent);
	color: var(--jv-accent);
}

/* Guide cards */
.jv-trust {
	color: #555;
	font-size: 0.95rem;
}

.jv-cards {
	gap: 12px;
}

.jv-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}

.jv-cards h3 {
	margin-top: 0;
}

.jv-cards p {
	font-size: 0.9rem;
}

.jv-cards .jv-more {
	margin-top: auto;
}

/* Greenshift icon boxes in the cards (配送までの流れ, Above Footer CTA): 24px margin + the heading's
   top margin left a large gap under the icon (client 2026-11-01). The margin is set per block id. */
.jv-cards .gspb_iconBox {
	margin-bottom: 12px !important;
}

.jv-cards .gspb_iconBox + .wp-block-heading {
	margin-top: 0;
}

/* Above Footer CTA (content block on shop / category / brand pages): it sits outside the page
   container, so the cards are kept to the page width here */
.jv-footer-cta.wp-block-columns {
	width: var(--theme-container-width, 90vw);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: 0 auto clamp(24px, 4vw, 48px) !important;
}

/* 「なぜJapan Vaporが選ばれるのか」 (home group with the class jv-why, Greenshift row): the four
   points as cards like the guide cards, the blue panel with the same rounded corners (client 2026-11-01) */
.jv-why .gspb_row__col--6:first-child {
	border-radius: 12px;
}

.jv-why .gspb_row__col--6:last-child {
	padding-block: 0;
	padding-right: 0;
}

.jv-why .gspb_row__col--6 > .gspb_container > .gspb_container {
	padding: 18px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}

@media (max-width: 689.98px) {
	.jv-why .gspb_row__col--6:last-child {
		padding: 12px 0 0;
	}
}

/* Instagram feed (Smash Balloon) under the posts */
.jv-sns-title {
	margin-top: 2em;
}

/* No 「さらに読み込む」: the feed shows the latest posts and 「Instagram でフォロー」 (client 2026-11-05;
   loading more depends on Instagram's connection and showed 「投稿が見つかりません」) */
#sbi_load .sbi_load_btn {
	display: none !important;
}

/* 「X でフォロー」 under Instagram (inc/sns.php), sized like the Instagram feed's follow button */
.jv-x-follow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline: 0 !important;
}

.jv-x-follow > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 4px;
	background: #000;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
}

.jv-x-follow > a:hover {
	background: #333;
	color: #fff;
}

.jv-x-follow__id {
	color: #6b7280;
	font-size: 13px;
}

/* Latest posts */
.jv-posts.wp-block-latest-posts {
	padding: 0;
}

.jv-posts .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.jv-posts .wp-block-latest-posts__post-title {
	color: var(--jv-ink);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Product page (inc/product-page.php) ---------- */

.jv-facts {
	margin: 12px 0 20px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	font-size: 0.9rem;
}

.jv-facts__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px 16px;
	margin: 0;
}

.jv-facts__specs div {
	min-width: 0;
}

.jv-facts__specs dt {
	color: #6b7280;
	font-size: 0.75rem;
	font-weight: 500;
}

.jv-facts__specs dd {
	margin: 0;
	color: var(--jv-ink);
	font-weight: 600;
}

.jv-facts__flavors {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.jv-facts__flavors li {
	margin: 0;
}

.jv-facts__flavors a {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #d6d9de;
	border-radius: 999px;
	color: var(--jv-ink);
	font-size: 0.8rem;
	line-height: 1.4;
	text-decoration: none;
}

.jv-facts__flavors a:hover {
	border-color: var(--jv-accent);
	color: var(--jv-accent);
}

.jv-facts__ship,
.jv-facts__note {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid #f0f1f3;
}

.jv-facts__note {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
	color: #555;
	font-size: 0.8rem;
}

.jv-facts a:not(.jv-facts__flavors a) {
	color: var(--jv-accent);
}

/* Breadcrumb ends at the category: the product name is the title right below (client 2026-10-30) */
.single-product .ct-breadcrumbs .last-item,
.single-product .ct-breadcrumbs span:has(+ .last-item) > svg {
	display: none;
}

/* Price with the loyalty points as a pill beside it (WPLoyalty message, inline-styled by the plugin),
   in the summary and in the sticky add-to-cart bar */
.single-product .entry-summary .price,
.ct-floating-bar .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.ct-floating-bar .price {
	gap: 4px 8px;
}

.single-product .entry-summary .wlr-product-message,
.ct-floating-bar .wlr-product-message {
	display: inline-block !important;
	padding: 2px 10px !important;
	border-radius: 999px !important;
	background: #fff4d6;
	color: #8a5a00;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.7 !important;
}

/* Sticky bar on phones and tablets: name, price and the cart button only; the points pill wrapped
   to three lines and broke the bar (client 2026-11-02) */
@media (max-width: 999.98px) {
	.ct-floating-bar .wlr-product-message,
	.ct-floating-bar .stock {
		display: none !important;
	}

	/* Blocksy cuts the name to one line ("Hyppe Infi…"): two lines fit the bar */
	.ct-floating-bar .ct-floating-bar-item-title .product-title {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		font-size: 13px;
		line-height: 1.35;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

@media (max-width: 689.98px) {
	.ct-floating-bar .ct-floating-bar-actions .button {
		padding: 0 14px;
		font-size: 13px;
		white-space: nowrap;
	}
}

/* Trust badges under the cart button */
.jv-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.jv-badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: #f2f5fd;
	color: var(--jv-ink);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 689.98px) {
	.jv-badges li {
		gap: 6px;
		padding: 8px;
		font-size: 0.75rem;
	}
}

/* 在庫あり with 「お気に入りに追加」 on the right (moved there by inc/product-page.php) */
.jv-stock-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 1em;
}

.jv-stock-row > p.stock,
.jv-stock-row > .ct-product-additional-actions {
	margin: 0;
}

/* Reviews: open section under the product (replaces the reviews tab) */
.jv-reviews {
	clear: both;
	margin: 40px auto 0;
	padding-top: 32px;
	border-top: 1px solid #e5e7eb;
}

.jv-reviews #reviews {
	scroll-margin-top: 140px;
}

.jv-reviews__title {
	margin: 0 0 16px;
	font-size: 1.4rem;
}

.jv-reviews .woocommerce-Reviews-title {
	display: none;
}

.jv-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
	margin-bottom: 24px;
	padding: 16px 20px;
	border-radius: 12px;
	background: #f7f8fa;
}

.jv-reviews__score {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jv-reviews__score strong {
	font-size: 2.2rem;
	line-height: 1;
}

.jv-reviews__bars {
	flex: 1 1 260px;
	max-width: 420px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
}

.jv-reviews__bars li {
	display: grid;
	grid-template-columns: 2.5em 1fr 3em;
	align-items: center;
	gap: 8px;
	margin: 2px 0;
}

.jv-reviews__bars li span:last-child {
	color: #6b7280;
	text-align: end;
}

.jv-reviews__bar {
	height: 8px;
	border-radius: 999px;
	background: #e5e7eb;
	overflow: hidden;
}

.jv-reviews__bar span {
	display: block;
	height: 100%;
	background: #f5a623;
}

.jv-reviews .commentlist > li.jv-is-hidden {
	display: none !important;
}

.jv-reviews__more,
.jv-voices__more {
	display: block;
	margin: 8px auto 24px;
	padding: 10px 28px;
	border: 1px solid var(--jv-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--jv-ink);
	font-weight: 600;
	cursor: pointer;
}

.jv-voices__more {
	margin: 20px auto 0;
}

.jv-reviews__more:hover,
.jv-voices__more:hover {
	background: var(--jv-ink);
	color: #fff;
}

/* Home 新商品 「もっと見る」 (inc/new-arrivals.php) */
.jv-new-arrivals .wc-block-product.jv-is-hidden,
.jv-new-more [hidden] {
	display: none !important;
}

.jv-new-more {
	margin: 0;
	text-align: center;
}

.jv-new-more .jv-voices__more {
	display: inline-block;
	text-decoration: none;
}

@media (max-width: 689.98px) {
	.jv-new-more {
		display: none;
	}
}

/* ---------- Product cards (inc/product-card.php) ---------- */

/* Smaller product names in lists (Blocksy default 17px) */
[data-products] .woocommerce-loop-product__title {
	--theme-font-size: 14px;
	--theme-line-height: 1.45;
	font-size: 14px;
	line-height: 1.45;
}

.wc-block-product-template .wp-block-post-title {
	font-size: 14px !important;
	line-height: 1.45 !important;
}

@media (max-width: 689.98px) {
	[data-products] .woocommerce-loop-product__title,
	.wc-block-product-template .wp-block-post-title {
		--theme-font-size: 13px;
		font-size: 13px !important;
	}
}

/* 容量 bubble on the product image */
[data-products] figure,
.wc-block-components-product-image {
	position: relative;
}

.jv-cap {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--jv-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* Phones: no wishlist / add to cart / Quick View buttons over the image (there is no hover, so
   Blocksy shows them all the time; client 2026-11-01). The whole card still opens the product. */
@media (max-width: 689.98px) {
	[data-products] .ct-woo-card-extra {
		display: none !important;
	}
}

/* ---------- Shop filter 「絞り込み」 (Filter Everything Pro, sidebar widget) ---------- */

.wpc-filter-set-widget-title {
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--jv-ink);
	color: var(--jv-ink);
	font-size: 1.1rem;
	font-weight: 700;
}

.wpc-filters-main-wrap .wpc-filters-section {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid #e5e7eb;
}

.wpc-filters-main-wrap .wpc-filters-section:first-child {
	padding-top: 8px;
}

.wpc-filters-main-wrap .wpc-filter-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--jv-ink);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Short blue bar before each heading, like the H4 style in pages */
.wpc-filters-main-wrap .wpc-filter-title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 1em;
	border-radius: 2px;
	background: var(--jv-accent);
}

/* Counts as a plain grey number everywhere (the plugin's brackets showed beside brand logos) */
.wpc-filters-main-wrap .wpc-term-count {
	margin-left: 4px;
	color: #6b7280;
	font-size: 0.8rem;
	opacity: 1;
	vertical-align: baseline;
}

.wpc-filters-main-wrap .wpc-term-count-brackets-open,
.wpc-filters-main-wrap .wpc-term-count-brackets-close {
	display: none !important;
}

/* ---------- LINE link box: account dashboard, order received (mu-plugins/jv-line.php) ---------- */

.jv-line-box {
	margin: 24px 0;
	padding: 16px 18px;
	border: 1px solid #b7ebcb;
	border-radius: 12px;
	background: #f0fbf4;
}

.jv-line-box p {
	margin: 0 0 10px;
	font-size: 0.9rem;
}

.jv-line-box .jv-line-box__title {
	margin-bottom: 4px;
	color: var(--jv-ink);
	font-size: 1rem;
	font-weight: 700;
}

/* inline-flex: the theme's button min-height left the text above the middle */
.jv-line-box .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: #06c755;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.jv-line-box .button:hover {
	background: #05a948;
	color: #fff;
}

/* Back-in-stock (mu-plugins/jv-back-in-stock.php): account box in neutral grey, hint under 在庫切れ */
.jv-line-box.jv-bis-box {
	border-color: var(--jv-line, #e5e7eb);
	background: #f9fafb;
}

.jv-line-box.jv-bis-box .button {
	background: var(--jv-ink, #111827);
}

.jv-line-box.jv-bis-box .button:hover {
	background: #374151;
}

.jv-bis-hint {
	margin: 4px 0 0;
	color: var(--theme-text-color, #4b5563);
	font-size: 0.85rem;
}

/* ---------- Shipping gauge (inc/shipping.php) ---------- */

.jv-ship-gauge {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #eef3fd;
	font-size: 0.85rem;
}

.jv-ship-gauge.is-free {
	background: #e9f7ef;
}

.jv-ship-gauge p {
	margin: 0;
}

.jv-ship-gauge strong {
	color: var(--jv-accent);
}

.jv-ship-gauge__bar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	margin: 6px 0;
}

.jv-ship-gauge__step {
	height: 6px;
	border-radius: 3px;
	background: #d3dcf0;
}

.jv-ship-gauge__step.is-done {
	background: var(--jv-accent);
}

.jv-ship-gauge.is-free .jv-ship-gauge__step {
	background: #2e9e5b;
}

.jv-ship-gauge__note {
	color: #6b7280;
	font-size: 0.75rem;
}

.cart_totals .jv-ship-gauge {
	margin-bottom: 16px;
}

.woocommerce-mini-cart__total + .jv-ship-gauge,
.widget_shopping_cart .jv-ship-gauge {
	margin: 0 0 12px;
}

/* ---------- Cart / checkout ---------- */

/* WPLoyalty points messages (inline-styled by the plugin, green by default): the brown / yellow
   of the product page pill (client 2026-10-30) */
.wlr-message-info {
	border-color: #f0d48a !important;
	background-color: #fff8e6 !important;
	color: #8a5a00 !important;
}

.wlr-message-info .wlr-theme-color-apply {
	color: #c58a00 !important;
}

/* ---------- Archive title band (content block 「Archives Hero Section」, Greenshift row) ---------- */

/* Shop, categories, brands, blog list: the 150px top padding was room for the old transparent header */
body #gspb_row-id-gsbp-96b5086 {
	padding-top: 40px;
	padding-bottom: 36px;
}

@media (max-width: 689.98px) {
	body #gspb_row-id-gsbp-96b5086 {
		padding-top: 28px;
		padding-bottom: 24px;
	}
}

/* ---------- Headings in pages, blog posts and product descriptions (client 2026-10-30) ---------- */

/* Home sections, footer links, tables, shop / cart / checkout / account keep their own headings.
   H1 = page title; sizes step down H1 > H2 > H3 > H4 (H2 was larger than the title). */
:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-header .page-title {
	padding-bottom: 0.45em;
	background:
		linear-gradient(var(--jv-accent), var(--jv-accent)) left bottom / 3em 3px no-repeat,
		linear-gradient(#dfe5f1, #dfe5f1) left bottom / 100% 3px no-repeat;
}

:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-content :is(h2, h3, h4):not(.has-background, :is(.jv-section, .jv-footer-links, footer, table) *),
.single-product .woocommerce-Tabs-panel--description :is(h2, h3, h4):not(.has-background, table *) {
	line-height: 1.45;
}

:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-content :is(h2, h3, h4):not(.has-background, :is(.jv-section, .jv-footer-links, footer, table) *):empty {
	display: none;
}

/* H2: tinted band with a blue bar on the left */
:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-content h2:not(.has-background, :is(.jv-section, .jv-footer-links, footer, table) *),
.single-product .woocommerce-Tabs-panel--description h2:not(.has-background, table *) {
	padding: 0.55em 0.9em;
	border-left: 6px solid var(--jv-accent);
	border-radius: 4px;
	background: #eef3fd;
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

/* H3: two-tone underline */
:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-content h3:not(.has-background, :is(.jv-section, .jv-footer-links, footer, table) *),
.single-product .woocommerce-Tabs-panel--description h3:not(.has-background, table *) {
	padding-bottom: 0.35em;
	background:
		linear-gradient(var(--jv-accent), var(--jv-accent)) left bottom / 3em 3px no-repeat,
		linear-gradient(#dfe5f1, #dfe5f1) left bottom / 100% 3px no-repeat;
	font-size: clamp(1.1rem, 2.2vw, 1.25rem);
}

/* H4: short blue bar on the left */
:is(body.page:not(.home, .woocommerce-page), body.single-post) .entry-content h4:not(.has-background, :is(.jv-section, .jv-footer-links, footer, table) *),
.single-product .woocommerce-Tabs-panel--description h4:not(.has-background, table *) {
	padding-left: 0.6em;
	border-left: 4px solid var(--jv-accent);
	font-size: 1.05rem;
}

/* ---------- Footer link columns (patterns/footer-links.php, scripts/apply-footer.php) ---------- */

.jv-footer-links {
	padding: 48px 24px 32px;
	border-bottom: 1px solid #ffffff14;
	background: var(--theme-palette-color-4, #0d0e10);
	color: #ffffffb3;
}

/* The content area's block spacing left a light band between this and the footer rows below */
.entry-content > .jv-footer-links:not(:last-child) {
	margin-bottom: 0;
}

.jv-footer-links__cols {
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: 0 auto !important;
	gap: 32px;
}

.jv-footer-links__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
}

.jv-footer-links ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.jv-footer-links li {
	margin: 0 0 8px;
}

.jv-footer-links a {
	color: #ffffffb3;
	text-decoration: none;
}

.jv-footer-links a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Phones: columns stack, each list in two columns so the footer stays short */
@media (max-width: 781.98px) {
	.jv-footer-links {
		padding: 32px 16px 16px;
	}

	.jv-footer-links__cols {
		gap: 24px;
	}

	.jv-footer-links ul {
		column-gap: 16px;
		columns: 2;
	}

	.jv-footer-links li {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Moved from the Custom Code plugin (its head <style> is removed in inc/legacy-plugins.php)
   ========================================================================== */

/* Sale badge on block product lists: blue, top left */
.wc-block-components-product-sale-badge {
	background: #3565e0 !important;
	border: 1px solid #3565e0 !important;
	color: #fff !important;
	right: auto !important;
	left: 4px !important;
}

/* Product titles in block lists: two lines at most */
.wc-block-product .wp-block-post-title a {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
}

/* Checkout: no "returning customer? log in" form */
.woocommerce-checkout .woocommerce-form-login {
	display: none !important;
}

/* Mini cart total size */
#woo-cart-panel .woocommerce-mini-cart__total {
	font-size: 16px !important;
}

/* ---------- Order received page + マイアカウント → 注文の詳細 (client 2026-11-06) ----------
   Narrower column, summary as borderless cards, headings like the blog's, items and addresses
   as white cards. WooCommerce's own markup; only the look changes. */

.woocommerce-order,
.woocommerce-view-order .woocommerce-MyAccount-content {
	--jv-card-bg: #fff;
	--jv-card-line: #eef0f3;
}

.woocommerce-order {
	max-width: 960px;
	margin-inline: auto;
}

/* 「ありがとうございました。ご注文を受け付けました。」 */
.woocommerce-order .woocommerce-thankyou-order-received {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 18px 22px 18px 64px;
	border: 1px solid #b7ebcb;
	border-radius: 12px;
	background: #f0fbf4;
	color: #14532d;
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 0.95rem;
}

/* Summary: 注文番号 / 日付 / メール / 合計金額 / 決済方法 */
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 14px 16px;
	border: 0 !important;
	border-radius: 10px;
	background: var(--jv-card-bg);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
	color: #6b7280;
	font-size: 0.8rem;
	text-transform: none;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	color: #111827;
	font-size: 1rem;
	font-weight: 700;
	word-break: break-all;
}

/* Headings: the blog's H2 (blue bar) and H3 (two-tone underline) */
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-view-order .woocommerce-order-details__title {
	margin: 40px 0 16px;
	padding: 0.55em 0.9em;
	border-left: 6px solid var(--jv-accent);
	border-radius: 4px;
	background: #eef3fd;
	font-size: clamp(1.2rem, 2.4vw, 1.4rem);
	line-height: 1.45;
}

.woocommerce-order .woocommerce-column__title,
.woocommerce-order .woocommerce-customer-details > h2,
.woocommerce-view-order .woocommerce-column__title,
.woocommerce-view-order .woocommerce-customer-details > h2 {
	margin: 0 0 12px;
	padding-bottom: 0.35em;
	background:
		linear-gradient(var(--jv-accent), var(--jv-accent)) left bottom / 3em 3px no-repeat,
		linear-gradient(#dfe5f1, #dfe5f1) left bottom / 100% 3px no-repeat;
	font-size: 1.1rem;
	line-height: 1.45;
}

/* Items + totals as one white card; the amount column only as wide as it needs */
.woocommerce-order .woocommerce-table--order-details,
.woocommerce-view-order .woocommerce-table--order-details {
	overflow: hidden;
	border: 0 !important;
	border-collapse: separate;
	border-radius: 12px;
	background: var(--jv-card-bg);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.woocommerce-table--order-details :is(th, td) {
	padding: 12px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--jv-card-line) !important;
	vertical-align: top;
}

.woocommerce-table--order-details thead th {
	background: #f7f8fa;
	color: #6b7280;
	font-size: 0.8rem;
	font-weight: 600;
}

.woocommerce-table--order-details :is(thead th, tbody td, tfoot td):last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.woocommerce-table--order-details tbody .product-name a {
	color: #111827;
	text-decoration: none;
}

.woocommerce-table--order-details .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	color: #6b7280;
	font-size: 0.8rem;
	list-style: none;
}

.woocommerce-table--order-details .wc-item-meta :is(li, p, strong) {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.woocommerce-table--order-details tfoot th {
	color: #4b5563;
	font-weight: 500;
	text-align: left;
}

.woocommerce-table--order-details tfoot tr:last-child :is(th, td) {
	border-bottom: 0 !important;
}

.woocommerce-table--order-details tfoot tr:has(.jv-total--order_total) :is(th, td) {
	font-size: 1.05rem;
	font-weight: 700;
	color: #111827;
}

/* Addresses: two cards, no dashed box */
.woocommerce-order .woocommerce-customer-details,
.woocommerce-view-order .woocommerce-customer-details {
	margin-top: 32px;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

.woocommerce-customer-details address {
	height: calc(100% - 3em);
	padding: 16px 18px !important;
	border: 0 !important;
	border-radius: 12px;
	background: var(--jv-card-bg);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.8;
}

.woocommerce-customer-details address p {
	margin: 8px 0 0;
}