/* ==========================================================================
   30-pdp.css — Lane C: product-page "Compare related models" strip
   --------------------------------------------------------------------------
   erdicn places its same-series compare row directly under the price and
   downloads block, before the sticky section tabs. Ours was previously only
   at the page foot ("Related modules"); this adds the same slim, scrollable
   strip up top and leaves the foot section to cover different models (see
   the dedupe in single-product.php) so nothing repeats twice on one page.

   Scope: .pdpcompare* only. No shared/base selectors are touched here.
   Reduced motion: no new @keyframes and no motion not already neutralised
   by the global `*{animation:none!important;transition:none!important}`
   rule in main.css — this file only defines transform/color transitions,
   which that rule already disables.
   ========================================================================== */

.pdpcompare{
  background:var(--tint);
  border-block:1px solid var(--line);
}

.pdpcompare__kicker{margin-bottom:6px}

.pdpcompare__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 32px;margin-bottom:20px;
}
.pdpcompare__title{
  font-family:var(--ff-display);font-weight:800;
  font-size:clamp(1.15rem,1.6vw,1.5rem);text-transform:uppercase;letter-spacing:-.01em;
  margin:0;
}
.pdpcompare__lead{
  max-width:54ch;font-size:.92rem;color:var(--ink-70);line-height:1.55;margin:0;
}

/* Horizontal, snap-scrolling row of sibling models — native scroll on
   touch/trackpad, no JS required, keyboard-tabbable in DOM order. */
.pdpcompare__row{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  list-style:none;margin:0;padding:2px 2px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pdpcompare__row::-webkit-scrollbar{display:none}

.pdpcompare__item{
  flex:0 0 auto;width:172px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;box-shadow:var(--bevel);
}

.pdpcompare__link{
  display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;
}
.pdpcompare__link img{
  width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);
}
.pdpcompare__top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.pdpcompare__name{
  font-family:var(--ff-display);font-weight:800;font-size:.86rem;
  letter-spacing:-.005em;line-height:1.3;
}
.pdpcompare__top .arw{transition:transform var(--t-fast) var(--ease)}
.pdpcompare__link:hover .arw,
.pdpcompare__link:focus-visible .arw{transform:translateX(3px)}
.pdpcompare__range{font-size:.7rem;color:var(--ink-45)}

.pdpcompare__cta{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ir);text-decoration:none;
  padding-top:8px;margin-top:2px;border-top:1px solid var(--line);
}
.pdpcompare__cta:hover,
.pdpcompare__cta:focus-visible{color:var(--ir-deep)}

@media (max-width:760px){
  .pdpcompare__head{flex-direction:column;align-items:flex-start;gap:8px}
  .pdpcompare__item{width:150px}
}

@media (max-width:360px){
  .pdpcompare__item{width:136px}
}