/* B — Bold pop / comic: thick outlines, halftone, brand colors, playful punch. */
html[data-theme="pop"] {
  --bg: #FFF3DF;
  --bg-2: #FFE7C2;
  --elev: #FFFFFF;
  --card: #FFFFFF;
  --line: #1A120C;
  --text: #1A120C;
  --muted: #6A5344;
  --accent: #F79622;
  --accent-2: #E31C4A;
  --accent-soft: rgba(247, 150, 34, .18);
  --gold: #E31C4A;
  --success: #2E8B40;
  --danger: #E31C4A;
  --dark-btn: #1A120C;
  --font: "Changa", "Cairo", system-ui, sans-serif;
  --display: "Changa", "Cairo", sans-serif;
  --en: "Bangers", "Changa", cursive;
  --pink: #E31C4A;
  --green: #2E8B40;
  --brown: #5C2010;
  color-scheme: light;
  font-family: var(--font);
}

html[data-theme="pop"],
html[data-theme="pop"] body {
  background: #FFF3DF;
  font-family: var(--font);
  color: var(--text);
}

html[data-theme="pop"] .app {
  background-color: #FFF3DF;
  background-image:
    url("../../assets/themes/halftone.png"),
    radial-gradient(ellipse at 100% 0%, rgba(227, 28, 74, .10), transparent 42%),
    radial-gradient(ellipse at 0% 100%, rgba(247, 150, 34, .16), transparent 46%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 64px 64px, 100% 60%, 100% 70%;
}

html[data-theme="pop"] .screen,
html[data-theme="pop"] .status-bleed { background: transparent; }

html[data-theme="pop"] .topbar-title,
html[data-theme="pop"] .brand-text strong,
html[data-theme="pop"] .build-title,
html[data-theme="pop"] .hero-cta b,
html[data-theme="pop"] .empty p,
html[data-theme="pop"] .sheet-card h2,
html[data-theme="pop"] .item-card h3,
html[data-theme="pop"] .cart-card h3,
html[data-theme="pop"] .cta,
html[data-theme="pop"] .pill {
  font-family: var(--display);
  font-weight: 800;
}

html[data-theme="pop"] .lang-btn {
  font-family: var(--en);
  color: #fff;
  background: var(--pink);
  border: 3px solid #1A120C;
  border-radius: 8px;
  letter-spacing: .04em;
  box-shadow: 2px 2px 0 #1A120C;
}

html[data-theme="pop"] .icon-btn { color: var(--text); }
html[data-theme="pop"] .icon-btn:active { background: rgba(247, 150, 34, .2); }
html[data-theme="pop"] .red-dot { box-shadow: 0 0 0 2px #FFF3DF; }

html[data-theme="pop"] .hero-cta {
  background: #fff;
  border: 3px solid #1A120C;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #1A120C;
}
html[data-theme="pop"] .hero-cta b { font-size: 20px; color: #1A120C; }
html[data-theme="pop"] .hero-cta span { color: var(--muted); }

html[data-theme="pop"] .cat {
  background: #fff;
  color: #1A120C;
  border: 2.5px solid #1A120C;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #1A120C;
}
html[data-theme="pop"] .cat.is-on {
  background: var(--accent);
  color: #1A120C;
  border-color: #1A120C;
  box-shadow: 3px 3px 0 var(--pink);
}

html[data-theme="pop"] .item-card,
html[data-theme="pop"] .cart-card {
  background: #fff;
  border: 3px solid #1A120C;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #1A120C;
}
html[data-theme="pop"] .item-card .pic,
html[data-theme="pop"] .cart-card .pic {
  background: #FFF3DF;
  border: 2.5px solid #1A120C;
  border-radius: 14px;
}
html[data-theme="pop"] .item-card .price,
html[data-theme="pop"] .cart-card .price {
  color: var(--pink);
  font-weight: 800;
  font-size: 16px;
}
html[data-theme="pop"] .add-btn {
  background: var(--accent);
  color: #1A120C;
  border: 3px solid #1A120C;
  box-shadow: 3px 3px 0 #1A120C;
}

html[data-theme="pop"] .build-title {
  font-size: 34px;
  color: #1A120C;
  -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 var(--accent);
}

html[data-theme="pop"] .toggle {
  background: #fff;
  border: 3px solid #1A120C;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #1A120C;
  padding: 4px;
}
html[data-theme="pop"] .toggle button { color: var(--muted); font-weight: 800; }
html[data-theme="pop"] .toggle button.is-on {
  background: var(--accent);
  color: #1A120C;
}

html[data-theme="pop"] .stage {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(247, 150, 34, .2), transparent 55%);
}

html[data-theme="pop"] .ing .well {
  background: #fff;
  border: 3px solid #1A120C;
  box-shadow: 3px 3px 0 #1A120C;
}
html[data-theme="pop"] .ing.is-on .well {
  border-color: #1A120C;
  background: #FFE1A8;
  box-shadow: 3px 3px 0 var(--pink);
}
html[data-theme="pop"] .ing span { color: #1A120C; font-weight: 700; }
html[data-theme="pop"] .ing .check {
  background: var(--pink);
  border: 2px solid #1A120C;
}
html[data-theme="pop"] .ing .minus {
  background: #fff;
  color: #1A120C;
  border: 2px solid #1A120C;
}
html[data-theme="pop"] .ing .tag { color: var(--pink); }

html[data-theme="pop"] .sticky-cta {
  background: linear-gradient(to top, #FFF3DF 75%, transparent);
}
html[data-theme="pop"] .sticky-cta.frost {
  background: rgba(255, 243, 223, .88);
  border-top: 3px solid #1A120C;
}
html[data-theme="pop"] .cta {
  background: var(--accent);
  color: #1A120C;
  border: 3px solid #1A120C;
  border-radius: 16px;
  box-shadow: 0 6px 0 #1A120C;
  font-size: 18px;
}
html[data-theme="pop"] .cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #1A120C; }
html[data-theme="pop"] .cta.is-added {
  background: #1A120C;
  color: #FFF3DF;
  box-shadow: none;
  border-color: #1A120C;
}
html[data-theme="pop"] .cta.is-view {
  background: #fff;
  color: #1A120C;
  border: 3px solid #1A120C;
  box-shadow: 0 4px 0 #1A120C;
}

html[data-theme="pop"] .stepper {
  background: #fff;
  border: 2.5px solid #1A120C;
}
html[data-theme="pop"] .stepper button {
  background: var(--accent);
  color: #1A120C;
  border: 2px solid #1A120C;
}

html[data-theme="pop"] .pill {
  background: var(--accent);
  color: #1A120C;
  border: 3px solid #1A120C;
  box-shadow: 4px 4px 0 #1A120C;
  border-radius: 14px;
}

html[data-theme="pop"] .sheet { background: rgba(26, 18, 12, .45); }
html[data-theme="pop"] .sheet-card {
  background: #fff;
  border: 3px solid #1A120C;
  border-radius: 22px;
  box-shadow: 8px 8px 0 #1A120C;
}

html[data-theme="pop"] .tabbar {
  background: #fff;
  border-top: 3px solid #1A120C;
}
html[data-theme="pop"] .tab { color: #6A5344; }
html[data-theme="pop"] .tab.is-on { color: var(--pink); }
html[data-theme="pop"] .tab .badge {
  background: var(--pink);
  border: 2px solid #1A120C;
}

html[data-theme="pop"] .toast {
  background: #1A120C;
  color: #FFF3DF;
  border: 3px solid #1A120C;
  border-radius: 12px;
}