.asl-product {
  --asl-image-width: 220px;
  position: relative;
  max-width: 100%;
  margin: 1.5em 0;
}
.asl-product .asl-disclosure { margin: 0 0 .45em; color: #666; font-size: .76em; line-height: 1.4; }
.asl-card {
  display: grid;
  grid-template-columns: minmax(0, var(--asl-image-width)) minmax(0, 1fr);
  grid-template-areas: "media body";
  gap: 22px;
  align-items: center;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #d9dde2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  box-sizing: border-box;
}
.asl-card__media {
  grid-area: media;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 180px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
.asl-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 300px;
  object-position: center;
}
.asl-card__body { grid-area: body; min-width: 0; }
.asl-card__source { margin-bottom: 5px; color: #687078; font-size: .75em; }
.asl-card__title { margin: 0 0 10px; color: #1d2327; font-size: 1.08em; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.asl-card__price { margin-bottom: 10px; color: #b32d2e; font-size: 1.05em; font-weight: 700; }
.asl-card__price span { color: #666; font-size: .72em; font-weight: 400; }
.asl-card__description { margin: 8px 0 14px; color: #50575e; font-size: .9em; line-height: 1.7; }
.asl-card__description p { margin: .4em 0; }
.asl-card__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.asl-button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 9px 12px; border-radius: 6px; color: #fff !important; font-size: .88em; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none !important; overflow-wrap: anywhere; transition: opacity .15s ease, transform .15s ease; box-sizing: border-box; }
.asl-button:hover { opacity: .88; transform: translateY(-1px); }
.asl-button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.asl-button--amazon { background: #e47911; }
.asl-button--rakuten { background: #bf0000; }
.asl-button--yahoo { background: #3567b7; }
.asl-card__price-note { margin-top: 10px; color: #777; font-size: .7em; }
.asl-card__no-buttons { margin-top: 12px; padding: 9px 11px; border: 1px dashed #c3c4c7; background: #f6f7f7; color: #50575e; font-size: .78em; }
.asl-impression { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; pointer-events: none; }
.asl-product--missing { padding: 12px 14px; border: 1px dashed #c3c4c7; background: #f6f7f7; color: #50575e; }
.asl-product > img:not(.asl-impression) { max-width: 100%; height: auto; }

/* Image size */
.asl-product--image-size-small { --asl-image-width: 140px; }
.asl-product--image-size-medium { --asl-image-width: 220px; }
.asl-product--image-size-large { --asl-image-width: 300px; }

/* Image position */
.asl-product--image-right .asl-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--asl-image-width));
  grid-template-areas: "body media";
}
.asl-product--image-top .asl-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "body";
}
.asl-product--image-top .asl-card__media { width: 100%; min-height: 0; }
.asl-product--image-top .asl-card__media img { width: min(100%, max(var(--asl-image-width), 420px)); }
.asl-product--no-image .asl-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "body";
}

/* Image fit and ratio */
.asl-product--image-fit-contain .asl-card__media img { object-fit: contain; }
.asl-product--image-fit-cover .asl-card__media img { object-fit: cover; }
.asl-product--image-ratio-square .asl-card__media { aspect-ratio: 1 / 1; min-height: 0; }
.asl-product--image-ratio-4-3 .asl-card__media { aspect-ratio: 4 / 3; min-height: 0; }
.asl-product--image-ratio-16-9 .asl-card__media { aspect-ratio: 16 / 9; min-height: 0; }
.asl-product--image-ratio-auto .asl-card__media { height: clamp(150px, 18vw, 220px); }
.asl-product--image-top.asl-product--image-ratio-auto .asl-card__media { height: clamp(180px, 28vw, 320px); }

/* Layout variations */
.asl-product--layout-compact .asl-card { gap: 16px; padding: 16px; border-radius: 8px; }
.asl-product--layout-compact .asl-card__title { margin-bottom: 7px; font-size: 1em; }
.asl-product--layout-compact .asl-card__description { margin: 6px 0 10px; font-size: .84em; }
.asl-product--layout-compact .asl-card__buttons { gap: 8px; margin-top: 10px; }
.asl-product--layout-compact .asl-button { min-height: 40px; padding: 8px 10px; font-size: .82em; }
.asl-product--layout-buttons .asl-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; padding: 16px; }
.asl-product--layout-buttons .asl-card__buttons { margin-top: 0; }
.asl-product--layout-buttons .asl-card__body--buttons-only { width: 100%; }

@media (max-width: 900px) {
  .asl-card__buttons { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 720px) {
  .asl-card,
  .asl-product--image-right .asl-card,
  .asl-product--image-top .asl-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "body";
    gap: 14px;
    padding: 16px;
  }
  .asl-product--no-image .asl-card,
  .asl-product--layout-buttons .asl-card { grid-template-areas: "body"; }
  .asl-card__media { width: 100%; max-width: min(100%, 300px); margin: 0 auto; }
  .asl-product--image-top .asl-card__media { max-width: 100%; }
  .asl-product--image-top .asl-card__media img { width: 100%; }
  .asl-product--image-ratio-auto .asl-card__media,
  .asl-product--image-top.asl-product--image-ratio-auto .asl-card__media { height: 190px; }
  .asl-card__buttons { grid-template-columns: 1fr; }
}