← back to Designer Wallcoverings
Stage collection/home oversized-images CSS fix on dev theme custom.css (+ dev-preview served verifier + backup)
b6165db69d3db686f4a72875d318dfa909fc4c1c · 2026-06-23 13:44:06 -0700 · Steve Abrams
Files touched
A shopify/grid-js-fix/backups/custom.css.dev-143947038771.beforeA shopify/grid-js-fix/verify-dev-preview-served.js
Diff
commit b6165db69d3db686f4a72875d318dfa909fc4c1c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jun 23 13:44:06 2026 -0700
Stage collection/home oversized-images CSS fix on dev theme custom.css (+ dev-preview served verifier + backup)
---
.../backups/custom.css.dev-143947038771.before | 1476 ++++++++++++++++++++
shopify/grid-js-fix/verify-dev-preview-served.js | 45 +
2 files changed, 1521 insertions(+)
diff --git a/shopify/grid-js-fix/backups/custom.css.dev-143947038771.before b/shopify/grid-js-fix/backups/custom.css.dev-143947038771.before
new file mode 100644
index 00000000..ea8d7421
--- /dev/null
+++ b/shopify/grid-js-fix/backups/custom.css.dev-143947038771.before
@@ -0,0 +1,1476 @@
+/* Global font override — system sans-serif site-wide (matches product title/SKU) */
+body,html,h1,h2,h3,h4,h5,h6,p,a,span,div,li,td,th,label,input,select,textarea,button,.breadcrumbs,.breadcrumbs a,.breadcrumbs span,.main-content,.page-content,.page-title,.collection-title,.product-title,.product-vendor,.product-price,.product-description,.rte,.rte p,.rte li,.rte a,.rte span,.footer,.site-header,.navigation,.nav-link,.menu-link,.announcement-bar,.toolbar,.search-form,.search-results,.collection-grid,.product-grid,.product-list,.sidebar,.widget,.cart,.mini-cart,.shopify-section,.upper-footer,.upper-footer-item,.footer-blurb,.footer-blurb p,.footer-blurb a,.footer-linklist,.footer-linklist a,.footer-linklist li,.sub-footer-right,.sub-footer__row,.subfooter__payment-types,[class*=footer],[class*=footer] a,[class*=footer] p,[class*=footer] li,[class*=footer] span,[class*=footer] h1,[class*=footer] h2,[class*=footer] h3,[class*=footer] h4{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
+
+/* Override theme heading font (Lora serif → system sans-serif) */
+.quick-shop-modal-trigger,.product-list-item-inventory,.mega-nav-list .mega-nav-list-title .mega-nav-list-title-link,.navigation.navigation-desktop .mega-nav-list .mega-nav-list-title-link,.product-title,.home-masonry-feature-title,th,.section-title,.page-title,.shopify-policy__title h1,.shopify-policy__title .age-gate__heading,h1,.age-gate__heading,h2,h3,h4,h5,h6,.home-slideshow-slide-heading,.home-promotion-title,.collection-title,.mega-nav-list-title-link,.home-promo-grid-item-heading,.promo-grid__text,.toolbar__title,.sidebar__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
+.header-search-inline {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: nowrap;
+}
+.header-search-inline .search-form {
+ margin: 0;
+}
+.header-search-inline__visual {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ color: inherit;
+}
+.header-search-inline__visual svg {
+ width: 20px;
+ height: 20px;
+ display: block;
+}
+@media (max-width: 1079px) {
+ .header-content-right--inline-search {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: auto;
+ }
+}
+.product-list-item-thumbnail {
+ height: 0;
+ padding-bottom: 100%;
+ overflow: hidden;
+}
+.product-list-item-thumbnail > a {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+}
+.product-list-item-thumbnail img,
+.product-list-item-thumbnail svg {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.product-info .vertical-center {
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ transform: translateY(-50%);
+}
+.product-list-item > figure:hover .product-info,
+.product-grid-masonry-sizer > figure:hover .product-info {
+ opacity: 0.578159;
+}
+.product-info {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ opacity: 0;
+ transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ padding: 12px;
+ font-size: 1.07143rem;
+ text-align: center;
+ z-index: 1;
+ transform: translate(-50%) translateY(-50%);
+ color: #000;
+}
+.product-price-discount {
+ font-size: 0.9em;
+ line-height: 1.2;
+}
+
+/* ==========================================================================
+ Original custom css here
+ ========================================================================== */
+
+/* ===============================================
+// Hover Effect CSS
+// =============================================== */
+
+.hover-effect .hidden { display: block !important; visibility: visible !important;}
+.product:hover .hover-effect img { opacity: 1; }
+.hover-effect .hidden {
+position: absolute;
+z-index: -1;
+top: 0;
+width: 100%;
+height: 100%;
+opacity: 0;
+-webkit-transition: opacity 0.3s ease-in-out;
+-moz-transition: opacity 0.3s ease-in-out;
+-o-transition: opacity 0.3s ease-in-out;
+transition: opacity 0.3s ease-in-out;
+}
+.hover-effect:hover .hidden {
+z-index: 100000;
+opacity: 1;
+}
+.hover-effect .caption {
+position: absolute;
+top: 0;
+display: table;
+width: 100%;
+height: 100%;
+background-color: white; /* fallback for IE8 */
+background-color: rgba(255, 255, 255, 0.7);
+text-align: center;
+text-rendering: optimizeLegibility;
+}
+.hover-effect .hidden .caption .centered {
+display: table-cell;
+vertical-align: middle;
+}
+/* ===============================================
+// Reveal module
+// =============================================== */
+
+.reveal .hidden { display: block !important; visibility: visible !important;}
+.product:hover .reveal img { opacity: 1; }
+.reveal { position: relative; }
+.reveal .hidden {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ -webkit-transition: opacity 0.3s ease-in-out;
+ -moz-transition: opacity 0.3s ease-in-out;
+ -o-transition: opacity 0.3s ease-in-out;
+ transition: opacity 0.3s ease-in-out;
+}
+.reveal:hover .hidden {
+ z-index: 100000;
+ opacity: 1;
+}
+.reveal .caption {
+ position: absolute;
+ top: 0;
+ display: table;
+ width: 100%;
+ height: 100%;
+ background-color: white; /* fallback for IE8 */
+ background-color: rgba(255, 255, 255, 0.7);
+ font: 13px/1.6 sans-serif;
+ text-transform: uppercase;
+ color: #333;
+ letter-spacing: 1px;
+ text-align: center;
+ text-rendering: optimizeLegibility;
+}
+.reveal .hidden .caption .centered {
+ display: table-cell;
+ vertical-align: middle;
+}
+@media (min-width: 480px) and (max-width: 979px) {
+ .reveal .caption {
+ font-size: 11px;
+ }
+}
+div#content {
+ width: 100%;
+ max-width: 1050px;
+ margin-left: auto;
+ margin-right: auto;
+}
+/*==================== 020 css for prod Quantity ============================*/
+
+.mm_quantity {
+ display: inline-block; }
+
+.mm_quantity .input-text.qty {
+ width: 40px;
+ height: 42px;
+ padding: 0 5px;
+ text-align: center;
+ background-color: transparent;
+ border: 1px solid #efefef;
+}
+.mm_quantity.mm_buttons_added {
+ text-align: left;
+ position: relative;
+ white-space: nowrap;
+ vertical-align: top;
+}
+.mm_quantity.mm_buttons_added input {
+ display: inline-block;
+ margin: 0;
+ vertical-align: top;
+ box-shadow: none;
+}
+.mm_quantity.mm_buttons_added .minus,
+.mm_quantity.mm_buttons_added .plus {
+ padding: 7px 10px 8px;
+ height: 42px;
+ background-color: #ffffff;
+ border: 1px solid #efefef;
+ cursor:pointer;
+ color:#000000;
+}
+.mm_quantity.mm_buttons_added .minus {
+ border-right: 0;
+}
+.mm_quantity.mm_buttons_added .plus {
+ border-left: 0;
+ margin-left: 1px;
+}
+.mm_quantity.mm_buttons_added .minus:hover,
+.mm_quantity.mm_buttons_added .plus:hover {
+ background: #eeeeee;
+}
+.mm_quantity input::-webkit-outer-spin-button,
+.mm_quantity input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ margin: 0;
+}
+.mm_quantity.mm_buttons_added .minus:focus,
+.mm_quantity.mm_buttons_added .plus:focus {
+ outline: none;
+}
+/*--------*/
+.shopify-product-form .product-options label {
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 14px;
+ font-family: "Times New Roman", Times, serif;
+}
+/* Product option labels: vertically center with selects */
+.shopify-product-form .product-options label.product-option-column-1 {
+ display: flex;
+ align-items: center;
+ align-self: center;
+}
+.shopify-product-form .product-options label.product-option-column-1 strong {
+ line-height: 1.1;
+}
+/* Ensure the control column centers within the grid row too */
+.shopify-product-form .product-options .product-option-column-1 + * {
+ align-self: center;
+}
+/* Product options layout: center items + add row spacing (desktop grid) */
+body.template-product .shopify-product-form .product-options {
+ align-items: center;
+ row-gap: 3px;
+ column-gap: 14px;
+}
+body.template-product .shopify-product-form .product-options .product-option-column-1,
+body.template-product .shopify-product-form .product-options .product-option-column-1 + *,
+body.template-product .shopify-product-form .product-options .select-wrapper,
+body.template-product .shopify-product-form .product-options .last_variant {
+ margin: 0 !important;
+ align-self: center;
+}
+body.template-product .shopify-product-form .product-options label.product-option-column-1 {
+ min-height: 44px;
+}
+.mm_quantity {
+ margin-top: 10px !important;
+}
+
+@media only screen and (max-width: 769px) {
+ body.template-product .shopify-product-form .product-options {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ column-gap: 12px;
+ align-items: center;
+ width: 100%;
+ max-width: 100%;
+ }
+
+ body.template-product .shopify-product-form .product-options label.product-option-column-1 {
+ min-height: auto;
+ justify-content: flex-start;
+ grid-column: 1;
+ }
+
+ body.template-product .shopify-product-form .product-options select.single-option-selector,
+ body.template-product .shopify-product-form .product-options .last_variant,
+ body.template-product .shopify-product-form .product-options .mm_quantity {
+ grid-column: 2;
+ width: 100%;
+ }
+
+ body.template-product .shopify-product-form .product-options select.single-option-selector {
+ min-width: 0;
+ box-sizing: border-box;
+ height: 44px;
+ line-height: 44px;
+ padding-right: 28px;
+ }
+
+ body.template-product .shopify-product-form .product-options .product-option-row-1 { grid-row: 1; }
+ body.template-product .shopify-product-form .product-options .product-option-row-2 { grid-row: 2; }
+ body.template-product .shopify-product-form .product-options .product-option-row-3 { grid-row: 3; }
+ body.template-product .shopify-product-form .product-options .product-option-row-4 { grid-row: 4; }
+ body.template-product .shopify-product-form .product-options .product-option-row-5 { grid-row: 5; }
+ body.template-product .shopify-product-form .product-options .product-option-row-6 { grid-row: 6; }
+ body.template-product .shopify-product-form .product-options .product-option-row-7 { grid-row: 7; }
+ body.template-product .shopify-product-form .product-options .product-option-row-8 { grid-row: 8; }
+}
+#studioengine{
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin: 0 auto;
+ max-width: 100%;
+}
+#studioeditor {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin: 0 auto;
+ max-width: 100%;
+}
+
+
+
+/*020*/
+
+
+.shopify-product-form .product-add-to-cart{
+ display: block;
+}
+
+/*============*/
+
+/*hide variant ddl from dropdown*/
+
+.last_variant{
+ font-family: "Open Sans",sans-serif!important;
+ font-style: normal!important;
+ font-weight: 400!important;
+ color: #333!important;
+ font-size: 14px!important;
+ line-height: 1.625!important;
+ font-weight: normal!important;
+ text-transform: capitalize!important;
+
+ position: relative;
+ top: -1px;
+}
+@media only screen and (max-width: 769px) {
+ .last_variant{
+ width: 100%;
+ display: inline-block;
+
+ }
+}
+
+/* SC start 009 */
+#custom-popup-overlay{
+ position: fixed;
+ display: none;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0,0,0,0.5);
+ z-index: 99999;
+}
+#custom-popup-overlay .custom-popup-main{
+ margin: 80px auto;
+ padding: 20px;
+ background: #fff;
+ border-radius: 5px;
+ width: 30%;
+ position: relative;
+ transition: all 5s ease-in-out;
+ z-index: 9999;
+}
+#custom-popup-overlay .custom-popup-main .custom-close {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ transition: all 200ms;
+ font-size: 30px;
+ font-weight: bold;
+ text-decoration: none;
+ color: #333;
+ cursor:pointer;
+}
+#custom-popup-overlay .custom-popup-main .custom-close:hover {
+ color: #06D85F;
+}
+#custom-popup-overlay .custom-popup-main .content-main {
+ max-height: 30%;
+ overflow: auto;
+}
+#custom-popup-overlay .site-logo-in-popup{
+ text-align:center;
+ margin-top:25px;
+}
+#custom-popup-overlay .popup-content{
+ padding-top:30px;
+ text-align:center;
+}
+#custom-popup-overlay .site-logo-in-popup img{ width: 130px; }
+
+#custom-popup-overlay #contact_form{
+ padding:0px 5px;
+}
+/* Popup contact form: match intended full-width field styling */
+#custom-popup-overlay .custom-popup-main{
+ width: min(640px, calc(100% - 32px));
+ max-width: 640px;
+ padding: 40px 40px 30px;
+}
+#custom-popup-overlay .popup-content{
+ text-align: left;
+ padding-top: 20px;
+}
+#custom-popup-overlay .popup-content h2{
+ text-align: center;
+ margin: 0 0 22px;
+}
+#custom-popup-overlay .popup-content form{
+ width: 100%;
+}
+#custom-popup-overlay .field-wrap{
+ width: 100%;
+ margin: 0 0 14px;
+}
+#custom-popup-overlay .field-wrap input,
+#custom-popup-overlay .field-wrap textarea{
+ width: 100%;
+ display: block;
+ box-sizing: border-box;
+ padding: 12px 14px;
+ border: 1px solid #d9d9d9;
+ border-radius: 2px;
+ font-family: inherit;
+ font-size: 16px;
+}
+#custom-popup-overlay .field-wrap textarea{
+ min-height: 150px;
+ resize: vertical;
+}
+#custom-popup-overlay input[type="submit"]{
+ display: block;
+ width: fit-content;
+ min-width: 140px;
+ margin: 18px auto 0;
+ padding: 12px 22px;
+}
+
+@media screen and (max-width: 1100px) {
+ #custom-popup-overlay .custom-popup-main{
+ width: min(640px, calc(100% - 32px));
+ }
+}
+@media screen and (max-width: 1024px) {
+ .product-add-to-cart .add-to-cart{
+ width: 100% !important;
+ max-width:inherit !important;
+ }
+}
+@media screen and (max-width: 600px) {
+ .custom-popup-main .popup-content h2{
+ font-size:1.2rem;
+ }
+
+ #custom-popup-overlay .custom-popup-main{
+ margin: 20px auto;
+ padding: 26px 18px 20px;
+ }
+
+ #custom-popup-overlay .custom-popup-main textarea{
+ min-height:100px;
+ }
+}
+/* SC end 009 */
+
+.block-buttonpdf {
+ margin-top: 25px;
+}
+@media (min-width: 1024px) {
+ .template-search .main-content {
+ max-width: 1600px;
+ }
+
+ .template-search .section-search > .search-results-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ }
+
+ .template-search .section-search > .search-results-wrapper .search-results-count {
+ flex-basis: 100%;
+ }
+
+ #bc-sf-filter-wrapper {
+ flex-basis: 75%;
+ }
+
+ .template-search .section-search > .search-results-wrapper .search-results-wrapper {
+ flex-basis: 20%;
+ border-left: 1px solid #ccc;
+ }
+
+ #bc-sf-filter-right {
+ width: calc(100% - 237px);
+ }
+}
+.product-options #calculator .element,
+.product-options #calculator .price-marker {
+ padding-left: 0;
+ display: flex;
+ align-items: center;
+}
+.product-options #calculator .element label,
+.product-options #calculator .price-marker > label {
+ font-weight: bold;
+ font-size: 14px !important;
+ font-family: "Times New Roman", Times, serif;
+ /* margin-bottom: 10px !important; */
+ text-transform: uppercase;
+ min-width: 110px;
+ text-align: left;
+}
+.product-options #calculator .element input[type="number"],
+.product-options #calculator .element .formula-block label {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ color: #333333;
+ font-size: 14px !important;
+ padding-left: 10px;
+}
+.product-options #calculator .price-marker span label {
+ color: #444;
+ font-family: Lora, serif;
+ font-size: 1.28571rem !important;
+ font-weight: 400 !important;
+}
+.product-options #calculator .price-marker span {
+ font-family: Lora, serif;
+ font-size: 1.28571rem !important;
+ font-weight: 400 !important;
+}
+.product-options #calculator .element .formula-block {
+ margin: 0;
+}
+.collection-header {
+ text-align: center;
+}
+.dl-customize-btn, .dl-contact-btn, .dl-sample-btn, .dl-second-sample-btn, .button, .submit, input[type=submit], input[type=button], .pxs-newsletter-form-button, .pxs-image-with-text-button {
+ font-family: Lora,serif;
+ font-style: normal;
+ font-weight: 700;
+ background: black;
+ color: #fff;
+ display: inline-block;
+ text-align: center;
+ line-height: normal;
+ padding: 15px 20px;
+ border-radius: 2px;
+ text-transform: uppercase;
+ font-size: .92857rem;
+}
+/* Hide Contact Us button on product pages */
+body.template-product .dl-contact-btn {
+ display: none !important;
+}
+.home-slideshow-slide-heading {
+ text-shadow: 0px 0px 2px #000, 2px 1px 1px #000, 3px 2px 1px #000, 4px 3px 1px #000, 5px 4px 1px #000;
+ font-size: 3.5em;
+}
+.home-slideshow-slide-subheading {
+ text-shadow: 0px 0px 1px #000, 1px 1px 1px #000, 2px 2px 1px #000;
+ font-weight: 500;
+ font-size: 2em;
+}
+@media (max-width: 769px) {
+ .home-slideshow-slide-heading {
+ color: #000!important;
+ font-size: clamp(1.75rem, 6vw, 2.4rem);
+ line-height: 1.1;
+ text-shadow: 0px 0px 0px #ffffff;
+ }
+ .home-slideshow-slide-subheading {
+ color: #8a8a8a!important;
+ font-size: clamp(1rem, 4.2vw, 1.4rem);
+ line-height: 1.2;
+ text-shadow: 0px 0px 0px #ffffff;
+ font-weight: 400;
+ }
+}
+/* New header */
+.header-layout-compact-left .header-branding-desktop img {
+ max-width: 100px;
+}
+.header-main-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+@media (min-width: 1080px) {
+ .header-layout-compact-left .header-branding-desktop {
+ width: 150px;
+ text-align: center;
+ }
+ .sticky-header .header-content-right {
+ display: table-cell;
+ vertical-align: middle;
+ }
+}
+@media (max-width: 1672px) {
+ .navigation.navigation-desktop .navigation-menu > li > a, .navigation.navigation-desktop .navigation-menu summary {
+ padding: 17px 25px;
+ font-size: 14px;
+ }
+ .navigation.navigation-desktop .has-dropdown>a:after, .navigation.navigation-desktop .has-dropdown summary:after, .navigation.navigation-desktop .has-mega-nav>a:after, .navigation.navigation-desktop .has-mega-nav summary:after {
+ right: 5px;
+ }
+}
+@media (max-width: 1525px) {
+ .header-layout-compact-left .header-branding-desktop {
+ width: 100px;
+ }
+ .navigation.navigation-desktop .navigation-menu > li >a, .navigation.navigation-desktop .navigation-menu summary {
+ padding: 17px 20px;
+ }
+ .header-layout-compact-left .navigation-wrapper,
+ .sticky-header .header-layout-compact-left .navigation-wrapper {
+ width: calc(100% - 100px);
+ }
+ .header-layout-compact-left .header-content-right {
+ width: 150px;
+ }
+}
+@media (max-width: 1345px) {
+ .header-layout-compact-left .header-branding-desktop {
+ width: 80px;
+ }
+ .header-layout-compact-left .header-branding-desktop img {
+ max-width: 80px;
+ }
+ .header-main-content {
+ padding: 0 20px;
+ }
+ .header-tools .checkout-link, .header-tools .customer-links, .header-tools .cart-count {
+ font-size: 12px;
+ }
+ .header-layout-compact-left .header-content-right {
+ width: 110px;
+ }
+}
+@media (max-width: 1260px) {
+ .navigation.navigation-desktop .navigation-menu>li>a, .navigation.navigation-desktop .navigation-menu summary {
+ padding: 17px 15px;
+ }
+}
+@media (max-width: 1260px) {
+ .navigation.navigation-desktop .navigation-menu>li>a, .navigation.navigation-desktop .navigation-menu summary {
+ padding: 17px 10px;
+ }
+ .navigation.navigation-desktop .has-dropdown>a:after, .navigation.navigation-desktop .has-dropdown summary:after, .navigation.navigation-desktop .has-mega-nav>a:after, .navigation.navigation-desktop .has-mega-nav summary:after {
+ right: 0;
+ }
+}
+@media (max-width: 1079px) {
+ .header-layout-compact-left .header-content-right {
+ width: auto;
+ margin-right: 35px;
+ }
+}
+/* Product description mobile */
+.product-content__mobile {
+ display: none;
+}
+@media (max-width: 769px) {
+ .product-content__mobile {
+ display: block;
+ }
+ .product-content__desktop {
+ display: none;
+ }
+ .dl-sample-btn {
+ margin-bottom: 10px;
+ }
+ .product-title {
+ font-size: 28px;
+ }
+ .block-buttonpdf .btn-pdf {
+ padding: 10px 15px !important;
+ }
+ .product-options {
+ margin-top: 10px;
+ }
+ .product-description {
+ margin-top: 0;
+ }
+ .cp-vendor-thumb {
+ justify-content: center;
+ align-items: center;
+ }
+ .cp-vendor-thumb-img {
+ max-width: 200px;
+ }
+ .block-buttonpdf .btn-pdf {
+ margin: auto !important;
+ }
+}
+/* End - New header */
+
+#bc-sf-filter-products .product-list-item-thumbnail {
+ display: block;
+ height: 0;
+ overflow: hidden;
+ position: relative;
+ z-index: 1;
+ background-size: cover;
+}
+.product-list-item-thumbnail {
+ display: block;
+ height: 0;
+ overflow: hidden;
+ position: relative;
+ z-index: 1;
+}
+#bc-sf-filter-products .product-list-item-thumbnail img {
+ bottom: 0;
+ display: block;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.product-list-item-thumbnail img {
+ bottom: 0;
+ display: block;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.addon-item {
+ padding: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+@media screen and (max-width:767px) {
+ .addon-item {
+ flex-direction: column;
+ padding: 0px;
+ }
+}
+.addon-item .item-first {
+ display: flex;
+ align-items: center;
+}
+.addon-items .product-item-details {
+ padding: 0 30px 0 20px;
+ display: flex;
+ flex-direction: column;
+}
+.sticky-header a.visual-search-clickable {
+ display: none;
+}
+/* Hide this block temperally*/
+.pdfproductprint .block-buttonpdf button {
+ display: none !important;
+}
+.mini-cart-item-wrapper {
+ max-height: 360px;
+ overflow-y: auto;
+}
+.mini-cart-item-wrapper .mini-cart-item {
+ display: flex;
+ align-items: center;
+}
+.mini-cart-item.cart-subtotal {
+ flex-direction: column;
+}
+.subtotal-row {
+ width: 100%;
+}
+.product-add-to-cart .add-to-cart, .product-add-to-cart .shopify-payment-button__button, .dl-sample-btn, .dl-second-sample-btn, .dl-customize-btn, .dl-contact-btn {
+ width: 206px;
+ font-size: 12px !important;
+ border-radius: 99px;
+}
+.dl-sample-btn.dl-click-locked,
+.dl-second-sample-btn.dl-click-locked {
+ pointer-events: none;
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+@media screen and (max-width: 1024px) {
+ .product-add-to-cart .add-to-cart, .product-add-to-cart .shopify-payment-button__button, .dl-sample-btn, .dl-second-sample-btn, .dl-customize-btn, .dl-contact-btn {
+ width: 206px !important;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+.mini-cart-item-price, .mini-cart-item .original-price, .mini-cart-item .cart-item-discounts {
+ display: none;
+}
+.mini-cart {
+ right: 0px;
+}
+.mini-cart-wrapper.is-open .mini-cart {
+ display: block;
+}
+.product-message.error-message {
+ width: 206px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid;
+ border-radius: 99px;
+ margin-top: 10px;
+}
+.product-add-to-cart a {
+ margin-bottom: 10px;
+}
+.product-add-to-cart .add-to-cart,
+.product-add-to-cart a {
+ height: 45px;
+}
+.mini-cart-item .remove-item {
+ position: absolute;
+ top: 18px;
+ left: -25px;
+}
+.remove-item svg {
+ fill: #444;
+ width: 20px;
+}
+.product__form .hidden {
+ display: none !important;
+}
+.product-details-wrapper p {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;;
+}
+.add-to-cart.unavailable {
+ display: none !important;
+}
+.dl-second-sample-btn.unavailable {
+ display: none;
+}
+.showonly {
+ display: none;
+}
+/* ===============================================
+// Register Form Design
+// =============================================== */
+
+.register-form-card,
+.login-form-card {
+ max-width: 500px;
+ margin: 40px auto;
+ padding: 40px;
+ background: #ffffff;
+ border-radius: 8px;
+}
+.register-header,
+.login-header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+.welcome-title,
+.login-title {
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+ margin: 0 0 8px 0;
+ line-height: 1.2;
+}
+.welcome-subtitle {
+ font-size: 16px;
+ color: #666;
+ margin: 0;
+ line-height: 1.4;
+}
+.name-fields-row {
+ display: flex;
+ gap: 15px;
+ margin-bottom: 10px;
+}
+.name-field {
+ flex: 1;
+}
+.input-wrapper {
+ margin-bottom: 0;
+}
+.input-wrapper label {
+ display: block;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 8px;
+ font-size: 14px;
+}
+.input-wrapper input[type="text"],
+.input-wrapper input[type="email"],
+.input-wrapper input[type="password"],
+.input-wrapper select {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ background: #fff;
+ color: #666;
+ box-sizing: border-box;
+}
+.input-wrapper input[type="text"]:focus,
+.input-wrapper input[type="email"]:focus,
+.input-wrapper input[type="password"]:focus,
+.input-wrapper select:focus {
+ outline: none;
+ border-color: black;
+ color: white;
+}
+
+.input-wrapper input[type="submit"] {
+ width: 100%;
+ padding: 15px;
+ background: #4185f4;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ font-weight: bold;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+.input-wrapper input[type="submit"]:hover {
+ background: #3367d6;
+}
+/* OR separator between register form and social login */
+.or-separator {
+ position: relative;
+ text-align: center;
+ margin: 20px 0;
+}
+.or-separator::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: #ddd;
+}
+.or-text {
+ background: white;
+ padding: 0 15px;
+ font-weight: bold;
+ color: #333;
+ position: relative;
+ z-index: 1;
+}
+/* Hide social login widget on register and login pages */
+/* .register-form-card .os_social_widget,
+.login-form-card .os_social_widget {
+ display: none !important;
+} */
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+ .register-form-card,
+ .login-form-card {
+ margin: 20px;
+ padding: 30px 20px;
+ }
+
+ .name-fields-row {
+ flex-direction: column;
+ gap: 0;
+ }
+
+ .name-field {
+ margin-bottom: 20px;
+ }
+
+ .welcome-title,
+ .login-title {
+ font-size: 20px;
+ }
+
+ .welcome-subtitle {
+ font-size: 14px;
+ }
+
+ .keywords-desktop {
+ display: none !important;
+ }
+}
+/** More css custom cod **/
+.product-price-minimum.original {
+ text-decoration: line-through;
+ opacity: .8;
+ font-size: 1.1rem;
+}
+/* Base form control styles (missing from theme.css on some pages) */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="telephone"],
+input[type="tel"],
+input[type="number"],
+textarea,
+select {
+ font-family: Helvetica, Arial, sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ padding: 10px 12px;
+ font-size: 1rem;
+ box-sizing: border-box;
+ border-radius: 2px;
+ border: 1px solid rgba(0, 0, 0, 0.25);
+ color: inherit;
+ background: #fff;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.boost-sd__in-collection-search {
+ display: none !important;
+}
+/* === Hide prices in You May Also Like / Product Recommendations === */
+.product-recommendations .product-list-item-price {
+ display: none !important;
+}
+
+/* DW Collections Page — full-width override (loads after theme.css) */
+.template-page .page-content > .dw-ex-header,
+.template-page .page-content > .dw-ex-section,
+.template-page .page-content > .dw-ex-grid,
+.template-page .page-content > .dw-ex-gc,
+.template-page .page-content > .dw-ex-section-title,
+.template-page .page-content > .dw-coll-wrap,
+.template-page .page-content > div[class*="dw-ex-"] {
+ max-width: 1500px !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+.template-page .page-content > .dw-ex-grid {
+ max-width: 1500px !important;
+ padding-left: 24px !important;
+ padding-right: 24px !important;
+}
+
+/* ============================================
+ DW Compact Product Form — Size/Price/Qty
+ Added 2026-03-23 by ClawCoder session
+ ============================================ */
+.product-option-column-1 {
+ width: auto !important;
+ height: auto !important;
+ min-height: 0 !important;
+ margin-right: 4px !important;
+}
+.product-options {
+ display: flex !important;
+ flex-wrap: wrap !important;
+ align-items: center !important;
+ gap: 2px 0 !important;
+ margin: 4px 0 !important;
+}
+.product-options > label,
+.product-options > div.last_variant {
+ display: inline-flex !important;
+ align-items: center !important;
+ height: auto !important;
+ margin: 0 !important;
+}
+.last_variant .selected-text {
+ display: inline !important;
+ font-size: 14px !important;
+}
+.product__price {
+ margin: 2px 0 !important;
+}
+.product-sku-label,
+.product-sku-value {
+ margin-bottom: 2px !important;
+}
+.product-add-to-cart {
+ margin-top: 15px !important;
+}
+.block-buttonpdf {
+ margin-top: 10px !important;
+}
+label.product-option-row-4 {
+ height: auto !important;
+ width: auto !important;
+ margin-right: 4px !important;
+}
+.mm_quantity {
+ margin: 4px 0 !important;
+}
+/* Fix transparent PNG images showing black boxes in collection grids */
+.product-grid-image img,
+.product-image img,
+.product-card img,
+.collection-product-image img,
+.grid__image img,
+.product-grid-item img,
+.product_image img {
+ background-color: #fff !important;
+}
+.product-grid-image,
+.product-image,
+.product-card__image,
+.collection-product-image,
+.grid__image,
+.product-grid-item {
+ background-color: #fff !important;
+}
+
+/* Remove share buttons from product pages */
+.share-buttons,
+.product-share,
+.social-sharing,
+.product__social-sharing,
+.share-icons,
+[class*="share"],
+.product-social-sharing,
+.sharing {
+ display: none !important;
+}
+/* input.add-to-cart,
+input[type="submit"].add-to-cart,
+.product-add-to-cart input[type="submit"],
+.product-add-to-cart .add-to-cart {
+ background-color: #000 !important;
+ color: #fff !important;
+ border: none !important;
+ border-radius: 999px !important;
+ text-align: center !important;
+ font-weight: 500 !important;
+ font-size: 11px !important;
+ letter-spacing: 0.5px !important;
+ text-transform: uppercase !important;
+ padding: 10px 20px !important;
+ cursor: pointer !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ line-height: 1 !important;
+ -webkit-appearance: none !important;
+ appearance: none !important;
+} */
+.block-buttonpdf button.btn-pdf {
+ background-color: #000 !important;
+ color: #fff !important;
+ border: none !important;
+ border-radius: 999px !important;
+ padding: 10px 20px !important;
+ font-size: 11px !important;
+ font-weight: 500 !important;
+ letter-spacing: 0.5px !important;
+ text-transform: uppercase !important;
+ font-family: inherit !important;
+ cursor: pointer !important;
+}
+.spec-sheet-btn:hover,
+.dl-sample-btn:hover,
+input.add-to-cart:hover,
+.block-buttonpdf button.btn-pdf:hover {
+ background-color: #333 !important;
+ color: white !important;
+}
+/* Match all product action buttons to the Add to Cart button */
+.product-add-to-cart .add-to-cart,
+.product-add-to-cart .shopify-payment-button__button,
+.product-form--atc .action_button,
+.dl-sample-btn,
+.dl-second-sample-btn,
+.spec-sheet-btn {
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ width: 206px !important;
+ min-height: 45px !important;
+ padding: 10px 20px !important;
+ border-radius: 999px !important;
+ box-sizing: border-box !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ letter-spacing: 0.5px !important;
+ line-height: 1 !important;
+ text-align: center !important;
+ text-transform: uppercase !important;
+ text-decoration: none !important;
+}
+
+/* Force prices visible on product pages — overrides Boost transparent color */
+.product-price .money,
+.product-price-minimum.money,
+.product-price-discount.money,
+.product__price .money,
+.product__price span,
+#shopify-section-template--18587140849715__main .money,
+[id*="__main"] .product-price span,
+[id*="__main"] .money {
+ color: inherit !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+}
+/* === Product grid card descriptions === */
+.product-list-item-description {
+ font-size: 12px;
+ line-height: 1.45;
+ color: #666;
+ margin: 3px 0 6px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+/* === Grid Density Slider Control === */
+.collection-grid-controls {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin: 20px 0;
+ padding: 12px 16px;
+ background: #f9f9f9;
+ border-radius: 4px;
+ flex-wrap: wrap;
+}
+.collection-grid-controls label {
+ font-size: 13px;
+ font-weight: 500;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ white-space: nowrap;
+}
+.collection-grid-controls-slider {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 200px;
+}
+.collection-grid-controls-slider input[type="range"] {
+ flex: 1;
+ min-width: 120px;
+ height: 6px;
+ border-radius: 3px;
+ background: #ddd;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.collection-grid-controls-slider input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #111;
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+.collection-grid-controls-slider input[type="range"]::-moz-range-thumb {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #111;
+ cursor: pointer;
+ border: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+.collection-grid-density-value {
+ min-width: 45px;
+ text-align: center;
+ font-weight: 600;
+ color: #111;
+ font-size: 14px;
+}
+/* DW-RESPONSIVE-GRID (desktop 4 / tablet 3 / mobile 2); JS slider overrides */
+.collection-products{--grid-columns:2;display:grid !important;grid-template-columns:repeat(var(--grid-columns),1fr) !important;gap:16px !important;}
+@media (min-width:481px){.collection-products{--grid-columns:3;}}
+@media (min-width:769px){.collection-products{--grid-columns:4;}}
+
+
+/* Responsive: reduce max columns on mobile */
+@media (max-width: 768px) {
+ .collection-grid-controls {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .collection-grid-controls-slider {
+ width: 100%;
+ }
+
+ .collection-products {
+ --grid-columns: 2 !important;
+ }
+}
+}
+
+/* === Collection Cards: Image only, no text === */
+.product-list-item {
+ cursor: pointer;
+}
+
+.product-list-item-details {
+ display: none !important;
+}
+
+.product-list-item-overlay {
+ display: none !important;
+}
+
+.product-list-item-thumbnail {
+ transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.product-list-item:hover .product-list-item-thumbnail {
+ opacity: 0.9;
+ transform: scale(1.02);
+}
+
+/* Hide Boost Commerce hover overlays on collection cards */
+.dw-hover-label {
+ display: none !important;
+}
+
+.boost-sd__product-item-image-overlay {
+ display: none !important;
+}
+
+/* === Collection Card Hover Overlay: Vendor + Pattern Name === */
+.product-list-item-hover-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0);
+ transition: background 0.25s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+}
+
+.product-list-item:hover .product-list-item-hover-overlay {
+ background: rgba(0, 0, 0, 0.75);
+}
+
+.product-list-item-hover-content {
+ opacity: 0;
+ transition: opacity 0.25s ease;
+ text-align: center;
+ color: white;
+ padding: 20px;
+ pointer-events: none;
+}
+
+.product-list-item:hover .product-list-item-hover-content {
+ opacity: 1;
+}
+
+.product-list-item-hover-vendor {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ color: #aaa;
+ margin: 0 0 8px;
+ line-height: 1.2;
+}
+
+.product-list-item-hover-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ margin: 0;
+ line-height: 1.4;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.product-list-item-hover-title a {
+ color: inherit;
+ text-decoration: none;
+}
+
+/* Ensure no text below images */
+.product-list-item-details {
+ display: none !important;
+}
+
+/* Hide any secondary labels */
+.dw-hover-label {
+ display: none !important;
+}
+
+/* Compact spacing: reduce gaps between rows */
+.collection-products {
+ gap: 8px !important;
+ row-gap: 4px !important;
+}
+
+/* Reduce item margins/padding */
+.product-list-item {
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+.product-list-item-thumbnail {
+ margin: 0 !important;
+}
+
+/* Product card = image ONLY, zero space below */
+.product-list-item {
+ display: flex;
+ flex-direction: column;
+}
+
+.product-list-item-thumbnail {
+ flex: 1;
+ width: 100%;
+}
+
+.product-list-item-details {
+ display: none !important;
+ height: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+}
+
+/* Article takes only image space */
+.product-list-item article {
+ display: contents;
+}
+
+.product-list-item {
+ overflow: hidden;
+}
+
+/* Ultra-tight grid spacing */
+.collection-products {
+ gap: 2px !important;
+ row-gap: 2px !important;
+}
diff --git a/shopify/grid-js-fix/verify-dev-preview-served.js b/shopify/grid-js-fix/verify-dev-preview-served.js
new file mode 100644
index 00000000..c1193e6c
--- /dev/null
+++ b/shopify/grid-js-fix/verify-dev-preview-served.js
@@ -0,0 +1,45 @@
+/*
+ * verify-dev-preview-served.js
+ * Loads the REAL dev theme 143947038771 via ?preview_theme_id= (no injected CSS)
+ * at 1440 + 390 and measures whether the staged custom.css fix is ACTUALLY
+ * served + applied. Detects whether the preview served the dev theme by checking
+ * the served custom.css for the fix marker. READ-ONLY.
+ */
+const { chromium } = require('playwright');
+const DEV = '143947038771';
+const PAGES = [
+ { name:'HOME', url:`https://www.designerwallcoverings.com/?preview_theme_id=${DEV}` },
+ { name:'COLLECTION', url:`https://www.designerwallcoverings.com/collections/acoustical?preview_theme_id=${DEV}&pf_t_product_type=Wallcovering&pf_t_color=Green` },
+];
+async function measure(ctx,p){
+ const page=await ctx.newPage();
+ let cssHasFix=null;
+ page.on('response', async resp=>{
+ if(/\/custom\.css/.test(resp.url())){ try{ const t=await resp.text(); cssHasFix=t.includes('dw-collection-grid-fix START'); }catch(e){} }
+ });
+ try{ await page.goto(p.url,{waitUntil:'networkidle',timeout:55000}); }
+ catch(e){ await page.goto(p.url,{waitUntil:'domcontentloaded',timeout:55000}).catch(()=>{}); }
+ await page.waitForTimeout(4500);
+ await page.evaluate(()=>window.scrollTo(0,document.body.scrollHeight)).catch(()=>{});
+ await page.waitForTimeout(2000);
+ await page.evaluate(()=>window.scrollTo(0,0)).catch(()=>{});
+ const r=await page.evaluate(()=>{
+ const vis=[];
+ document.querySelectorAll('.product-list-item').forEach(c=>{const im=c.querySelector('img');if(!im)return;const w=Math.round(im.getBoundingClientRect().width);const shown=getComputedStyle(c).display!=='none'&&c.getBoundingClientRect().height>2;if(shown&&w>2)vis.push(w);});
+ vis.sort((a,b)=>b-a);
+ const boost=[];document.querySelectorAll('.boost-sd__product-item').forEach(c=>{const im=c.querySelector('img');if(im){const w=im.getBoundingClientRect().width;if(w>2)boost.push(Math.round(w));}});boost.sort((a,b)=>b-a);
+ return { blown:vis.filter(x=>x>500).length, visMax:vis[0]||0, visCount:vis.length, boostCount:boost.length, boostMax:boost[0]||0, pageH:Math.round(document.body.scrollHeight) };
+ });
+ await page.close();
+ return { ...r, cssHasFix };
+}
+(async()=>{
+ const browser=await chromium.launch({headless:true,executablePath:'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'});
+ for(const vp of [{w:1440,h:1400,n:'DESKTOP 1440'},{w:390,h:844,n:'MOBILE 390'}]){
+ console.log(`\n===== ${vp.n} (REAL dev preview, served custom.css) =====`);
+ const ctx=await browser.newContext({viewport:{width:vp.w,height:vp.h},deviceScaleFactor:vp.w===390?2:1,isMobile:vp.w===390});
+ for(const p of PAGES){const m=await measure(ctx,p);console.log(`[${p.name}] devCssServed=${m.cssHasFix} BLOWN(>500)=${m.blown} visMax=${m.visMax}px visibleCards=${m.visCount} | boost.count=${m.boostCount} max=${m.boostMax}px | pageH=${m.pageH}px`);}
+ await ctx.close();
+ }
+ await browser.close();
+})().catch(e=>{console.error('FATAL',e);process.exit(1);});
← 3142bb5b DW collection+home oversized-images: corrected root cause +
·
back to Designer Wallcoverings
·
Correct item-3 collection-image diagnosis: stale Boost fallb 12841c91 →