/* ============================================================================
   Beauty Grace EX — stylesheet
   Japanese-web-design skill build.  Mode B (hero/brand) → Mode A (detail/shop).
   Palette derived from the branded blister (BG gold-on-dark monogram; gold /
   white / orange).  Single gold accent on a restrained washi field.
   ========================================================================== */

/* ---- 1. Design tokens (themeable custom properties) --------------------- */
:root {
  /* Ground — warm washi ivory, not sterile white */
  --washi:        #FBF8F1;
  --washi-deep:   #F4ECDD;   /* alt section ground */
  --washi-veil:   #FCFAF4;
  --card:         #FFFFFF;

  /* Ink — warm calligraphic near-black (color.md: black-on-white = considered) */
  --ink:          #241E15;
  --ink-soft:     #4B4235;
  --ink-faint:    #756A59;
  --ink-field:    #221C14;   /* dark field for gold-on-dark */
  --ink-field-2:  #322A1E;

  /* Gold — the single cultural accent, used sparingly (color.md) */
  --gold:         #B8912F;   /* brand gold; large/decorative use */
  --gold-bright:  #E7C877;   /* champagne highlight, decorative only */
  --gold-champ:   #CBAA57;
  --gold-deep:    #856618;   /* darkened — text-safe on light (>=4.5:1) */
  --gold-line:    #E4CF97;   /* hairline gold */

  /* Ember — orange from the blister label; minor warm echo only */
  --ember:        #C56A1E;
  --ember-soft:   #F6E7D5;

  /* Hairlines & neutrals */
  --line:         #E7DCC6;
  --line-soft:    #EFE7D6;

  /* Semantic */
  --ok:           #2E7D52;
  --alert:        #B4472B;
  --alert-bg:     #FbF1EC;

  /* Type */
  --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho", serif;
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  /* Rhythm */
  --measure:   34em;    /* ~34 JP characters */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.6rem, 7vw, 6rem);
  --radius:    3px;     /* restrained; not the identical-rounded-card AI tell */
  --shadow-1:  0 1px 2px rgba(36,30,21,.05), 0 8px 24px -12px rgba(36,30,21,.18);
  --shadow-2:  0 2px 6px rgba(36,30,21,.07), 0 24px 60px -28px rgba(36,30,21,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- 2. Reset & base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--washi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;   /* proportional JP metrics — tightens kana */
  overflow-x: hidden;
}

/* No italics anywhere — CSS obliques smudge Japanese (typography.md) */
i, em, cite, address, .no-italic { font-style: normal; }
em { font-weight: 700; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
:focus-visible {
  outline: 2.5px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- 3. Typography scale ----------------------------------------------- */
.mincho { font-family: var(--mincho); }
.gothic { font-family: var(--gothic); }
.nb { white-space: nowrap; }   /* keep a JP phrase together (avoid か/ら orphans) */

h1, h2, h3 { font-family: var(--mincho); font-weight: 600; margin: 0; line-height: 1.5; letter-spacing: .06em; }

.display {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  line-height: 1.42;
  letter-spacing: .07em;
}
.section-head { text-align: left; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
/* functional section label — carries the section name; NOT a tracked-out
   decorative kicker (no leading gold rule, restrained tracking) */
.eyebrow {
  font-family: var(--gothic);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  margin: 0 0 .8rem;
}
.eyebrow::before {                 /* a section index, real wayfinding info */
  content: attr(data-index);
  font-family: var(--mincho);
  font-size: .82em;
  color: var(--gold-deep);
  letter-spacing: 0;
}
.section-title {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  letter-spacing: .08em;
}
.section-title .sub {
  display: block;
  font-family: var(--gothic);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin-top: .9rem;
}
p { margin: 0 0 1.2em; max-width: var(--measure); }
.lead { font-size: 1.06rem; color: var(--ink-soft); }
/* balance headline lines / prevent single-character orphans (る。/です。) */
h1, h2, h3, .display, .section-title, .hero__title, .hero__tate,
.narrative__lead, .mband__copy h2, .closing__title { text-wrap: balance; }
p, li, figcaption, .rcard__q, .active-detail__role { text-wrap: pretty; }

/* ---- 4. Layout scaffolding --------------------------------------------- */
.wrap { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(920px, 100% - var(--gutter) * 2); margin-inline: auto; }
section { padding-block: var(--section-y); position: relative; }
.bg-deep { background: var(--washi-deep); }
.bg-ink  { background: var(--ink-field); color: var(--washi); }
.bg-ink h2, .bg-ink h3 { color: var(--washi); }
.bg-ink .eyebrow { color: rgba(251,248,241,.72); }
.bg-ink .eyebrow::before { color: var(--gold-bright); }
.bg-ink .section-title .sub { color: rgba(251,248,241,.6); }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

/* pill / small labels */
.tag {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  padding: .3em .8em; border-radius: 2px;
  background: var(--washi-deep); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tag.gold { background: transparent; color: var(--gold-deep); border-color: var(--gold-line); }
.tag.ember { background: var(--ember-soft); color: var(--ember); border-color: #EAD0B4; }

/* ---- 5. Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--gothic); font-weight: 700; font-size: .98rem; letter-spacing: .1em;
  padding: 1rem 1.9rem; border: 1.5px solid transparent; border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  line-height: 1;
}
/* Primary: gold field + dark ink text — passes contrast, reads premium */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 62%, var(--gold-deep) 130%);
  color: #1A140A;
  box-shadow: 0 10px 26px -12px rgba(133,102,24,.75);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(133,102,24,.85); }
.btn-primary:active { transform: translateY(0); }
/* Secondary: ink outline, quiet */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--washi); }
.btn-on-ink { background: transparent; color: var(--washi); border-color: rgba(251,248,241,.5); }
.btn-on-ink:hover { background: var(--washi); color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 2.2rem; font-size: 1.04rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- 6. Header / nav --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,248,241,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-1); }
.nav {
  display: flex; align-items: center; gap: 1.5rem;
  height: 72px;
  width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #2A2118, #14100A);
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  font-family: var(--mincho); font-weight: 700; color: var(--gold-bright);
  font-size: .96rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
}
.brand__name { font-family: var(--mincho); font-weight: 600; font-size: 1.02rem; letter-spacing: .1em; }
.brand__name small { display: block; font-family: var(--gothic); font-weight: 500; font-size: .62rem; letter-spacing: .24em; color: var(--ink-faint); }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a { font-size: .86rem; font-weight: 500; letter-spacing: .1em; color: var(--ink-soft); position: relative; padding: .3em 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__cart {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .84rem; font-weight: 700; letter-spacing: .08em;
  padding: .62em 1.05em; border-radius: 3px;
  background: var(--ink-field); color: var(--washi);
  border: 1px solid var(--ink-field);
}
.nav__cart:hover { background: var(--ink-field-2); }
.nav__cart .count {
  min-width: 1.4em; height: 1.4em; padding: 0 .3em;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--gold); color: #1A140A; font-size: .7rem; line-height: 1;
}
.nav__toggle { display: none; }

/* ---- 7. Hero (vertical editorial — tategaki display + composed product) - */
.hero {
  position: relative; overflow: hidden;
  min-height: min(94vh, 900px);
  display: flex; flex-direction: column;
  padding: 0;
}
/* warm "inner-glow" ground + structural seigaiha band (Ma via asymmetry) */
.hero__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 62% at 24% 42%, #F6E3C4 0%, #FBEFD9 30%, var(--washi) 66%),
    linear-gradient(180deg, var(--washi) 0%, #FCF6EC 100%);
}
.hero__wagara {                    /* structural low-opacity band, never behind body text */
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background-image: url("../assets/pattern/seigaiha.svg");
  background-size: 104px 104px;
  opacity: .07;
  -webkit-mask-image: linear-gradient(transparent, #000 74%);
          mask-image: linear-gradient(transparent, #000 74%);
}

.hero__stage {
  position: relative; z-index: 1; flex: 1;
  width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

/* product composed off the left edge — Fukinsei; blended onto the ground */
.hero__product {
  position: absolute; left: -7%; top: 46%; z-index: 1; margin: 0;
  width: min(720px, 60vw);
  transform: translateY(-50%) rotate(-7deg);
  animation: heroProd 1.1s var(--ease) both;
}
.hero__product img {
  position: relative; z-index: 1;
  mix-blend-mode: multiply;         /* drops the photo's white box onto the amber ground */
  filter: contrast(1.05) saturate(1.06);
}
.hero__aura {                       /* honest "inner glow" — mood, no medical claim */
  position: absolute; inset: -22% -18%; z-index: 0;
  background: radial-gradient(46% 42% at 54% 46%, rgba(233,180,96,.6), rgba(233,180,96,0) 70%);
  filter: blur(10px);
}
.hero__cast {                       /* cast shadow — anchors product on a surface */
  position: absolute; left: 12%; right: 6%; bottom: -6%; height: 42px; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(58,42,20,.28), rgba(58,42,20,0) 72%);
  transform: rotate(-7deg);
}

/* tategaki Mincho headline — the dominant, distinctly-Japanese type move */
.hero__tate {
  grid-column: 2; justify-self: end;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.72; letter-spacing: .18em;
  color: var(--ink);                /* single color — no gold single-word */
  height: min(64vh, 560px); margin: 0;
  text-align: start;
  animation: heroHead 1s var(--ease) .12s both;
}

/* lower horizontal band: yokogaki lede + price + ONE dominant CTA */
.hero__band {
  position: relative; z-index: 2;
  width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid var(--line-soft);
  animation: heroBand .9s var(--ease) .28s both;
}
.hero__lede p { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.95; }
.hero__lede .hero__meta { margin-top: .9rem; font-size: .78rem; color: var(--ink-faint); max-width: none; }
.hero__buy { text-align: right; }
.hero__price { display: flex; align-items: baseline; justify-content: flex-end; gap: .7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hero__price .now { font-family: var(--mincho); font-size: 2.3rem; font-weight: 700; letter-spacing: .02em; }
.hero__price .now .yen { font-size: 1.15rem; margin-right: .08em; }
.hero__price .was { color: var(--ink-faint); text-decoration: line-through; font-size: 1rem; }
.hero__price .off { background: var(--ember); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em; padding: .3em .6em; border-radius: 2px; }
.hero__act { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.hero__quiet {                      /* quiet secondary — a text link, not a twin button */
  font-size: .9rem; font-weight: 600; color: var(--ink); letter-spacing: .06em;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.hero__quiet:hover { color: var(--gold-deep); }

@keyframes heroProd { from { opacity: 0; transform: translateY(-50%) rotate(-7deg) translateX(-42px) scale(1.02); } to { opacity: 1; transform: translateY(-50%) rotate(-7deg); } }
@keyframes heroHead { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes heroBand { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__product, .hero__tate, .hero__band { animation: none; }
}

/* ---- 8. Ingredient showcase (signature interactive) -------------------- */
.showcase__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.actives-cluster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem;
}
.active-btn {
  position: relative; aspect-ratio: 1; border: 0; background: transparent; padding: 0;
  border-radius: 50%;
}
.active-btn .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 36% 30%, #fff, #F4ECDB);
  display: grid; place-content: center; text-align: center; gap: .1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.active-btn .ic { width: 27px; height: 27px; color: var(--gold-deep); margin: 0 auto .28rem; opacity: .92; transition: transform .35s var(--ease); }
.active-btn:hover .ic { transform: scale(1.08); }
.active-btn .nm  { font-family: var(--mincho); font-size: .78rem; font-weight: 700; color: var(--ink); letter-spacing: .02em; line-height: 1.2; }
.active-btn .mg  { font-size: .64rem; color: var(--gold-deep); letter-spacing: .02em; margin-top: .1rem; }
.active-btn:hover .ring,
.active-btn:focus-visible .ring { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--gold); }
.active-btn[aria-pressed="true"] .ring {
  border-color: var(--gold-deep);
  background: radial-gradient(circle at 36% 30%, #FCF4E0, #EAD9AE);
  box-shadow: 0 0 0 4px rgba(203,170,87,.22), var(--shadow-1);
}
/* stagger offsets — fukinsei, an intentionally uneven cluster */
.active-btn:nth-child(2)  { transform: translateY(14px); }
.active-btn:nth-child(4)  { transform: translateY(22px); }
.active-btn:nth-child(6)  { transform: translateY(-8px); }
.active-btn:nth-child(7)  { transform: translateY(10px); }
@media (max-width: 900px) { .active-btn { transform: none !important; } }

.active-detail {
  position: sticky; top: 96px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-1); min-height: 300px;
}
.active-detail__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.1rem; }
.active-detail__icon { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #FCF4E0, #EAD9AE); border: 1px solid var(--gold-line); color: var(--gold-deep); }
.active-detail__icon svg { width: 30px; height: 30px; }
.active-detail__eyebrow { font-size: .74rem; letter-spacing: .12em; color: var(--gold-deep); font-weight: 600; margin: 0; }
.active-detail__name { font-family: var(--mincho); font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin: .25rem 0 .15rem; letter-spacing: .04em; }
.active-detail__en { font-size: .8rem; color: var(--ink-faint); letter-spacing: .08em; margin-bottom: 1rem; }
.active-detail__amt {
  display: inline-flex; align-items: baseline; gap: .4em;
  font-family: var(--mincho); font-weight: 700; color: var(--gold-deep);
  font-size: 1.5rem; margin-bottom: 1.2rem;
}
.active-detail__amt small { font-family: var(--gothic); font-size: .68rem; color: var(--ink-faint); font-weight: 500; }
.active-detail__role { font-size: .96rem; color: var(--ink-soft); line-height: 1.9; }
.active-detail__note { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .76rem; color: var(--ink-faint); }
.active-detail.swap { animation: swapIn .4s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .active-detail.swap { animation: none; } }

/* ---- 9. "From within" narrative (Mode B) ------------------------------- */
.narrative { text-align: center; }
.narrative .wrap-narrow { max-width: 760px; }
.narrative__lead { font-family: var(--mincho); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 2; letter-spacing: .08em; margin-inline: auto; max-width: 24em; }
.narrative__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: clamp(2.5rem, 5vw, 3.6rem); text-align: left; }
.narrative__col h3 { font-size: 1.1rem; letter-spacing: .06em; margin-bottom: .6rem; }
.narrative__col h3 span { color: var(--gold-deep); }
.narrative__col p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.narrative__col { padding-top: 1.2rem; border-top: 2px solid var(--gold-line); }

/* ---- 10. Product detail / spec (Mode A density) ------------------------ */
.detail__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table caption { text-align: left; font-family: var(--mincho); font-size: 1.15rem; margin-bottom: .8rem; letter-spacing: .05em; }
.spec-table th, .spec-table td { padding: .8em .9em; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table thead th { font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); font-weight: 600; background: var(--washi-deep); }
.spec-table tbody th { font-weight: 600; color: var(--ink); width: 42%; }
.spec-table tbody th small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .72rem; letter-spacing: .04em; }
.spec-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.spec-table tbody tr:hover { background: var(--washi-veil); }
.basis-note {
  margin-top: 1rem; font-size: .78rem; color: var(--ink-faint);
  background: var(--washi-deep); border-left: 3px solid var(--gold); padding: .8em 1em; border-radius: 2px;
  max-width: none;
}

.spec-aside { display: grid; gap: 1.2rem; position: sticky; top: 96px; }
.spec-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-1); }
.spec-card h3 { font-size: 1rem; letter-spacing: .06em; margin-bottom: .9rem; }
.spec-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55em 1em; font-size: .86rem; }
.spec-card dt { color: var(--ink-faint); }
.spec-card dd { margin: 0; color: var(--ink); text-align: right; }
.howto { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: .7rem; }
.howto li { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: start; font-size: .88rem; color: var(--ink-soft); }
.howto li::before { counter-increment: s; content: counter(s); width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ink-field); color: var(--gold-bright); font-family: var(--mincho); font-size: .82rem; display: grid; place-items: center; }

.buy-card { background: linear-gradient(165deg, #fff, #FAF4E9); border: 1px solid var(--gold-line); }
.buy-card .price-row { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.buy-card .now { font-family: var(--mincho); font-size: 1.9rem; font-weight: 700; }
.buy-card .now .yen { font-size: .9rem; }
.buy-card .was { text-decoration: line-through; color: var(--ink-faint); font-size: .9rem; }
.buy-card .off { background: var(--ember); color: #fff; font-size: .72rem; font-weight: 700; padding: .25em .55em; border-radius: 2px; }
.buy-card .unit { font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.1rem; }

/* ---- 11. Evidence (honest, ingredient-level) --------------------------- */
.evidence__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-bottom: 1.6rem; }
.ev-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.ev-card__tag { font-size: .72rem; letter-spacing: .14em; color: var(--gold-deep); font-weight: 700; }
.ev-card h3 { font-size: 1.12rem; margin: .5rem 0 .7rem; letter-spacing: .04em; }
.ev-card p { font-size: .86rem; color: var(--ink-soft); margin-bottom: .9rem; }
.ev-card__dose { font-size: .8rem; color: var(--ink); background: var(--washi-deep); padding: .5em .8em; border-radius: 2px; display: inline-block; margin-bottom: .9rem; }
.ev-card a { font-size: .78rem; color: var(--gold-deep); font-weight: 600; border-bottom: 1px solid var(--gold-line); }
.ev-caveat {
  background: var(--alert-bg); border: 1px solid #EAD3C9; border-left: 3px solid var(--alert);
  padding: 1.1em 1.3em; border-radius: 2px; font-size: .84rem; color: var(--ink-soft); max-width: none;
}
.ev-caveat strong { color: var(--alert); }

/* ---- 12. Safety & precautions (Mode A, openly shown) ------------------- */
.safety__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; align-items: start; }
.safe-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.safe-block > summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: .96rem; letter-spacing: .04em;
}
.safe-block > summary::-webkit-details-marker { display: none; }
.safe-block > summary .ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--washi-deep); color: var(--gold-deep); }
.safe-block > summary .chev { margin-left: auto; transition: transform .3s var(--ease); color: var(--ink-faint); }
.safe-block[open] > summary .chev { transform: rotate(180deg); }
.safe-block[open] > summary { border-bottom: 1px solid var(--line); }
.safe-block__body { padding: 1.1rem 1.3rem 1.3rem; font-size: .87rem; color: var(--ink-soft); }
.safe-block__body ul { margin: 0; padding-left: 1.1em; display: grid; gap: .4em; }
.safe-block__body li { line-height: 1.7; }
.safe-block.wide { grid-column: 1 / -1; }
.interactions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.interactions span { font-size: .78rem; background: var(--alert-bg); border: 1px solid #EAD3C9; color: var(--alert); padding: .3em .7em; border-radius: 2px; }

/* ---- 13. Trust band ---------------------------------------------------- */
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.4rem; }
.trust__item .n { font-family: var(--mincho); font-size: 1.7rem; color: var(--gold-bright); display: block; margin-bottom: .3rem; }
.trust__item h3 { font-size: .98rem; color: var(--washi); margin-bottom: .4rem; letter-spacing: .05em; }
.trust__item p { font-size: .82rem; color: rgba(251,248,241,.72); margin: 0; }
.seller-card {
  margin-top: 2.6rem; background: rgba(251,248,241,.05); border: 1px solid rgba(231,207,151,.25);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem;
}
.seller-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5em 1.2em; font-size: .84rem; }
.seller-card dt { color: rgba(231,207,151,.8); white-space: nowrap; }
.seller-card dd { margin: 0; color: var(--washi); }
.seller-card .full { grid-column: 1 / -1; }

/* ---- 14. Footer -------------------------------------------------------- */
.wagara-divider {
  height: 56px;
  background-image: url("../assets/pattern/seigaiha.svg");
  background-size: 88px 88px;
  background-position: center;
  opacity: .16;                     /* bounded accent, never behind body text */
}
.site-footer { background: var(--ink-field); color: rgba(251,248,241,.7); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer__brand .brand__name { color: var(--washi); }
.footer__brand p { font-size: .82rem; color: rgba(251,248,241,.6); margin-top: 1rem; }
.footer h4 { color: var(--washi); font-family: var(--gothic); font-size: .82rem; letter-spacing: .14em; margin: 0 0 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { font-size: .84rem; color: rgba(251,248,241,.7); }
.footer a:hover { color: var(--gold-bright); }
.footer .line-btn { display: inline-flex; align-items: center; gap: .5em; background: #06C755; color: #fff; padding: .6em 1em; border-radius: 3px; font-size: .82rem; font-weight: 700; }
.footer__bottom { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(231,207,151,.18); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .74rem; color: rgba(251,248,241,.5); }
.compliance-strip { font-size: .74rem; color: rgba(251,248,241,.5); max-width: 60ch; line-height: 1.8; }

/* ---- 15. Sticky mobile buy bar ----------------------------------------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(251,248,241,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -16px rgba(36,30,21,.4);
  padding: .6rem var(--gutter); transform: translateY(120%); transition: transform .4s var(--ease);
}
.buybar.show { transform: none; }
.buybar__inner { width: min(1180px, 100%); margin-inline: auto; display: flex; align-items: center; gap: 1.2rem; }
.buybar__name { font-family: var(--mincho); font-weight: 600; font-size: 1rem; letter-spacing: .05em; line-height: 1.25; }
.buybar__name small { display: block; font-family: var(--gothic); font-size: .64rem; color: var(--ink-faint); letter-spacing: .1em; }
.buybar__price { line-height: 1.2; margin-left: auto; display: flex; align-items: baseline; gap: .5rem; }
.buybar__price .now { font-family: var(--mincho); font-weight: 700; font-size: 1.25rem; }
.buybar__price .was { font-size: .8rem; color: var(--ink-faint); text-decoration: line-through; }
.buybar__price .off { font-size: .68rem; color: #fff; background: var(--ember); padding: .2em .5em; border-radius: 2px; font-weight: 700; }
.buybar .btn { padding: .85rem 1.7rem; white-space: nowrap; }
@media (max-width: 560px) {
  .buybar__name, .buybar__price .was { display: none; }
  .buybar .btn { padding: .8rem 1.2rem; }
}

/* ============================================================================
   16. Shop flow — drawer, checkout, confirmation (mode-independent commerce)
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(20,16,10,.5); opacity: 0; visibility: hidden; transition: opacity .35s; backdrop-filter: blur(2px); }
.scrim.show { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 95; height: 100dvh;
  width: min(430px, 100%); background: var(--washi);
  box-shadow: -20px 0 60px -30px rgba(20,16,10,.6);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.show { transform: none; }
.drawer__head { display: flex; align-items: center; gap: .7rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.1rem; letter-spacing: .08em; }
.drawer__close { margin-left: auto; background: transparent; border: 0; padding: .4rem; color: var(--ink-soft); border-radius: 3px; }
.drawer__close:hover { background: var(--washi-deep); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.4rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem; background: var(--washi-veil); }

.cart-line { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.cart-line img { border-radius: 3px; border: 1px solid var(--line); background: #fff; }
.cart-line h3 { font-size: .96rem; letter-spacing: .04em; margin-bottom: .2rem; }
.cart-line .sku { font-size: .72rem; color: var(--ink-faint); margin-bottom: .5rem; }
.cart-line .price { font-family: var(--mincho); font-weight: 700; }
.cart-line .price .was { font-family: var(--gothic); font-weight: 400; font-size: .78rem; color: var(--ink-faint); text-decoration: line-through; margin-left: .4em; }

.plan-toggle { display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.plan-opt { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .25s, background .25s; }
.plan-opt:hover { border-color: var(--gold-line); }
.plan-opt input { margin-top: .25rem; accent-color: var(--gold-deep); }
.plan-opt.sel { border-color: var(--gold-deep); background: #FCF6E9; }
.plan-opt .t { font-weight: 700; font-size: .9rem; }
.plan-opt .d { font-size: .76rem; color: var(--ink-faint); }
.plan-opt .badge { margin-left: auto; font-size: .68rem; background: var(--ember-soft); color: var(--ember); padding: .2em .5em; border-radius: 2px; font-weight: 700; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 3px; overflow: hidden; }
.qty button { width: 40px; height: 40px; border: 0; background: #fff; font-size: 1.2rem; color: var(--ink); }
.qty button:hover { background: var(--washi-deep); }
.qty input { width: 48px; height: 40px; border: 0; border-inline: 1.5px solid var(--line); text-align: center; font-family: var(--mincho); font-weight: 700; font-size: 1rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.qty-row .lbl { font-size: .84rem; color: var(--ink-soft); }

.totals { display: grid; gap: .5rem; margin-bottom: 1rem; font-size: .88rem; }
.totals .row { display: flex; justify-content: space-between; }
.totals .row.grand { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .2rem; font-family: var(--mincho); font-weight: 700; font-size: 1.15rem; }
.totals .row .save { color: var(--ember); }
.trust-mini { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; font-size: .76rem; color: var(--ink-faint); }
.trust-mini span { display: inline-flex; gap: .5em; align-items: center; }

/* checkout overlay (full-screen flow) */
.checkout { position: fixed; inset: 0; z-index: 100; background: var(--washi); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s; }
.checkout.show { opacity: 1; visibility: visible; }
.checkout__bar { position: sticky; top: 0; z-index: 5; background: rgba(251,248,241,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.checkout__bar .inner { width: min(1080px, 100% - var(--gutter)*2); margin-inline: auto; height: 64px; display: flex; align-items: center; gap: 1rem; }
.checkout__bar .brand { margin-right: auto; }
.checkout__bar .back { background: transparent; border: 0; color: var(--ink-soft); font-size: .86rem; display: inline-flex; gap: .4em; align-items: center; padding: .4em .6em; border-radius: 3px; }
.checkout__bar .back:hover { background: var(--washi-deep); }

.steps { display: flex; align-items: center; gap: .5rem; font-size: .76rem; }
.steps .step { display: inline-flex; align-items: center; gap: .5em; color: var(--ink-faint); }
.steps .step .num { width: 1.7em; height: 1.7em; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 700; }
.steps .step.active { color: var(--ink); }
.steps .step.active .num { background: var(--ink-field); color: var(--gold-bright); border-color: var(--ink-field); }
.steps .step.done .num { background: var(--gold); color: #1A140A; border-color: var(--gold); }
.steps .bar { width: 22px; height: 1px; background: var(--line); }

.checkout__body { width: min(1080px, 100% - var(--gutter)*2); margin-inline: auto; padding-block: clamp(2rem, 5vw, 3.5rem); }
.checkout__cols { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.pane { display: none; }
.pane.active { display: block; animation: swapIn .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .pane.active { animation: none; } }
.pane h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: .06em; margin-bottom: 1.6rem; }

/* forms */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; letter-spacing: .05em; }
.field label .req { color: var(--alert); font-size: .72rem; margin-left: .3em; }
.field label .opt { color: var(--ink-faint); font-size: .72rem; margin-left: .3em; font-weight: 500; }
.field input, .field select {
  width: 100%; font-family: var(--gothic); font-size: 1rem; letter-spacing: .03em;
  padding: .8em .9em; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(133,102,24,.14); }
.field input[aria-invalid="true"] { border-color: var(--alert); }
.field .err { display: none; color: var(--alert); font-size: .76rem; margin-top: .35rem; }
.field.invalid .err { display: block; }
.field .hint { font-size: .74rem; color: var(--ink-faint); margin-top: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; }

.pay-opt { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; margin-bottom: .8rem; transition: border-color .25s, background .25s; }
.pay-opt:hover { border-color: var(--gold-line); }
.pay-opt.sel { border-color: var(--gold-deep); background: #FCF6E9; }
.pay-opt input { margin-top: .3rem; accent-color: var(--gold-deep); }
.pay-opt .t { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5em; }
.pay-opt .d { font-size: .78rem; color: var(--ink-faint); margin-top: .2rem; }
.pay-logo { font-size: .64rem; font-weight: 800; letter-spacing: .04em; padding: .2em .45em; border-radius: 2px; color: #fff; }
.pay-detail { margin: .2rem 0 1.4rem; padding: 1.2rem; background: var(--washi-deep); border-radius: var(--radius); font-size: .84rem; color: var(--ink-soft); }
.pay-detail.hidden { display: none; }
.mock-flag { font-size: .74rem; color: var(--alert); background: var(--alert-bg); border: 1px dashed #E3C4B8; padding: .6em .8em; border-radius: 2px; margin-bottom: 1rem; }

/* order summary rail */
.summary-rail { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-1); position: sticky; top: 88px; }
.summary-rail h3 { font-size: 1rem; letter-spacing: .06em; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.summary-rail .li { display: grid; grid-template-columns: 56px 1fr; gap: .8rem; margin-bottom: 1rem; }
.summary-rail .li img { border-radius: 3px; border: 1px solid var(--line); }
.summary-rail .li .nm { font-size: .84rem; font-weight: 700; }
.summary-rail .li .meta { font-size: .74rem; color: var(--ink-faint); }

/* review pane */
.review-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.review-block h3 { font-size: .82rem; letter-spacing: .12em; color: var(--ink-faint); font-family: var(--gothic); font-weight: 700; margin-bottom: .8rem; display: flex; justify-content: space-between; }
.review-block h3 button { background: transparent; border: 0; color: var(--gold-deep); font-size: .78rem; font-weight: 600; border-bottom: 1px solid var(--gold-line); }
.review-block .kv { font-size: .9rem; line-height: 1.9; color: var(--ink-soft); }
.review-block .kv b { color: var(--ink); font-weight: 600; }
.confirm-check { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0; font-size: .84rem; color: var(--ink-soft); }
.confirm-check input { margin-top: .25rem; accent-color: var(--gold-deep); width: 1.1rem; height: 1.1rem; }
.confirm-check a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }

/* processing + confirmation */
.processing { position: fixed; inset: 0; z-index: 110; background: rgba(251,248,241,.96); display: none; place-items: center; text-align: center; }
.processing.show { display: grid; }
.spinner { width: 46px; height: 46px; border: 3px solid var(--line); border-top-color: var(--gold-deep); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 1.4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.confirm-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); }
.confirm-seal { width: 84px; height: 84px; margin: 0 auto 1.6rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg,#2A2118,#14100A); border: 1px solid var(--gold-deep); color: var(--gold-bright); }
.confirm-hero h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: .08em; margin-bottom: .8rem; }
.confirm-hero .order-no { font-family: var(--mincho); font-size: 1.3rem; color: var(--gold-deep); letter-spacing: .1em; margin: 1rem 0; }
.confirm-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.confirm-detail { max-width: 620px; margin: 2.5rem auto 0; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.confirm-detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6em 1.5em; font-size: .88rem; }
.confirm-detail dt { color: var(--ink-faint); }
.confirm-detail dd { margin: 0; text-align: right; color: var(--ink); }

/* toast */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 120%); z-index: 120; background: var(--ink-field); color: var(--washi); padding: .9em 1.4em; border-radius: 4px; font-size: .86rem; box-shadow: var(--shadow-2); transition: transform .4s var(--ease); display: flex; gap: .6em; align-items: center; }
.toast.show { transform: translate(-50%, 0); }
.toast .ico { color: var(--gold-bright); }

/* ---- 17. Reveal-on-scroll (one orchestrated motion; quiet elsewhere) --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- 18. Responsive ---------------------------------------------------- */
@media (max-width: 980px) {
  .showcase__layout, .detail__grid, .checkout__cols { grid-template-columns: 1fr; }
  .active-detail, .spec-aside, .summary-rail { position: static; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .seller-card { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; background: transparent; border: 1px solid var(--line); border-radius: 3px; }
  /* hero stacks: product composed on top, tategaki alongside, band below */
  .hero { min-height: auto; }
  .hero__stage { display: block; position: relative; min-height: 60vh; padding: 1.5rem 0 .5rem; }
  .hero__product { position: relative; left: auto; top: auto; transform: rotate(-5deg); width: min(540px, 92%); margin: 1.5rem auto 0; animation: none; opacity: 1; }
  .hero__cast { left: 10%; right: 8%; transform: rotate(-5deg); }
  .hero__tate { position: absolute; top: 5%; right: 1%; z-index: 3; height: auto; max-height: 66vh; font-size: clamp(1.7rem, 6.6vw, 2.3rem); letter-spacing: .12em; line-height: 1.6; animation: none; }
  .hero__wagara { height: 46%; }
  .hero__band { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; animation: none; }
  .hero__buy { text-align: left; }
  .hero__price { justify-content: flex-start; }
  .hero__act { justify-content: flex-start; }
  .narrative__cols, .evidence__cards, .safety__grid, .trust__grid { grid-template-columns: 1fr; }
  .trust__grid { gap: 1.8rem; }
}
@media (max-width: 560px) {
  .actives-cluster { grid-template-columns: repeat(3, 1fr); }
  .hero__tate { font-size: clamp(1.5rem, 6.4vw, 1.95rem); max-height: 72vh; top: 4%; }
  .hero__product { width: 96%; }
  .hero__act { flex-wrap: wrap; }
  .hero__act .btn { width: 100%; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .evidence__cards { grid-template-columns: 1fr; }
  /* compact header so brand + cart + toggle fit one row */
  .nav { gap: .5rem; height: 60px; }
  .brand { gap: .5rem; }
  .brand__mark { width: 34px; height: 34px; font-size: .82rem; }
  .brand__name { font-size: .84rem; letter-spacing: .03em; line-height: 1.2; }
  .brand__name small { display: none; }
  .nav__cart { white-space: nowrap; padding: .5em .7em; font-size: .74rem; gap: .35em; }
  .nav__cart svg { display: none; }
  .checkout__bar .steps { display: none; }
}

/* mobile nav sheet */
.mobile-nav { position: fixed; inset: 0; z-index: 80; background: var(--washi); padding: 90px var(--gutter) var(--gutter); transform: translateY(-100%); transition: transform .4s var(--ease); display: flex; flex-direction: column; gap: .4rem; }
.mobile-nav.show { transform: none; }
.mobile-nav a { font-family: var(--mincho); font-size: 1.3rem; padding: .9rem 0; border-bottom: 1px solid var(--line); letter-spacing: .06em; }
.mobile-nav .btn { margin-top: 1.4rem; }

/* ============================================================================
   19. Visual richness — atmospheric grounds, product gallery, closing band
   (decorative gradients/SVG + real product photos; no fabricated imagery)
   ========================================================================== */

/* product photos integrate onto warm grounds via multiply (drops white box) */
.blend { mix-blend-mode: multiply; filter: contrast(1.04) saturate(1.05); }

/* -- product gallery band -- */
.gallery { position: relative; overflow: hidden; }
.gallery__ground {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(64% 56% at 26% 18%, #FBECD6 0%, rgba(251,236,214,0) 66%),
    radial-gradient(60% 60% at 82% 74%, rgba(214,150,180,.16), rgba(214,150,180,0) 60%),
    linear-gradient(180deg, #FCF7EE, #F7EEDF);
}
.gallery__ground::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background-image: url("../assets/pattern/seigaiha.svg"); background-size: 108px 108px;
  opacity: .05; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
}
.gallery .wrap { position: relative; z-index: 1; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: end; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.gshot { margin: 0; text-align: center; display: flex; flex-direction: column; }
.gshot img { border-radius: 4px; }
.gshot figcaption { margin-top: 1.1rem; font-size: .8rem; color: var(--ink-faint); letter-spacing: .05em; min-height: 2.6em; }
@media (max-width: 760px) { .gallery__grid { grid-template-columns: 1fr 1fr; } .gshot--lg { grid-column: 1 / -1; } }
@media (max-width: 480px) { .gallery__grid { grid-template-columns: 1fr; } }

/* -- "from within" narrative: atmospheric radiance + iconified cards -- */
.narrative { position: relative; overflow: hidden; }
.narrative__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.narrative__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% 6%, rgba(232,168,92,.34), rgba(232,168,92,0) 62%),
    radial-gradient(64% 56% at 80% 34%, rgba(214,150,180,.2), rgba(214,150,180,0) 60%),
    radial-gradient(64% 56% at 18% 44%, rgba(203,170,87,.18), rgba(203,170,87,0) 60%),
    linear-gradient(180deg, #FCF7EE 0%, #FBF3EA 100%);
}
.narrative__rays {
  position: absolute; top: -12%; left: 50%; width: 130vw; height: 70vh; transform: translateX(-50%);
  background: repeating-conic-gradient(from 90deg at 50% 0%,
    rgba(255,241,214,0) 0deg, rgba(255,241,214,.55) 2.4deg, rgba(255,241,214,0) 6.5deg);
  -webkit-mask-image: radial-gradient(58% 78% at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(58% 78% at 50% 0%, #000, transparent 72%);
  opacity: .45;
}
.narrative .wrap-narrow { position: relative; z-index: 1; }
.narrative__col {
  background: linear-gradient(180deg, #FFFFFF, #FBF3E7);
  border: 1px solid var(--gold-line); border-top: 2px solid var(--gold);
  border-radius: var(--radius); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-1);
}
.narrative__ic {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FCF4E0, #EAD9AE);
  border: 1px solid var(--gold-line); color: var(--gold-deep); margin-bottom: 1rem;
}
.narrative__ic svg { width: 24px; height: 24px; }
.narrative__lead { position: relative; }

/* -- closing CTA band: amber atmosphere + composed product -- */
.closing { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); }
.closing__ground {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(54% 74% at 18% 52%, #F6E0C4 0%, rgba(246,224,196,0) 62%),
    radial-gradient(60% 82% at 86% 38%, rgba(214,150,180,.3), rgba(214,150,180,0) 60%),
    linear-gradient(120deg, #FBEFDD 0%, #F7EEDF 54%, #F3E7F0 100%);
}
.closing__ground::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/pattern/seigaiha.svg"); background-size: 120px 120px; opacity: .045;
}
.closing__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.closing__title { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.5; letter-spacing: .08em; margin: 0 0 1.2rem; }
.closing__copy > p { color: var(--ink-soft); max-width: 40ch; font-size: 1.02rem; line-height: 1.95; }
.closing__buy { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.8rem; flex-wrap: wrap; }
.closing__price { display: flex; align-items: baseline; gap: .6rem; }
.closing__price .now { font-family: var(--mincho); font-weight: 700; font-size: 2.1rem; }
.closing__price .now .yen { font-size: 1rem; }
.closing__price .was { color: var(--ink-faint); text-decoration: line-through; font-size: .95rem; }
.closing__price .off { background: var(--ember); color: #fff; font-size: .72rem; font-weight: 700; padding: .28em .55em; border-radius: 2px; }
.closing__product { position: relative; margin: 0; }
.closing__product .aura {
  position: absolute; inset: -18% -14%; z-index: 0;
  background: radial-gradient(46% 42% at 52% 46%, rgba(233,180,96,.55), rgba(233,180,96,0) 70%); filter: blur(10px);
}
.closing__product img { position: relative; z-index: 1; transform: rotate(-6deg); }
.closing__note { margin-top: 1.4rem; font-size: .78rem; color: var(--ink-faint); }
@media (max-width: 860px) {
  .closing__inner { grid-template-columns: 1fr; }
  .closing__product { order: -1; max-width: 440px; margin-inline: auto; }
}

/* -- clearly-labeled placeholder for real photography a human should add -- */
.imgph {
  position: relative; border-radius: 6px; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(184,145,47,.06) 0 12px, rgba(184,145,47,0) 12px 24px),
    linear-gradient(150deg, #F7EEDF, #F3E4D2);
  border: 1px dashed var(--gold-line); display: grid; place-items: center; text-align: center;
}
.imgph::after {
  content: attr(data-label); font-family: var(--gothic); font-size: .74rem; letter-spacing: .12em;
  color: var(--gold-deep); padding: .5em 1em; line-height: 1.6;
}

/* -- soften premium cards a touch (less "document", more crafted) -- */
.spec-card, .ev-card { background: linear-gradient(180deg, #FFFFFF, #FCF7EF); }
.buy-card { background: linear-gradient(165deg, #FFFFFF, #FAF1E2); }

/* ============================================================================
   20. Image placeholders, recreated ingredient grid, model/lifestyle bands
   ========================================================================== */

/* -- AI-image placeholder: styled frame carrying the exact generation prompt,
      at a fixed aspect ratio so layout never squeezes -- */
.ph {
  position: relative; width: 100%; aspect-ratio: var(--ratio, 4 / 3);
  border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, #F7EEDF 0%, #F1E2CF 55%, #ECDAE6 100%);
  border: 1.5px dashed var(--gold-line);
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(184,145,47,.06) 0 14px, transparent 14px 28px);
}
.ph__in { position: relative; text-align: center; padding: clamp(1rem, 2.4vw, 1.6rem); max-width: 92%; }
.ph__cam { width: 32px; height: 32px; margin: 0 auto .6rem; color: var(--gold-deep); opacity: .78; }
.ph__tag {
  display: inline-flex; align-items: center; gap: .4em; font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  color: #fff; background: var(--gold-deep); padding: .3em .7em; border-radius: 2px; margin-bottom: .7rem;
}
.ph__desc { font-size: .72rem; line-height: 1.75; color: var(--ink-soft); letter-spacing: .01em; margin: 0; }
.ph__desc b { color: var(--gold-deep); font-weight: 700; }
.ph__en { display: block; margin-top: .5rem; font-size: .64rem; color: var(--ink-faint); line-height: 1.6; font-style: normal; }

/* -- recreated ingredient section: visual card grid (no floating bubbles) -- */
.ing-lead { max-width: 46ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.95; margin: 0 0 clamp(1.6rem, 4vw, 2.6rem); }
.ing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.ing-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-1); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.ing-card .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line-soft); }
.ing-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.ing-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.ing-card:hover .ing-card__img { transform: scale(1.05); }
.ing-card__body { padding: 1.2rem 1.2rem 1.35rem; position: relative; }
.ing-card__ic {
  position: absolute; top: -24px; right: 16px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 36% 30%, #FCF4E0, #EAD9AE);
  border: 1px solid var(--gold-line); color: var(--gold-deep); box-shadow: var(--shadow-1);
}
.ing-card__ic svg { width: 24px; height: 24px; }
.ing-card__cat { font-size: .66rem; letter-spacing: .12em; color: var(--gold-deep); font-weight: 700; }
.ing-card h3 { font-family: var(--mincho); font-size: 1.08rem; letter-spacing: .03em; margin: .2rem 0 0; }
.ing-card h3 small { display: block; font-family: var(--gothic); font-weight: 500; font-size: .66rem; color: var(--ink-faint); letter-spacing: .06em; margin-top: .2rem; }
.ing-card__mg { font-family: var(--mincho); font-weight: 700; color: var(--gold-deep); font-size: 1.15rem; margin: .6rem 0; display: inline-block; }
.ing-card p { font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.8; }
.ing-note { margin-top: 1.4rem; }
@media (max-width: 900px) { .ing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ing-grid { grid-template-columns: 1fr; } }

/* -- model / lifestyle band: big visual paired with copy, alternating side -- */
.mband { position: relative; overflow: hidden; padding-block: clamp(3.2rem, 6vw, 5.5rem); }
.mband__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mband--right .mband__media { order: 2; }
.mband__media { position: relative; }
.mband__media .ph { box-shadow: var(--shadow-2); }
.mband__media img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-2); display: block; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 28%; }
.mband__badge {
  position: absolute; z-index: 2; bottom: 18px; left: 18px;
  background: rgba(251,248,241,.92); backdrop-filter: blur(6px); border: 1px solid var(--gold-line);
  border-radius: 8px; padding: .7em 1em; font-size: .74rem; color: var(--ink-soft); box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: .6em; max-width: 66%;
}
.mband--right .mband__badge { left: auto; right: 18px; }
.mband__badge .n { font-family: var(--mincho); font-weight: 700; color: var(--gold-deep); font-size: 1.3rem; line-height: 1; }
.mband__copy { max-width: 520px; }
.mband__copy .kick { font-size: .76rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-deep); margin: 0 0 .8rem; }
.mband__copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.55; letter-spacing: .06em; margin: 0 0 1.1rem; }
.mband__copy > p { color: var(--ink-soft); font-size: 1rem; line-height: 1.95; }
.mband__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.mband__list li { display: grid; grid-template-columns: auto 1fr; gap: .9em; align-items: start; font-size: .92rem; color: var(--ink-soft); }
.mband__list .step { width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; background: var(--ink-field); color: var(--gold-bright); font-family: var(--mincho); font-size: .86rem; display: grid; place-items: center; }
.mband__list b { color: var(--ink); font-weight: 700; display: block; font-size: .96rem; margin-bottom: .1rem; }
@media (max-width: 860px) {
  .mband__grid { grid-template-columns: 1fr; gap: 2rem; }
  .mband--right .mband__media, .mband__media { order: -1; }
  .mband__copy { max-width: none; }
}

/* full-bleed atmospheric concept band (portrait model) */
.concept { position: relative; overflow: hidden; }
.concept__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 40%, #F7E3C6 0%, rgba(247,227,198,0) 60%),
    radial-gradient(60% 70% at 12% 60%, rgba(214,150,180,.2), rgba(214,150,180,0) 60%),
    linear-gradient(180deg, var(--washi), #FBF3EA); }
.concept .wrap { position: relative; z-index: 1; }

/* -- fix real product images: keep 1:1, no squeeze, sensible sizing -- */
.hero__product img,
.gshot img,
.closing__product img { aspect-ratio: 1 / 1; object-fit: contain; }
/* uniform gallery set: identical framed tiles so differently-cropped source
   photos read as one set */
.gshot img {
  width: 100%; height: clamp(190px, 24vw, 268px); object-fit: contain;
  background: linear-gradient(160deg, #FFFFFF, #FBF4E9); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: clamp(.8rem, 2vw, 1.4rem); box-shadow: var(--shadow-1);
  mix-blend-mode: normal; filter: none;
}

/* ============================================================================
   21. Conversion layer — social proof, subscription pick, trust row, urgency
   ========================================================================== */

/* honest "sale" tag (real 40%OFF; no fabricated countdown) */
.sale-tag { display: inline-flex; align-items: center; gap: .4em; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: var(--ember); border-radius: 3px; padding: .32em .7em; }
.sale-tag svg { width: 13px; height: 13px; }

/* -- social proof -- */
.social__badges { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sbadge { display: flex; align-items: center; gap: .6em; background: var(--card); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: .55em 1.05em; font-size: .82rem; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-1); }
.sbadge .ic { color: var(--gold-deep); display: grid; place-items: center; }
.sbadge .ph-badge { font-size: .62rem; color: var(--ink-faint); font-weight: 500; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: .9rem; }
.rcard__stars { color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.rcard__q { font-family: var(--mincho); font-size: .95rem; color: var(--ink); line-height: 1.95; margin: 0; }
.rcard__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.rcard__av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #FCF4E0, #E7D3AC); border: 1px solid var(--gold-line); color: var(--gold-deep); }
.rcard__av svg { width: 22px; height: 22px; }
.rcard__who b { font-size: .84rem; display: block; } .rcard__who span { font-size: .72rem; color: var(--ink-faint); }
.social__disc { text-align: center; margin-top: 1.8rem; font-size: .76rem; color: var(--ink-faint);
  background: var(--alert-bg); border: 1px dashed #E3C4B8; border-radius: 4px; padding: .8em 1.2em; max-width: 60ch; margin-inline: auto; }
@media (max-width: 820px) { .reviews { grid-template-columns: 1fr; } }

/* -- subscription / one-time pick on the buy card -- */
.plan-pick { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.plan-pick__opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem;
  border: 1.5px solid var(--line); border-radius: 8px; padding: .85rem .9rem; cursor: pointer; position: relative;
  transition: border-color .2s, background .2s; }
.plan-pick__opt:hover { border-color: var(--gold-line); }
.plan-pick__opt.sel { border-color: var(--gold-deep); background: #FCF6E9; }
.plan-pick__opt input { accent-color: var(--gold-deep); width: 1.1rem; height: 1.1rem; }
.plan-pick__opt .t { font-weight: 700; font-size: .9rem; }
.plan-pick__opt .d { font-size: .72rem; color: var(--ink-faint); display: block; margin-top: .1rem; }
.plan-pick__opt .p { font-family: var(--mincho); font-weight: 700; font-size: 1.1rem; color: var(--gold-deep); white-space: nowrap; }
.plan-pick__opt .p small { font-family: var(--gothic); font-size: .6rem; color: var(--ink-faint); font-weight: 500; }
.plan-pick__opt .mini { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: 0; color: var(--ember);
  background: var(--ember-soft); border: 1px solid #EAD0B4; padding: .14em .45em; border-radius: 2px; margin-left: .45em; vertical-align: middle; }
.plan-pick__opt em { position: absolute; top: -9px; right: 12px; font-style: normal; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; color: #fff; background: var(--ember); padding: .18em .5em; border-radius: 2px; }

/* -- hard-trust row under the CTA -- */
.buy-trust { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.buy-trust span { font-size: .68rem; color: var(--ink-soft); background: var(--washi-deep); border: 1px solid var(--line);
  border-radius: 3px; padding: .3em .55em; display: inline-flex; align-items: center; gap: .35em; }
.buy-trust svg { width: 12px; height: 12px; color: var(--gold-deep); }
.pay-logos { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.pay-logos .pl { font-size: .58rem; font-weight: 800; color: #fff; padding: .28em .5em; border-radius: 2px; letter-spacing: .02em; }

/* -- mobile hero: 2-column tategaki (shorter, doesn't crowd the product) -- */
@media (max-width: 860px) {
  .hero__tate { max-height: 42vh; font-size: clamp(1.7rem, 6vw, 2.1rem); top: 4%; right: 2%; line-height: 1.55; }
  .hero__product { margin-top: 3rem; }
}
@media (max-width: 560px) {
  .hero__tate { max-height: 40vh; font-size: clamp(1.5rem, 5.6vw, 1.85rem); }
}

/* print — receipt only */
@media print {
  body * { visibility: hidden; }
  #receiptPrint, #receiptPrint * { visibility: visible; }
  #receiptPrint { position: absolute; inset: 0; padding: 2rem; }
}