@charset "UTF-8";
/*
 * Product detail page (src/components/ItemPage.astro): minimal, photo-first layout.
 * Phone first; two columns (photos | purchase) from 900px. Loaded after the theme CSS and sp.css,
 * everything is scoped to .pd-page so other pages keep the theme as it is.
 * Spacing scale: 8 / 16 / 24 / 40 / 64 px. Text: 11 / 12 / 14 / 16 / 20 / 26 px.
 */
.pd-page {
	--pd-ink: #1a1a1a;
	--pd-sub: #6b6b6b;
	--pd-line: #e4e4e4;
	--pd-bg: #f6f5f3;
	--pd-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	padding: 0 16px;
	color: var(--pd-ink);
	font-family: var(--pd-font);
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}
/* neutralise the theme's heading / list chrome inside the new layout */
.pd-page h1, .pd-page h2 {
	margin: 0; padding: 0; border: 0; background: none; color: var(--pd-ink);
	font-family: var(--pd-font); font-weight: 500; text-align: left; line-height: 1.5;
}
.pd-page h1:before, .pd-page h1:after, .pd-page h2:before, .pd-page h2:after { content: none; }
.pd-page ul { margin: 0; padding: 0; list-style: none; }
.pd-page img { max-width: 100%; height: auto; }
.pd-page a { color: inherit; }

/* ---- photos ---- */
/* phone: photos run edge to edge */
.pd-gallery { position: relative; margin: 0 -16px; }
.pd-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	-webkit-overflow-scrolling: touch; background: var(--pd-bg);
}
.pd-track::-webkit-scrollbar { display: none; }
.pd-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 1 / 1; }
.pd-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-count {
	position: absolute; right: 16px; top: 16px; margin: 0; padding: 0 10px;
	background: rgba(255,255,255,.85); font-size: 11px; line-height: 24px; letter-spacing: .1em; color: var(--pd-sub);
}
.pd-page .pd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 0; scrollbar-width: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumbs li { flex: 0 0 56px; }
.pd-thumbs button {
	display: block; width: 56px; height: 56px; padding: 0; border: 1px solid transparent;
	background: var(--pd-bg); cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s;
}
.pd-thumbs button[aria-current="true"], .pd-thumbs button:hover { opacity: 1; border-color: var(--pd-ink); }
.pd-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- name / price / purchase ---- */
.pd-buy { padding: 24px 0 8px; }
.pd-cat { margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; color: var(--pd-sub); }
.pd-cat a { text-decoration: none; }
.pd-cat a:hover { text-decoration: underline; }
.pd-page .pd-name { font-size: 20px; letter-spacing: .06em; line-height: 1.45; }
.pd-name-en { margin: 4px 0 0; font-size: 12px; letter-spacing: .12em; color: var(--pd-sub); }
.pd-price { margin: 16px 0 0; font-size: 16px; letter-spacing: .06em; }
.pd-spec { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pd-line); }
.pd-spec dt { margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; color: var(--pd-sub); font-weight: 400; }
.pd-spec dd { margin: 0; font-size: 13px; line-height: 1.8; }
.pd-buy .shopify-buy { margin: 24px 0 0; }
.pd-buy .add_cart { min-height: 0; }
/* the Buy Button script writes max-width: 280px on its node; the purchase area is full width */
.pd-buy .add_cart > div { max-width: none !important; width: 100% !important; }
.pd-page .pd-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.pd-icons li { margin: 0; }
.pd-icons img { display: block; width: 48px; height: auto; }

/* ---- description ---- */
.pd-info { margin: 40px 0 0; }
.pd-banner { margin: 0 0 40px; }
.pd-banner img { display: block; width: 100%; }
.pd-block { padding: 24px 0; border-top: 1px solid var(--pd-line); }
.pd-block:last-child { border-bottom: 1px solid var(--pd-line); }
.pd-page .pd-block h2 { margin: 0 0 16px; font-size: 12px; letter-spacing: .16em; color: var(--pd-sub); font-weight: 400; }
.pd-text { font-size: 14px; line-height: 2; word-break: break-word; overflow-wrap: anywhere; }
.pd-text p { margin: 0 0 1em; }
.pd-text p:last-child { margin-bottom: 0; }
.pd-text img { display: block; margin: 16px auto; }
.pd-text table { max-width: 100%; }

/* ---- related ---- */
.pd-related { margin: 64px 0 0; }
.pd-page .pd-related h2 { margin: 0 0 24px; font-size: 12px; letter-spacing: .16em; color: var(--pd-sub); font-weight: 400; text-align: center; }
.pd-related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.pd-related-list a { display: block; text-decoration: none; }
.pd-related-list a[hidden] { display: none; }
.pd-related-img { display: block; aspect-ratio: 1 / 1; background: var(--pd-bg); }
.pd-related-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-related-name { display: block; margin: 8px 0 0; font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
.pd-related-price { display: block; font-size: 12px; color: var(--pd-sub); }
.pd-related-list a:hover .pd-related-name { text-decoration: underline; }

/* category / tag list: under everything, full width */
.pd-page aside.sub { position: static !important; float: none !important; width: auto !important; height: auto !important; margin: 64px 0 0 !important; padding: 24px 0 0 !important; border-top: 1px solid var(--pd-line) !important; }

/* ---- PC ---- */
@media screen and (min-width: 900px) {
	.pd-page { padding: 0 24px; }
	.pd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
	.pd-gallery { margin: 0; }
	.pd-page .pd-thumbs { padding: 12px 0 0; flex-wrap: wrap; overflow: visible; }
	.pd-thumbs li { flex-basis: 64px; }
	.pd-thumbs button { width: 64px; height: 64px; }
	.pd-buy { position: sticky; top: 24px; padding: 8px 0 0; }
	.pd-page .pd-name { font-size: 26px; }
	.pd-price { font-size: 18px; }
	.pd-info { max-width: 760px; margin: 64px auto 0; }
	.pd-related-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
	.pd-page aside.sub dl { display: inline-block; vertical-align: top; width: 48%; }
}