/* Price comparison layout, using the same typography as the catalog. */
.pc{
  --ink:#1D1F24;
  --ink-2:#4A4F57;
  --muted:#666B73;
  --line:#E3E3E6;
  --panel:#F4F4F5;
  --brand:#E9452D;
  --brand-hover:#CF3720;
  --brand-ink:#B8321F;
  --best:#157A3E;
  --best-hover:#0F6330;
  --best-bg:#DDF2E4;
  --best-ink:#0E5A2C;
  --ok:#0B6B3A;  --ok-bg:#E1F4E8;
  --out:#A12B1F; --out-bg:#FCE7E4;
  --verified:#1877F2;
  --focus:var(--ink);
  --f-display:'DM Sans',system-ui,sans-serif;
  --f-ui:'DM Sans',system-ui,sans-serif;

  container:pc / inline-size;
  font-family:var(--f-ui);
  color:var(--ink);
  line-height:1.35;
}
.pc,.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
.pc [hidden]{display:none!important}
.pc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.pc .pc__panel{background:var(--panel);border-radius:24px;padding:24px}
.pc .pc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;margin-bottom:18px}
.pc .pc__title{margin:0;font:700 1.375rem/1.15 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.pc .pc__sum{margin:6px 0 0;font-size:.875rem;color:var(--muted)}
.pc .pc__tools{display:flex;align-items:center;gap:12px;flex:none}
.pc .pc__count{font-size:.8125rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:999px;white-space:nowrap}
.pc .pc__nav{display:flex;gap:8px}
.pc .navbtn{width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.pc .navbtn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.pc .navbtn:disabled{opacity:.3;cursor:default}
.pc .navbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pc :is(.navbtn,.cta,.more):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pc .pc__rail{
  --gap:14px; --nq:1; --n:min(var(--nq),var(--count,3));
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px;margin:-4px;scroll-padding-inline:4px;
  scrollbar-width:none;
}
.pc .pc__rail::-webkit-scrollbar{display:none}
@container pc (min-width:700px){.pc .pc__rail{--nq:2.5}}
@container pc (min-width:900px){.pc .pc__rail{--nq:3.25}}
@container pc (min-width:1080px){.pc .pc__rail{--nq:4.15}}
@container pc (min-width:1400px){.pc .pc__rail{--nq:5.15}}
.pc .offer{
  container:offer / inline-size;
  --strip:#EDEDEF; --strip-line:#C4C4C9;
  position:relative;display:flex;min-width:0;
  background:#fff;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;
  scroll-snap-align:start;
}
.pc .offer[data-best]{--strip:var(--best-bg);--strip-line:rgba(21,122,62,.45)}
.pc .offer[data-state="out"]{--strip:repeating-linear-gradient(135deg,#F3F3F4 0 7px,#E9E9EB 7px 14px)}
.pc .offer__in{flex:1;min-width:0;display:flex;flex-direction:column}
.pc .who{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"logo name" "logo meta";column-gap:10px;row-gap:4px;align-items:center;padding:16px 14px}
.pc .logo{grid-area:logo;width:64px;height:52px;padding:0;border-radius:11px;display:grid;place-items:center;overflow:hidden;
  font:800 .9375rem/1 var(--f-display);letter-spacing:-.01em;color:var(--ink);
  background:#EFEFF1;border:1px solid var(--line)}
.pc .logo img{width:100%;height:100%;object-fit:contain;padding:2px;background:#fff}
.pc .name-row{grid-area:name;display:flex;align-items:center;gap:6px;min-width:0}
.pc .name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .9375rem/1.25 var(--f-display);letter-spacing:-.01em}
.pc .check{flex:none;width:18px;height:18px}
.pc .meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.pc .chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap}
.pc .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pc .chip--ok{color:var(--ok);background:var(--ok-bg)}
.pc .chip--out{color:var(--out);background:var(--out-bg)}
.pc .age{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:var(--muted);white-space:nowrap}
.pc .age svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pc .age--stale{color:var(--brand-ink)}
.pc .buy{margin-top:auto;display:grid;gap:14px;padding:14px 14px 16px;background:var(--strip);border-top:1.5px dashed var(--strip-line)}
.pc .sum{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pc .price{display:inline-flex;align-items:flex-start;white-space:nowrap;line-height:1;
  font-family:var(--f-display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,15.5cqi,3.4rem);letter-spacing:-.035em;color:var(--ink)}
.pc .price .cur,.pc .price .dec{font-size:.4em;font-weight:700;letter-spacing:0;margin-top:.3em}
.pc .price .cur{margin-right:.12em}
.pc .price .dec{margin-left:.1em}
.pc .offer[data-best] .price{color:var(--best-ink)}
.pc .offer[data-state="out"] .price{color:#8A8E96}

.pc .delta{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.pc .delta b{font-weight:700;color:var(--ink)}
.pc .delta--best{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;background:var(--best);color:#fff;font-weight:700}
.pc .delta--best svg{width:15px;height:15px;flex:none}
.pc .delta--ref{color:var(--muted)}

.pc .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:start;width:fit-content;max-width:100%;min-height:44px;padding:0 20px;border-radius:12px;
  background:var(--brand);color:#fff;text-decoration:none;font:600 .9375rem/1 var(--f-ui);white-space:nowrap;transition:background .15s}
.pc .cta:hover{background:var(--brand-hover);color:#fff}
.pc .cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.pc .cta:hover svg{transform:translate(2px,-2px)}
.pc .offer[data-best] .cta{background:var(--best)}
.pc .offer[data-best] .cta:hover{background:var(--best-hover)}
.pc .offer[data-state="out"] .cta{background:transparent;color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px var(--brand)}
.pc .offer[data-state="out"] .cta:hover{background:var(--brand);color:#fff}
@container offer (max-width:240px){
  .pc .who{padding:14px 12px;column-gap:10px}
  .pc .buy{padding:12px 12px 14px}
}
.pc .more{display:none;width:100%;margin-top:10px;min-height:46px;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:600 .9375rem/1 var(--f-ui);cursor:pointer}
.pc .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pc .more[aria-expanded="true"] svg{transform:rotate(180deg)}
@container pc (max-width:699px){
  .pc .pc__panel{padding:14px;border-radius:20px}
  .pc .pc__title{font-size:1.0625rem}
  .pc .pc__count{padding:4px 10px;font-size:.75rem}
  .pc .pc__nav{display:none}
  .pc .who{grid-template-columns:64px minmax(0,1fr)}
  .pc .logo{width:64px;height:52px;padding:0;border-radius:12px}
  .pc .logo img{padding:2px}
  .pc .cta{width:44px;min-width:44px;max-width:44px;min-height:44px;padding:0;justify-self:end}
  .pc .cta svg{width:20px;height:20px}
  .pc .cta__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pc .offer[data-lead] .buy{grid-template-columns:minmax(0,1fr) 44px;align-items:center}

  .pc .pc__rail{display:flex;flex-direction:column;gap:10px;overflow:visible;scroll-snap-type:none;padding:0;margin:0}
  .pc .more{display:flex}
  .pc .pc__panel[data-collapsed="true"] .offer:nth-child(n+5){display:none}
  .pc .offer:not([data-lead]){border-radius:16px}
  .pc .offer:not([data-lead]) .offer__in{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"logo name name" "logo meta price" "logo meta action" "logo meta delta";column-gap:10px;row-gap:5px;align-items:center;padding:12px 14px}
  .pc .offer:not([data-lead]) :is(.who,.buy,.sum){display:contents}
  .pc .offer:not([data-lead]) .logo{width:64px;height:52px;border-radius:12px}
  .pc .offer:not([data-lead]) .price{grid-area:price;justify-self:end;font-size:1.375rem;font-weight:700;letter-spacing:-.025em}
  .pc .offer:not([data-lead]) .delta{grid-area:delta;justify-self:end;white-space:nowrap}
  .pc .offer:not([data-lead]) .delta__t{display:none}
  .pc .offer:not([data-lead]) .delta--ref{display:none}
  .pc .offer:not([data-lead]) .delta--best{padding:2px 8px;font-size:.6875rem}
  .pc .offer:not([data-lead]) .delta--best svg{display:none}
  .pc .offer:not([data-lead]):active{background:#F7F9FB}
  .pc .offer:not([data-lead]) .cta{position:relative;inset:auto;grid-area:action;z-index:2;width:44px;max-width:44px;min-height:44px;padding:0;border-radius:12px}
  .pc .offer:not([data-lead]) .cta svg{display:block}
}

@media (prefers-reduced-motion:reduce){.pc *{transition:none!important}}

/* Keep stock and large prices on separate rows on narrow phones. */
@container pc (max-width:360px){
  .pc .offer:not([data-lead]) .offer__in{grid-template-columns:64px minmax(0,1fr) 44px;grid-template-areas:"logo name name" "logo price price" "logo meta action" "logo delta action"}
  .pc .offer:not([data-lead]) :is(.price,.delta){justify-self:start}
}

/* Preserve the store identity/analytics hooks without inheriting the old layout. */
.pc.sec-card{background:transparent;border:0;border-radius:0;overflow:visible;padding:0}
.pc .offer{padding:0;gap:0;min-height:0}
.pc .buy{grid-template-columns:minmax(0,1fr)}
.pc .cta{grid-column:auto;grid-row:auto}
.pc .comparison-store{display:contents}
.pc .meta{flex-direction:row}
.pc .comparison-store-initials{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:inherit;color:inherit}
.pc .logo{min-width:0;flex:none}
.pc .logo img{display:block;max-width:none;max-height:none}
.pc .logo:has(img){background:#fff}
.pc .name-row .store-verified{display:inline-flex;flex:none;width:18px;height:18px;margin:0;color:var(--verified)}
.pc .name-row .store-verified svg{width:18px;height:18px}
.pc .comparison-store-link{display:block;position:relative;z-index:3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none}
.pc .comparison-store-link:hover{text-decoration:underline}
.pc .comparison-store-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pc .cta:disabled{cursor:not-allowed;opacity:.55}