.elementor-1607 .elementor-element.elementor-element-2eaea11f:not(.elementor-motion-effects-element-type-background), .elementor-1607 .elementor-element.elementor-element-2eaea11f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDFCF7;}.elementor-1607 .elementor-element.elementor-element-2eaea11f > .elementor-container{max-width:1200px;}.elementor-1607 .elementor-element.elementor-element-2eaea11f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:70px 0px 30px 0px;}.elementor-1607 .elementor-element.elementor-element-2eaea11f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1607 .elementor-element.elementor-element-7b6be51.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-1607 .elementor-element.elementor-element-74bf9b21 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-1607 .elementor-element.elementor-element-74bf9b21{text-align:center;}.elementor-1607 .elementor-element.elementor-element-74bf9b21 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;color:#D2B784;}.elementor-1607 .elementor-element.elementor-element-5b190e63{text-align:center;}.elementor-1607 .elementor-element.elementor-element-5b190e63 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:42px;font-weight:600;color:#111318;}.elementor-1607 .elementor-element.elementor-element-32d368db:not(.elementor-motion-effects-element-type-background), .elementor-1607 .elementor-element.elementor-element-32d368db > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDFCF7;}.elementor-1607 .elementor-element.elementor-element-32d368db > .elementor-container{max-width:1200px;}.elementor-1607 .elementor-element.elementor-element-32d368db{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20px 0px 80px 0px;}.elementor-1607 .elementor-element.elementor-element-32d368db > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1607 .elementor-element.elementor-element-d7d0f9d.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product{text-align:left;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products .attachment-woocommerce_thumbnail{border-radius:16px 16px 16px 16px;margin-bottom:16px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#111318;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#111318;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Inter", Sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .star-rating{color:#D2B784;margin-bottom:10px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .star-rating::before{color:#E3D9C4;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price{color:#921A32;font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price ins{color:#921A32;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price ins .amount{color:#921A32;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price del{color:#8A8578;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price del .amount{color:#8A8578;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .price del {font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .button{color:#111318;background-color:#D2B784;border-color:#D2B784;font-family:"Inter", Sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;border-style:solid;border-width:1px 1px 1px 1px;border-radius:8px 8px 8px 8px;padding:10px 0px 10px 0px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .button:hover{color:#FDFCF7;background-color:#921A32;border-color:#921A32;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8 nav.woocommerce-pagination{margin-top:50px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8 nav.woocommerce-pagination ul li a{color:#111318;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8 nav.woocommerce-pagination ul li a:hover{color:#921A32;background-color:#F3EEDF;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8 nav.woocommerce-pagination ul li span.current{color:#FDFCF7;background-color:#921A32;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product span.onsale{display:block;background-color:#921A32;font-family:"Inter", Sans-serif;font-size:11px;font-weight:700;right:auto;left:0;margin:10px;}@media(max-width:1024px){.elementor-1607 .elementor-element.elementor-element-2eaea11f{padding:50px 0px 20px 0px;}.elementor-1607 .elementor-element.elementor-element-5b190e63 .elementor-heading-title{font-size:34px;}.elementor-1607 .elementor-element.elementor-element-32d368db{padding:10px 0px 50px 0px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-1607 .elementor-element.elementor-element-2eaea11f{padding:40px 0px 15px 0px;}.elementor-1607 .elementor-element.elementor-element-5b190e63 .elementor-heading-title{font-size:28px;}.elementor-1607 .elementor-element.elementor-element-32d368db{padding:10px 15px 40px 15px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product{text-align:left;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:20px;}.elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-1607 .elementor-element.elementor-element-12ecd9e8.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-size:12px;}}/* Start custom CSS for wc-categories, class: .elementor-element-d7d0f9d *//* -------------------------------------------------------------------------- 4. CATEGORIES WIDGET — plain rounded circles, no images Widget: .elementor-widget-wc-categories Each category:
  • ...

    Name (2)

    • -------------------------------------------------------------------------- */ .elementor-widget-wc-categories ul.products { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 28px; list-style: none; margin: 0 !important; padding: 0 !important; } .elementor-widget-wc-categories li.product-category { width: auto !important; margin: 0 !important; padding: 0 !important; text-align: center; float: none !important; } .elementor-widget-wc-categories li.product-category a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; height: auto; min-width: 50px; padding: 3px 9px; border-radius: 999px; /* pill / stadium shape, matches reference */ background: transparent; border: 1px solid #d2b784; text-decoration: none; box-sizing: border-box; overflow: hidden; z-index: 0; transition: color 0.3s ease, border-color 0.3s ease; } /* fill sweeps in from left on hover — subtle, brand-colored */ .elementor-widget-wc-categories li.product-category a::before { content: ""; position: absolute; inset: 0; background: #d2b784; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; z-index: -1; } .elementor-widget-wc-categories li.product-category a:hover::before { transform: scaleX(1); } .elementor-widget-wc-categories li.product-category a:hover .woocommerce-loop-category__title { color: #1c1e24; } /* small diamond accent, echoes the logo mark */ .elementor-widget-wc-categories li.product-category a::after { content: ""; width: 3px; height: 3px; background: #921a32; transform: rotate(45deg); flex-shrink: 0; transition: background 0.3s ease; } .elementor-widget-wc-categories li.product-category a:hover::after { background: #1c1e24; } /* hide the category thumbnail entirely */ .elementor-widget-wc-categories li.product-category img { display: none !important; } .elementor-widget-wc-categories .woocommerce-loop-category__title { margin: 0 !important; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #d2b784; line-height: 1.3; white-space: nowrap; text-align: center; transition: color 0.3s ease; } .elementor-widget-wc-categories .woocommerce-loop-category__title mark.count { background: none !important; color: inherit; font-size: 8px; font-weight: 400; opacity: 0.65; padding: 0; } /* even smaller pills on mobile */ @media (max-width: 767px) { .elementor-widget-wc-categories li.product-category a { min-width: 44px; padding: 3px 8px; } .elementor-widget-wc-categories .woocommerce-loop-category__title { font-size: 8px; } } /* ========================================================================== NOVELTY EXCLUSIVE — Shop Page Custom CSS Paste this into: Appearance > Customize > Additional CSS (or your child theme's style.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. MODERN SORTING DROPDOWN -------------------------------------------------------------------------- */ .woocommerce-ordering { margin: 0 0 1.5rem 0; } .woocommerce-ordering select.orderby { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 40px 10px 16px; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; /* custom dropdown arrow */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .woocommerce-ordering select.orderby:hover { border-color: #bbb; } .woocommerce-ordering select.orderby:focus { outline: none; border-color: #888; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); } /* -------------------------------------------------------------------------- 2. "SELECT OPTIONS" -> "ADD TO CART" (label only, link/behavior unchanged) Your theme's markup: in-stock variable products render Select options We only target the combination of BOTH classes together, so the out-of-stock "Read more" link (which lacks add_to_cart_button) is left alone. -------------------------------------------------------------------------- */ a.product_type_variable.add_to_cart_button, a.product_type_grouped.add_to_cart_button { font-size: 0 !important; /* hides original text without removing it from the DOM */ } a.product_type_variable.add_to_cart_button::after, a.product_type_grouped.add_to_cart_button::after { content: "Add to Cart" !important; font-size: 14px !important; /* match your theme's button font size */ } /* -------------------------------------------------------------------------- 3. OUT OF STOCK / SOLD OUT — greyed out, slightly transparent Your theme doesn't add an "outofstock" class to the card. But WooCommerce only gives the action link the "add_to_cart_button" class when the product is in stock/purchasable — out-of-stock products get a plain "Read more" link instead. So: any .product-card with NO add_to_cart_button link inside it is an out-of-stock product. (Requires a modern browser — :has() is supported in all current Chrome/Safari/Firefox/Edge versions.) -------------------------------------------------------------------------- */ .product-card:not(:has(a.add_to_cart_button)) { opacity: 0.55 !important; filter: grayscale(40%) !important; transition: opacity 0.2s ease; } /* optional: slight hover lift so it's clear it's still browsable */ .product-card:not(:has(a.add_to_cart_button)):hover { opacity: 0.75 !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-12ecd9e8 *//* ========================================================================== NOVELTY EXCLUSIVE — Shop Page Custom CSS Paste this into: Appearance > Customize > Additional CSS (or your child theme's style.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. MODERN SORTING DROPDOWN -------------------------------------------------------------------------- */ .woocommerce-ordering { margin: 0 0 1.5rem 0; } .woocommerce-ordering select.orderby { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 40px 10px 16px; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; /* custom dropdown arrow */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .woocommerce-ordering select.orderby:hover { border-color: #bbb; } .woocommerce-ordering select.orderby:focus { outline: none; border-color: #888; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); } /* -------------------------------------------------------------------------- 2. "SELECT OPTIONS" -> "ADD TO CART" (label only, link/behavior unchanged) Your theme's markup: in-stock variable products render Select options We only target the combination of BOTH classes together, so the out-of-stock "Read more" link (which lacks add_to_cart_button) is left alone. -------------------------------------------------------------------------- */ a.product_type_variable.add_to_cart_button, a.product_type_grouped.add_to_cart_button { font-size: 0 !important; /* hides original text without removing it from the DOM */ } a.product_type_variable.add_to_cart_button::after, a.product_type_grouped.add_to_cart_button::after { content: "Add to Cart" !important; font-size: 14px !important; /* match your theme's button font size */ } /* -------------------------------------------------------------------------- 3. OUT OF STOCK / SOLD OUT — greyed out, slightly transparent Your theme doesn't add an "outofstock" class to the card. But WooCommerce only gives the action link the "add_to_cart_button" class when the product is in stock/purchasable — out-of-stock products get a plain "Read more" link instead. So: any .product-card with NO add_to_cart_button link inside it is an out-of-stock product. (Requires a modern browser — :has() is supported in all current Chrome/Safari/Firefox/Edge versions.) -------------------------------------------------------------------------- */ .product-card:not(:has(a.add_to_cart_button)) { opacity: 0.55 !important; filter: grayscale(40%) !important; transition: opacity 0.2s ease; } /* optional: slight hover lift so it's clear it's still browsable */ .product-card:not(:has(a.add_to_cart_button)):hover { opacity: 0.75 !important; }/* End custom CSS */