/* amazon-cards.css - look of the Amazon product pictures. Change the variables to resize everything. */
.amz-card{
  --amz-thumb: 120px;        /* picture size when showing pictures only (square box) */
  --amz-img: 110px;          /* picture size when showing title + brand (data-show="text") */
  --amz-gap: 12px;           /* space between pictures */
  --amz-tile: 260px;         /* minimum tile width in text mode */
  margin:.9rem 0 1.1rem;    /* bottom space keeps the Amazon button off the "Visit website" link */
}
/* pictures only (default) */
.amz-thumbs{display:flex;flex-wrap:wrap;gap:var(--amz-gap)}
.amz-thumb{display:block;padding:6px;background:#fff;border:1px solid var(--line,#d5dde6);border-radius:4px}
.amz-thumb:hover{border-color:var(--brand,#1f4e8c)}
.amz-thumb:focus-visible,.amz-item:focus-visible{outline:3px solid var(--accent,#c8a13b);outline-offset:2px}
.amz-thumb .amz-img{display:block;width:var(--amz-thumb);height:var(--amz-thumb);object-fit:contain}
/* pictures with text (data-show="text") */
.amz-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--amz-tile),1fr));gap:var(--amz-gap)}
.amz-item{
  display:flex;align-items:center;gap:12px;padding:10px;
  background:var(--white,#fff);border:1px solid var(--line,#d5dde6);border-radius:4px;
  color:var(--ink,#1b2733);text-decoration:none;
}
.amz-item:hover{border-color:var(--brand,#1f4e8c)}
.amz-item .amz-img{flex:none;width:var(--amz-img);height:var(--amz-img);object-fit:contain;background:#fff}
.amz-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.amz-title{
  font-weight:600;font-size:.9rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.amz-brand{font-size:.8rem;color:var(--muted,#5a6b7b)}
.amz-cta{font-size:.82rem;font-weight:700;color:var(--brand,#1f4e8c)}
/* Amazon pill button: the text link under the pictures, and the plain link shown when no pictures load */
/* three classes outrank state-page.css ".row .desc p{margin:0 0 .7rem}" so the button keeps its space below the pictures */
.amz-card .amz-thumbs + .amz-more,
.row .desc .amz-card .amz-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.1rem 0 0;padding:0}
.amz-card .amz-more .amz-note{display:inline;margin:0;font-weight:400}
.amz-more a,.amz-card>a{
  display:inline-block;min-width:110px;padding:12px 24px;border-radius:9999px;
  background:#f8bd19;color:#111;text-align:center;font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.amz-more a:hover,.amz-card>a:hover{background:#f59e0b;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.amz-more a:focus-visible,.amz-card>a:focus-visible{outline:3px solid var(--accent,#c8a13b);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.amz-more a,.amz-card>a{transition:none}.amz-more a:hover,.amz-card>a:hover{transform:none}}
.amz-note{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted,#5a6b7b)}
@media (max-width:520px){
  .amz-card{--amz-thumb:92px;--amz-img:84px;--amz-tile:100%}
}