/* ============================================================ PRODUCT CARD OVERLAY — COMPLETE VERSION ============================================================ DESKTOP >= 992px ------------------------------------------------------------ - Wishlist + Quick View: top-right - Hidden until product hover - Quantity stepper: bottom-center - Add to Cart: separate circular button - Green WooCommerce check: aligned beside cart button TABLET 768–991px ------------------------------------------------------------ - Same bottom-center layout - Always visible MOBILE <= 767px ------------------------------------------------------------ - Bottom controls hidden - Wishlist + Quick View + Add to Cart text pill stacked top-right - Quantity stepper completely hidden ============================================================ */ /* ============================================================ PRODUCT IMAGE — POSITIONING REFERENCE ============================================================ */ .et-main-products .product .product_thumbnail { position: relative !important; overflow: hidden !important; } /* ============================================================ TOP-RIGHT SIDE ICONS ============================================================ */ .et-main-products .product .et-side-icons { position: absolute !important; top: 12px !important; right: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 999 !important; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } /* ============================================================ BOTTOM CONTROL GROUP ------------------------------------------------------------ This wrapper contains: [ QUANTITY CAPSULE ] [ CART BUTTON ] [ GREEN CHECK ] ============================================================ */ .et-main-products .product .actions-wrapper { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 8px !important; width: max-content !important; max-width: calc(100% - 16px) !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; z-index: 999 !important; transform: translateX(-50%) !important; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } /* ============================================================ QUANTITY CAPSULE ------------------------------------------------------------ ONLY the quantity stepper lives inside this capsule. ============================================================ */ .et-main-products .product .et-cart-capsule { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; height: 42px !important; min-width: 50% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #AC7E26 !important; border-radius: 999px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important; white-space: nowrap !important; flex-shrink: 0 !important; transform: none !important; } /* ============================================================ QUANTITY STEPPER ============================================================ */ .et-main-products .product .et-cart-capsule .et-qty-stepper { position: relative !important; width: auto !important; height: 42px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; background: transparent !important; } /* ============================================================ PLUS / MINUS BUTTONS ============================================================ */ .et-main-products .product .et-cart-capsule .et-qty-stepper button { width: 30px !important; height: 42px !important; min-width: 30px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; background: transparent !important; color: #fff !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .2s ease, opacity .2s ease; } .et-main-products .product .et-cart-capsule .et-qty-stepper button:hover { background: rgba(255, 255, 255, .15) !important; } /* ============================================================ QUANTITY VALUE ============================================================ */ .et-main-products .product .et-cart-capsule .et-qty-stepper .et-qty-value { min-width: 25px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; } /* ============================================================ SEPARATE ADD TO CART BUTTON ------------------------------------------------------------ It is OUTSIDE the quantity capsule. ============================================================ */ .et-main-products .product .actions-wrapper > .add_to_cart_button { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; border-radius: 50% !important; background: #AC7E26 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transform: none !important; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } /* ============================================================ CART BUTTON HOVER ============================================================ */ .et-main-products .product .actions-wrapper > .add_to_cart_button:hover { background: #946A1F !important; transform: translateY(-1px) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important; } /* ============================================================ CART ICON ============================================================ */ .et-main-products .product .actions-wrapper > .add_to_cart_button .icon, .et-main-products .product .actions-wrapper > .add_to_cart_button .et-icon { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 17px !important; line-height: 1 !important; transform: none !important; } /* Hide desktop Add to Cart text */ .et-main-products .product .actions-wrapper > .add_to_cart_button .text { display: none !important; } /* ============================================================ WOOCOMMERCE GREEN CHECK / ADDED TO CART ------------------------------------------------------------ Align it vertically with the cart button. ============================================================ */ .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 20px !important; height: 42px !important; min-width: 20px !important; margin: 0 0 0 1px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; vertical-align: middle !important; transform: none !important; } /* Green check pseudo element */ .et-main-products .product .actions-wrapper > .added_to_cart::before, .et-main-products .product .actions-wrapper > a.added_to_cart::before { position: static !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transform: none !important; } /* ============================================================ DESKTOP >= 992px ------------------------------------------------------------ HOVER TO REVEAL ============================================================ */ @media (min-width: 992px) { .et-main-products .product .et-side-icons, .et-main-products .product .actions-wrapper { opacity: 0 !important; visibility: hidden !important; } .et-main-products .product .et-side-icons { transform: translateY(-6px) !important; } .et-main-products .product .actions-wrapper { transform: translateX(-50%) translateY(8px) !important; } /* Product hover */ .et-main-products .product:hover .et-side-icons { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .et-main-products .product:hover .actions-wrapper { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; } } /* ============================================================ TABLET 768–991px ------------------------------------------------------------ ALWAYS VISIBLE ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .et-side-icons, .et-main-products .product .actions-wrapper { opacity: 1 !important; visibility: visible !important; } .et-main-products .product .et-side-icons { transform: none !important; } .et-main-products .product .actions-wrapper { transform: translateX(-50%) !important; bottom: 8px !important; gap: 5px !important; } /* Smaller capsule */ .et-main-products .product .et-cart-capsule { height: 38px !important; min-width: 78px !important; } .et-main-products .product .et-cart-capsule .et-qty-stepper { height: 38px !important; } .et-main-products .product .et-cart-capsule .et-qty-stepper button { width: 27px !important; height: 38px !important; min-width: 27px !important; min-height: 38px !important; } .et-main-products .product .et-cart-capsule .et-qty-stepper .et-qty-value { min-width: 22px !important; height: 38px !important; font-size: 12px !important; } /* Smaller cart button */ .et-main-products .product .actions-wrapper > .add_to_cart_button { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .et-main-products .product .actions-wrapper > .add_to_cart_button .icon, .et-main-products .product .actions-wrapper > .add_to_cart_button .et-icon { font-size: 15px !important; } /* Green tick */ .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { height: 38px !important; width: 18px !important; min-width: 18px !important; } } /* ============================================================ MOBILE <= 767px ------------------------------------------------------------ Bottom controls hidden. Add to Cart moves to top-right stack. ============================================================ */ @media only screen and (max-width: 767px) { /* -------------------------------------------------------- Hide bottom controls -------------------------------------------------------- */ .products .actions-wrapper, .product .actions-wrapper, .item .actions-wrapper, .et-listing-style1 .actions-wrapper, .et-listing-style2 .actions-wrapper, .et-listing-style3 .actions-wrapper, .et-listing-style4 .actions-wrapper, .et-main-products .product .actions-wrapper { display: none !important; } /* -------------------------------------------------------- Top-right stack -------------------------------------------------------- */ .products .et-side-icons, .product .et-side-icons, .item .et-side-icons, .et-main-products .product .et-side-icons { display: flex !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; top: 10px !important; right: 10px !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; width: auto !important; height: auto !important; z-index: 999 !important; transform: none !important; pointer-events: auto !important; } .products .et-side-icons > *, .product .et-side-icons > *, .et-main-products .product .et-side-icons > * { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } /* ======================================================== MOBILE WISHLIST ======================================================== */ .et-main-products .product .et-side-icons .yith-add-to-wishlist-button-block { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, .95) !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important; padding: 0 !important; overflow: visible !important; } /* ======================================================== MOBILE QUICK VIEW ======================================================== */ .et-main-products .product .et-side-icons .et-quickview-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, .95) !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important; padding: 0 !important; overflow: visible !important; } /* Inner links */ .et-main-products .product .et-side-icons .yith-add-to-wishlist-button-block a, .et-main-products .product .et-side-icons .et-quickview-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } /* Wishlist icon */ .et-main-products .product .et-side-icons .yith-wcwl-icon { width: 16px !important; height: 16px !important; color: #1a1a1a !important; } /* Quick view icon */ .et-main-products .product .et-side-icons .et-quickview-btn .icon, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon { font-size: 15px !important; color: #1a1a1a !important; display: inline-flex !important; } /* Hide mobile labels */ .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__label, .et-main-products .product .et-side-icons .et-quickview-btn .text { display: none !important; } /* ======================================================== MOBILE ADD TO CART — TEXT PILL ======================================================== */ .et-main-products .product .et-side-icons .add_to_cart_button { width: auto !important; height: 32px !important; min-width: unset !important; min-height: unset !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #AC7E26 !important; border: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important; padding: 0 14px !important; margin: 0 !important; transform: none !important; } .et-main-products .product .et-side-icons .add_to_cart_button .text { display: inline-block !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .3px !important; white-space: nowrap !important; } .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { display: none !important; } /* -------------------------------------------------------- Product positioning -------------------------------------------------------- */ .products .product, .products .item, .products .product-inner, .products .product_thumbnail, .et-main-products .product .product_thumbnail { position: relative !important; } } /* ============================================================ VERY SMALL SCREENS <= 480px ============================================================ */ @media (max-width: 480px) { .et-main-products .product .et-side-icons { top: 8px !important; right: 8px !important; gap: 5px !important; } .et-main-products .product .et-side-icons .yith-add-to-wishlist-button-block, .et-main-products .product .et-side-icons .et-quickview-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } .et-main-products .product .et-side-icons .add_to_cart_button { height: 28px !important; padding: 0 10px !important; } .et-main-products .product .et-side-icons .add_to_cart_button .text { font-size: 10px !important; } } /* ============================================================ FINAL CART BUTTON + GREEN TICK FIX ============================================================ */ /* ============================================================ 1. REMOVE WHITE BACKGROUND FROM CART ICON ------------------------------------------------------------ Keep the gold circular button itself. Remove any white background/pseudo-element from the icon. ============================================================ */ @media (min-width: 768px) { .et-main-products .product .actions-wrapper > .add_to_cart_button { background: #AC7E26 !important; border: none !important; outline: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important; overflow: visible !important; } /* Remove theme white backgrounds */ .et-main-products .product .actions-wrapper > .add_to_cart_button::before, .et-main-products .product .actions-wrapper > .add_to_cart_button::after, .et-main-products .product .actions-wrapper > .add_to_cart_button .icon::before, .et-main-products .product .actions-wrapper > .add_to_cart_button .icon::after, .et-main-products .product .actions-wrapper > .add_to_cart_button .et-icon::before, .et-main-products .product .actions-wrapper > .add_to_cart_button .et-icon::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } /* Make the actual cart icon clean */ .et-main-products .product .actions-wrapper > .add_to_cart_button .icon, .et-main-products .product .actions-wrapper > .add_to_cart_button .et-icon { background: transparent !important; background-color: transparent !important; color: #fff !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } } /* ============================================================ 2. GREEN TICK — GIVE IT PROPER SPACE ------------------------------------------------------------ Do NOT squeeze it into a tiny 20px box. ============================================================ */ @media (min-width: 768px) { .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 24px !important; min-width: 24px !important; height: 42px !important; margin: 0 0 0 1px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; overflow: visible !important; transform: none !important; } /* Let the green icon keep its natural proportions */ .et-main-products .product .actions-wrapper > .added_to_cart::before, .et-main-products .product .actions-wrapper > a.added_to_cart::before { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; transform: none !important; font-size: 18px !important; white-space: nowrap !important; } /* If the theme uses an actual icon element */ .et-main-products .product .actions-wrapper > .added_to_cart i, .et-main-products .product .actions-wrapper > .added_to_cart svg, .et-main-products .product .actions-wrapper > a.added_to_cart i, .et-main-products .product .actions-wrapper > a.added_to_cart svg { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; transform: none !important; flex-shrink: 0 !important; } } /* ============================================================ 3. TABLET GREEN TICK ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { width: 22px !important; min-width: 22px !important; height: 38px !important; } .et-main-products .product .actions-wrapper > .added_to_cart::before, .et-main-products .product .actions-wrapper > a.added_to_cart::before { font-size: 16px !important; } .et-main-products .product .actions-wrapper > .added_to_cart i, .et-main-products .product .actions-wrapper > .added_to_cart svg, .et-main-products .product .actions-wrapper > a.added_to_cart i, .et-main-products .product .actions-wrapper > a.added_to_cart svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } } /* ============================================================ GREEN TICK — FINAL UNSQUEEZED VERSION ============================================================ */ @media (min-width: 768px) { /* Let the added-to-cart element use its natural size */ .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { position: relative !important; top: 0 !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; margin: 0 0 0 3px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; line-height: normal !important; white-space: nowrap !important; overflow: visible !important; flex: 0 0 auto !important; transform: none !important; } /* -------------------------------------------------------- Do NOT resize the actual green tick -------------------------------------------------------- */ .et-main-products .product .actions-wrapper > .added_to_cart::before, .et-main-products .product .actions-wrapper > a.added_to_cart::before { position: static !important; display: inline-block !important; width: auto !important; height: auto !important; min-width: unset !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1 !important; transform: none !important; white-space: nowrap !important; } /* -------------------------------------------------------- If the theme uses an actual icon -------------------------------------------------------- */ .et-main-products .product .actions-wrapper > .added_to_cart i, .et-main-products .product .actions-wrapper > .added_to_cart svg, .et-main-products .product .actions-wrapper > a.added_to_cart i, .et-main-products .product .actions-wrapper > a.added_to_cart svg { display: inline-block !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; transform: none !important; } } /* ============================================================ TABLET ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .actions-wrapper > .added_to_cart, .et-main-products .product .actions-wrapper > a.added_to_cart { height: 38px !important; min-height: 38px !important; margin-left: 3px !important; } } /* ============================================================ SMALL SCREENS — FIX INVISIBLE WISHLIST / QUICK VIEW ICONS ============================================================ */ @media (max-width: 991px) { /* -------------------------------------------------------- FORCE THE ICON CONTAINERS TO SHOW -------------------------------------------------------- */ .et-main-products .product .et-side-icons, .et-main-products .product .et-side-icons > * { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ======================================================== WISHLIST ======================================================== */ .et-main-products .product .et-side-icons .yith-add-to-wishlist-button-block, .et-main-products .product .et-side-icons .yith-add-to-wishlist-button-block a { opacity: 1 !important; visibility: visible !important; color: #1a1a1a !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Wishlist icon — all common YITH selectors */ .et-main-products .product .et-side-icons .yith-wcwl-icon, .et-main-products .product .et-side-icons .yith-wcwl-icon::before, .et-main-products .product .et-side-icons .yith-wcwl-icon::after, .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__icon, .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__icon::before { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; color: #1a1a1a !important; fill: #1a1a1a !important; stroke: #1a1a1a !important; background: transparent !important; width: auto !important; height: auto !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; } /* ======================================================== QUICK VIEW ======================================================== */ .et-main-products .product .et-side-icons .et-quickview-btn, .et-main-products .product .et-side-icons .et-quickview-btn .icon, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon { opacity: 1 !important; visibility: visible !important; color: #1a1a1a !important; fill: #1a1a1a !important; stroke: #1a1a1a !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; } /* Quick-view pseudo icons */ .et-main-products .product .et-side-icons .et-quickview-btn::before, .et-main-products .product .et-side-icons .et-quickview-btn::after, .et-main-products .product .et-side-icons .et-quickview-btn .icon::before, .et-main-products .product .et-side-icons .et-quickview-btn .icon::after, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon::before, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon::after { opacity: 1 !important; visibility: visible !important; color: #1a1a1a !important; fill: #1a1a1a !important; stroke: #1a1a1a !important; background: transparent !important; } /* ======================================================== HIDE TEXT ONLY ======================================================== */ .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__label, .et-main-products .product .et-side-icons .et-quickview-btn .text { display: none !important; } } /* ============================================================ MOBILE <= 767px ============================================================ */ @media (max-width: 767px) { .et-main-products .product .et-side-icons .yith-wcwl-icon, .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__icon { font-size: 15px !important; width: 16px !important; height: 16px !important; } .et-main-products .product .et-side-icons .et-quickview-btn .icon, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon { font-size: 15px !important; } } /* ============================================================ VERY SMALL <= 480px ============================================================ */ @media (max-width: 480px) { .et-main-products .product .et-side-icons .yith-wcwl-icon, .et-main-products .product .et-side-icons .yith-wcwl-add-to-wishlist-button__icon { font-size: 14px !important; width: 14px !important; height: 14px !important; } .et-main-products .product .et-side-icons .et-quickview-btn .icon, .et-main-products .product .et-side-icons .et-quickview-btn .et-icon { font-size: 14px !important; } } /* ============================================================ MOBILE ADD TO CART ICON — FORCE VISIBLE ============================================================ */ @media (max-width: 767px) { /* Add-to-cart button itself */ .et-main-products .product .et-side-icons .add_to_cart_button { opacity: 1 !important; visibility: visible !important; color: #fff !important; background: #AC7E26 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } /* Force icon to display */ .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; font-size: 15px !important; line-height: 1 !important; transform: none !important; } /* Force pseudo-element icons visible */ .et-main-products .product .et-side-icons .add_to_cart_button .icon::before, .et-main-products .product .et-side-icons .add_to_cart_button .icon::after, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon::before, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon::after { display: inline-block !important; opacity: 1 !important; visibility: visible !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Hide text if you want icon-only Add to Cart */ .et-main-products .product .et-side-icons .add_to_cart_button .text { display: none !important; } } /* ============================================================ VERY SMALL SCREENS ============================================================ */ @media (max-width: 480px) { .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { font-size: 14px !important; } } /* ============================================================ TABLET + MOBILE ADD TO CART ICON — FORCE VISIBLE ============================================================ */ @media (max-width: 991px) { /* Add to Cart button */ .et-main-products .product .et-side-icons .add_to_cart_button { opacity: 1 !important; visibility: visible !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } /* Show cart icon */ .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; } /* Force pseudo-element icon */ .et-main-products .product .et-side-icons .add_to_cart_button .icon::before, .et-main-products .product .et-side-icons .add_to_cart_button .icon::after, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon::before, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon::after { display: inline-block !important; opacity: 1 !important; visibility: visible !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Hide text — icon only */ .et-main-products .product .et-side-icons .add_to_cart_button .text { display: none !important; } } /* ============================================================ TABLET 768–991px ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { font-size: 16px !important; } } /* ============================================================ MOBILE <=767px ============================================================ */ @media (max-width: 767px) { .et-main-products .product .et-side-icons .add_to_cart_button .icon, .et-main-products .product .et-side-icons .add_to_cart_button .et-icon { font-size: 15px !important; } } /* ============================================================ TABLET 768–991px — FORCE ADD TO CART ICON ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { /* ======================================================== ADD TO CART BUTTON ======================================================== */ .et-main-products .product .actions-wrapper .add_to_cart_button { opacity: 1 !important; visibility: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; background: #AC7E26 !important; overflow: visible !important; font-size: 0 !important; line-height: 1 !important; } /* ======================================================== CART ICON ======================================================== */ .et-main-products .product .actions-wrapper .add_to_cart_button .icon, .et-main-products .product .actions-wrapper .add_to_cart_button .et-icon, .et-main-products .product .actions-wrapper .add_to_cart_button i, .et-main-products .product .actions-wrapper .add_to_cart_button svg { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; flex-shrink: 0 !important; } /* ======================================================== FORCE PSEUDO-ELEMENT ICONS ======================================================== */ .et-main-products .product .actions-wrapper .add_to_cart_button::before, .et-main-products .product .actions-wrapper .add_to_cart_button::after, .et-main-products .product .actions-wrapper .add_to_cart_button .icon::before, .et-main-products .product .actions-wrapper .add_to_cart_button .icon::after, .et-main-products .product .actions-wrapper .add_to_cart_button .et-icon::before, .et-main-products .product .actions-wrapper .add_to_cart_button .et-icon::after { opacity: 1 !important; visibility: visible !important; color: #fff !important; fill: #fff !important; stroke: #fff !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ======================================================== HIDE ADD TO CART TEXT ON TABLET ======================================================== */ .et-main-products .product .actions-wrapper .add_to_cart_button .text { display: none !important; } } /* ============================================================ FIX CART ICON INSIDE .et-side-icons Goya / Category / Product Sections ============================================================ */ .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; flex: 0 0 16px !important; } /* The actual Goya icon glyph */ .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart::before { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; background: transparent !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1 !important; position: static !important; transform: none !important; } /* ============================================================ CART BUTTON ITSELF ============================================================ */ .et-main-products .product .et-side-icons .add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; opacity: 1 !important; visibility: visible !important; background: #AC7E26 !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; overflow: visible !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; } /* Hide "Add to cart" text when button is in side-icons */ .et-main-products .product .et-side-icons .add_to_cart_button .text { display: none !important; } /* ============================================================ MAKE SURE THE ICON IS NOT HIDDEN BY THE THEME ============================================================ */ .et-main-products .product .et-side-icons .add_to_cart_button:hover .icon.et-shopping-cart, .et-main-products .product .et-side-icons .add_to_cart_button:focus .icon.et-shopping-cart, .et-main-products .product .et-side-icons .add_to_cart_button:active .icon.et-shopping-cart { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; } /* ============================================================ TABLET ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; font-size: 17px !important; flex-basis: 17px !important; } .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart::before { font-size: 17px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart { display: inline-flex !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; font-size: 15px !important; flex-basis: 15px !important; } .et-main-products .product .et-side-icons .add_to_cart_button .icon.et-shopping-cart::before { font-size: 15px !important; } } /* ============================================================ PRODUCT SECTIONS / CATEGORY BLOCKS Force overlay elements to work on every product grid ============================================================ */ .et-main-products .product .product_thumbnail, .products .product .product_thumbnail, .product .product_thumbnail { position: relative !important; } /* ============================================================ TABLET ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .et-main-products .product .actions-wrapper, .products .product .actions-wrapper, .product .actions-wrapper { display: flex !important; position: absolute !important; left: 50% !important; bottom: 15px !important; transform: translateX(-50%) !important; align-items: center !important; justify-content: center !important; gap: 6px !important; opacity: 1 !important; visibility: visible !important; z-index: 100 !important; } /* Capsule */ .et-main-products .product .et-cart-capsule, .products .product .et-cart-capsule, .product .et-cart-capsule { display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; } /* Cart button */ .et-main-products .product .actions-wrapper > .add_to_cart_button, .products .product .actions-wrapper > .add_to_cart_button, .product .actions-wrapper > .add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; border-radius: 50% !important; background: #AC7E26 !important; color: #fff !important; } .et-main-products .product .actions-wrapper > .add_to_cart_button .text, .products .product .actions-wrapper > .add_to_cart_button .text, .product .actions-wrapper > .add_to_cart_button .text { display: none !important; } .et-main-products .product .actions-wrapper > .add_to_cart_button .icon, .products .product .actions-wrapper > .add_to_cart_button .icon, .product .actions-wrapper > .add_to_cart_button .icon { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 18px !important; height: 18px !important; align-items: center !important; justify-content: center !important; color: #fff !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } }