/* ===========================
PRODUCT DETAIL PAGE (unchanged)
=========================== */
.product-detail.tag-coming-soon .sqs-add-to-cart-button { display: none !important; }
.product-detail.tag-coming-soon .sqs-add-to-cart-button-wrapper::after {
content: "COMING SOON";
display: block;
text-align: center;
margin-top: 20px;
font-size: 24px;
font-weight: 900;
color: #000;
text-transform: uppercase;
}
/* ===========================
GRID / STOREFRONT — replace PRICE with COMING SOON
Works with old/new 7.1 structures
=========================== */
/* 1) Hide whatever Squarespace uses for price in the grid */
.product-item.tag-coming-soon :is(
[itemprop="price"],
[data-controller*="Price"],
[class*="price"],
.sqs-money,
.sqs-money-native
){
visibility: hidden !important; /* hide the actual price text but keep layout */
position: relative;
}
/* 2) Put COMING SOON exactly where the price sits */
.product-item.tag-coming-soon :is(
[itemprop="price"],
[data-controller*="Price"],
[class*="price"],
.sqs-money,
.sqs-money-native
)::after{
content: "COMING SOON";
visibility: visible;
position: absolute;
inset: 0 auto auto 0; /* top:0; left:0 */
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 900;
color: #000;
text-transform: uppercase;
}
/* 3) Fallback: if an item has no detectable price node at all,
show COMING SOON under the title */
.product-item.tag-coming-soon:not(:has(:is(
[itemprop="price"],
[data-controller*="Price"],
[class*="price"],
.sqs-money,
.sqs-money-native
))) :is(.title, .product-title, [class*="title"])::after{
content: "COMING SOON";
display: block;
margin-top: 8px;
text-align: center;
font-size: 18px;
font-weight: 900;
color: #000;
text-transform: uppercase;
}
