/* ==========================================================================
   PARSANA — Content Art & Visual Fills
   CSS-based branded visuals for empty image containers.
   Shared across store, shop, product pages.
   ========================================================================== */

/* ── Pressure-plate dot grid ─────────────────
   Simulates the 638-node surface pattern.
   Apply .plate-art inside any image container.
   ========================================================================== */
.plate-art {
  position: absolute; inset: 0;
  pointer-events: none;
}
.plate-art::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-color, rgba(232,78,27,0.55)) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: center;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
/* Variants */
.plate-art.orange  { --dot-color: rgba(232,78,27,0.45); }
.plate-art.teal    { --dot-color: rgba(27,166,178,0.45); }
.plate-art.white   { --dot-color: rgba(255,255,255,0.25); }
.plate-art.dark    { --dot-color: rgba(11,11,11,0.14); }
.plate-art.sky     { --dot-color: rgba(27,166,178,0.55); }

/* Fine grain: tighter grid for detail shots */
.plate-art.fine::before { background-size: 9px 9px; }

/* ── Radial ambient overlay ──────────────────── */
.plate-art::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 55% at 50% 60%, var(--glow-color, rgba(232,78,27,0.22)), transparent 70%);
}
.plate-art.orange::after { --glow-color: rgba(232,78,27,0.22); }
.plate-art.teal::after   { --glow-color: rgba(27,166,178,0.22); }
.plate-art.sky::after    { --glow-color: rgba(27,166,178,0.30); }
.plate-art.dark::after   { --glow-color: rgba(232,78,27,0.08); }

/* ── Node counter chip ───────────────────────── */
.node-chip {
  position: absolute; bottom: 16px; left: 16px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(11,11,11,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--f-mono, monospace); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.node-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-orange, #E84E1B);
  box-shadow: 0 0 8px var(--c-orange, #E84E1B);
}
/* on light bg */
.node-chip.light {
  background: rgba(255,255,255,0.75);
  border-color: rgba(11,11,11,0.10);
  color: rgba(11,11,11,0.65);
}
.node-chip.teal .dot { background: var(--c-teal-soft, #2BD0DE); box-shadow: 0 0 8px var(--c-teal-soft, #2BD0DE); }

/* ── Product silhouette placeholder ─────────── */
.prod-silhouette {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.prod-silhouette .plate-shape {
  width: clamp(80px, 40%, 160px);
  aspect-ratio: 1.6 / 1;
  border-radius: 18px;
  border: 1.5px solid var(--c-orange, #E84E1B);
  background: rgba(232,78,27,0.07);
  position: relative;
  overflow: hidden;
}
.prod-silhouette .plate-shape::before {
  content: "";
  position: absolute; inset: 6px;
  background-image: radial-gradient(circle, rgba(232,78,27,0.6) 1px, transparent 1px);
  background-size: 8px 8px;
  border-radius: 12px;
}
.prod-silhouette .plate-label {
  font-family: var(--f-mono, monospace); font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(11,11,11,0.25);
}
/* dark bg variant */
.prod-silhouette.on-dark .plate-label { color: rgba(255,255,255,0.25); }
.prod-silhouette.on-dark .plate-shape {
  border-color: rgba(232,78,27,0.5);
  background: rgba(232,78,27,0.05);
}

/* ── Category accent color map ───────────────── */
[data-cat="body-pain"]  .plate-art { --dot-color: rgba(232,78,27,0.45); --glow-color: rgba(232,78,27,0.20); }
[data-cat="sciatica"]   .plate-art { --dot-color: rgba(27,166,178,0.45);  --glow-color: rgba(27,166,178,0.20); }
[data-cat="sleep"]      .plate-art { --dot-color: rgba(232,78,27,0.38);  --glow-color: rgba(232,78,27,0.16); }
[data-cat="digestion"]  .plate-art { --dot-color: rgba(27,166,178,0.45);  --glow-color: rgba(27,166,178,0.18); }
[data-cat="stress"]     .plate-art { --dot-color: rgba(11,11,11,0.18);    --glow-color: rgba(27,166,178,0.12); }
[data-cat="bundles"]    .plate-art { --dot-color: rgba(232,78,27,0.50);  --glow-color: rgba(232,78,27,0.25); }

/* ── Press / media logo pill ─────────────────── */
.press-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 24px; height: 52px;
  border: 1px solid var(--c-i12, rgba(11,11,11,0.12));
  border-radius: 999px;
  font-family: var(--f-display, sans-serif);
  font-size: clamp(13px, 1.2vw, 16px); font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-i40, rgba(11,11,11,0.4));
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.press-pill:hover { color: var(--c-ink); border-color: var(--c-i20, rgba(11,11,11,0.2)); }

/* ── Comparison table ────────────────────────── */
.compare-table {
  width: 100%; border-collapse: collapse;
  font-size: 15px;
}
.compare-table thead tr th {
  padding: 16px 24px;
  text-align: left; font-weight: 600;
  font-family: var(--f-display, sans-serif);
  font-size: 17px; letter-spacing: -0.01em;
  border-bottom: 2px solid var(--c-i12, rgba(11,11,11,0.12));
}
.compare-table thead .col-parsana {
  color: var(--c-white); background: var(--c-orange, #E84E1B);
  border-radius: 12px 12px 0 0;
}
.compare-table thead .col-other { color: var(--c-i40, rgba(11,11,11,0.4)); }
.compare-table tbody tr td {
  padding: 15px 24px;
  border-bottom: 1px solid var(--c-i08, rgba(11,11,11,0.08));
  vertical-align: middle;
  line-height: 1.4;
}
.compare-table tbody tr td:first-child {
  font-weight: 500; color: var(--c-ink);
  font-size: 14px; color: var(--c-i60, rgba(11,11,11,0.6));
}
.compare-table .col-parsana { background: rgba(232,78,27,0.04); }
.compare-table .check { color: var(--c-orange, #E84E1B); font-size: 17px; }
.compare-table .cross { color: rgba(11,11,11,0.25); font-size: 17px; }
.compare-table .partial { color: var(--c-i40, rgba(11,11,11,0.4)); font-size: 13.5px; }

/* ── "What's in the box" card ────────────────── */
.box-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  border: 1px solid var(--c-i08, rgba(11,11,11,0.08));
  border-radius: 16px;
  transition: border-color .3s, transform .5s;
  background: var(--c-white);
}
.box-item:hover { border-color: var(--c-i12, rgba(11,11,11,0.12)); transform: translateY(-3px); }
.box-item .icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(232,78,27,0.10);
  display: flex; align-items: center; justify-content: center;
}
.box-item .icon svg { width: 22px; height: 22px; color: var(--c-orange, #E84E1B); }
.box-item h4 {
  font-family: var(--f-display, sans-serif);
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0;
}
.box-item p { font-size: 13.5px; color: var(--c-i60, rgba(11,11,11,0.6)); line-height: 1.55; margin: 0; }

/* ── Why Parsana data strip ──────────────────── */
.why-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-i08, rgba(11,11,11,0.08));
  border-bottom: 1px solid var(--c-i08, rgba(11,11,11,0.08));
}
.why-item {
  padding: 32px 24px;
  border-right: 1px solid var(--c-i08, rgba(11,11,11,0.08));
  display: flex; flex-direction: column; gap: 10px;
}
.why-item:last-child { border-right: 0; }
.why-item .wi-icon { color: var(--c-orange, #E84E1B); display: flex; }
.wi-icon svg { width: 24px; height: 24px; }
.why-item h4 { font-family: var(--f-display, sans-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.why-item p { font-size: 14px; color: var(--c-i60, rgba(11,11,11,0.6)); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .why-strip { grid-template-columns: 1fr 1fr; }
  .why-item:nth-child(2) { border-right: 0; }
  .why-item { border-bottom: 1px solid var(--c-i08); }
}
@media (max-width: 560px) {
  .why-strip { grid-template-columns: 1fr; }
  .why-item { border-right: 0; }
}