/* ════════════════════════════════════════════════════════════════════
   KAIYU PET · Product Centre + detail view (EKO layout, 1:1 numbers)
   1200 container · 200 filter rail · 300x360 cards · 760x760 + 380 detail
   Accent colour = the site's red (--accent); the logo stays blue.
   ════════════════════════════════════════════════════════════════════ */
.pcx {
  background: #fff;
  scroll-margin-top: var(--nav-h);
  /* The bar is fixed, so the page title needs the bar's height above it.
     The detail view gets the same clearance from `main` instead, so the two
     must not add up. */
  padding-top: var(--nav-h);
}
body.pcx-detail-open .pcx { padding-top: 0; }
.pcx__wp {
  width: 1200px;
  margin: 0 auto;
}
/* On narrower viewports the fixed 1200px box would touch the screen edges with
   no breathing room. Go fluid with side padding so the product area never sits
   flush against the viewport on either side. */
@media (max-width: 1240px) {
  .pcx__wp {
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
    box-sizing: border-box;
  }
}
.pcx__pagetitle {
  margin: 52px 0 32px;
  /* The product grid sits to the right of the 240px filter rail (+26 gap),
     so a page-centred title reads off-centre against the cards. This padding
     shifts the text centre right by half that offset, onto the grid's axis. */
  padding-left: 240px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: #222;
}
@media (max-width: 900px) {
  .pcx__pagetitle { padding-left: 0; }
}

/* ---------- layout: rail + content ---------- */
.pcx__wp .pcx__layout,
.pcx__layout {
  display: flex;
  align-items: flex-start;
}
.pcx__side {
  flex: 0 0 240px;
  width: 240px;
  margin-right: 26px;
}
.pcx__content {
  flex: 1;
  min-width: 0;
  /* mirror the sidebar's 26px gap on the right so the product grid is not
     flush against the container edge — balanced left/right breathing room. */
  padding-right: 26px;
}

/* ---------- filter rail ---------- */
/* Scaled up to the EKO reference proportions: taller rows, more padding, so
   the rail doesn't end as a short stub (user: "拉长一点 不要那么短截"). */
.pcx__nav {
  background: #fafafa;
  padding: 20px 18px 18px;
  line-height: 50px;
  margin-bottom: 20px;
}
.pcx__navtitle {
  margin: 0 0 6px;
  line-height: 46px;
  padding-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid var(--accent);
}
.pcx__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pcx__nav li {
  position: relative;
  font-size: 16.5px;
  color: #222;
  border-bottom: 1px solid #bfc0c0;
}
.pcx__nav li:last-child { border-bottom: none; }
.pcx__nav li a {
  display: block;
  padding-left: 10px;
  padding-right: 38px;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease;
}
.pcx__nav li a:hover { color: var(--accent); }
/* Checkbox-style marker on the right of each filter item. Empty = grey square,
   selected = red filled square. Vertically centred so it always shows fully. */
.pcx__box {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1.5px solid #b5b6b6;
  border-radius: 3px;
  transition: background-color .15s ease, border-color .15s ease;
}
.pcx__nav li.on .pcx__box {
  background: var(--accent);
  border-color: var(--accent);
}
.pcx__nav li.on { background: #fdeceb; }
.pcx__nav li.on a { font-weight: 700; }
.pcx__clear {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid #e3e3e3;
  background: #fff;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pcx__clear:hover { color: #222; border-color: #bfc0c0; }

/* ---------- product grid ---------- */
.pcx__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 30px;
}
.pcx__grid li {
  text-align: center;
  font-size: 16px;
}
.pcx__pic {
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 5 / 6;
  margin: 0 auto;
  background: #fff;
}
.pcx__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .8s ease;
}
.pcx__grid li:hover .pcx__pic img { transform: scale(1.02); }
.pcx__name {
  margin-top: 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  min-height: 51px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcx__name a {
  color: #222;
  transition: color .3s ease;
}
.pcx__grid li:hover .pcx__name a { color: var(--accent); }
.pcx__slogan {
  height: 26px;
  margin-top: 2px;
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #9aa0a6;
}.pcx__model {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  color: #111827;
}
.pcx__more {
  text-align: center;
  margin: 18px 0 78px;
}
.pcx__more button {
  padding: 10px 44px;
  border: 1px solid #333;
  background: #fff;
  color: #222;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all .2s ease;
}
.pcx__more button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pcx__empty {
  padding: 60px 0 90px;
  text-align: center;
  font-size: 16px;
  color: #999;
}

/* The catalogue is empty while the new photography is being prepared: this is
   a statement about the site, not a filter result, so it gets room and weight. */
.pcx__empty.is-empty-catalogue {
  max-width: 30em;
  margin: 0 auto;
  padding: 120px 0 140px;
  font-size: 17px;
  line-height: 1.75;
  color: #6b7280;
}
.pcx__empty.is-empty-catalogue a {
  color: var(--nav-pill, #e1251b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- detail view ---------- */
.pcx__crumb {
  margin: 26px 0 12px;
  overflow: hidden;
  font-size: 14px;
  color: #a1a1a1;
}
.pcx__crumb a { color: inherit; }
.pcx__crumb a:hover { color: var(--accent); }
.pcx__dwrap { overflow: hidden; }
.pcx__dleft {
  float: left;
  width: 760px;
  margin-right: 60px;
  margin-bottom: 60px;
}
.pcx__dright {
  float: left;
  width: 380px;
}
.pcx__stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
}
.pcx__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pcx__prev,
.pcx__next {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  font-size: 26px;
  color: #666;
  cursor: pointer;
  z-index: 3;
  user-select: none;
}
.pcx__prev { left: 20px; }
.pcx__next { right: 20px; }
.pcx__prev:hover,
.pcx__next:hover { color: #222; background: #fff; }
.pcx__dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 3;
}
.pcx__dots li {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  border-radius: 50%;
  background: #d8d8d8;
  cursor: pointer;
}
.pcx__dots li.on { background: var(--accent); }

.pcx__den {
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
}
.pcx__did {
  margin-bottom: 26px;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}
.pcx__dname {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}
.pcx__dfeat {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  font-size: 16px;
  line-height: 30px;
  color: #44403f;
}
.pcx__dfeat li::before { content: "- "; }

.pcx__meta {
  margin-bottom: 26px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 15px;
  line-height: 30px;
  color: #44403f;
}
.pcx__meta b {
  display: inline-block;
  min-width: 110px;
  color: #111827;
}
.pcx__ddesc {
  clear: both;
  margin-bottom: 60px;
  line-height: 230%;
  color: #44403f;
}
.pcx__ddesc strong {
  display: inline-block;
  margin-top: 20px;
  font-size: 22px;
  color: #222;
}
.pcx__ddesc p { font-size: 17px; }
.pcx__back { margin-bottom: 60px; }
.pcx__back a { font-size: 15px; color: #999; }
.pcx__back a:hover { color: var(--accent); }

/* detail open: hide every other section of the one-page site; the main
   padding keeps the breadcrumb clear of the fixed nav at any scroll position */
body.pcx-detail-open #hero-root,
body.pcx-detail-open main > :not(#products-root) { display: none; }
body.pcx-detail-open main { padding-top: calc(var(--nav-h) + 4px); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .pcx__wp { width: 96%; }
}
@media (max-width: 1080px) {
  .pcx__dleft { float: none; width: 100%; margin-right: 0; }
  .pcx__dright { float: none; width: 100%; }
}
@media (max-width: 860px) {
  .pcx__layout { flex-direction: column; }
  .pcx__side { width: 100%; flex: none; margin: 0 0 10px; }
  .pcx__nav { margin-bottom: 12px; }
  .pcx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
  .pcx__name { margin-top: 16px; font-size: 15.5px; min-height: 47px; }
}