/* ============================================================
   SATSUMA NOIR — CAFÉ look: shared layer (every public page)
   Active only while <html data-look="cafe"> (set by look-switch.js),
   so the default NOIR design is never affected by these rules.
   Palette: latte foam, roasted espresso and the Basque burnt-caramel top.
   ============================================================ */

:root[data-look="cafe"] {
  --cafe-cream: #f6eee1;
  --cafe-paper: #fffaf2;
  --cafe-oat: #efe3cf;
  --cafe-kraft: #d9c2a0;
  --cafe-espresso: #23170f;
  --cafe-roast: #332218;
  --cafe-mocha: #5a3d2b;
  --cafe-ink: #2a1b12;
  --cafe-ink-soft: #6a5140;
  --cafe-caramel: #b0652b;
  --cafe-caramel-deep: #8a4a1c;
  --cafe-honey: #e2ab62;
  --cafe-foam: #f4e8d4;
  --cafe-foam-soft: #cdb99d;
  --cafe-terracotta: #a8452c;
  --cafe-shadow: 0 18px 40px rgba(66, 38, 18, 0.14);
  --cafe-shadow-lift: 0 30px 60px rgba(66, 38, 18, 0.22);
  --cafe-radius: 20px;
  --cafe-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Latin glyphs fall to Fraunces, Japanese to the Zen families. */
  --cafe-font-body: "Fraunces", "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --cafe-font-head: "Fraunces", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --cafe-font-hand: "Caveat", "Klee One", cursive;
  --cafe-font-note: "Klee One", "Zen Kaku Gothic New", sans-serif;

  --cafe-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --cafe-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-5 24-5 36-1s22 4 34 0 26-5 46 1' fill='none' stroke='%23b0652b' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --cafe-squiggle-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-5 24-5 36-1s22 4 34 0 26-5 46 1' fill='none' stroke='%23e2ab62' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --cafe-bean-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='7' ry='10' transform='rotate(28 12 12)' fill='%23e2ab62'/%3E%3Cpath d='M8.6 4.8c3.6 3.3.4 7.6 6.8 14.4' fill='none' stroke='%2323170f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --cafe-bean-caramel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='7' ry='10' transform='rotate(28 12 12)' fill='%238a4a1c'/%3E%3Cpath d='M8.6 4.8c3.6 3.3.4 7.6 6.8 14.4' fill='none' stroke='%23fffaf2' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --cafe-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323170f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M14 7l5 5-5 5'/%3E%3C/svg%3E");
  --cafe-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3Cpath d='M8 3.5c-.7.9.7 1.6 0 2.5M11.5 3.5c-.7.9.7 1.6 0 2.5'/%3E%3C/svg%3E");
  --cafe-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12zm0-9.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z' fill='%23000'/%3E%3C/svg%3E");
  --cafe-intro-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cstyle%3E.s%7Bfill:none;stroke:%23b0652b;stroke-width:3;stroke-linecap:round;opacity:0;animation:r 1.5s ease-out infinite%7D.b%7Banimation-delay:.3s%7D.c%7Banimation-delay:.6s%7D%40keyframes r%7B0%25%7Bopacity:0;transform:translateY(6px)%7D45%25%7Bopacity:.9%7D100%25%7Bopacity:0;transform:translateY(-10px)%7D%7D.f%7Btransform-box:fill-box;transform-origin:50%25 100%25;animation:f 1.1s cubic-bezier(.22,1,.36,1) .15s both%7D%40keyframes f%7Bfrom%7Btransform:scaleY(0)%7Dto%7Btransform:scaleY(1)%7D%7D%3C/style%3E%3Cpath class='s' d='M47 40c-5-7 5-10 0-17'/%3E%3Cpath class='s b' d='M60 40c-5-7 5-10 0-17'/%3E%3Cpath class='s c' d='M73 40c-5-7 5-10 0-17'/%3E%3CclipPath id='k'%3E%3Cpath d='M30 50h60v20a26 26 0 0 1-26 26h-8a26 26 0 0 1-26-26z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23k)'%3E%3Crect class='f' x='30' y='56' width='60' height='42' fill='%238a4a1c'/%3E%3C/g%3E%3Cpath d='M30 50h60v20a26 26 0 0 1-26 26h-8a26 26 0 0 1-26-26z' fill='none' stroke='%232a1b12' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M90 56h5a9 9 0 0 1 0 18h-7' fill='none' stroke='%232a1b12' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M22 104h76' stroke='%232a1b12' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Shared tokens read by styles.css and commerce-pages.css. */
  --bg: var(--cafe-cream);
  --bg-soft: var(--cafe-oat);
  --surface: var(--cafe-paper);
  --surface-2: #eadcc4;
  --line: rgba(42, 27, 18, 0.13);
  --line-strong: rgba(42, 27, 18, 0.28);
  --text: var(--cafe-ink);
  --text-dim: var(--cafe-ink-soft);
  --text-faint: #9a7f69;
  --gold: var(--cafe-caramel);
  --gold-soft: var(--cafe-caramel-deep);
  --radius: 14px;
  color-scheme: light;
}

/* ---------- Page, type and texture ---------- */
:root[data-look="cafe"] body {
  background-color: var(--cafe-cream);
  background-image:
    radial-gradient(1100px 560px at 8% -6%, rgba(226, 171, 98, 0.16), transparent 62%),
    radial-gradient(900px 520px at 106% 18%, rgba(176, 101, 43, 0.08), transparent 60%);
  background-repeat: no-repeat;
  color: var(--cafe-ink);
  font-family: var(--cafe-font-body);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
/* Every element follows the café type system unless a role below says otherwise. */
:root[data-look="cafe"] body * { font-family: inherit; }
:root[data-look="cafe"] body :is(h1, h2, h3, h4) { font-family: var(--cafe-font-head); }
:root[data-look="cafe"] ::selection { background: var(--cafe-honey); color: var(--cafe-espresso); }

/* Paper grain over the whole page, for a little depth. */
:root[data-look="cafe"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background-image: var(--cafe-grain);
  background-size: 180px 180px;
  opacity: 0.14;
}

/* ---------- Header ---------- */
:root[data-look="cafe"] body .header,
:root[data-look="cafe"] body .header.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(42, 27, 18, 0.1);
  color: var(--cafe-ink);
}
/* The frosted glass sits on a pseudo-element: a backdrop-filter on the header itself would
   become the containing block of the fixed mobile drawer and open it off-screen. */
:root[data-look="cafe"] body .header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(246, 238, 225, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  pointer-events: none;
}
:root[data-look="cafe"] body .header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--cafe-font-head);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cafe-ink);
}
:root[data-look="cafe"] body .header .brand::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  background: var(--cafe-caramel);
  -webkit-mask: var(--cafe-cup) center / contain no-repeat;
  mask: var(--cafe-cup) center / contain no-repeat;
}
:root[data-look="cafe"] body .header .brand::after {
  content: "café";
  margin: -0.9em 0 0 -0.2em;
  font-family: var(--cafe-font-hand);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cafe-caramel);
  transform: rotate(-9deg);
}
:root[data-look="cafe"] body .header .icon-btn,
:root[data-look="cafe"] body .header .login-btn { color: var(--cafe-ink); }
:root[data-look="cafe"] body .header .icon-btn:hover { color: var(--cafe-caramel); }
:root[data-look="cafe"] body .header .theme-toggle { display: none; }
:root[data-look="cafe"] body .icon-count { background: var(--cafe-caramel-deep); color: #fffaf2; }
:root[data-look="cafe"] body .login-btn,
:root[data-look="cafe"] body .header__logout {
  border-color: rgba(42, 27, 18, 0.3);
  letter-spacing: 0.12em;
}
:root[data-look="cafe"] body .login-btn:hover,
:root[data-look="cafe"] body .header__logout:hover {
  border-color: var(--cafe-ink);
  background: var(--cafe-ink);
  color: var(--cafe-foam);
}
:root[data-look="cafe"] body .header .nav-toggle span { background: var(--cafe-ink); }
:root[data-look="cafe"] body .nav {
  background: rgba(246, 238, 225, 0.97);
  border-color: rgba(42, 27, 18, 0.12);
}
:root[data-look="cafe"] body .nav__link {
  font-family: var(--cafe-font-head);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--cafe-ink);
}
:root[data-look="cafe"] body .nav__sub { font-style: normal; color: var(--cafe-ink-soft); }
:root[data-look="cafe"] body .nav__link.is-current { color: var(--cafe-caramel-deep); }
:root[data-look="cafe"] body .nav__en::after {
  bottom: -9px;
  height: 7px;
  background: var(--cafe-squiggle) center / 100% 100% no-repeat;
}
:root[data-look="cafe"] body .nav-overlay { background: rgba(35, 23, 15, 0.35); }
:root[data-look="cafe"] body .commerce-header-store {
  border-color: var(--cafe-ink);
  border-radius: 999px;
  background: var(--cafe-ink);
  color: var(--cafe-foam);
  font-family: var(--cafe-font-body);
  letter-spacing: 0.12em;
}
:root[data-look="cafe"] body .commerce-header-store:hover,
:root[data-look="cafe"] body .commerce-header-store:focus-visible {
  border-color: var(--cafe-caramel-deep);
  background: var(--cafe-caramel-deep);
  color: #fffaf2;
}

/* ---------- Shared site header ----------
   Give every public page the same CAFÉ navigation bar as the homepage. */
:root[data-look="cafe"] body:not(.home) .header,
:root[data-look="cafe"] body:not(.home) .header.is-scrolled {
  overflow: visible;
}
:root[data-look="cafe"] body:not(.home) .header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  min-height: 84px;
  margin: 0 auto;
  padding: 10px 40px;
}
:root[data-look="cafe"] body:not(.home) .header__inner .brand {
  position: static;
  order: -2;
  padding: 0;
  font-size: 20px;
  transform: none;
}
:root[data-look="cafe"] body:not(.home) .header__left {
  order: 1;
  margin-left: auto;
  gap: 0;
}
:root[data-look="cafe"] body:not(.home) .header__mypage {
  margin: 0;
  padding: 8px 18px;
  font-size: 12px;
}
:root[data-look="cafe"] body:not(.home) .header__actions {
  display: flex;
  order: 2;
  gap: 4px;
}
:root[data-look="cafe"] body:not(.home) .header .icon-btn {
  position: relative;
  inset: auto;
  padding: 7px;
  transform: none;
}
:root[data-look="cafe"] body:not(.home) .header .icon-btn svg { width: 19px; height: 19px; }
:root[data-look="cafe"] body:not(.home) .header__logout { font-size: 11px; }
:root[data-look="cafe"] body:not(.home) .nav-toggle { display: none; }
:root[data-look="cafe"] body:not(.home) .nav {
  position: static;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  visibility: visible;
}
:root[data-look="cafe"] body:not(.home) .nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 19px;
  line-height: 1.3;
}
:root[data-look="cafe"] body:not(.home) .nav__en::after { bottom: -5px; height: 5px; }
:root[data-look="cafe"] body:not(.home) .nav__sub {
  display: block;
  margin: 9px 0 0;
  font-size: 10px;
  letter-spacing: 0.14em;
}
:root[data-look="cafe"] body:not(.home) .nav__login,
:root[data-look="cafe"] body:not(.home) .nav__logout,
:root[data-look="cafe"] body:not(.home) .commerce-header-store { display: none; }
:root[data-look="cafe"] body:not(.home):not(.commerce-page):not(.editorial-detail) .page { padding-top: 84px; }

@media (max-width: 1050px) {
  :root[data-look="cafe"] body:not(.home) .header__inner { gap: 18px; padding: 10px 24px; }
  :root[data-look="cafe"] body:not(.home) .header__inner .brand { flex-shrink: 0; font-size: 17px; }
  :root[data-look="cafe"] body:not(.home) .nav { gap: 24px; }
  :root[data-look="cafe"] body:not(.home) .nav__link { font-size: 17px; }
  :root[data-look="cafe"] body:not(.home) .nav__sub { white-space: nowrap; }
}

@media (max-width: 900px) and (min-width: 761px) {
  :root[data-look="cafe"] body:not(.home) .header__inner { gap: 14px; padding: 10px 18px; }
  :root[data-look="cafe"] body:not(.home) .header__inner .brand { font-size: 15px; letter-spacing: 0.08em; }
  :root[data-look="cafe"] body:not(.home) .header .brand::before { display: none; }
  :root[data-look="cafe"] body:not(.home) .nav { gap: 16px; }
  :root[data-look="cafe"] body:not(.home) .nav__link { font-size: 15px; }
  :root[data-look="cafe"] body:not(.home) .nav__sub { font-size: 9px; letter-spacing: 0.08em; }
  :root[data-look="cafe"] body:not(.home) .header__mypage { padding: 6px 12px; font-size: 11px; }
}

@media (max-width: 760px) {
  :root[data-look="cafe"] body:not(.home) .header__inner { min-height: 68px; padding: 8px 16px; gap: 8px; }
  :root[data-look="cafe"] body:not(.home) .header__inner .brand { font-size: 15px; letter-spacing: 0.08em; }
  :root[data-look="cafe"] body:not(.home) .header__left { order: 3; margin-left: 4px; }
  :root[data-look="cafe"] body:not(.home) .header__mypage,
  :root[data-look="cafe"] body:not(.home) .header__actions .header__logout { display: none; }
  :root[data-look="cafe"] body:not(.home) .header__actions { margin-left: auto; gap: 0; }
  :root[data-look="cafe"] body:not(.home) .nav-toggle {
    position: relative;
    z-index: 51;
    display: flex;
    justify-content: center;
    width: 32px;
    height: 40px;
    padding: 8px 4px;
  }
  :root[data-look="cafe"] body:not(.home) .header .nav-toggle span { width: 22px; }
  :root[data-look="cafe"] body:not(.home) .nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
    width: 100%;
    height: calc(100dvh - 68px);
    padding: 44px 32px;
    border-right: 0;
    background: var(--cafe-cream);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.35s var(--cafe-ease), visibility 0.35s;
  }
  :root[data-look="cafe"] body:not(.home) .nav.is-open { transform: none; visibility: visible; }
  :root[data-look="cafe"] body:not(.home) .nav__link { align-items: flex-start; font-size: 32px; }
  :root[data-look="cafe"] body:not(.home) .nav__sub { font-size: 11px; }
  :root[data-look="cafe"] body:not(.home) .nav__login,
  :root[data-look="cafe"] body:not(.home) .nav__logout {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 22px;
    border: 1px solid rgba(42, 27, 18, 0.3);
    border-radius: 999px;
    color: var(--cafe-ink);
  }
  :root[data-look="cafe"] body:not(.home) .nav-overlay { top: 68px; }
  :root[data-look="cafe"] body:not(.home):not(.commerce-page):not(.editorial-detail) .page { padding-top: 68px; }
}

/* ---------- Buttons ---------- */
:root[data-look="cafe"] body .btn {
  border-radius: 999px;
  letter-spacing: 0.12em;
}
:root[data-look="cafe"] body .btn--primary {
  background: var(--cafe-espresso);
  color: var(--cafe-foam);
}
:root[data-look="cafe"] body .btn--primary:hover {
  background: var(--cafe-caramel-deep);
  color: #fffaf2;
  letter-spacing: 0.14em;
}
:root[data-look="cafe"] body .btn--ghost {
  border-color: rgba(42, 27, 18, 0.35);
  background: transparent;
  color: var(--cafe-ink);
}
:root[data-look="cafe"] body .btn--ghost:hover {
  border-color: var(--cafe-ink);
  background: var(--cafe-ink);
  color: var(--cafe-foam);
}

/* ---------- Product cards and lists (ITEM, wishlist, related) ---------- */
:root[data-look="cafe"] body .filter {
  border-color: rgba(42, 27, 18, 0.2);
  background: var(--cafe-paper);
  color: var(--cafe-ink-soft);
}
:root[data-look="cafe"] body .filter:hover { border-color: var(--cafe-ink); color: var(--cafe-ink); }
:root[data-look="cafe"] body .filter.is-active {
  border-color: var(--cafe-caramel-deep);
  background: var(--cafe-caramel-deep);
  color: #fffaf2;
}
:root[data-look="cafe"] body .card {
  padding: 10px 10px 18px;
  border-radius: var(--cafe-radius);
  background: var(--cafe-paper);
  box-shadow: var(--cafe-shadow);
  transition: opacity 0.6s var(--cafe-ease), transform 0.6s var(--cafe-ease), box-shadow 0.6s var(--cafe-ease);
}
:root[data-look="cafe"] body .card.is-in:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  box-shadow: var(--cafe-shadow-lift);
}
:root[data-look="cafe"] body .card__media {
  border-radius: 14px;
  background: var(--cafe-oat);
}
:root[data-look="cafe"] body .card__img { filter: saturate(1.05) sepia(0.06); }
:root[data-look="cafe"] body .card__body { padding: 14px 8px 0; }
:root[data-look="cafe"] body .card__name {
  font-family: var(--cafe-font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
}
:root[data-look="cafe"] body .card__tag {
  border: 0;
  background: var(--cafe-terracotta);
  color: #fff6ea;
  letter-spacing: 0.12em;
}
:root[data-look="cafe"] body .card__price {
  font-family: var(--cafe-font-head);
  font-size: 1.15rem;
  font-weight: 600;
}
:root[data-look="cafe"] body .card__add {
  border-color: var(--cafe-ink);
  color: var(--cafe-ink);
}
:root[data-look="cafe"] body .card__add:hover:not(:disabled) {
  border-color: var(--cafe-caramel-deep);
  background: var(--cafe-caramel-deep);
  color: #fffaf2;
}
:root[data-look="cafe"] body .faq__item {
  border-color: rgba(42, 27, 18, 0.12);
  border-radius: 18px;
  background: var(--cafe-paper);
  box-shadow: 0 8px 20px rgba(66, 38, 18, 0.06);
}
:root[data-look="cafe"] body .faq__item[open] { border-color: rgba(176, 101, 43, 0.45); }
:root[data-look="cafe"] body .toast {
  border-color: transparent;
  border-radius: 999px;
  background: var(--cafe-espresso);
  color: var(--cafe-foam);
  box-shadow: var(--cafe-shadow-lift);
}

/* ---------- Page loader: a spinning coffee bean ---------- */
:root[data-look="cafe"] body .page-loader { background: rgba(246, 238, 225, 0.84); }
:root[data-look="cafe"] body .page-loader__spinner {
  width: 40px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: var(--cafe-bean-caramel) center / contain no-repeat;
  box-shadow: none;
  animation: cafeBeanSpin 1.1s var(--cafe-ease) infinite;
}
@keyframes cafeBeanSpin {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(200deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(0.9); }
}

/* ---------- Footer: espresso counter under a striped awning ---------- */
/* The same scalloped awning also tops the homepage store section. */
:root[data-look="cafe"] body .footer::before,
:root[data-look="cafe"] .home .store::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 55%),
    repeating-linear-gradient(90deg, var(--cafe-terracotta) 0 36px, var(--cafe-foam) 36px 72px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 17px no-repeat,
    radial-gradient(circle 18px at 18px 17px, #000 97%, transparent 100%) 0 0 / 36px 38px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 17px no-repeat,
    radial-gradient(circle 18px at 18px 17px, #000 97%, transparent 100%) 0 0 / 36px 38px repeat-x;
}
:root[data-look="cafe"] body .footer {
  position: relative;
  max-width: none;
  margin: 48px 0 0;
  padding: 96px max(24px, calc((100vw - 1180px) / 2)) 44px;
  border-top: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(226, 171, 98, 0.12), transparent 70%),
    var(--cafe-espresso);
  color: var(--cafe-foam);
  text-align: center;
}
:root[data-look="cafe"] body .footer__links {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
}
:root[data-look="cafe"] body .footer__links a {
  color: var(--cafe-foam);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}
:root[data-look="cafe"] body .footer__links a:hover { color: var(--cafe-honey); }
:root[data-look="cafe"] body .footer__social {
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}
:root[data-look="cafe"] body .footer__social a { color: var(--cafe-foam-soft); }
:root[data-look="cafe"] body .footer__social a:hover { color: var(--cafe-honey); }
:root[data-look="cafe"] body .footer__copy {
  margin-top: 28px;
  color: var(--cafe-foam-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* ---------- Scroll reveal (classes added by cafe-motion.js) ---------- */
:root[data-look="cafe"].cafe-motion-ready:not(.cafe-paused) .cafe-reveal:not(.is-cafe-in),
:root[data-look="cafe"].cafe-motion-ready:not(.cafe-paused) .cafe-stagger:not(.is-cafe-in) > * { opacity: 0; }
:root[data-look="cafe"] .cafe-reveal.is-cafe-in,
:root[data-look="cafe"] .cafe-stagger.is-cafe-in > * { animation: cafeRise 1s var(--cafe-ease) backwards; }
:root[data-look="cafe"] .cafe-stagger.is-cafe-in > :nth-child(2) { animation-delay: 0.12s; }
:root[data-look="cafe"] .cafe-stagger.is-cafe-in > :nth-child(3) { animation-delay: 0.24s; }
:root[data-look="cafe"] .cafe-stagger.is-cafe-in > :nth-child(4) { animation-delay: 0.36s; }
:root[data-look="cafe"] .cafe-stagger.is-cafe-in > :nth-child(n + 5) { animation-delay: 0.48s; }
:root[data-look="cafe"].cafe-motion-ready:not(.cafe-paused) .cafe-reveal--img:not(.is-cafe-in) { clip-path: inset(10% 10% 10% 10% round 28px); }
:root[data-look="cafe"] .cafe-reveal--img.is-cafe-in { animation: cafeUnveil 1.4s var(--cafe-ease) backwards; }

/* Motion uses the individual `translate` property so element transforms stay intact. */
@keyframes cafeRise {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes cafeUnveil {
  from { opacity: 0; clip-path: inset(10% 10% 10% 10% round 28px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 0); }
}

/* "Stop animations" in the look switch: everything rests in its final state. */
:root[data-look="cafe"].cafe-paused *,
:root[data-look="cafe"].cafe-paused *::before,
:root[data-look="cafe"].cafe-paused *::after { animation: none !important; }

/* ---------- First-visit welcome (homepage, once per session) ---------- */
:root[data-look="cafe"].cafe-intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
  background:
    var(--cafe-intro-cup) center calc(50% - 30px) / 124px 124px no-repeat,
    radial-gradient(circle at 50% 45%, #fdf7ec, var(--cafe-cream) 58%, var(--cafe-oat));
  animation: cafeIntroLift 0.95s cubic-bezier(0.76, 0, 0.24, 1) 1.45s forwards;
}
:root[data-look="cafe"].cafe-intro::after {
  content: "SATSUMA NOIR · café";
  position: fixed;
  left: 0;
  right: 0;
  top: calc(50% + 48px);
  z-index: 211;
  pointer-events: none;
  color: var(--cafe-ink);
  font: 500 14px/1 "Fraunces", Georgia, serif;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-align: center;
  animation: cafeIntroType 0.7s var(--cafe-ease) 0.3s backwards, cafeIntroFade 0.4s ease 1.3s forwards;
}
@keyframes cafeIntroLift {
  to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18% 18%; }
}
@keyframes cafeIntroType {
  from { opacity: 0; letter-spacing: 0.8em; }
}
@keyframes cafeIntroFade {
  to { opacity: 0; transform: translateY(-12px); }
}

@media (max-width: 760px) {
  :root[data-look="cafe"] body .header .brand { font-size: 1rem; letter-spacing: 0.1em; }
  :root[data-look="cafe"] body:not(.home) .header .brand { font-size: 15px; letter-spacing: 0.08em; }
  :root[data-look="cafe"] body:not(.home) .header .brand::after { display: none; }
  :root[data-look="cafe"] body .card { padding: 7px 7px 14px; border-radius: 16px; }
  :root[data-look="cafe"] body .card__body { padding: 10px 4px 0; }
  :root[data-look="cafe"] body .footer { padding-top: 84px; }
}

@media print {
  :root[data-look="cafe"] body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-look="cafe"] *,
  :root[data-look="cafe"] *::before,
  :root[data-look="cafe"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}