/* ════════════════════════════════════════════════════
STARHEAL — Product Page Layout (Squarespace Custom CSS)
Paste into: Design → Custom CSS
Hides the native product image (working around the
Squarespace add-to-cart bug tied to it) and reflows the
page into a single, more compact column.
These are Squarespace 7.1's standard "ProductItem" class
names. If your image doesn't hide, inspect it directly
(right-click → Inspect) and send me the class shown there —
some templates rename a handful of these.
════════════════════════════════════════════════════ */
/* Hide the product image / gallery entirely */
.ProductItem-gallery,
.ProductItem-column--left {
display: none !important;
}
/* Collapse the two-column grid back to one column now that
the image is gone */
.ProductItem-columns {
display: block !important;
grid-template-columns: 1fr !important;
}
/* Let the details column take the full width, capped and
centered for a tighter reading measure instead of stretching
edge-to-edge */
.ProductItem-details,
.ProductItem-column--right {
width: 100% !important;
max-width: 680px !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
/* ── Tighter vertical rhythm ── */
.ProductItem-details-excerpt-title,
.ProductItem-title {
margin-bottom: 8px !important;
}
.ProductItem-price {
margin-bottom: 20px !important;
font-family: 'Inter', sans-serif !important;
color: #7A8FA6 !important;
}
.ProductItem-details-excerpt {
margin-bottom: 28px !important;
max-width: 620px !important;
}
/* Quantity selector, if shown — align it with everything else
above the button instead of floating oddly */
.ProductItem-quantity-input {
margin-bottom: 20px !important;
}
/* Add to Cart — full width within the capped column, matches
the rest of the site's pill-button system */
.sqs-add-to-cart-button,
.ProductItem-details form button[type="submit"] {
width: 100% !important;
max-width: 420px !important;
border-radius: 999px !important;
}