/* * Snapico Pinterest Shop — Grid Stylesheet * ========================================= * ALL rules are scoped under body.snapico-ps-active so they * NEVER fire on desktop and NEVER conflict with Shoplentor/Elementor. * * We override the WooCommerce default shop grid columns using CSS * Masonry (CSS column-count approach) which is supported in all * modern browsers and requires no JavaScript dependency. * * CSS custom properties (--sps-*) are set by the PHP dynamic block * in class-snapico-frontend.php, falling back to sensible defaults here. */ /* ────────────────────────────────────────────────────────────────── Root defaults (fallbacks — overridden by dynamic PHP output) ────────────────────────────────────────────────────────────────── */ :root { --sps-gap: 10px; --sps-card-radius: 12px; --sps-img-radius: 10px; --sps-title-size: 13px; --sps-price-size: 14px; --sps-btn-radius: 8px; --sps-btn-pv: 8px; --sps-btn-ph: 12px; --sps-card-bg: #ffffff; --sps-card-shadow: 0 2px 12px rgba(0,0,0,0.09); --sps-title-color: #1a1a1a; --sps-price-color: #e63946; --sps-badge-bg: #e63946; --sps-badge-color: #ffffff; --sps-btn-bg: #2d6a4f; --sps-btn-color: #ffffff; --sps-btn-hover-bg: #1b4332; --sps-img-ratio: unset; } /* ────────────────────────────────────────────────────────────────── SHOP PAGE GRID — fires only when .snapico-ps-active is on ────────────────────────────────────────────────────────────────── */ /* 1. Neutralise whatever column grid Shoplentor / WC sets */ body.snapico-ps-active ul.products, body.snapico-ps-active .products.columns-1, body.snapico-ps-active .products.columns-2, body.snapico-ps-active .products.columns-3, body.snapico-ps-active .products.columns-4, body.snapico-ps-active .products.columns-5 { display: block !important; column-count: 2 !important; column-gap: var(--sps-gap) !important; width: 100% !important; /* Reset any flexbox/grid that Shoplentor might have set */ flex-wrap: unset !important; grid-template-columns: unset !important; } /* 2. Each product card — Pinterest "card" style */ body.snapico-ps-active ul.products li.product { display: inline-block !important; width: 100% !important; break-inside: avoid !important; -webkit-column-break-inside: avoid !important; margin: 0 0 var(--sps-gap) 0 !important; float: none !important; /* reset any Shoplentor float */ padding: 0 !important; /* Card skin */ background: var(--sps-card-bg); border-radius: var(--sps-card-radius); box-shadow: var(--sps-card-shadow); overflow: hidden; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease; } body.snapico-ps-active ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.14); } /* 3. Product image */ body.snapico-ps-active ul.products li.product .woocommerce-loop-product__link img, body.snapico-ps-active ul.products li.product .attachment-woocommerce_thumbnail, body.snapico-ps-active ul.products li.product .wp-post-image { width: 100% !important; height: auto !important; display: block !important; border-radius: var(--sps-img-radius) var(--sps-img-radius) 0 0 !important; object-fit: cover !important; aspect-ratio: var(--sps-img-ratio) !important; } /* 4. Card body padding */ body.snapico-ps-active ul.products li.product .woocommerce-loop-product__title, body.snapico-ps-active ul.products li.product h2.woocommerce-loop-product__title, body.snapico-ps-active ul.products li.product .woocommerce-loop-product__title ~ *, body.snapico-ps-active ul.products li.product .price, body.snapico-ps-active ul.products li.product .button { padding-left: 8px !important; padding-right: 8px !important; } /* 5. Product title */ body.snapico-ps-active ul.products li.product .woocommerce-loop-product__title, body.snapico-ps-active ul.products li.product h2.woocommerce-loop-product__title { font-size: var(--sps-title-size) !important; color: var(--sps-title-color) !important; margin: 8px 0 4px !important; line-height: 1.35 !important; font-weight: 600 !important; /* Two-line clamp */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; padding-top: 0 !important; } /* 6. Price */ body.snapico-ps-active ul.products li.product .price { font-size: var(--sps-price-size) !important; color: var(--sps-price-color) !important; font-weight: 700 !important; display: block !important; margin: 4px 0 8px !important; } body.snapico-ps-active ul.products li.product .price del { opacity: 0.5; font-size: 0.85em; font-weight: 400; } /* 7. Add-to-cart / button */ body.snapico-ps-active ul.products li.product .button, body.snapico-ps-active ul.products li.product a.button, body.snapico-ps-active ul.products li.product button.button { display: block !important; width: calc(100% - 16px) !important; margin: 0 8px 10px !important; padding: var(--sps-btn-pv) var(--sps-btn-ph) !important; border-radius: var(--sps-btn-radius) !important; background: var(--sps-btn-bg) !important; color: var(--sps-btn-color) !important; border: none !important; font-size: 11px !important; font-weight: 600 !important; text-align: center !important; cursor: pointer !important; text-decoration: none !important; letter-spacing: 0.3px !important; transition: background 0.18s ease !important; box-sizing: border-box !important; } body.snapico-ps-active ul.products li.product .button:hover, body.snapico-ps-active ul.products li.product a.button:hover { background: var(--sps-btn-hover-bg) !important; color: var(--sps-btn-color) !important; } /* 8. Sale badge */ body.snapico-ps-active ul.products li.product .onsale { position: absolute !important; top: 8px !important; left: 8px !important; background: var(--sps-badge-bg) !important; color: var(--sps-badge-color) !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 7px !important; line-height: 1.4 !important; text-transform: uppercase !important; z-index: 10 !important; min-height: unset !important; min-width: unset !important; margin: 0 !important; } /* 9. Star ratings */ body.snapico-ps-active ul.products li.product .star-rating { font-size: 11px !important; margin: 4px 8px 2px !important; } /* 10. Remove any leftover float clears that Shoplentor injects */ body.snapico-ps-active ul.products::after, body.snapico-ps-active ul.products::before { display: none !important; content: none !important; } /* ────────────────────────────────────────────────────────────────── ELEMENTOR WIDGET — .snapico-ps-widget ==================================================================== FIX NOTE (v1.1.0): every property below that Elementor's Style tab also controls (background, radius, shadow, colour, font-size, padding, gap) now lives in a SINGLE-CLASS fallback rule with no !important. Elementor prints its own per-widget CSS as `.elementor-element-{id} .sps-btn { ... }` — a 2-class selector — which beats our 1-class `.sps-btn { ... }` fallback automatically, every time, regardless of load order or caching/minify plugins. Previously these lived in 3-class selectors (and one had !important), which is MORE specific than Elementor's own output — so the fallback values were always winning and silently ignoring whatever colour you picked in the widget's Style tab. That was the bug; this structure guarantees it can't happen again. These rules are ALSO fully independent from the global shop-page --sps-* variables (those belong only to the WooCommerce → Pinterest Shop settings page and the automatic archive grid above). The widget's look is controlled 100% by its own Elementor controls. ────────────────────────────────────────────────────────────────── */ /* ---- structural / layout — no Elementor equivalent, specificity is irrelevant here ---- */ .snapico-ps-widget { width: 100%; box-sizing: border-box; } .snapico-ps-widget *, .snapico-ps-widget *::before, .snapico-ps-widget *::after { box-sizing: border-box; } .snapico-ps-widget .sps-grid { display: grid; grid-template-columns: repeat(var(--sps-widget-cols, 2), 1fr); gap: var(--sps-widget-gap, 16px); } /* On tablet & phone, switch to true Pinterest masonry (variable card height) */ @media (max-width: 1024px) { .snapico-ps-widget .sps-grid { display: block; column-count: var(--sps-widget-cols, 2); column-gap: var(--sps-widget-gap, 16px); } } .snapico-ps-widget .sps-item { overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease; } .snapico-ps-widget .sps-item:hover { transform: translateY(-3px); } .snapico-ps-widget .sps-item img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: var(--sps-img-ratio, auto); } .snapico-ps-widget .sps-thumb { position: relative; display: block; } .snapico-ps-widget .sps-body { padding: 8px 10px 10px; } .snapico-ps-widget .sps-title { font-weight: 600; line-height: 1.35; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; text-overflow: ellipsis; } .snapico-ps-widget .sps-price { display: block; font-weight: 700; margin: 0 0 8px; } .snapico-ps-widget .sps-price del { opacity: 0.5; font-weight: 400; font-size: 0.85em; } .snapico-ps-widget .sps-btn { display: block; width: 100%; border: none; font-weight: 600; text-align: center; cursor: pointer; text-decoration: none; letter-spacing: 0.3px; transition: background 0.18s ease; } .snapico-ps-widget .sps-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; z-index: 5; } .snapico-ps-widget .sps-no-products { padding: 24px; text-align: center; color: #777; } /* ---- visual fallback defaults — single-class, low specificity ---- These are ALWAYS overridden by Elementor's Style tab (which prints 2-class `.elementor-element-{id} .sps-x` rules). They exist purely so the widget still looks like a polished Pinterest card before any customisation, or if Elementor's CSS hasn't generated yet. */ .sps-item { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09); margin-bottom: 16px; } .sps-item img { border-radius: 10px 10px 0 0; } .sps-title { font-size: 13px; color: #1a1a1a; } .sps-price { font-size: 14px; color: #e63946; } .sps-btn { padding: 8px 12px; background: #2d6a4f; color: #ffffff; border-radius: 8px; font-size: 12px; } .sps-btn:hover { background: #1b4332; } .sps-badge { background: #e63946; color: #ffffff; padding: 3px 7px; border-radius: 4px; } /* ────────────────────────────────────────────────────────────────── Loading state for AJAX ────────────────────────────────────────────────────────────────── */ .snapico-ps-widget.sps-loading::after { content: ''; display: block; width: 32px; height: 32px; margin: 24px auto; border: 3px solid rgba(0, 0, 0, 0.1); border-top: 3px solid #2d6a4f; border-radius: 50%; animation: sps-spin 0.7s linear infinite; } @keyframes sps-spin { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────────── Reduced-motion accessibility ────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.snapico-ps-active ul.products li.product, .snapico-ps-widget .sps-item { transition: none !important; } .snapico-ps-widget.sps-loading::after { animation: none !important; } }