/* ==========================================================================
   漫画风格主题层（Comic Style）· 前台 H5
   用法：在页面里于 app.css 之后引入 <link rel="stylesheet" href="/css/comic.css" />
   删除该引用即恢复原主题，不改动 app.css 一行。
   ========================================================================== */

:root {
  /* 漫画风格调色板 */
  --comic-ink: #000000;
  --comic-text: #1a1a1a;
  --comic-paper: #fffef0;
  --comic-red: #ff3333;
  --comic-yellow: #ffcc00;
  --comic-blue: #3366ff;
  --comic-green: #22c55e;

  /* 覆盖原有设计令牌 */
  --brand: #ff3333;
  --brand-2: #ffcc00;
  --brand-soft: #fff6cc;
  --text: #1a1a1a;
  --text-2: #3d3a33;
  --text-3: #5c574c;
  --line: #1a1a1a;
  --bg: #fffef0;
  --ok: #22c55e;
  --warn: #ffcc00;
  --radius: 8px;
  --shadow: 4px 4px 0 #000;
}

/* 纸张底 + 半调网点 */
body {
  background-color: var(--comic-paper);
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1px);
  background-size: 10px 10px;
  color: var(--comic-ink);
  font-weight: 600;
}

.page {
  background: transparent;
}

/* ---------- 墨线 + 硬边阴影：统一几何 ---------- */
.card,
.block,
.appbar,
.searchbar,
.tabbar,
.bottombar,
.spec-chip,
.addr-card,
.qty,
.modal-mask .modal,
.notice,
.cashier {
  border: 3px solid var(--comic-ink) !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #000 !important;
  background: #ffffff !important;
}

/* 收银台金额区：漫画色块 + 套色描边（避免白底白字） */
.cashier,
.pay-hero {
  background: var(--comic-blue) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--comic-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}

.cashier::after,
.pay-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.28) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.5;
  pointer-events: none;
}

.cashier > *,
.pay-hero > * {
  position: relative;
  z-index: 1;
}

.cashier .amount,
.pay-hero .amount {
  color: #ffffff !important;
  font-weight: 900;
  text-shadow: 4px 4px 0 var(--comic-ink);
}

.appbar,
.tabbar,
.bottombar {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.appbar {
  border-width: 0 0 3px 0 !important;
}

.tabbar,
.bottombar {
  border-width: 3px 0 0 0 !important;
}

.block,
.card {
  margin-bottom: 4px;
}

/* ---------- 品牌头图：漫画分镜 + 网点 ---------- */
.hero {
  position: relative;
  background: var(--comic-red) !important;
  border-bottom: 3px solid var(--comic-ink) !important;
  color: #ffffff !important;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26, 26, 26, 0.28) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.55;
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 var(--comic-ink);
}

.hero p {
  position: relative;
  z-index: 1;
  font-weight: 700;
}

/* 头图信任标签：白底墨线，像贴纸 */
.hero-tag {
  border: 2px solid var(--comic-ink) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--comic-ink) !important;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--comic-ink);
}

/* 商品角标：黄色贴纸感 */
.badge {
  border: 2px solid var(--comic-ink) !important;
  border-radius: 6px !important;
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--comic-ink);
}

.badge-hot,
.badge-new {
  background: var(--comic-red) !important;
  color: #ffffff !important;
}

/* ---------- 搜索框 ---------- */
.searchbar {
  position: relative;
  z-index: 2;
}

.searchbar input {
  font-weight: 700;
}

/* ---------- 按钮：POP 弹出 + 墨水压迫 ---------- */
.btn {
  border: 3px solid var(--comic-ink) !important;
  border-radius: 8px !important;
  background: var(--comic-red) !important;
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 4px 4px 0 #000 !important;
  letter-spacing: 0.06em;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background-color 0.1s ease-out, color 0.1s ease-out;
}

.btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: none !important;
}

.btn-plain {
  background: #ffffff !important;
  color: var(--comic-ink) !important;
}

.btn-plain:hover {
  background: var(--comic-blue) !important;
  color: #ffffff !important;
}

/* ---------- 标签 / 胶囊：对话气泡质感 ---------- */
.chip,
.promo-pill,
.tag,
.spec-chip,
.countdown {
  border: 2px solid var(--comic-ink) !important;
  border-radius: 8px !important;
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--comic-ink) !important;
}

.chip.active,
.spec-chip.on {
  background: var(--comic-red) !important;
  color: #ffffff !important;
}

.tag-ok {
  background: var(--comic-green) !important;
  color: #ffffff !important;
}

.tag-warn {
  background: var(--comic-red) !important;
  color: #ffffff !important;
}

.tag-gray {
  background: #ffffff !important;
  color: var(--comic-ink) !important;
}

/* ---------- 商品卡：分镜面板 + 悬停翻页感 ---------- */
.card.product {
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background-color 0.1s ease-out;
}

.card.product:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000 !important;
  background-image: radial-gradient(circle, #ffcc00 1.5px, transparent 1.5px) !important;
  background-size: 14px 14px !important;
}

.card.product .thumb {
  border-bottom: 3px solid var(--comic-ink);
}

/* ---------- 价格：印刷套色偏移 ---------- */
.price {
  color: var(--comic-ink) !important;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--comic-red);
}

.price small {
  font-weight: 900;
}

.price-old {
  color: var(--comic-ink) !important;
  opacity: 0.55;
}

/* ---------- 表单 ---------- */
.field {
  border-bottom: 2px solid var(--comic-ink) !important;
}

.field input,
.field textarea,
.field select {
  font-weight: 700;
}

.field:focus-within {
  background: #fffbe0;
}

/* ---------- 底部导航 ---------- */
.tabbar a {
  color: var(--comic-ink) !important;
  font-weight: 800;
}

.tabbar a.active {
  color: var(--comic-red) !important;
}

.tabbar .ico {
  font-weight: 900;
}

/* ---------- 浮动购物车：圆形徽章保留（对话气泡例外） ---------- */
.cart-float {
  border: 3px solid var(--comic-ink) !important;
  box-shadow: 4px 4px 0 var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
}

.cart-float b {
  background: var(--comic-red) !important;
  border: 2px solid var(--comic-ink);
}

/* ---------- 空状态 / 提示 ---------- */
.empty {
  color: var(--comic-ink) !important;
  font-weight: 800;
}

.toast {
  border: 3px solid var(--comic-ink) !important;
  border-radius: 8px !important;
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--comic-ink);
  opacity: 1;
}

.notice {
  background: #fff6cc !important;
  color: var(--comic-ink) !important;
  font-weight: 700;
}

/* ---------- 加购 / 数量 ---------- */
.qty button {
  background: var(--comic-yellow) !important;
  border-right: 2px solid var(--comic-ink);
  font-weight: 900;
}

.qty button:last-child {
  border-right: 0;
  border-left: 2px solid var(--comic-ink);
}

/* ---------- 已售罄 / 蒙层 ---------- */
.sold-out {
  background: rgba(26, 26, 26, 0.72) !important;
  font-weight: 900;
}

/* ---------- 轮播指示 ---------- */
.banner-dots i {
  border: 2px solid var(--comic-ink);
  background: #ffffff;
  border-radius: 2px;
}

.banner-dots i.on {
  background: var(--comic-red);
}

/* ---------- 动效：遵循 prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card.product {
    transition: none;
  }
}