/* nunshen-ui — product card (JetEngine listing 7279570), step "everything visible, no hover" (2026-10-12). Reference: Palais des Thés cards — image, N° + name, formats, price and a full-width "AJOUTER" button, always visible (also on touch screens, where the old :hover overlay never showed price/button). Overrides the listing's own Elementor custom CSS (hover overlay) + legacy/product-card-cyloe.css, so selectors are prefixed with `body` (+1 specificity) and loaded after both. Rollback = stop enqueuing this file. */ /* --- card: static, no hover effect ------------------------------------------------------------------ */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 { background-color: var(--nui-white, #FFFFFF); transition: none; height: 100%; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29:hover { z-index: auto; background-color: var(--nui-white, #FFFFFF); box-shadow: none; } /* --- image: hover swaps to the ambiance image (as in production), on devices that can hover only. The positioning/opacity transition comes from listing 7279570's own CSS; touch screens keep the packshot. --- */ /* Touch screens (iPhone, Android, tablets): a tap or swipe triggers :hover, and the listing's hover rule fades the packshot out (opacity 0) to reveal the ambiance image → blank card, and iOS then needs a 2nd tap to open the product. No image hover at all on touch: packshot always visible, ambiance image never shown. */ @media (hover: none), (pointer: coarse) { body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .second-image { display: none !important; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .premiere-image, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29:hover .premiere-image { opacity: 1 !important; transition: none !important; } } /* --- the former hover panel becomes part of the card ---------------------------------------------------- */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .info-hover, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29:hover .info-hover { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; box-shadow: none; padding: 4px 10px 20px; flex-grow: 1; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .info-hover .description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; min-height: 3em; /* always reserve 2 lines (line-height 1.5) so formats/price line up across a row */ line-height: 1.5; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .conteneur-panier { margin-top: auto; min-height: 0 !important; /* Elementor sets 200 px + justify flex-end → big gap above the formats, worst on mobile */ } /* one white card (the number/name block used to stay crème while the panel below was white) */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .info-rest { background-color: var(--nui-white, #FFFFFF); } /* --- formats (swatch pictos keep their look), price and button stacked & centred ------------------------ */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.cart .variations { margin-bottom: 12px !important; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_variation_wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .woocommerce-variation-price, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .prix-listing { float: none !important; text-align: center; width: 100%; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .woocommerce-variation-price .price, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .prix-listing .price { float: none !important; font-size: var(--nui-fs-lg, 20px); font-weight: var(--nui-w-regular, 400); } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .woocommerce-variation-add-to-cart, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.cart:not(.variations_form) { display: flex; justify-content: center !important; width: 100%; } /* quantity lives in the cart, not on the card (as on Palais des Thés): the hidden input keeps value 1 */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .quantity, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 button.minus, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 button.plus { display: none !important; } /* full-width "AJOUTER" button */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button { width: 100% !important; margin: 0 !important; /* WooCommerce/Elementor give it margin-left:10px (room for the qty field) → was off-centre */ min-height: 48px; display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px !important; background-color: var(--nui-black, #000000) !important; color: var(--nui-white, #FFFFFF) !important; border: var(--nui-hairline, 1px solid #000000) !important; border-radius: var(--nui-radius, 1px) !important; font-family: var(--nui-font, "CORE SANS", sans-serif); font-size: var(--nui-fs-md, 16px); font-weight: var(--nui-w-regular, 400); text-transform: uppercase; opacity: 1; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button::after { content: "Ajouter"; } html[lang^="en"] body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button::after { content: "Add to cart"; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button .elementor-button-icon svg { width: 18px; height: 18px; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button .elementor-button-icon svg * { stroke: var(--nui-white, #FFFFFF) !important; } /* no format chosen / unavailable: say so instead of an empty white box (legacy CSS painted it white-on-white) */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.disabled { background-color: var(--nui-white, #FFFFFF) !important; color: var(--nui-grey-text, #7A7A7A) !important; border: 1px solid var(--nui-line, #E3DED8) !important; cursor: default; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.disabled .elementor-button-icon { display: none; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.wc-variation-selection-needed::after { content: "Choisir un format"; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.wc-variation-is-unavailable::after, body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.nui-no-stock .single_add_to_cart_button::after { content: "Rupture de stock"; } html[lang^="en"] body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.wc-variation-selection-needed::after { content: "Choose a size"; } html[lang^="en"] body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.wc-variation-is-unavailable::after, html[lang^="en"] body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.nui-no-stock .single_add_to_cart_button::after { content: "Out of stock"; } /* --- equal card heights in a row: stretch the JetEngine item → listing document → card, button pinned at the bottom --- */ .jet-listing-grid__item:has(> .elementor-7279570) { display: flex; flex-direction: column; } .jet-listing-grid__item > .elementor-7279570 { flex: 1 1 auto; display: flex; flex-direction: column; } body .elementor-7279570 > .elementor-element.elementor-element-3b27ac29 { flex: 1 1 auto; } /* --- add-to-cart feedback (ajax-add-to-cart.js: "Ajout…" while posting, "Ajouté" for 2 s) — no spinner, no rotation --- */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button::after { animation: none !important; transform: none !important; position: static !important; margin: 0 !important; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button[data-nui-label]::after { content: attr(data-nui-label); } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .single_add_to_cart_button.nui-adding { opacity: .6; pointer-events: none; } /* WooCommerce's "Voir le panier" link after an add: never in cards (the side cart opens instead) */ .elementor-7279570 .added_to_cart, .elementor-widget-woocommerce-product-add-to-cart .added_to_cart { display: none !important; } /* product page button while adding (its own text stays) */ .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.nui-adding { opacity: .6; pointer-events: none; } /* --- formats that cannot be bought are not shown (product-card.js marks them) --- */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 li.variable-item.nui-unavailable { display: none !important; } /* nothing buyable: no format row, just the "Rupture de stock" state */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.nui-no-stock table.variations { display: none !important; } /* --- fully out-of-stock product (WooCommerce prints a red sentence instead of a form): same look as the disabled button --- */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 p.stock.out-of-stock { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; border: 1px solid var(--nui-line, #E3DED8); color: transparent; font-size: 0; text-align: center; } body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 p.stock.out-of-stock::after { content: "Rupture de stock"; color: var(--nui-grey-text, #7A7A7A); font-family: var(--nui-font, "CORE SANS", sans-serif); font-size: var(--nui-fs-md, 16px); text-transform: uppercase; } html[lang^="en"] body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 p.stock.out-of-stock::after { content: "Out of stock"; } /* --- PayPal Payments renders (empty) Apple Pay / Google Pay / PayPal containers inside every card form on product pages ("Dans le même esprit") — 87 px of blank space under the button. Express pay belongs to the buy box, not to cards: hide them in cards only (the product page's own buttons are untouched). --- */ .elementor-7279570 .ppc-button-wrapper, .elementor-7279570 [id^="ppc-button"], .elementor-7279570 .ppcp-messages, .elementor-7279570 .ppc-button-wrapper + * :empty { display: none !important; } /* variable-product forms carry WooCommerce's 20 px bottom margin, simple-product forms don't → buttons misaligned */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 form.cart { margin-bottom: 0 !important; } /* ============================================================================================================ MOBILE (≤767 px): 2 cards per row (all 7 benchmarked tea houses do it; nunshen was the only one at 1). JetEngine sizes columns with --columns per grid; product-card grids carry .jet-listing-grid--7279570. Only grids with 2+ items (a single "thé du moment" card stays full width). Card content scaled for ~175 px. ============================================================================================================ */ @media (max-width: 767px) { .jet-listing-grid__items.jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) { --columns: 2 !important; /* each grid widget also sets --columns:1 per breakpoint with a 5-class selector */ margin: 0 -5px; width: calc(100% + 10px); } .jet-listing-grid__items.jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) > .jet-listing-grid__item { padding: 5px; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .elementor-element-3b27ac29 { --nui-card-pad: 8px; } /* number + name */ .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .elementor-element-359258fb .elementor-heading-title { font-size: 26px !important; line-height: 1.2 !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-rest h3, .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-rest .product_title { font-size: 13px !important; line-height: 1.25 !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-rest { padding-left: var(--nui-card-pad) !important; padding-right: var(--nui-card-pad) !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-rest img { max-width: 16px !important; height: auto !important; } /* description: 2 short lines */ .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-hover { padding: 4px var(--nui-card-pad) 12px !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-hover .description, .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-hover .description * { font-size: 12px !important; line-height: 1.4 !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .info-hover .description { min-height: 2.8em; } /* formats: sizes are set by --nui-tile in the FORMATS block below */ .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 form.cart .variations { margin-top: 4px !important; margin-bottom: 8px !important; } /* price + button */ .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .single_variation_wrap { gap: 8px; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .woocommerce-variation-price .price, .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .prix-listing .price { font-size: 16px !important; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .single_add_to_cart_button { min-height: 44px; padding: 10px 6px !important; font-size: 13px !important; gap: 6px; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 .single_add_to_cart_button .elementor-button-icon svg { width: 14px; height: 14px; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 p.stock.out-of-stock::after { font-size: 13px; } .jet-listing-grid--7279570:has(> .jet-listing-grid__item + .jet-listing-grid__item) .elementor-7279570 p.stock.out-of-stock { min-height: 44px; } } /* ============================================================================================================ GRID SPACING: the card carries an Elementor margin-bottom of 30 px → rows were 50 px apart vs 20 px between columns (40 vs 10 on mobile). Remove it so the grid gap is the same both ways. ============================================================================================================ */ body .elementor-7279570 > .elementor-element.elementor-element-3b27ac29 { margin-bottom: 0 !important; } /* Some excerpts are wrapped in

and Elementor appends " …" after it → a stray 3rd line. Flow it inline. */ body .elementor-7279570 .elementor-element.elementor-element-3b27ac29 .info-hover .description p { display: inline; margin: 0; } /* ============================================================================================================ FORMATS — one row, scrollable, arrows when they don't fit (Palais des Thés pattern), nunshen look: thin hairline tiles, selected = black hairline + crème fill, no drop shadow. product-card.js wraps the swatch