:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body, h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site {
  --accent: #ad542d;
  --accent-ink: #fff;
  --ink: #28221e;
  --muted: #625850;
  --paper: #fcfaf7;
  --surface: #fff;
  --tile: #f4ebe2;
  --line: #eadfd6;
  --hero-wash: #f5e6d5;
  --hero-ink: #261e17;
  --header: #fff;
  --header-ink: var(--ink);
  --radius: 8px;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.site--daily {
  --accent: #3d7251;
  --tile: #e9f1e8;
  --hero-wash: #e3ebe0;
  --line: #dce5da;
  --ink: #1e2c23;
  --paper: #fcfcf8;
  --muted: #536359;
  --radius: 12px;
}
.site--hardware {
  --accent: #ffd128;
  --accent-ink: #171611;
  --ink: #222323;
  --muted: #5c5f60;
  --tile: #f2f1ec;
  --line: #e5e3db;
  --hero-wash: #242526;
  --hero-ink: #fff;
  --header: #242526;
  --header-ink: #fff;
  --radius: 4px;
}
.site--digital {
  --accent: #075bc9;
  --ink: #122849;
  --paper: #f9fbff;
  --tile: #e6effc;
  --line: #dde7f6;
  --hero-wash: #142e54;
  --hero-ink: #fff;
  --radius: 6px;
}
.site--kitchen {
  --accent: #a44d23;
  --tile: #f3e9dc;
  --line: #eddfd2;
  --hero-wash: #f3e4d1;
  --radius: 7px;
}
.site--textile {
  --accent: #745449;
  --ink: #3b2b25;
  --paper: #faf8f6;
  --tile: #f1e8e3;
  --line: #e9dfd9;
  --hero-wash: #ebded9;
  --radius: 9px;
}
.site--specialty {
  --accent: #a55630;
  --ink: #2c2f22;
  --paper: #fbf9f1;
  --tile: #f0e7d5;
  --line: #e7dec9;
  --hero-wash: #213822;
  --hero-ink: #fff;
  --header: #243e28;
  --header-ink: #fff;
  --radius: 5px;
}
.site--office {
  --accent: #214dac;
  --ink: #192743;
  --paper: #fafbff;
  --tile: #ebedf8;
  --line: #dfe5f4;
  --hero-wash: #e4eaf6;
  --radius: 5px;
}
.site--outdoor {
  --accent: #dfc187;
  --accent-ink: #273a27;
  --paper: #f8f7f1;
  --ink: #243526;
  --tile: #e9e8dc;
  --line: #e1dfd0;
  --hero-wash: #243929;
  --hero-ink: #fff;
  --header: #253e2a;
  --header-ink: #fff;
}
.site--pet {
  --accent: #bf503e;
  --ink: #412820;
  --paper: #fff9f5;
  --tile: #fae5de;
  --line: #f1e1da;
  --hero-wash: #f6e4d9;
  --radius: 15px;
}

.wrap { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-header { background: var(--header); color: var(--header-ink); }
.masthead { display: flex; align-items: center; gap: clamp(28px, 5vw, 80px); min-height: 69px; }
.brand { display: inline-flex; align-items: center; flex: none; gap: 12px; font-size: clamp(21px, 2.1vw, 29px); font-weight: 800; }
.brand-mark {
  width: 27px;
  height: 23px;
  border: 2px solid currentColor;
  border-radius: 5px;
  position: relative;
  color: var(--accent);
  margin-top: 4px;
}
.brand-mark::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  left: 6px;
  top: -8px;
}
.search {
  display: flex;
  width: min(46vw, 510px);
  align-items: stretch;
  border: 1px solid var(--accent);
  border-radius: 100px;
  background: #fff;
  color: #242424;
}
.search input { width: 100%; min-width: 0; border: 0; padding: 10px 15px; color: inherit; background: transparent; border-radius: 100px; }
.search button { border: 0; flex: none; white-space: nowrap; background: var(--accent); color: var(--accent-ink); padding: 0 21px; font-weight: 700; cursor: pointer; border-radius: 0 100px 100px 0; }
.category-nav { border-top: 1px solid var(--line); border-top-color: color-mix(in srgb, var(--header-ink), transparent 90%); }
.nav-items { display: flex; align-items: center; gap: clamp(20px, 3vw, 45px); min-height: 47px; }
.nav-items a { white-space: nowrap; font-size: 14px; font-weight: 650; }
.nav-items a:hover, .section-heading > a:hover { text-decoration: underline; }
.all-categories { display: inline-flex; gap: 10px; align-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 8px 16px; }
.menu-icon { width: 14px; height: 2px; background: currentColor; box-shadow: 0 -4px currentColor, 0 4px currentColor; }

.home { padding-top: 12px; }
.hero-layout { display: flex; min-height: 0; }
.tool-nav { width: 165px; flex: none; background: #292a2b; color: #fff; display: flex; flex-direction: column; justify-content: space-evenly; }
.tool-nav a { padding: 10px 18px; font-size: 14px; }
.tool-nav a:hover { background: #3e3f41; color: #ffd128; }
.hero { flex: 1; min-width: 0; position: relative; isolation: isolate; overflow: hidden; min-height: clamp(270px, 26vw, 360px); display: flex; align-items: center; background: var(--hero-wash); color: var(--hero-ink); }
.hero-image { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--hero-wash), transparent 78%);
  background: linear-gradient(90deg, var(--hero-wash) 0%, color-mix(in srgb, var(--hero-wash) 84%, transparent) 30%, transparent 70%);
}
.hero-copy { padding: 24px clamp(25px, 4.5vw, 67px); max-width: 56%; }
.hero-copy h1 { font-size: clamp(30px, 3.7vw, 56px); letter-spacing: -.045em; line-height: 1.12; font-weight: 820; }
.hero-copy h1 span { display: block; }
.hero-copy p { font-size: 14px; margin-top: 14px; line-height: 1.6; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 19px; min-height: 40px; background: var(--accent); color: var(--accent-ink); border-radius: 100px; font-size: 14px; font-weight: 720; }
.primary:hover { filter: brightness(1.06); }
.hero-copy .primary { margin-top: 18px; }
.site--hardware .primary, .site--office .primary { border-radius: 5px; }
.site--digital .hero { border-radius: 7px; }
.site--textile .hero, .site--pet .hero { border-radius: var(--radius); }
.site--specialty .hero-copy h1 { font-family: "Songti SC", SimSun, serif; }

.category-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block: 11px 25px; }
.category-tiles a { display: flex; align-items: center; justify-content: space-between; gap: 5px; background: var(--tile); border-radius: var(--radius); min-width: 0; overflow: hidden; min-height: 60px; }
.category-tiles strong { padding: 10px 0 10px 13px; font-size: 14px; white-space: nowrap; }
.category-tiles img { width: min(42%, 115px); height: 68px; object-fit: cover; mix-blend-mode: multiply; }
.category-tiles a:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.site--hardware .category-tiles { display: none; }
.site--hardware .featured { padding-top: 20px; }
.site--textile .category-tiles a { min-height: 76px; }
.site--office .category-tiles { gap: 7px; }
.site--pet .category-tiles a:nth-child(even) { background: #e9eef8; }

.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; }
.section-heading h2 { font-size: 22px; font-weight: 800; border-left: 4px solid var(--accent); padding-left: 9px; }
.section-heading a { color: var(--muted); font-size: 14px; white-space: nowrap; }
.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.products article { min-width: 0; }
.product-card { display: block; height: 100%; overflow: hidden; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.product-card:hover { border-color: var(--accent); }
.product-card img, .detail-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tile); }
.product-card-copy { padding: 11px 10px; }
.product-card h3 { font-size: 14px; line-height: 1.45; font-weight: 720; }
.product-card p { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 4px; }

.catalog, .product { padding-top: 25px; }
.catalog > h1 { font-size: 29px; margin-bottom: 13px; }
.category-filter { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; }
.category-filter a { flex: none; border-radius: 100px; padding: 9px 14px; font-size: 14px; background: var(--tile); }
.category-filter a[aria-current], .category-filter a:hover { background: var(--accent); color: var(--accent-ink); }
.search-caption { color: var(--muted); padding-bottom: 13px; overflow-wrap: anywhere; }
.empty { padding-block: 42px; line-height: 1.65; color: var(--muted); }
.empty .primary { margin-top: 13px; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 15px; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.detail-image { border-radius: var(--radius); }
.detail-copy { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: clamp(20px, 3vw, 40px); }
.detail-copy h1 { font-size: clamp(24px, 3vw, 38px); margin-bottom: 16px; }
.detail-copy dl { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--tile); border-radius: 7px; font-size: 14px; }
.detail-copy dt { font-weight: 750; flex: none; }
.detail-copy h2 { font-size: 18px; margin: 24px 0 8px; }
.detail-copy p { color: var(--muted); line-height: 1.75; }
.detail-copy .primary { margin-top: 20px; }
.site-footer { margin-top: 28px; padding: 17px 0 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.mobile-nav { display: none; }

@media (max-width: 950px) {
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-items { overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 24px); }
  .page--home, .page--catalog { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .site--daily { --header: #496449; --header-ink: #fff; }
  .masthead { min-height: 61px; gap: 13px; }
  .brand { gap: 7px; font-size: 20px; }
  .brand-mark { display: none; }
  .search { width: auto; flex: 1; min-width: 0; }
  .search input { padding: 9px 11px; font-size: 14px; }
  .search button { padding: 0 11px; font-size: 13px; }
  .category-nav { display: none; }
  .home { padding-top: 8px; }
  .hero, .site--hardware .hero { min-height: 191px; border-radius: 9px; }
  .hero-copy { padding: 16px 12px; max-width: 66%; }
  .hero-copy h1 { font-size: clamp(22px, 6vw, 29px); }
  .hero-copy p { display: none; }
  .hero-copy .primary { margin-top: 11px; padding: 6px 11px; min-height: 32px; font-size: 12px; }
  .hero-image { object-position: 64% center; }
  .hero::before { background: linear-gradient(90deg, var(--hero-wash), color-mix(in srgb, var(--hero-wash) 74%, transparent) 35%, transparent 82%); }
  .tool-nav { display: none; }
  .category-tiles, .site--hardware .category-tiles { display: grid; gap: 6px; margin: 8px 0 16px; }
  .category-tiles a, .site--textile .category-tiles a { min-height: 62px; display: flex; flex-direction: column-reverse; justify-content: center; gap: 0; }
  .category-tiles img { width: 43px; height: 32px; }
  .category-tiles strong { padding: 0 2px 5px; font-size: 12px; white-space: normal; text-align: center; line-height: 1.25; }
  .site--hardware .featured { padding-top: 0; }
  .section-heading { margin-bottom: 8px; }
  .section-heading h2 { font-size: 18px; }
  .section-heading a { font-size: 12px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product-card-copy { padding: 7px 8px; }
  .product-card h3 { font-size: 13px; }
  .product-card p { font-size: 11px; }
  .catalog, .product { padding-top: 15px; }
  .catalog > h1 { font-size: 21px; margin-bottom: 10px; }
  .category-filter { margin-bottom: 11px; gap: 6px; }
  .category-filter a { padding: 7px 11px; font-size: 13px; }
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .breadcrumbs { margin-bottom: 10px; }
  .detail-copy { padding: 15px; }
  .detail-copy .primary { display: flex; }
  .mobile-nav {
    display: flex;
    position: fixed;
    z-index: 1;
    inset: auto 0 0;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .mobile-nav a { display: grid; justify-items: center; gap: 4px; min-width: 92px; padding: 7px 15px 5px; font-size: 12px; line-height: 1.4; color: var(--muted); }
  .mobile-nav a[aria-current] { color: var(--accent); font-weight: 800; }
  .home-icon, .grid-icon { display: block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 3px; }
  .home-icon { position: relative; width: 13px; height: 10px; border-top: 0; margin-top: 5px; }
  .home-icon::before { content: ""; position: absolute; width: 10px; height: 10px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); left: 0; top: -5px; }
  .grid-icon { background: linear-gradient(90deg, transparent 41%, currentColor 41%, currentColor 57%, transparent 57%), linear-gradient(transparent 41%, currentColor 41%, currentColor 57%, transparent 57%); }
  .site-footer { margin-top: 18px; padding-block: 12px; }
}