Secure Checkout
Protected payments
Buyer Protection
Eligible purchases covered
Customer Support
Help when needed
CTCA Preferred
Certified Trading Card Association
2023 Panini Contenders #270 Zach Evans
This is a nice example of a 2023 Panini Contenders #270 Zach Evans
FILE 2: product-three-column-layout-conditional-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;
}
}
