<style>
@media screen and (min-width: 768px) {
/* Container for Swatches */
div.swatch-attribute-options.clearfix {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
box-sizing: border-box !important;
align-content: flex-start !important;
align-items: flex-end !important;
flex-direction: row !important;
gap: 3px !important;
flex: 0 0 80% !important;
}
/* Individual Text Swatch Options */
div.swatch-attribute-options.clearfix > div.swatch-option.text {
flex: 0 0 18% !important; /* Adjusted to 40% per your second declaration */
max-width: 18% !important;
clear: none !important;
float: none !important;
display: inline-block !important;
box-sizing: border-box !important;
margin: 0 !important;
font-size: smaller !important;
white-space: normal !important;
height: auto !important;
}
/* Selected State */
div.swatch-attribute-options.clearfix > div.swatch-option.text[aria-checked="true"] {
background: #dbeee0 !important;
color: white !important;
border-color: #4dae65 !important;
}
/* Hover Effect */
div.swatch-attribute-options.clearfix > div.swatch-option.text:not([aria-checked="true"]):hover {
border-color: #3e8b51 !important;
color: #3e8b51 !important;
}
/* General Swatch Option Styles */
div.swatch-option,
div.swatch-option.text {
color: gray !important;
background-color: white !important;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-width: 15%;
justify-content: center;
}
/* Interaction States (Hover/Selected) */
div.swatch-option:not(.disabled):hover,
div.swatch-option.image:not(.disabled):hover,
div.swatch-option.color:not(.disabled):hover,
div.swatch-option.selected {
box-shadow: none !important;
color: #4dae65 !important;
border: 1px solid #fff !important;
outline: none !important;
}
/* Add to Cart Button Styling */
.product-item .tocart {
display: flex !important;
justify-content: center !important;
align-items: center !important;
border-radius: 4px !important;
font-size: 1.3rem !important;
padding: 8px 5px !important; /* Shorthand for top/bottom 8px, left/right 5px */
font-weight: 100 !important;
}
/* Grid-specific Buy Button Width */
.page-products .column.main .products-grid:not(.swiper-container) .product-items .product-item .tocart,
.column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item .tocart,
.page-products .column.main .products-grid:not(.swiper-container) .product-items .product-item .actions-primary,
.column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item .actions-primary {
width: 95%;
}
.swatch-attribute.pack_of {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
.swatch-attribute-selected-option {
padding-left: 2px !important;
}
.swatch-attribute-label {
font-weight: 500 !important;
flex: 0 0 23% !important;
font-size: smaller !important;
}
span.swatch-attribute-selected-option {
display: none !important;
}
}
</style>
<script>
var style = document.createElement('style');
style.innerHTML = `
.products-grid .product-item-info,
.products-grid .product-item-info.active,
.products-grid .product-item-info:hover {
box-shadow: none !important;
border: none !important;
outline: none !important;
transform: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
`;
document.head.appendChild(style);
</script>
<style>
.column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item .product-item-info .product-item-inner {
display: block !important;
}
.page-products .column.main .products-grid:not(.swiper-container) .product-items .product-item .product-item-info .product-item-inner, .column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item .product-item-info .product-item-inner {
display: block !important;
}
.actions-secondary {
display: none !important;
}
</style>
<!--
<script>
(function() {
function alignCartButtons() {
var cards = document.querySelectorAll('.products-grid .product-item-info');
cards.forEach(function(card) {
card.style.setProperty('display', 'flex', 'important');
card.style.setProperty('flex-direction', 'column', 'important');
card.style.setProperty('height', '500px', 'important');
card.style.setProperty('box-sizing', 'border-box', 'important');
card.style.setProperty('overflow', 'visible', 'important');
});
var details = document.querySelectorAll('.products-grid .product-item-details');
details.forEach(function(detail) {
detail.style.setProperty('display', 'flex', 'important');
detail.style.setProperty('flex-direction', 'column', 'important');
detail.style.setProperty('flex-grow', '1', 'important');
});
var actions = document.querySelectorAll('.products-grid .product-item-actions');
actions.forEach(function(action) {
action.style.setProperty('margin-top', 'auto', 'important');
action.style.setProperty('padding-top', '10px', 'important');
action.style.setProperty('display', 'block', 'important');
});
}
alignCartButtons();
document.addEventListener('DOMContentLoaded', alignCartButtons);
var observer = new MutationObserver(function() {
alignCartButtons();
});
if (document.body) {
observer.observe(document.body, { childList: true, subtree: true });
} else {
document.addEventListener('DOMContentLoaded', function() {
observer.observe(document.body, { childList: true, subtree: true });
});
}
})();
</script>
-->
<style>
@media (min-width: 769px), print {
ol li {
border: 1px solid #eee !important;
} /* Fixed: Added missing closing brace */
.page-products .column.main .products-grid:not(.swiper-container) .product-items .product-item .product-item-info,
.column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item .product-item-info {
border-radius: 0px !important;
}
.page-products .column.main .products-grid:not(.swiper-container) .product-items .product-item:hover .product-item-info,
.column.main .block.widget .products-grid:not(.swiper-container) .product-items .product-item:hover .product-item-info {
border: 1px solid black !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
}
.product-image-wrapper {
overflow: hidden !important;
}
/* li.product-item:hover {
overflow: hidden !important;
}*/
.products-grid .hover-image, .products-grid .product-image-container {
border: none !important;
}
span.product-image-wrapper {
background: transparent !important;
}
.page-products .column.main .products-grid:not(.swiper-container)
.product-items .product-item .product-item-info,
.column.main .block.widget .products-grid:not(.swiper-container)
.product-items .product-item .product-item-info {
position: static !important;
box-shadow: none !important;
padding: 0 !important;
padding-left: 0.8rem !important;
background: transparent !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: auto !important;
height: auto !important;
overflow: visible !important;
border: none !important;
}
}
</style>
<script>
(function() {
function cleanHomepageSwatches() {
const swatches = document.querySelectorAll('.swatch-option.text');
swatches.forEach(swatch => {
// Prevent an infinite loop by tagging already processed elements
if (!swatch.hasAttribute('data-numeric-cleaned')) {
let originalText = swatch.textContent.trim();
if (originalText) {
let onlyNumbers = originalText.replace(/\D/g, '');
swatch.textContent = onlyNumbers;
swatch.setAttribute('data-numeric-cleaned', 'true');
console.log(`CMS Block Changed: "${originalText}" to "${onlyNumbers}"`);
}
}
});
}
// 1. Execute immediately in case some swatches are already there
cleanHomepageSwatches();
// 2. Watch the page for dynamically loaded Magento product swatches
const observer = new MutationObserver(function (mutations) {
cleanHomepageSwatches();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
</script>
<script>
(function() {
function styleLargeSwatches() {
// Find all the target parent containers
const swatchContainers = document.querySelectorAll('.swatch-attribute-options.clearfix');
swatchContainers.forEach(container => {
// Check if this container has more than 4 child swatches
if (container.children.length > 4) {
// Apply your exact inline styles with !important
container.style.setProperty('gap', '1px', 'important');
container.style.setProperty('flex', '0 0 70%', 'important');
}
});
}
// 1. Run immediately for any swatches already on the page
styleLargeSwatches();
// 2. Watch the page for Magento's dynamic elements loading later
const observer = new MutationObserver(function (mutations) {
styleLargeSwatches();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
</script>
<script>
(function () {
function fixProductTitleHeights() {
console.log('[Product Title Fix] Running');
var productTitles = document.querySelectorAll('.product-item-name');
console.log('[Product Title Fix] Titles found:', productTitles.length);
productTitles.forEach(function (title) {
// Remove previous changes first
title.style.minHeight = '';
var height = title.getBoundingClientRect().height;
console.log(
'[Product Title Fix]',
title.textContent.trim(),
'| Height:',
height
);
// One line title = around 21px in your theme
if (height <= 25) {
title.style.minHeight = '42px';
console.log(
'[Product Title Fix] Added second line:',
title.textContent.trim()
);
}
});
}
document.addEventListener('DOMContentLoaded', function () {
console.log('[Product Title Fix] Script loaded');
fixProductTitleHeights();
// Magento rendering delay
setTimeout(function () {
fixProductTitleHeights();
}, 1000);
});
})();
</script>
