/* ==========================================================
   MANGA FX v3 — restrained, integrated manga accents.
   - Comic "issue number" stamp in hero corner
   - Halftone dot overlay in empty hero regions
   - Section dividers with yellow-black tape
   - Small hand-stamp badges on product corners
   Scoped to .theme-manga-city.
   ========================================================== */

/* ---------- Shared hand-drawn typography (utility) ---------- */
.mfx-ono {
  font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.9;
  user-select: none;
  pointer-events: none;
  display: inline-block;
  white-space: nowrap;
}
.theme-monochrome-ink .mfx-ono,
.theme-neon-stream    .mfx-ono { display: none !important; }

/* ==========================================================
   HERO — comic book "issue" stamp (top-left)
   Small, confident, anchored. Like the cover logo of a
   Weekly Shonen Jump.
   ========================================================== */
.hero-sc-issue-row {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-sc-issue {
  background: #F3C552;
  color: #1A1B2E;
  border: 3px solid #1A1B2E;
  box-shadow: 5px 5px 0 #1A1B2E;
  padding: 8px 12px;
  min-width: 110px;
  text-align: center;
  transform: rotate(-3deg);
  font-family: 'Bebas Neue', sans-serif;
  animation: mfx-stamp-drop 600ms cubic-bezier(.18,.89,.32,1.28) both;
  flex-shrink: 0;
}
.hero-sc-genre-badge {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
@keyframes mfx-stamp-drop {
  0%   { transform: rotate(12deg) scale(1.4) translateY(-20px); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: rotate(-3deg) scale(1) translateY(0); opacity: 1; }
}
.hero-sc-issue-top {
  font-size: 10px;
  letter-spacing: 0.2em;
  border-bottom: 2px solid #1A1B2E;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.hero-sc-issue-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 0;
  white-space: nowrap;
}
.hero-sc-issue-bot {
  font-size: 10px;
  letter-spacing: 0.22em;
  border-top: 2px solid #1A1B2E;
  padding-top: 3px;
  margin-top: 4px;
}
/* non-manga themes: hide issue stamp */
.theme-monochrome-ink .hero-sc-issue,
.theme-neon-stream    .hero-sc-issue { display: none; }

/* ==========================================================
   HERO — halftone dots + speed lines (manga only)
   — disabled: clean hero images should show through untouched
   ========================================================== */
.hero-sc-dots { display: none !important; }
.theme-monochrome-ink .hero-sc-dots,
.theme-neon-stream    .hero-sc-dots { display: none; }

.hero-sc-speed { display: none !important; }
.theme-monochrome-ink .hero-sc-speed,
.theme-neon-stream    .hero-sc-speed { display: none; }

@media (max-width: 720px) {
  .hero-sc-issue-row { top: 14px; left: 14px; gap: 10px; }
  .hero-sc-issue { padding: 6px 10px; min-width: 92px; }
  .hero-sc-issue-num { font-size: 22px; }
  .hero-sc-issue-top, .hero-sc-issue-bot { font-size: 9px; }
  .hero-sc-genre-badge { font-size: 11px; padding: 5px 10px; }
}

/* ==========================================================
   SECTION HEADING — EN label becomes a bold tag; JP heading
   gets a yellow highlight bar.
   ========================================================== */
.theme-manga-city .sec-head-en {
  display: inline-block;
  padding: 3px 12px;
  background: #1A1B2E;
  color: #F7F4ED;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  position: relative;
}
.theme-manga-city .sec-head-en::before {
  content: '';
  position: absolute;
  top: -4px; right: -4px; bottom: -4px; left: -4px;
  border: 2px solid #1A1B2E;
  z-index: -1;
}

.theme-manga-city .sec-head-jp {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.theme-manga-city .sec-head-jp::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: 0.1em;
  height: 0.35em;
  background: #F3C552;
  z-index: -1;
  transform: skewX(-10deg);
}

/* ==========================================================
   PICK UP — FEATURED badge becomes a speech bubble stamp
   with halftone background that hangs off the image corner
   ========================================================== */
.theme-manga-city .pickup-hero {
  position: relative;
}
.theme-manga-city .pickup-hero-tag {
  position: absolute !important;
  top: 18px;
  left: 18px;
  padding: 8px 14px !important;
  background: #D4357E !important;
  color: #FFFFFF !important;
  border: 2.5px solid #1A1B2E !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 #1A1B2E;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  font-size: 13px !important;
  z-index: 3;
  transform: rotate(-4deg);
}

/* ==========================================================
   SERIES SECTION — darker section gets a yellow-black tape
   stripe on top edge as a hard boundary
   ========================================================== */
.theme-manga-city .series-wrap {
  position: relative;
}
.theme-manga-city .series-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #F3C552 0 12px,
    #1A1B2E 12px 24px
  );
  z-index: 2;
}
.theme-manga-city .series-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #F3C552 0 12px,
    #1A1B2E 12px 24px
  );
  z-index: 2;
}

/* Series-card hover: quick rotate-pop */
.theme-manga-city .series-card {
  transition: transform .18s ease;
}
.theme-manga-city .series-card:hover {
  transform: translateY(-4px) rotate(-0.8deg);
}

/* ==========================================================
   PRODUCTS — filter-tab active state becomes a yellow "stamp"
   ========================================================== */
.theme-manga-city .filter-tab.active {
  background: #F3C552 !important;
  color: #1A1B2E !important;
  border: 2px solid #1A1B2E !important;
  box-shadow: 3px 3px 0 #1A1B2E;
  transform: rotate(-1deg);
}
.theme-manga-city .filter-tab {
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ==========================================================
   PRODUCT CARD — NEW badge styled as comic stamp
   ========================================================== */
.theme-manga-city .product-card {
  transition: transform .18s ease;
}
.theme-manga-city .product-card:hover {
  transform: translateY(-3px);
}

.theme-manga-city .product-card .new-badge,
.theme-manga-city .badge-new,
.theme-manga-city [data-new="1"] {
  background: #D4357E !important;
  color: #FFFFFF !important;
  border: 2px solid #1A1B2E !important;
  box-shadow: 2px 2px 0 #1A1B2E;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.12em;
  transform: rotate(-6deg);
}

/* ==========================================================
   CATEGORY CARD — manga panel look
   ========================================================== */
.theme-manga-city .cat-card {
  border: 2.5px solid #1A1B2E !important;
  box-shadow: 5px 5px 0 #1A1B2E;
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme-manga-city .cat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #1A1B2E;
}

/* ==========================================================
   MARQUEE — yellow bar with bold ink text
   ========================================================== */
.theme-manga-city .marquee {
  border-top: 3px solid #1A1B2E;
  border-bottom: 3px solid #1A1B2E;
  background: #F3C552 !important;
}
.theme-manga-city .marquee-item span {
  color: #1A1B2E !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
}

/* ==========================================================
   BUTTONS — hard shadow stamp
   ========================================================== */
.theme-manga-city .btn-primary {
  border: 2.5px solid #1A1B2E !important;
  box-shadow: 5px 5px 0 #1A1B2E;
  transition: transform .12s ease, box-shadow .12s ease;
  font-weight: 900;
}
.theme-manga-city .btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #1A1B2E;
}
.theme-manga-city .btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #1A1B2E;
}