/* ===== Shared chrome overrides for v0 themes ===== */
body { background: var(--bg); color: var(--ink); font-family: var(--font-text); }
.promo-bar { background: var(--announce); color: var(--announce-ink); }
.site-header { background: var(--v0-primary); color: var(--accent-ink); border-bottom: 0; }
.site-header .logo img { filter: brightness(0) invert(1); max-height: 40px; width: auto; }
.site-header-nav a { color: rgba(255,255,255,.92) !important; font-weight: 700; }
.site-header-nav a:hover, .site-header-nav a.is-active { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.nav-toggle { color: #fff !important; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.header-cart { background: var(--paper); color: var(--v0-ink-fg) !important; border-radius: 10px; padding: .45rem .85rem; gap: .5rem; }
.header-cart:hover { filter: brightness(1.1); color: var(--v0-ink-fg) !important; }
.header-cart-badge { background: var(--v0-accent); color: var(--v0-accent-ink, #fff); border-radius: 999px; min-width: 1.35rem; height: 1.35rem; display:inline-grid; place-items:center; font-size: .75rem; font-weight: 800; }
.btn-primary, .btn-gold, .btn-add { background: var(--v0-primary) !important; color: var(--accent-ink) !important; border-radius: var(--radius-sm); }
.btn-primary:hover, .btn-add:hover, .btn-gold:hover { filter: brightness(1.08); color: #fff !important; }
.btn-outline { border: 2px solid var(--ink); color: var(--ink) !important; background: transparent; border-radius: 999px; }
.product-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.product-card .price-now, .product-card .price { color: var(--ink); }
.site-footer { background: var(--paper); color: var(--v0-ink-fg); }
.footer-card { background: transparent; color: var(--v0-ink-fg); }
.footer-card a { color: rgba(255,255,255,.8); }
.footer-card a:hover { color: #fff; }
.footer-card h3 { color: #fff; text-transform: none; }
.footer-imprint, .age-footer-note { color: rgba(255,255,255,.55); }
.line-fab { background: #06C755; }
.v0-wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.v0-display { font-family: var(--font-display); letter-spacing: var(--track-display); line-height: var(--leading-display); }
@keyframes v0-rise { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none;} }
.v0-rise { animation: v0-rise .65s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .v0-rise { animation: none; } }


/* ===== GREEN 果実店 theme ===== */
body.theme-mk .site-header { background: var(--v0-primary); }
body.theme-mk .header-cart { background: var(--v0-card); color: var(--ink) !important; border-radius: 999px; }
body.theme-mk .header-cart:hover { color: var(--ink) !important; }
body.theme-mk .header-cart-badge { background: var(--v0-accent); color: var(--ink); }
body.theme-mk .header-cart-icon { color: var(--ink); }
body.theme-mk .header-cart-label { color: var(--ink); }
.mk-awning {
  height: 48px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--v0-primary) 0 48px, var(--v0-card) 48px 96px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 24px) no-repeat,
    radial-gradient(circle 24px at 24px 0, #000 98%, transparent) bottom left / 48px 24px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 24px) no-repeat,
    radial-gradient(circle 24px at 24px 0, #000 98%, transparent) bottom left / 48px 24px repeat-x;
}
.mk-hero { padding: 1.5rem 0 3rem; }
.mk-hero-row { display:flex; flex-direction:column; gap:2rem; align-items:center; }
@media (min-width:900px){ .mk-hero-row { flex-direction:row; gap:2.5rem; } }
.mk-hero-copy { flex:1; display:flex; flex-direction:column; gap:1.25rem; }
.mk-pill { width:fit-content; border:2px solid var(--ink); background: var(--surface); border-radius:999px; padding:.35rem 1rem; font-size:.875rem; font-weight:700; }
.mk-hero-copy h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 4.2rem); margin:0; line-height:1.15; }
.mk-hero-copy h1 .hi { color: var(--v0-primary); }
.mk-hero-copy p { color: var(--muted); max-width:28rem; margin:0; line-height:1.7; }
.mk-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.mk-hero-actions .btn-solid { background: var(--v0-primary); color:#fff; border-radius:999px; padding:.85rem 1.4rem; font-weight:700; }
.mk-hero-actions .btn-line { border:2px solid var(--ink); border-radius:999px; padding:.85rem 1.4rem; font-weight:700; }
.mk-hero-visual { position:relative; flex:1; width:100%; max-width:26rem; }
.mk-hero-frame { overflow:hidden; border-radius:1.5rem; border:4px solid var(--ink); background: var(--surface); }
.mk-hero-frame img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.mk-hero-bar { display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:4px solid var(--ink); background: var(--v0-primary); color:#fff; padding:.75rem 1.15rem; font-weight:700; }
.mk-hero-bar .sub { font-size:.8rem; font-weight:500; opacity:.95; }
.mk-burst {
  position:absolute; right:-.75rem; top:-1.25rem; width:7.5rem; height:7.5rem; background: var(--v0-accent); color: var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; transform: rotate(12deg);
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 78% 21%, 93% 25%, 88% 39%, 100% 50%, 88% 61%, 93% 75%, 78% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 22% 79%, 7% 75%, 12% 61%, 0% 50%, 12% 39%, 7% 25%, 22% 21%, 25% 6%, 39% 12%);
}
.mk-burst .tax { font-size:.7rem; font-weight:700; }
.mk-burst .yen { font-family: var(--font-display); font-size:1.6rem; line-height:1; }
.mk-flavors { margin-top:2.5rem; }
.mk-flavors h2 { font-size:.875rem; font-weight:700; color: var(--muted); margin:0 0 .75rem; }
.mk-flavor-row { display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; list-style:none; margin:0; padding-left:0; }
.mk-flavor-row a { display:inline-flex; align-items:center; gap:.65rem; border:2px solid var(--ink); background: var(--surface); border-radius:999px; padding:.2rem 1.1rem .2rem .2rem; font-weight:700; white-space:nowrap; }
.mk-flavor-row a:hover { background: var(--v0-accent); }
.mk-flavor-row img { width:40px; height:40px; border-radius:50%; object-fit:cover; }

.mk-stall { background: var(--field); padding: 3rem 0; }
.mk-stall-head { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:flex-end; margin-bottom:1.5rem; }
.mk-stall-head .k { color: var(--v0-primary); font-size:.875rem; font-weight:700; margin:0; }
.mk-stall-head h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin:.25rem 0 0; }
.mk-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.mk-filters button { border:2px solid var(--ink); background: var(--surface); border-radius:999px; padding:.4rem 1rem; font-weight:700; font-size:.875rem; cursor:pointer; }
.mk-filters button.is-on { background: var(--ink); color: var(--bg); }
.mk-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 2rem .85rem; list-style:none; margin:0; padding:0; }
@media (min-width:900px){ .mk-grid { grid-template-columns: repeat(4,1fr); } }
.mk-card { display:flex; flex-direction:column; }
.mk-card-img { position:relative; overflow:hidden; border-radius:1rem; border:2px solid var(--ink); background: var(--surface); }
.mk-card-img img { width:100%; aspect-ratio:1; object-fit:cover; display:block; transition: transform .45s; }
.mk-card:hover .mk-card-img img { transform: scale(1.05); }
.mk-card-img .fl { position:absolute; top:.5rem; left:.5rem; background: var(--surface); border-radius:999px; padding:.15rem .65rem; font-size:.7rem; font-weight:700; }
.mk-tag {
  position:relative; margin: -1rem .65rem 0; border:2px solid var(--ink); background: var(--v0-accent); color: var(--ink);
  border-radius:10px; padding:1.15rem .75rem .75rem; display:flex; flex-direction:column; gap:.25rem;
  transform: rotate(var(--tilt, -4deg)); transform-origin: 50% 0;
}
.mk-tag::before { content:""; position:absolute; left:50%; top:6px; width:10px; height:10px; border-radius:50%; border:2px solid var(--ink); background: var(--field); transform:translateX(-50%); }
.mk-card:hover .mk-tag { animation: mk-swing .9s ease-in-out; }
@keyframes mk-swing { 0%,100%{ transform: rotate(var(--tilt,-4deg)); } 50%{ transform: rotate(calc(var(--tilt,-4deg) * -.5)); } }
.mk-tag .series { font-size:.7rem; font-weight:700; }
.mk-tag h3 { font-size:.85rem; margin:0; line-height:1.35; }
.mk-tag h3 a { color: inherit; }
.mk-tag .meta { font-size:.72rem; margin:0; }
.mk-tag-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.35rem; }
.mk-tag .yen { font-family: var(--font-display); font-size:1.15rem; }
.mk-tag .add { width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); background: var(--surface); display:grid; place-items:center; cursor:pointer; font-size:1.1rem; line-height:1; }
.mk-tag .add.is-on { background: var(--v0-primary); color:#fff; }

.mk-promise { padding: 3rem 0; }
.mk-promise-shell { background: var(--v0-primary); color:#fff; border-radius:1.5rem; padding:1.5rem; }
@media (min-width:800px){ .mk-promise-shell { padding:2.5rem; } }
.mk-promise .pill { width:fit-content; background: var(--v0-accent); color: var(--ink); border-radius:999px; padding:.25rem .75rem; font-size:.75rem; font-weight:700; }
.mk-promise h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin:.75rem 0; }
.mk-promise .lede { max-width:36rem; opacity:.9; line-height:1.7; }
.mk-steps { display:grid; gap:1rem; margin-top:1.5rem; list-style:none; padding:0; }
@media (min-width:800px){ .mk-steps { grid-template-columns: repeat(3,1fr); } }
.mk-steps li { background: var(--surface); color: var(--ink); border-radius:1rem; padding:1.15rem; }
.mk-steps .n { width:2.4rem; height:2.4rem; border-radius:50%; background: var(--v0-accent); display:grid; place-items:center; font-family: var(--font-display); margin-bottom:.65rem; }
.mk-steps h3 { font-family: var(--font-display); font-size:1.15rem; margin:0 0 .35rem; }
.mk-steps p { margin:0; font-size:.875rem; color: var(--muted); }

.mk-faq { padding: 0 0 3rem; }
.mk-faq-grid { display:grid; gap:1.5rem; }
@media (min-width:900px){ .mk-faq-grid { grid-template-columns: 1fr 2fr; } }
.mk-faq .k { color: var(--v0-primary); font-size:.875rem; font-weight:700; margin:0; }
.mk-faq h2 { font-family: var(--font-display); font-size:2rem; margin:.35rem 0 0; }
.mk-faq details { border:2px solid var(--ink); background: var(--surface); border-radius:1rem; margin-bottom:.65rem; }
.mk-faq summary { list-style:none; cursor:pointer; font-weight:700; padding:1rem 1.15rem; display:flex; justify-content:space-between; gap:1rem; }
.mk-faq summary::-webkit-details-marker { display:none; }
.mk-faq details p { margin:0; padding:0 1.15rem 1rem; color: var(--muted); line-height:1.65; }
.mk-faq summary::after { content:"▾"; }
.mk-faq details[open] summary::after { transform: rotate(180deg); }

.mk-news { padding: 0 0 3rem; }
.mk-news h2 { font-family: var(--font-display); font-size:1.75rem; margin:0 0 1rem; }
.mk-news-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.mk-news-list li { border-bottom:2px solid var(--ink); }
.mk-news-list a { display:flex; flex-direction:column; gap:.5rem; padding:1rem 0; font-weight:700; }
@media (min-width:700px){ .mk-news-list a { flex-direction:row; align-items:center; gap:1.25rem; } }
.mk-news-list .date { font-size:.875rem; color: var(--muted); font-weight:500; }
.mk-news-list .tag { background: var(--v0-accent); border-radius:999px; padding:.15rem .65rem; font-size:.7rem; width:fit-content; }
.mk-news-list a:hover { color: var(--v0-primary); }

body.theme-mk .footer-line-qr-col { background: var(--v0-accent); color: var(--ink); border-radius:1rem; padding:1.25rem; }
body.theme-mk .footer-line-btn, body.theme-mk .footer-line-qr-col .btn { background: var(--v0-primary); color:#fff; border-radius:999px; }

/* ===== Hover / active / focus contrast fixes (2026-10-31) =====
   Keep WCAG-ish readable pairs: white on solid primary/dark; dark ink on yellow/coral/light.
   Also stop storefront a:hover from flipping solid CTA text to accent-on-accent. */
.btn-primary, .btn-gold, .btn-add,
a.btn-primary, a.btn-gold, a.btn-add {
  background: var(--v0-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-gold:hover, .btn-add:hover,
.btn-primary:active, .btn-gold:active, .btn-add:active,
.btn-primary:focus-visible, .btn-gold:focus-visible, .btn-add:focus-visible,
a.btn-primary:hover, a.btn-gold:hover, a.btn-add:hover,
a.btn-primary:active, a.btn-gold:active, a.btn-add:active,
a.btn-primary:focus-visible, a.btn-gold:focus-visible, a.btn-add:focus-visible {
  background: var(--v0-primary) !important;
  color: #fff !important;
  filter: brightness(1.08);
}
.btn-outline, a.btn-outline, .btn-ghost, a.btn-ghost,
.btn-outline:hover, a.btn-outline:hover, .btn-ghost:hover, a.btn-ghost:hover,
.btn-outline:active, a.btn-outline:active, .btn-ghost:active, a.btn-ghost:active,
.btn-outline:focus-visible, a.btn-outline:focus-visible,
.btn-ghost:focus-visible, a.btn-ghost:focus-visible {
  color: var(--ink) !important;
}
.btn-outline:hover, a.btn-outline:hover,
.btn-outline:active, a.btn-outline:active {
  background: var(--field, #f0f0f0) !important;
  border-color: var(--ink) !important;
}
.header-cart-badge {
  background: var(--v0-accent);
  color: var(--v0-accent-ink, #fff) !important;
}
.header-cart:hover .header-cart-badge {
  /* group-b flips badge to white plate — keep accent ink readable */
  background: #fff !important;
  color: var(--v0-primary) !important;
}
.footer-card a:hover, .footer-card a:active, .footer-card a:focus-visible {
  color: #fff !important;
}
/* Mobile open nav sits on light surface — never keep desktop white nav text */
@media (max-width: 820px) {
  .site-header-nav.is-open a {
    color: var(--ink) !important;
    opacity: 1;
  }
  .site-header-nav.is-open a:hover,
  .site-header-nav.is-open a.is-active,
  .site-header-nav.is-open a:focus-visible,
  .site-header-nav.is-open a:active {
    color: var(--v0-primary) !important;
  }
  /* group-b paints .nav-toggle on white plate — never keep theme-v0 desktop white text */
  .nav-toggle {
    color: var(--ink) !important;
    border-color: var(--line);
  }
  .nav-toggle:hover, .nav-toggle:active, .nav-toggle:focus-visible {
    color: var(--ink) !important;
  }
}

/* GREEN 果実店 — yellow accent always dark ink; solid primary always white */
body.theme-mk .header-cart-badge,
body.theme-mk .header-cart .header-cart-badge {
  background: var(--v0-accent) !important;
  color: var(--v0-accent-ink, #1a1d18) !important;
}
body.theme-mk .header-cart:hover,
body.theme-mk .header-cart:active,
body.theme-mk .header-cart:focus-visible {
  background: var(--v0-primary) !important;
  color: #fff !important;
  filter: none;
}
body.theme-mk .header-cart:hover .header-cart-badge,
body.theme-mk .header-cart:active .header-cart-badge {
  background: #fff !important;
  color: var(--v0-primary) !important;
}
.mk-hero-actions .btn-solid, a.mk-hero-actions .btn-solid,
.mk-hero-actions .btn-solid:hover, .mk-hero-actions a.btn-solid:hover,
.mk-hero-actions .btn-solid:active, .mk-hero-actions a.btn-solid:active,
.mk-hero-actions .btn-solid:focus-visible, .mk-hero-actions a.btn-solid:focus-visible {
  background: var(--v0-primary) !important;
  color: #fff !important;
}
.mk-hero-actions .btn-solid:hover, .mk-hero-actions a.btn-solid:hover,
.mk-hero-actions .btn-solid:active, .mk-hero-actions a.btn-solid:active {
  filter: brightness(1.08);
}
.mk-hero-actions .btn-line, .mk-hero-actions a.btn-line,
.mk-hero-actions .btn-line:hover, .mk-hero-actions a.btn-line:hover,
.mk-hero-actions .btn-line:active, .mk-hero-actions a.btn-line:active,
.mk-hero-actions .btn-line:focus-visible, .mk-hero-actions a.btn-line:focus-visible {
  color: var(--ink) !important;
  background: var(--surface);
}
.mk-hero-actions .btn-line:hover, .mk-hero-actions a.btn-line:hover {
  background: var(--field) !important;
}
.mk-flavor-row a,
.mk-flavor-row a:hover,
.mk-flavor-row a:active,
.mk-flavor-row a:focus-visible {
  color: var(--ink) !important;
}
.mk-flavor-row a:hover, .mk-flavor-row a:active, .mk-flavor-row a:focus-visible {
  background: var(--v0-accent) !important; /* yellow + dark ink */
}
.mk-news-list .tag {
  background: var(--v0-accent);
  color: var(--v0-accent-ink, #1a1d18) !important;
}
.mk-news-list a:hover, .mk-news-list a:active, .mk-news-list a:focus-visible {
  color: var(--v0-primary) !important;
}
.mk-filters button:hover, .mk-filters button:focus-visible {
  color: var(--ink) !important;
  background: var(--surface);
}
.mk-filters button.is-on,
.mk-filters button.is-on:hover,
.mk-filters button.is-on:active {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
.mk-tag .add:hover, .mk-tag .add:focus-visible {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.mk-tag .add.is-on,
.mk-tag .add.is-on:hover,
.mk-tag .add.is-on:active {
  background: var(--v0-primary) !important;
  color: #fff !important;
}
.mk-promise .pill { color: var(--v0-accent-ink, #1a1d18) !important; }
.mk-steps .n { color: var(--ink) !important; }
body.theme-mk .footer-line-btn:hover,
body.theme-mk .footer-line-qr-col .btn:hover,
body.theme-mk .footer-line-btn:active,
body.theme-mk .footer-line-qr-col .btn:active {
  background: var(--v0-primary) !important;
  color: #fff !important;
  filter: brightness(1.08);
}

/* Yellow footer LINE card — storefront sets kicker/lead to var(--bg) (light); force dark ink */
body.theme-mk .footer-line-qr-col,
body.theme-mk .footer-line-qr-col .footer-line-qr-kicker,
body.theme-mk .footer-line-qr-col .footer-line-qr-lead,
body.theme-mk .footer-line-qr-col .footer-line-qr-hint {
  color: var(--v0-accent-ink, #1a1d18) !important;
}