@layer theme,base;@layer components{.pcard{isolation:isolate;position:relative}.pcard-link{color:inherit;text-decoration:none}.pcard-link:after{content:"";z-index:0;position:absolute;inset:0}.pcard-link:focus-visible{outline:none}.pcard-link:focus-visible:after{outline:2px solid var(--color-ink);outline-offset:2px}.pcard-brand,.pcard-model{display:block}.pcard-brand{color:var(--color-muted)}.pcard-model{font-size:var(--text-h3);line-height:var(--text-h3--line-height);overflow-wrap:anywhere}.pcard-head{flex-direction:column;gap:.25rem;min-width:0;display:flex}.pcard-name{margin:0}.pcard-rating{color:var(--color-muted);font-size:var(--text-small);line-height:var(--text-small--line-height);font-variant-numeric:tabular-nums}.pcard-consensus{color:var(--color-muted);font-size:var(--text-small);line-height:var(--text-small--line-height);margin:0}.pcard-generation{color:var(--color-muted);font-size:var(--text-caption);margin:0;line-height:1.3}.pcard-media{aspect-ratio:1;border:var(--hairline) solid var(--color-line);border-radius:var(--radius-sm);background-color:var(--color-paper);grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;width:100%;display:grid;overflow:hidden}.pcard-media img{object-fit:contain;width:100%;height:100%;padding:.25rem}.pcard-media[data-empty]{color:var(--color-subtle)}.pcard-media[data-empty]>svg{width:36%;height:36%}.pcard-place-pill{border-radius:var(--radius-xs);background-color:var(--color-accent);color:var(--color-ink);font-size:var(--text-caption);align-self:flex-start;margin:0;padding:.125rem .5rem;font-weight:600;line-height:1.4}.pcard-uses{color:var(--color-ink);font-size:var(--text-small);font-weight:600;line-height:var(--text-small--line-height);margin:0}.pcard-uses-also{color:var(--color-muted);font-weight:400}.pcard-fit{font-size:var(--text-small);line-height:var(--text-small--line-height);margin:0}.pcard-fit-basis{color:var(--color-muted);font-size:var(--text-caption)}.pcard-attrs{flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;display:flex}.pcard-attr dt{color:var(--color-muted);font-size:var(--text-caption);line-height:1.3}.pcard-attr dd{font-size:var(--text-small);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.pcard-buy{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem 1rem;display:grid}.pcard-offer{flex-direction:column;gap:.25rem;min-width:0;display:flex}.pcard-price{font-size:var(--text-lead);font-variant-numeric:tabular-nums;margin:0;font-weight:700;line-height:1.2}.pcard-from,.pcard-price[data-empty]{color:var(--color-muted);font-size:var(--text-small);font-weight:500}.pcard-list-price{color:var(--color-muted);font-size:var(--text-small);font-variant-numeric:tabular-nums;margin:0;line-height:1.3}.pcard-stores{color:var(--color-muted);font-size:var(--text-small);flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0;display:flex}.pcard-buy .btn{z-index:1;position:relative}.pcard-buy .pcard-store{gap:.25em;max-width:100%}.pcard-store-name{text-overflow:ellipsis;min-width:0;overflow:hidden}.pcard-kicker{color:var(--color-muted)}.pcard-place{color:var(--color-muted);font-size:var(--text-caption);font-variant-numeric:tabular-nums;margin:0}.pcard[data-variant=row]{border-block-end:var(--hairline) solid var(--color-line);grid-template-columns:4.5rem minmax(0,1fr);column-gap:.75rem;padding-block:1rem;display:grid}.pcard[data-variant=row]:before{content:"";z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-wash);opacity:0;transition:opacity var(--duration-fast) var(--ease-out);position:absolute;inset:0 -.5rem}.pcard[data-variant=row] .pcard-media{grid-area:1/1}.pcard[data-variant=row] .pcard-head{grid-area:1/2}.pcard[data-variant=row] .pcard-attrs{grid-area:2/1/auto/-1;margin-block-start:.875rem}.pcard[data-variant=row] .pcard-buy{grid-area:3/1/auto/-1;margin-block-start:.875rem}@media (width<=47.99rem){.pcard-buy:has(.pcard-price[data-empty]){grid-template-columns:minmax(0,1fr);justify-items:start}}@media (width>=48rem){.pcard[data-variant=row]{grid-template-columns:6rem minmax(0,1fr) 13rem;column-gap:1.25rem}.pcard[data-variant=row] .pcard-media{grid-row:1/3}.pcard[data-variant=row] .pcard-attrs{grid-column:2;margin-block-start:.75rem}.pcard[data-variant=row] .pcard-head{grid-column:2}.pcard[data-variant=row] .pcard-buy{text-align:end;grid-area:1/3/3;grid-template-columns:minmax(0,1fr);align-self:start;margin-block-start:0}.pcard[data-variant=row] .pcard-offer{align-items:flex-end}.pcard[data-variant=row] .pcard-stores{justify-content:flex-end}}.pcard[data-variant=compact]{border-block-end:var(--hairline) solid var(--color-line);grid-template-columns:3.5rem minmax(0,1fr);align-items:start;column-gap:.75rem;padding-block:.75rem;display:grid}.pcard[data-variant=compact]:before{content:"";z-index:-1;border-radius:var(--radius-sm);background-color:var(--color-wash);opacity:0;transition:opacity var(--duration-fast) var(--ease-out);position:absolute;inset:0 -.5rem}.pcard[data-variant=compact] .pcard-model{font-size:var(--text-body);font-weight:600;line-height:1.25}.pcard[data-variant=compact] .pcard-head{gap:.125rem}.pcard[data-variant=tile]{border:1px solid var(--color-ink);border-radius:var(--radius-md);background-color:var(--color-paper);transition:background-color var(--duration-fast) var(--ease-out);grid-template-columns:5rem minmax(0,1fr);gap:.625rem .875rem;padding:.875rem;display:grid}.pcard[data-variant=tile] .pcard-media{grid-area:1/1}.pcard[data-variant=tile] .pcard-head{grid-area:1/2}.pcard[data-variant=tile] .pcard-buy{grid-area:2/1/auto/-1;align-self:end}.pcard[data-variant=tile] .pcard-buy:has(.pcard-store),.pcard[data-variant=tile] .pcard-buy:has(.pcard-price[data-empty]){grid-template-columns:minmax(0,1fr);justify-items:start}@media (width>=40rem){.pcard[data-variant=tile]{flex-direction:column;display:flex}.pcard[data-variant=tile] .pcard-media{aspect-ratio:auto;height:8rem}.pcard[data-variant=tile] .pcard-buy{align-self:stretch;margin-block-start:auto}}@media (hover:hover) and (pointer:fine){.pcard[data-variant=row]:hover:before,.pcard[data-variant=compact]:hover:before{opacity:1}.pcard[data-variant=tile]:hover{background-color:var(--color-wash)}.pcard:hover .pcard-link{text-underline-offset:.15em;text-decoration:underline 2px}}}@layer utilities;
