/* Deal card: Astra design, imported from toursteals-card.html. Site overrides at the bottom. */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.6rem;align-items:stretch}
.card-tile{--card-ink:#111;--card-muted:#646464;--card-line:#dedede;--card-sale:#b3261e;--card-green:#175b49;--card-yellow:#ffea3d;--card-cream:#fcf8ee;box-sizing:border-box;position:relative;min-width:0;display:flex;flex-direction:column;background:#fff;color:var(--card-ink);font-family:Roboto,Arial,sans-serif;border-radius:0;isolation:isolate}
.card-tile *{box-sizing:border-box}
.card-image{position:relative;display:grid;place-items:center;aspect-ratio:1;flex:0 0 auto;background:#fff;overflow:hidden}
.card-image img{display:block;width:88%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;transition:transform .22s ease}
.card-badges{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.card-status,.card-condition{font:700 .75rem/1.2 'Roboto Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:7px 9px;border:1px solid var(--card-ink);background:#fff;color:var(--card-ink)}
.card-status{border-color:var(--card-green);border-left:4px solid var(--card-yellow);color:var(--card-green)}
.card-condition{margin-left:auto}
.card-body{display:flex;flex:1;flex-direction:column;padding:16px 10px 12px}
.card-prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px;font-variant-numeric:tabular-nums}
.card-price{font:700 2rem/1 'Roboto Condensed','Arial Narrow',sans-serif;letter-spacing:-.035em}
.card-reference{color:var(--card-muted);font-size:.875rem;line-height:1.4;text-decoration-thickness:1px}
.card-discount{margin-left:auto;color:var(--card-sale);font:700 1.375rem/1 'Roboto Condensed','Arial Narrow',sans-serif;white-space:nowrap}
.card-unit{width:100%;color:var(--card-muted);font-size:.8125rem;line-height:1.5;margin-top:2px}
.card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.8em;margin:0 0 10px;font-size:1rem;font-weight:500;line-height:1.4;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.card-brand{font:400 .75rem/1.5 'Roboto Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--card-muted);overflow-wrap:anywhere}
.card-variant-row{min-height:34px;margin-top:12px;display:flex;align-items:center}
.card-variant{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:.75rem;line-height:1.4}
.card-variant-heading{font-weight:500}
.card-details,.card-popover-close{flex:none;font:500 .75rem/1.4 Roboto,Arial,sans-serif;color:#111;background:transparent;border:0;padding:8px 0;min-height:32px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.card-details{color:var(--card-green)}
.card-details:focus-visible,.card-popover-close:focus-visible{outline:2px solid var(--card-green);outline-offset:3px}
.card-popover{width:min(340px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;padding:18px;border:1px solid var(--card-green);background:var(--card-cream);color:#111;box-shadow:0 8px 28px rgb(0 0 0 / .12);font:400 .875rem/1.5 Roboto,Arial,sans-serif}
.card-popover-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.card-popover-title{margin:0;font:700 .875rem/1.3 'Roboto Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.08em}
.card-popover p{margin:0;overflow-wrap:anywhere}

.card-footer{margin-top:auto;padding-top:20px}
.card-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.card-retailer{font-size:.8125rem;line-height:1.4;color:var(--card-muted)}
.card-rating{display:flex;align-items:center;gap:7px;font:700 .75rem/1.3 'Roboto Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.card-score{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid var(--card-green);border-radius:50%;font-size:.8125rem;letter-spacing:0}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card-action{min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 14px;border:1px solid var(--card-ink);border-radius:0;color:var(--card-ink);background:#fff;font:700 .8125rem/1.2 'Roboto Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;transition:background .18s ease,color .18s ease}
.card-shop{color:#fff;background:var(--card-ink)}
.card-arrow{font-family:Arial,sans-serif;font-size:1rem;line-height:1;letter-spacing:0}
.card-action:focus-visible,.card-name:focus-visible{outline:2px solid var(--card-green);outline-offset:4px}
.card-name:hover{text-decoration:underline;text-underline-offset:3px}
.card-action:hover{background:#eee}
.card-shop:hover{background:#333;color:#fff}
@media(hover:hover) and (pointer:fine){.card-tile:hover .card-image img{transform:scale(1.025)}.card-tile:hover .card-image{outline:1px solid var(--card-line);outline-offset:-1px}}
@media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.card-grid{grid-template-columns:minmax(0,1fr)}.card-body{padding:16px 0 12px}.card-footer{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.card-image img,.card-action{transition:none}.card-tile:hover .card-image img{transform:none}}

/* site integration: carousels host the tile directly */
.row .card-tile { scroll-snap-align: start; }
/* site integration: neutralise the global button styling on the card's text buttons */
.card-tile .card-details, .card-popover .card-popover-close,
.card-tile .card-details:hover, .card-popover .card-popover-close:hover,
.card-tile .card-details:focus, .card-popover .card-popover-close:focus,
.card-tile .card-details:active, .card-popover .card-popover-close:active {
  text-transform: none; letter-spacing: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--card-green, #175b49); font: 500 .75rem/1.4 Roboto, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; min-height: 32px; width: auto;
}
.card-popover .card-popover-close, .card-popover .card-popover-close:hover, .card-popover .card-popover-close:focus { color: #111; }
/* site integration: home carousels show exactly four tiles, matching the grid */
.row { grid-auto-columns: calc((100% - 3 * 1.6rem) / 4); gap: 1.6rem; padding: .3rem 0 1rem; }
@media (max-width: 1000px) { .row { grid-auto-columns: calc((100% - 1.6rem) / 2); } }
@media (max-width: 600px) { .row { grid-auto-columns: 86%; } }

/* site integration: phones show three compact tiles per row (Nick, 2026-09-04) */
@media (max-width: 600px) {
  .grid, .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem .6rem; }
  .row { grid-auto-columns: calc((100% - 1.2rem) / 3); gap: .6rem; }
  .card-tile .card-body { padding: 8px 0 6px; }
  .card-tile .card-image img { width: 94%; }
  .card-tile .card-badges { inset: 6px 6px auto; }
  .card-tile .card-status, .card-tile .card-condition { font-size: .5rem; padding: 3px 5px; letter-spacing: .06em; border-left-width: 3px; }
  .card-tile .card-prices { gap: 2px 6px; margin-bottom: 4px; }
  .card-tile .card-price { font-size: 1.15rem; }
  .card-tile .card-reference { font-size: .66rem; }
  .card-tile .card-discount { font-size: .8rem; margin-left: 0; width: 100%; }
  .card-tile .card-unit { font-size: .62rem; line-height: 1.3; }
  .card-tile .card-name { font-size: .74rem; line-height: 1.3; min-height: 2.6em; margin-bottom: 4px; }
  .card-tile .card-brand { font-size: .56rem; letter-spacing: .08em; }
  .card-tile .card-variant-row { min-height: 0; margin-top: 4px; }
  .card-tile .card-variant { font-size: .6rem; line-height: 1.3; }
  .card-tile .card-details { padding: 2px 0; min-height: 0; font-size: .6rem; }
  .card-tile .card-footer { padding-top: 8px; }
  .card-tile .card-meta { margin-bottom: 6px; gap: 4px; }
  .card-tile .card-retailer { font-size: .6rem; }
  .card-tile .card-rating { font-size: .55rem; gap: 4px; }
  .card-tile .card-score { width: 22px; height: 22px; font-size: .62rem; }
  .card-tile .card-actions { grid-template-columns: 1fr; gap: 4px; }
  .card-tile .card-action { min-height: 34px; padding: 6px 4px; font-size: .62rem; letter-spacing: .08em; gap: 6px; }
  .card-tile .card-action:not(.card-shop) { display: none; }   /* the name links to the product page */
}