:root{
  /* Layout */
  --cpl-cols:3;
  --cpl-gap:24px;--cpl-gap-md:20px;--cpl-gap-sm:16px;
  --cpl-card-bg:transparent;--cpl-thumb-max:300px;

  /* Stars */
  --cpl-star-size:16px;--cpl-star-gap:4px;
  --cpl-star-color:#f5a623;--cpl-star-empty-color:#ccc;

  /* Focus */
  --cpl-focus-ring:2px;--cpl-focus-color:Highlight;--cpl-focus-fallback:#1a73e8;

  /* Motion */
  --cpl-trans:.35s ease;
}

/* Grid */
.cpl-grid{
  display:grid;
  grid-template-columns:repeat(var(--cpl-cols,3),minmax(0,1fr));
  gap:var(--cpl-gap,24px);
  contain:layout paint style;
}
@media (max-width:1024px){.cpl-grid{gap:var(--cpl-gap-md,20px)}}
@media (max-width:767px){ .cpl-grid{gap:var(--cpl-gap-sm,16px)}}

/* Card */
.cpl-item{
  position:relative;background:var(--cpl-card-bg,transparent);
  transition:box-shadow .25s ease,transform .25s ease;
  content-visibility:auto;contain-intrinsic-size:400px 520px;
}

/* Media */
.cpl-image{
  position:relative;overflow:hidden;display:grid;aspect-ratio:1/1;
}
.cpl-image img{
  display:block;width:100%;height:300px;object-fit:cover;max-width:none;
  transition:transform var(--cpl-trans),opacity var(--cpl-trans);
  will-change:opacity,transform;
}
.cpl-image > a{display:block;height:300px}
.cpl-image .cpl-img-wrap{display:block;height:300px}

/* Title / price */
.cpl-title{margin:.75rem 0 .25rem;line-height:1.3}
.cpl-title a{text-decoration:none;outline:0}

/* Actions */
.cpl-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:.5rem}
.cpl-actions .button{
  display:inline-block;line-height:1;text-decoration:none;white-space:normal;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;box-sizing:border-box;
}

/* Secondary image swap */
.cpl-image.has-secondary .cpl-img-primary{transition:opacity var(--cpl-trans)}
.cpl-image .cpl-img-secondary{
  position:absolute;inset:0;opacity:0;display:grid;place-items:center;width:100%;height:300px;object-fit:cover;
  transition:opacity var(--cpl-trans),transform var(--cpl-trans);
}
.cpl-item:hover .cpl-image.has-secondary .cpl-img-primary{opacity:0}
.cpl-item:hover .cpl-image .cpl-img-secondary{opacity:1}

/* Rating */
.cpl-rating{margin:.25rem 0;--_size:var(--cpl-star-size,16px);--_gap:var(--cpl-star-gap,4px)}
.cpl-rating .cpl-stars{display:inline-flex;align-items:center;gap:var(--_gap)}
.cpl-rating .cpl-star{position:relative;width:var(--_size);height:var(--_size);display:inline-block}
.cpl-rating .cpl-star-layer{position:absolute;inset:0;display:grid;place-items:center;line-height:1}
.cpl-rating .cpl-star-empty{color:var(--cpl-star-empty-color)}
.cpl-rating .cpl-star-fill{color:var(--cpl-star-color);overflow:hidden}
.cpl-rating .cpl-star-half{width:50%;overflow:hidden}
.cpl-rating .cpl-star-svg{width:100%;height:100%;display:inline-block}
.cpl-rating .cpl-star-svg path{fill:currentColor}

/* Accessible focus */
:where(.cpl-title a,.cpl-actions .button,.cpl-image a):focus-visible{
  outline:var(--cpl-focus-ring) solid var(--cpl-focus-color,Highlight);
  outline-offset:2px;border-radius:.25rem;
  box-shadow:0 0 0 var(--cpl-focus-ring) color-mix(in srgb,var(--cpl-focus-fallback,#1a73e8) 40%,transparent);
}

/* Color inheritance for dark-mode friendliness */
:where(.cpl-item,.cpl-actions .button,.cpl-title a,.cpl-price){color:inherit}
.cpl-price{font-weight:600}