/* Fyndvakt product card (from cards/B-airbnb, shop option a). Page tokens come from site.css. */
:root {
  --hair: rgba(22, 24, 28, .08);
  /* card scale (1440 / 1024 / 800) */
  --pc-r: 14px;          /* photo radius: Airbnb's 20 px on a 307 px card, scaled to a 208 px card */
  --pc-name: 14.5px; --pc-lh: 19px; --pc-sub: 14px; --pc-price: 16px;
}

/* ---------- grids ---------- */
.pcs { list-style: none; margin: 0; padding: 0; display: grid; }
.pcs--grid .pc[hidden] { display: none; }
.pcs--grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 20px; }
.pcs--shelf { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1099px) { .pcs--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  [data-cols="3"] .pcs--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
  [data-cols="3"] .pcs--grid .pc { --pc-r: 18px; --pc-name: 16px; --pc-lh: 21px; --pc-sub: 15px; --pc-price: 18px; }
  [data-cols="3"] .pcs--grid .pc__name { margin-top: 12px; }
  [data-cols="3"] .pcs--grid .pc__badge { top: 14px; left: 14px; font-size: 13.5px; padding: 5px 11px 6px; }
}
@media (max-width: 899px) { .pcs--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) {
  .pcs--shelf { display: flex; gap: 16px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .pcs--shelf::-webkit-scrollbar { display: none; }
  .pcs--shelf .pc { flex: 0 0 140px; scroll-snap-align: start; }
}
@media (max-width: 639px) {
  :root { --pc-r: 12px; --pc-name: 14px; --pc-lh: 18px; --pc-sub: 13.5px; --pc-price: 15.5px; }
  .pcs--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .pcs--shelf .pc { flex-basis: 128px; }
}

/* ---------- the card ---------- */
.pc { min-width: 0; }
/* the Strata text tone paints a whole list item in one ink; let colour that means something (green, warning, blue) through */
.pc, .pc * { -webkit-text-fill-color: currentcolor; }
.pc__in { position: relative; display: flex; flex-direction: column; height: 100%; container-type: inline-size; }

/* photo: white square, Airbnb radius, hairline instead of a shadow */
.pc__ph { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--pc-r); background: var(--paper); }
@supports (corner-shape: squircle) { .pc__ph { border-radius: calc(var(--pc-r) * 1.7); corner-shape: squircle; } }
.pc__ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit;
  box-shadow: inset 0 0 0 1px var(--hair); pointer-events: none; transition: box-shadow .2s; }
.pc__ph img { width: calc(var(--s, .8) * 100%); height: calc(var(--s, .8) * 100%); max-width: none; object-fit: contain;
  transform: translate(var(--tx, 0), var(--ty, 0)); }
.pc--out .pc__ph img { opacity: .45; filter: grayscale(.4); }

/* the one photo pill (Airbnb's "Guest favourite") */
.pc__badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px 5px; border-radius: 999px;
  background: var(--paper); font: 500 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(22, 24, 28, .07), 0 2px 8px -2px rgba(22, 24, 28, .16); }
.pc__badge--mute { color: var(--ink-2); background: #efeee9; box-shadow: none; }

/* bevaka pris: Airbnb's heart slot, our bell */
.pc__watch { position: absolute; top: 4px; right: 4px; z-index: 2; width: 36px; height: 36px; padding: 0; display: grid;
  place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc__watch svg { width: 21px; height: 21px; fill: rgba(255, 255, 255, .9); stroke: var(--ink-2); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), fill .15s, stroke .15s; }
.pc__watch svg .clap { fill: none; }
.pc__watch:hover svg { transform: scale(1.08); stroke: var(--ink); }
.pc__watch:active svg { transform: scale(.88); }
.pc__watch[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
.pc__watch[aria-pressed="true"] svg .clap { fill: none; }
.pc__watch.pop svg { animation: ring .45s ease-out; }
@keyframes ring { 0% { transform: rotate(0) scale(.9); } 30% { transform: rotate(14deg) scale(1.12); } 60% { transform: rotate(-9deg); } 100% { transform: rotate(0) scale(1); } }
.pc__watch:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* line 1: name, rating floated right on the first line */
.pc__name { margin: 10px 0 0; font: 500 var(--pc-name)/var(--pc-lh) var(--sans);
  letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pc__link { color: var(--ink); text-decoration: none; }
.nw { white-space: nowrap; }
.pc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pc-r); }
.pc__link:focus-visible { outline: none; }
.pc__link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 5px; }
.pc__rt { float: right; display: inline-flex; align-items: baseline; gap: 3px; margin-left: 8px;
  font-size: calc(var(--pc-name) - 1px); font-weight: 400; color: var(--ink); letter-spacing: 0; }
.pc__star { width: .78em; height: .78em; fill: currentColor; align-self: center; transform: translateY(-.04em); }
.pc__rc { color: var(--ink-3); margin-left: 1px; }

/* line 2: owner rows, or spec bits, or the category; on hover it says which shop the price is from */
.pc__mid { position: relative; min-height: var(--pc-lh); margin-top: 1px; }
.pc__mid1 { transition: opacity .18s ease; }
.pc__l2 { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 var(--pc-sub)/var(--pc-lh) var(--sans); color: var(--ink-3); transition: opacity .18s ease; }
/* owner like / dislike rows: thumb, aspect word, short bar, percentage */
.pc__own { display: flex; flex-direction: column; }
.own { display: flex; align-items: center; gap: 6px; height: var(--pc-lh); min-width: 0; max-width: 232px;
  font: 400 calc(var(--pc-sub) - .5px)/var(--pc-lh) var(--sans); color: var(--ink-2); }
.own__th { flex: none; width: 13px; height: 13px; fill: var(--good); transform: translateY(-.5px); }
.own--neg .own__th { fill: var(--warn); transform: scaleY(-1) translateY(-1px); }
.own__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own__b { flex: none; width: 28px; height: 4px; margin-left: auto; border-radius: 2px;
  background: linear-gradient(to right, var(--good) 0 calc(var(--v) * 100%), rgba(22, 24, 28, .1) 0); }
.own--neg .own__b { background: linear-gradient(to right, var(--warn) 0 calc(var(--v) * 100%), rgba(22, 24, 28, .1) 0); }
.own__v { flex: none; min-width: 36px; text-align: right; font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--good); }
.own--neg .own__v { color: var(--warn); }
.pc__hov { position: absolute; top: 0; left: 0; right: 0; opacity: 0; color: var(--ink-2); }
.pc__hov b { font-weight: 500; color: var(--ink); }
@media (hover: hover) {
  .pc__in:hover .pc__mid1, .pc__in:has(:focus-visible) .pc__mid1 { opacity: 0; }
  .pc__in:hover .pc__hov, .pc__in:has(:focus-visible) .pc__hov { opacity: 1; }
  .pc__in:hover .pc__ph::after { box-shadow: inset 0 0 0 1px rgba(22, 24, 28, .16); }
}

/* foot: price, then the shop dots under it; pinned to the bottom so prices align across a row */
.pc__foot { margin-top: auto; padding-top: 7px; }
.pc__pl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc__p { font: 600 var(--pc-price)/22px var(--sans); letter-spacing: -0.015em; white-space: nowrap; }
.pc--out .pc__p { color: var(--ink-3); font-weight: 500; }

/* shop indicator: one dot per shop, cheapest first; blue = the printed price's shop, ring = out of stock */
.sh { display: flex; align-items: center; gap: 7px; height: 18px; margin-top: 1px; min-width: 0; }
.sh__dots { display: flex; align-items: center; gap: 3px; flex: none; }
.dt { width: 6px; height: 6px; border-radius: 50%; background: #c9cac6; }
.dt--best { background: var(--accent); }
.dt--out { background: none; box-shadow: inset 0 0 0 1.25px #b3b4b0; }
.sh__t { font: 400 13px/18px var(--sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* press: Airbnb-calm */
.pc__in:active .pc__ph { transform: scale(.985); transition: transform .1s; }

/* ---------- light variant (first-screen shelf) ---------- */
.pc--light { --pc-name: 13.5px; --pc-lh: 18px; --pc-price: 15px; }
@media (max-width: 639px) { .pc__rc { display: none; } .own__b { display: none; } .own { gap: 5px; } .own__v { min-width: 31px; } .pc__badge { top: 8px; left: 8px; padding: 3px 8px 4px; font-size: 12px; } .pc__watch { top: 2px; right: 2px; } .pc__name { -webkit-line-clamp: 3; } }

@media (prefers-reduced-motion: reduce) {
  .pc__watch svg, .pc__l2, .pc__ph::after { transition: none; }
  .pc__watch.pop svg { animation: none; }
  .pc__in:active .pc__ph { transform: none; }
}

/* a product with no photo: a calm tile instead of a broken image */
.pc__ph--none::before { content: ""; width: 34%; aspect-ratio: 1; border-radius: 22%; background: var(--line); }
.sh__more { font: 500 11px/6px var(--sans); color: var(--ink-3); margin-left: 2px; }