body {
  margin: 0;
  color: #000;
  font: 12px/1.6 "SimSun", "宋体", "Songti SC", "STSong", serif;
  background: #9c0000;
}
img { max-width: 100%; border: 0; }
p { margin: 0; }
a { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
h2 { margin: 0; }
table { border-collapse: collapse; }
.red { color: #ff0000; }
.blue { color: #0000cc; }
.gray { color: #666; }

.page {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #ffcc00;
  border-top: 0;
}

.topbar { width: 100%; background: #ffcc00; }
.topbar td { padding: 2px 6px; }
.topbar .r { text-align: right; }
.topbar a, .topbar a:visited { color: #990000; text-decoration: none; }

/* header */
.header { display: flex; border-bottom: 1px solid #cc0000; }
.logo {
  flex: 0 0 270px; display: block; position: relative; text-decoration: none; padding: 8px 10px 6px 76px;
  background: #ffffcc; border-right: 1px solid #cc0000;
}
.logo-cn {
  display: inline-block;
  font: bold 46px/1 "STXingkai", "华文行楷", "Kaiti SC", "STKaiti", "KaiTi", serif;
  color: #ff0000;
  text-shadow: 2px 2px 0 #ffcc00, 3px 3px 0 #000;
}
.logo-shop { font: bold 20px/1 "Hiragino Sans GB", "Microsoft YaHei", "黑体", sans-serif; color: #0000cc; margin-left: 2px; }
.logo-url { display: block; font: bold 12px Arial, sans-serif; color: #009900; margin-top: 6px; }
.logo-motto { display: block; font-size: 12px; color: #990000; }
.logo-bot { position: absolute; left: 6px; top: 8px; width: 64px; height: 70px; }

.banner {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 14px; text-decoration: none; min-height: 96px;
  background-color: #cc0000; background-size: cover; background-position: center 35%;
  box-shadow: inset 0 0 0 1000px rgba(170, 0, 0, .62);
}
.banner-1 {
  font: bold 24px/1.2 "Hiragino Sans GB", "Microsoft YaHei", "黑体", sans-serif; color: #ffff00;
  text-shadow: 2px 2px 0 #000;
}
.banner-2 { font-size: 14px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000; }
.banner-3 { color: #ffcc00; }

/* nav */
.nav { background: #cc0000; border-top: 2px solid #ff6666; border-bottom: 2px solid #660000; }
.nav-links { display: flex; flex-wrap: wrap; }
.nav-links a, .nav-links a:visited {
  padding: 6px 14px; color: #ffff00; font: bold 14px/1.2 "Hiragino Sans GB", "Microsoft YaHei", "黑体", sans-serif;
  text-decoration: none; border-right: 1px solid #ff6666;
}
.nav-links a:hover { background: #ffff00; color: #cc0000; }
.nav-toggle { display: none; }

.bowties { height: 14px; background: #ffcc00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M8 5 L1 1 V9 Z M8 5 L15 1 V9 Z' fill='%23cc0000' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='5' r='1.8' fill='%23000'/%3E%3C/svg%3E") repeat-x left center / 22px 9px; border-bottom: 1px solid #cc0000; }

.notice {
  display: flex; align-items: center; padding: 3px 6px; background: #ffffcc;
  border-bottom: 1px solid #ffcc00; color: #ff0000;
}
.notice b { white-space: nowrap; }
.marquee { overflow: hidden; flex: 1; white-space: nowrap; }
.marquee-text { display: inline-block; padding-left: 100%; animation: marquee 28s linear infinite; color: #0000cc; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* layout */
.cols { display: flex; gap: 6px; padding: 6px; align-items: flex-start; }
.col-left { flex: 0 0 180px; display: flex; flex-direction: column; gap: 6px; }
.col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* boxes */
.box { border: 1px solid var(--c); }
.box-title {
  position: relative; background: var(--c); color: #fff;
  font: bold 13px/22px "Hiragino Sans GB", "Microsoft YaHei", "黑体", sans-serif; padding: 0 8px;
}
.box-title::before { content: ""; display: inline-block; width: 16px; height: 10px; margin-right: 5px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M8 5 L1 1 V9 Z M8 5 L15 1 V9 Z' fill='%23ffcc00' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='5' r='2' fill='%23ff0000' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain; }
.box-title .more, .box-title .more:visited { position: absolute; right: 6px; font: 11px/22px Arial, sans-serif; color: #fff; text-decoration: none; }
.t-red { --c: #cc0000; --k: #ffff00; }
.t-blue { --c: #0033cc; --k: #ffcc00; }
.t-green { --c: #008800; --k: #ffff00; }
.t-orange { --c: #ff6600; --k: #ffffcc; }
.t-purple { --c: #660099; --k: #ff99ff; }
.t-gray { --c: #666666; --k: #ffffff; }

.cat-list { list-style: none; margin: 0; padding: 4px 8px; }
.cat-list li { padding: 2px 0; border-bottom: 1px dashed #ccc; }
.cat-list li::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M8 5 L1 1 V9 Z M8 5 L15 1 V9 Z' fill='%23cc0000' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='5' r='1.8' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain; }
.hot, .new { font-size: 11px; color: #fff; padding: 0 2px; }
.hot { background: #ff6600; }
.new { background: #ff0000; }

.hours { width: 100%; }
.hours th, .hours td { padding: 2px 6px; border-bottom: 1px dashed #ccc; font-weight: normal; text-align: left; }
.hours td { text-align: right; font-family: Arial, sans-serif; }
.hours tr.is-today { background: #ffff99; }
.hours tr.is-today th, .hours tr.is-today td { color: #ff0000; font-weight: bold; }
.open-now { margin: 4px 6px 0; font-weight: bold; text-align: center; }
.open-now.is-open { color: #008800; }
.open-now.is-closed { color: #ff0000; }
.hours-note { padding: 2px 6px 4px; color: #666; text-align: center; }

.side-photo { padding: 4px; }
.side-photo img { display: block; width: 100%; border: 1px solid #000; }

.kefu { padding: 6px 8px; line-height: 1.8; word-break: break-all; }
.bell { display: inline-block; width: 20px; height: 17px; vertical-align: -3px; }
.bell-line { font-size: 13px; }

/* main */
.welcome { padding: 8px 10px; font-size: 14px; line-height: 1.8; background: #ffffee; }
.welcome p { margin-bottom: 4px; }
.welcome::after { content: ""; display: block; clear: both; }
.mascot { float: right; width: 128px; margin: 0 0 4px 10px; text-align: center; }
.mascot svg { display: block; width: 110px; height: 118px; margin: 0 auto; }
.bubble {
  position: relative; margin: 0 0 8px !important; padding: 4px 6px; font-size: 12px; line-height: 1.5; font-weight: bold;
  color: #cc0000; background: #fff; border: 2px solid #000;
}
.bubble::after {
  content: ""; position: absolute; left: 40px; bottom: -9px; border: 8px solid transparent; border-top-color: #000; border-bottom: 0;
}
.sign { text-align: right; color: #666; font-size: 12px; }

.album { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; padding: 10px; background: #f6eeff; }
.album-photo { margin: 0; padding: 4px 4px 2px; background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #660099; text-align: center; }
.album-photo img { display: block; height: 220px; width: auto; border: 1px solid #999; }
.album-photo figcaption { font-weight: bold; color: #cc0000; line-height: 1.8; }

.two { width: 100%; }
.two td { width: 50%; vertical-align: top; padding: 0; }
.two td:first-child { padding-right: 3px; }
.two td:last-child { padding-left: 3px; }

.news { list-style: none; margin: 0; padding: 4px 8px; }
.news li { padding: 2px 0; border-bottom: 1px dashed #ccc; display: flex; gap: 6px; }
.news li::before { content: "◆"; color: #0033cc; font-size: 9px; line-height: 19px; }
.news li a { flex: 1; }
.news .date { color: #999; font-family: Arial, sans-serif; font-size: 11px; white-space: nowrap; }

.rank { margin: 0; padding: 4px 8px; list-style: none; counter-reset: r; }
.rank li { counter-increment: r; padding: 2px 0; border-bottom: 1px dashed #ccc; }
.rank li::before {
  content: counter(r); display: inline-block; width: 15px; margin-right: 5px; text-align: center;
  font: bold 11px/15px Arial, sans-serif; color: #fff; background: #999;
}
.rank li:nth-child(-n+3)::before { background: #ff0000; }

.tabs { padding: 4px 6px; background: #ffeeee; border-bottom: 1px solid #cc0000; }
.tab { font: 12px "SimSun", "宋体", "Songti SC", serif; padding: 1px 10px; cursor: pointer; }
.tab.is-active { font-weight: bold; color: #ff0000; }

.products { display: grid; grid-template-columns: repeat(3, 1fr); }
.product { text-align: center; padding: 6px 4px 8px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.product[hidden] { display: none; }
.thumb { display: block; border: 1px solid #999; margin: 0 auto 4px; }
.thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumb:hover { border-color: #ff0000; }
.p-name { color: #0000cc; font-weight: bold; }
.p-price { color: #ff0000; font: bold 16px Arial, sans-serif; }
.p-stock.in { color: #008800; }
.p-stock.low { color: #ff0000; font-weight: bold; }
.p-stock.pre { color: #ff6600; font-weight: bold; }
.stock-note { padding: 4px 8px; color: #cc0000; background: #ffffcc; border-top: 1px solid #ffcc00; }

.pre { padding: 8px; font-size: 13px; }
.steps { width: 100%; margin: 6px 0; }
.steps th { width: 30px; color: #fff; background: #008800; font-size: 16px; border: 1px solid #006600; }
.steps td { padding: 4px 8px; border: 1px solid #99cc99; background: #f0fff0; }
.warning { padding: 6px 8px; border: 2px solid #ff0000; background: #ffff99; }
.warning b { color: #ff0000; font-size: 14px; }

.visit { display: flex; gap: 10px; padding: 8px; }
.visit-photo { flex: 0 0 220px; text-align: center; color: #666; }
.visit-photo img { display: block; width: 100%; border: 1px solid #000; margin-bottom: 2px; }
.visit-text { line-height: 2; font-size: 13px; }

.english { padding: 6px 8px; font: 12px/1.6 Arial, sans-serif; color: #333; }

.footer {
  margin-top: 4px; padding: 8px; text-align: center; line-height: 2;
  border-top: 2px solid #cc0000; background: #f5f5f5;
}
.credits { font-size: 11px; color: #666; line-height: 1.7; }
.footer { border-top: 0; }
.footer-serve { font: bold 15px/1 "Hiragino Sans GB", "Microsoft YaHei", "黑体", sans-serif; color: #cc0000; margin-bottom: 6px; }
.footer-bot { width: 34px; height: 36px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .marquee, .marquee-text { white-space: normal; padding-left: 0; animation: none; }
}

@media (max-width: 760px) {
  .cols { flex-direction: column; align-items: stretch; }
  .col-left { flex: none; order: 2; display: grid; grid-template-columns: 1fr 1fr; }
  .header { flex-direction: column; }
  .logo { flex: none; border-right: 0; border-bottom: 1px solid #cc0000; text-align: left; padding-left: 84px; }
  .nav-toggle {
    display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none;
    color: #ffff00; font: bold 14px "Hiragino Sans GB", "Microsoft YaHei", sans-serif; cursor: pointer;
  }
  .nav-links { display: none; }
  .nav.is-open .nav-links { display: block; }
  .nav-links a { display: block; border-right: 0; border-top: 1px solid #ff6666; }
  .two, .two tbody, .two tr, .two td { display: block; width: 100%; padding: 0 !important; }
  .two td + td { margin-top: 6px; }
  .products { grid-template-columns: 1fr 1fr; }
  .visit { flex-direction: column; }
  .visit-photo { flex: none; }
  .topbar, .topbar tbody, .topbar tr, .topbar td { display: block; text-align: center !important; }
}
@media (max-width: 440px) {
  .side-photo img { height: 200px; object-fit: cover; }
  .album-photo img { height: 160px; }
  .mascot { width: 100px; }
  .mascot svg { width: 86px; height: 92px; }
  .col-left { grid-template-columns: 1fr; }
  .banner-1 { font-size: 19px; }
}