/* ───────── 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 — Variant A (Dusty Pink), the everyday mode.
SEASONAL FLIP to Variant B (Mustard): swap the 4 values below to the
commented ones, then find-replace `%23B07F7F` → `%2395683A` across this
file (the hand-drawn SVG ornaments hard-code accent-deep inside data
URIs — CSS variables can't reach them). Optionally re-tint the favicon
+ OGP hairline on R2 (see CLAUDE.md "Share surfaces"). */
--accent:#D4A5A5; /* B: #C8965A */
--accent-soft:#EBCFCF; /* B: #E5C9A0 */
--accent-deep:#B07F7F; /* B: #95683A */
--color-sale:#B07F7F; /* B: #95683A */
--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{text-decoration:none;color:inherit}
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{font-style:normal;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)}
}
/* Specimen-plate treatment (June 2026): a paper mat + hairline frame +
museum-label caption around each landscape photo — vintage natural-
history-book plates. Landscape 3:2 photo keeps the strip thinner than
the category cards above. */
.mood-tile{
display:flex; flex-direction:column;
background:var(--color-paper);
border:1px solid var(--color-hairline);
padding:7px 7px 0;
position:relative;
}
.mood-photo{
position:relative; display:block;
width:100%;
aspect-ratio:3/2;
background:var(--color-greige);
overflow:hidden;
}
.mood-photo img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
filter:saturate(.85);
transition:transform .6s ease;
}
.mood-tile:hover .mood-photo img{transform:scale(1.04)}
.mood-fig{
display:block; text-align:center;
font-size:10px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase;
color:var(--color-ink-muted);
padding:7px 4px 8px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ───────── 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)}
/* ───────── grid editorial layer (June 2026 design pass) ───────── */
/* Soft hairline frame on card photos: vendor photos arrive with wildly
different backgrounds (props, hangers, interiors); a quiet inner frame
mats them onto the page and reads "curated", not "catalog". Inset ring
instead of border so the 1:1 box model stays untouched. */
.product-media::after{
content:"";
position:absolute; inset:0; z-index:2;
border:1px solid rgba(46,42,36,.06);
pointer-events:none;
}
/* Featured first card: on the main IndexPage view (the only view with a
.hero) the first product becomes a HORIZONTAL card spanning 2 columns ×
1 row from tablet up — photo stays at the normal 1-column size (vendor
photos don't survive enlargement); the editorial feel comes from the
whitespace, a "Just in" eyebrow, and larger type beside the photo.
Browsers without :has() simply keep the uniform grid. */
@media (min-width:640px){
body:has(.hero) #mainContent > .product-card:first-child{
grid-column:span 2;
flex-direction:row;
align-items:center;
gap:var(--space-lg);
}
body:has(.hero) #mainContent > .product-card:first-child .product-media{
flex:0 0 calc(50% - var(--space-lg)/2);
margin-bottom:0;
}
body:has(.hero) #mainContent > .product-card:first-child .product-info{
min-width:0;
padding-right:var(--space-md);
}
body:has(.hero) #mainContent > .product-card:first-child .product-info::before{
content:"Just in";
display:block;
font-size:11px; font-weight:500;
letter-spacing:0.12em; text-transform:uppercase;
color:var(--accent-deep);
margin-bottom:var(--space-sm);
}
body:has(.hero) #mainContent > .product-card:first-child .product-name{
font-size:16px; line-height:1.6;
-webkit-line-clamp:3;
color:var(--color-ink);
margin-bottom:var(--space-sm);
}
body:has(.hero) #mainContent > .product-card:first-child .product-prices .price-now{
font-size:18px;
}
}
@media (min-width:1024px){
body:has(.hero) #mainContent > .product-card:first-child .product-name{
font-size:18px;
}
}
/* Editorial break tile: quiet typographic pause moved into the grid after
the 8th card by index-page JS. Text-only on purpose — calm against the
vendor photos around it. */
.grid-editorial[hidden]{display:none}
.grid-editorial{
grid-column:1 / -1;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center;
background:var(--color-greige-soft);
padding:var(--space-2xl) var(--space-md);
}
@media (min-width:640px){
/* span 2 (not full row): with the tile inserted after the 12th card and
the featured first card occupying 2 cells (horizontal, 1 row), cells
before the tile = 13 → 13 mod 3 = 1 and 13 mod 4 = 1, so a 2-cell tile
closes the row exactly at 3-col (640+) and 4-col (1024+). Without
:has() (no featured card) it's 12 cells → also closes both. Don't move
the insertion index without redoing this arithmetic. */
.grid-editorial{grid-column:span 2}
}
@media (min-width:1024px){
.grid-editorial{padding:var(--space-2xl) var(--space-xl)}
}
.grid-editorial-script{
color:var(--accent-deep);
margin:0 0 var(--space-xs);
}
.grid-editorial-title{
font-family:var(--font-display);
font-size:20px; font-weight:500; line-height:1.5;
color:var(--color-ink);
margin:0;
}
@media (min-width:1024px){ .grid-editorial-title{font-size:22px} }
.grid-editorial-rule{
display:block; width:24px; height:1px;
background:var(--accent);
margin:var(--space-md) auto;
}
.grid-editorial-copy{
font-size:13px; line-height:1.8;
color:var(--color-ink-soft);
margin:0 0 var(--space-lg);
}
/* ───────── scroll reveal (June 2026 design pass) ───────── */
/* Progressive enhancement: footer JS stamps [data-reveal] + a per-sibling
stagger delay, then flips .is-revealed via IntersectionObserver. Without
JS nothing is hidden; with prefers-reduced-motion the global kill-switch
makes the transition instant. */
[data-reveal]{
opacity:0;
transform:translateY(14px);
transition:opacity .65s ease, transform .65s ease;
transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed{
opacity:1;
transform:none;
}
/* Hero load-in: one orchestrated entrance, CSS-only. */
@keyframes hero-in{
from{opacity:0; transform:translateY(16px)}
to{opacity:1; transform:none}
}
.hero-script{animation:hero-in .8s ease both .15s}
.hero-title{animation:hero-in .8s ease both .3s}
.hero-content .btn{animation:hero-in .8s ease both .5s}
/* ───────── vintage-plate layer (June 2026) ───────── */
/* Paper grain: a near-invisible tiled fractal-noise wash over everything,
like the tooth of old book paper. Sits above ALL chrome (drawer/lightbox
included — that's intentional, it reads as film grain) at 3.5% opacity.
Inline SVG data URI, no network request, no JS. */
body::after{
content:"";
position:fixed; inset:0;
z-index:99999;
pointer-events:none;
opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hand-drawn botanical sprigs: 1.3px-stroke cotton-sprig ornaments in
accent-deep, echoing vintage botanical plates. Three placements: above
every section head, atop the editorial tile, and as a footer divider. */
.section-head::before{
content:"";
display:block;
width:34px; height:24px;
margin:0 auto var(--space-xs);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M24 30C24 22 24 14 24 8'/%3E%3Ccircle cx='24' cy='5.5' r='3'/%3E%3Cpath d='M24 19C19 17 16 13 15.5 9C20 10.5 23 14 24 19'/%3E%3Cpath d='M24 24C29 22 32 18 32.5 14C28 15.5 25 19 24 24'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.grid-editorial::before{
content:"";
display:block;
width:42px; height:26px;
margin:0 auto var(--space-sm);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 32'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M28 30C28 21 28 13 28 7'/%3E%3Ccircle cx='28' cy='4.5' r='2.6'/%3E%3Cpath d='M28 27C22 25 17.5 20 16.5 14'/%3E%3Ccircle cx='15.5' cy='12' r='2.2'/%3E%3Cpath d='M28 27C34 25 38.5 20 39.5 14'/%3E%3Ccircle cx='40.5' cy='12' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.site-footer > .container::before{
content:"";
display:block;
width:42px; height:26px;
margin:0 auto var(--space-xl);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 32'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M28 30C28 21 28 13 28 7'/%3E%3Ccircle cx='28' cy='4.5' r='2.6'/%3E%3Cpath d='M28 27C22 25 17.5 20 16.5 14'/%3E%3Ccircle cx='15.5' cy='12' r='2.2'/%3E%3Cpath d='M28 27C34 25 38.5 20 39.5 14'/%3E%3Ccircle cx='40.5' cy='12' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
/* Pressed-flower corner ornaments on product cards: tiny stroke-only
motifs tucked just OUTSIDE a card's top corner (on the page background,
never over the photo), like flowers slipped behind album photos. Four
motifs on staggered nth-child cycles (6/9/12/15) read as random scatter
(~1 card in 3) but are deterministic — no layout shift, works for
infinite-scroll appends, overlapping cycles just override (last wins).
The card link/badges are untouched: pointer-events none, z-index 3. */
#mainContent > .product-card::before{
position:absolute; z-index:3;
width:20px; height:20px;
pointer-events:none;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
/* mini cotton sprig, tucked top-left */
#mainContent > .product-card:nth-child(6n+2)::before{
content:""; top:-8px; left:-7px; transform:rotate(-18deg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M16 28C16 20 16 12 16 8'/%3E%3Ccircle cx='16' cy='6' r='2.4'/%3E%3Cpath d='M16 18C12 16.5 9.5 13 9 9.5C13 11 15 14 16 18'/%3E%3Cpath d='M16 22C20 20.5 22.5 17 23 13.5C19 15 17 18 16 22'/%3E%3C/g%3E%3C/svg%3E");
}
/* daisy asterisk, top-right */
#mainContent > .product-card:nth-child(9n+5)::before{
content:""; top:-7px; right:-6px; left:auto; transform:rotate(14deg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.8 2.8M15.2 15.2L18 18M18 6l-2.8 2.8M8.8 15.2L6 18'/%3E%3C/g%3E%3C/svg%3E");
}
/* single leaf with vein, top-left */
#mainContent > .product-card:nth-child(12n+10)::before{
content:""; top:-8px; left:-6px; transform:rotate(8deg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cg fill='none' stroke='%23A09689' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M5 19C7 12 12 7 21 5C19 12 13 17 5 19Z'/%3E%3Cpath d='M7 17C11 13 15 9 19 7'/%3E%3C/g%3E%3C/svg%3E");
}
/* sparkle + dots, top-right */
#mainContent > .product-card:nth-child(15n+12)::before{
content:""; top:-6px; right:-5px; left:auto;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23B07F7F' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3C11.5 6.5 12.8 7.8 16 8.3C12.8 8.8 11.5 10.1 11 13.6C10.5 10.1 9.2 8.8 6 8.3C9.2 7.8 10.5 6.5 11 3Z'/%3E%3Ccircle cx='18' cy='15.5' r='1.1'/%3E%3Ccircle cx='7' cy='17.5' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
}
/* ───────── stitch details (June 2026) ───────── */
/* Running-stitch (dashed) lines replace selected hairlines — a sewing
motif that belongs to a clothing shop. Kept to accents: never on
structural borders like the header or footer rules. */
.grid-editorial{
outline:1px dashed var(--accent);
outline-offset:-8px;
}
.badge{border-style:dashed}
.badge-sale{
outline:1px dashed rgba(250,247,242,.6);
outline-offset:-3px;
}
.badge-new{
outline:1px dashed rgba(46,42,36,.25);
outline-offset:-3px;
}
.section-rule{
height:0 !important;
background:none !important;
border-top:1.5px dashed var(--accent);
width:28px;
}
/* ───────── chapter numbering (June 2026) ───────── */
/* Tiny roman numerals before every section eyebrow — the page reads like
plates in one book. CSS counter, so category/search/Item pages number
their own sections automatically. */
body{counter-reset:plate}
.section-head{counter-increment:plate}
.section-head .eyebrow::before{
content:counter(plate, upper-roman) " · ";
color:var(--color-ink-muted);
}
/* ───────── 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;
/* 16px is load-bearing: iOS Safari force-zooms the page on focus of any
input under 16px. Don't shrink this below 16. */
font:inherit; font-size:16px;
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