/* Ki — Packaging widget. Source: Ki Sustainability.html lines 192–206, 703–727.
   All selectors scoped under .ki-scope .ki-packaging. */

.ki-scope .ki-packaging { background: #fff; }

.ki-scope .ki-packaging .pack {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center;
}

.ki-scope .ki-packaging .pack-img {
  aspect-ratio: 4 / 5; background: var(--ki-cream); border: 1px solid var(--ki-rule);
  position: relative; overflow: hidden;
}
.ki-scope .ki-packaging .pack-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.ki-scope .ki-packaging .ph-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, #E6E0D0 14px 15px);
  opacity: 0.55;
}
.ki-scope .ki-packaging .ph-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 0 24px;
  font-family: var(--ki-num); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ki-ink-mute);
}

/* eyebrow-rule */
.ki-scope .ki-packaging .pack-info .eyebrow-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ki-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ki-blue-deep); margin-bottom: 22px;
}
.ki-scope .ki-packaging .pack-info .eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--ki-rule);
}

.ki-scope .ki-packaging .pack-info h2 {
  font-family: var(--ki-serif); font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.08; margin: 0 0 22px;
}
.ki-scope .ki-packaging .pack-info .lede {
  font-family: var(--ki-sans); font-size: 16px; color: var(--ki-ink-mute);
  line-height: 1.7; margin: 0 0 32px; max-width: 52ch;
}

.ki-scope .ki-packaging .pack-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--ki-rule);
}
.ki-scope .ki-packaging .pack-specs .it {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--ki-rule);
}
.ki-scope .ki-packaging .pack-specs .it:nth-child(odd) {
  border-right: 1px solid var(--ki-rule); padding-right: 24px;
}
.ki-scope .ki-packaging .pack-specs .it:nth-child(even) { padding-left: 24px; }
.ki-scope .ki-packaging .pack-specs .chk {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--ki-blue); color: var(--ki-blue);
  display: grid; place-items: center;
}
.ki-scope .ki-packaging .pack-specs .chk svg { width: 11px; height: 11px; }
.ki-scope .ki-packaging .pack-specs .txt {
  font-family: var(--ki-sans); font-size: 14.5px; color: var(--ki-ink); line-height: 1.35;
}

@media (max-width: 1100px) {
  .ki-scope .ki-packaging .pack { grid-template-columns: 1fr; gap: 48px; }
  .ki-scope .ki-packaging .pack-specs { grid-template-columns: 1fr; }
  .ki-scope .ki-packaging .pack-specs .it:nth-child(odd) { border-right: none; padding-right: 0; }
  .ki-scope .ki-packaging .pack-specs .it:nth-child(even) { padding-left: 0; }
}