/* ============================================================================ AGK PRODUCT CARD — Stile unico e condiviso della card prodotto ============================================================================ Questo file è la SINGOLA fonte di verità per lo stile della card prodotto (.product-miniature) su tutto il sito Agrokron. Usato da: - cp_newproducts (carosello "Nuovi prodotti") - cp_featuredproducts (carosello "Featured Products") - agroshopcatalog (griglia con filtri) — si appoggia a queste classi Caricare UNA SOLA VOLTA nel del tema (es. in head.tpl), NON dentro i singoli moduli. I moduli devono contenere solo il CSS del proprio layout (slider, griglia, filtri), mai la card in sé. Se in futuro un modulo ha bisogno di una variante della card, aggiungere una classe modificatore qui (es. .product-miniature--compact) invece di ridefinire le proprietà altrove. ============================================================================ */ /* ============================================================ 1. STRUTTURA BASE CARD ============================================================ */ .product-miniature { background: #ffffff !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; position: relative !important; margin-bottom: 30px !important; transition: box-shadow 0.3s ease-in-out !important; overflow: hidden !important; } .product-miniature:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; } .product-miniature svg { max-width: none !important; } /* ============================================================ 2. AREA IMMAGINE ============================================================ */ .product-miniature .thumbnail-container { background-color: #f4f6f5 !important; position: relative; padding: 28px 10px 38px 10px !important; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1.12; margin-bottom: 0 !important; } .product-miniature .thumbnail-container img { max-width: 90% !important; max-height: 90% !important; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.3s ease; } .product-miniature:hover .thumbnail-container img { transform: scale(1.03); } /* ============================================================ 3. FASCIA SCONTO SCORREVOLE INFINITA ============================================================ */ .scrolling-discount-banner { position: absolute; top: 0; left: 0; width: 100%; height: 22px !important; background: #d0021b !important; color: #ffffff !important; z-index: 15; overflow: hidden; display: flex; align-items: center; } .scrolling-text { display: flex; width: max-content; animation: marquee-discount 35s linear infinite; } .scrolling-text span { display: inline-block; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 1px !important; line-height: 1; white-space: nowrap; } @keyframes marquee-discount { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Spostamento dinamico cuore e badge se c'è il ticker sconto */ .thumbnail-container.has-ticker .product-flags { top: 28px !important; } .thumbnail-container.has-ticker .wishlist-icon { top: 28px !important; } /* ============================================================ 4. BARRA COUNTDOWN ============================================================ */ .countdown-custom-wrapper { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 35px !important; background: rgba(194, 24, 58, 0.95) !important; z-index: 10 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; } .countdown-custom-wrapper .cd-icon { display: none !important; } .countdown-custom-wrapper .ak-countdown-inline, .countdown-custom-wrapper .countdown, .countdown-custom-wrapper .running, .countdown-custom-wrapper timer, .countdown-custom-wrapper .countdown-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; position: static !important; width: 100% !important; height: 100% !important; box-shadow: none !important; } .countdown-custom-wrapper .countdown-section { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; justify-content: center !important; padding: 0 6px !important; margin: 0 !important; position: relative !important; background: transparent !important; border: none !important; height: auto !important; } .countdown-custom-wrapper .countdown-section:not(:last-child)::after { content: '' !important; position: absolute !important; right: 0 !important; top: 15% !important; height: 70% !important; width: 1px !important; background-color: rgba(255, 255, 255, 0.3) !important; } .countdown-custom-wrapper .countdown-amount { font-size: 17px !important; font-weight: 700 !important; color: #ffffff !important; background: transparent !important; background-color: transparent !important; padding: 0 2px 0 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; min-width: 0 !important; height: auto !important; line-height: 1 !important; box-shadow: none !important; display: block !important; } .countdown-custom-wrapper .countdown-period { font-size: 11px !important; font-weight: 700 !important; color: #ffffff !important; text-transform: lowercase !important; line-height: 1 !important; opacity: 0.9 !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 5. BADGE & WISHLIST (CUORE) ============================================================ */ .product-miniature .product-flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; z-index: 2; transition: top 0.3s ease; } .product-miniature .product-flag { font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase; padding: 4px 10px !important; border-radius: 20px !important; color: white; letter-spacing: 0.5px; display: inline-block; width: fit-content; line-height: 1.4; } .product-miniature .product-flag.new { background-color: #f09800 !important; color: #1a1a1a !important; } .product-miniature .product-flag.out_of_stock { background-color: #d0021b !important; } .wishlist-icon { position: absolute; top: 12px; right: 10px; color: #bbb; background: rgba(255,255,255,0.85); border: none; border-radius: 50%; cursor: pointer; z-index: 2; padding: 6px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); transition: all 0.3s ease; } .wishlist-icon svg { width: 18px !important; height: 18px !important; } .wishlist-icon:hover { color: #f09800; } /* ============================================================ 6. CORPO TESTI (titolo, brand, referenza, disponibilità) ============================================================ */ .cpnp-body-wrapper { padding: 14px 12px 0 !important; display: flex; flex-direction: column; flex: 1; } .product-miniature .product-brand { color: #555555 !important; font-size: 12px !important; text-transform: uppercase !important; margin: 0 0 6px !important; font-weight: 700 !important; letter-spacing: 0.6px; text-align: left !important; } .product-miniature .product-title { margin: 0 0 6px !important; line-height: 1.35 !important; min-height: 62px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-align: left !important; } .product-miniature .product-title a { color: #111 !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; } .product-miniature .product-title a:hover { color: #f09800 !important; } .product-miniature .product-reference { font-size: 12px; color: #aaa; margin: 0 0 5px; font-style: normal; text-align: left !important; } .product-miniature .star-content { margin: 4px 0; text-align: left !important; } .product-availability-msg { font-size: 12px; margin: 5px 0 0; display: flex; align-items: center; gap: 6px; font-weight: 600; } .product-availability-msg svg { width: 11px !important; height: 11px !important; flex-shrink: 0 !important; fill: currentColor; } .product-availability-msg .availability-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ 7. FOOTER CARD (prezzi e pulsanti) ============================================================ */ .product-bottom-row { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: auto -12px 0 !important; padding: 15px 12px 12px !important; gap: 10px !important; border-top: 1px solid #f0f0f0; background: #fafafa; } .product-price-col { display: flex; flex-direction: column; align-items: center !important; justify-content: flex-end !important; width: 100%; min-height: 48px !important; } .discount-container { display: flex; align-items: center; justify-content: center !important; gap: 4px; margin-bottom: 2px; } .product-miniature .price { color: #B30000 !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1; white-space: nowrap; margin: 5px 0 !important; } .product-miniature .regular-price { color: #777777 !important; text-decoration: line-through !important; font-size: 14px !important; line-height: 1; } /* ============================================================ 8. PULSANTI (aggiungi al carrello / opzioni / esaurito) ============================================================ */ .product-miniature .product-bottom-row form { margin: 0 !important; width: 100% !important; } .product-miniature .btn.add-to-cart, .product-miniature .btn.view-options, .product-miniature .btn.out-of-stock { width: 100% !important; border-radius: 8px !important; font-weight: 700 !important; padding: 10px 10px !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.2s ease !important; white-space: nowrap; text-decoration: none; cursor: pointer; flex-shrink: 0; } .product-miniature .btn.add-to-cart svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } /* Pulsante primario: Aggiungi al carrello */ form button.btn.btn-primary.add-to-cart.mio-pulsante-carrello { background-color: #f09800 !important; color: #000000 !important; border: 1px solid #f09800 !important; box-shadow: none !important; } form button.btn.btn-primary.add-to-cart.mio-pulsante-carrello svg { stroke: #000000 !important; fill: none !important; } form button.btn.btn-primary.add-to-cart.mio-pulsante-carrello:hover { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } form button.btn.btn-primary.add-to-cart.mio-pulsante-carrello:hover svg { stroke: #ffffff !important; } /* Pulsante secondario: Scegli opzioni */ a.btn.view-options.mio-pulsante-opzioni { background-color: #ffffff !important; color: #111111 !important; border: 1.5px solid #111111 !important; } a.btn.view-options.mio-pulsante-opzioni:hover { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } /* Pulsante disabilitato: Esaurito */ .product-miniature .btn.out-of-stock { background-color: #f3f4f6 !important; color: #6b7280 !important; cursor: not-allowed !important; border: 1px solid #e5e7eb !important; }