.elementor-8 .elementor-element.elementor-element-70e911f3{--display:flex;}.elementor-8 .elementor-element.elementor-element-db90ca6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-ffc9540.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-db2130b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8 .elementor-element.elementor-element-db2130b.elementor-wc-products ul.products li.product .button{background-color:#000000;}.elementor-8 .elementor-element.elementor-element-db2130b.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-db2130b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-70e911f3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-72759911{column-gap:0px;}.elementor-8 .elementor-element.elementor-element-72759911 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-db90ca6{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-ffc9540.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-ffc9540{text-align:center;}.elementor-8 .elementor-element.elementor-element-db2130b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-db2130b *//*─────────────────────────────────────────────────────────── Ocean 9 Liquor – Uniform WooCommerce Product Grid (Elementor) ▸ 24 May 2025 – all-in-one stylesheet ───────────────────────────────────────────────────────────*/ /* 1 ▸ FLEX GRID LAYOUT (equal-height cards) */ .woocommerce ul.products{ display:flex; flex-wrap:wrap; gap:40px; /* row / column gap */ align-items:stretch; } .woocommerce ul.products li.product{ flex:1 0 220px; /* auto width, min 220 px */ display:flex; flex-direction:column; justify-content:space-between; padding:20px 10px 30px; border:none; background:transparent; min-height:420px; } /* 2 ▸ PRODUCT IMAGE (240-px square, gentle zoom) */ .woocommerce ul.products li.product img{ width:auto!important; height:auto!important; max-height:320px; /* ← adjust size here */ aspect-ratio:1/1; object-fit:contain; margin:0 auto 12px; padding:8px; background:#fff; transition:transform .25s ease; } .woocommerce ul.products li.product:hover img{ transform:scale(1.10); } /* 3 ▸ PRODUCT TITLE (animated underline per line) */ .woocommerce ul.products li.product h2.woocommerce-loop-product__title{ font-size:16px; font-weight:600; line-height:1.25em; margin:12px 0 4px; color:#000; word-break:break-word; /* underline built with background gradient */ background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px; /* hidden at rest */ transition:background-size .25s ease; } /* 4 ▸ PRICE */ .woocommerce ul.products li.product .price{ font-size:14px; font-weight:400; color:#000; margin:0 0 10px; } /* 5 ▸ ADD-TO-CART / OPTIONS BUTTON */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button { display: block !important; width: 100% !important; /* Take full width of the product card */ box-sizing: border-box; /* Account for padding/borders */ padding: 12px 0 !important; /* Balanced vertical/horizontal */ font-size: 16px !important; font-weight: 600 !important; border-radius: 24px !important; /* Pill shape */ text-align: center !important; /* Center the text */ line-height: 1.4 !important; } .woocommerce ul.products li.product .button:hover{ background:#444; } /* 6 ▸ HIDE VARIATION / SIZE TAG LINKS & STRAY COMMAS */ .woocommerce ul.products li.product a[class^="ct-term-"], .woocommerce ul.products li.product .product .woocommerce-product-details__short-description, .woocommerce ul.products li.product .product .meta-categories{ display:none!important; } /* suppress comma artefacts Woo adds after hidden links */ .woocommerce ul.products li.product .product .meta a + :not(a)::before{ display:none!important; } /* 7 ▸ RESPONSIVE GRID TWEAKS */ @media(max-width:1024px){ /* 3-col tablet */ .woocommerce ul.products li.product{flex:1 0 calc(33.33% - 40px);} } @media(max-width:600px){ /* 2-col mobile */ .woocommerce ul.products li.product{flex:1 0 calc(50% - 40px);} .woocommerce ul.products{gap:24px;} } /* ─────────────────────────────────────────────── REMOVE residual commas / meta rows ──────────────────────────────────────────────── */ .woocommerce ul.products li.product .meta, .woocommerce ul.products li.product .meta * , .woocommerce ul.products li.product .meta-categories{ display:none!important; /* hide wrapper & its children */ } /* defensive: kill WooCommerce “comma” pseudo-elements */ .woocommerce ul.products li.product .meta a::after{ content:none!important; } .woocommerce ul.products li.product > a.button, .woocommerce ul.products li.product > a.product_type_grouped, .woocommerce ul.products li.product > a.product_type_variable, .woocommerce ul.products li.product > form.cart{ margin-top:auto; /* pushes it to the bottom */ align-self:center; /* ⬅️ center horizontally */ display:inline-block; /* keeps existing sizing */ } /*─────────────────────────────────────────── BUTTON – responsive width / centring ───────────────────────────────────────────*/ /* Tablet (≤ 1024 px) ────────────────────*/ @media (max-width:1024px){ .woocommerce ul.products li.product .button{ padding:8px 38px; /* slimmer pill */ max-width:180px; /* never grows too wide */ } } /* Mobile (≤ 600 px) ─────────────────────*/ @media (max-width:600px){ .woocommerce ul.products li.product .button{ font-size:13px; /* optional – smaller text */ padding:8px 4px; /* tighter pill */ width:100%; /* full-width look */ text-align:center; /* keep label centred */ } } /* Make the button row itself stay level */ @media (max-width:1024px){ .woocommerce ul.products li.product{ /* ensure every card still pushes the button to the same baseline */ display:flex; flex-direction:column; } } /* Optional: shrink product images on mobile so the card height stays balanced with the new button */ @media (max-width:600px){ .woocommerce ul.products li.product img{ max-height:220px; } } /* Kill hover chrome inside tiles, but NOT the buttons */ .woocommerce ul.products li.product:hover *:not(.button):not(.add_to_cart_button):not(.added_to_cart) { box-shadow: none !important; outline: 0 !important; border-color: transparent !important; }/* End custom CSS */