/*
Theme Name: Comic Theme
Theme URI: https://komiqsura.ge/
Author: INKBLAST
Author URI: https://komiqsura.ge/
Description: A lightweight, performance-first WooCommerce theme for a comic book & manga shop. No page builders — hand-built templates with GSAP, Lenis and Swiper for a modern, dynamic front end. Optimized for Core Web Vitals.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: comic-theme
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready, full-width-template
WC requires at least: 8.0
WC tested up to: 9.3
*/

/* =============================================================
   KOMIQSURA — Comic Book & Manga Emporium
   Home page styles
   Palette: cream / comic-red / ink-black
   Text colours are strictly #000, #fff, or accent red.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  --cream:      #f4ebd7;
  --cream-deep: #ece0c8;
  --paper:      #faf4e6;
  --ink:        #17120c;   /* dark surface (background only) */
  --ink-soft:   #221a11;
  --red:        #e5372b;
  --red-deep:   #c02418;
  --black:      #000;
  --white:      #fff;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-comic:   "Bungee", "Arial Black", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-body:    "Manrope", system-ui, sans-serif;

  --radius:   28px;
  --radius-s: 16px;
  --line:     3px;

  --shadow-ink:  6px 6px 0 var(--black);
  --shadow-red:  8px 8px 0 var(--red);
  --shadow-soft: 0 26px 50px -24px rgba(0, 0, 0, .55);

  --ease-pop: cubic-bezier(.22, 1.4, .36, 1);
  --wrap: 1400px;
  --offwhite: #fafafa;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--cream);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tx-red { color: var(--red); }

/* =============================================================
   Decorative background
   ============================================================= */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }

.bg__cream {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--paper) 0%, var(--cream) 45%, var(--cream-deep) 100%);
}

/* comic sun-ray burst */
.bg__rays {
  position: absolute;
  top: -30vh; left: 50%;
  width: 170vmax; height: 170vmax;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(229, 55, 43, .16) 0deg 4deg,
    transparent 4deg 13deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 6%, #000 32%, transparent 74%);
          mask-image: radial-gradient(closest-side, transparent 6%, #000 32%, transparent 74%);
  opacity: .8;
  will-change: transform;
}

/* halftone dot overlays */
.bg__halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .16) 1.5px, transparent 1.7px);
  background-size: 15px 15px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, transparent 40%, #000 100%);
          mask-image: radial-gradient(90% 80% at 50% 40%, transparent 40%, #000 100%);
}
.bg__halftone--corner {
  background-image: radial-gradient(circle, rgba(229, 55, 43, .5) 2px, transparent 2.3px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(60% 55% at 92% 88%, #000 0%, transparent 60%);
          mask-image: radial-gradient(60% 55% at 92% 88%, #000 0%, transparent 60%);
  opacity: .45;
}

/* floating comic badges */
.floaty { position: absolute; will-change: transform; }
.floaty--1 { top: 16%;  left: 6%; }
.floaty--2 { top: 30%;  right: 7%; }
.floaty--3 { top: 68%;  left: 8%; }
.floaty--4 { top: 52%;  right: 12%; }
.floaty--5 { top: 82%;  right: 22%; }

.burst-badge {
  display: inline-grid; place-items: center;
  padding: 16px 22px;
  font-family: var(--font-comic);
  font-size: clamp(.9rem, 2vw, 1.4rem);
  letter-spacing: .5px;
  border: var(--line) solid var(--black);
  transform: rotate(-8deg);
  clip-path: polygon(
    50% 0%, 63% 12%, 80% 6%, 78% 24%, 96% 28%, 84% 42%, 100% 52%,
    84% 62%, 94% 78%, 76% 76%, 74% 94%, 58% 84%, 50% 100%, 42% 84%,
    26% 94%, 24% 76%, 6% 78%, 16% 62%, 0% 52%, 16% 42%, 4% 28%,
    22% 24%, 20% 6%, 37% 12%
  );
}
.burst-badge--red  { background: var(--red);   color: var(--white); }
.burst-badge--ink  { background: var(--ink);   color: var(--white); transform: rotate(9deg); }
.burst-badge--cream{ background: var(--paper); color: var(--black); transform: rotate(-4deg); }

.star {
  display: block; width: 54px; height: 54px; background: var(--red);
  border: var(--line) solid var(--black);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star--sm { width: 34px; height: 34px; background: var(--ink); }

/* =============================================================
   Scroll progress + custom cursor
   ============================================================= */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 6px;
  background: rgba(0, 0, 0, .08); z-index: 60;
}
.progress__bar {
  display: block; height: 100%; width: 0%;
  background: var(--red);
  border-right: 2px solid var(--black);
}

.cursor { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; mix-blend-mode: normal; }
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__dot  { width: 8px;  height: 8px; background: var(--red); }
.cursor__ring {
  width: 40px; height: 40px; border: 2px solid var(--black);
  transition: width .2s, height .2s, background .2s;
}
.cursor.is-hover .cursor__ring { width: 60px; height: 60px; background: rgba(229, 55, 43, .12); }
.cursor.is-hover .cursor__dot  { background: var(--black); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =============================================================
   Masthead (oversized title behind the panel)
   ============================================================= */
.masthead {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: clamp(28px, 6vw, 70px) 0 -6vw;
  line-height: .8;
  pointer-events: none;
  user-select: none;
}
.masthead__word {
  position: relative;
  font-family: var(--font-comic);
  font-size: clamp(3.2rem, 15vw, 12rem);
  color: var(--black);
  letter-spacing: -2px;
}
.masthead__word::before {
  content: attr(data-text);
  position: absolute; left: 6px; top: 6px; z-index: -1;
  color: var(--red);
}
.masthead__word--red { color: var(--red); }
.masthead__word--red::before { color: var(--black); }

/* =============================================================
   Shell + hero panel
   ============================================================= */
.shell { position: relative; z-index: 2; padding: 0 clamp(14px, 4vw, 40px); }

.panel {
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--paper);
  border: var(--line) solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), var(--shadow-red);
  overflow: hidden;
}

/* ---------- Nav ---------- */
.nav-wrap { padding: clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 34px) 0; }
.nav {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 12px 10px 22px;
  background: var(--ink);
  border: var(--line) solid var(--black);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(229, 55, 43, .18);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-comic);
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: .5px;
}
.nav__spark {
  width: 16px; height: 16px; background: var(--red);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.nav__divider { width: 2px; height: 22px; background: rgba(255, 255, 255, .25); }
.nav__links { display: flex; gap: 6px; margin-right: auto; }
.nav__links a {
  display: block; padding: 8px 15px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .8rem;
  text-transform: uppercase; letter-spacing: 1px; color: var(--white);
  transition: color .2s, background .2s;
}
.nav__links a:hover { background: var(--red); color: var(--white); }

.nav__cart {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); border: var(--line) solid var(--black);
  transition: transform .25s var(--ease-pop);
}
.nav__cart:hover { transform: translateY(-3px) rotate(-6deg); }
.nav__cart-ico { font-size: 1.05rem; filter: grayscale(1) brightness(3); }
.nav__cart-count {
  position: absolute; top: -8px; right: -8px;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--white); color: var(--black);
  border: 2px solid var(--black); border-radius: 999px;
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem;
}

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 26px; height: 3px; background: var(--white); border-radius: 2px; transition: .25s; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(18px, 3vw, 30px); }
.hero__stage {
  text-align: center;
  padding: clamp(6px, 2vw, 18px) clamp(18px, 5vw, 60px) clamp(30px, 5vw, 54px);
}

.mascot-wrap {
  position: relative;
  width: min(300px, 62vw);
  margin: 0 auto clamp(6px, 2vw, 18px);
  will-change: transform;
}
.mascot { width: 100%; height: auto; overflow: visible; }
.mascot__cape { transform-origin: 235px 205px; }
.mascot__book { transform-origin: 124px 100px; }

.mascot-tag {
  position: absolute; top: 4%; right: -6%;
  font-family: var(--font-comic); font-size: .78rem;
  background: var(--red); color: var(--white);
  padding: 9px 13px; border: var(--line) solid var(--black);
  transform: rotate(9deg);
  box-shadow: var(--shadow-ink);
  clip-path: polygon(0 12%, 92% 0, 100% 84%, 8% 100%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: clamp(.7rem, 1.5vw, .85rem);
  text-transform: uppercase; letter-spacing: 3px; font-weight: 700;
  color: var(--black);
  margin-bottom: clamp(10px, 2vw, 18px);
}
.eyebrow__line { width: clamp(24px, 6vw, 60px); height: 2px; background: var(--red); }
.eyebrow--left { justify-content: flex-start; }
.eyebrow--left .eyebrow__line:last-child { display: none; }
.eyebrow--light { color: var(--white); }
.eyebrow--light .eyebrow__line { background: var(--red); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 12vw, 9rem);
  line-height: .86;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line--red { color: var(--red); }

.hero__sub {
  max-width: 46ch; margin: clamp(16px, 2.5vw, 24px) auto 0;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 500;
}

.hero__cta {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(22px, 3.5vw, 36px);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red); --btn-fg: var(--white);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-comic); font-size: .95rem; letter-spacing: .3px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--line) solid var(--black);
  border-radius: 999px;
  box-shadow: var(--shadow-ink);
  transition: transform .18s var(--ease-pop), box-shadow .18s, background .2s, color .2s;
  will-change: transform;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--black); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--black); }
.btn__ico { transition: transform .25s var(--ease-pop); }
.btn:hover .btn__ico { transform: translateX(5px); }
.btn--ghost { --btn-bg: var(--paper); --btn-fg: var(--black); }
.btn--ink   { --btn-bg: var(--ink);   --btn-fg: var(--white); }
.btn--sm    { padding: 12px 22px; font-size: .82rem; }

/* =============================================================
   Feature cards (dark band inside panel)
   ============================================================= */
.features {
  position: relative;
  background: var(--ink);
  padding: clamp(30px, 5vw, 56px) clamp(18px, 4vw, 44px) clamp(22px, 3vw, 30px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.features::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1.4px, transparent 1.6px);
  background-size: 16px 16px; pointer-events: none;
}
.feat {
  position: relative;
  background: var(--paper);
  border: var(--line) solid var(--black);
  border-radius: var(--radius-s);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-red);
  transition: transform .3s var(--ease-pop), box-shadow .3s;
  will-change: transform;
}
.feat:hover { box-shadow: 12px 12px 0 var(--red); }
.feat__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 16px;
  font-size: 1.4rem;
  background: var(--red); border: var(--line) solid var(--black);
  border-radius: 12px;
}
.feat__title { font-family: var(--font-comic); font-size: 1.06rem; margin-bottom: 8px; }
.feat__text { font-size: .95rem; font-weight: 500; }
.feat__corner {
  position: absolute; top: 12px; right: 12px; width: 12px; height: 12px;
  background: var(--red); border-radius: 50%;
}

.panel__footline {
  grid-column: 1 / -1;
  margin-top: clamp(10px, 2vw, 20px);
  padding-top: 18px;
  border-top: 2px solid rgba(255, 255, 255, .18);
  text-align: center;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white);
}

/* =============================================================
   Marquee
   ============================================================= */
.marquee-sec {
  margin: clamp(28px, 5vw, 60px) 0;
  border-top: var(--line) solid var(--black);
  border-bottom: var(--line) solid var(--black);
  background: var(--red);
  overflow: hidden;
}
.marquee { display: flex; width: max-content; }
.marquee__track {
  display: flex; align-items: center; gap: 26px;
  padding: 16px 13px;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.1rem);
  letter-spacing: 1px; color: var(--white); white-space: nowrap;
  text-transform: uppercase;
}
.marquee__track .dot { color: var(--black); font-size: 1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   Stats
   ============================================================= */
.stats { max-width: var(--wrap); margin: 0 auto; padding: clamp(8px, 3vw, 30px) clamp(16px, 4vw, 40px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.stat {
  text-align: center;
  background: var(--paper);
  border: var(--line) solid var(--black);
  border-radius: var(--radius-s);
  padding: 22px 12px;
  box-shadow: var(--shadow-ink);
}
.stat__num {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--red);
}
.stat__label {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 700;
}

/* =============================================================
   Generic section
   ============================================================= */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(46px, 8vw, 96px) clamp(16px, 4vw, 40px); }
.section__head { margin-bottom: clamp(26px, 4vw, 46px); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: .9;
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 10px;
}

/* =============================================================
   Hero slider (Swiper)
   ============================================================= */
.hero { padding: clamp(14px, 3vw, 28px) clamp(14px, 3vw, 28px) clamp(4px, 1.5vw, 12px); }
.heroSwiper { position: relative; border-radius: var(--radius-s); overflow: hidden; }

.hslide {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: clamp(420px, 42vw, 560px);
  padding: clamp(22px, 3vw, 44px) clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
.hslide__text { position: relative; z-index: 2; }
.hslide__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: clamp(.68rem, 1.4vw, .82rem);
  text-transform: uppercase; letter-spacing: 2.5px; font-weight: 700; color: var(--black);
  margin-bottom: 16px;
}
.hslide__eyebrow .eyebrow__line { width: clamp(24px, 4vw, 46px); height: 2px; background: var(--red); }
.hslide__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .86;
  text-transform: uppercase; letter-spacing: 1px;
}
.hslide__tag { max-width: 44ch; margin-top: 18px; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 500; }
.hslide__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3vw, 30px); }

/* slide artwork / comic banner */
.hslide__art {
  position: relative; z-index: 1; height: 100%;
  min-height: clamp(280px, 30vw, 420px);
  border: var(--line) solid var(--black); border-radius: var(--radius-s);
  box-shadow: var(--shadow-ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 2.5vw, 30px); overflow: hidden; background: var(--red);
}
.hslide__art::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .22) 2px, transparent 2.3px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%); mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.hslide__art::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 30deg at 72% 26%, rgba(255, 255, 255, .14) 0 4deg, transparent 4deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side at 72% 26%, #000, transparent 80%); mask-image: radial-gradient(closest-side at 72% 26%, #000, transparent 80%);
}
.hslide__art-title {
  position: relative; z-index: 2;
  font-family: var(--font-comic); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: .95;
  color: var(--white); text-shadow: 3px 3px 0 var(--black);
}
.hslide__art-pub {
  position: relative; z-index: 2; margin-top: 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: 1.5px; color: var(--white);
}
.hslide__badge {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  width: 74px; height: 74px; display: grid; place-items: center;
  font-family: var(--font-comic); font-size: 1.2rem; color: var(--black);
  background: var(--white); border: var(--line) solid var(--black); transform: rotate(9deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hslide__art--a { background: #1f6f6b; }
.hslide__art--b { background: var(--red); }
.hslide__art--c { background: var(--ink); }
.hslide__art--d { background: #d98a1f; }
/* brand slide: mascot floats free, no card */
.hslide__art--brand { background: transparent; border: 0; box-shadow: none; overflow: visible; align-items: center; }
.hslide__art--brand::before, .hslide__art--brand::after { display: none; }
.hslide__art--brand .mascot { width: min(360px, 82%); height: auto; margin: 0 auto; overflow: visible; }
.hslide__art--brand .mascot-tag { top: 6%; right: 4%; }

/* Swiper controls (comic themed) */
.heroSwiper .swiper-pagination { bottom: 12px; }
.heroSwiper .swiper-pagination-bullet {
  width: 12px; height: 12px; margin: 0 5px !important; opacity: 1;
  background: transparent; border: 2px solid var(--black); border-radius: 50%;
  transition: transform .25s var(--ease-pop), background .25s;
}
.heroSwiper .swiper-pagination-bullet-active { background: var(--red); transform: scale(1.25); }
.hswiper-nav {
  width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  background: var(--paper); color: var(--black);
  border: var(--line) solid var(--black); box-shadow: var(--shadow-ink);
  --swiper-navigation-size: 20px;
  transition: transform .2s var(--ease-pop), background .2s, color .2s;
}
.hswiper-nav::after { font-size: 20px; font-weight: 900; }
.hswiper-nav:hover { background: var(--red); color: var(--white); transform: scale(1.08); }
.heroSwiper .swiper-button-prev { left: 12px; }
.heroSwiper .swiper-button-next { right: 12px; }

/* =============================================================
   Filter (comic pills) — Superhero archive
   ============================================================= */
.filter { display: flex; flex-wrap: wrap; gap: 10px; }
.filter__btn {
  padding: 10px 20px; font-family: var(--font-comic); font-size: .8rem;
  background: var(--paper); color: var(--black);
  border: var(--line) solid var(--black); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .18s var(--ease-pop), box-shadow .18s, background .2s, color .2s;
}
.filter__btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--black); }
.filter__btn.is-active { background: var(--red); color: var(--white); box-shadow: 4px 4px 0 var(--black); }

/* =============================================================
   Superhero archive grid  (reuses .product / .cover)
   ============================================================= */
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.archive-grid .product[hidden] { display: none; }
@media (max-width: 1150px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .archive-grid { grid-template-columns: 1fr; } }

/* =============================================================
   Manga archive — distinct off-white editorial zone
   ============================================================= */
.manga {
  position: relative;
  margin: clamp(44px, 6vw, 84px) 0;
  background: var(--offwhite);
  border-top: var(--line) solid var(--black);
  border-bottom: var(--line) solid var(--black);
  color: var(--black); overflow: hidden;
}
.manga::before { /* faint canon grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 92%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 92%);
}
.manga::after { /* oversized kanji watermark */
  content: "漫画"; position: absolute; right: -1%; bottom: -8%;
  font-family: "Noto Sans JP", sans-serif; font-weight: 900;
  font-size: clamp(8rem, 22vw, 19rem); color: rgba(229, 55, 43, .05);
  line-height: .8; letter-spacing: -8px; pointer-events: none;
}
.manga__inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: clamp(46px, 7vw, 90px) clamp(16px, 4vw, 40px); }

.manga__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 50px); }
.manga__headline { display: flex; align-items: center; gap: 20px; }
.manga__kanji-badge {
  flex: none; width: 74px; height: 74px; display: grid; place-items: center;
  font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 1.7rem;
  color: var(--white); background: var(--ink); border: var(--line) solid var(--black);
  border-radius: 16px; box-shadow: 5px 5px 0 var(--red);
}
.manga__eyebrow { font-family: var(--font-mono); font-size: clamp(.68rem, 1.4vw, .8rem); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; color: var(--red); }
.manga__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .9; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; color: var(--black);
}

/* minimal underline filter tabs */
.manga-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.manga-filter__btn {
  position: relative; padding: 10px 16px 12px;
  font-family: var(--font-body); font-weight: 800; font-size: .92rem; color: var(--black); letter-spacing: .2px;
  transition: color .2s;
}
.manga-filter__btn::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease-pop);
}
.manga-filter__btn:hover::after, .manga-filter__btn.is-active::after { transform: scaleX(1); }
.manga-filter__btn.is-active { color: var(--red); }

/* manga grid + cards (cleaner, editorial) */
.manga-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 28px); }
.manga-grid .manga-card[hidden] { display: none; }
.manga-card {
  background: var(--white); border: 2px solid var(--black); border-radius: 5px;
  overflow: hidden; box-shadow: 6px 6px 0 var(--black);
  transition: transform .3s var(--ease-pop), box-shadow .3s;
  will-change: transform;
}
.manga-card:hover { box-shadow: 11px 11px 0 var(--red); }

.manga-cover {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-bottom: 2px solid var(--black);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
}
.manga-cover__frame { position: absolute; inset: 10px; border: 1.5px solid currentColor; opacity: .45; pointer-events: none; }
.manga-cover__kanji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: clamp(4rem, 9vw, 7rem); line-height: 1;
}
.manga-cover__vol { position: relative; z-index: 2; font-family: var(--font-mono); font-weight: 700; font-size: .66rem; letter-spacing: 2px; }
.manga-cover__romaji { position: relative; z-index: 2; margin-top: 6px; font-family: var(--font-comic); font-size: clamp(1rem, 1.6vw, 1.28rem); line-height: .98; }
.manga-cover__fav {
  position: absolute; z-index: 3; top: 12px; right: 12px;
  width: 34px; height: 34px; display: grid; place-items: center; font-size: 1rem;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit;
  transition: transform .2s var(--ease-pop), background .2s, color .2s, border-color .2s;
}
.manga-cover__fav:hover { background: var(--red); color: var(--white); border-color: var(--black); transform: scale(1.14); }

.manga-cover--ink   { background: var(--ink); color: var(--white); }
.manga-cover--ink .manga-cover__kanji  { color: var(--red); }
.manga-cover--paper { background: var(--offwhite); color: var(--black); }
.manga-cover--paper .manga-cover__kanji { color: rgba(229, 55, 43, .14); }
.manga-cover--paper .manga-cover__vol   { color: var(--red); }
.manga-cover--red   { background: var(--red); color: var(--white); }
.manga-cover--red .manga-cover__kanji  { color: rgba(0, 0, 0, .16); }

.manga-card__body { padding: 14px 15px 16px; }
.manga-card__title { font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; line-height: 1.15; }
.manga-card__author { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .72rem; color: var(--black); }
.manga-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1.5px solid rgba(0, 0, 0, .12); }
.manga-card__chapters { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; }
.read-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; font-family: var(--font-body); font-weight: 800; font-size: .78rem;
  background: var(--ink); color: var(--white); border: 2px solid var(--black); border-radius: 999px;
  transition: background .2s, transform .18s var(--ease-pop), gap .2s;
}
.read-btn:hover { background: var(--red); transform: translateY(-2px); gap: 10px; }

@media (max-width: 1150px) { .manga-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .manga-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .manga-grid { grid-template-columns: 1fr; } }

/* ---- Hero slider responsive ---- */
@media (max-width: 860px) {
  .hslide { grid-template-columns: 1fr; gap: 24px; min-height: 0; text-align: center; padding-bottom: 48px; }
  .hslide__eyebrow, .hslide__cta { justify-content: center; }
  .hslide__tag { margin-left: auto; margin-right: auto; }
  .hslide__art { order: -1; min-height: 230px; }
  .hslide__art--brand { min-height: 0; }
  .heroSwiper .hswiper-nav { display: none; }
}

/* =============================================================
   Featured comics
   ============================================================= */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
.product {
  background: var(--paper);
  border: var(--line) solid var(--black);
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: var(--shadow-ink);
  transition: transform .3s var(--ease-pop), box-shadow .3s;
  will-change: transform;
}
.product:hover { box-shadow: 12px 12px 0 var(--red); }

.cover {
  position: relative; aspect-ratio: 3 / 4;
  padding: 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-bottom: var(--line) solid var(--black);
  background: var(--red);
}
.cover::before { /* halftone shading */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .22) 2px, transparent 2.3px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
          mask-image: linear-gradient(135deg, #000, transparent 70%);
}
.cover::after { /* action rays */
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 30deg at 70% 30%, rgba(255,255,255,.14) 0 4deg, transparent 4deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side at 70% 30%, #000, transparent 78%);
          mask-image: radial-gradient(closest-side at 70% 30%, #000, transparent 78%);
}
.cover__title {
  position: relative; z-index: 2;
  font-family: var(--font-comic); font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: .95; color: var(--white);
  text-shadow: 3px 3px 0 var(--black);
}
.cover__burst {
  position: absolute; z-index: 2; top: 14px; right: 12px;
  width: 62px; height: 62px; display: grid; place-items: center;
  font-family: var(--font-comic); font-size: 1.1rem; color: var(--black);
  background: var(--white); border: var(--line) solid var(--black);
  transform: rotate(10deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cover__flag {
  position: absolute; z-index: 2; top: 16px; left: 0;
  padding: 6px 14px 6px 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: 1px;
  background: var(--white); color: var(--black);
  border: var(--line) solid var(--black); border-left: 0;
}
.cover__flag--ink { background: var(--ink); color: var(--white); }
.cover__pub {
  position: absolute; z-index: 2; top: 52px; left: 14px;
  font-family: var(--font-mono); font-weight: 700; font-size: .66rem; letter-spacing: 1px;
  color: var(--white);
  padding: 3px 8px; background: rgba(0, 0, 0, .55);
  border: 2px solid var(--black); border-radius: 999px;
}
.cover--a { background: #1f6f6b; }
.cover--b { background: var(--red); }
.cover--c { background: var(--ink); }
.cover--d { background: #d98a1f; }
.cover--e { background: #3b3f8f; }
.cover--f { background: #7a1f6b; }

.product__body { padding: 16px 16px 18px; }
.product__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.product__name { font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.product__tag {
  flex: none; margin-top: 2px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .5px; font-weight: 700;
  text-transform: uppercase; padding: 4px 8px;
  border: 2px solid var(--black); border-radius: 999px;
}
.product__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.product__price { font-family: var(--font-display); font-size: 1.6rem; color: var(--red); }
.add {
  padding: 10px 16px; font-family: var(--font-comic); font-size: .74rem;
  background: var(--ink); color: var(--white);
  border: var(--line) solid var(--black); border-radius: 999px;
  transition: transform .18s var(--ease-pop), background .2s;
}
.add:hover { background: var(--red); transform: translateY(-2px) scale(1.04); }
.add.is-added { background: #1f6f6b; }

/* =============================================================
   Fan club
   ============================================================= */
.club__panel {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 50px);
  background: var(--ink); color: var(--white);
  border: var(--line) solid var(--black); border-radius: var(--radius);
  padding: clamp(30px, 5vw, 60px);
  box-shadow: var(--shadow-red);
  overflow: hidden;
}
.club__panel::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 85% 20%, rgba(229,55,43,.28) 0 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side at 85% 20%, #000, transparent 70%);
          mask-image: radial-gradient(closest-side at 85% 20%, #000, transparent 70%);
  pointer-events: none;
}
.club__copy, .club__form { position: relative; z-index: 2; }
.club__badge {
  position: absolute; top: -16px; left: -16px; z-index: 3;
  width: 92px; height: 92px; display: grid; place-items: center;
  font-family: var(--font-comic); font-size: 1.1rem; color: var(--white);
  background: var(--red); border: var(--line) solid var(--black);
  transform: rotate(-12deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.club__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .92; text-transform: uppercase; margin: 6px 0 12px; }
.club__text { font-weight: 500; max-width: 42ch; }
.club__form { display: flex; flex-wrap: wrap; gap: 12px; }
.club__input {
  flex: 1 1 220px; min-width: 0;
  padding: 15px 20px; font-size: 1rem; font-family: var(--font-body); font-weight: 600;
  background: var(--paper); color: var(--black);
  border: var(--line) solid var(--black); border-radius: 999px;
}
.club__input::placeholder { color: var(--black); opacity: .5; }
.club__note {
  flex: 1 0 100%;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--white);
  min-height: 1.2em;
}
.club__note.is-error { color: var(--red); }

/* =============================================================
   Footer
   ============================================================= */
.footer {
  position: relative; z-index: 2;
  margin-top: clamp(40px, 6vw, 80px);
  background: var(--ink); color: var(--white);
  border-top: var(--line) solid var(--black);
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 60px) 26px;
}
.footer__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 48px);
}
.nav__brand--footer { font-size: 1.4rem; margin-bottom: 14px; }
.footer__blurb { max-width: 34ch; font-weight: 500; font-size: .95rem; color: var(--white); }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  font-family: var(--font-comic); font-size: .8rem;
  border: var(--line) solid var(--black); border-radius: 50%;
  background: var(--paper); color: var(--black);
  transition: transform .25s var(--ease-pop), background .2s, color .2s;
}
.footer__social a:hover { background: var(--red); color: var(--white); transform: translateY(-4px) rotate(-8deg); }
.footer__h { font-family: var(--font-comic); font-size: .92rem; margin-bottom: 16px; color: var(--red); }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-family: var(--font-mono); font-size: .84rem; color: var(--white); transition: color .2s, padding-left .2s; }
.footer__col a:hover { color: var(--red); padding-left: 6px; }

.footer__bar {
  max-width: var(--wrap); margin: clamp(30px, 4vw, 50px) auto 0;
  padding-top: 22px; border-top: 2px solid rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer__bar p { font-family: var(--font-mono); font-size: .76rem; letter-spacing: 1px; color: var(--white); }
.footer__tag { color: var(--red) !important; text-transform: uppercase; font-weight: 700; }

/* =============================================================
   Reveal animation base states (only when JS/GSAP present)
   ============================================================= */
.js [data-reveal],
.js [data-reveal-lines] .line,
.js [data-reveal-lines] > span { will-change: transform, opacity; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
  .features { grid-template-columns: 1fr; }
  .genre-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .club__panel { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav__links, .nav__divider { display: none; }
  .nav__burger { display: flex; }
  .nav { padding-right: 16px; }
  .nav__links.is-open {
    display: flex; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 14px;
    background: var(--ink); border: var(--line) solid var(--black); border-radius: 20px;
    box-shadow: var(--shadow-ink); z-index: 20;
  }
  .genre-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .section__head--row { align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .masthead { margin-bottom: -10vw; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
  .cursor { display: none; }
}

/* =============================================================
   MULTI-PAGE ADDITIONS
   ============================================================= */

/* active nav link */
.nav__links a.is-current { background: var(--red); color: var(--white); }

/* ---- Archive page hero (inside panel) ---- */
.page-hero { position: relative; text-align: center; overflow: hidden;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 5vw, 60px) clamp(34px, 5vw, 56px); }
.page-hero__inner { position: relative; z-index: 1; }
.breadcrumb { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.breadcrumb a { color: var(--black); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span[aria-current] { color: var(--red); }
.page-hero .eyebrow { justify-content: center; }
.page-hero .eyebrow--left .eyebrow__line { display: inline-block !important; }
.page-hero__title { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem); line-height: .84; text-transform: uppercase; letter-spacing: 1px; }
.page-hero__sub { max-width: 62ch; margin: clamp(14px, 2vw, 22px) auto 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 500; }
.page-hero__badge { position: absolute; z-index: 1; top: 14%; right: 6%;
  font-family: var(--font-comic); font-size: 1rem; color: var(--white);
  background: var(--red); padding: 14px 16px; border: var(--line) solid var(--black);
  transform: rotate(10deg); box-shadow: var(--shadow-ink);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---- Filter toolbar above a grid ---- */
.archive-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.archive-bar__label { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.archive-bar__count { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }
.archive-bar__count b { font-family: var(--font-display); font-size: 1.35rem; color: var(--red); }

.read-btn--lg { padding: 13px 22px; font-size: .9rem; }

/* ---- Manga decorative illustrations (black & white) ---- */
.manga-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.illus { position: absolute; }
.illus--eye { width: clamp(110px, 14vw, 210px); top: 6%; right: 4%; transform: rotate(-6deg); opacity: .85; }
.illus--char { width: clamp(120px, 15vw, 220px); bottom: -8px; left: 2%; opacity: .1; }
.sfx { position: absolute; font-family: "Noto Sans JP", sans-serif; font-weight: 900; line-height: .8; letter-spacing: -2px;
  color: transparent; -webkit-text-stroke: 2px #000; user-select: none; }
.sfx--1 { top: 9%; left: 4%; font-size: clamp(2rem, 5vw, 4.4rem); transform: rotate(-8deg); opacity: .45; }
.sfx--2 { bottom: 14%; right: 9%; font-size: clamp(1.5rem, 4vw, 3.2rem); transform: rotate(7deg); opacity: .3; letter-spacing: 4px; }
.manga-decor__speed { position: absolute; width: 60vw; height: 60vw; max-width: 680px; max-height: 680px; top: -12%; right: -12%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.55) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 30%, #000 52%, transparent 74%);
          mask-image: radial-gradient(closest-side, transparent 30%, #000 52%, transparent 74%); opacity: .09; }
.manga-decor__tone { position: absolute; width: 210px; height: 210px; border-radius: 50%;
  background-image: radial-gradient(circle, #000 2px, transparent 2.4px); background-size: 12px 12px; opacity: .12; }
.manga-decor__tone--1 { bottom: 6%; left: 7%; }
.manga-decor__tone--2 { top: 16%; right: 22%; width: 150px; height: 150px; }

/* teaser context: illustrations present but never fighting the cards */
.manga-teaser .illus--char { opacity: .16; left: -1%; bottom: -18px; width: clamp(150px, 16vw, 240px); }
.manga-teaser .illus--eye { opacity: .85; }
.manga-teaser .manga-decor__tone { opacity: .16; }
.manga-teaser { margin-top: clamp(28px, 4vw, 50px); }

/* ---- Manga PAGE theme (off-white, no red rays) ---- */
.panel--manga { background: var(--offwhite); }
.page-hero--manga .manga__kanji-badge--hero { display: inline-grid; margin: 0 auto 16px; }
.page-hero--manga .manga__eyebrow { margin-bottom: 4px; }
.page-hero--manga .illus--eye { opacity: .9; top: 8%; }
.page-hero--manga .illus--char { opacity: .13; }
.manga--page { margin: clamp(22px, 3vw, 40px) 0 0; border-top: 0; }

.theme-manga .bg__cream { background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--offwhite) 55%, #efefec 100%); }
.theme-manga .bg__rays { display: none; }
.theme-manga .bg__halftone { background-image: radial-gradient(circle, rgba(0,0,0,.12) 1.3px, transparent 1.5px); opacity: .3; }
.theme-manga .bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000, transparent 92%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000, transparent 92%); }

.section.archive { padding-top: clamp(32px, 4vw, 56px); }

@media (max-width: 640px) {
  .page-hero__badge { display: none; }
  .archive-bar__count { margin-left: 0; width: 100%; }
  .illus--char { display: none; }
}

/* =============================================================
   WooCommerce — scoped styling (reserved for the dynamic phase)
   ============================================================= */
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-comic); font-size: .9rem; line-height: 1;
  padding: 14px 26px; border-radius: 999px;
  background: var(--red); color: var(--white);
  border: var(--line) solid var(--black); box-shadow: var(--shadow-ink);
  transition: transform .18s var(--ease-pop), box-shadow .18s, background .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover {
  color: var(--white); transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--black);
}
.woocommerce .button.alt, .woocommerce #respond input#submit.alt { background: var(--ink); }
.woocommerce ul.products {
  display: grid; gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(4, 1fr);
}
.woocommerce ul.products li.product {
  background: var(--paper); border: var(--line) solid var(--black); border-radius: var(--radius-s);
  overflow: hidden; padding: 0 0 16px; text-align: left; margin: 0; width: auto; float: none;
  box-shadow: var(--shadow-ink); transition: transform .3s var(--ease-pop), box-shadow .3s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 10px 10px 0 var(--red); }
.woocommerce ul.products li.product a img { margin: 0 0 12px; border-bottom: var(--line) solid var(--black); aspect-ratio: 3/4; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-weight: 800; font-size: 1rem; padding: 0 14px; }
.woocommerce ul.products li.product .price { display: block; padding: 6px 14px 12px; font-family: var(--font-display); font-size: 1.4rem; color: var(--red); }
.woocommerce ul.products li.product .button { margin: 0 14px; }
.woocommerce span.onsale {
  background: var(--red); color: var(--white); border: 2px solid var(--black);
  font-family: var(--font-comic); border-radius: 0; min-height: auto; min-width: auto; padding: 6px 12px;
}
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-display); color: var(--red); font-size: 1.8rem; }
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* =============================================================
   SINGLE PRODUCT PAGE (comic-styled, static demo)
   ============================================================= */
.page-hero--product { text-align: left; padding-top: clamp(18px, 3vw, 30px); padding-bottom: clamp(14px, 2vw, 22px); }
.page-hero--product .breadcrumb { justify-content: flex-start; margin: 0; }

.product-single { padding-top: clamp(28px, 4vw, 52px); }
.product-single__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }

.product-single__cover { aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--shadow-ink), var(--shadow-red); }
.product-single__cover .cover__title { font-size: clamp(2rem, 4vw, 3.4rem); }
.product-single__thumbs { display: flex; gap: 12px; margin-top: 16px; }
.product-single__thumb {
  flex: 1; aspect-ratio: 1; position: relative; overflow: hidden; cursor: pointer;
  border: var(--line) solid var(--black); border-radius: var(--radius-s); box-shadow: 4px 4px 0 var(--black);
  transition: transform .18s var(--ease-pop), box-shadow .18s;
}
.product-single__thumb::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,.22) 2px, transparent 2.3px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%); mask-image: linear-gradient(135deg, #000, transparent 72%); }
.product-single__thumb:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--black); }
.product-single__thumb.is-active { outline: 3px solid var(--red); outline-offset: 2px; }
.product-single__thumb--a { background: #1f6f6b; }
.product-single__thumb--b { background: var(--red); }
.product-single__thumb--c { background: var(--ink); }

.product-single__summary { position: relative; }
.product-single__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .9; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 10px; }
.product-single__rating { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.product-single__stars { color: var(--red); letter-spacing: 2px; font-size: 1.05rem; }
.product-single__price { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--red); margin: 14px 0 4px; }
.product-single__price del { color: var(--black); opacity: .4; font-size: .55em; margin-right: 10px; }
.product-single__excerpt { font-weight: 500; max-width: 54ch; margin-top: 12px; }
.product-single__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.product-single__chip { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 6px 12px; border: 2px solid var(--black); border-radius: 999px; background: var(--paper); }
.product-single__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 24px 0; }
.qty { display: inline-flex; align-items: center; overflow: hidden;
  border: var(--line) solid var(--black); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-ink); }
.qty__btn { width: 46px; height: 50px; font-family: var(--font-comic); font-size: 1.1rem; background: transparent; transition: background .2s, color .2s; }
.qty__btn:hover { background: var(--red); color: var(--white); }
.qty__input { width: 46px; height: 50px; text-align: center; border: 0; background: transparent;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--black); -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn--cart { padding: 16px 32px; }
.product-single__facts { display: grid; gap: 11px; margin-top: 22px; padding-top: 18px; border-top: 2px dashed rgba(0,0,0,.2); }
.product-single__facts li { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }
.product-single__facts .ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  background: var(--red); border: 2px solid var(--black); border-radius: 8px; }

@media (max-width: 860px) { .product-single__grid { grid-template-columns: 1fr; } }

/* ---- Related comics slider ---- */
.related { padding-top: clamp(20px, 3vw, 30px); }
.related__nav { display: flex; gap: 10px; }
.rel-nav { position: static; width: 48px; height: 48px; margin: 0; border-radius: 50%;
  background: var(--paper); color: var(--black); border: var(--line) solid var(--black); box-shadow: var(--shadow-ink);
  --swiper-navigation-size: 18px; transition: transform .2s var(--ease-pop), background .2s, color .2s; }
.rel-nav::after { font-size: 18px; font-weight: 900; }
.rel-nav:hover { background: var(--red); color: var(--white); transform: scale(1.08); }
.relatedSwiper { overflow: hidden; padding: 10px 6px 42px; }
.relatedSwiper .swiper-slide { height: auto; }
.relatedSwiper .swiper-slide .product { height: 100%; }
.relatedSwiper .swiper-pagination { bottom: 6px; }
.relatedSwiper .swiper-pagination-bullet { width: 11px; height: 11px; margin: 0 5px !important; opacity: 1;
  background: transparent; border: 2px solid var(--black); border-radius: 50%; transition: transform .25s var(--ease-pop), background .25s; }
.relatedSwiper .swiper-pagination-bullet-active { background: var(--red); transform: scale(1.2); }

/* =============================================================
   WELCOME ENTRY MODAL (comic pop-art)
   ============================================================= */
.comic-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.comic-modal[hidden] { display: none !important; }
.comic-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.64); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.comic-modal__panel { position: relative; z-index: 1; width: min(460px, 92vw); overflow: hidden; text-align: center;
  background: var(--paper); border: 5px solid var(--black); border-radius: var(--radius);
  box-shadow: 12px 12px 0 var(--red), 0 26px 50px -24px rgba(0,0,0,.55);
  padding: clamp(34px, 5vw, 50px) clamp(24px, 4vw, 40px) clamp(36px, 5vw, 46px);
  animation: comicModalPop .5s var(--ease-pop) both; }
.comic-modal__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(0,0,0,.16) 2px, transparent 2.3px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(85% 80% at 85% 12%, #000, transparent 72%); mask-image: radial-gradient(85% 80% at 85% 12%, #000, transparent 72%); }
.comic-modal__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(229,55,43,.16) 0 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 0, #000, transparent 78%); mask-image: radial-gradient(closest-side at 50% 0, #000, transparent 78%); }
.comic-modal__close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; font-family: var(--font-comic); font-size: 1.4rem; line-height: 1;
  background: var(--red); color: var(--white); border: var(--line) solid var(--black); border-radius: 50%;
  box-shadow: var(--shadow-ink); transition: transform .25s var(--ease-pop), background .2s; }
.comic-modal__close:hover { transform: rotate(90deg) scale(1.06); background: var(--red-deep); }
.comic-modal__badge { position: absolute; z-index: 3; top: -20px; left: -20px; width: 88px; height: 88px;
  display: grid; place-items: center; font-family: var(--font-comic); font-size: 1rem; color: var(--white);
  background: var(--red); border: var(--line) solid var(--black); transform: rotate(-14deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.comic-modal__eyebrow { position: relative; z-index: 2; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 3px; font-weight: 700; font-size: .72rem; color: var(--red); }
.comic-modal__bubble { position: relative; z-index: 2; margin: 20px auto 6px; max-width: 92%;
  background: var(--white); border: var(--line) solid var(--black); border-radius: 22px; padding: 26px 22px; box-shadow: var(--shadow-ink); }
.comic-modal__bubble::before { content: ""; position: absolute; left: 40px; bottom: -12px; width: 0; height: 0;
  border: 15px solid transparent; border-top-color: var(--white); z-index: 2; }
.comic-modal__bubble::after { content: ""; position: absolute; left: 37px; bottom: -20px; width: 0; height: 0;
  border: 18px solid transparent; border-top-color: var(--black); z-index: 1; }
.comic-modal__text { font-family: "Noto Sans Georgian", var(--font-body); font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.3rem); line-height: 1.18; color: var(--black); }
.comic-modal__sub { position: relative; z-index: 2; margin-top: 18px; font-weight: 600; font-size: .95rem; color: var(--black); }
@keyframes comicModalPop { from { transform: translateY(18px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .comic-modal__panel { animation: none; } }

/* =============================================================
   WOOCOMMERCE — dynamic archive cards (real product images)
   ============================================================= */
.cover--product { padding: 0; display: block; }
.cover--product .cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover--product .cover__flag, .cover--product .cover__pub { z-index: 3; }
.manga-cover--product { padding: 0; }
.manga-cover--product .manga-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.manga-cover--product .manga-cover__vol { z-index: 3; position: absolute; top: 12px; left: 12px; background: var(--red); color: var(--white); padding: 4px 9px; }

/* WooCommerce loop add-to-cart button — match the comic .add pill */
.product__foot .button, .manga-card__foot .button,
.relatedSwiper .button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-family: var(--font-comic); font-size: .72rem; line-height: 1;
  background: var(--ink); color: var(--white);
  border: var(--line) solid var(--black); border-radius: 999px;
  transition: transform .18s var(--ease-pop), background .2s; white-space: nowrap;
}
.product__foot .button:hover, .manga-card__foot .button:hover { background: var(--red); color: var(--white); transform: translateY(-2px) scale(1.04); }
.product__foot .added_to_cart, .manga-card__foot .added_to_cart {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--red); padding: 6px 4px; white-space: nowrap;
}
.product__foot .button.loading, .manga-card__foot .button.loading { opacity: .7; pointer-events: none; }
.product__foot .button.added, .manga-card__foot .button.added { background: #1f6f6b; }

/* Empty archive state */
.archive-empty { position: relative; text-align: center; max-width: 620px; margin: 0 auto;
  padding: clamp(36px, 6vw, 70px) clamp(24px, 5vw, 50px);
  background: var(--paper); border: var(--line) solid var(--black); border-radius: var(--radius);
  box-shadow: var(--shadow-ink), var(--shadow-red); }
.archive-empty__badge { position: absolute; top: -20px; left: -14px; display: grid; place-items: center;
  width: 82px; height: 82px; font-family: var(--font-comic); font-size: .95rem; color: var(--white);
  background: var(--red); border: var(--line) solid var(--black); transform: rotate(-12deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.archive-empty__title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase; line-height: .95; margin-bottom: 14px; }
.archive-empty__text { font-weight: 500; margin-bottom: 22px; }

/* =============================================================
   WOOCOMMERCE — shop / page-hero for Woo, notices
   ============================================================= */
.woo-section { padding-top: clamp(24px, 4vw, 44px); }
.page-hero--woo { text-align: left; padding-top: clamp(18px, 3vw, 30px); padding-bottom: clamp(14px, 2vw, 24px); }
.page-hero--woo .breadcrumb { justify-content: flex-start; margin: 0 0 12px; }
.woo-section .woocommerce-result-count { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }
.woo-section .woocommerce-ordering select { font-family: var(--font-mono); border: var(--line) solid var(--black); border-radius: 999px; padding: 8px 14px; background: var(--paper); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  font-family: var(--font-body); font-weight: 600; background: var(--paper);
  border: var(--line) solid var(--black); border-left-width: 8px; border-radius: var(--radius-s);
  box-shadow: var(--shadow-ink); padding: 16px 20px; margin: 0 0 24px; list-style: none; }
.woocommerce-message { border-left-color: #1f6f6b; }
.woocommerce-info { border-left-color: var(--ink); }
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; }

/* =============================================================
   SLIDE-OUT CART DRAWER
   ============================================================= */
.cart-drawer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.cart-drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .35s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cart-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  display: flex; flex-direction: column; background: var(--paper);
  border-left: var(--line) solid var(--black); box-shadow: -14px 0 40px -18px rgba(0,0,0,.6);
  transform: translateX(105%); transition: transform .4s var(--ease-pop); will-change: transform; }
.cart-drawer.is-open { pointer-events: auto; }
.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: var(--line) solid var(--black); background: var(--ink); }
.cart-drawer__title { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; color: var(--white); letter-spacing: 1px; }
.cart-drawer__close { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-comic);
  font-size: 1.2rem; color: var(--white); background: var(--red); border: var(--line) solid var(--black);
  border-radius: 50%; transition: transform .25s var(--ease-pop); }
.cart-drawer__close:hover { transform: rotate(90deg) scale(1.06); }

.cart-drawer__inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cart-drawer__items { flex: 1; overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start;
  padding: 16px 22px; border-bottom: 2px dashed rgba(0,0,0,.14); }
.cart-item__media { display: block; border: 2px solid var(--black); border-radius: 10px; overflow: hidden; background: var(--cream); }
.cart-item__media img { width: 64px; height: 64px; object-fit: cover; display: block; }
.cart-item__info { min-width: 0; }
.cart-item__name { display: block; font-family: var(--font-body); font-weight: 800; font-size: .92rem; line-height: 1.15; color: var(--black); }
.cart-item__unit { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .74rem; color: var(--black); opacity: .7; }
.cart-item__controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart-item__line { font-family: var(--font-display); font-size: 1.15rem; color: var(--red); white-space: nowrap; }
.cart-item__remove { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1rem;
  border: 2px solid var(--black); border-radius: 50%; background: var(--paper); color: var(--black);
  transition: background .2s, color .2s, transform .2s var(--ease-pop); }
.cart-item__remove:hover { background: var(--red); color: var(--white); transform: rotate(90deg); }

.qty--sm { box-shadow: 3px 3px 0 var(--black); }
.qty--sm .qty__btn { width: 30px; height: 32px; font-size: .95rem; }
.qty--sm .qty__input { width: 34px; height: 32px; font-size: 1rem; }

.cart-drawer__foot { flex: none; padding: 18px 22px 22px; border-top: var(--line) solid var(--black); background: var(--cream); }
.cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; }
.cart-drawer__subtotal span { font-family: var(--font-comic); font-size: .9rem; text-transform: uppercase; }
.cart-drawer__subtotal b { font-family: var(--font-display); font-size: 1.9rem; color: var(--red); }
.cart-drawer__note { font-family: var(--font-mono); font-size: .68rem; opacity: .7; margin: 4px 0 14px; }
.cart-drawer__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.cart-drawer__actions .btn { justify-content: center; }
.cart-drawer__empty { display: grid; place-items: center; gap: 14px; text-align: center; padding: 60px 24px; height: 100%; align-content: center; }
.cart-drawer__empty-ico { font-size: 2.6rem; filter: grayscale(1); }
.cart-drawer__empty-text { font-family: var(--font-comic); font-size: 1.05rem; }
.cart-drawer.is-loading .cart-drawer__inner { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* =============================================================
   CART PAGE (comic cards) + totals restyle
   ============================================================= */
.comic-cart { margin-bottom: clamp(28px, 4vw, 44px); }
.comic-cart__list { display: grid; gap: 16px; }
.comic-cart__item { display: grid; grid-template-columns: 96px 1fr auto; gap: clamp(14px, 2vw, 24px); align-items: center;
  background: var(--paper); border: var(--line) solid var(--black); border-radius: var(--radius-s);
  box-shadow: var(--shadow-ink); padding: 16px; transition: box-shadow .3s; }
.comic-cart__item:hover { box-shadow: 10px 10px 0 var(--red); }
.comic-cart__media img { width: 96px; height: 120px; object-fit: cover; border: 2px solid var(--black); border-radius: 10px; }
.comic-cart__name { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.comic-cart__name a { color: var(--black); }
.comic-cart__name a:hover { color: var(--red); }
.comic-cart__unit { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: .78rem; opacity: .7; }
.comic-cart__controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.comic-cart__controls .quantity { display: inline-flex; }
.comic-cart__controls .quantity .qty { width: 64px; height: 46px; text-align: center;
  font-family: var(--font-display); font-size: 1.2rem; border: var(--line) solid var(--black);
  border-radius: 12px; background: var(--cream); box-shadow: var(--shadow-ink); }
.comic-cart__remove { width: 30px; height: 30px; display: grid; place-items: center; font-size: 1.1rem;
  border: 2px solid var(--black); border-radius: 50%; background: var(--paper); color: var(--black);
  transition: background .2s, color .2s, transform .2s var(--ease-pop); }
.comic-cart__remove:hover { background: var(--red); color: var(--white); transform: rotate(90deg); }
.comic-cart__line { font-family: var(--font-display); font-size: 1.6rem; color: var(--red); white-space: nowrap; }
.comic-cart__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px;
  padding-top: 20px; border-top: 2px dashed rgba(0,0,0,.2); }
.comic-cart__coupon { display: flex; gap: 10px; margin-right: auto; }
.comic-cart__coupon-input { padding: 12px 18px; font-family: var(--font-body); font-weight: 600;
  border: var(--line) solid var(--black); border-radius: 999px; background: var(--paper); min-width: 180px; }
.comic-cart__collaterals { max-width: 460px; margin-left: auto; }

/* totals table -> comic card */
.cart_totals { background: var(--ink); color: var(--white); border: var(--line) solid var(--black);
  border-radius: var(--radius); box-shadow: var(--shadow-red); padding: clamp(22px, 3vw, 34px); }
.cart_totals h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-mono); font-size: .86rem; text-align: left; vertical-align: top; color: var(--white); }
.cart_totals table td { text-align: right; }
.cart_totals .order-total th, .cart_totals .order-total td { border-bottom: 0; padding-top: 16px; }
.cart_totals .order-total .amount { font-family: var(--font-display); font-size: 1.8rem; color: var(--red); }
.cart_totals a.button, .cart_totals .checkout-button { display: flex; justify-content: center; width: 100%; margin-top: 18px;
  padding: 16px 24px; font-family: var(--font-comic); font-size: 1rem; background: var(--red); color: var(--white);
  border: var(--line) solid var(--black); border-radius: 999px; box-shadow: 6px 6px 0 var(--black);
  transition: transform .18s var(--ease-pop), box-shadow .18s; }
.cart_totals a.button:hover, .cart_totals .checkout-button:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--black); color: var(--white); }
.cart_totals .shipping-calculator-button { color: var(--red); }
.wc-empty-cart-message, .cart-empty { font-family: var(--font-comic); font-size: 1.2rem; text-align: center; }
.return-to-shop { text-align: center; margin-top: 18px; }

@media (max-width: 640px) {
  .comic-cart__item { grid-template-columns: 72px 1fr; }
  .comic-cart__media img { width: 72px; height: 92px; }
  .comic-cart__line { grid-column: 2; text-align: right; }
  .comic-cart__collaterals { max-width: none; }
}

/* =============================================================
   CHECKOUT (restyled, functionality intact)
   ============================================================= */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; margin-bottom: 16px; }
.woocommerce form .form-row label { font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection { padding: 13px 16px; font-family: var(--font-body); font-weight: 600;
  border: var(--line) solid var(--black); border-radius: 12px; background: var(--paper); box-shadow: 3px 3px 0 var(--black); }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 3px solid var(--red); outline-offset: 2px; }
.woocommerce .checkout .woocommerce-checkout-review-order { background: var(--paper); border: var(--line) solid var(--black);
  border-radius: var(--radius); box-shadow: var(--shadow-ink); padding: clamp(20px, 3vw, 30px); }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td {
  padding: 12px 0; border-bottom: 2px dashed rgba(0,0,0,.16); font-family: var(--font-mono); font-size: .85rem; text-align: left; }
.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total .amount { font-family: var(--font-display); font-size: 1.6rem; color: var(--red); }
#payment { background: var(--cream); border: var(--line) solid var(--black); border-radius: var(--radius-s); margin-top: 18px; overflow: hidden; }
#payment ul.payment_methods { padding: 18px; border-bottom: 2px dashed rgba(0,0,0,.2); }
#payment div.form-row { padding: 18px; }
#payment #place_order, .woocommerce #payment #place_order { width: 100%; padding: 18px 24px; font-family: var(--font-comic);
  font-size: 1.05rem; background: var(--red); color: var(--white); border: var(--line) solid var(--black);
  border-radius: 999px; box-shadow: 6px 6px 0 var(--black); transition: transform .18s var(--ease-pop), box-shadow .18s; }
#payment #place_order:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--black); }

/* =============================================================
   SINGLE PRODUCT — WooCommerce data styling
   ============================================================= */
.product-single .onsale { position: absolute; z-index: 5; top: 14px; left: 14px; background: var(--red); color: var(--white);
  font-family: var(--font-comic); border: var(--line) solid var(--black); border-radius: 0; padding: 8px 14px; min-height: auto; min-width: auto; }
.product-single__media .woocommerce-product-gallery { position: relative; margin: 0; }
.product-single__media .woocommerce-product-gallery__wrapper { margin: 0; border: var(--line) solid var(--black);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-ink), var(--shadow-red); background: var(--cream); }
.product-single__media .woocommerce-product-gallery__image img { border-radius: 0; }
.product-single__media .flex-control-thumbs { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.product-single__media .flex-control-thumbs li { width: 72px; }
.product-single__media .flex-control-thumbs img { border: var(--line) solid var(--black); border-radius: var(--radius-s);
  box-shadow: 3px 3px 0 var(--black); cursor: pointer; opacity: 1; }
.product-single__media .flex-control-thumbs img.flex-active { outline: 3px solid var(--red); outline-offset: 2px; }
.product-single__rating .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 0; }
.product-single__rating .star-rating { color: var(--red); font-family: sans-serif; }

/* add-to-cart form */
.product-single__actions form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.product-single__actions .quantity { display: inline-flex; }
.product-single__actions .quantity .qty { width: 74px; height: 54px; text-align: center; font-family: var(--font-display);
  font-size: 1.3rem; border: var(--line) solid var(--black); border-radius: 12px; background: var(--cream); box-shadow: var(--shadow-ink); }
.product-single__actions .single_add_to_cart_button, .single_add_to_cart_button.button {
  display: inline-flex; align-items: center; gap: 8px; padding: 17px 34px; font-family: var(--font-comic); font-size: .98rem;
  background: var(--red); color: var(--white); border: var(--line) solid var(--black); border-radius: 999px;
  box-shadow: var(--shadow-ink); transition: transform .18s var(--ease-pop), box-shadow .18s, background .2s; }
.product-single__actions .single_add_to_cart_button:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--black); color: var(--white); }
.product-single__actions .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; }
.product-single__actions .single_add_to_cart_button.added::after { content: " ✓"; }
.product-single .variations { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.product-single .variations td, .product-single .variations th { padding: 6px 8px 6px 0; }
.product-single__desc { max-width: var(--wrap); margin: clamp(30px,5vw,60px) auto 0; padding-top: clamp(24px,3vw,40px); border-top: var(--line) solid var(--black); }
.section__title--sm { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.product-single__desc-body { max-width: 70ch; font-weight: 500; }
.product-single__desc-body p { margin-bottom: 1em; }