/* Packrivo Home v4 — components. Tokens come from tokens.css (generated by packrivo-v2/scripts/tokens.mjs). */
@import url("tokens.css");

:root {
  /* aliases so component rules stay short; values live in tokens.css only */
  --pk-ink: var(--pk-color-ink);
  --pk-forest: var(--pk-color-forest);
  --pk-moss: var(--pk-color-moss);
  --pk-gold: var(--pk-color-lime);
  --pk-bone: var(--pk-color-bone);
  --pk-paper: var(--pk-color-paper);
  --pk-sand: var(--pk-color-sand);
  --pk-slate: var(--pk-color-slate);
  --pk-line: rgba(12, 20, 17, 0.12);
  --pk-radius: var(--pk-radius-md);
  --pk-wrap: 1180px;
}

.pk-body {
  margin: 0;
  background: var(--pk-bone);
  color: var(--pk-ink);
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.pk-body *,
.pk-body *::before,
.pk-body *::after { box-sizing: border-box; }

.pk-skip {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--pk-ink);
  color: var(--pk-paper);
  padding: 10px 16px;
  z-index: 200;
}
.pk-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  inset-inline-start: 12px;
  top: 12px;
}

.pk-wrap {
  width: 100%;
  max-width: var(--pk-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

.pk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 252, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pk-line);
}

.pk-hd-inner {
  max-width: var(--pk-wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.pk-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--pk-ink);
  flex: 0 0 auto;
}
.pk-brand-mark { display: block; width: 30px; height: 30px; }
.pk-brand-word {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.035em;
}

.pk-nav { flex: 1 1 auto; }
.pk-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pk-nav-list > li { position: relative; display: flex; align-items: center; }

.pk-nav-link {
  display: inline-block;
  padding: 9px 11px;
  color: var(--pk-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
}
.pk-nav-link:hover { background: rgba(12, 20, 17, 0.05); }
.pk-nav-link:focus-visible { outline: 2px solid var(--pk-moss); outline-offset: 2px; }

.pk-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  background: none;
  border: 0;
  color: var(--pk-slate);
  cursor: pointer;
  border-radius: 3px;
}
.pk-caret:hover { color: var(--pk-ink); background: rgba(12, 20, 17, 0.05); }
.pk-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.pk-caret svg { transition: transform 160ms ease; }

.pk-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  box-shadow: 0 18px 40px rgba(12, 20, 17, 0.12);
  padding: 20px 22px;
  min-width: 320px;
  z-index: 120;
}
.pk-panel[hidden] { display: none; }
.pk-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 22px;
}
.pk-panel-title {
  margin: 0 0 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pk-slate);
}
.pk-panel ul { list-style: none; margin: 0; padding: 0; }
.pk-panel li { margin: 0; }
.pk-panel a {
  display: block;
  padding: 6px 0;
  color: var(--pk-ink);
  text-decoration: none;
  font-size: 13.5px;
}
.pk-panel a:hover { color: var(--pk-moss); text-decoration: underline; text-underline-offset: 3px; }
.pk-panel-note {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pk-line);
  font-size: 12px;
  color: var(--pk-slate);
}
.pk-panel-sm { min-width: 260px; }
.pk-panel-list a { display: flex; justify-content: space-between; gap: 12px; }
.pk-panel-list span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--pk-slate);
}

.pk-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.pk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--pk-ink);
  border-radius: 3px;
}
.pk-icon-btn:hover { background: rgba(12, 20, 17, 0.05); }
.pk-lang {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--pk-slate);
  padding: 4px 6px;
  border: 1px solid var(--pk-line);
  border-radius: 3px;
}
.pk-text-link {
  font-size: 13.5px;
  color: var(--pk-ink);
  text-decoration: none;
  white-space: nowrap;
}
.pk-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.pk-btn,
.pk-btn-ghost,
.pk-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pk-btn { background: var(--pk-ink); color: var(--pk-paper); border: 1px solid var(--pk-ink); }
.pk-btn:hover { background: var(--pk-moss); border-color: var(--pk-moss); color: var(--pk-paper); }
.pk-btn-ghost { background: transparent; color: var(--pk-ink); border: 1px solid rgba(12, 20, 17, 0.22); }
.pk-btn-ghost:hover { border-color: var(--pk-ink); }
.pk-btn-light { background: var(--pk-paper); color: var(--pk-ink); border: 1px solid var(--pk-paper); }
.pk-btn-light:hover { background: var(--pk-gold); border-color: var(--pk-gold); }

/* CTA in the header keeps the compact size */
.pk-actions .pk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  background: var(--pk-ink);
  color: var(--pk-paper);
  border-radius: 3px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pk-actions .pk-cta:hover { background: var(--pk-moss); }

.pk-burger { display: none; }

/* the theme's language selector, moved into the action row by nav.js */
#packrivo-language-root.is-inline {
  position: static !important;
  inset: auto !important;
  margin: 0 2px 0 0;
}

/* ---------- hero ---------- */

.pk-hero { padding: 64px 0 72px; border-bottom: 1px solid var(--pk-line); }
/* Areas, not source order: on mobile the photo has to sit between the CTA and
   the stat row so the first screen shows the headline, the button and a box. */
.pk-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas: "copy media" "stats media";
  column-gap: 56px;
  align-items: start;
}
.pk-hero-copy { grid-area: copy; }
.pk-hero-media { grid-area: media; align-self: center; }
.pk-hero-grid > .pk-stats { grid-area: stats; align-self: end; }

.pk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pk-slate);
}
.pk-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.pk-eyebrow-light { color: rgba(253, 252, 248, 0.6); }

.pk-display {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  line-height: 0.99;
  letter-spacing: -0.035em;
}
.pk-accent { color: var(--pk-moss); }

.pk-lede {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: 16.5px;
  color: #3c433f;
}
.pk-on-dark { color: var(--pk-paper); }
.pk-on-dark-muted { color: rgba(253, 252, 248, 0.65); }

.pk-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.pk-stats {
  display: flex;
  gap: 40px;
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--pk-line);
}
.pk-stats dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pk-slate);
}
.pk-stats dd {
  margin: 6px 0 0;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pk-hero-media {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pk-sand);
}
.pk-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pk-hero-card {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--pk-paper);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(12, 20, 17, 0.16);
}
.pk-hero-card .pk-price {
  margin: 4px 0 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pk-mono {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.pk-muted { color: var(--pk-slate); }

/* ---------- sections ---------- */

.pk-section { padding: 72px 0; }
.pk-bordered { border-top: 1px solid var(--pk-line); }
.pk-dark { background: var(--pk-forest); color: var(--pk-paper); }

.pk-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.pk-h2 {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.pk-more {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pk-moss);
  text-decoration: none;
  white-space: nowrap;
}
.pk-dark .pk-more { color: var(--pk-gold); }
.pk-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.pk-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.pk-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  overflow: hidden;
  background: var(--pk-paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 180ms ease;
}
.pk-card:hover { border-color: rgba(12, 20, 17, 0.35); transform: translateY(-2px); }
.pk-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pk-card-placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; background: #eee; }
.pk-card-body { display: block; padding: 12px 13px 15px; }
.pk-card-title { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pk-card-text { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--pk-slate); }

.pk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.pk-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(253, 252, 248, 0.22);
}
.pk-step-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--pk-gold);
}
.pk-step-title { font-size: 15px; font-weight: 600; }
.pk-step-text { font-size: 13px; line-height: 1.55; color: rgba(253, 252, 248, 0.68); }

.pk-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.pk-list {
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
}
.pk-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 14.5px;
  color: #3c433f;
}
.pk-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pk-moss);
}

.pk-table-card {
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-paper);
  padding: 18px 20px;
}
.pk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pk-table th,
.pk-table td { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--pk-line); }
.pk-table th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pk-slate);
  font-weight: 500;
}
.pk-table tbody tr:last-child td { border-bottom: 0; }
.pk-table-plain { background: transparent; }

.pk-fine { margin: 12px 0 0; font-size: 11.5px; color: var(--pk-slate); }

.pk-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pk-post {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-paper);
  text-decoration: none;
  color: inherit;
}
.pk-post:hover { border-color: rgba(12, 20, 17, 0.35); }
.pk-post-title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.pk-post-meta { color: var(--pk-slate); font-size: 10.5px; }

.pk-faq { margin: 0; }
.pk-faq > div { padding: 16px 0; border-bottom: 1px solid var(--pk-line); }
.pk-faq dt { font-size: 15px; font-weight: 600; }
.pk-faq dd { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #3c433f; }

.pk-cta-band { background: var(--pk-moss); color: var(--pk-paper); padding: 56px 0; }
.pk-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .pk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 28p: 桌面页头（品牌 + 7 个导航项 + 搜索/语言/CTA）在 901–1294 之间根本放不下——1024 实测
   en 1117 / de 1181 / nl 1221，溢出的都是 .pk-actions 那一簇。原来的汉堡断点是 900，比这条
   行真正需要的宽度少了将近 400 px，所以这一整段宽度既没有桌面导航的空间，也没进汉堡模式。
   现按实测取统一断点：12 个语种逐个二分，桌面页头右侧留 16 px 余量放得下的最小宽度分别是
   en/ar/fr/it/ja/ko/pt/zh-CN/zh-TW 1212、de 1215、es 1235、nl 1294 → W = 1294。
   1295 起桌面（复核：12 语种右侧余量 17–57 px），1294 及以下全语种进汉堡，不再按语种分设断点。 */
@media (max-width: 1294px) {
  .pk-header { backdrop-filter: none; background: var(--pk-paper); }
  .pk-hd-inner { gap: 10px; justify-content: space-between; }
  .pk-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 3;
    background: none;
    border: 1px solid var(--pk-line);
    border-radius: 3px;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .pk-burger-lines {
    display: block;
    width: 14px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
  }
  .pk-actions { order: 2; gap: 8px; }
  .pk-actions .pk-icon-btn,
  .pk-actions .pk-lang,
  .pk-actions .pk-text-link { display: none; }
  .pk-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pk-paper);
    padding: 8px 20px 40px;
    overflow-y: auto;
    display: none;
    z-index: 90;
  }
  .pk-nav.is-open { display: block; }
  .pk-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .pk-nav-list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--pk-line);
  }
  .pk-nav-link { padding: 14px 0; font-size: 16px; }
  .pk-caret { width: 44px; height: 48px; }
  .pk-panel {
    position: static;
    grid-column: 1 / -1;
    border: 0;
    box-shadow: none;
    padding: 0 0 14px;
    min-width: 0;
  }
  .pk-panel-grid { grid-template-columns: 1fr; gap: 16px; }
  .pk-hero { padding: 40px 0 48px; }
  .pk-hero-grid, .pk-split { grid-template-columns: 1fr; gap: 32px; }
  .pk-section { padding: 48px 0; }
  .pk-cards, .pk-posts { grid-template-columns: 1fr 1fr; }
  .pk-steps { grid-template-columns: 1fr; }
  .pk-stats { gap: 24px; }
  .pk-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .pk-cards, .pk-posts { grid-template-columns: 1fr; }
  .pk-actions .pk-text-link { display: none; }
}

/* ---------- filters, pager, cards (product + journal indexes) ---------- */
.pk-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--pk-line);
  border-bottom: 1px solid var(--pk-line);
}
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--pk-line);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pk-ink);
  text-decoration: none;
  background: transparent;
}
.pk-chip span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--pk-slate); }
.pk-chip:hover { border-color: rgba(12, 20, 17, 0.35); }
.pk-chip.is-active { background: var(--pk-ink); border-color: var(--pk-ink); color: var(--pk-paper); }
.pk-chip.is-active span { color: rgba(253, 252, 248, 0.65); }
.pk-sort { display: flex; align-items: center; gap: 8px; }
.pk-sort .pk-label { margin: 0; }
.pk-sort select {
  border: 1px solid var(--pk-line);
  border-radius: 3px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--pk-paper);
  color: var(--pk-ink);
}
.pk-pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.pk-post-thumb { display: block; margin: -18px -18px 12px; overflow: hidden; border-radius: var(--pk-radius) var(--pk-radius) 0 0; }
.pk-post-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pk-post .pk-card-text { color: var(--pk-slate); font-size: 12.5px; line-height: 1.5; }

/* Parent theme sets main{max-width:1520px;margin:auto;padding:0 40px}, which
   double-pads .pk-wrap and traps the full-bleed colour bands inside a box. */
body .pk-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Product index uses four columns on wide screens only; the inline style it used
   to carry also applied at 390px and produced four 90px cards. */
.pk-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pk-cards-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .pk-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pk-cards-4 { grid-template-columns: 1fr; } }

.pk-product-card{border:1px solid #ddd;display:flex;flex-direction:column;min-width:0;background:#fff}
.pk-product-card-main{color:inherit;text-decoration:none;display:flex;flex-direction:column;flex:1}
.pk-product-card-image{position:relative;display:block;aspect-ratio:4/3;background:#f2f2f2;overflow:hidden}
.pk-product-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.pk-product-moq{position:absolute;bottom:10px;left:10px;background:#fff;padding:4px 8px;font-size:11px}
.pk-product-card-copy{display:block;padding:16px}.pk-product-card-group{display:block;font-size:11px;color:#666}
.pk-product-card-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;margin-top:6px}
.pk-product-card-footer{padding:0 16px 16px;display:flex;justify-content:space-between;gap:8px;align-items:end;font-size:12px}
.pk-product-card-footer strong,.pk-product-card-footer small{display:block}.pk-product-card-footer a{white-space:nowrap}
.pk-sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pk-sample-grid div{border:1px solid #666;padding:20px;color:#fff}.pk-faq details{border-bottom:1px solid #ddd;padding:16px 0}.pk-faq summary{cursor:pointer;font-weight:600}.pk-faq p{margin-top:10px}
@media(max-width:560px){.pk-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* 28p: 下限从 901 抬到 1295——桌面页头现在从 1295 才开始出现，1294 及以下走汉堡，
   所以这条隐藏规则只该在桌面态（1295–1350）生效。 */
@media (min-width:1295px) and (max-width:1439px){.pk-actions .pk-text-link{display:none}}
/* 28o: 28n 把 Sample kit 译成各语种后，it/pt/fr/es/nl 的标签比英文长 4–10 px，1351–1660 区间
   又开始溢出；阈值按实测重设（标签何时开始放得下），其余语种与 <=1350 不动。
   —— 28m s4: long translated CTAs (and fallback font metrics) push the header row past the
   viewport on desktop for these languages; hide the secondary text-links only in the
   width range where each language's row does not fit. en/ar/ja/ko/zh and <=1350 untouched. */
@media (min-width:1351px) and (max-width:1620px){html[lang="it"] .pk-actions .pk-text-link{display:none}}
@media (min-width:1351px) and (max-width:1680px){html[lang="pt"] .pk-actions .pk-text-link{display:none}}
@media (min-width:1351px) and (max-width:1640px){html[lang="fr"] .pk-actions .pk-text-link{display:none}}
@media (min-width:1351px) and (max-width:1575px){html[lang="de"] .pk-actions .pk-text-link{display:none}}
@media (min-width:1351px) and (max-width:1760px){html[lang="es"] .pk-actions .pk-text-link{display:none}}
@media (min-width:1351px) and (max-width:1780px){html[lang="nl"] .pk-actions .pk-text-link{display:none}}
@media (max-width:560px){.pk-actions .pk-cta{display:none}.pk-hd-inner{padding-left:16px;padding-right:16px}}
.pk-empty{border:1px dashed #999;padding:28px;margin-top:18px}.pk-sort{flex-wrap:wrap;gap:8px}.pk-sort input{min-width:0;max-width:100%}.pk-pager .page-numbers{padding:8px}
.pk-featured{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px;border:1px solid #ddd;margin:24px 0}.pk-featured img{width:100%;aspect-ratio:16/9;object-fit:cover}.pk-guide{padding:16px;background:#f4f3ef}.pk-journal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pk-journal-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:768px){.pk-featured{grid-template-columns:1fr}.pk-journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.pk-journal-grid{grid-template-columns:1fr}}
.pk-product-photo-caption{display:block;padding:0 16px 12px;color:#555;font-size:10px;line-height:1.3}

/* ---------- 28m P2: one control system, compact mobile hero and index ---------- */

/* Buttons, filter chips, search/sort fields and the quote widget's controls share
   one height, one border, one weight and one focus ring. */
.pk-sort { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.pk-sort input[type="search"],
.pk-sort select {
  min-height: 44px;
  border: 1px solid var(--pk-line);
  border-radius: 6px;
  font-weight: 600;
}
.pk-sort input[type="search"],
.pk-sort select {
  padding: 0 12px;
  font-size: 13.5px;
  background: var(--pk-paper);
  color: var(--pk-ink);
}
.pk-sort input[type="search"] { flex: 1 1 180px; min-width: 0; }
.pk-sort select { flex: 0 1 170px; }
.pk-sort button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--pk-ink);
  border-radius: 6px;
  background: var(--pk-ink);
  color: var(--pk-paper);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.pk-sort button:hover { background: var(--pk-moss); border-color: var(--pk-moss); }

.pk-btn:focus-visible,
.pk-btn-ghost:focus-visible,
.pk-btn-light:focus-visible,
.pk-chip:focus-visible,
.pk-sort input:focus-visible,
.pk-sort select:focus-visible,
.pk-sort button:focus-visible,
.pkq-btn:focus-visible,
.pkq-btn-ghost:focus-visible,
.pkq-submit:focus-visible,
.pkq-chip:focus-visible,
.pkq-step:focus-visible,
.pkq-input:focus-visible {
  outline: 2px solid var(--pk-moss);
  outline-offset: 2px;
}

/* The product-page sticky bar is injected by the parent theme with an orange
   gradient (and re-declared in a footer @media block), so the override carries
   an extra body qualifier to win on cascade order as well as importance. */
body .pr-sticky .pr-sticky-main,
body .pr-sticky .pr-sticky-main:hover {
  background: var(--pk-ink) !important;
  background-image: none !important;
  color: var(--pk-paper) !important;
  border: 1px solid var(--pk-ink) !important;
  border-radius: 6px;
  min-height: 44px;
  font-weight: 600;
}
body .pr-sticky .pr-sticky-main:hover {
  background: var(--pk-moss) !important;
  border-color: var(--pk-moss) !important;
}

/* The dock is 56 px of floating chrome; the sticky bar already carries its own
   WhatsApp action, so on pages with that bar the float would only sit on top of
   the primary button. Hide it there, and reserve room for it everywhere else. */
@media (max-width: 900px) {
  /* remediation-ui.css re-shows the dock through a body.has-contact-dock > nav
     chain, so this carries html + body + the two dock classes to outrank it. */
  html body:has(.pr-sticky) nav.contact-dock.packrivo-global-contact,
  html body.pr-has-sticky nav.contact-dock.packrivo-global-contact,
  html body.pr-has-sticky nav.contact-dock { display: none !important; }
  body:not(:has(.pr-sticky)):not(.pr-has-sticky) { padding-bottom: 84px; }
}

@media (max-width: 900px) {
  /* Hero: headline + primary button + a real box photo inside the first screen. */
  .pk-hero { padding: 26px 0 30px; }
  .pk-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "stats";
    row-gap: 18px;
  }
  .pk-display { font-size: clamp(1.95rem, 7.4vw, 2.45rem); line-height: 1.03; }
  .pk-eyebrow { margin-bottom: 10px; }
  .pk-lede {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pk-hero-cta { margin-top: 16px; gap: 10px; }
  .pk-hero-cta .pk-btn,
  .pk-hero-cta .pk-btn-ghost { flex: 1 1 140px; }
  .pk-hero-media { align-self: stretch; }
  .pk-hero-media img { aspect-ratio: 4 / 3; max-height: 46vh; }
  .pk-hero-card { left: 10px; bottom: 10px; padding: 9px 11px; }
  .pk-hero-card .pk-price { font-size: 1.35rem; }
  .pk-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 16px;
    padding-top: 12px;
  }
  .pk-stats > div { min-height: 44px; }
  .pk-stats dt { font-size: 9.5px; }
  .pk-stats dd { margin-top: 2px; font-size: 1rem; }

  /* Products index: chips scroll sideways, search/sort stay one compact block,
     so the first card arrives much earlier. */
  .pk-filterbar { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 0; }
  .pk-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pk-chips::-webkit-scrollbar { display: none; }
  .pk-chips .pk-chip { flex: 0 0 auto; white-space: nowrap; }
  .pk-sort { flex-wrap: wrap; }
  .pk-sort input[type="search"] { flex: 1 1 150px; }
  .pk-sort select { flex: 1 1 130px; }
  .pk-sort > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pk-lede { max-height: none; }
  .pk-section { padding: 30px 0; }
  .pk-product-card { padding: 12px; }
  .pk-product-card-footer { gap: 8px; }
  .pk-product-card-footer a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 28m P2: compact catalogue intro ---------- */

/* Products index hero: keep the desktop rhythm, but compress the claims strip
   and the filter/sort instructions on mobile so the first card arrives sooner. */
.pk-catalog-hero { padding: 56px 0 40px; }
.pk-catalog-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.pk-strip { margin: 14px 0 0; }
@media (max-width: 900px) {
  .pk-catalog-hero { padding: 24px 0 16px; }
  .pk-catalog-hero h1 { font-size: clamp(1.95rem, 7.4vw, 2.45rem); }
  .pk-strip {
    margin: 8px 0 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--pk-slate);
  }
  .pk-catalog-hero .pk-lede { margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
}

/* ---------- 28p: 页脚底部那一行在 768–~940 之间放不下 ---------- */
/* 父主题的 .footer-bottom 是 flex + justify-content:space-between + gap:25px，但只在
   max-width:767px 才把子项堆成 block。于是 768 这一档既没有堆叠、也放不下：de 实测溢出到
   801（#theme-toggle「Farbschema wechseln」），nl 到 896（「Verpakkingshandleidingen」+ 按钮）。
   让这一行直接允许换行：与语种无关、与宽度无关，也不是把溢出藏起来。≤767 仍走父主题的 block 堆叠。 */
.footer-bottom { flex-wrap: wrap; row-gap: 10px; }
.footer-bottom > * { min-width: 0; }

/* ---------- 29x: 原生页面内容限宽 ---------- */
/* 原生页面自带的 section 是按旧的全宽 <main> 写的，套一层和页头同尺寸的盒子，
   正文、面包屑、表格就不再从 x=0 起。数值与 .pk-wrap / .pk-hd-inner 保持一致。 */
.pk-page-body {
  width: 100%;
  max-width: var(--pk-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* 通栏白名单：本来就该铺满屏宽的区块用 .pk-bleed / [data-full-bleed] 放行，
   内边距按同一套 1180+24 的规则补回来，避免放行后内容又贴边。
   .pkpw-hero：product-workspace 插件在产品原生页渲染的通栏 hero（双草稿合并时
   从 repo mirror 旧稿 .pk-native-wrap 白名单并入，防止限宽后产品 hero 被挤压）。 */
.pk-page-body > .pk-bleed,
.pk-page-body > .pk-full,
.pk-page-body > [data-full-bleed],
.pk-page-body > .pr-remediation-hero,
.pk-page-body > .pkpw-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc((100vw - var(--pk-wrap)) / 2 + 24px));
  padding-right: max(24px, calc((100vw - var(--pk-wrap)) / 2 + 24px));
}

/* ---------- 29x: 博客列表横向卡片 ---------- */
/* 单列排列；左图占卡片宽度 40%，16:10；右栏分类 → H2 → 两行摘要 → 阅读时长 · 日期。 */
.pk-jcards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

.pk-jcard {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  padding: 32px;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-radius: 20px;
}

.pk-jcard-media {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f3f0;
  text-decoration: none;
}

.pk-jcard-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.pk-jcard-media-blank {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eceae4, #f6f5f1);
}

.pk-jcard-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(253, 252, 248, 0.92);
  color: var(--pk-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
}

.pk-jcard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pk-jcard-kicker {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-slate);
}

.pk-jcard-title {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pk-jcard-title a { color: inherit; text-decoration: none; }
.pk-jcard-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pk-jcard-excerpt {
  margin: 0;
  color: var(--pk-slate);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pk-jcard-meta {
  margin: auto 0 0;
  color: var(--pk-slate);
  font-size: 12.5px;
}

/* 手机宽度：图在上、字在下 */
@media (max-width: 767px) {
  .pk-jcard {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
  }
  .pk-jcard-body { gap: 8px; }
  .pk-jcard-meta { margin-top: 4px; }
}

/* ---------- 29x 修正：窄屏三处真实溢出 ---------- */
/* 1) 宽表：原生内容里的 .comparison-table 自带 min-width:650px，
      套一层横滚容器（page.php 里加的），表格自己滚，页面不再往外顶。 */
.pk-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2) split-heading 的网格项默认为 min-width:auto，遇到德语复合词（VERPACKUNGS-BESCHAFFUNG）
      会把整列撑到 min-content 宽度；放开收缩并允许长词断行。 */
.split-heading,
.split-heading > * { min-width: 0; }
.split-heading .eyebrow,
.split-heading h1,
.split-heading .lead { overflow-wrap: anywhere; }

/* 3) 非原生页面走 .pk-wrap > article.article（父主题给的是 800px 居中阅读栏），
      居中会让正文左边缘和页头 logo 差 190px；改成与栅格同一左边缘。 */
.pk-wrap > article.article {
  max-width: 800px;
  margin-left: 0;
  margin-right: auto;
}
/* 4) 宽表所在的 .page-scroll 自身不裁剪，会把 documentElement.scrollWidth 顶到 533
      （实测：只在 .pk-page-body 上 clip 才能收回 375，且表格容器内部照旧可横滚 327/650）。
      只在窄屏生效，避免影响通栏白名单里的 100vw 区块。 */
@media (max-width: 767px) {
  .pk-page-body,
  .pk-wrap { overflow-x: clip; }
}