/* ============================================================
   retro.css  -  delta8denton2.com
   1996 LOOK, 2026 SPEED.
   Every heavy 90s trick is faked with a cheap modern equivalent:
   - GIFs            -> CSS/SVG animation
   - <marquee>       -> GPU transform keyframes
   - tiled bg image  -> CSS gradients / inline SVG data-URI
   - framesets       -> CSS grid styled to look framed
   - spacer-gif table-> grid/flex with beveled borders
   No web fonts, no images-for-chrome, ~0 layout shift.
   ============================================================ */

/* ---------- web-safe palette (the classics) ---------- */
:root {
  --silver: #c0c0c0;
  --silver-lt: #dfdfdf;
  --silver-dk: #808080;
  --navy: #000080;
  --teal: #008080;
  --teal-lt: #00b3b3;
  --lime: #39ff14;
  --magenta: #ff00ff;
  --yellow: #ffff00;
  --hemp: #2e8b2e;
  --hemp-lt: #5dd35d;
  /* real Delta8Denton brand palette (sampled from the logo) */
  --brand-peach: #fcb07e;
  --brand-mint: #81d2c7;
  --brand-sage: #aabd8c;
  --brand-green: #47704c;
  --brand-cream: #fff6ec;
  --ink: #202020;
  --link: #0000ee;
  --link-vis: #551a8b;
  --portal-bg: #0a0a2a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Verdana, Tahoma, "MS Sans Serif", Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--teal);
  /* tiled "marble" feel, faked with layered gradients (one paint, zero requests) */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.06) 0 2px, transparent 3px);
  background-size: 24px 24px, 31px 31px;
}

a { color: var(--link); }
a:visited { color: var(--link-vis); }
a:hover { color: var(--magenta); }

img { image-rendering: auto; }

/* ---------- bevels: the Win95 language ---------- */
.bevel-out {
  border: 2px solid;
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
  background: var(--silver);
}
.bevel-in {
  border: 2px solid;
  border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
  background: var(--silver);
}

/* ---------- fake browser / window chrome ---------- */
.win {
  background: var(--silver);
  border: 2px solid;
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
  box-shadow: 1px 1px 0 #000;
  margin: 0 0 14px;
}
.win > .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  color: #fff;
  font-weight: bold;
  font-family: "Courier New", monospace;
  letter-spacing: .5px;
}
.win > .title .dots { font-family: monospace; opacity: .85; }
/* explicit dark text: content windows sit on white/silver. Without this they
   inherit the portal's LIGHT body color and become unreadable (the age-gate bug). */
.win > .body { padding: 12px; background: #fff; color: var(--ink); }
.win.gray > .body { background: var(--silver); color: var(--ink); }

/* ---------- beveled buttons (outset, :active = inset) ---------- */
.btn, button.btn, a.btn {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  color: #000;
  padding: 5px 14px;
  background: var(--silver);
  border: 2px solid;
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
  cursor: pointer;
  text-align: center;
}
.btn:hover { color: #000; background: var(--silver-lt); }
.btn:active {
  border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
  padding: 6px 13px 4px 15px;
}
.btn.hot {
  background: linear-gradient(180deg, #ff4d4d, #b30000);
  color: #fff; border-color: #ff8080 #660000 #660000 #ff8080;
}
.btn.go {
  background: linear-gradient(180deg, var(--hemp-lt), var(--hemp));
  color: #fff; border-color: #9be89b #1c5c1c #1c5c1c #9be89b;
}
.btn.big { font-size: 18px; padding: 10px 26px; }

/* ---------- inset form fields ---------- */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=search], textarea, select {
  font-family: "Courier New", monospace;
  font-size: 13px;
  padding: 4px 6px;
  background: #fff;
  border: 2px solid;
  border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
}

/* ============================================================
   MARQUEE  (CSS keyframes, GPU transform; not <marquee>)
   ============================================================ */
.marquee {
  overflow: hidden; white-space: nowrap;
  background: #000; color: var(--lime);
  border-top: 2px solid var(--silver-dk); border-bottom: 2px solid var(--silver-lt);
  font-family: "Courier New", monospace; font-weight: bold; padding: 4px 0;
}
.marquee > span {
  display: inline-block; padding-left: 100%;
  animation: marquee 18s linear infinite;
  will-change: transform;
}
.marquee:hover > span { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee > span { animation: none; padding-left: 0; white-space: normal; }
}

/* ---------- blink (sparingly!) ---------- */
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* ---------- rainbow / glow text ---------- */
.rainbow {
  background: linear-gradient(90deg,#ff0040,#ff8c00,#ffd500,#39ff14,#00b3b3,#7a00ff,#ff00ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: bold;
}
.glow { text-shadow: 0 0 6px var(--lime), 0 0 12px var(--hemp-lt); }

/* ============================================================
   LAYOUT  (faux-frames via CSS grid)
   ============================================================ */
.page { max-width: 980px; margin: 0 auto; padding: 10px; }

.frames {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 720px) { .frames { grid-template-columns: 1fr; } }

/* left nav "frame" */
.nav-frame .title { font-size: 12px; }
.deptlist { list-style: none; margin: 0; padding: 6px; }
.deptlist li { margin: 0 0 4px; }
.deptlist a {
  display: block; padding: 4px 8px; text-decoration: none; color: #000;
  background: var(--silver); font-family: "Courier New", monospace;
  border: 2px solid; border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
}
.deptlist a::before { content: "\01F4C1 "; } /* folder */
.deptlist a:hover { background: var(--yellow); color: #000; }

/* ============================================================
   PRODUCT "TRADING CARDS"
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.card {
  background: #fff;
  border: 2px solid;
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
  box-shadow: 2px 2px 0 #000;
  padding: 8px; position: relative; display: flex; flex-direction: column;
}
.card .thumb {
  aspect-ratio: 1/1; width: 100%; object-fit: cover;
  background: var(--silver); border: 1px solid var(--silver-dk);
}
.card .pname {
  font-weight: bold; font-size: 12px; margin: 6px 0 4px;
  color: var(--navy); text-decoration: none; display: block; min-height: 2.4em;
}
.card .pname:hover { color: var(--magenta); }
.card .price { font-family: "Courier New", monospace; font-weight: bold; color: var(--hemp); }
.card .price .was { color: #999; text-decoration: line-through; font-weight: normal; margin-right: 5px; }
.card .cardbtns { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; }
.card .cardbtns .btn { flex: 1; font-size: 11px; padding: 5px 4px; }

/* starburst badges (SVG-ish via clip-path; pure CSS) */
.burst {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--magenta); color: #fff; font-weight: bold; font-size: 10px;
  font-family: "Courier New", monospace; transform: rotate(8deg);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: spin 6s linear infinite;
}
.burst.sale { background: #ff2d2d; }
.burst.new { background: var(--teal); }
@keyframes spin { to { transform: rotate(368deg); } }
@media (prefers-reduced-motion: reduce) { .burst { animation: none; } }

/* ============================================================
   PORTAL (index)  -  MAXIMUM KITSCH
   ============================================================ */
.portal { background: var(--portal-bg); color: #e8e8ff; }
.portal .page { background: transparent; }

/* logo banner: pixelated brand logo on a soft cream bar with a CRT pixel grid */
.logo-banner {
  position: relative; text-align: center; padding: 20px 10px 12px;
  background: linear-gradient(180deg, var(--brand-cream), #ffe9d6);
  border-bottom: 4px solid var(--brand-green);
}
.logo-banner::after { /* faint pixel-grid overlay = the "pixelation filter" vibe */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(71,112,76,.05) 0 3px, transparent 3px 4px),
    repeating-linear-gradient(90deg, rgba(71,112,76,.05) 0 3px, transparent 3px 4px);
}
.pixel-logo {
  image-rendering: pixelated;
  width: min(460px, 88%); height: auto;
  filter: drop-shadow(3px 3px 0 rgba(71,112,76,.22));
}
.logo-banner .sub { font-size: 13px; color: #6b4f3a; font-weight: bold; margin-top: 4px; }
.logo-banner .kitsch-row { margin-bottom: 0; }

/* department nav: chunky brand-colored pixel buttons (replaces the badge bar) */
.deptnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.deptbtn {
  display: flex; align-items: center; gap: 8px; padding: 12px;
  font-family: "Courier New", monospace; font-weight: bold; font-size: 13px;
  letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
  color: #2c2317; image-rendering: pixelated;
  border: 3px solid; box-shadow: 3px 3px 0 #2b2b2b;
}
.deptbtn .ico { font-size: 16px; line-height: 1; }
.deptbtn .ct { margin-left: auto; font-size: 11px; background: rgba(0,0,0,.18); color: #1a1a1a; padding: 1px 7px; }
.deptbtn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #2b2b2b; color: #000; }
.deptbtn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #2b2b2b; }
.deptbtn:nth-child(4n+1) { background: var(--brand-peach); border-color: #ffdcc0 #c9824e #c9824e #ffdcc0; }
.deptbtn:nth-child(4n+2) { background: var(--brand-mint);  border-color: #c4ede6 #4f9e92 #4f9e92 #c4ede6; }
.deptbtn:nth-child(4n+3) { background: var(--brand-sage);  border-color: #d2e0bd #7c9460 #7c9460 #d2e0bd; }
.deptbtn:nth-child(4n+4) { background: #f6c8a0;            border-color: #ffe6cf #cf9a6e #cf9a6e #ffe6cf; }

/* brand-tinted window title (used on the department window) */
.win > .title.brand { background: linear-gradient(90deg, var(--brand-green), var(--brand-mint)); }
.crt {
  position: relative;
}
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.kitsch-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 12px 0; }

/* hit counter (odometer) */
.counter {
  display: inline-flex; gap: 2px; background: #000; padding: 4px; border: 2px solid var(--silver-dk);
}
.counter b {
  font-family: "Courier New", monospace; background: #111; color: var(--lime);
  padding: 2px 5px; font-size: 18px; border: 1px solid #333;
}

/* 88x31 badge buttons */
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.badge88 {
  width: 88px; height: 31px; display: grid; place-items: center; text-align: center;
  font-family: "Courier New", monospace; font-size: 8px; line-height: 1.05; font-weight: bold;
  border: 1px solid #000; text-decoration: none; color: #fff; padding: 2px;
}

/* dancing mascot (CSS-animated, no GIF) */
.mascot { font-size: 44px; display: inline-block; animation: boogie 1.2s ease-in-out infinite; }
@keyframes boogie {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  25% { transform: translateY(-8px) rotate(8deg); }
  50% { transform: translateY(0) rotate(-8deg) scaleX(-1); }
  75% { transform: translateY(-6px) rotate(6deg) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .mascot { animation: none; } }

/* under construction sign (CSS hazard stripes, no GIF) */
.uc {
  display: inline-block; font-family: "Courier New", monospace; font-weight: bold; color: #000;
  padding: 4px 12px; border: 2px solid #000;
  background: repeating-linear-gradient(45deg, #ffd500 0 14px, #000 14px 28px);
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff;
}

/* ---------- checkout wizard ---------- */
.wizard .steps { display: flex; gap: 4px; margin-bottom: 10px; }
.wizard .steps .step {
  flex: 1; text-align: center; padding: 5px; font-family: "Courier New", monospace; font-size: 11px;
  background: var(--silver); border: 2px solid; border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
}
.wizard .steps .step.active { background: var(--navy); color: #fff; }

/* ---------- checkout page ---------- */
.co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .co-grid { grid-template-columns: 1fr; } }
.co-fs {
  border: 2px groove var(--silver); margin: 0 0 12px; padding: 10px 12px; background: #fff;
}
.co-fs legend { font-family: "Courier New", monospace; font-weight: bold; color: var(--navy); padding: 0 6px; }
.co-fs label { display: block; font-family: "Courier New", monospace; font-size: 12px; margin: 7px 0; color: var(--ink); }
.co-fs input, .co-fs select { display: block; width: 100%; margin-top: 3px; }
.co-row { display: flex; gap: 8px; }
.co-row label { flex: 1; }
.co-age {
  display: block; font-family: "Courier New", monospace; font-size: 13px; margin: 4px 0 12px;
  background: var(--yellow); border: 2px solid; border-color: #ffffb0 #b0b000 #b0b000 #ffffb0;
  padding: 8px; color: #000;
}
.co-age input { width: auto; margin-right: 6px; vertical-align: middle; }
.co-turnstile { margin: 12px 0 2px; }
.co-deliv-title { font-family: "Courier New", monospace; font-weight: bold; color: var(--navy); margin: 12px 0 4px; }
.co-rate {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: "Courier New", monospace; font-size: 12px; color: var(--ink);
  padding: 7px 8px; margin: 4px 0; background: #fff;
  border: 2px solid; border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
}
.co-rate:hover { background: #fffceb; }
.co-rate input { width: auto; margin: 0; }
.co-rate span { flex: 1; }
.co-rate b { color: #1f6f1f; }
.co-totaltable { margin-top: 10px; width: 100%; }
.co-totaltable td { border: 0; padding: 2px 4px; font-family: "Courier New", monospace; font-size: 12px; color: var(--ink); }
.co-totaltable .co-grand th { background: var(--navy); color: #fff; font-family: "Courier New", monospace; padding: 6px; font-size: 14px; }
.co-status { min-height: 1.4em; font-family: "Courier New", monospace; font-size: 12px; margin: 6px 0; }
.co-status.err {
  color: #7a0000; background: #ffe0e0; border: 2px solid #cc8888; padding: 8px;
}
.receipt { padding: 24px 12px; }
.receipt h2 { font-size: 28px; }

/* ---------- cart table ---------- */
table.cart { width: 100%; border-collapse: collapse; background: #fff; }
table.cart th { background: var(--navy); color: #fff; font-family: "Courier New", monospace; padding: 6px; text-align: left; }
table.cart td { border: 1px solid var(--silver-dk); padding: 6px; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty .btn { padding: 2px 8px; font-size: 12px; }

/* ============================================================
   PRODUCT PAGE  -  newspaper layout (image floats, text wraps),
   buy controls centered at the bottom. Works the same on mobile.
   ============================================================ */
.pview { overflow: hidden; } /* contain the float */
.pview .pimg {
  float: left;
  width: 300px; max-width: 42%;
  aspect-ratio: 1 / 1; object-fit: cover;
  margin: 2px 18px 12px 0;
  background: var(--silver);
  border: 2px solid var(--silver-dk);
  box-shadow: 2px 2px 0 #000;
}
.pview .ptitle {
  margin: 0 0 6px; color: var(--navy);
  font-family: "Courier New", monospace; font-size: 23px; line-height: 1.15;
}
.pview .ptags { margin: 0 0 12px; }
.pview .prose { color: var(--ink); }
.pview .prose p:first-child { margin-top: 0; }

/* the buy box clears the float and centers everything */
.buybox {
  clear: both;
  text-align: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 2px groove var(--silver);
}
.buybox .btn { margin: 6px 5px; }
.buybox .btn.big { vertical-align: middle; }

/* variation picker */
.vpicker { margin: 6px 0 14px; }
.vrow { margin: 8px 0; }
.vrow label {
  font-family: "Courier New", monospace; font-weight: bold; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.vrow select { min-width: 170px; font-size: 14px; }
.v-price {
  font-family: "Courier New", monospace; font-weight: bold; font-size: 24px;
  color: #1f6f1f; margin: 10px 0 4px;
}
#add-btn[disabled] { filter: grayscale(.4); }

@media (max-width: 600px) {
  /* keep the newspaper wrap on phones: a smaller floated image with text
     flowing beside it (this fixes the squished-right column) */
  .pview .pimg { width: 42%; max-width: 42%; margin: 2px 12px 8px 0; }
  .pview .ptitle { font-size: 20px; }
  .vrow label { flex-wrap: wrap; }
  .vrow select { min-width: 150px; }
}

/* ---------- status bar (fake browser footer) ---------- */
.statusbar {
  position: sticky; bottom: 0; margin-top: 12px;
  font-family: "Courier New", monospace; font-size: 11px;
  background: var(--silver); padding: 3px 8px; color: #000;
  border: 2px solid; border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
  display: flex; justify-content: space-between; align-items: center;
}
.statusbar a.sb-cart { color: #000; text-decoration: none; font-weight: bold; }
.statusbar a.sb-cart:hover { color: var(--magenta); text-decoration: underline; }

/* ---------- breadcrumb (beveled chip so it reads on the teal page) ---------- */
.crumbs {
  display: inline-block; font-family: "Courier New", monospace; font-size: 12px;
  margin: 0 0 12px; color: #000; background: var(--silver);
  padding: 3px 10px; border: 2px solid;
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
}
.crumbs a { text-decoration: none; color: var(--navy); }
.crumbs a:hover { color: var(--magenta); }

/* ---------- pager ---------- */
.pager { text-align: center; font-family: "Courier New", monospace; margin: 14px 0; }

/* ---------- site footer ---------- */
.sitefoot {
  text-align: center; font-family: "Courier New", monospace; font-size: 11px;
  color: #eafffe; text-shadow: 1px 1px 2px rgba(0, 0, 0, .65);
  padding: 18px 10px; line-height: 1.7;
}
.sitefoot a { color: #d8ffd8; }
.portal .sitefoot { color: #c2c2dc; text-shadow: none; }
.portal .sitefoot a { color: var(--hemp-lt); }
.at { display: inline-block; animation: spin 4s linear infinite; }

/* ---------- age gate overlay ---------- */
#agegate {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(0,0,16,.94);
}
#agegate .win { max-width: 420px; width: 92%; }
#agegate.hidden { display: none; }

/* ---------- tunes toggle ---------- */
#tunes { font-family: "Courier New", monospace; }

/* ---------- utility ---------- */
.center { text-align: center; }
.muted { color: #555; } /* AA-readable on white and silver */
.small { font-size: 11px; }
.hr { height: 0; border: 0; border-top: 2px groove var(--silver); margin: 12px 0; }
.tag {
  display: inline-block; font-family: "Courier New", monospace; font-size: 10px;
  background: var(--teal); color: #fff; padding: 1px 6px; margin: 2px 2px 0 0;
}
.prose { line-height: 1.6; }
.prose img { max-width: 100%; height: auto; }
.prose { overflow-wrap: anywhere; } /* keep long SKUs/URLs from forcing scroll */

/* ============================================================
   ACCESSIBILITY + CONTRAST PASS (UI/UX review)
   All period-correct: dotted focus rings, inset "unavailable" skins.
   ============================================================ */

/* P0-1 visible keyboard focus (was missing entirely) */
:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.btn:focus-visible, .deptlist a:focus-visible, .badge88:focus-visible,
.card .pname:focus-visible {
  outline: 2px dotted #fff; outline-offset: -4px; box-shadow: 0 0 0 2px #000;
}
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px dotted var(--navy); outline-offset: 1px;
}

/* P0-2 disabled / sold-out buttons: flat inset skin + dark text (no opacity) */
.btn[disabled], .btn.hot[disabled], #add-btn[disabled] {
  filter: none; opacity: 1; cursor: not-allowed;
  background: var(--silver); color: #333; text-shadow: none;
  border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
}

/* P0-7 blink never fully disappears (keeps content visible) */
@keyframes blink { 50% { opacity: .35; } }

/* P1-1 contrast: teal tag chips + sold-out tag */
.tag { font-weight: bold; background: #006d6d; }
.tag.soldout { background: #5f5f5f; }

/* P1-2 muted text on silver surfaces needs to be darker than on white */
.win.gray .muted, .win.gray .small.muted, .deptlist .muted { color: #3a3a3a; }

/* P1-3 dept badge tiles: a touch larger type */
.badge88 { font-size: 9px; line-height: 1.1; }
/* P1-8 tactile hover on the department picker */
a.badge88:hover { filter: brightness(1.25); outline: 1px solid #fff; }

/* P1-4 reserve SKU line height so layout doesn't jump */
#v-sku { min-height: 1.2em; }

/* P0-5 + P1-5 mobile: real tap targets + stacked buy buttons */
@media (max-width: 600px) {
  .qty .btn { min-width: 40px; min-height: 40px; padding: 6px 10px; font-size: 16px; }
  .card .cardbtns .btn { min-height: 40px; padding: 9px 6px; font-size: 12px; }
  .deptlist a { padding: 10px 10px; }
  a.badge88 { min-height: 44px; height: auto; }
  .buybox .btn.big { display: block; width: 100%; margin: 6px 0; }
}

/* P2-2 respect reduced-motion for smooth scroll too */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }