/* ───────── design tokens ───────── */
:root{
--color-base:#FAF7F2;
--color-paper:#FFFFFF;
--color-greige:#E8E2D8;
--color-greige-soft:#F2EDE5;
--color-ink:#2E2A24;
--color-ink-soft:#6B635A;
--color-ink-muted:#A09689;
--color-hairline:#D9D2C7;
--accent:#D4A5A5;
--accent-soft:#EBCFCF;
--accent-deep:#B07F7F;
--color-sale:#B07F7F;
--color-soldout:#A09689;
--font-display:"Zen Old Mincho","Noto Serif JP",serif;
--font-body:"Noto Sans JP",system-ui,-apple-system,sans-serif;
--font-script:"Caveat","Shadows Into Light",cursive;
--space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
--space-lg:24px; --space-xl:40px; --space-2xl:64px; --space-3xl:96px;
--space-4xl:128px;
--border-hairline:1px solid var(--color-hairline);
--border-ink:1px solid var(--color-ink);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Prevent any rogue child (BASE-injected wrappers, wide tables, oversized
images) from creating horizontal page scroll. Vertical scroll stays normal. */
html{overflow-x:hidden}
body{overflow-x:hidden}
/* ── Keyboard accessibility ──
Mouse / touch users never see a focus ring (browsers strip it for non-keyboard
focus). Keyboard users get a soft accent-deep outline that contrasts with the
cream base without screaming. */
:focus{outline:none}
:focus-visible{
outline:2px solid var(--accent-deep);
outline-offset:2px;
}
/* Inputs/textareas already have their own focus state (border color) and an
outline would double up — keep them clean. */
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:none}
/* ── Honor user reduced-motion preference ──
Pulled from system OS setting; cuts every transition + animation to ~1ms so
hover scale + sticky-bar slide etc. don't induce motion-sickness or fatigue. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
/* Selected text color matches lien palette (default browser blue clashes with the warm base). */
::selection{background:var(--accent-soft); color:var(--color-ink)}
body{
background:var(--color-base);
color:var(--color-ink);
font-family:var(--font-body);
font-size:16px; line-height:1.7;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
/* ───────── type roles ───────── */
.display-l{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:1.2;letter-spacing:-0.01em}
.display-m{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.25}
.heading-l{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.3}
.heading-m{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.4}
.body-l{font-size:16px;line-height:1.75}
.body-m{font-size:14px;line-height:1.7}
.caption{font-size:12px;line-height:1.5;letter-spacing:0.02em}
.label{font-size:11px;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase;font-weight:500}
.price{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1}
.script{font-family:var(--font-script);font-weight:400;font-size:20px;line-height:1.2}
@media (min-width:1024px){
.display-l{font-size:48px}
.display-m{font-size:32px}
.heading-l{font-size:24px}
.heading-m{font-size:18px}
.price{font-size:20px}
.script{font-size:24px}
}
/* ───────── container ───────── */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-md)}
@media (min-width:1024px){ .container{padding:0 var(--space-xl)} }
/* ───────── info bar (trust signal strip above the header) ───────── */
.info-bar{
background:var(--color-ink);
color:var(--color-base);
font-size:11px; letter-spacing:0.06em;
line-height:1.4;
position:sticky; top:0; z-index:51;
}
.info-bar-inner{
display:flex; align-items:center; justify-content:center;
gap:var(--space-sm);
padding:8px var(--space-md);
flex-wrap:wrap;
text-align:center;
}
.info-bar-item{display:inline-block}
.info-bar-sep{color:var(--color-ink-muted); flex:0 0 auto}
@media (max-width:639px){
/* Narrow viewports: the shipping policy + delivery promise was being cut
off at the right edge. Drop letter-spacing slightly, allow content to
wrap to a second line if needed, and hide the dot separator between
items (each item becomes its own line). */
.info-bar{font-size:10px; letter-spacing:0.02em}
.info-bar-inner{
padding:6px var(--space-md);
gap:0 var(--space-xs);
flex-wrap:wrap;
row-gap:2px;
}
.info-bar-sep{display:none}
.info-bar-item{display:block; width:100%}
}
/* ───────── header ───────── */
.site-header{
/* Stack below the info bar; both stay pinned together as the user scrolls. */
position:sticky; top:30px; z-index:50;
background:var(--color-base);
border-bottom:var(--border-hairline);
}
@media (max-width:639px){ .site-header{top:24px} }
.header-inner{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
height:64px;
gap:var(--space-md);
}
/* Two-line wordmark:
.wordmark-main → "skyhug" — Zen Old Mincho, 28px (24px mobile), tight
.wordmark-sub → "baby & kids" — tracked uppercase label, 10px, accent
The link itself is the flex column; no underline. */
.wordmark{
display:inline-flex;
flex-direction:column;
align-items:flex-start;
line-height:1;
color:var(--color-ink);
text-decoration:none;
gap:4px;
}
.wordmark:hover{color:var(--color-ink)}
.wordmark-main{
font-family:var(--font-display);
font-weight:500;
font-size:28px;
letter-spacing:-0.005em;
line-height:1;
}
.wordmark-sub{
font-family:var(--font-body);
font-weight:500;
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--color-ink-soft);
line-height:1;
}
.nav-desktop{display:none}
@media (min-width:1024px){
.nav-desktop{display:flex;justify-content:center;gap:var(--space-xl);align-items:center}
.nav-desktop > a,
.nav-desktop .nav-cat-trigger{
font-size:12px;letter-spacing:0.16em;font-weight:500;
text-transform:uppercase;
padding:6px 0;
position:relative;
background:none; border:0; cursor:pointer;
color:var(--color-ink);
font-family:inherit;
display:inline-flex; align-items:center; gap:6px;
}
.nav-desktop > a::after,
.nav-desktop .nav-cat-trigger::after{
content:"";position:absolute;left:50%;right:50%;bottom:0;
height:1px;background:var(--accent-deep);
transition:left .25s ease,right .25s ease;
}
.nav-desktop > a:hover::after,
.nav-desktop .nav-cat-trigger:hover::after,
.nav-desktop .nav-cat:hover .nav-cat-trigger::after,
.nav-desktop .nav-cat[data-open] .nav-cat-trigger::after{left:0;right:0}
/* ── Category dropdown panel (desktop) ── */
.nav-cat{position:relative}
.nav-cat-arrow{transition:transform .2s ease}
.nav-cat:hover .nav-cat-arrow,
.nav-cat[data-open] .nav-cat-arrow{transform:rotate(180deg)}
.nav-cat-panel{
position:absolute;
top:calc(100% + 12px);
left:50%;
transform:translateX(-50%) translateY(-6px);
min-width:560px;
max-width:min(720px, 90vw);
max-height:min(70vh, 600px);
overflow-y:auto; /* tall lists scroll inside the panel */
scrollbar-width:thin;
scrollbar-color:var(--color-hairline) transparent;
background:var(--color-base);
border:var(--border-hairline);
padding:var(--space-lg) var(--space-xl);
opacity:0; visibility:hidden;
transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
z-index:60;
}
.nav-cat-panel::-webkit-scrollbar{width:6px}
.nav-cat-panel::-webkit-scrollbar-thumb{background:var(--color-hairline); border-radius:0}
/* Small hint above the category list — signals this is the comprehensive
browse, complementing the curated card section on the IndexPage. */
.nav-cat-hint{
font-size:11px;
letter-spacing:0.06em;
color:var(--color-ink-muted);
margin:0 0 var(--space-md);
padding-bottom:var(--space-sm);
border-bottom:var(--border-hairline);
}
.nav-cat:hover .nav-cat-panel,
.nav-cat:focus-within .nav-cat-panel,
.nav-cat[data-open] .nav-cat-panel{
opacity:1; visibility:visible;
transform:translateX(-50%) translateY(0);
transition:opacity .2s ease, transform .2s ease;
}
/* Small notch connector so the panel and trigger feel attached */
.nav-cat-panel::before{
content:"";
position:absolute;
top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
width:10px; height:10px;
background:var(--color-base);
border-left:var(--border-hairline);
border-top:var(--border-hairline);
}
}
/* ── BASE-rendered category tag styling (#appsItemCategoryTag tree) ──
BASE emits this raw tree from {AppsItemCategoryCategoriesTag}. We
reset every default and apply lien typography. Scoped under both the
desktop dropdown panel and the mobile drawer. */
.nav-cat-panel #appsItemCategoryTag,
.drawer-categories #appsItemCategoryTag{
list-style:none;
margin:0; padding:0;
display:grid;
gap:var(--space-md) var(--space-lg);
}
@media (min-width:1024px){
.nav-cat-panel #appsItemCategoryTag{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:var(--space-lg) var(--space-2xl);
}
}
.nav-cat-panel .appsItemCategoryTag_child,
.drawer-categories .appsItemCategoryTag_child{
list-style:none; margin:0;
}
.nav-cat-panel .appsItemCategoryTag_child > a,
.drawer-categories .appsItemCategoryTag_child > a{
display:block;
font-family:var(--font-display);
font-weight:500;
font-size:15px;
color:var(--color-ink);
text-decoration:none;
margin-bottom:var(--space-xs);
letter-spacing:0.01em;
}
.nav-cat-panel .appsItemCategoryTag_child > a:hover,
.drawer-categories .appsItemCategoryTag_child > a:hover{color:var(--accent-deep)}
.nav-cat-panel .appsItemCategoryTag_lowerchild,
.drawer-categories .appsItemCategoryTag_lowerchild{
list-style:none;
margin:0; padding:0 0 0 0;
display:flex; flex-direction:column; gap:4px;
}
.nav-cat-panel .appsItemCategoryTag_lowerchild li,
.drawer-categories .appsItemCategoryTag_lowerchild li{margin:0}
.nav-cat-panel .appsItemCategoryTag_lowerLink,
.drawer-categories .appsItemCategoryTag_lowerLink{
font-family:var(--font-body);
font-size:12px;
color:var(--color-ink-soft);
text-decoration:none;
letter-spacing:0.02em;
line-height:1.6;
}
.nav-cat-panel .appsItemCategoryTag_lowerLink:hover,
.drawer-categories .appsItemCategoryTag_lowerLink:hover{color:var(--accent-deep)}
/* BASE adds `.mainHeaderNavColor` to every link via legacy theme — strip its (non-existent) coloring effect. */
.nav-cat-panel .mainHeaderNavColor,
.drawer-categories .mainHeaderNavColor{color:inherit}
/* ── Mobile drawer: category section ── */
.drawer-categories{
border-top:var(--border-hairline);
padding:var(--space-lg) var(--space-xl);
margin-top:0;
}
.drawer-categories-label{
color:var(--color-ink-soft);
margin:0 0 var(--space-sm);
letter-spacing:0.16em;
}
/* Mobile accordion: collapse each parent category's child list until the
row is tapped. JS in footer.html toggles [data-open] on the .appsItemCategoryTag_child . */
.drawer-categories .appsItemCategoryTag_child{
position:relative;
border-bottom:var(--border-hairline);
padding:0;
}
.drawer-categories .appsItemCategoryTag_child:last-child{border-bottom:0}
.drawer-categories .appsItemCategoryTag_child > a{
display:block;
margin:0; /* override the dropdown spacing */
padding:var(--space-sm) 36px var(--space-sm) var(--space-md); /* left breathing room + chevron room on the right */
font-family:var(--font-display);
font-weight:500;
font-size:15px;
color:var(--color-ink);
letter-spacing:0.02em;
text-decoration:none;
}
/* Chevron toggle — only added by JS when the parent actually has a lowerchild list.
Inset slightly from the drawer's right edge so it doesn't crowd the panel border. */
.drawer-cat-toggle{
position:absolute; top:4px; right:4px;
width:32px; height:32px;
display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:0;
color:var(--color-ink-soft);
cursor:pointer;
transition:transform .2s ease, color .15s ease;
}
.drawer-cat-toggle:hover{color:var(--color-ink)}
.drawer-categories .appsItemCategoryTag_child[data-open] .drawer-cat-toggle{
transform:rotate(180deg);
}
.drawer-categories .appsItemCategoryTag_lowerchild{
display:none;
padding:0 0 var(--space-md) var(--space-md);
border-left:1px solid var(--color-hairline);
margin-left:4px;
gap:0;
}
.drawer-categories .appsItemCategoryTag_lowerchild li{padding:4px 0}
.drawer-categories .appsItemCategoryTag_child[data-open] .appsItemCategoryTag_lowerchild{
display:flex; flex-direction:column;
}
.header-actions{display:flex;align-items:center;gap:var(--space-md);justify-self:end}
.icon-btn{
width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
color:var(--color-ink); position:relative;
background:none; border:0; padding:0;
-webkit-tap-highlight-color:transparent;
}
.icon-btn:hover{color:var(--accent-deep)}
.cart-count[hidden]{display:none}
.cart-count{
position:absolute;top:4px;right:2px;
font-size:10px;font-weight:500;
background:var(--accent-deep);color:var(--color-base);
min-width:16px;height:16px;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;
padding:0 4px;
}
.hamburger{display:inline-flex}
@media (min-width:1024px){
.hamburger{display:none}
.header-inner{grid-template-columns:auto 1fr auto}
}
/* mobile: hamburger | wordmark center | cart */
@media (max-width:1023px){
.header-inner{grid-template-columns:auto 1fr auto}
.wordmark{justify-self:center;align-items:center;text-align:center}
.wordmark-main{font-size:24px}
.wordmark-sub{font-size:9px;letter-spacing:0.18em}
.header-actions .icon-btn[data-action="search"]{display:none}
}
/* ───────── buttons ───────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;
font-size:14px;font-weight:500;letter-spacing:0.08em;
text-transform:uppercase;
padding:14px 32px;
border-radius:0;
transition:background .2s ease,color .2s ease,border-color .2s ease;
cursor:pointer;
}
@media (min-width:1024px){ .btn{padding:16px 40px} }
.btn-primary{background:var(--color-ink);color:var(--color-base);border:1px solid var(--color-ink)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-outline{background:transparent;color:var(--color-ink);border:1px solid var(--color-ink);padding:13px 31px}
@media (min-width:1024px){ .btn-outline{padding:15px 39px} }
.btn-outline:hover{background:var(--color-ink);color:var(--color-base)}
.btn-outline-light{background:transparent;color:var(--color-base);border:1px solid var(--color-base);padding:13px 31px}
@media (min-width:1024px){ .btn-outline-light{padding:15px 39px} }
.btn-outline-light:hover{background:var(--color-base);color:var(--color-ink)}
.btn-quiet{
background:transparent;color:var(--color-ink);
font-size:14px;font-weight:500;
text-underline-offset:4px;text-decoration:underline;
text-decoration-color:var(--color-hairline);
text-decoration-thickness:1px;
padding:8px 0;letter-spacing:0;text-transform:none;
}
.btn-quiet:hover{text-decoration-thickness:2px;color:var(--accent-deep);text-decoration-color:var(--accent-deep)}
/* ───────── hero ───────── */
.hero{
position:relative;
width:100%;
background:var(--color-greige-soft);
overflow:hidden;
/* design-tokens §Hero: min-height 520 mobile / 720 desktop */
min-height:520px;
}
@media (min-width:1024px){ .hero{min-height:720px} }
.hero-photo{
position:absolute; inset:0;
width:100%; height:100%;
display:block; /* picture defaults to inline */
background:var(--color-greige-soft);
overflow:hidden;
}
.hero-photo img{
width:100%;height:100%;object-fit:cover;
filter:saturate(.85);
}
/* (.hero-photo no longer drives height — .hero min-height does.
Photo simply fills .hero with object-fit:cover for both aspect ratios.) */
.hero-overlay{
position:absolute;inset:0;
background:linear-gradient(to top, rgba(46,42,36,.42) 0%, rgba(46,42,36,.18) 35%, rgba(46,42,36,0) 65%);
pointer-events:none;
}
.hero-content{
position:absolute;
left:0; bottom:0;
/* padding doubles as the bottom-left offset from the hero edge */
padding:var(--space-xl) var(--space-md);
color:var(--color-base);
max-width:min(640px, 92%);
}
@media (min-width:1024px){
.hero-content{
padding:var(--space-2xl) var(--space-2xl);
max-width:680px;
}
}
.hero-script{
font-family:var(--font-script);
font-size:22px;
margin:0 0 var(--space-xs);
opacity:.9;
}
@media (min-width:1024px){ .hero-script{font-size:28px} }
.hero-title{
font-family:var(--font-display);
font-weight:500;
font-size:32px;
line-height:1.3;
margin:0 0 var(--space-lg);
letter-spacing:0.01em;
text-wrap:balance;
}
@media (min-width:1024px){ .hero-title{font-size:56px;line-height:1.2} }
/* ───────── section base ───────── */
section{padding:var(--space-2xl) 0}
@media (min-width:1024px){ section{padding:var(--space-3xl) 0} }
.eyebrow{
color:var(--color-ink-soft);
text-align:center;
margin-bottom:var(--space-sm);
}
.section-title{
text-align:center;
margin:0;
}
/* design-tokens §"Section header": 24px wide hairline, accent color */
.section-rule{
display:block;
width:24px;height:1px;
background:var(--accent);
margin:var(--space-md) auto 0;
}
.section-head{margin-bottom:var(--space-xl)}
@media (min-width:1024px){ .section-head{margin-bottom:var(--space-2xl)} }
/* Child categories chip strip — shown on /categories/X pages under the section title.
Renders BASE's AppsItemCategoryChildCategories iterator as lien-toned chips. */
.child-categories{
list-style:none; margin:var(--space-md) 0 0; padding:0;
display:flex; flex-wrap:wrap;
justify-content:center;
gap:var(--space-xs) var(--space-sm);
}
.child-categories li{margin:0}
.child-category-chip{
display:inline-block;
padding:8px 16px;
font-family:var(--font-body);
font-size:13px;
letter-spacing:0.04em;
color:var(--color-ink-soft);
background:var(--color-base);
border:1px solid var(--color-hairline);
text-decoration:none;
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.child-category-chip:hover{
color:var(--color-ink);
border-color:var(--color-ink);
}
/* ───────── main page category cards ─────────
Four image cards directly under the hero. Each = season/age/category
entry point into BASE category pages. 4-col desktop / 2-col mobile.
Image fills the upper portion (4:5), meta block sits below the image. */
.category-cards{
padding:var(--space-3xl) 0;
background:var(--color-base);
}
.category-cards .section-head{
text-align:center;
margin-bottom:var(--space-2xl);
}
.cat-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:var(--space-md);
}
@media (min-width:768px){
.cat-grid{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-lg)}
}
.cat-tile{
display:flex; flex-direction:column;
color:inherit; text-decoration:none;
background:transparent;
}
.cat-tile-photo{
aspect-ratio:4/5;
overflow:hidden;
background:var(--color-greige-soft);
width:100%;
}
.cat-tile-photo img{
width:100%; height:100%;
object-fit:cover; object-position:center;
display:block;
transition:transform .35s ease;
}
@media (hover: hover){
.cat-tile:hover .cat-tile-photo img{transform:scale(1.03)}
.cat-tile:hover .cat-tile-title{color:var(--accent-deep)}
}
.cat-tile-meta{
padding:var(--space-md) var(--space-xs) 0;
text-align:center;
}
.cat-tile-eyebrow{
font-size:10px; letter-spacing:0.18em;
text-transform:uppercase;
color:var(--color-ink-soft);
margin:0 0 4px;
}
.cat-tile-title{
font-family:var(--font-display);
font-weight:500;
font-size:15px;
line-height:1.3;
margin:0 0 2px;
color:var(--color-ink);
transition:color .2s ease;
}
@media (min-width:768px){
.cat-tile-title{font-size:17px}
}
.cat-tile-sub{
font-size:11px;
letter-spacing:0.04em;
color:var(--color-ink-muted);
margin:0;
}
/* ───────── mood strip ─────────
Below the category cards (which are the main entry). Mood is now a small
accent strip — thinner than 1:1 tiles, so the page has a visible rhythm
change between the category cards (4:5 portrait) and the mood band
(landscape thumbnails). Acts as visual breathing room, not as another
primary navigation block. */
.mood-strip{background:var(--color-greige-soft); position:relative; padding:var(--space-xl) 0}
/* Right-edge fade on mobile horizontal-scroll: signals "more to see" without a
scrollbar. Disappears once the grid switches to a static 4-col layout. */
@media (max-width:639px){
.mood-strip::after{
content:""; position:absolute;
top:0; right:0; bottom:0; width:36px;
background:linear-gradient(to right, transparent, var(--color-greige-soft));
pointer-events:none;
z-index:1;
}
}
.mood-strip .section-head{margin-bottom:var(--space-lg)}
.mood-grid{
display:grid;
grid-template-columns:repeat(4, 40vw); /* mobile: horizontal scroll, smaller tiles */
gap:var(--space-xs);
overflow-x:auto;
scroll-snap-type:x mandatory;
padding:0 var(--space-md);
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.mood-grid::-webkit-scrollbar{display:none}
.mood-grid > *{scroll-snap-align:start}
@media (min-width:640px){
.mood-grid{grid-template-columns:repeat(4,1fr);overflow:visible;padding:0}
.mood-strip .container{padding:0 var(--space-xl)}
}
/* Landscape ratio instead of 1:1 so the strip feels thinner than the
category cards above. Tile height is roughly half of a category card. */
.mood-tile{
aspect-ratio:3/2;
background:var(--color-greige);
overflow:hidden;
position:relative;
}
.mood-tile img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
filter:saturate(.85);
transition:transform .6s ease;
}
.mood-tile:hover img{transform:scale(1.04)}
/* ───────── product grid ───────── */
.product-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--space-lg) var(--space-sm);
justify-content:center;
}
@media (min-width:640px){
.product-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-xl) var(--space-md)}
}
@media (min-width:1024px){
.product-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-2xl) var(--space-lg)}
}
/* Sparse-result handling: when a category/search returns only 1–3 items, the
fixed multi-column grid leaves the row looking lonely with empty cells to the
right. Constrain the grid to its content width and cap the per-card width so
2 items center as a pair, 1 item centers alone. */
.product-grid:has(> .product-card:nth-child(1):nth-last-child(1)){
grid-template-columns:minmax(0, 340px);
}
.product-grid:has(> .product-card:nth-child(1):nth-last-child(2)){
grid-template-columns:repeat(2, minmax(0, 320px));
}
@media (min-width:1024px){
.product-grid:has(> .product-card:nth-child(1):nth-last-child(1)){
grid-template-columns:minmax(0, 360px);
}
.product-grid:has(> .product-card:nth-child(1):nth-last-child(2)){
grid-template-columns:repeat(2, minmax(0, 320px));
}
.product-grid:has(> .product-card:nth-child(1):nth-last-child(3)){
grid-template-columns:repeat(3, minmax(0, 340px));
}
}
.product-card{display:flex;flex-direction:column;position:relative}
.product-media{
position:relative;
aspect-ratio:1/1;
background:var(--color-greige-soft);
overflow:hidden;
margin-bottom:var(--space-sm);
}
.product-media img{
width:100%;height:100%;object-fit:cover;
filter:saturate(.85);
transition:transform .3s ease;
}
/* Only apply hover scale on devices that genuinely support hover (desktop
pointer); on touch screens the "hover" sticks after first tap. */
@media (hover: hover){
.product-card:hover .product-media img{transform:scale(1.02)}
}
.product-badges{
position:absolute;top:var(--space-xs);left:var(--space-xs);
display:flex;flex-direction:column;gap:var(--space-2xs);
z-index:2;
}
/* Sale badge sits in the top-RIGHT corner so it doesn't collide with the
merchant-managed AppsItemLabel cluster in the top-left. */
.product-badges-sale{left:auto; right:var(--space-xs)}
/* ── No-items empty state (search 0 hits / empty category / shop with no items) ── */
.no-items{
max-width:560px;
margin:0 auto;
text-align:center;
padding:var(--space-2xl) var(--space-md);
}
@media (min-width:1024px){ .no-items{padding:var(--space-3xl) var(--space-md)} }
.no-items-eyebrow{
color:var(--color-ink-soft);
margin:0 0 var(--space-md);
}
.no-items-title{
margin:0 0 var(--space-md);
color:var(--color-ink);
line-height:1.45;
text-wrap:balance;
}
.no-items-rule{
display:block;
width:24px; height:1px;
background:var(--accent);
margin:var(--space-md) auto var(--space-lg);
}
.no-items-sub{
color:var(--color-ink-soft);
font-size:14px;
line-height:1.8;
margin:0 0 var(--space-xl);
}
.badge{
padding:4px 8px;
font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
background:var(--color-base);color:var(--color-ink);
border:var(--border-hairline);
}
.badge-new{background:var(--accent-soft);border-color:transparent;color:var(--color-ink)}
.badge-sale{background:var(--color-sale);color:var(--color-base);border-color:transparent}
.soldout-overlay{
position:absolute;inset:0;
background:rgba(250,247,242,.72);
display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
.soldout-overlay span{
font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;
color:var(--color-soldout);
border-top:1px solid var(--color-soldout);
border-bottom:1px solid var(--color-soldout);
padding:6px 12px;
}
.quick-add{
position:absolute;left:var(--space-sm);right:var(--space-sm);bottom:var(--space-sm);
background:var(--color-ink);color:var(--color-base);
font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
padding:10px 12px;
opacity:0; transform:translateY(6px);
transition:opacity .2s ease, transform .2s ease, background .2s ease;
z-index:2;
}
@media (hover:hover){
.product-card:hover .quick-add{opacity:1;transform:translateY(0)}
.quick-add:hover{background:var(--accent-deep)}
}
.product-card.sold-out .quick-add{display:none}
/* Calm hierarchy: name and price sit at near-equal size; the price is
differentiated by the Mincho display face + ink-soft color, not by
being larger. Larger price reads "discount store"; lien wants restraint. */
.product-name{
font-size:13px; line-height:1.45; font-weight:400;
margin:0 0 6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
color:var(--color-ink-soft);
}
/* Tag badge split out of the 【...】 title prefix by index-page JS.
A small colored dot + the JP tag word, set as an inline-eyebrow ahead of
the cleaned title. Dot color keys the category at a glance. */
/* The badge sits inline before the title text. We align it to the title's
text baseline (not the flex box edge) so the small label rides on the same
line as the 13px title. The dot is centered against the LABEL's cap-height
via a tuned translateY rather than align-items:center (which would center
against the flex box, drifting the dot above the optical text center). */
.name-tag{
display:inline-flex; align-items:baseline; gap:5px;
margin-right:7px;
vertical-align:baseline;
white-space:nowrap;
}
.name-tag-dot{
width:5px; height:5px; border-radius:50%;
background:var(--color-ink-muted);
flex:none;
/* Align the dot's center to the label's optical middle. The label is
baseline-aligned; its visual center sits a touch above the baseline, so
a small lift centers the dot against the glyphs. */
align-self:center;
transform:translateY(0.5px);
}
.name-tag-label{
font-size:10px; font-weight:600;
letter-spacing:0.08em;
line-height:1;
color:var(--color-ink-muted);
}
/* Per-tag dot colors — all drawn from the lien palette, kept muted. */
.name-tag[data-tag="sisters"] .name-tag-dot{background:var(--accent)}
.name-tag[data-tag="sisters"] .name-tag-label{color:var(--accent-deep)}
.name-tag[data-tag="set"] .name-tag-dot{background:#7C9473}
.name-tag[data-tag="set"] .name-tag-label{color:#5F7357}
.name-tag[data-tag="baby"] .name-tag-dot{background:#C9A36B}
.name-tag[data-tag="baby"] .name-tag-label{color:#A07E48}
.name-tag[data-tag="kid"] .name-tag-dot{background:#9A8C7A}
.name-tag[data-tag="kid"] .name-tag-label{color:#6F6354}
.name-tag[data-tag="babykid"] .name-tag-dot{
background:linear-gradient(135deg,#C9A36B 0 50%,#9A8C7A 50% 100%);
}
.name-tag[data-tag="babykid"] .name-tag-label{color:#8A7860}
.product-prices{display:flex;align-items:baseline;gap:var(--space-xs);flex-wrap:wrap}
/* Scope card price to .product-prices so it beats the ItemPage `.price-now`
rule (22/24px) that shares the same class name — otherwise the ItemPage
rule, defined later in the file, wins and blows the card price up. */
.product-prices .price-now{font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1;color:var(--color-ink)}
.price-sale{color:var(--color-sale)}
/* On sale: the sale price gets a small bump + sale color vs. the struck
original, but stays restrained — just enough to read at a glance. */
.product-prices:has(.price-original) .price-now{font-size:15px}
.price-original{
font-size:11px;color:var(--color-ink-muted);
text-decoration:line-through;text-decoration-thickness:1px;
letter-spacing:0.02em;
}
@media (max-width:639px){
/* Mobile cards narrow column: the strike-through original was almost the
same visual weight as the sale price. Shrink it further and let it
wrap below if needed. */
.product-prices{gap:2px var(--space-2xs)}
.product-prices:has(.price-original) .price-now{font-size:14px}
.price-original{font-size:10px; flex-basis:100%}
}
.product-state{
margin-top:var(--space-2xs);
color:var(--accent-deep);
letter-spacing:0.08em;text-transform:uppercase;
}
.product-card.sold-out .product-name,
.product-card.sold-out .product-prices{
color:var(--color-ink-muted);
}
.grid-cta{text-align:center;margin-top:var(--space-2xl)}
/* ───────── story ───────── */
.story{background:var(--color-base)}
.story-inner{
display:grid;
grid-template-columns:1fr;
gap:var(--space-xl);
align-items:center;
}
@media (min-width:1024px){
/* Photo column slightly wider so the 4:5 portrait reads as the visual
anchor; text column stays narrow for prose comfort. */
.story-inner{grid-template-columns:1.15fr 1fr; gap:var(--space-3xl)}
}
.story-photo{
position:relative;
aspect-ratio:4/5;
background:var(--color-greige-soft);
overflow:hidden;
}
.story-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85)}
.story-text .script{
color:var(--accent-deep);
display:block;margin-bottom:var(--space-sm);
}
.story-text h2{
font-family:var(--font-display);font-weight:500;
font-size:28px;line-height:1.35;
margin:0 0 var(--space-lg);
letter-spacing:0.01em;
text-wrap:pretty;
}
@media (min-width:1024px){ .story-text h2{font-size:36px} }
.story-text p{
color:var(--color-ink-soft);
font-size:15px;line-height:1.95;
margin:0 0 var(--space-lg);
text-wrap:pretty;
}
/* ───────── instagram ───────── */
/* Insta header reuses .section-head pattern; .insta-head adds the handle link
coloring + the sub-copy spacing. */
.insta-head .insta-handle{
color:inherit;
text-decoration:none;
transition:color .15s ease;
}
.insta-head .insta-handle:hover{color:var(--accent-deep)}
.insta-sub{
color:var(--color-ink-soft);
font-size:13px;
margin:var(--space-sm) 0 0;
text-align:center;
}
.insta-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:var(--space-xs);
}
@media (min-width:1024px){
.insta-grid{gap:var(--space-sm)}
}
/* On very narrow viewports, 5 columns crush — switch to a horizontal scroll
with a right-edge fade so the user sees there's more. Container needs
position:relative for the absolute fade. */
@media (max-width:480px){
.insta-grid{
grid-template-columns:repeat(5, 32vw);
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.insta-grid > *{scroll-snap-align:start}
.insta-grid::-webkit-scrollbar{display:none}
/* Fade on the parent section, not the grid itself (which is overflow:auto).
Insta section uses the page's cream base. */
section[aria-label="Instagram"]{position:relative}
section[aria-label="Instagram"]::after{
content:""; position:absolute;
top:0; right:0; bottom:0; width:36px;
background:linear-gradient(to right, transparent, var(--color-base));
pointer-events:none;
z-index:1;
}
}
.insta-tile{
aspect-ratio:1/1;
background:var(--color-greige);
overflow:hidden;
position:relative;
}
.insta-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:transform .5s ease}
.insta-tile:hover img{transform:scale(1.05)}
.insta-tile::after{
content:"";position:absolute;inset:0;
background:rgba(46,42,36,0);
transition:background .2s ease;
}
.insta-tile:hover::after{background:rgba(46,42,36,.18)}
/* ───────── footer ───────── */
.site-footer{
background:var(--color-base);
border-top:var(--border-hairline);
padding:var(--space-xl) 0 var(--space-lg);
margin-top:var(--space-xl);
}
@media (min-width:1024px){ .site-footer{padding:var(--space-3xl) 0 var(--space-lg);margin-top:var(--space-2xl)} }
/* Mobile: brand spans the full width on row 1, then Shop + Help sit side by
side on row 2 — keeps the footer from running long vertically. Desktop
reverts to the 3-column brand/Shop/Help layout. */
.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-lg) var(--space-md);
}
.footer-brand{grid-column:1 / -1}
@media (min-width:1024px){
.footer-grid{grid-template-columns:2fr 1fr 1fr;gap:var(--space-2xl)}
.footer-brand{grid-column:auto}
}
.footer-brand .wordmark{margin-bottom:var(--space-sm)}
.footer-brand .wordmark-main{font-size:30px}
.footer-brand .wordmark-sub{font-size:11px}
.footer-tag{
color:var(--color-ink-soft);font-size:13px;line-height:1.7;
margin:0 0 var(--space-md);max-width:360px;
}
@media (min-width:1024px){ .footer-tag{font-size:14px;line-height:1.8;margin-bottom:var(--space-lg)} }
.footer-tag .script{display:block;color:var(--accent-deep);margin-bottom:var(--space-2xs)}
.socials{display:flex;gap:var(--space-sm)}
.socials a{
width:36px;height:36px;
display:inline-flex;align-items:center;justify-content:center;
border:var(--border-hairline);
color:var(--color-ink);
transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.socials a:hover{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-base)}
.footer-col h4{
font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
color:var(--color-ink);
margin:0 0 var(--space-sm);
}
@media (min-width:1024px){ .footer-col h4{margin-bottom:var(--space-md)} }
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-col a{font-size:13px;color:var(--color-ink-soft)}
@media (min-width:1024px){ .footer-col a{font-size:14px} }
.footer-col a:hover{color:var(--color-ink)}
.footer-bottom{
margin-top:var(--space-xl);
padding-top:var(--space-md);
border-top:var(--border-hairline);
display:flex;flex-direction:column;align-items:center;
color:var(--color-ink-muted);
font-size:11px;letter-spacing:0.04em;
gap:4px;text-align:center;
}
@media (min-width:1024px){
.footer-bottom{
flex-direction:row;justify-content:space-between;align-items:center;
margin-top:var(--space-2xl);padding-top:var(--space-lg);
font-size:12px;text-align:left;gap:var(--space-md);
}
}
/* ───────── mobile drawer ───────── */
.scrim{
position:fixed;inset:0;background:rgba(46,42,36,.4);
opacity:0;pointer-events:none;transition:opacity .25s ease;
z-index:90;
}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
position:fixed;top:0;height:100%;
background:var(--color-base);
z-index:100;
transition:transform .3s ease;
display:flex;flex-direction:column;
box-shadow:none;
/* Drawer contents (head + search + nav + categories) often exceed viewport
on mobile when the category accordion expands. Scroll the whole drawer
vertically; lock horizontal scroll explicitly so the drawer never carries
a horizontal swipe over to the body or the browser back gesture. */
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
/* Block horizontal swipe on the drawer itself. */
touch-action:pan-y;
}
/* While the drawer is open, freeze any horizontally-scrollable child of the
body (mood strip, instagram strip, gallery thumbs, BASE's bnpl banner etc.)
so a stray swipe doesn't carry the body sideways and make the drawer
appear to "drift". */
body.drawer-open .mood-grid,
body.drawer-open .insta-grid,
body.drawer-open .gallery-thumbs{
overflow-x:hidden;
touch-action:pan-y;
}
.drawer-menu{
left:0;
/* Narrower than before (was 84%/340) so the underlying scrim has more
breathing room and the drawer reads as a panel, not as the whole page. */
width:min(82vw, 320px);
transform:translateX(-100%);
border-right:var(--border-hairline);
}
.drawer-menu.open{transform:translateX(0)}
.drawer-cart{
right:0;width:92%;max-width:420px;
transform:translateX(100%);
border-left:var(--border-hairline);
}
.drawer-cart.open{transform:translateX(0)}
.drawer-head{
display:flex;align-items:center;justify-content:space-between;
padding:var(--space-md) var(--space-xl);
border-bottom:var(--border-hairline);
min-height:60px;
}
.drawer-head .label{
color:var(--color-ink-soft);
letter-spacing:0.16em;
}
/* Drawer close X — ghost button: no border / no background. Just the X icon. */
.drawer-head .icon-btn[data-close-drawer]{
transition:color .15s ease;
}
.drawer-head .icon-btn[data-close-drawer]:hover{color:var(--accent-deep)}
.drawer-head .icon-btn[data-close-drawer] svg{stroke-width:1.4}
.drawer-nav{padding:var(--space-md) var(--space-xl)}
.drawer-nav a{
display:block; padding:var(--space-md) 0;
border-bottom:var(--border-hairline);
font-family:var(--font-display);
font-size:17px; font-weight:500;
letter-spacing:0.02em;
color:var(--color-ink);
text-decoration:none; /* kill default link underline that snuck in */
transition:color .15s ease;
}
.drawer-nav a:hover{color:var(--accent-deep)}
.drawer-nav a:last-child{border-bottom:0}
.drawer-nav .nav-en{
display:block;
font-family:var(--font-body);
font-size:10px; font-weight:500;
color:var(--color-ink-muted);
letter-spacing:0.16em;
text-transform:uppercase;
margin-top:3px;
}
/* Search sits at the TOP of the drawer (right under the head), so it's the
first thing the user sees when they click the search icon in the header. */
.drawer-search-wrap{
padding:var(--space-md) var(--space-xl);
border-bottom:var(--border-hairline);
background:var(--color-greige-soft);
}
.drawer-search{
display:flex;align-items:center;gap:var(--space-sm);
background:var(--color-base);
border:1px solid var(--color-hairline);
padding:10px 12px;
}
.drawer-search svg{color:var(--color-ink-soft); flex:0 0 auto}
.drawer-search input{
flex:1; border:0; background:transparent; outline:none;
font:inherit; font-size:14px;
color:var(--color-ink);
padding:0;
}
.drawer-search input::placeholder{color:var(--color-ink-muted)}
/* cart drawer body */
.cart-empty{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:var(--space-xl);gap:var(--space-md);
color:var(--color-ink-soft);
}
.cart-empty .script{color:var(--accent-deep)}
.cart-list{flex:1;overflow-y:auto;padding:var(--space-lg)}
.cart-line{
display:grid;grid-template-columns:72px 1fr auto;gap:var(--space-md);
padding:var(--space-md) 0;
border-bottom:var(--border-hairline);
}
.cart-line .thumb{
width:72px;aspect-ratio:4/5;background:var(--color-greige-soft);overflow:hidden;
}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.cart-line .meta{display:flex;flex-direction:column;gap:4px}
.cart-line .meta .name{font-size:13px;font-weight:500;line-height:1.4}
.cart-line .meta .qty{color:var(--color-ink-soft);font-size:12px}
.cart-line .meta button{
text-align:left;color:var(--color-ink-muted);
font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
margin-top:auto;text-decoration:underline;text-underline-offset:3px;
}
.cart-line .meta button:hover{color:var(--accent-deep)}
.cart-line .line-price{font-family:var(--font-display);font-weight:500;font-size:15px}
.cart-foot{
padding:var(--space-lg);
border-top:var(--border-hairline);
display:flex;flex-direction:column;gap:var(--space-md);
}
.cart-total{
display:flex;justify-content:space-between;align-items:baseline;
}
.cart-total .total-num{font-family:var(--font-display);font-weight:500;font-size:22px}
.cart-foot .note{color:var(--color-ink-muted);font-size:12px;text-align:center}
/* toast */
.toast{
position:fixed; left:50%; bottom:24px; transform:translate(-50%,24px);
background:var(--color-ink); color:var(--color-base);
padding:12px 20px; font-size:13px; letter-spacing:0.04em;
z-index:200; opacity:0; pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
max-width:90vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* image placeholder — used wherever real photography would be dropped in */
.img-fallback{
position:absolute;inset:0;
background:
repeating-linear-gradient(135deg, var(--color-greige-soft) 0 14px, var(--color-greige) 14px 28px);
display:flex;align-items:center;justify-content:center;
color:var(--color-ink-soft);
font-family:ui-monospace, "SF Mono", Menlo, monospace;
font-size:11px;letter-spacing:0.04em;
text-align:center;
padding:8px;
line-height:1.5;
}
/* .is-static: fill the parent that owns the aspect-ratio. Parent must be position:relative. */
.img-fallback.is-static{position:absolute;inset:0}
.img-fallback .ph-kicker{
display:block;
font-family:var(--font-script);
font-size:18px;
color:var(--accent-deep);
margin-bottom:4px;
letter-spacing:0;
}
/* ───────── BASE-injected chrome ─────────
{BASEMenuTag} ships a fixed-positioned cluster ( #baseMenu ) with the BASE
promotional logo + a built-in cart icon. We can't remove it without the
paid "BASE ロゴ非表示App" — but the official docs permit moving it.
Park it in the top-right corner at a smaller size so the storefront
header reclaims the prime top-left real estate. When the merchant later
installs the hide-logo app, the .base disappears and only the cart
icon remains in this corner. */
#baseMenu{
position:fixed; top:8px; right:8px;
z-index:60; /* sits above sticky .site-header (z-index:50) */
margin:0; padding:0;
background:var(--color-base);
border:var(--border-hairline);
border-radius:0;
box-shadow:none;
opacity:.85;
transition:opacity .2s ease;
}
#baseMenu:hover{opacity:1}
#baseMenu ul{
display:flex; align-items:center; gap:2px;
margin:0; padding:4px 6px;
list-style:none;
}
#baseMenu li{margin:0;padding:0;line-height:0}
#baseMenu img{
height:18px; width:auto; display:block;
/* desaturate the promo + cart bitmaps so they don't fight the brand palette */
filter:saturate(.4) opacity(.85);
}
#baseMenu a:hover img{filter:saturate(.6) opacity(1)}
/* Hide the BASE-supplied cart badge — the new design has no client-side cart UX. */
#baseMenu .cart-badge{display:none !important}
/* On narrow viewports the chip can crowd the header — pull it slightly off-screen so it doesn't compete with the wordmark, but stays reachable. */
@media (max-width:480px){
#baseMenu{top:6px; right:6px}
#baseMenu img{height:14px}
#baseMenu ul{padding:3px 5px}
}
/* ════════════════════════════════════════════════════════════════
ITEM PAGE (block ItemPage)
════════════════════════════════════════════════════════════════ */
.item-page{padding:0 0 var(--space-2xl)}
@media (min-width:1024px){ .item-page{padding:var(--space-xl) 0 var(--space-3xl)} }
/* ───── breadcrumb ───── */
.breadcrumb{
font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
color:var(--color-ink-muted);
margin-bottom:var(--space-lg);
display:flex; gap:var(--space-sm); align-items:center;
flex-wrap:wrap;
line-height:1.6;
}
.breadcrumb a{color:var(--color-ink-soft); text-decoration:none}
.breadcrumb a:hover{color:var(--accent-deep)}
.breadcrumb-current{
text-transform:none; letter-spacing:0;
color:var(--color-ink-muted);
font-size:12px;
/* truncate long titles in the breadcrumb */
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:50ch;
}
@media (max-width:639px){
.breadcrumb-current{max-width:22ch}
}
/* ───── split grid ───── */
/* `minmax(0, ...)` on every column prevents grid items from overflowing their tracks
when their content has a large intrinsic width (e.g. a 1432px image inside the gallery). */
.item-page-grid{
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:var(--space-lg); /* mobile: gallery → title gap tightened */
margin-bottom:var(--space-2xl);
align-items:start; /* don't stretch the gallery cell to match purchase column height */
}
@media (max-width:639px){
.item-page-grid{gap:var(--space-md)} /* even tighter on narrow phones */
}
@media (min-width:1024px){
.item-page-grid{
grid-template-columns:minmax(0, 1.25fr) minmax(380px, 1fr);
gap:var(--space-xl);
align-items:start;
}
}
/* ───── gallery (left column) ───── */
/* All gallery slides are absolutely positioned inside .gallery-main, which
holds aspect-ratio:1/1 (square — matches the product card crop). CRITICAL:
.item-gallery and .gallery-main must explicitly set width:100% so the
intrinsic width of ![]()
children doesn't bubble back up and blow out the
layout (otherwise the page overflows horizontally on mobile because every
![]()
's natural size becomes its container size). */
/* .item-gallery is a — the global section{padding:64px 0} rule
applies otherwise, adding huge top/bottom whitespace inside the grid cell.
Reset to 0 so the gallery is flush against grid gap only. */
.item-gallery{min-width:0; width:100%; padding:0}
.gallery-main{
position:relative;
width:100%;
aspect-ratio:1/1;
background:var(--color-greige-soft);
overflow:hidden;
}
.gallery-track{
list-style:none; margin:0; padding:0;
position:absolute; inset:0;
width:100%; height:100%;
}
.gallery-slide{
position:absolute; inset:0;
width:100%; height:100%;
opacity:0; transition:opacity .4s ease;
pointer-events:none;
}
.gallery-slide.is-active{opacity:1; pointer-events:auto}
.gallery-slide a{display:block; width:100%; height:100%}
.gallery-slide img{width:100%; height:100%; object-fit:cover; filter:saturate(.9)}
/* Gallery prev/next — circular hairline chip that sits softly on top of the
photo. Cream 60% fill so the underlying image bleeds through, hairline ring
in ink at low opacity, accent-deep on hover. Mobile uses swipe; arrows show
on desktop only. */
.gallery-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:36px; height:36px;
border-radius:50%;
background:rgba(250,247,242,.6);
border:1px solid rgba(46,42,36,.12);
color:var(--color-ink);
display:none; /* hidden by default — desktop opts in below */
align-items:center; justify-content:center;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, color .15s ease;
z-index:2;
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px); /* subtle frost so the chip reads on busy photos */
}
@media (min-width:1024px){
.gallery-nav{display:inline-flex; width:40px; height:40px}
.gallery-prev{left:var(--space-md)}
.gallery-next{right:var(--space-md)}
}
.gallery-nav:hover{
background:var(--color-base);
border-color:var(--color-ink);
color:var(--accent-deep);
}
.gallery-prev{left:var(--space-sm)}
.gallery-next{right:var(--space-sm)}
.gallery-nav[disabled]{opacity:.35; cursor:default; pointer-events:none}
/* Single-image item: drop prev/next + counter entirely. */
.gallery-main[data-single] .gallery-nav,
.gallery-main[data-single] .gallery-counter{display:none}
.gallery-counter{
position:absolute; bottom:var(--space-sm); right:var(--space-sm);
background:rgba(250,247,242,.85);
color:var(--color-ink-soft);
font-family:var(--font-body);
font-size:11px; letter-spacing:0.08em;
padding:4px 10px;
z-index:2;
border:var(--border-hairline);
}
/* Main-image zoom affordance: cursor + a small corner glyph hinting "tap to
enlarge". The glyph fades on hover so it never fights the photo. */
.gallery-slide a[data-lightbox]{cursor:zoom-in; display:block; position:relative}
.gallery-slide.is-active a[data-lightbox]::after{
content:""; position:absolute; top:var(--space-sm); right:var(--space-sm);
width:30px; height:30px; z-index:2; pointer-events:none;
background:rgba(250,247,242,.85); border:var(--border-hairline);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B635A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center;
opacity:.9; transition:opacity .2s;
}
.gallery-slide a[data-lightbox]:hover::after{opacity:0}
/* ───── LIGHTBOX overlay ───── */
body.lightbox-open{overflow:hidden}
.lightbox{
position:fixed; inset:0; z-index:200;
display:none; align-items:center; justify-content:center;
background:rgba(46,42,36,.94);
opacity:0; transition:opacity .22s ease;
}
.lightbox.is-open{display:flex; opacity:1}
.lightbox-stage{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none;
}
.lightbox-img{
max-width:92vw; max-height:88vh; width:auto; height:auto;
object-fit:contain; transform-origin:center center;
transition:transform .04s linear; will-change:transform;
-webkit-user-drag:none;
}
.lightbox.is-zoomed .lightbox-stage{cursor:grab}
.lightbox.is-zoomed .lightbox-img{cursor:grab}
.lightbox.is-loading .lightbox-img{opacity:.3}
.lightbox-close{
position:absolute; top:14px; right:14px; z-index:3;
width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
background:rgba(250,247,242,.12); color:#FAF7F2;
border:1px solid rgba(250,247,242,.3); cursor:pointer;
transition:background .2s;
}
.lightbox-close:hover{background:rgba(250,247,242,.24)}
.lightbox-nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:48px; height:48px; display:none; align-items:center; justify-content:center;
background:rgba(250,247,242,.1); color:#FAF7F2;
border:1px solid rgba(250,247,242,.28); cursor:pointer;
transition:background .2s;
}
@media (min-width:768px){ .lightbox-nav{display:inline-flex} }
.lightbox-nav:hover{background:rgba(250,247,242,.22)}
.lightbox-nav[hidden]{display:none}
.lightbox-prev{left:14px}
.lightbox-next{right:14px}
.lightbox-caption{
position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3;
color:rgba(250,247,242,.85); font-family:var(--font-body);
font-size:12px; letter-spacing:0.08em;
background:rgba(46,42,36,.5); padding:5px 14px;
border:1px solid rgba(250,247,242,.2);
}
/* Gallery thumbs strip — horizontal scroll with right-edge fade so users see
there are more thumbnails beyond the visible edge. Wrapper needs the fade;
the strip itself is overflow:auto. */
.gallery-thumbs-wrap{position:relative}
/* Right-edge fade-out indicating "there's more to scroll". Hidden when the
thumb strip has reached its end (data-thumbs-end) so the signal stays
truthful. JS toggles the attribute on scroll. */
.gallery-thumbs-wrap::after{
content:""; position:absolute;
top:0; right:0; bottom:0; width:40px;
background:linear-gradient(to right, transparent, var(--color-base));
pointer-events:none;
z-index:1;
opacity:1;
transition:opacity .15s ease;
}
.gallery-thumbs-wrap[data-thumbs-end]::after{opacity:0}
.gallery-thumbs{
display:flex; gap:var(--space-xs);
margin-top:var(--space-sm);
overflow-x:auto;
scrollbar-width:none;
}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
flex:0 0 auto;
width:64px; aspect-ratio:1/1;
padding:0; border:1px solid transparent;
background:var(--color-greige-soft);
overflow:hidden; cursor:pointer;
transition:border-color .15s ease, opacity .15s ease;
opacity:.7;
}
.gallery-thumb img{width:100%; height:100%; object-fit:cover}
.gallery-thumb:hover{opacity:1}
.gallery-thumb.is-active{border-color:var(--color-ink); opacity:1}
@media (min-width:1024px){
.gallery-thumb{width:72px}
}
/* ───── purchase column (right, sticky on desktop) ───── */
.item-purchase{position:relative}
@media (min-width:1024px){
.item-purchase-inner{
position:sticky;
top:calc(var(--information-banner-height, 0px) + 84px);
}
}
.item-title{
font-family:var(--font-display);
font-weight:500;
font-size:22px; line-height:1.4;
margin:0 0 var(--space-md);
letter-spacing:0.01em;
text-wrap:balance;
text-align:center; /* mobile centers because the column spans full width */
}
@media (min-width:1024px){
.item-title{text-align:left} /* desktop reverts to left in the narrow purchase column */
}
/* Desktop title sits between Heading L (24) and Display M (32). It must read
as the dominant element above the price, so price-now stays smaller. */
@media (min-width:1024px){ .item-title{font-size:26px; line-height:1.35} }
/* ItemPage title tag badge — same dot+label as cards, but on its own line
above the h1 (eyebrow-style) since the h1 is large. Inherits the title's
center/left alignment via the h1's text-align. */
.item-title-tag{
display:inline-flex; align-items:center; gap:6px;
margin:0 0 8px;
width:100%; /* force onto its own line above the title */
justify-content:center; /* mobile: matches centered title */
}
@media (min-width:1024px){ .item-title-tag{justify-content:flex-start} }
.item-title-tag-dot{
width:6px; height:6px; border-radius:50%;
background:var(--color-ink-muted); flex:none;
}
.item-title-tag-label{
font-family:var(--font-body);
font-size:11px; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase;
color:var(--color-ink-muted);
}
.item-title-tag[data-tag="sisters"] .item-title-tag-dot{background:var(--accent)}
.item-title-tag[data-tag="sisters"] .item-title-tag-label{color:var(--accent-deep)}
.item-title-tag[data-tag="set"] .item-title-tag-dot{background:#7C9473}
.item-title-tag[data-tag="set"] .item-title-tag-label{color:#5F7357}
.item-title-tag[data-tag="baby"] .item-title-tag-dot{background:#C9A36B}
.item-title-tag[data-tag="baby"] .item-title-tag-label{color:#A07E48}
.item-title-tag[data-tag="kid"] .item-title-tag-dot{background:#9A8C7A}
.item-title-tag[data-tag="kid"] .item-title-tag-label{color:#6F6354}
.item-title-tag[data-tag="babykid"] .item-title-tag-dot{background:linear-gradient(135deg,#C9A36B 0 50%,#9A8C7A 50% 100%)}
.item-title-tag[data-tag="babykid"] .item-title-tag-label{color:#8A7860}
.item-digital{color:var(--color-ink-soft); font-size:14px}
/* ───── price block ───── */
.item-price-block{
margin-bottom:var(--space-lg);
text-align:center;
}
@media (min-width:1024px){
.item-price-block{text-align:left}
}
.item-price-block .price-row{justify-content:center}
@media (min-width:1024px){
.item-price-block .price-row{justify-content:flex-start}
}
.item-price-block[data-soldout] .price-now{color:var(--color-ink-muted)}
.price-label{
font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--color-ink-soft); margin:0 0 var(--space-2xs);
}
.price-sub-label{
font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--color-ink-soft); margin:var(--space-sm) 0 var(--space-2xs);
}
.price-row{
display:flex; align-items:baseline; gap:var(--space-sm); flex-wrap:wrap;
margin:0 0 var(--space-xs);
}
/* design-tokens Price token: 18/20 display. ItemPage purchase price sits
between Price and Heading L — 22/24 — so the title remains dominant
while the price still reads as actionable. */
.price-now{
font-family:var(--font-display); font-weight:500;
font-size:22px; line-height:1; color:var(--color-ink);
}
@media (min-width:1024px){ .price-now{font-size:24px} }
.price-sale{color:var(--color-sale)}
.price-strike{
font-family:var(--font-body);
font-size:12px; color:var(--color-ink-muted);
text-decoration:line-through;
text-decoration-thickness:1px;
}
.price-tax{font-size:11px; color:var(--color-ink-muted); letter-spacing:0.04em}
.price-state{
margin:var(--space-sm) 0 0;
font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--color-ink-soft);
}
/* Stock-availability microcopy (in-stock / low-stock / out-of-stock) */
.price-stock{
display:inline-flex; align-items:center; gap:8px;
margin:var(--space-sm) 0 0;
font-size:12px; color:var(--color-ink-soft);
letter-spacing:0.04em;
}
.price-stock-dot{
width:7px; height:7px; border-radius:50%;
/* In-stock = muted sage green "available" signal. A soft glow ring keeps
it gentle (no saturated traffic-light green, which would clash with the
lien palette). */
background:#7C9473;
box-shadow:0 0 0 3px rgba(124,148,115,.18);
flex:none;
}
.price-stock[data-low] .price-stock-dot{background:#C97A55; box-shadow:0 0 0 3px rgba(201,122,85,.18)}
.price-stock[data-low]{color:#C97A55}
.price-stock[data-out] .price-stock-dot{background:var(--color-ink-soft); opacity:.4; box-shadow:none}
.price-stock[data-out]{color:var(--color-ink-muted)}
/* ── BASE purchase-button modal (restock notification / age verification) ──
Triggered on SOLD-OUT items and 18+ item pages. BASE injects ~200 lines of
inline CSS with rounded corners, default greys, and saturated error reds —
all of which collide with the lien aesthetic. Override the surface tokens. */
.purchaseButtonModal__wrapper{background:rgba(46,42,36,.5) !important}
.purchaseButtonModal__container{
background:var(--color-base) !important;
border:var(--border-hairline);
border-radius:0 !important;
box-shadow:none !important;
max-width:520px;
width:90% !important;
}
.purchaseButtonModal__title{
font-family:var(--font-display) !important;
font-weight:500 !important;
font-size:18px !important;
line-height:1.5 !important;
padding:var(--space-md) var(--space-lg) !important;
border-bottom:var(--border-hairline) !important;
color:var(--color-ink) !important;
}
.purchaseButtonModal__inner{
padding:var(--space-lg) var(--space-xl) !important;
color:var(--color-ink);
}
.purchaseButtonModal__text{
color:var(--color-ink) !important;
font-size:13px !important;
line-height:1.8 !important;
}
.purchaseButtonModal__label{
color:var(--color-ink-soft) !important;
font-weight:500 !important;
font-size:11px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
margin-bottom:var(--space-xs) !important;
}
.purchaseButtonModal__input{
background:var(--color-base) !important;
border:1px solid var(--color-hairline) !important;
border-radius:0 !important;
padding:12px 14px !important;
height:auto !important;
line-height:1.5 !important;
color:var(--color-ink) !important;
}
.purchaseButtonModal__input:focus{border-color:var(--color-ink) !important}
.purchaseButtonModal__information{
background:var(--color-greige-soft) !important;
border-radius:0 !important;
padding:var(--space-sm) var(--space-md) !important;
margin:var(--space-md) 0 var(--space-lg) !important;
}
.purchaseButtonModal__informationText{
color:var(--color-ink-soft) !important;
font-size:11px !important;
line-height:1.6 !important;
}
.purchaseButtonModal__information b{color:var(--color-ink); font-weight:500}
.purchaseButtonModal__btn{
background:var(--color-ink) !important;
color:var(--color-base) !important;
border:0 !important;
border-radius:0 !important;
height:auto !important;
line-height:1 !important;
padding:16px 24px !important;
font-family:var(--font-body) !important;
font-weight:500 !important;
font-size:13px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
width:100% !important;
max-width:100% !important;
transition:background .2s ease !important;
}
.purchaseButtonModal__btn:hover{background:var(--accent-deep) !important; opacity:1 !important}
.purchaseButtonModal__btn--close{background:transparent !important; color:var(--color-ink) !important; border:1px solid var(--color-hairline) !important}
.purchaseButtonModal__btn--close:hover{background:var(--color-ink) !important; color:var(--color-base) !important; border-color:var(--color-ink) !important}
.purchaseButtonModal__error{
background:transparent !important;
border:1px solid var(--color-sale) !important;
border-radius:0 !important;
color:var(--color-sale) !important;
font-weight:500 !important;
}
/* success state */
.is_success .purchaseButtonModal__resultText{
background:transparent !important;
border:1px solid var(--color-success) !important;
border-radius:0 !important;
color:var(--color-success) !important;
font-weight:500 !important;
padding:var(--space-md) !important;
}
/* close X icon */
.purchaseButtonModal__closeIcon::before,
.purchaseButtonModal__closeIcon::after{background:var(--color-ink) !important}
/* ───── BASE-rendered BNPL ("PAY ID 後払い") banner ─────
{ItemBnplBannerTag} emits a .bnplBanner row above the form. BASE's default
style is a saturated grey pill — calm it down to a lien hairline strip. */
.item-purchase .bnplBanner{
margin:var(--space-md) 0;
padding:10px 14px;
background:transparent;
border:var(--border-hairline);
border-radius:0;
font-size:11px;
line-height:1.5;
color:var(--color-ink-soft);
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.item-purchase .bnplBanner__logo{
filter:saturate(.4) opacity(.85);
height:12px; width:auto;
}
.item-purchase .bnplBanner b{
font-weight:500;
color:var(--color-ink);
}
.item-purchase .bnplBanner__help{
background:transparent; border:0;
width:18px; height:18px;
color:var(--color-ink-muted);
cursor:pointer;
padding:0;
display:inline-flex; align-items:center; justify-content:center;
}
.item-purchase .bnplBanner__help:hover{color:var(--color-ink)}
/* ───── purchase form ───── */
.item-form{margin-bottom:var(--space-lg)}
/* container for JS-injected variant chips/swatches */
.item-variants{margin-bottom:var(--space-md)}
.item-variants:empty{display:none}
.variant-group{margin-bottom:var(--space-lg)}
.variant-group-label{
font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--color-ink-soft); margin:0 0 var(--space-sm);
font-weight:500;
}
.variant-chip-row{display:flex; flex-wrap:wrap; gap:var(--space-xs)}
.variant-chip{
padding:10px 16px;
border:1px solid var(--color-hairline);
background:var(--color-base);
color:var(--color-ink);
font-size:14px; /* design-tokens Body M */
cursor:pointer;
transition:border-color .15s ease, background .15s ease;
}
.variant-chip:hover{border-color:var(--color-ink)}
.variant-chip.is-active{
border-color:var(--color-ink); background:var(--color-ink); color:var(--color-base);
}
.variant-chip[disabled]{
opacity:.35; cursor:not-allowed;
text-decoration:line-through;
}
.variant-swatch{
width:32px; height:32px; border-radius:50%;
border:2px solid var(--color-hairline);
cursor:pointer; padding:0;
background-size:cover; background-position:center;
transition:border-color .15s ease;
}
.variant-swatch.is-active{border-color:var(--color-ink)}
/* Native select / amount input — BASE renders