Secure Checkout
Protected payments
Buyer Protection
Eligible purchases covered
Customer Support
Help when needed
CTCA Preferred
Certified Trading Card Association
Caleb Smith 2021 Topps Purple #141 Arizona Diamondbacks
You are looking at a great 2021 Topps Caleb Smith card.
Shipping is within one business day, so expect your items fast.
New items everyday and many cards from the same set, so check back frequently!
Shipping will automatically combine at checkout.
FILE 2: product-three-column-layout-share-card-fixed.css
========================================================================
/*
* Marketplace Product Page - Full Replacement Layout
* Desktop: gallery + unified purchase panel
* Tablet: balanced two-column layout, then single-column below 900px
* Mobile: conversion-first single-column flow
*/
.marketplace-product-shell,
.marketplace-product-shell * {
box-sizing: border-box;
}
.marketplace-product-shell {
--mp-border: rgba(var(--color-foreground), 0.14);
--mp-border-strong: rgba(var(--color-foreground), 0.22);
--mp-surface: rgb(var(--color-background));
--mp-muted: rgba(var(--color-foreground), 0.68);
--mp-radius: 14px;
--mp-radius-small: 10px;
--mp-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
--mp-gap: clamp(1.6rem, 2.2vw, 3.2rem);
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr) !important;
gap: var(--mp-gap) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 2rem 0 3rem !important;
}
.marketplace-product-shell > .product__media-wrapper,
.marketplace-product-shell > .product__info-wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
/* Gallery card */
.marketplace-product-shell > .product__media-wrapper {
grid-column: 1;
padding: clamp(1rem, 1.8vw, 2rem) !important;
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: var(--mp-radius);
box-shadow: var(--mp-shadow);
overflow: hidden;
}
.marketplace-product-shell .product__media-wrapper media-gallery,
.marketplace-product-shell .product__media-wrapper slider-component,
.marketplace-product-shell .product__media-wrapper .product__media-list {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.marketplace-product-shell .product__media-wrapper .product__media-item,
.marketplace-product-shell .product__media-wrapper .product-media-container,
.marketplace-product-shell .product__media-wrapper .product__media {
max-width: 100% !important;
}
.marketplace-product-shell .product__media-wrapper img,
.marketplace-product-shell .product__media-wrapper video,
.marketplace-product-shell .product__media-wrapper iframe,
.marketplace-product-shell .product__media-wrapper model-viewer {
max-width: 100% !important;
}
.marketplace-product-shell .product__media-wrapper img {
width: 100% !important;
height: auto !important;
max-height: min(72vh, 760px) !important;
object-fit: contain !important;
}
.marketplace-product-shell .product-media-container,
.marketplace-product-shell .product__media {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 0 !important;
overflow: hidden;
border-radius: var(--mp-radius-small);
}
.marketplace-product-shell .thumbnail-list {
gap: 0.8rem;
}
.marketplace-product-shell .thumbnail {
border-radius: 8px;
overflow: hidden;
}
.marketplace-product-shell .slider-buttons {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-top: 1rem;
}
.marketplace-product-shell .slider-counter {
display: flex !important;
align-items: center;
justify-content: center;
min-width: 5rem;
font-weight: 700;
}
/* Unified right-side purchase panel */
.marketplace-product-shell > .product__info-wrapper {
grid-column: 2;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
overflow: visible !important;
}
.marketplace-product-shell .marketplace-purchase-card {
width: 100%;
min-width: 0;
padding: clamp(1.4rem, 2vw, 2.4rem);
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: var(--mp-radius);
box-shadow: var(--mp-shadow);
}
@media screen and (min-width: 1200px) {
.marketplace-product-shell .marketplace-purchase-card {
position: sticky;
top: 2rem;
}
}
/* Conditional auction and seller credentials */
.marketplace-dynamic-panel[hidden],
.marketplace-auction-section[hidden],
.marketplace-credentials-section[hidden] {
display: none !important;
}
.marketplace-product-shell .marketplace-dynamic-panel {
display: none;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0 0 1.6rem;
padding: 1.2rem;
background: rgba(var(--color-foreground), 0.025);
border: 1px solid var(--mp-border);
border-radius: var(--mp-radius-small);
overflow: hidden;
}
.marketplace-product-shell .marketplace-dynamic-panel.is-visible {
display: block;
}
.marketplace-product-shell .marketplace-auction-section,
.marketplace-product-shell .marketplace-credentials-section {
width: 100%;
min-width: 0;
max-width: 100%;
}
.marketplace-product-shell .marketplace-dynamic-panel.has-both .marketplace-credentials-section {
margin-top: 1.2rem !important;
padding-top: 1.2rem;
border-top: 1px solid var(--mp-border);
}
.marketplace-product-shell .marketplace-dynamic-panel:not(.has-auction) .marketplace-credentials-section {
margin-top: 0 !important;
padding-top: 0;
border-top: 0;
}
.marketplace-product-shell .marketplace-dynamic-panel #wk-auction,
.marketplace-product-shell .marketplace-dynamic-panel #wk-auction > *,
.marketplace-product-shell .marketplace-dynamic-panel .wk_seller_badge_div {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
box-sizing: border-box;
}
.marketplace-product-shell .marketplace-dynamic-panel #wk-auction * {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
}
.marketplace-product-shell .marketplace-dynamic-panel #wk-auction:empty,
.marketplace-product-shell .marketplace-dynamic-panel .wk_seller_badge_div:empty {
display: none !important;
}
.marketplace-product-shell .seller-badges-header {
margin-bottom: 0.8rem;
}
.marketplace-product-shell .seller-badges-title {
margin: 0;
font-size: 1.4rem;
line-height: 1.3;
}
.marketplace-product-shell .wk_seller_badge_div {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
align-items: center;
}
.marketplace-product-shell .wk_seller_badge_div img {
width: auto;
max-width: 64px;
height: auto;
max-height: 48px;
object-fit: contain;
}
/* Seller identity */
.marketplace-product-shell .product__seller-info-top {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: center;
width: 100%;
margin: 0 0 1.4rem !important;
padding: 0 0 1.4rem !important;
border-bottom: 1px solid var(--mp-border);
}
.marketplace-product-shell .product__seller-info-top .wk_seller_store_logo,
.marketplace-product-shell .product__seller-info-top .wk_seller_detail {
width: auto;
min-width: 0;
margin: 0 !important;
text-align: left !important;
}
.marketplace-product-shell .product__seller-info-top .wk_seller_store_logo img {
display: block;
width: auto;
max-width: 110px;
height: auto;
max-height: 56px;
object-fit: contain;
}
.marketplace-product-shell .wk_seller_info {
width: 100%;
margin: 0 0 1.2rem !important;
}
/* Product information and forms */
.marketplace-product-shell .product__info-container,
.marketplace-product-shell .product__info-container > *,
.marketplace-product-shell .product-form,
.marketplace-product-shell .product-form__input,
.marketplace-product-shell .product-form__buttons,
.marketplace-product-shell .shopify-payment-button,
.marketplace-product-shell .shopify-payment-button__button {
width: 100%;
max-width: 100%;
min-width: 0;
}
.marketplace-product-shell .product__info-container > * + * {
margin-top: 1.2rem;
}
.marketplace-product-shell .price,
.marketplace-product-shell .price--large {
line-height: 1.15;
}
.marketplace-product-shell .main-price-quantity {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.2rem;
align-items: end;
width: 100%;
}
.marketplace-product-shell .cus_price_block {
min-width: 0;
}
.marketplace-product-shell .product-form__quantity {
margin: 0;
}
.marketplace-product-shell button,
.marketplace-product-shell .button,
.marketplace-product-shell input[type="button"],
.marketplace-product-shell input[type="submit"],
.marketplace-product-shell select,
.marketplace-product-shell input[type="text"],
.marketplace-product-shell input[type="number"] {
max-width: 100%;
}
.marketplace-product-shell .product-form__buttons button,
.marketplace-product-shell .product-form__buttons .button,
.marketplace-product-shell .product-form__buttons input[type="button"],
.marketplace-product-shell .product-form__buttons input[type="submit"],
.marketplace-product-shell .product-form__buttons a,
.marketplace-product-shell #wk_make_an_offer_btn,
.marketplace-product-shell #wk-askme button,
.marketplace-product-shell #wk-askme a,
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell .shopify-payment-button__button {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 48px;
margin-left: 0 !important;
margin-right: 0 !important;
white-space: normal !important;
text-overflow: clip !important;
}
.marketplace-product-shell .product-form__buttons > *,
.marketplace-product-shell #wk_make_an_offer,
.marketplace-product-shell #wk-askme,
.marketplace-product-shell #make_an_offer_btn_div {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.marketplace-product-shell table {
width: 100% !important;
max-width: 100%;
table-layout: auto;
}
.marketplace-product-shell iframe,
.marketplace-product-shell video,
.marketplace-product-shell svg,
.marketplace-product-shell img {
max-width: 100%;
}
/* ==========================================================
HORIZONTAL OVERFLOW PROTECTION
Keeps app widgets, sliders, and injected content inside the page.
========================================================== */
[id^="MainProduct-"] {
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
[id^="MainProduct-"] .page-width,
[id^="MainProduct-"] .marketplace-product-shell,
[id^="MainProduct-"] .marketplace-product-shell > *,
[id^="MainProduct-"] .marketplace-purchase-card,
[id^="MainProduct-"] media-gallery,
[id^="MainProduct-"] slider-component,
[id^="MainProduct-"] product-info,
[id^="MainProduct-"] .product__media-list,
[id^="MainProduct-"] .product__info-container,
[id^="MainProduct-"] #wk-auction,
[id^="MainProduct-"] [class*="wk_"],
[id^="MainProduct-"] [id*="wk-"] {
min-width: 0 !important;
max-width: 100% !important;
}
[id^="MainProduct-"] img,
[id^="MainProduct-"] video,
[id^="MainProduct-"] iframe,
[id^="MainProduct-"] svg,
[id^="MainProduct-"] table,
[id^="MainProduct-"] input,
[id^="MainProduct-"] select,
[id^="MainProduct-"] textarea,
[id^="MainProduct-"] button {
max-width: 100%;
}
[id^="MainProduct-"] table {
width: 100%;
}
[id^="MainProduct-"] iframe {
width: 100%;
}
/* ==========================================================
MARKETPLACE TRUST BANNER
========================================================== */
.mp-trust-banner,
.mp-trust-banner * {
box-sizing: border-box;
}
.mp-trust-banner {
width: 100%;
max-width: 100%;
margin: 0 0 1.8rem;
color: rgb(var(--color-foreground));
overflow: hidden;
border: 1px solid rgba(var(--color-foreground), 0.14);
border-radius: 14px;
background: rgb(var(--color-background));
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.045);
}
.mp-trust-banner__inner {
display: grid;
grid-template-columns: minmax(160px, 0.8fr) minmax(0, 2.2fr) minmax(200px, 1fr);
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
}
.mp-trust-banner__heading,
.mp-trust-banner__ctca {
display: flex;
align-items: center;
min-width: 0;
padding: 1.2rem 1.4rem;
}
.mp-trust-banner__heading {
gap: 0.75rem;
font-size: 1.35rem;
font-weight: 750;
line-height: 1.2;
background: rgba(23, 107, 69, 0.055);
}
.mp-trust-banner__heading-icon,
.mp-trust-benefit__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: #176b45;
}
.mp-trust-banner__benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
min-width: 0;
border-left: 1px solid rgba(var(--color-foreground), 0.12);
border-right: 1px solid rgba(var(--color-foreground), 0.12);
}
.mp-trust-benefit {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-width: 0;
padding: 1rem 1.1rem;
}
.mp-trust-benefit + .mp-trust-benefit {
border-left: 1px solid rgba(var(--color-foreground), 0.1);
}
.mp-trust-benefit__icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(23, 107, 69, 0.08);
}
.mp-trust-benefit__text,
.mp-trust-banner__ctca-text {
display: block;
min-width: 0;
line-height: 1.2;
}
.mp-trust-benefit__text strong,
.mp-trust-benefit__text small,
.mp-trust-banner__ctca-text strong,
.mp-trust-banner__ctca-text small {
display: block;
overflow-wrap: anywhere;
}
.mp-trust-benefit__text strong,
.mp-trust-banner__ctca-text strong {
font-size: 1.25rem;
}
.mp-trust-benefit__text small,
.mp-trust-banner__ctca-text small {
margin-top: 0.2rem;
color: rgba(var(--color-foreground), 0.65);
font-size: 1.05rem;
}
.mp-trust-banner__ctca {
gap: 0.8rem;
}
.mp-trust-banner__ctca-image {
flex: 0 0 auto;
width: 46px;
height: 46px;
object-fit: contain;
}
@media screen and (max-width: 1099px) {
.mp-trust-banner__inner {
grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr);
}
.mp-trust-banner__ctca {
grid-column: 1 / -1;
justify-content: center;
padding: 0.9rem 1.2rem;
border-top: 1px solid rgba(var(--color-foreground), 0.1);
}
}
@media screen and (max-width: 749px) {
.mp-trust-banner {
margin-bottom: 1.2rem;
border-radius: 12px;
}
.mp-trust-banner__inner {
display: block;
}
.mp-trust-banner__heading {
justify-content: center;
padding: 0.9rem 1rem;
font-size: 1.25rem;
}
.mp-trust-banner__benefits {
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 0;
border-top: 1px solid rgba(var(--color-foreground), 0.1);
}
.mp-trust-benefit {
flex-direction: column;
justify-content: flex-start;
gap: 0.45rem;
padding: 0.9rem 0.45rem;
text-align: center;
}
.mp-trust-benefit__icon {
width: 30px;
height: 30px;
}
.mp-trust-benefit__text strong {
font-size: 1.05rem;
}
.mp-trust-benefit__text small {
display: none;
}
.mp-trust-banner__ctca {
justify-content: center;
padding: 0.8rem 1rem;
}
.mp-trust-banner__ctca-image {
width: 38px;
height: 38px;
}
.mp-trust-banner__ctca-text strong {
font-size: 1.1rem;
}
.mp-trust-banner__ctca-text small {
font-size: 0.95rem;
}
}
@media screen and (max-width: 390px) {
.mp-trust-benefit__text strong {
font-size: 0.95rem;
}
}
/* Unified description and policy box */
.seller-info-unified-wrapper {
margin-top: 2.4rem;
}
.seller-info-unified-box {
border: 1px solid rgba(var(--color-foreground), 0.14);
border-radius: 14px;
background: rgb(var(--color-background));
overflow: hidden;
}
.seller-info-section {
padding: clamp(1.6rem, 2.5vw, 2.8rem);
}
.seller-info-header {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
}
.seller-info-title {
margin: 0;
}
.seller-info-separator {
height: 1px;
background: rgba(var(--color-foreground), 0.12);
}
/* Tablet */
@media screen and (max-width: 1099px) {
.marketplace-product-shell {
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr) !important;
gap: 1.8rem !important;
}
.marketplace-product-shell .marketplace-purchase-card {
padding: 1.4rem;
}
.marketplace-product-shell .main-price-quantity {
grid-template-columns: 1fr;
align-items: start;
}
}
/* Small tablet and mobile: conversion-first single column */
@media screen and (max-width: 899px) {
.marketplace-product-shell {
display: flex !important;
flex-direction: column;
gap: 1.5rem !important;
margin-top: 1.5rem !important;
}
.marketplace-product-shell > .product__media-wrapper {
order: 1;
}
.marketplace-product-shell > .product__info-wrapper {
order: 2;
}
.marketplace-product-shell .marketplace-purchase-card {
position: static;
}
.marketplace-product-shell .product__media-wrapper img {
max-height: 620px !important;
}
}
/* Phone */
@media screen and (max-width: 749px) {
.section-main-product .page-width {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.marketplace-product-shell {
gap: 1.2rem !important;
margin: 1rem 0 2rem !important;
}
.marketplace-product-shell > .product__media-wrapper,
.marketplace-product-shell .marketplace-purchase-card {
border-radius: 12px;
}
.marketplace-product-shell > .product__media-wrapper {
padding: 0.8rem !important;
}
.marketplace-product-shell .marketplace-purchase-card {
padding: 1.2rem;
}
.marketplace-product-shell .product__media-list.slider,
.marketplace-product-shell .product__media-list.slider--mobile {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0 !important;
}
.marketplace-product-shell .product__media-item,
.marketplace-product-shell .product__media-item.grid__item,
.marketplace-product-shell .slider__slide {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
scroll-snap-align: start;
}
.marketplace-product-shell .product__media-wrapper img {
max-height: 72vh !important;
}
.marketplace-product-shell .thumbnail-list {
display: none !important;
}
.marketplace-product-shell .slider-buttons {
margin-top: 0.7rem;
}
.marketplace-product-shell .marketplace-dynamic-panel {
padding: 1rem;
}
.marketplace-product-shell .product__seller-info-top {
grid-template-columns: 72px minmax(0, 1fr);
}
.marketplace-product-shell .product__seller-info-top .wk_seller_store_logo img {
max-width: 72px;
max-height: 48px;
}
.marketplace-product-shell .wk_seller_badge_div {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.4rem;
scroll-snap-type: x proximity;
}
.marketplace-product-shell .wk_seller_badge_div > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
.marketplace-product-shell .product-form__buttons button,
.marketplace-product-shell .product-form__buttons .button,
.marketplace-product-shell .product-form__buttons input[type="button"],
.marketplace-product-shell .product-form__buttons input[type="submit"],
.marketplace-product-shell .product-form__buttons a,
.marketplace-product-shell .shopify-payment-button__button {
min-height: 50px;
font-size: 1.5rem;
line-height: 1.25;
}
.seller-info-section {
padding: 1.4rem;
}
.wk-mvm-shipping-days-div select,
.wk-mvm-shipping-days-div input,
.wk-mvm-shipping-days-div button {
width: 100% !important;
}
}
/* Narrow phone */
@media screen and (max-width: 420px) {
.marketplace-product-shell .product__seller-info-top {
grid-template-columns: 1fr;
}
.marketplace-product-shell .product__seller-info-top .wk_seller_store_logo img {
max-width: 100px;
}
}
/* Final defensive containment for injected marketplace/app content */
@media screen and (max-width: 899px) {
[id^="MainProduct-"] .marketplace-product-shell,
[id^="MainProduct-"] .product__media-wrapper,
[id^="MainProduct-"] .product__info-wrapper,
[id^="MainProduct-"] .marketplace-purchase-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
[id^="MainProduct-"] .product__media-list.slider,
[id^="MainProduct-"] .product__media-list.slider--mobile {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
[id^="MainProduct-"] .product__media-item,
[id^="MainProduct-"] .slider__slide {
max-width: 100% !important;
}
}
/* ==========================================================
FINAL PURCHASE ACTION BUTTON SYSTEM
Normalizes Shopify, Webkul, share, offer, like, and message actions.
Keep this section at the END of this stylesheet.
========================================================== */
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 1rem;
--mp-action-height: 52px;
--mp-action-radius: 10px;
--mp-primary-bg: #111827;
--mp-primary-text: #ffffff;
--mp-primary-hover: #000000;
--mp-secondary-bg: #ffffff;
--mp-secondary-text: #1f2937;
--mp-secondary-border: #cbd5e1;
--mp-secondary-hover: #f8fafc;
--mp-tertiary-bg: #f8fafc;
--mp-tertiary-text: #334155;
--mp-tertiary-border: #e2e8f0;
}
/* One predictable vertical action stack. */
.marketplace-product-shell .product-form__buttons,
.marketplace-product-shell .product-form__buttons > div,
.marketplace-product-shell #wk_make_an_offer,
.marketplace-product-shell #make_an_offer_btn_div,
.marketplace-product-shell #wk-askme,
.marketplace-product-shell .custom_dynamic_btns,
.marketplace-product-shell .shopify-payment-button,
.marketplace-product-shell .product-form,
.marketplace-product-shell share-button,
.marketplace-product-shell .share-button,
.marketplace-product-shell .product__share {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.marketplace-product-shell .product-form__buttons {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--mp-action-gap) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remove app/theme margins that create uneven spacing. */
.marketplace-product-shell .product-form__buttons > *,
.marketplace-product-shell .product-form__buttons > * + *,
.marketplace-product-shell #wk_make_an_offer,
.marketplace-product-shell #make_an_offer_btn_div,
.marketplace-product-shell #wk-askme,
.marketplace-product-shell .custom_dynamic_btns,
.marketplace-product-shell .shopify-payment-button,
.marketplace-product-shell share-button,
.marketplace-product-shell .share-button,
.marketplace-product-shell .product__share {
margin: 0 !important;
}
/* Every customer-facing action receives exactly the same outer width. */
.marketplace-product-shell .product-form__submit,
.marketplace-product-shell .product-form__buttons button,
.marketplace-product-shell .product-form__buttons .button,
.marketplace-product-shell .product-form__buttons a.button,
.marketplace-product-shell .product-form__buttons input[type="button"],
.marketplace-product-shell .product-form__buttons input[type="submit"],
.marketplace-product-shell #wk_make_an_offer_btn,
.marketplace-product-shell #wk_make_an_offer input,
.marketplace-product-shell #wk_make_an_offer button,
.marketplace-product-shell #wk-askme a,
.marketplace-product-shell #wk-askme button,
.marketplace-product-shell .wk-ask-a-question,
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell button.custom-share-button,
.marketplace-product-shell share-button button,
.marketplace-product-shell .share-button__button,
.marketplace-product-shell .shopify-payment-button__button,
.marketplace-product-shell .custom_dynamic_btns button,
.marketplace-product-shell .custom_dynamic_btns a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: var(--mp-action-height) !important;
height: auto !important;
margin: 0 !important;
padding: 1.1rem 1.4rem !important;
box-sizing: border-box !important;
border-radius: var(--mp-action-radius) !important;
font-family: inherit !important;
font-size: 1.45rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease,
color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
/* Primary purchase action. */
.marketplace-product-shell .product-form__submit,
.marketplace-product-shell button[name="add"],
.marketplace-product-shell .product-form__buttons button[type="submit"]:not(.shopify-payment-button__button) {
color: var(--mp-primary-text) !important;
background: var(--mp-primary-bg) !important;
border: 1px solid var(--mp-primary-bg) !important;
box-shadow: 0 5px 14px rgba(17, 24, 39, 0.16) !important;
}
.marketplace-product-shell .product-form__submit:hover,
.marketplace-product-shell button[name="add"]:hover,
.marketplace-product-shell .product-form__buttons button[type="submit"]:not(.shopify-payment-button__button):hover {
background: var(--mp-primary-hover) !important;
border-color: var(--mp-primary-hover) !important;
transform: translateY(-1px);
}
/* Secondary marketplace actions: offer, like, and message seller. */
.marketplace-product-shell #wk_make_an_offer_btn,
.marketplace-product-shell #wk_make_an_offer input,
.marketplace-product-shell #wk_make_an_offer button,
.marketplace-product-shell #wk-askme a,
.marketplace-product-shell #wk-askme button,
.marketplace-product-shell .wk-ask-a-question,
.marketplace-product-shell .custom_dynamic_btns button,
.marketplace-product-shell .custom_dynamic_btns a {
color: var(--mp-secondary-text) !important;
background: var(--mp-secondary-bg) !important;
border: 1px solid var(--mp-secondary-border) !important;
box-shadow: none !important;
}
.marketplace-product-shell #wk_make_an_offer_btn:hover,
.marketplace-product-shell #wk_make_an_offer input:hover,
.marketplace-product-shell #wk_make_an_offer button:hover,
.marketplace-product-shell #wk-askme a:hover,
.marketplace-product-shell #wk-askme button:hover,
.marketplace-product-shell .wk-ask-a-question:hover,
.marketplace-product-shell .custom_dynamic_btns button:hover,
.marketplace-product-shell .custom_dynamic_btns a:hover {
background: var(--mp-secondary-hover) !important;
border-color: #94a3b8 !important;
}
/* Share is intentionally quieter, but remains exactly the same width. */
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell button.custom-share-button,
.marketplace-product-shell share-button button,
.marketplace-product-shell .share-button__button {
color: var(--mp-tertiary-text) !important;
background: var(--mp-tertiary-bg) !important;
border: 1px solid var(--mp-tertiary-border) !important;
box-shadow: none !important;
}
.marketplace-product-shell .custom-share-button:hover,
.marketplace-product-shell button.custom-share-button:hover,
.marketplace-product-shell share-button button:hover,
.marketplace-product-shell .share-button__button:hover {
color: #0f172a !important;
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
}
/* Keep icons aligned and prevent oversized injected SVGs. */
.marketplace-product-shell .product-form__buttons button svg,
.marketplace-product-shell .product-form__buttons a svg,
.marketplace-product-shell .custom-share-button svg,
.marketplace-product-shell .share-button__button svg,
.marketplace-product-shell #wk-askme svg,
.marketplace-product-shell #wk_make_an_offer svg {
flex: 0 0 auto !important;
width: 1.8rem !important;
height: 1.8rem !important;
max-width: 1.8rem !important;
max-height: 1.8rem !important;
margin: 0 !important;
}
/* Disabled state remains obvious and accessible. */
.marketplace-product-shell .product-form__buttons button:disabled,
.marketplace-product-shell .product-form__buttons .button[aria-disabled="true"],
.marketplace-product-shell .product-form__buttons input:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
/* Keyboard focus. */
.marketplace-product-shell .product-form__buttons button:focus-visible,
.marketplace-product-shell .product-form__buttons a:focus-visible,
.marketplace-product-shell .product-form__buttons input:focus-visible,
.marketplace-product-shell .custom-share-button:focus-visible,
.marketplace-product-shell .share-button__button:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.35) !important;
outline-offset: 2px !important;
}
/* Tablet: retain full-width stack with comfortable spacing. */
@media screen and (min-width: 750px) and (max-width: 1099px) {
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 0.9rem;
--mp-action-height: 50px;
}
.marketplace-product-shell .product-form__submit,
.marketplace-product-shell .product-form__buttons button,
.marketplace-product-shell .product-form__buttons .button,
.marketplace-product-shell .product-form__buttons a.button,
.marketplace-product-shell .product-form__buttons input[type="button"],
.marketplace-product-shell .product-form__buttons input[type="submit"],
.marketplace-product-shell #wk_make_an_offer_btn,
.marketplace-product-shell #wk-askme a,
.marketplace-product-shell #wk-askme button,
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell .share-button__button,
.marketplace-product-shell .shopify-payment-button__button {
font-size: 1.4rem !important;
padding: 1rem 1.2rem !important;
}
}
/* Mobile: generous touch targets and consistent edge-to-edge width. */
@media screen and (max-width: 749px) {
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 0.85rem;
--mp-action-height: 52px;
--mp-action-radius: 9px;
}
.marketplace-product-shell .product-form__buttons,
.marketplace-product-shell .product-form__buttons > *,
.marketplace-product-shell #wk_make_an_offer,
.marketplace-product-shell #make_an_offer_btn_div,
.marketplace-product-shell #wk-askme,
.marketplace-product-shell .custom_dynamic_btns,
.marketplace-product-shell share-button,
.marketplace-product-shell .share-button,
.marketplace-product-shell .product__share {
width: 100% !important;
max-width: 100% !important;
}
.marketplace-product-shell .product-form__submit,
.marketplace-product-shell .product-form__buttons button,
.marketplace-product-shell .product-form__buttons .button,
.marketplace-product-shell .product-form__buttons a.button,
.marketplace-product-shell .product-form__buttons input[type="button"],
.marketplace-product-shell .product-form__buttons input[type="submit"],
.marketplace-product-shell #wk_make_an_offer_btn,
.marketplace-product-shell #wk_make_an_offer input,
.marketplace-product-shell #wk_make_an_offer button,
.marketplace-product-shell #wk-askme a,
.marketplace-product-shell #wk-askme button,
.marketplace-product-shell .wk-ask-a-question,
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell button.custom-share-button,
.marketplace-product-shell share-button button,
.marketplace-product-shell .share-button__button,
.marketplace-product-shell .shopify-payment-button__button,
.marketplace-product-shell .custom_dynamic_btns button,
.marketplace-product-shell .custom_dynamic_btns a {
width: 100% !important;
max-width: 100% !important;
min-height: 52px !important;
padding: 1.1rem 1.2rem !important;
font-size: 1.45rem !important;
}
}
/* ==========================================================
FINAL WIDTH OVERRIDE: LIKE + SHARE
Handles Webkul/theme wrappers that shrink-wrap their controls.
Keep this block as the final code in this stylesheet.
========================================================== */
/* Force every likely action wrapper to occupy the full purchase-card width. */
.marketplace-product-shell .marketplace-purchase-card :is(
[id*="like" i],
[class*="like" i],
[id*="wishlist" i],
[class*="wishlist" i],
[id*="share" i],
[class*="share" i]
) {
max-width: 100% !important;
box-sizing: border-box !important;
}
.marketplace-product-shell .marketplace-purchase-card :is(
div[id*="like" i],
div[class*="like" i],
div[id*="wishlist" i],
div[class*="wishlist" i],
div[id*="share" i],
div[class*="share" i],
share-button,
.product__share,
.share-button,
.share-button__fallback,
.custom-share-button-wrapper
) {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
flex: 0 0 100% !important;
align-self: stretch !important;
}
/* Force the actual Like/Wishlist and Share controls to match Add to Cart. */
.marketplace-product-shell .marketplace-purchase-card :is(
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
input[id*="like" i],
input[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
a[id*="wishlist" i],
a[class*="wishlist" i],
button[id*="share" i],
button[class*="share" i],
a[id*="share" i],
a[class*="share" i],
.custom-share-button,
.share-button__button,
share-button > button
) {
display: flex !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: var(--mp-action-height, 52px) !important;
margin: 0 !important;
padding: 1.1rem 1.4rem !important;
float: none !important;
flex: 0 0 100% !important;
align-self: stretch !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border-radius: var(--mp-action-radius, 10px) !important;
font: inherit !important;
font-size: 1.45rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: center !important;
white-space: normal !important;
}
/* Neutralize inner elements that can make the button appear shorter. */
.marketplace-product-shell .marketplace-purchase-card :is(
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
button[id*="share" i],
button[class*="share" i],
.custom-share-button,
.share-button__button
) > :is(span, div) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Keep equal spacing even when app buttons are outside the normal button stack. */
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__buttons,
.custom_dynamic_btns,
[class*="action" i][class*="button" i]
) {
row-gap: var(--mp-action-gap, 1rem) !important;
}
@media screen and (max-width: 1099px) {
.marketplace-product-shell .marketplace-purchase-card :is(
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
button[id*="share" i],
button[class*="share" i],
.custom-share-button,
.share-button__button,
share-button > button
) {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 52px !important;
}
}
/* ==========================================================
FINAL TEXT-ONLY MARKETPLACE ACTION SYSTEM
This block intentionally comes last so it overrides app CSS.
========================================================== */
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 12px;
--mp-action-height: 52px;
--mp-action-radius: 10px;
--mp-primary-bg: #0e5a3b;
--mp-primary-hover: #0b4a30;
--mp-primary-text: #ffffff;
--mp-secondary-bg: #ffffff;
--mp-secondary-hover: #f8fafc;
--mp-secondary-border: #cbd5e1;
--mp-secondary-text: #172033;
--mp-tertiary-bg: #f3f5f7;
}
/* Missing optional actions occupy no space at all. */
.marketplace-product-shell .marketplace-purchase-card [hidden],
.marketplace-product-shell .marketplace-purchase-card .marketplace-action-is-empty {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* One clean vertical action stack. */
.marketplace-product-shell .product-form__buttons,
.marketplace-product-shell .custom_dynamic_btns,
.marketplace-product-shell .marketplace-action-stack {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--mp-action-gap) !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Every action wrapper must stretch; no shrink-wrapped app containers. */
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__buttons > *,
#wk_make_an_offer,
#make_an_offer_btn_div,
#wk-askme,
.custom_dynamic_btns,
.product__share,
.share-button,
share-button,
.custom-share-button-wrapper,
[data-marketplace-action-wrapper],
div[id*="like" i],
div[class*="like" i],
div[id*="wishlist" i],
div[class*="wishlist" i]
) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
flex: 0 0 auto !important;
align-self: stretch !important;
box-sizing: border-box !important;
}
/* Consistent geometry for every visible action. */
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__submit,
.product-form__buttons button,
.product-form__buttons a.button,
.product-form__buttons input[type="button"],
.product-form__buttons input[type="submit"],
#wk_make_an_offer_btn,
#wk_make_an_offer button,
#wk_make_an_offer input[type="button"],
#wk_make_an_offer input[type="submit"],
#wk-askme a,
#wk-askme button,
.wk-ask-a-question,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
a[id*="wishlist" i],
a[class*="wishlist" i],
.custom-share-button,
button.custom-share-button,
share-button > button,
.share-button__button,
.shopify-payment-button__button
) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: var(--mp-action-height) !important;
height: auto !important;
margin: 0 !important;
padding: 12px 16px !important;
float: none !important;
flex: 0 0 auto !important;
align-self: stretch !important;
box-sizing: border-box !important;
border-radius: var(--mp-action-radius) !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-decoration: none !important;
white-space: normal !important;
}
/* Remove visual icons from action controls, including app-injected icons. */
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__buttons button,
.product-form__buttons a,
#wk_make_an_offer,
#wk-askme,
[id*="like" i],
[class*="like" i],
[id*="wishlist" i],
[class*="wishlist" i],
.product__share,
.share-button,
share-button,
.custom-share-button
) :is(svg, img, picture, .icon, [class*="icon" i], [class*="heart" i]) {
display: none !important;
}
/* Remove icon spacing left behind by nested app spans. */
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__buttons button,
.product-form__buttons a,
#wk_make_an_offer button,
#wk_make_an_offer input,
#wk-askme a,
#wk-askme button,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
.custom-share-button,
.share-button__button
) > :is(span, div) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* Primary conversion action. */
.marketplace-product-shell .product-form__submit,
.marketplace-product-shell button[name="add"],
.marketplace-product-shell .shopify-payment-button__button--unbranded {
color: var(--mp-primary-text) !important;
background: var(--mp-primary-bg) !important;
border: 1px solid var(--mp-primary-bg) !important;
box-shadow: none !important;
}
.marketplace-product-shell .product-form__submit:hover,
.marketplace-product-shell button[name="add"]:hover,
.marketplace-product-shell .shopify-payment-button__button--unbranded:hover {
color: var(--mp-primary-text) !important;
background: var(--mp-primary-hover) !important;
border-color: var(--mp-primary-hover) !important;
}
/* Secondary seller actions. */
.marketplace-product-shell .marketplace-purchase-card :is(
#wk_make_an_offer_btn,
#wk_make_an_offer button,
#wk_make_an_offer input,
#wk-askme a,
#wk-askme button,
.wk-ask-a-question,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
a[id*="wishlist" i],
a[class*="wishlist" i]
) {
color: var(--mp-secondary-text) !important;
background: var(--mp-secondary-bg) !important;
border: 1px solid var(--mp-secondary-border) !important;
box-shadow: none !important;
}
.marketplace-product-shell .marketplace-purchase-card :is(
#wk_make_an_offer_btn,
#wk_make_an_offer button,
#wk_make_an_offer input,
#wk-askme a,
#wk-askme button,
.wk-ask-a-question,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
button[id*="wishlist" i],
button[class*="wishlist" i],
a[id*="wishlist" i],
a[class*="wishlist" i]
):hover {
color: #0f172a !important;
background: var(--mp-secondary-hover) !important;
border-color: #94a3b8 !important;
}
/* Share remains full width but visually quieter. */
.marketplace-product-shell .marketplace-purchase-card :is(
.custom-share-button,
button.custom-share-button,
share-button > button,
.share-button__button
) {
color: var(--mp-secondary-text) !important;
background: var(--mp-tertiary-bg) !important;
border: 1px solid var(--mp-secondary-border) !important;
box-shadow: none !important;
}
/* Tablet keeps the same hierarchy and generous touch dimensions. */
@media screen and (min-width: 750px) and (max-width: 1099px) {
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 11px;
--mp-action-height: 50px;
}
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__submit,
.product-form__buttons button,
.product-form__buttons a.button,
.product-form__buttons input[type="button"],
#wk_make_an_offer_btn,
#wk-askme a,
#wk-askme button,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
.custom-share-button,
.share-button__button,
share-button > button
) {
min-height: 50px !important;
padding: 11px 14px !important;
font-size: 14px !important;
}
}
/* Mobile: edge-to-edge controls, no phantom rows, strong tap targets. */
@media screen and (max-width: 749px) {
.marketplace-product-shell .marketplace-purchase-card {
--mp-action-gap: 10px;
--mp-action-height: 52px;
--mp-action-radius: 9px;
}
.marketplace-product-shell .marketplace-purchase-card :is(
.product-form__submit,
.product-form__buttons button,
.product-form__buttons a.button,
.product-form__buttons input[type="button"],
#wk_make_an_offer_btn,
#wk_make_an_offer button,
#wk_make_an_offer input,
#wk-askme a,
#wk-askme button,
button[id*="like" i],
button[class*="like" i],
a[id*="like" i],
a[class*="like" i],
.custom-share-button,
.share-button__button,
share-button > button,
.shopify-payment-button__button
) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 52px !important;
padding: 12px 14px !important;
font-size: 15px !important;
}
}
/* ==========================================================
FINAL CARD PARITY + SHARE SAFETY FIX
Keep this block last.
========================================================== */
/* Never force Dawn's share fallback panel open. */
.marketplace-product-shell share-button details:not([open]) > .share-button__fallback,
.marketplace-product-shell .share-button details:not([open]) > .share-button__fallback,
.marketplace-product-shell details:not([open]) .share-button__fallback {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.marketplace-product-shell share-button details[open] > .share-button__fallback,
.marketplace-product-shell .share-button details[open] > .share-button__fallback {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-top: 0.8rem !important;
padding: 1rem !important;
box-sizing: border-box !important;
border: 1px solid var(--mp-border) !important;
border-radius: var(--mp-action-radius, 10px) !important;
background: rgb(var(--color-background)) !important;
position: static !important;
transform: none !important;
}
/* Share trigger only: full width, text-only, and never style fallback controls as purchase buttons. */
.marketplace-product-shell share-button > button,
.marketplace-product-shell share-button > details > summary,
.marketplace-product-shell .share-button > button,
.marketplace-product-shell .share-button > details > summary,
.marketplace-product-shell .custom-share-button,
.marketplace-product-shell button.custom-share-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: var(--mp-action-height, 52px) !important;
margin: 0 !important;
padding: 12px 16px !important;
box-sizing: border-box !important;
border: 1px solid var(--mp-secondary-border, #cbd5e1) !important;
border-radius: var(--mp-action-radius, 10px) !important;
background: var(--mp-tertiary-bg, #f3f5f7) !important;
color: var(--mp-secondary-text, #172033) !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: center !important;
list-style: none !important;
cursor: pointer !important;
}
.marketplace-product-shell share-button summary::-webkit-details-marker,
.marketplace-product-shell .share-button summary::-webkit-details-marker {
display: none !important;
}
.marketplace-product-shell share-button > button :is(svg, img, .icon),
.marketplace-product-shell share-button > details > summary :is(svg, img, .icon),
.marketplace-product-shell .share-button > button :is(svg, img, .icon),
.marketplace-product-shell .share-button > details > summary :is(svg, img, .icon),
.marketplace-product-shell .custom-share-button :is(svg, img, .icon) {
display: none !important;
}
/* Restore normal fallback form controls so the open share panel stays usable. */
.marketplace-product-shell .share-button__fallback button,
.marketplace-product-shell .share-button__fallback input,
.marketplace-product-shell .share-button__fallback .field,
.marketplace-product-shell .share-button__fallback .field__input {
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: revert !important;
border-radius: revert !important;
font-size: inherit !important;
font-weight: inherit !important;
}
/* Desktop: gallery and purchase surfaces occupy the same grid-row height and use the same visual treatment. */
@media screen and (min-width: 900px) {
.marketplace-product-shell {
align-items: stretch !important;
}
.marketplace-product-shell > .product__media-wrapper,
.marketplace-product-shell > .product__info-wrapper {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
}
.marketplace-product-shell > .product__info-wrapper > div {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
}
.marketplace-product-shell > .product__media-wrapper,
.marketplace-product-shell .marketplace-purchase-card {
height: 100% !important;
min-height: 100% !important;
border: 1px solid var(--mp-border) !important;
border-radius: var(--mp-radius) !important;
background: var(--mp-surface) !important;
box-shadow: var(--mp-shadow) !important;
}
.marketplace-product-shell .marketplace-purchase-card {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
position: relative !important;
top: auto !important;
}
}
/* Tablet and phone: cards stack naturally and never reserve matching-height whitespace. */
@media screen and (max-width: 899px) {
.marketplace-product-shell > .product__media-wrapper,
.marketplace-product-shell > .product__info-wrapper,
.marketplace-product-shell > .product__info-wrapper > div,
.marketplace-product-shell .marketplace-purchase-card {
height: auto !important;
min-height: 0 !important;
}
}
