@charset "UTF-8";
/*
 * Top page (src/pages/index.astro). Everything is scoped to body.hm, so other pages keep their look.
 * Black & white, photo-first, even spacing. Phone first; wider layouts from 768px / 1024px.
 * Spacing scale: 4 / 8 / 16 / 24 / 40 / 64 / 96 px. Text: 11 / 12 / 13 / 16 / 22 px.
 */
body.hm {
	--hm-ink: #111;
	--hm-sub: #767676;
	--hm-line: #e6e6e6;
	--hm-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background: #fff;
	color: var(--hm-ink);
}
body.hm .hm-main, body.hm .hm-hero { font-family: var(--hm-font); letter-spacing: .04em; }
body.hm .hm-main h2, body.hm .hm-main h3 {
	margin: 0; padding: 0; border: 0; background: none; color: var(--hm-ink); font-family: var(--hm-font); font-weight: 500; text-align: left;
}
body.hm .hm-main h2:before, body.hm .hm-main h2:after, body.hm .hm-main h3:before, body.hm .hm-main h3:after { content: none; }
body.hm .hm-main ul { margin: 0; padding: 0; list-style: none; }
body.hm .hm-main p { margin: 0; }
body.hm .hm-main img { max-width: 100%; height: auto; }
body.hm .hm-main a { color: var(--hm-ink); text-decoration: none; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- first view: the brand photos, full bleed (unchanged) ---- */
body.hm .hm-hero { position: relative; overflow: hidden; margin: 0; padding: 0; background: #e9e9e9; aspect-ratio: 4 / 5; }
.hm-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hm-hero-slide[data-active] { opacity: 1; }
.hm-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.hm-hero-dots button { width: 24px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hm-hero-dots button:after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(255,255,255,.55); transition: background .3s; }
.hm-hero-dots button[aria-selected="true"]:after { background: #fff; height: 2px; top: 6px; }

/* ---- sections & headings ---- */
body.hm .hm-main { max-width: 1200px; margin: 0 auto; padding: 0 16px 96px; }
/* the theme pads every <section> by 21px; spacing here comes from .hm-main */
body.hm .hm-section { margin: 0; padding: 64px 0 0; }
body.hm .hm-main .hm-heading { margin: 0 0 24px; text-align: center; }
body.hm .hm-heading > span { display: block; font-size: 16px; letter-spacing: .32em; text-transform: uppercase; font-weight: 400; }
body.hm .hm-heading small { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .12em; color: var(--hm-sub); font-weight: 400; }

/* ---- category (unchanged) ---- */
.hm-cats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-cats-list a { position: relative; display: block; overflow: hidden; background: #222; }
.hm-cats-list img { display: block; width: 100%; aspect-ratio: 640 / 438; object-fit: cover; transition: transform .8s ease, opacity .4s; }
.hm-cats-list a:hover img { transform: scale(1.03); opacity: .9; }
.hm-cats-list.count-3 li:first-child { grid-column: 1 / -1; }

/* ---- new arrivals: edge to edge on phones, tight gutters, same square for every photo ---- */
body.hm .hm-main .hm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 2px; margin: 0 -16px; }
.hm-grid a { display: block; }
.hm-grid-img { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
/* product photos carry a wide white margin: show them 1.2× inside the frame (display only, files unchanged) */
.hm-grid-img img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.2); transition: opacity .4s; }
.hm-grid a:hover .hm-grid-img img { opacity: .8; }
.hm-grid-name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin: 8px 12px 0; font-size: 11px; line-height: 1.6; letter-spacing: .08em; text-align: center; overflow-wrap: anywhere;
}
/* (.hm-main p resets margins, hence the longer selector) */
body.hm .hm-main .hm-more { margin: 48px 0 0; text-align: center; }
body.hm .hm-more a, body.hm .hm-feature-link a {
	display: inline-block; min-width: 220px; padding: 15px 24px; border: 1px solid var(--hm-ink);
	font-size: 11px; letter-spacing: .24em; text-transform: uppercase; text-align: center; transition: background .3s, color .3s;
}
body.hm .hm-more a:hover, body.hm .hm-feature-link a:hover { background: var(--hm-ink); color: #fff; }

/* ---- series: editorial features ---- */
.hm-feature { margin: 0 0 64px; }
.hm-feature:last-child { margin-bottom: 0; }
/* wide campaign banner, edge to edge on phones */
body.hm .hm-feature-wide { display: block; margin: 0 -16px 20px; background: #111; }
.hm-feature-wide img { display: block; width: 100%; }
/* product photo: the same square frame for every series; the photo keeps its proportions and sits inside
   an even white margin, so products photographed edge to edge are not cut and all look the same size */
body.hm .hm-feature-photo { display: block; width: 84%; max-width: 360px; margin: 0 auto; aspect-ratio: 1 / 1; padding: 6%; box-sizing: border-box; background: #fff; }
.hm-feature-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* one spacing unit between photo, name, copy, VIEW and banners: 20px on phones, 24px on PC */
.hm-feature-text { padding: 20px 0 0; text-align: center; }
body.hm .hm-main .hm-feature-title { margin: 0; font-size: 22px; letter-spacing: .16em; font-weight: 400; text-align: inherit; }
.hm-feature-title small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .14em; color: var(--hm-sub); }
.hm-feature-catch { margin: 20px 0 0 !important; font-size: 13px; line-height: 2; color: #333; }
.hm-feature-link { margin: 20px 0 0 !important; }
body.hm .hm-feature-link a { min-width: 0; padding: 12px 32px; }
/* supporting banners under VIEW: one per row, full width on phones; two side by side on PC */
.hm-feature-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0 0 !important; }
.hm-feature-links img { height: auto; }
.hm-feature-links img { display: block; width: 100%; transition: opacity .3s; }
/* the theme fades every link to 70% on hover (base.css a:hover), which washed the dark banners out over the
   white page; series images stay at full opacity and colour */
body.hm .hm-features a:hover { opacity: 1; }

/* header, footer and back-to-top button: public/css/site.css (all pages) */
/* ---- tablet / PC ---- */
@media screen and (min-width: 768px) {
	body.hm .hm-hero { aspect-ratio: 1600 / 500; max-height: 80vh; }
	body.hm .hm-main { padding: 0 40px 128px; }
	body.hm .hm-section { padding-top: 112px; }
	body.hm .hm-main .hm-heading { margin-bottom: 48px; }
	body.hm .hm-heading > span { font-size: 18px; }
	.hm-cats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.hm-cats-list.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-cats-list.count-3 li:first-child { grid-column: auto; }
	body.hm .hm-main .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; margin: 0; }
	.hm-grid-name { margin: 12px 8px 0; font-size: 12px; }
	body.hm .hm-main .hm-more { margin-top: 64px; }
	.hm-feature { margin-bottom: 96px; }
	body.hm .hm-feature-wide { margin: 0 0 40px; }
	.hm-feature-catch, .hm-feature-link, .hm-feature-links { margin-top: 24px !important; }
	.hm-feature-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
	.hm-feature-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
	body.hm .hm-feature-photo { width: 100%; max-width: 440px; margin: 0 0 0 auto; }
	body.hm .is-reverse .hm-feature-photo { order: 2; margin: 0 auto 0 0; }
	.hm-feature-text { padding: 0; text-align: left; }
	.is-reverse .hm-feature-text { text-align: right; }
	body.hm .hm-main .hm-feature-title { font-size: 28px; }
	.hm-feature-catch { font-size: 14px; }
}
@media screen and (min-width: 1024px) {
	body.hm .hm-main .hm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-hero-slide, .hm-cats-list img, .hm-grid-img img { transition: none; }
}