.cs-shopping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

.cs-shopping-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5df;
    border-radius: 22px;
    background: #fff;
    color: #183627;
}

.cs-shopping-card-header { min-height: 132px; padding: 22px 24px 18px; }
.cs-shopping-eyebrow { display: block; font-size: 11px; font-weight: 750; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #51715d; }
.cs-shopping-card-header h3 {
    margin: 6px 0 0;
    font: 650 clamp(21px, 2vw, 28px)/1.2 var(--font-heading);
    letter-spacing: -.025em;
    color: #183627;
}
.cs-shopping-visual { position: relative; min-width: 0; background: #f5f7f5; }
.cs-shopping-card-footer { display: grid; gap: 12px; padding: 18px 24px 20px; background: #fff; }
.cs-shopping-card-footer.cs-shopping-card-footer--teaser { padding: 0; }
.cs-shopping-teaser { display: grid; gap: 12px; min-width: 0; padding: 18px 24px 20px; border-radius: 8px; color: #145437; text-decoration: none; }
.cs-shopping-teaser:focus-visible { outline: 2px solid #145437; outline-offset: -5px; }
.cs-shopping-capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-shopping-capabilities > li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 10px; border: 1px solid #d4e3d8; border-radius: 9px; background: #edf5f0; color: #145437; font-size: 12.5px; line-height: 1.4; }
.cs-shopping-capabilities svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-shopping-capabilities span { min-width: 0; overflow-wrap: anywhere; }
.cs-shopping-teaser-cta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; font-size: 13px; font-weight: 750; }
.cs-shopping-teaser:hover .cs-shopping-teaser-cta { text-decoration: underline; text-underline-offset: 3px; }
.cs-shopping-image-trigger.cs-preview-trigger::after { display: none; content: none; }
.cs-shopping-image-trigger {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: zoom-in;
}
.cs-shopping-image-trigger:focus-visible { outline: 3px solid #145437; outline-offset: -4px; }
.cs-shopping-image-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #c7dccc;
    border-radius: 9px;
    background: #fff;
    color: #145437;
    box-shadow: 0 3px 14px #1836271a;
    font: 650 13px/1.4 var(--font-body);
    opacity: 0;
}
.cs-shopping-image-trigger:hover .cs-shopping-image-badge,
.cs-shopping-image-trigger:focus-visible .cs-shopping-image-badge { opacity: 1; }

/* Show the original interfaces together, without extracting individual photos.
   Product inline view ends below the purchase block; preview opens the full page. */
.cs-shopping-shot {
    aspect-ratio: 1024 / 960;
    overflow: hidden;
    border-block: 1px solid #e5ece7;
    background: #f5f7f5;
}
.cs-shopping-shot picture { display: block; width: 100%; }
.cs-shopping-shot img { display: block; width: 100%; max-width: 100%; height: auto; }

/* Marketing and editing previews retain the entire original interface. */
.cs-shopping-shot--landscape { aspect-ratio: 4 / 3; }
.cs-shopping-shot--landscape picture { height: 100%; }
.cs-shopping-shot--landscape img { height: 100%; object-fit: contain; object-position: center top; }
.cs-shopping-section-cta { gap: 12px; padding-block: 10px; }
.cs-shopping-section-cta > span:first-child { min-width: 0; }
.cs-shopping-section-cta > span:last-child { flex: 0 0 auto; }

@media (max-width: 1050px) {
    .cs-shopping-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-shopping-card-header { min-height: 0; }
}

@media (max-width: 760px) {
    .cs-shopping-grid { gap: 20px; }
    .cs-shopping-card-header,
    .cs-shopping-card-footer { padding: 18px 16px; }
    .cs-shopping-teaser { padding: 18px 16px; }
}

@media (hover: none) {
    .cs-shopping-image-badge { opacity: 1; }
}