/*
 * DHV Experience 13.78.18 — Story Card Commerce Attachment.
 * Presentation of the existing Core-owned Feed commerce projection only.
 * Product selection, relation truth, disclosure, tracking, destination and
 * eligibility remain Core-owned. Trusted product media is presentation-only.
 */

:root {
  --dhvx-feed-commerce-bg: #f8f4ec;
  --dhvx-feed-commerce-edge: #e6ddd0;
  --dhvx-feed-commerce-ink: #2d2925;
  --dhvx-feed-commerce-muted: #766f66;
  --dhvx-feed-commerce-accent: #b6232d;
}

/* Commerce belongs to the story, but should not read like another dashboard
 * card. A warm editorial strip + real product image gives it identity while
 * keeping the article media/headline visually dominant. */
.dhvx-app .dhvx-commerce,
.dhvx-listing-feed .dhvx-commerce {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 14px 0 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--dhvx-feed-commerce-edge);
  border-bottom: 1px solid var(--dhvx-feed-commerce-edge);
  border-radius: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dhvx-feed-commerce-bg) 72%, transparent), transparent 72%);
  color: var(--dhvx-feed-commerce-ink);
  box-shadow: none;
}

.dhvx-app .dhvx-commerce.has-product-media,
.dhvx-listing-feed .dhvx-commerce.has-product-media {
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

.dhvx-app .dhvx-commerce__visual,
.dhvx-listing-feed .dhvx-commerce__visual {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dhvx-feed-commerce-edge) 88%, #fff);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 82%, var(--dhvx-feed-commerce-bg));
  color: var(--dhvx-feed-commerce-muted);
  box-shadow: 0 4px 13px rgba(82, 65, 45, .045);
}

.dhvx-app .dhvx-commerce.has-product-media .dhvx-commerce__visual,
.dhvx-listing-feed .dhvx-commerce.has-product-media .dhvx-commerce__visual {
  width: 72px;
  height: 72px;
  background: #fff;
}

.dhvx-app .dhvx-commerce__visual img,
.dhvx-listing-feed .dhvx-commerce__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dhvx-app .dhvx-commerce__visual .dhvx-icon,
.dhvx-listing-feed .dhvx-commerce__visual .dhvx-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.65;
}

.dhvx-app .dhvx-commerce__copy,
.dhvx-listing-feed .dhvx-commerce__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.dhvx-app .dhvx-commerce__meta,
.dhvx-listing-feed .dhvx-commerce__meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 0;
  overflow: visible;
  color: var(--dhvx-feed-commerce-muted);
  font-size: 10.75px;
  line-height: 1.35;
  white-space: normal;
}

.dhvx-app .dhvx-commerce__meta > span,
.dhvx-listing-feed .dhvx-commerce__meta > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.dhvx-app .dhvx-commerce__relation,
.dhvx-listing-feed .dhvx-commerce__relation {
  color: var(--dhvx-feed-commerce-accent);
  font-weight: 720;
}

.dhvx-app .dhvx-commerce__disclosure::before,
.dhvx-app .dhvx-commerce__platform::before,
.dhvx-listing-feed .dhvx-commerce__disclosure::before,
.dhvx-listing-feed .dhvx-commerce__platform::before {
  content: "·";
  display: inline-block;
  margin: 0 6px;
  color: color-mix(in srgb, var(--dhvx-feed-commerce-muted) 58%, transparent);
}

.dhvx-app .dhvx-commerce__copy strong,
.dhvx-listing-feed .dhvx-commerce__copy strong {
  display: block;
  overflow: hidden;
  color: var(--dhvx-feed-commerce-ink);
  font-size: 14.75px;
  font-weight: 735;
  line-height: 1.34;
  letter-spacing: -.008em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dhvx-app .dhvx-commerce__copy small,
.dhvx-listing-feed .dhvx-commerce__copy small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 54ch;
  color: var(--dhvx-feed-commerce-muted);
  font-size: 11.75px;
  line-height: 1.42;
}

.dhvx-app .dhvx-commerce__cta,
.dhvx-listing-feed .dhvx-commerce__cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--dhvx-feed-commerce-accent) 24%, var(--dhvx-feed-commerce-edge));
  border-radius: 10px;
  background: color-mix(in srgb, #fff 78%, var(--dhvx-feed-commerce-bg));
  color: var(--dhvx-feed-commerce-accent);
  font-size: 12.25px;
  font-weight: 720;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dhvx-app .dhvx-commerce__cta .dhvx-icon,
.dhvx-listing-feed .dhvx-commerce__cta .dhvx-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.dhvx-app .dhvx-commerce__cta:hover,
.dhvx-app .dhvx-commerce__cta:focus-visible,
.dhvx-listing-feed .dhvx-commerce__cta:hover,
.dhvx-listing-feed .dhvx-commerce__cta:focus-visible {
  border-color: color-mix(in srgb, var(--dhvx-feed-commerce-accent) 48%, var(--dhvx-feed-commerce-edge));
  background: #fff;
  color: var(--dhvx-feed-commerce-accent);
}

.dhvx-app .dhvx-commerce__cta:focus-visible,
.dhvx-listing-feed .dhvx-commerce__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dhvx-feed-commerce-accent) 72%, transparent);
  outline-offset: 3px;
}

/* Tablet: keep a real product image and a separate action without squeezing
 * the copy into a desktop-sized three-column row. */
@media (min-width: 768px) and (max-width: 1119px) {
  .dhvx-app .dhvx-commerce,
  .dhvx-listing-feed .dhvx-commerce {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 13px;
    padding: 11px 0;
  }

  .dhvx-app .dhvx-commerce.has-product-media,
  .dhvx-listing-feed .dhvx-commerce.has-product-media {
    grid-template-columns: 68px minmax(0, 1fr) auto;
  }

  .dhvx-app .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce__visual {
    width: 54px;
    height: 54px;
  }

  .dhvx-app .dhvx-commerce.has-product-media .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce.has-product-media .dhvx-commerce__visual {
    width: 68px;
    height: 68px;
  }

  .dhvx-app .dhvx-commerce__copy strong,
  .dhvx-listing-feed .dhvx-commerce__copy strong {
    font-size: 14.25px;
  }

  .dhvx-app .dhvx-commerce__cta,
  .dhvx-listing-feed .dhvx-commerce__cta {
    min-height: 44px;
    padding-inline: 11px;
  }
}

/* Mobile is composed for the thumb, not shrunk desktop. Media and copy share
 * the first row; purchase action sits below the copy and remains secondary to
 * the article's own Reader handoff. */
@media (max-width: 767px) {
  .dhvx-app .dhvx-commerce,
  .dhvx-listing-feed .dhvx-commerce,
  .dhvx-app .dhvx-commerce.has-product-media,
  .dhvx-listing-feed .dhvx-commerce.has-product-media {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 6px 11px;
    margin-top: 11px;
    padding: 11px 0 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dhvx-feed-commerce-bg) 66%, transparent), transparent 88%);
  }

  .dhvx-app .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce__visual,
  .dhvx-app .dhvx-commerce.has-product-media .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce.has-product-media .dhvx-commerce__visual {
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    height: 60px;
    border-radius: 11px;
  }

  .dhvx-app .dhvx-commerce__copy,
  .dhvx-listing-feed .dhvx-commerce__copy {
    grid-column: 2;
    grid-row: 1;
    gap: 3px;
  }

  .dhvx-app .dhvx-commerce__meta,
  .dhvx-listing-feed .dhvx-commerce__meta {
    font-size: 10.25px;
  }

  .dhvx-app .dhvx-commerce__copy strong,
  .dhvx-listing-feed .dhvx-commerce__copy strong {
    font-size: 14px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .dhvx-app .dhvx-commerce__copy small,
  .dhvx-listing-feed .dhvx-commerce__copy small {
    -webkit-line-clamp: 1;
    font-size: 11.25px;
  }

  .dhvx-app .dhvx-commerce__cta,
  .dhvx-listing-feed .dhvx-commerce__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-height: 44px;
    margin-top: 3px;
    justify-self: stretch;
    justify-content: space-between;
    padding-inline: 12px;
    font-size: 12px;
  }
}

@media (max-width: 359px) {
  .dhvx-app .dhvx-commerce,
  .dhvx-listing-feed .dhvx-commerce,
  .dhvx-app .dhvx-commerce.has-product-media,
  .dhvx-listing-feed .dhvx-commerce.has-product-media {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px 9px;
  }

  .dhvx-app .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce__visual,
  .dhvx-app .dhvx-commerce.has-product-media .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce.has-product-media .dhvx-commerce__visual {
    width: 54px;
    height: 54px;
  }

  .dhvx-app .dhvx-commerce__meta,
  .dhvx-listing-feed .dhvx-commerce__meta {
    font-size: 9.9px;
  }

  .dhvx-app .dhvx-commerce__copy strong,
  .dhvx-listing-feed .dhvx-commerce__copy strong {
    font-size: 13.6px;
  }
}

@media (max-width: 920px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .dhvx-app .dhvx-commerce,
  .dhvx-listing-feed .dhvx-commerce {
    margin-top: 9px;
    padding-block: 8px;
  }
}

html[data-theme="dark"] {
  --dhvx-feed-commerce-bg: #27231e;
  --dhvx-feed-commerce-edge: #403930;
  --dhvx-feed-commerce-ink: #f0ebe3;
  --dhvx-feed-commerce-muted: #b6aea3;
  --dhvx-feed-commerce-accent: #ef7c83;
}

html[data-theme="dark"] .dhvx-app .dhvx-commerce__visual,
html[data-theme="dark"] .dhvx-listing-feed .dhvx-commerce__visual,
html[data-theme="dark"] .dhvx-app .dhvx-commerce__cta,
html[data-theme="dark"] .dhvx-listing-feed .dhvx-commerce__cta {
  background: color-mix(in srgb, #302b25 84%, var(--dhvx-feed-commerce-bg));
}

html[data-theme="dark"] .dhvx-app .dhvx-commerce__cta:hover,
html[data-theme="dark"] .dhvx-app .dhvx-commerce__cta:focus-visible,
html[data-theme="dark"] .dhvx-listing-feed .dhvx-commerce__cta:hover,
html[data-theme="dark"] .dhvx-listing-feed .dhvx-commerce__cta:focus-visible {
  background: #38322b;
}

@media (prefers-reduced-motion: reduce) {
  .dhvx-app .dhvx-commerce__cta,
  .dhvx-listing-feed .dhvx-commerce__cta {
    transition: none;
  }
}

@media (forced-colors: active) {
  .dhvx-app .dhvx-commerce,
  .dhvx-listing-feed .dhvx-commerce {
    border-color: CanvasText;
    background: Canvas;
  }

  .dhvx-app .dhvx-commerce__visual,
  .dhvx-listing-feed .dhvx-commerce__visual,
  .dhvx-app .dhvx-commerce__cta,
  .dhvx-listing-feed .dhvx-commerce__cta {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .dhvx-app .dhvx-commerce__cta:focus-visible,
  .dhvx-listing-feed .dhvx-commerce__cta:focus-visible {
    outline-color: Highlight;
  }
}