/** Shopify CDN: Minification failed Line 1229:0 Unexpected "}" **/ /* ============================================ FIOR CUSTOM CSS - Cleaned & Organized ============================================ */ /* VARIABILI GLOBALI */ :root { --fior-cream: #F4F2ED; --fior-tomato: #D50032; --fior-basil: #3E6B46; --fior-black: #000000; --fior-white: #ffffff; } /* ============================================ PRIMARY BUTTONS - Sistema Unificato FIOR Versione: 2.0 Mobile-Optimized Colori: Rosso (#CC3333) → Verde (#3E6B46) ============================================ */ /* Override variabili CSS del tema */ :root { --color-button-active: #3E6B46 !important; --color-button-hover: #3E6B46 !important; --tomato: #CC3333 !important; --basil: #3E6B46 !important; } /* ============================================ BASE STYLES - Desktop First ============================================ */ .button--primary, a.button--primary, button.button--primary, .button--primary.button--primary-size, a.button--primary.button--primary-size { /* Layout */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; /* Dimensioni Desktop */ padding: 18px 40px !important; font-size: 16px !important; min-height: 48px !important; border-radius: 8px !important; /* Tipografia */ font-family: var(--font-button-family, Inter, sans-serif) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; /* Colori FIOR - Rosso base */ background-color: #CC3333 !important; color: #FFFFFF !important; border: none !important; /* Comportamento */ text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; } /* ============================================ HOVER STATE - Verde Basilico ============================================ */ .button--primary:hover, a.button--primary:hover, button.button--primary:hover, .button--primary.button--primary-size:hover, a.button--primary.button--primary-size:hover { background-color: #3E6B46 !important; color: #FFFFFF !important; text-decoration: none !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(62, 107, 70, 0.3) !important; } /* ============================================ ACTIVE STATE - Verde Basilico ============================================ */ .button--primary:active, a.button--primary:active, button.button--primary:active, .button.button--primary:active, [class*="button--primary"]:active, .button--primary.button--primary-size:active, a.button--primary.button--primary-size:active { background-color: #3E6B46 !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(62, 107, 70, 0.4) !important; } /* ============================================ FOCUS STATE - Mantieni rosso per accessibility ============================================ */ .button--primary:focus, .button--primary:focus-visible { background-color: #CC3333 !important; color: #FFFFFF !important; outline: 2px solid #3E6B46 !important; outline-offset: 2px !important; } /* ============================================ ELEMENTI INTERNI - Reset decorazioni ============================================ */ .button--primary span, .button--primary svg, .button--primary:visited { text-decoration: none !important; } /* ============================================ IMAGE TABS - Override Specifico ============================================ */ .image-tabs .button, .image-tabs a.button, .image-tabs .button--primary, .image-tabs a.button--primary, .image-tabs .button--primary-size, .image-tabs a.button--primary-size, .image-tabs .image-tabs__button-wrraper .button, .image-tabs .image-tabs__button-wrraper a { /* Layout forzato */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; /* Dimensioni specifiche Image Tabs */ padding: 12px 28px !important; font-size: 16px !important; min-height: 48px !important; height: auto !important; line-height: 1.2 !important; /* Tipografia */ font-family: var(--font-button-family, Inter, sans-serif) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; /* Colori */ background-color: #CC3333 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; /* Comportamento */ text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; white-space: nowrap !important; /* Previeni override */ width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* Image Tabs - Hover */ .image-tabs .button:hover, .image-tabs a.button:hover, .image-tabs .button--primary:hover, .image-tabs a.button--primary:hover, .image-tabs .button--primary-size:hover, .image-tabs .image-tabs__button-wrraper .button:hover, .image-tabs .image-tabs__button-wrraper a:hover { background-color: #3E6B46 !important; color: #FFFFFF !important; text-decoration: none !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(62, 107, 70, 0.3) !important; } /* Image Tabs - Active */ .image-tabs .button:active, .image-tabs a.button:active, .image-tabs .button--primary:active, .image-tabs a.button--primary:active { background-color: #3E6B46 !important; color: #FFFFFF !important; border: none !important; transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(62, 107, 70, 0.4) !important; } /* Image Tabs - Elementi interni */ .image-tabs .button span, .image-tabs .button svg, .image-tabs a.button span, .image-tabs a.button svg { text-decoration: none !important; pointer-events: none !important; } /* ============================================ NEWSLETTER FORM - Layout Speciale ============================================ */ .newsletter-form .button--primary, .newsletter__button.button--primary { display: block !important; width: 100% !important; max-width: none !important; margin-top: 12px !important; } /* ============================================ MOBILE RESPONSIVE - 749px e sotto ============================================ */ @media (max-width: 749px) { /* Bottoni Primary Globali */ .button--primary, a.button--primary, button.button--primary, .button.button--primary, [class*="button--primary"], .button--primary.button--primary-size, a.button--primary.button--primary-size, /* Bottoni specifici */ .header__icon--account .button--primary, .header__menu-item .button--primary, .cart__checkout-button, .product-form__submit, .skip-to-content-link, a[href*="#main-content"].button--primary { /* Padding mobile ottimizzato */ padding: 12px 28px !important; /* Font size mobile */ font-size: 14px !important; /* Touch target WCAG AAA */ min-height: 48px !important; height: auto !important; /* Tipografia mobile */ line-height: 1.3 !important; letter-spacing: 0.03em !important; /* Layout */ display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* Image Tabs - Mobile */ .image-tabs .button, .image-tabs a.button, .image-tabs .button--primary, .image-tabs .image-tabs__button-wrraper .button { padding: 12px 28px !important; font-size: 14px !important; min-height: 48px !important; letter-spacing: 0.03em !important; line-height: 1.3 !important; } /* Newsletter - Mobile */ .newsletter-form .button--primary, .newsletter__button.button--primary { width: 100% !important; margin-top: 10px !important; padding: 12px 20px !important; font-size: 14px !important; } } /* ============================================ CART/CHECKOUT BUTTONS - Mobile Priority Forza 14px anche su checkout ============================================ */ @media (max-width: 749px) { .cart__checkout-button, .product-form__submit, button[name="checkout"], button[name="add"], .cart-drawer__footer .button--primary, #CartDrawer-Checkout, [id*="checkout"].button--primary, [class*="checkout"].button--primary { padding: 13px 28px !important; font-size: 14px !important; min-height: 48px !important; font-weight: 700 !important; line-height: 1.3 !important; } } /* ============================================ TABLET - 750px a 989px ============================================ */ @media (min-width: 750px) and (max-width: 989px) { .button--primary, a.button--primary, button.button--primary, .button.button--primary { padding: 15px 36px !important; font-size: 15px !important; min-height: 48px !important; } } /* ============================================ FIX BOTTONI NASCOSTI Garantisce min-height anche se display: none ============================================ */ .button--primary[style*="display: none"], .button--primary.hidden { min-height: 48px !important; } /* ============================================ END PRIMARY BUTTONS ============================================ */ /* ============================================ LOOKBOOK PAGE ============================================ */ body .rich-text .rich-text__blocks, body .spaced-section .rich-text .rich-text__blocks { text-align: center !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; padding-top: 40px !important; padding-bottom: 40px !important; } body .rich-text .rich-text__blocks .title--section, body .rich-text .rich-text__blocks h1, body .rich-text .rich-text__blocks h2, body .rich-text .rich-text__blocks h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.3 !important; } /* MODIFICATO: Testo paragrafi allineato a sinistra */ body .rich-text .rich-text__text, body .rich-text .rich-text__text p, body .rich-text .rich-text__text div { text-align: left !important; /* CAMBIATO da center a left */ max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 20px !important; line-height: 1.6 !important; /* AGGIUNTO per leggibilità */ } .spaced-section + .spaced-section { margin-top: 80px !important; } @media screen and (max-width: 749px) { body .rich-text .rich-text__blocks { max-width: 90% !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 30px !important; padding-bottom: 30px !important; } body .rich-text .rich-text__blocks .title--section, body .rich-text .rich-text__blocks h2 { font-size: 24px !important; line-height: 1.2 !important; } /* AGGIUNTO: Testo left-aligned anche su mobile */ body .rich-text .rich-text__text, body .rich-text .rich-text__text p, body .rich-text .rich-text__text div { text-align: left !important; line-height: 1.5 !important; } .spaced-section + .spaced-section { margin-top: 60px !important; } } /* ============================================ FAQ PAGE - Solo questa pagina centrata ============================================ */ body.template-page .rich-text .rich-text__text p { text-align: center !important; } /* ============================================ CARE INSTRUCTIONS PAGE ============================================ */ /* Paragrafi generali - max-width e padding */ body[class*="page-care-instructions"] .care-instructions-fior p, .template-page .care-instructions-fior p { max-width: 550px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Titoli - max-width e centrati */ body[class*="page-care-instructions"] .care-instructions-fior h2, body[class*="page-care-instructions"] .care-instructions-fior h3, .template-page .care-instructions-fior h2, .template-page .care-instructions-fior h3 { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Liste - max-width */ body[class*="page-care-instructions"] .care-instructions-fior ul, body[class*="page-care-instructions"] .care-instructions-fior li { max-width: 550px !important; margin-left: auto !important; margin-right: auto !important; } /* Sezioni con background crema - padding ridotto per uniformare larghezza */ .care-instructions-fior > div[style*="background: var(--fior-cream)"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Mobile */ @media (max-width: 749px) { body[class*="page-care-instructions"] .care-instructions-fior p, .template-page .care-instructions-fior p { max-width: 90% !important; padding-left: 15px !important; padding-right: 15px !important; } body[class*="page-care-instructions"] .care-instructions-fior h2, body[class*="page-care-instructions"] .care-instructions-fior h3 { max-width: 92% !important; } .care-instructions-fior > div[style*="background: var(--fior-cream)"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } /* ============================================ BUTTONS - Secondary Style (Crema) Per Product Grid e Image Collage ============================================ */ .product-grid .button, .image-collage .button, .instagram-collage .button { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; text-decoration: none !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-weight: 600 !important; padding: 14px 32px !important; font-size: 16px !important; } /* Stati: hover e active - Rosso */ .product-grid .button:hover, .image-collage .button:hover, .instagram-collage .button:hover, .product-grid .button:active, .image-collage .button:active, .instagram-collage .button:active { background-color: #CC3333 !important; color: #FFFFFF !important; border: 2px solid #000000 !important; text-decoration: none !important; } /* Stati: visited e focus - Crema */ .product-grid .button:visited, .image-collage .button:visited, .instagram-collage .button:visited, .product-grid .button:focus, .image-collage .button:focus, .instagram-collage .button:focus { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; text-decoration: none !important; } .product-grid .button span, .image-collage .button span, .instagram-collage .button span { text-decoration: none !important; } /* ============================================ BUTTON SIMPLE - Product Grid Rende button--simple uguale agli altri secondary ============================================ */ .button--simple, a.button--simple { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; text-decoration: none !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-weight: 600 !important; padding: 14px 32px !important; font-size: 16px !important; letter-spacing: 0.05em !important; } .button--simple:hover, .button--simple:active { background-color: #CC3333 !important; color: #FFFFFF !important; border: 2px solid #000000 !important; text-decoration: none !important; } .button--simple:visited, .button--simple:focus { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; text-decoration: none !important; } .button--simple span { text-decoration: none !important; } /* MOBILE FIX - Forza stili su mobile */ @media (max-width: 749px) { /* Stato normale - CREMA */ .button--simple, a.button--simple, .button.button--simple { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; min-height: 48px !important; } /* SOLO stati hover/active - ROSSO con bordo NERO */ .button--simple:hover, .button--simple:active, a.button--simple:hover, a.button--simple:active, .button.button--simple:hover, .button.button--simple:active { background-color: #CC3333 !important; color: #FFFFFF !important; border: 2px solid #000000 !important; } /* Focus torna a crema */ .button--simple:focus, a.button--simple:focus, .button.button--simple:focus { background-color: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; } } /* ============================================ PACKAGING PAGE - Text left alignment Solo contenuto rich-text, NON hero/sezioni speciali ============================================ */ /* Blocchi rich-text centrati con max-width */ .template-page[class*="packaging"] .rich-text__blocks, .template-page[class*="packaging"] .rich-text__text, body[class*="packaging"] .rich-text__blocks { max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; } /* Paragrafi allineati a sinistra */ .template-page[class*="packaging"] .rich-text__text p, body[class*="packaging"] .rich-text__text p { text-align: left !important; } /* Liste allineate a sinistra */ .template-page[class*="packaging"] .rich-text__text ul, body[class*="packaging"] .rich-text__text ul { text-align: left !important; padding-left: 40px !important; } .template-page[class*="packaging"] .rich-text__text li, body[class*="packaging"] .rich-text__text li { text-align: left !important; margin-bottom: 8px !important; } /* Mobile */ @media (max-width: 749px) { .template-page[class*="packaging"] .rich-text__blocks, .template-page[class*="packaging"] .rich-text__text { max-width: 90% !important; padding-left: 20px !important; padding-right: 20px !important; } .template-page[class*="packaging"] .rich-text__text ul { padding-left: 30px !important; } } /* ============================================ PACKAGING PAGE - Liste allineate a sinistra ============================================ */ /* Targetta le liste nella pagina packaging */ .template-page[class*="packaging"] ul, body[class*="packaging"] ul { text-align: left !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1px !important; } .template-page[class*="packaging"] li, body[class*="packaging"] li { text-align: left !important; margin-bottom: 8px !important; } /* Mobile */ @media (max-width: 749px) { .template-page[class*="packaging"] ul, body[class*="packaging"] ul { max-width: 90% !important; padding-left: 1px !important; } } /* ============================================ FEATURED PRODUCTS - Centra testo descrizione ============================================ */ .featured-products .featured-products__text, .featured-products .featured-products__text p { text-align: center !important; } /* ============================================ TITOLI VERDI - Override tema Berlin (Globale) MASSIMA SPECIFICITÀ ============================================ */ /* Desktop */ body .multicolumn .title--section, body .multicolumn h2.title--section, body .shopify-section .multicolumn__heading, body .multicolumn .multicolumn__heading, body .multicolumn h2, body .section-header__title.title--section.h2, body .image-with-description__heading, body .banner__heading, body .rich-text__heading { color: #3E6B46 !important; } /* Mobile - OVERRIDE SUPER SPECIFICO */ @media (max-width: 768px) { body .multicolumn .title--section, body .multicolumn h2.title--section, body .multicolumn h2, body .multicolumn .multicolumn__heading, body .section-header__title.title--section.h2, body h2.section-header__title.title--section { color: #3E6B46 !important; } } /* ============================================ FAQ PAGE - Centra testo CTA (Desktop + Mobile) ============================================ */ /* Centra il testo in tutte le sezioni rich-text della pagina FAQ */ body .template-page .rich-text__text p, body .rich-text__text p, .shopify-section .rich-text__text p { text-align: center !important; } /* Desktop - massima specificità */ @media (min-width: 750px) { body .template-page .rich-text__text p, body .shopify-section .rich-text__text p { text-align: center !important; } } /*============================================ URGENCY BADGE - Creates FOMO ============================================ */ .cart-item__urgency { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; background: rgba(213, 0, 50, 0.08) !important; border: 1px solid rgba(213, 0, 50, 0.3) !important; border-radius: 4px !important; font-size: 12px !important; color: var(--fior-tomato) !important; margin-bottom: 8px !important; } .cart-item__urgency svg { width: 14px !important; height: 14px !important; color: var(--fior-tomato) !important; flex-shrink: 0 !important; } .cart-item__urgency strong { font-weight: 700 !important; } /* ============================================ PRODUCT FEATURES - Micro selling points ============================================ */ .cart-item__features { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 8px 0 !important; padding: 8px 0 !important; border-top: 1px solid rgba(0,0,0,0.08) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; } .cart-item__features span { font-size: 13px !important; color: var(--fior-basil) !important; line-height: 1.4 !important; } /* ============================================ TRUST SIGNALS - Stronger styling ============================================ */ .cart-drawer .info-strip__returns { background: rgba(62, 107, 70, 0.12) !important; border: 1.5px solid var(--fior-basil) !important; color: var(--fior-basil) !important; font-weight: 600 !important; } .cart-drawer .info-strip__returns svg { width: 16px !important; height: 16px !important; color: var(--fior-basil) !important; } /* ============================================ PAYMENT METHODS - Hide from drawer Show only at checkout ============================================ */ .cart-drawer .info-strip__payments { display: none !important; } /* ============================================ FIOR MOBILE PDP OPTIMIZATION ============================================ */ /* Mobile-first: riordina elementi above the fold */ @media (max-width: 749px) { /* Container prodotto: flex column per controllo ordine */ .product__info-container { display: flex; flex-direction: column; } /* ORDINE OTTIMIZZATO MOBILE */ .fior-hero { order: 1; } /* Titolo + badge */ .price-wrapper { order: 2; } /* Prezzo */ .fior-urgency-wrapper { order: 3; } /* Stock + social proof */ .fior-value-props { order: 4; } /* Trust signals */ .product-form { order: 5; } /* Variant + CTA */ .product-about.fior-description { order: 6; } /* Story (accordion chiuso) */ .fior-shipping-info { order: 7; } /* Shipping (accordion chiuso) */ /* COMPATTA HERO - elimina padding eccessivo */ .fior-hero { margin-bottom: 12px; } .product__title.fior-title { font-size: 24px; line-height: 1.2; margin-bottom: 6px; } .product__tagline { font-size: 13px; margin-bottom: 0; } /* URGENCY sempre visibile (no accordion) */ .fior-urgency-wrapper { background: #FFF9F0; border-left: 3px solid #D50032; padding: 12px; margin: 16px 0 12px 0; } .fior-urgency.low-stock { display: block !important; } .urgency-text { font-size: 14px; font-weight: 600; color: #D50032; margin: 0; } .social-proof { margin-top: 8px; padding-top: 8px; border-top: 1px solid #E5E5E5; } .social-proof-text { font-size: 13px; color: #666; margin: 0; } /* PREZZO più prominente */ .price-wrapper { margin-bottom: 8px; } .price--product .price__regular { font-size: 28px; font-weight: 700; color: #000; } /* VALUE PROPS compatte */ .fior-value-props { margin: 12px 0; padding: 12px; background: #F4F2ED; border-radius: 8px; } .fior-value-props .value-prop { font-size: 12px; margin-bottom: 6px; } .fior-value-props .value-prop:last-child { margin-bottom: 0; } .price-justification { margin-top: 8px; padding-top: 8px; border-top: 1px solid #DDD; } .price-justification p { font-size: 11px; margin: 0; } /* CTA PRINCIPALE - più visibile */ .product-form__submit { width: 100%; padding: 16px 24px; font-size: 16px; font-weight: 700; border-radius: 4px; margin-top: 16px; } /* NASCONDI PayPal button su mobile (opzionale, o riduci dimensione) */ .product-form__checkout { margin-top: 8px; } .shopify-payment-button { opacity: 0.7; transform: scale(0.95); } /* QUANTITY selector compatto */ .product-parameters__quantity { margin-bottom: 12px; } .fior-quantity-label { font-size: 14px; margin-bottom: 6px; } .quantity-subtitle { font-size: 11px; color: #666; margin-top: 2px; } /* ACCORDION chiusi di default - riduce altezza */ .product-about__accordion-description { display: none; } .product-about__accordion-title { font-size: 15px; padding: 12px 0; } /* Riduce descrizione duplicata sotto prezzo */ .card__description { display: none; /* Già visibile in accordion */ } } /* ============================================ STICKY ADD TO CART BAR ============================================ */ .fior-sticky-atc { position: fixed; bottom: 0; left: 0; right: 0; background: #F4F2ED; border-top: 2px solid #D50032; padding: 12px 16px; display: none; /* Hidden by default */ z-index: 999; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); transform: translateY(100%); transition: transform 0.3s ease; } .fior-sticky-atc.visible { display: flex; transform: translateY(0); align-items: center; justify-content: space-between; } .fior-sticky-atc__info { flex: 1; margin-right: 12px; } .fior-sticky-atc__title { font-size: 14px; font-weight: 600; margin: 0 0 4px 0; color: #000; } .fior-sticky-atc__price { font-size: 16px; font-weight: 700; color: #D50032; margin: 0; } .fior-sticky-atc__cta { background: #D50032; color: #F4F2ED; border: none; padding: 12px 24px; font-size: 14px; font-weight: 700; border-radius: 4px; white-space: nowrap; } @media (min-width: 750px) { .fior-sticky-atc { display: none !important; /* Solo mobile */ } } /* ═══════════════════════════════════════════════════════════════ FIOR - STREET LUXURY STYLE Brand: Wear Your Appetite Version: 1.0 Total lines: ~220 ═══════════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TYPOGRAPHY & BASE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .product__title { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; margin-bottom: 8px !important; color: #000 !important; } .product__subtitle { font-size: 15px !important; color: #666 !important; margin-bottom: 16px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; } .product__price { font-size: 24px !important; font-weight: 700 !important; color: #D50032 !important; margin-bottom: 4px !important; } .product__inventory { font-size: 13px !important; color: #3E6B46 !important; font-weight: 600 !important; margin-top: 8px !important; } /* Body text general */ .product__description, .product-accordion details > div { font-size: 15px !important; line-height: 1.7 !important; color: #333 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ADD TO CART BUTTON (ADD TO PANTRY) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .product-form__submit, button[name="add"] { background: #3E6B46 !important; color: #fff !important; border: 2px solid #000 !important; border-radius: 6px !important; padding: 18px 32px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; box-shadow: 4px 4px 0px #000 !important; transition: all 0.2s ease !important; cursor: pointer !important; width: 100% !important; } .product-form__submit:hover, button[name="add"]:hover { background: #000 !important; transform: translate(2px, 2px) !important; box-shadow: 2px 2px 0px #000 !important; } .product-form__submit:active, button[name="add"]:active { transform: translate(4px, 4px) !important; box-shadow: 0px 0px 0px #000 !important; } /* Loading state */ .product-form__submit.loading { opacity: 0.7 !important; pointer-events: none !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIZE SELECTOR BUTTONS CON ROSSO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Base button style */ .product-form__input input[type="radio"] + label { border: 2px solid #000 !important; padding: 14px 20px !important; font-weight: 600 !important; transition: all 0.2s ease !important; border-radius: 6px !important; cursor: pointer !important; background: #fff !important; color: #000 !important; text-align: center !important; font-size: 16px !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; } /* Selected state - VERDE */ .product-form__input input[type="radio"]:checked + label { background: #3E6B46 !important; color: #fff !important; border-color: #3E6B46 !important; box-shadow: 2px 2px 0px #000 !important; } /* Desktop Hover - ROSSO */ @media (hover: hover) and (pointer: fine) { .product-form__input input[type="radio"]:not(:checked) + label:hover { background: #D50032 !important; color: #fff !important; border-color: #D50032 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(213, 0, 50, 0.3) !important; } } /* Mobile tap feedback - ROSSO leggero */ .product-form__input input[type="radio"]:not(:checked) + label:active { background: rgba(213, 0, 50, 0.1) !important; border-color: #D50032 !important; transform: scale(0.98) !important; transition: all 0.1s ease !important; } /* Color selector */ .product-form__input--swatch input[type="radio"] + label { border: 2px solid #000 !important; border-radius: 8px !important; padding: 0 !important; width: 56px !important; height: 56px !important; } /* Selected color - Ring ROSSO */ .product-form__input--swatch input[type="radio"]:checked + label { background: transparent !important; box-shadow: 0 0 0 3px #D50032, 2px 2px 0px #000 !important; border-color: #D50032 !important; } /* Desktop hover per color */ @media (hover: hover) and (pointer: fine) { .product-form__input--swatch input[type="radio"]:not(:checked) + label:hover { transform: scale(1.08) !important; box-shadow: 0 0 0 2px #D50032, 0 4px 12px rgba(213, 0, 50, 0.2) !important; } } /* Prevent sticky hover on touch */ @media (hover: none) and (pointer: coarse) { .product-form__input input[type="radio"] + label:hover { background: #fff !important; border-color: #000 !important; transform: none !important; box-shadow: none !important; } .product-form__input input[type="radio"]:checked + label:hover { background: #3E6B46 !important; border-color: #3E6B46 !important; box-shadow: 2px 2px 0px #000 !important; } } .product-form__input--swatch input[type="radio"] + label { width: 60px !important; height: 60px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCORDION SECTIONS (Size & Fit, Shipping, Sustainability) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .product-accordion details, details.product-info-accordion { border-top: 1.5px solid #000 !important; border-bottom: 1.5px solid #000 !important; margin-bottom: -1.5px !important; transition: all 0.2s ease !important; } .product-accordion summary, details.product-info-accordion summary { padding: 18px 0 !important; cursor: pointer !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0.3px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; transition: all 0.2s ease !important; list-style: none !important; } .product-accordion summary:hover, details.product-info-accordion summary:hover { color: #D50032 !important; } /* Remove default marker */ .product-accordion summary::-webkit-details-marker, details.product-info-accordion summary::-webkit-details-marker { display: none !important; } /* Plus/Minus indicator */ .product-accordion summary::after, details.product-info-accordion summary::after { content: '+' !important; font-size: 24px !important; font-weight: 300 !important; line-height: 1 !important; transition: transform 0.2s ease !important; } .product-accordion details[open] summary::after, details.product-info-accordion[open] summary::after { content: '−' !important; } /* Accordion content */ .product-accordion details[open] > div, details.product-info-accordion[open] > div { padding: 0 0 20px 0 !important; font-size: 14px !important; line-height: 1.7 !important; color: #333 !important; animation: fadeIn 0.3s ease !important; } /* Links inside accordion */ .product-accordion a, details.product-info-accordion a { color: #D50032 !important; text-decoration: underline !important; font-weight: 600 !important; transition: color 0.2s ease !important; } .product-accordion a:hover, details.product-info-accordion a:hover { color: #000 !important; } /* Emoji icons in accordion */ .product-accordion summary span:first-child, details.product-info-accordion summary span:first-child { font-size: 18px !important; margin-right: 8px !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIZE GUIDE CTA — Product page only ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .fior-size-guide-clean a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #000; text-decoration: underline; margin: 16px 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; transition: all 0.2s ease; } .fior-size-guide-clean a:hover, .fior-size-guide-clean a:focus-visible { background: #F4F2ED; border-color: #000; text-decoration: none; outline: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ QUANTITY SELECTOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .quantity-selector, .product-form__input--quantity { border: 2px solid #000 !important; border-radius: 6px !important; padding: 4px !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; } .quantity-selector button, .product-form__input--quantity button { background: transparent !important; border: none !important; font-size: 20px !important; font-weight: 600 !important; cursor: pointer !important; padding: 8px 12px !important; transition: all 0.2s ease !important; } .quantity-selector button:hover, .product-form__input--quantity button:hover { background: #F4F2ED !important; border-radius: 4px !important; } .quantity-selector input, .product-form__input--quantity input { border: none !important; text-align: center !important; font-weight: 600 !important; font-size: 16px !important; width: 50px !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRODUCT BADGES & LABELS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .product-badge, .badge { display: inline-block !important; background: #F4F2ED !important; color: #000 !important; padding: 6px 16px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: 1.5px solid #000 !important; box-shadow: 2px 2px 0px #000 !important; } .product-badge--new { background: #3E6B46 !important; color: #fff !important; } .product-badge--sale { background: #D50032 !important; color: #fff !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ANIMATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MOBILE OPTIMIZATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .product__title { font-size: 24px !important; } .product__price { font-size: 22px !important; } .product-form__submit, button[name="add"] { font-size: 15px !important; padding: 16px 24px !important; } .product-form__input input[type="radio"] + label { padding: 12px 16px !important; font-size: 14px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CUSTOM BLOCKS (trust badges, shipping info, etc) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .fior-trust-badges { margin: 24px 0 !important; } .fior-shipping-info { animation: fadeIn 0.4s ease !important; } .fior-product-description-box { margin: 32px 0 !important; animation: fadeIn 0.5s ease !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ END OF FIOR CUSTOM STYLES Total lines: ~220 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIZE BUTTONS (pills-variant-labels) CON ROSSO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Base style per SIZE buttons */ .pills-variant-labels, label.pills-variant-labels { border: 2px solid #000 !important; padding: 14px 20px !important; font-weight: 600 !important; transition: all 0.2s ease !important; border-radius: 6px !important; cursor: pointer !important; background: #fff !important; color: #000 !important; text-align: center !important; font-size: 16px !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; display: inline-block !important; } /* Selected state SIZE - VERDE */ input[type="radio"]:checked + .pills-variant-labels, input[type="radio"]:checked + label.pills-variant-labels { background: #3E6B46 !important; color: #fff !important; border-color: #3E6B46 !important; box-shadow: 2px 2px 0px #000 !important; } /* Desktop Hover SIZE - ROSSO */ @media (hover: hover) and (pointer: fine) { input[type="radio"]:not(:checked) + .pills-variant-labels:hover, input[type="radio"]:not(:checked) + label.pills-variant-labels:hover { background: #D50032 !important; color: #fff !important; border-color: #D50032 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(213, 0, 50, 0.3) !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ COLOR SWATCHES (color-swatch) CON ROSSO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Base style per COLOR buttons */ .color-swatch, label.color-swatch { border: 2px solid #000 !important; border-radius: 25px !important; /* PIÙ STONDATO */ width: 56px !important; height: 56px !important; display: inline-block !important; cursor: pointer !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; background: var(--swatch--background, transparent) !important; position: relative !important; } /* IMPORTANTE: Mantieni il background trasparente quando checked */ input[type="radio"]:checked + .color-swatch, input[type="radio"]:checked + label.color-swatch { background: var(--swatch--background, transparent) !important; box-shadow: 0 0 0 3px #D50032, 2px 2px 0px #000 !important; border-color: #D50032 !important; } /* Desktop hover COLOR - ROSSO glow */ @media (hover: hover) and (pointer: fine) { input[type="radio"]:not(:checked) + .color-swatch:hover, input[type="radio"]:not(:checked) + label.color-swatch:hover { transform: scale(1.08) !important; box-shadow: 0 0 0 2px #D50032, 0 4px 12px rgba(213, 0, 50, 0.25) !important; background: var(--swatch--background, transparent) !important; } } /* Mobile tap COLOR */ input[type="radio"]:not(:checked) + .color-swatch:active, input[type="radio"]:not(:checked) + label.color-swatch:active { transform: scale(0.95) !important; transition: all 0.1s ease !important; } /* ── FIOR: Size Guide CTA — premium, identica su mobile/desktop ── */ .fior-size-guide-clean{ margin: 8px 0 14px; padding: 0; /* niente box */ background: transparent; border: 0; text-align: left; } .fior-size-guide-clean a{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #000; text-decoration: none; /* base: NO underline */ -webkit-tap-highlight-color: transparent; } /* gerarchia testo */ .fior-size-guide-clean .icon{ font-size: 18px; line-height: 1; } .fior-size-guide-clean .text{ line-height: 1.35; } .fior-size-guide-clean .cta{ color: #D50032; font-weight: 700; text-decoration: none; } /* blocca underline/effetti tema in ogni stato */ .fior-size-guide-clean a:hover, .fior-size-guide-clean a:focus, .fior-size-guide-clean a:active{ color: #000; text-decoration: none !important; outline: 0; } /* hard reset contro underline “furbi” dei temi (bordi/pseudo/background) */ .fior-size-guide-clean a, .fior-size-guide-clean a *, .fior-size-guide-clean a::before, .fior-size-guide-clean a::after, .fior-size-guide-clean .text::before, .fior-size-guide-clean .text::after{ background-image: none !important; box-shadow: none !important; border: 0 !important; text-decoration: none !important; content: none; } /* Mobile fine-tuning: evita spezzature sgraziate della CTA rossa */ @media (max-width: 768px){ .fior-size-guide-clean .cta{ white-space: nowrap; } } @media (max-width: 768px){ .template-product h1.product__title.fior-title{ color:#3E6B46 !important; } } /* GIFT CARD - HIDE UNNECESSARY ELEMENTS */ body.template-product[class*="gift"] .fior-hero, body.template-product[class*="gift"] .share-buttons, body.template-product[class*="gift"] .fior-urgency-wrapper, body.template-product[class*="gift"] .fior-value-props { display: none !important; } /* ===== FIX: Cerchietto BIANCO con sfondo verde per visibilità ===== */ .color-swatch[title="White"], .color-swatch[style*="--swatch-color: White"] { background: #3E6B46 !important; /* Verde basilico dentro */ } /* Quando selezionato, mantieni il verde */ input[type="radio"]:checked + .color-swatch[title="White"], input[type="radio"]:checked + .color-swatch[style*="--swatch-color: White"] { background: #3E6B46 !important; border-color: #D50032 !important; box-shadow: 0 0 0 3px #D50032, 2px 2px 0px #000 !important; } /* Hover mantiene il verde */ input[type="radio"]:not(:checked) + .color-swatch[title="White"]:hover, input[type="radio"]:not(:checked) + .color-swatch[style*="--swatch-color: White"]:hover { background: #3E6B46 !important; transform: scale(1.08) !important; box-shadow: 0 0 0 2px #D50032, 0 4px 12px rgba(213, 0, 50, 0.25) !important; } /* ===== FIX: Cerchietto BIANCO con sfondo verde - SOLO BIANCO ===== */ .color-swatch[title="White"], label.color-swatch[title="White"] { background: #3E6B46 !important; background-color: #3E6B46 !important; --swatch--background: #3E6B46 !important; } /* Anche quando non è hover o checked */ input[type="radio"] + .color-swatch[title="White"], input[type="radio"] + label.color-swatch[title="White"] { background: #3E6B46 !important; background-color: #3E6B46 !important; --swatch--background: #3E6B46 !important; } /* Quando selezionato */ input[type="radio"]:checked + .color-swatch[title="White"], input[type="radio"]:checked + label.color-swatch[title="White"] { background: #3E6B46 !important; background-color: #3E6B46 !important; --swatch--background: #3E6B46 !important; border-color: #D50032 !important; box-shadow: 0 0 0 3px #D50032, 2px 2px 0px #000 !important; } /* Hover */ input[type="radio"]:not(:checked) + .color-swatch[title="White"]:hover, input[type="radio"]:not(:checked) + label.color-swatch[title="White"]:hover { background: #3E6B46 !important; background-color: #3E6B46 !important; --swatch--background: #3E6B46 !important; transform: scale(1.08) !important; box-shadow: 0 0 0 2px #D50032, 0 4px 12px rgba(213, 0, 50, 0.25) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIOR — MOBILE SECTION RHYTHM (Home / Lookbook / Pantry) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px){ /* Token leggeri per mobile */ :root{ --space-s: 12px; --space-m: 16px; --space-l: 20px; --space-xl: 24px; } /* Elimina margini doppi generici fra sezioni */ .spaced-section, [class*="section-"][class*="-padding"]{ margin-top: 0 !important; margin-bottom: 0 !important; } .shopify-section + .shopify-section{ /* spazio standard fra blocchi consecutivi */ margin-top: var(--space-xl) !important; } /* Home: stringi un po' sotto hero e attorno alle liste prodotti */ .template-index .shopify-section:first-of-type{ padding-bottom: var(--space-m) !important; } .template-index .featured-products, .template-index .products-grid{ padding-top: var(--space-m) !important; padding-bottom: var(--space-l) !important; } .template-index .featured-products__list, .template-index .collection-product-list{ row-gap: var(--space-m) !important; } /* Lookbook: heading/copy più compatti */ .template-page.page-lookbook h2, .template-page.page-lookbook .subtitle, .template-page.page-lookbook .richtext__content{ margin-bottom: var(--space-m) !important; } /* Collection (The Pantry): meno spazio nell’header e sopra la griglia */ .template-collection .section-grid .section-header{ margin-bottom: var(--space-m) !important; } .template-collection .collection-product-list{ row-gap: var(--space-m) !important; } /* Blocchi “comunicazione” (FAQ/newsletter/community) un filo più asciutti */ .template-index [id*="faq"], .template-index .newsletter, .template-collection [id*="community"], .template-collection .newsletter{ padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIOR · MOBILE RHYTHM TUNING Pagine: Home, Lookbook, The Pantry ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px){ /* Token ritmo (toccali per micro-tuning) */ :root{ --space-xs: 8px; --space-s : 12px; --space-m : 16px; --space-l : 20px; --space-xl: 24px; } /* Fix globale: niente “buco” sotto header */ .shopify-section-header, .header-wrapper{ margin-bottom: 0 !important; } .template-index main .shopify-section:first-child, .template-page main .shopify-section:first-child, .template-collection main .shopify-section:first-child{ padding-top: var(--space-s) !important; } /* ===== HOME ===== */ .template-index main .shopify-section{ padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; } /* Sotto hero e attorno a liste prodotti un filo più serrato */ .template-index .featured-products, .template-index .products-grid{ padding-top: var(--space-m) !important; padding-bottom: var(--space-l) !important; } .template-index .featured-products__list, .template-index .collection-product-list{ row-gap: var(--space-m) !important; } /* Titoli/copy home più compatti */ .template-index .section-header .subtitle, .template-index .section-header h2, .template-index .richtext__content{ margin-bottom: var(--space-m) !important; } /* Blocchi “comunicazione” (newsletter/faq/community) meno espansi */ .template-index [id*="newsletter"], .template-index [id*="faq"], .template-index [id*="community"]{ padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } /* ===== LOOKBOOK ===== */ /* Nota: se il body non ha una classe dedicata, resta il fallback .template-page */ .template-page main .shopify-section{ padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } .template-page .subtitle, .template-page h2, .template-page .richtext__content{ margin-bottom: var(--space-m) !important; } /* Spazio tra immagini/look-items */ .template-page .media, .template-page [class*="look"] img{ margin-bottom: var(--space-m) !important; } /* ===== THE PANTRY (collection) ===== */ .template-collection main .shopify-section{ padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } /* Header collezione più asciutto */ .template-collection .section-grid .section-header{ margin-bottom: var(--space-m) !important; } /* Filtri/toolbar se presenti */ .template-collection [class*="filters"], .template-collection [class*="toolbar"]{ margin-bottom: var(--space-m) !important; } /* Griglia prodotti più densa */ .template-collection .collection-product-list{ row-gap: var(--space-m) !important; } /* Evita “doppi margini” fra sezioni consecutive (tutte e tre le pagine) */ .template-index .shopify-section + .shopify-section, .template-page .shopify-section + .shopify-section, .template-collection .shopify-section + .shopify-section{ margin-top: var(--space-xl) !important; } .spaced-section, [class*="section-"][class*="-padding"]{ margin-top: 0 !important; margin-bottom: 0 !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE PANTRY — Multicolumn (istanza specifica) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Ritmo sezione mobile */ @media (max-width: 768px){ .section-template--20014274314457__multicolumn_dtPHcq-padding{ padding-top: 12px !important; padding-bottom: 12px !important; } } /* Card cream premium */ .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card{ background: var(--fior-cream, #F4F2ED); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* Tipografia premium, allineata a sinistra (override del centro) */ .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card__info{ text-align: left !important; } .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card__info-title{ margin: 0 0 4px 0 !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.01em; color: #000; line-height: 1.25; } .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card__info-text{ margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; color: #6A6A6A !important; } @media (hover: hover){ .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card:hover{ transform: translateY(-2px); box-shadow: 0 2px 0 0 var(--fior-basil, #3E6B46) !important; border-color: rgba(62,107,70,.28) !important; /* basil */ } } /* Titolo card in verde basil */ .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card__info-title{ color: var(--fior-basil, #3E6B46) !important; } /* Frecce slider in verde basil */ .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button{ color: var(--fior-basil, #3E6B46) !important; /* l’SVG usa currentColor */ border-color: rgba(62,107,70,.25) !important; } /* Hover/active più evidente (opzionale) */ .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button:hover{ background: #F4F2ED !important; box-shadow: 0 1px 0 0 var(--fior-basil, #3E6B46) !important; } /* Stato disabilitato più soft */ .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button.swiper-button-disabled{ color: rgba(62,107,70,.35) !important; border-color: rgba(62,107,70,.15) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE PANTRY — Multicolumn Premium (UNIVERSAL) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Targeting TUTTE le multicolumn della homepage */ .template-index .multicolumn-section .multicolumn-card{ background: #F4F2ED !important; border: 1px solid rgba(0,0,0,.06) !important; border-radius: 16px !important; padding: 24px 20px !important; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } /* Inner shadow */ .template-index .multicolumn-section .multicolumn-card::after{ content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 16px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.03) !important; pointer-events: none !important; } /* Tipografia */ .template-index .multicolumn-section .multicolumn-card__info{ text-align: left !important; } .template-index .multicolumn-section .multicolumn-card__info-title{ margin: 0 0 6px 0 !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #3E6B46 !important; line-height: 1.3 !important; transition: color .2s ease !important; } .template-index .multicolumn-section .multicolumn-card__info-text{ margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: rgba(0,0,0,.68) !important; } /* HOVER */ @media (hover: hover){ .template-index .multicolumn-section .multicolumn-card:hover{ transform: translateY(-4px) !important; box-shadow: 0 8px 16px rgba(62,107,70,.12), 0 2px 4px rgba(0,0,0,.06) !important; border-color: rgba(62,107,70,.2) !important; } .template-index .multicolumn-section .multicolumn-card:hover .multicolumn__image{ transform: scale(1.05) !important; } .template-index .multicolumn-section .multicolumn-card:hover .multicolumn-card__info-title{ color: #D50032 !important; } } /* Icona */ .template-index .multicolumn-section .multicolumn__image{ transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Mobile */ @media (max-width: 768px){ .template-index .multicolumn-section .multicolumn-card{ padding: 20px 16px !important; } .template-index .multicolumn-section .multicolumn-card__info-title{ font-size: 15px !important; } .template-index .multicolumn-section .multicolumn-card__info-text{ font-size: 13px !important; } } /* Bordo completo SOTTILE + Angolo L ACCENTUATO */ .template-index .multicolumn-section .multicolumn-card{ background: #F4F2ED !important; border: 1px solid rgba(62,107,70,.15) !important; /* Bordo sottile verde su 4 lati */ border-radius: 16px !important; padding: 24px 20px !important; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } /* Angolo L signature (bottom-left) */ .template-index .multicolumn-section .multicolumn-card::before{ content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 28px !important; height: 28px !important; border-left: 3px solid #3E6B46 !important; border-bottom: 3px solid #3E6B46 !important; border-radius: 0 0 0 15px !important; opacity: 1 !important; transition: all .3s ease !important; } /* HOVER: tutto il bordo si ispessisce + angolo diventa rosso */ .template-index .multicolumn-section .multicolumn-card:hover{ transform: translateY(-4px) !important; box-shadow: 0 8px 16px rgba(62,107,70,.12), 0 2px 4px rgba(0,0,0,.06) !important; border-color: rgba(62,107,70,.35) !important; /* Bordo esterno più evidente */ border-width: 1.5px !important; } .template-index .multicolumn-section .multicolumn-card:hover::before{ width: 36px !important; height: 36px !important; border-color: #D50032 !important; /* L-shape diventa rosso */ border-width: 3.5px !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SLIDER CONTROLS — UX Completo Desktop + Mobile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ━━━ DESKTOP: Frecce laterali inline ━━━ */ /* Container: posizionamento relativo */ .template-index .multicolumn-section .multicolumn-list{ position: relative !important; } /* Wrapper frecce: absolute positioning ai lati */ .template-index .multicolumn-section .swiper-buttons__wrapper{ position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 10 !important; } .template-index .multicolumn-section .swiper-buttons__box{ display: flex !important; justify-content: space-between !important; padding: 0 !important; max-width: 100% !important; margin: 0 auto !important; pointer-events: none !important; } /* BASE BUTTON STYLE */ .template-index .multicolumn-section .swiper-button{ pointer-events: auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; background: rgba(255,255,255,.95) !important; backdrop-filter: blur(8px) !important; border: 1.5px solid rgba(62,107,70,.25) !important; border-radius: 50% !important; color: #3E6B46 !important; box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06) !important; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 -8px !important; } .template-index .multicolumn-section .swiper-button-prev{ transform: translateX(-12px) !important; } .template-index .multicolumn-section .swiper-button-next{ transform: translateX(12px) !important; } .template-index .multicolumn-section .swiper-button svg{ width: 18px !important; height: 18px !important; transition: transform .2s ease !important; } /* HOVER STATE */ @media (hover: hover){ .template-index .multicolumn-section .swiper-button:not(.swiper-button-disabled):hover{ background: #3E6B46 !important; color: #FFFFFF !important; border-color: #3E6B46 !important; transform: scale(1.1) !important; box-shadow: 0 6px 16px rgba(62,107,70,.25), 0 0 0 4px rgba(62,107,70,.1) !important; } .template-index .multicolumn-section .swiper-button-prev:not(.swiper-button-disabled):hover{ transform: translateX(-16px) scale(1.1) !important; } .template-index .multicolumn-section .swiper-button-next:not(.swiper-button-disabled):hover{ transform: translateX(16px) scale(1.1) !important; } .template-index .multicolumn-section .swiper-button-prev:not(.swiper-button-disabled):hover svg{ transform: translateX(-3px) !important; } .template-index .multicolumn-section .swiper-button-next:not(.swiper-button-disabled):hover svg{ transform: translateX(3px) !important; } } /* ACTIVE STATE */ .template-index .multicolumn-section .swiper-button:not(.swiper-button-disabled):active{ transform: scale(0.95) !important; box-shadow: 0 2px 8px rgba(62,107,70,.2) !important; } /* DISABLED STATE */ .template-index .multicolumn-section .swiper-button.swiper-button-disabled{ opacity: 0 !important; pointer-events: none !important; transform: scale(0.8) !important; } /* FOCUS STATE */ .template-index .multicolumn-section .swiper-button:focus-visible{ outline: none !important; box-shadow: 0 4px 12px rgba(62,107,70,.2), 0 0 0 4px rgba(213,0,50,.4) !important; border-color: #D50032 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE PANTRY (Collection) — Multicolumn Premium + Controls ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ━━━ CARD STYLE ━━━ */ .template-collection .multicolumn-section .multicolumn-card, body[class*="collection"] .multicolumn-section .multicolumn-card, .collection-template .multicolumn-section .multicolumn-card { background: #F4F2ED !important; border: 1px solid rgba(62,107,70,.15) !important; border-radius: 16px !important; padding: 24px 20px !important; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } /* Angolo L signature (bottom-left) */ .template-collection .multicolumn-section .multicolumn-card::before, body[class*="collection"] .multicolumn-section .multicolumn-card::before, .collection-template .multicolumn-section .multicolumn-card::before { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 28px !important; height: 28px !important; border-left: 3px solid #3E6B46 !important; border-bottom: 3px solid #3E6B46 !important; border-radius: 0 0 0 15px !important; opacity: 1 !important; transition: all .3s ease !important; z-index: 1 !important; } /* Inner shadow */ .template-collection .multicolumn-section .multicolumn-card::after, body[class*="collection"] .multicolumn-section .multicolumn-card::after, .collection-template .multicolumn-section .multicolumn-card::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 16px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.03) !important; pointer-events: none !important; z-index: 0 !important; } /* Immagine */ .template-collection .multicolumn-section .multicolumn-card__image-wrapper, body[class*="collection"] .multicolumn-section .multicolumn-card__image-wrapper, .collection-template .multicolumn-section .multicolumn-card__image-wrapper { margin-bottom: 16px !important; position: relative !important; z-index: 2 !important; } .template-collection .multicolumn-section .multicolumn__image, body[class*="collection"] .multicolumn-section .multicolumn__image, .collection-template .multicolumn-section .multicolumn__image { transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ━━━ TIPOGRAFIA - FONT INGRANDITI ━━━ */ .template-collection .multicolumn-section .multicolumn-card__info, body[class*="collection"] .multicolumn-section .multicolumn-card__info, .collection-template .multicolumn-section .multicolumn-card__info { text-align: left !important; position: relative !important; z-index: 2 !important; } .template-collection .multicolumn-section .multicolumn-card__info-title, body[class*="collection"] .multicolumn-section .multicolumn-card__info-title, .collection-template .multicolumn-section .multicolumn-card__info-title { margin: 0 0 8px 0 !important; font-size: 20px !important; /* 🔥 INGRANDITO da 16px a 20px */ font-weight: 800 !important; letter-spacing: -0.02em !important; color: #3E6B46 !important; line-height: 1.3 !important; transition: color .2s ease !important; } .template-collection .multicolumn-section .multicolumn-card__info-text, body[class*="collection"] .multicolumn-section .multicolumn-card__info-text, .collection-template .multicolumn-section .multicolumn-card__info-text { margin: 0 !important; font-size: 16px !important; /* 🔥 INGRANDITO da 14px a 16px */ line-height: 1.5 !important; color: rgba(0,0,0,.68) !important; } /* ━━━ HOVER ━━━ */ @media (hover: hover){ .template-collection .multicolumn-section .multicolumn-card:hover, body[class*="collection"] .multicolumn-section .multicolumn-card:hover, .collection-template .multicolumn-section .multicolumn-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 16px rgba(62,107,70,.12), 0 2px 4px rgba(0,0,0,.06) !important; border-color: rgba(62,107,70,.35) !important; border-width: 1.5px !important; } .template-collection .multicolumn-section .multicolumn-card:hover::before, body[class*="collection"] .multicolumn-section .multicolumn-card:hover::before, .collection-template .multicolumn-section .multicolumn-card:hover::before { width: 36px !important; height: 36px !important; border-color: #D50032 !important; border-width: 3.5px !important; } .template-collection .multicolumn-section .multicolumn-card:hover .multicolumn__image, body[class*="collection"] .multicolumn-section .multicolumn-card:hover .multicolumn__image, .collection-template .multicolumn-section .multicolumn-card:hover .multicolumn__image { transform: scale(1.05) !important; } .template-collection .multicolumn-section .multicolumn-card:hover .multicolumn-card__info-title, body[class*="collection"] .multicolumn-section .multicolumn-card:hover .multicolumn-card__info-title, .collection-template .multicolumn-section .multicolumn-card:hover .multicolumn-card__info-title { color: #D50032 !important; } } /* ━━━ MOBILE ━━━ */ @media (max-width: 768px){ .template-collection .multicolumn-section .multicolumn-card, body[class*="collection"] .multicolumn-section .multicolumn-card, .collection-template .multicolumn-section .multicolumn-card { padding: 20px 16px !important; } .template-collection .multicolumn-section .multicolumn-card__info-title, body[class*="collection"] .multicolumn-section .multicolumn-card__info-title, .collection-template .multicolumn-section .multicolumn-card__info-title { font-size: 17px !important; /* 🔥 INGRANDITO mobile */ } .template-collection .multicolumn-section .multicolumn-card__info-text, body[class*="collection"] .multicolumn-section .multicolumn-card__info-text, .collection-template .multicolumn-section .multicolumn-card__info-text { font-size: 14px !important; /* 🔥 INGRANDITO mobile */ } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE PANTRY — Frecce stile HOMEPAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* THE PANTRY — Frecce complete */ .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button { width: 44px !important; height: 44px !important; background: rgba(255,255,255,.95) !important; backdrop-filter: blur(8px) !important; border: 1.5px solid rgba(62,107,70,.25) !important; border-radius: 50% !important; color: #3E6B46 !important; box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06) !important; /* CENTRAGGIO */ display: flex !important; align-items: center !important; justify-content: center !important; } .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button svg { width: 20px !important; /* Cambia qui per ingrandire */ height: 18px !important; } /* Hover */ .section-template--20014274314457__multicolumn_dtPHcq-padding .swiper-button:hover { background: #3E6B46 !important; color: #FFFFFF !important; box-shadow: 0 6px 16px rgba(62,107,70,.25), 0 0 0 4px rgba(62,107,70,.1) !important; } /* THE PANTRY — Icona ingrandita */ .section-template--20014274314457__multicolumn_dtPHcq-padding .multicolumn-card__image-wrapper { transform: scale(1.3) !important; /* 30% più grande */ margin-bottom: 20px !important; /* Compenso spazio */ } /* ======================================== MOBILE MENU - VIEW ALL (BEST PRACTICE) ======================================== */ @media screen and (max-width: 768px) { /* View All più discreto e professionale */ .header-mobile__menu .view-all-link, .header-mobile .view-all-link { /* Rimuovi sottolineatura */ text-decoration: none !important; border-bottom: none !important; /* Styling discreto ma premium */ display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 16px !important; font-weight: 600 !important; color: #D50032 !important; /* Padding sottile */ padding: 10px 16px 10px 0 !important; background: transparent !important; border-radius: 0 !important; /* Border bottom sottile */ border-bottom: 2px solid transparent !important; /* Transizione smooth */ transition: all 0.25s ease !important; /* Margine per separarlo */ margin: 8px 0 20px 0 !important; /* Touch target */ min-height: 44px !important; } /* Freccia piccola e discreta */ .header-mobile__menu .view-all-link::after, .header-mobile .view-all-link::after { content: "→" !important; font-size: 18px !important; transition: transform 0.25s ease !important; } /* HOVER/ACTIVE - Diventa verde con underline */ .header-mobile__menu .view-all-link:hover, .header-mobile .view-all-link:hover, .header-mobile__menu .view-all-link:active, .header-mobile .view-all-link:active { color: #3E6B46 !important; border-bottom: 2px solid #3E6B46 !important; } /* Animazione freccia */ .header-mobile__menu .view-all-link:hover::after, .header-mobile .view-all-link:active::after { transform: translateX(4px) !important; } } /* Bottone PRIMARY - Rosso normale */ .image-with-text__link, .image-collage .button { background: var(--fior-tomato, #D50032) !important; color: #FFFFFF !important; border: 2px solid var(--fior-tomato, #D50032) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; transition: all 0.25s ease !important; } /* Hover VERDE */ .image-with-text__link:hover, .image-collage .button:hover { background: var(--fior-basil, #3E6B46) !important; border-color: var(--fior-basil, #3E6B46) !important; color: #FFFFFF !important; transform: translateY(-2px) !important; } /* RESET eventuali regole precedenti */ .image-with-text__link:not(:hover), .image-collage .button:not(:hover) { background: var(--fior-tomato, #D50032) !important; border-color: var(--fior-tomato, #D50032) !important; } /* Override background verde → crema per sezione Cotton */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text { background-color: var(--fior-cream, #F4F2ED) !important; } /* Aggiusta colori testo per leggibilità su crema */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__subtitle, #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__title, #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__text { color: var(--fior-black, #000000) !important; } /* Ticker su fondo crema */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__ticker { background-color: var(--fior-cream, #F4F2ED) !important; color: var(--fior-black, #000000) !important; } /* Titolo in verde basilico */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__title { color: var(--fior-basil, #3E6B46) !important; } /* Rimuove linea rossa tra blocchi */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__block.have_border { border: none !important; } #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__block::before, #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__block::after { display: none !important; } /* ============================================ OUR COTTON BREATHES - Line Breaks con CSS ============================================ */ /* SUBTITLE - Forza line break con max-width */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__subtitle { max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; line-height: 1.8 !important; } /* TITLE - Forza line break dopo "Breathes." */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__title { max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.2 !important; } /* Bordo verde fisso sulla sinistra */ .image-with-description__item-elem::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #3E6B46; border-radius: 0; } /* Rimuove hover su badge */ .image-with-description__item-elem:hover .image-with-description__item-heading::before { background: #3E6B46 !important; /* Rimane verde */ transform: none !important; box-shadow: none !important; } /* Rimuove hover su titolo */ .image-with-description__item-elem:hover .image-with-description__item-heading-title { color: #3E6B46 !important; /* Rimane verde */ transform: none !important; } /* Rimuove hover su testo */ .image-with-description__item-elem:hover .image-with-description__item-text { transform: none !important; } /* Rimuove focus state hover */ .image-with-description__item-elem:focus-within { background: transparent !important; border: none !important; } /* Enfatizza frasi chiave con se le aggiungi nell'HTML */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__text strong { font-weight: 600 !important; color: #3E6B46 !important; } /* Enfatizza testo in corsivo con */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__text em { font-style: italic !important; font-size: 20px !important; color: #D50032 !important; font-weight: 500 !important; } /* OUR COTTON BREATHES — larghezza piena e tipografia mobile */ #shopify-section-template--20014274805977__image_with_text_xjWQLt .image-with-text__block-text__wrapper{ /* togli eventuali limiti di larghezza del wrapper */ max-width: 100% !important; width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; } /* =========================== PRODUCT — GIFT CARD: rimuovi urgenze Nasconde SOLO su Gift Card i blocchi: .fior-bundle-upsell e .fior-delivery-countdown =========================== */ /* 1) Se la pagina Gift Card espone i campi Recipient (Dawn) */ [id^="ProductInfo-"]:has([name^="properties[Recipient"]) .fior-bundle-upsell, [id^="ProductInfo-"]:has([name^="properties[Recipient"]) .fior-delivery-countdown, [id^="ProductInfo-"]:has(.gift-card-recipient) .fior-bundle-upsell, [id^="ProductInfo-"]:has(.gift-card-recipient) .fior-delivery-countdown { display: none !important; } /* 2) Gate alternativi comuni: tipo prodotto / body class */ .product--gift-card .fior-bundle-upsell, .product--gift-card .fior-delivery-countdown, [data-product-type*="Gift"] .fior-bundle-upsell, [data-product-type*="Gift"] .fior-delivery-countdown, body[class*="gift-card"] .fior-bundle-upsell, body[class*="gift-card"] .fior-delivery-countdown { display: none !important; } /* 3) Appoggio finale (se aggiungi il data-attr suggerito sotto) */ [id^="ProductInfo-"][data-gift-card="true"] .fior-bundle-upsell, [id^="ProductInfo-"][data-gift-card="true"] .fior-delivery-countdown { display: none !important; } /* ===== BOTTONI STANDARD SITO (stessa size del cart) ===== */ .button.button--simple, a.button.button--simple { background: #F4F2ED !important; color: #000000 !important; border: 2px solid #000000 !important; border-radius: 6px !important; padding: 0.875rem 1.5rem !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; cursor: pointer !important; min-height: 44px !important; max-height: 44px !important; } .button.button--simple:hover, a.button.button--simple:hover { background: #D50032 !important; border-color: #D50032 !important; color: #FFFFFF !important; transform: translateY(-1px) !important; text-decoration: none !important; } .button.button--simple .button-simpl__label, .button.button--simple span { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: inherit !important; } .button.button--simple:hover .button-simpl__label, .button.button--simple:hover span { color: #FFFFFF !important; } /* Focus state */ .button.button--simple:focus, a.button.button--simple:focus { outline: 3px solid #3E6B46 !important; outline-offset: 3px !important; } /* ===== QUANTITY SELECTOR - STILE FIOR (REFINED) ===== */ .product-form__quantity { margin: 1rem 0; } .quantity { display: flex !important; align-items: center !important; gap: 0 !important; background: #F4F2ED !important; border: 2px solid #3E6B46 !important; /* ← VERDE BASILICO */ border-radius: 8px !important; overflow: hidden !important; width: fit-content !important; height: 44px !important; } /* Bottoni +/- */ .quantity__button { background: transparent !important; border: none !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; color: #000000 !important; padding: 0 !important; flex-shrink: 0 !important; } .quantity__button:hover { background: #D50032 !important; color: #FFFFFF !important; } /* Input numero centrale */ .quantity__input { background: transparent !important; border: none !important; border-left: 2px solid #3E6B46 !important; /* ← VERDE BASILICO */ border-right: 2px solid #3E6B46 !important; /* ← VERDE BASILICO */ width: 50px !important; height: 44px !important; text-align: center !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #000000 !important; -moz-appearance: textfield !important; padding: 0 !important; margin: 0 !important; } .quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Icone +/- più piccole e centrate */ .quantity__button .icon { width: 12px !important; height: 12px !important; display: block !important; margin: auto !important; } .quantity__button svg { display: block !important; } /* ============== 1) KILL ACCENTO SULLA COLONNA IMMAGINE (forte e chirurgico) ============== */ .section-template--20017694179545__hero_section-padding .image-with-description__image, .section-template--20017694179545__hero_section-padding .image-with-description__image__block { border-left: 0 !important; border-inline-start: 0 !important; border-image: none !important; box-shadow: none !important; background: none !important; background-image: none !important; outline: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Spegni eventuali pseudo-elementi decorativi */ .section-template--20017694179545__hero_section-padding .image-with-description__image::before, .section-template--20017694179545__hero_section-padding .image-with-description__image::after, .section-template--20017694179545__hero_section-padding .image-with-description__image__block::before, .section-template--20017694179545__hero_section-padding .image-with-description__image__block::after { content: none !important; display: none !important; } /* Alcuni temi applicano l'accento anche su questi wrapper: pulizia extra */ .section-template--20017694179545__hero_section-padding .image-with-description__wrapper, .section-template--20017694179545__hero_section-padding .image-with-description__box { background: none !important; background-image: none !important; box-shadow: none !important; border-left: 0 !important; border-inline-start: 0 !important; border-image: none !important; } /* ============== 2) RIATTIVA LA BARRA SUL TESTO (annulla il nascondi di Opzione A) ============== */ /* Rimetti padding e barra a sinistra sul testo */ .section-template--20017694179545__hero_section-padding .image-with-description__item-text { position: relative; padding-left: 20px !important; /* ripristina spazio per la barra */ border-left: 0 !important; /* niente border, solo pseudo-elemento */ } /* Forza la barra sul testo anche se Opzione A la nascondeva */ .section-template--20017694179545__hero_section-padding .image-with-description__item-text::before { content: "" !important; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #3E6B46; } /* ============== 3) MOBILE: fallback pulito quando le colonne si impilano ============== */ @media (max-width: 749px) { .section-template--20017694179545__hero_section-padding .image-with-description__item-text { padding-left: 20px !important; } .section-template--20017694179545__hero_section-padding .image-with-description__item-text::before { left: 0; right: auto; } } /* 1) KILL linea/ombra/gradient su TUTTE le colonne immagine */ .template-page .image-with-description .image-with-description__image, .template-page .image-with-description .image-with-description__image__block, .template-page .image-with-description .image-position-left, .template-page .image-with-description .image-position-right, .template-page .image-with-description .image-with-description__item, .template-page .image-with-description .image-with-description__item-elem { border-left: 0 !important; border-inline-start: 0 !important; border-image: none !important; box-shadow: none !important; background: none !important; background-image: none !important; outline: 0 !important; } /* Spegni eventuali pseudo-elementi decorativi */ .template-page .image-with-description .image-with-description__image::before, .template-page .image-with-description .image-with-description__image::after, .template-page .image-with-description .image-with-description__image__block::before, .template-page .image-with-description .image-with-description__image__block::after, .template-page .image-with-description .image-with-description__item::before, .template-page .image-with-description .image-with-description__item::after, .template-page .image-with-description .image-with-description__item-elem::before, .template-page .image-with-description .image-with-description__item-elem::after { content: none !important; display: none !important; } /* 2) Barra SOLO sul testo, sempre attiva */ .template-page .image-with-description .image-with-description__item-text { position: relative; padding-left: 20px !important; border-left: 0 !important; } .template-page .image-with-description .image-with-description__item-text::before { content: "" !important; /* forza la barra anche se Opzione A era rimasta */ position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #3E6B46; } /* 3) Mobile: comportamento pulito quando le colonne si impilano */ @media (max-width: 749px) { .template-page .image-with-description .image-with-description__item-text { padding-left: 20px !important; } .template-page .image-with-description .image-with-description__item-text::before { left: 0; right: auto; } } /* Pagine statiche (es. Our Story): immagini nel testo */ .template-page .rte img { max-width: min(100%, 1100px); width: 100%; height: auto; display: block; margin-inline: auto; border-radius: 8px; } /* Due immagini affiancate / image-with-text / multicolumn su desktop */ @media (min-width: 990px) { .image-with-text .media img, .grid--2-col-desktop .media img, .multicolumn-card__image-wrapper img { width: 100%; height: clamp(380px, 58vh, 680px); /* limita l’altezza visiva */ object-fit: cover; /* ritaglio elegante quando serve */ } } /* Banner a tutta larghezza: evita il “muro” gigante */ @media (min-width: 990px) { .image-banner__media { max-height: 70vh; } .image-banner__media img, .image-banner__media video { height: 100%; width: 100%; object-fit: cover; } } /* Mobile: niente immagini chilometriche */ @media (max-width: 989px) { .rte img { max-height: 70vh; object-fit: cover; } } /* Centra Manifesto section su Desktop */ @media (min-width: 990px) { .blockqoute__box-text, .blockqoute__box-text__elem { text-align: center !important; } } /* ============================================ PRODUCT PAGE - Variant Buttons Ottimizzati Color: inline side-by-side Size: quadrati inline side-by-side ============================================ */ /* === COLOR BUTTONS - Inline === */ @media (max-width: 749px) { /* Color container - mantieni inline */ .product-form__input[data-type="color"] .product-form__controls-group, .product-form__input--dropdown:not(#SingleOptionSelector-1) .product-form__controls-group { display: flex !important; flex-direction: row !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; } /* Color buttons - quadrati inline */ .product-form__input[data-type="color"] input[type="radio"] + label, .product-form__input--dropdown:not(#SingleOptionSelector-1) input[type="radio"] + label { width: auto !important; max-width: none !important; } } /* === SIZE BUTTONS - Quadrati Inline === */ @media (max-width: 749px) { /* Size container - inline centered */ #SingleOptionSelector-1 .product-form__controls-group, .product-form__input--radios .product-form__controls-group { display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; } /* Size buttons - quadrati compatti */ #SingleOptionSelector-1 input[type="radio"] + label.pills-variant-labels, .product-form__input--radios input[type="radio"] + label.pills-variant-labels { width: auto !important; min-width: 70px !important; max-width: 90px !important; aspect-ratio: 1/1 !important; /* Forza quadrato */ padding: 20px 12px !important; min-height: 70px !important; font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-radius: 8px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; margin: 0 !important; } /* Nascondi visually-hidden */ .pills-variant-labels .visually-hidden { display: none !important; } /* Selected state - verde FIOR */ #SingleOptionSelector-1 input[type="radio"]:checked + label.pills-variant-labels { background-color: #3E6B46 !important; color: #FFFFFF !important; border-color: #3E6B46 !important; border-width: 2px !important; } /* Hover state */ #SingleOptionSelector-1 input[type="radio"]:not(:checked) + label.pills-variant-labels:hover { border-color: #3E6B46 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(62, 107, 70, 0.2) !important; } /* Disabled state */ #SingleOptionSelector-1 input[type="radio"]:disabled + label.pills-variant-labels { opacity: 0.4 !important; cursor: not-allowed !important; text-decoration: line-through !important; } } /* iPhone SE - quadrati leggermente più piccoli */ @media (max-width: 375px) { #SingleOptionSelector-1 input[type="radio"] + label.pills-variant-labels { min-width: 65px !important; max-width: 80px !important; min-height: 65px !important; padding: 18px 10px !important; font-size: 15px !important; } #SingleOptionSelector-1 .product-form__controls-group { gap: 10px !important; } } /* Tablet - quadrati medi */ @media (min-width: 750px) and (max-width: 989px) { #SingleOptionSelector-1 input[type="radio"] + label.pills-variant-labels { min-width: 80px !important; max-width: 100px !important; min-height: 80px !important; } } /* Desktop - quadrati compatti */ @media (min-width: 990px) { .product-form__controls-group { display: flex !important; flex-direction: row !important; gap: 12px !important; justify-content: flex-start !important; } #SingleOptionSelector-1 input[type="radio"] + label.pills-variant-labels { width: auto !important; min-width: 70px !important; max-width: 85px !important; aspect-ratio: 1/1 !important; min-height: 70px !important; padding: 20px 12px !important; font-size: 16px !important; } } /* ============================================================================ FIOR CUSTOM CSS - TASK 3: CONSISTENCY & SPACING SYSTEM Brand: "Unserious Quality" - Premium Streetwear con Food Culture Italiana SPACING SYSTEM: - Desktop (>1024px): Container 1300px | Padding 40px | Spacing 100px - Tablet (768-1024px): Padding 32px | Spacing 80px - Mobile (<768px): Padding 24px | Spacing 64px ============================================================================ */ /* ---------------------------------------------------------------------------- 1. SISTEMA GLOBALE - CONTAINER & PADDING LATERALE Applica a tutte le sezioni standard Shopify ---------------------------------------------------------------------------- */ /* Reset container base - rimuove padding inconsistenti del tema */ .shopify-section, .section, .page-width { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* Tablet - padding ridotto proporzionalmente */ @media (max-width: 1024px) { .shopify-section, .section, .page-width { padding-left: 32px; padding-right: 32px; } } /* Mobile - padding premium (24px non 20px!) */ @media (max-width: 768px) { .shopify-section, .section, .page-width { padding-left: 24px; padding-right: 24px; } } /* ---------------------------------------------------------------------------- 2. SPACING VERTICALE - RITMO TRA SEZIONI Sistema consistente per separazione sezioni ---------------------------------------------------------------------------- */ /* Spacing standard tra sezioni - desktop */ .shopify-section { margin-top: 100px; margin-bottom: 100px; } /* Prima sezione dopo header - no margin-top */ .shopify-section:first-of-type, #shopify-section-header + .shopify-section, .main-content > .shopify-section:first-child { margin-top: 0; } /* Ultima sezione prima footer - no margin-bottom */ .shopify-section:last-of-type, .main-content > .shopify-section:last-child { margin-bottom: 0; } /* Tablet - spacing ridotto */ @media (max-width: 1024px) { .shopify-section { margin-top: 80px; margin-bottom: 80px; } } /* Mobile - spacing ottimizzato per scroll */ @media (max-width: 768px) { .shopify-section { margin-top: 64px; margin-bottom: 64px; } } /* ---------------------------------------------------------------------------- 3. SEZIONI SPECIFICHE - APPLICAZIONE SISTEMA Override per sezioni nominate nell'inventario ---------------------------------------------------------------------------- */ /* MULTICOLUMN - 4 pagine (homepage, lookbook, our story, packaging) */ .multicolumn, .multicolumn-list, .multicolumn-card { max-width: 1300px; margin-left: auto; margin-right: auto; } /* PRODUCT GRID - homepage & collection */ .collection, .product-grid-container, .product-grid { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .collection, .product-grid-container, .product-grid { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .collection, .product-grid-container, .product-grid { padding-left: 24px; padding-right: 24px; } } /* IMAGE TABS - già modificato Task 2, assicuriamo consistency */ .image-tabs-wrapper, .image-tabs { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .image-tabs-wrapper, .image-tabs { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .image-tabs-wrapper, .image-tabs { padding-left: 24px; padding-right: 24px; } } /* INSTAGRAM COLLAGE - già modificato Task 2, assicuriamo consistency */ .instagram-collage-wrapper, .instagram-collage { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .instagram-collage-wrapper, .instagram-collage { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .instagram-collage-wrapper, .instagram-collage { padding-left: 24px; padding-right: 24px; } } /* FAQ - homepage */ .faq-section, .accordion-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .faq-section, .accordion-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .faq-section, .accordion-wrapper { padding-left: 24px; padding-right: 24px; } } /* NEWSLETTER - homepage */ .newsletter-section, .newsletter-form-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .newsletter-section, .newsletter-form-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .newsletter-section, .newsletter-form-wrapper { padding-left: 24px; padding-right: 24px; } } /* IMAGE COLLAGE - product page & collection */ .image-collage, .collage-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .image-collage, .collage-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .image-collage, .collage-wrapper { padding-left: 24px; padding-right: 24px; } } /* IMAGE WITH TEXT - product page */ .image-with-text, .image-with-text-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .image-with-text, .image-with-text-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .image-with-text, .image-with-text-wrapper { padding-left: 24px; padding-right: 24px; } } /* RICH TEXT - lookbook, our story, packaging, policy pages */ .rich-text, .rte-wrapper, .rte-section { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } /* Rich text contenuto centrato (max 800px per leggibilità) */ .rich-text .rte, .rte-wrapper .rte { max-width: 800px; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .rich-text, .rte-wrapper, .rte-section { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .rich-text, .rte-wrapper, .rte-section { padding-left: 24px; padding-right: 24px; } } /* PRODUCT MARKERS - lookbook */ .product-markers, .hotspot-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .product-markers, .hotspot-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .product-markers, .hotspot-wrapper { padding-left: 24px; padding-right: 24px; } } /* FEATURED PRODUCT - lookbook */ .featured-product, .featured-product-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .featured-product, .featured-product-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .featured-product, .featured-product-wrapper { padding-left: 24px; padding-right: 24px; } } /* BLOCKQUOTE - lookbook, our story, packaging */ .blockquote-section, blockquote { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } /* Blockquote contenuto centrato (max 700px per impatto visivo) */ .blockquote-section blockquote, blockquote { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; } @media (max-width: 1024px) { .blockquote-section, blockquote { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .blockquote-section, blockquote { padding-left: 24px; padding-right: 24px; } } /* IMAGE WITH DESCRIPTION - our story, packaging */ .image-with-description, .content-block { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .image-with-description, .content-block { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .image-with-description, .content-block { padding-left: 24px; padding-right: 24px; } } /* ---------------------------------------------------------------------------- 4. ECCEZIONI FULL-WIDTH Sezioni che devono rimanere edge-to-edge ---------------------------------------------------------------------------- */ /* HERO BANNER - homepage */ .shopify-section--hero, [id*="hero"], .hero-banner, .image-banner { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Assicura che immagini dentro hero vadano full */ .image-banner img, .hero-banner img { width: 100%; max-width: 100%; } /* ---------------------------------------------------------------------------- 5. PAGINE CUSTOM LIQUID - BASE COVERAGE Size guide, Care instructions, Policy pages ---------------------------------------------------------------------------- */ /* Container base per pagine custom */ .page-content, .custom-page-wrapper { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .page-content, .custom-page-wrapper { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .page-content, .custom-page-wrapper { padding-left: 24px; padding-right: 24px; } } /* Tabelle responsive (size guide) */ .page-content table, .custom-page-wrapper table { width: 100%; max-width: 100%; overflow-x: auto; display: block; } @media (max-width: 768px) { .page-content table, .custom-page-wrapper table { font-size: 14px; } } /* ---------------------------------------------------------------------------- 6. UTILITY CLASSES Helper per casi edge o override manuali ---------------------------------------------------------------------------- */ /* Force full-width su elementi specifici */ .fior-full-width { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Force sistema spacing su elementi custom */ .fior-apply-system { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 1024px) { .fior-apply-system { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .fior-apply-system { padding-left: 24px; padding-right: 24px; } } /* ---------------------------------------------------------------------------- 7. COMPATIBILITÀ TASK 2 Assicura che ottimizzazioni Task 2 non siano sovrascritte ---------------------------------------------------------------------------- */ /* Mantieni ottimizzazioni Product Grid Task 2 */ .product-grid { /* Grid già ottimizzato Task 2, qui solo padding */ } /* Mantieni ottimizzazioni Image Tabs Task 2 */ .image-tabs { /* Layout già ottimizzato Task 2, qui solo padding */ } /* Mantieni ottimizzazioni Instagram Collage Task 2 */ .instagram-collage { /* Aspect ratio già ottimizzato Task 2, qui solo padding */ } /* Mantieni bottoni mobile-optimized Task 2 */ /* (nessun override, spacing system è compatibile) */ /* ============================================================================ FIX HEADER - Mobile + Desktop Ripristina comportamento originale: più largo, più attaccato ============================================================================ */ /* DESKTOP - Rimuovi padding e max-width dal sistema globale */ #shopify-section-sections--20369350525145__header, .shopify-section-group-header-group, .header-wrapper, .header-main-section { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Header interno desktop */ .header, #section-header { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Container interno header - lascia padding originale tema */ .header .container, .header__wrapper { /* Non override - usa padding originale del tema Berlin */ max-width: 100%; } /* MOBILE - Rimuovi padding eccessivo */ .header-mobile, #header-mobile-menu { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin-top: 0 !important; padding-top: 0 !important; } .header-mobile__header { padding-left: 0 !important; padding-right: 0 !important; } /* STICKY HEADER - Rimuovi gap con announcement bar */ .sticky-header, sticky-header { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; } /* ============================================================================ NASCONDI GIFT CARD - Solo Collection Pages ============================================================================ */ /* Collection Page - Nascondi prodotto Gift Card */ .collection .product-card[href*="gift-card"], .collection .card[href*="gift-card"], .collection .product-grid-item[href*="gift-card"], .collection a[href*="/products/gift-card"] { display: none !important; } /* Nascondi anche il wrapper del prodotto se esiste */ .collection .grid__item:has(a[href*="gift-card"]) { display: none !important; } /* Varianti possibili del URL */ .collection .product-card[href*="gift_card"], .collection .card[href*="gift_card"], .collection a[href*="/products/gift_card"] { display: none !important; } /* Mobile specifico - forza nascondere anche in inspector */ @media (max-width: 768px) { .collection .product-card[href*="gift-card"], .collection .card[href*="gift-card"], .collection a[href*="gift-card"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } } /* Desktop - stesso trattamento */ @media (min-width: 769px) { .collection .product-card[href*="gift-card"], .collection .card[href*="gift-card"], .collection a[href*="gift-card"] { display: none !important; } } /* ============================================================================ FIX PACKAGING PAGE - Image Banner con aria ai lati Rimuove eccezione full-width, applica sistema standard ============================================================================ */ /* Packaging page - Prima sezione image banner */ body[class*="packaging"] .shopify-section:first-of-type, .template-page .shopify-section:has(.image-banner) { max-width: 1300px !important; padding-left: 40px !important; padding-right: 40px !important; margin-left: auto !important; margin-right: auto !important; } /* Tablet */ @media (max-width: 1024px) { body[class*="packaging"] .shopify-section:first-of-type, .template-page .shopify-section:has(.image-banner) { padding-left: 32px !important; padding-right: 32px !important; } } /* Mobile */ @media (max-width: 768px) { body[class*="packaging"] .shopify-section:first-of-type, .template-page .shopify-section:has(.image-banner) { padding-left: 24px !important; padding-right: 24px !important; } } /* ============================================================================ FIX IMAGE BANNER - Desktop testi + Mobile altezza ============================================================================ */ /* DESKTOP - Testi più vicini tra loro */ @media (min-width: 769px) { /* Container principale - padding ridotto */ .image-banner__wrapper { padding: 80px 60px !important; min-height: 450px; /* Ridotto da 500px */ display: flex; align-items: center; justify-content: center; } /* Block contenuto - tutto centrato */ .image-banner__block { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; /* Ridotto da 900px */ margin: 0 auto; } /* Header section - spacing ridotto */ .image-banner__block-header { margin-bottom: 16px !important; /* Era 32px */ text-align: center; } /* Subheading - più vicino al titolo */ .image-banner__block-header-subheading { margin-bottom: 12px !important; /* Era 16px */ text-align: center; } /* Main heading */ .image-with-description__block-heading { margin: 0 auto 0 auto !important; text-align: center; max-width: 700px; } /* Info section - più vicino al titolo */ .image-banner__block-info { margin: 20px auto !important; /* Era 32px */ text-align: center; max-width: 650px; /* Ridotto da 700px */ } .image-banner__block-info__text { margin: 0 auto !important; text-align: center; } /* Button wrapper - più vicino al testo */ .image-banner__button-wrapper { margin-top: 28px !important; /* Era 40px */ text-align: center; } } /* MOBILE - Altezza immagine ridotta */ @media (max-width: 768px) { /* Container principale - altezza ridotta */ .image-banner__wrapper { padding-top: 40px !important; /* Ridotto da 60px */ padding-bottom: 40px !important; /* Ridotto da 60px */ min-height: auto !important; max-height: 600px !important; /* Limita altezza massima */ } /* Block contenuto - padding ridotto */ .image-banner__block { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px 20px !important; /* Ridotto da 40px */ } /* Header section */ .image-banner__block-header { margin-bottom: 20px !important; text-align: center; } /* Subheading */ .image-banner__block-header-subheading { margin-top: 0 !important; margin-bottom: 12px !important; padding-top: 0 !important; } /* Main heading */ .image-with-description__block-heading { margin-top: 0 !important; margin-bottom: 0 !important; text-align: center; } /* Info section */ .image-banner__block-info { margin-top: 20px !important; margin-bottom: 20px !important; text-align: center; } .image-banner__block-info__text { margin: 0 auto !important; max-width: 90% !important; } /* Button wrapper */ .image-banner__button-wrapper { margin-top: 24px !important; text-align: center; } /* Immagine di sfondo - altezza controllata */ .image-banner__wrapper img, .image-banner__wrapper picture, .image-banner .image-banner__media { max-height: 600px !important; object-fit: cover !important; } } /* GLOBAL - Centratura */ .image-banner__wrapper, .image-banner__block, .image-banner__block-header, .image-banner__block-info { text-align: center; } /* ============================================ FIX: Nascondi frecce Swiper su mobile ============================================ */ @media (max-width: 749px) { .multicolumn .swiper-buttons__wrapper { display: none !important; } /* Card title torna normale senza padding */ .multicolumn-card__info-title { padding-right: 0 !important; } } /* ============================================ END FIX ============================================ */ /* ============================================ FIX: Nascondi tagline "Fior - Wear Your Appetite" ============================================ */ .caption-with-letter-spacing.subtitle { display: none !important; } /* ============================================ END FIX ============================================ */ /* ============================================ FIX: Multicolumn Mobile UX - Peek Effect ============================================ */ @media (max-width: 749px) { /* Container: overflow visible per mostrare card successiva */ .multicolumn-list.swiper { overflow: visible !important; } /* Card width: 85% invece di 100% per mostrare peek */ .multicolumn-list__item.swiper-slide { width: 85% !important; margin-right: 16px !important; } /* Card successiva leggermente visibile e sfumata */ .multicolumn-list__item.swiper-slide:not(.swiper-slide-active) { opacity: 0.4 !important; } /* Nascondi frecce su mobile (non servono più) */ .multicolumn .swiper-buttons__wrapper { display: none !important; } /* Aggiungi pagination dots sotto */ .multicolumn .swiper-pagination { display: block !important; position: relative !important; margin-top: 24px !important; } .multicolumn .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: #3E6B46 !important; opacity: 0.3 !important; } .multicolumn .swiper-pagination-bullet-active { opacity: 1 !important; } } /* ============================================ END FIX ============================================ */ /* ============================================ FIX: Our Story Mobile - ALL SECTIONS Mobile-only (max-width: 749px) ============================================ */ @media (max-width: 749px) { /* 1. Blockquote - Più padding interno (tutte le varianti) */ .rte blockquote, .richtext__content blockquote, .image-with-description__item-text blockquote, blockquote, .quote, [class*="blockquote"] { padding: 20px 20px 20px 28px !important; margin-bottom: 24px !important; border-left: 4px solid #3E6B46 !important; } /* 2. Paragrafi - Spacing uniforme */ .rte p, .richtext__content p, .image-with-description__item-text p { margin-bottom: 16px !important; line-height: 1.65 !important; } /* Ultimo paragrafo senza margin bottom */ .rte p:last-child, .richtext__content p:last-child, .image-with-description__item-text p:last-child { margin-bottom: 0 !important; } /* 3. Bullet points - Spacing tra items (tutte le varianti) */ .rte ul li, .rte ol li, .richtext__content ul li, .richtext__content ol li, .image-with-description__item-text ul li, .image-with-description__item-text ol li { margin-bottom: 16px !important; line-height: 1.6 !important; } /* Ultimo bullet senza margin */ .rte ul li:last-child, .rte ol li:last-child, .richtext__content ul li:last-child, .richtext__content ol li:last-child, .image-with-description__item-text ul li:last-child, .image-with-description__item-text ol li:last-child { margin-bottom: 0 !important; } /* 4. Bold text più visibile */ .rte strong, .rte b, .richtext__content strong, .richtext__content b, .image-with-description__item-text strong, .image-with-description__item-text b { font-weight: 700 !important; color: #2B2B2B !important; } /* 5. Headings Our Story più impattanti */ .page-our-story h2, .template-page h2, .image-with-description__block-heading { font-size: 1.75rem !important; margin-bottom: 16px !important; line-height: 1.2 !important; } /* 6. Overline/Subtitle spacing */ .page-our-story .subtitle, .page-our-story .caption-with-letter-spacing, .image-with-description__block-subheading { margin-bottom: 12px !important; } /* 7. Spacing generale tra elementi image-with-description */ .image-with-description__item-elem { padding: 0 !important; } .image-with-description__item-text { padding: 0 !important; } } /* ============================================ END FIX ============================================ */ /* ============================================ LOOKBOOK - Product Card Text Alignment Fix ============================================ */ /* Fix: Allinea testo "Oversize Unisex · Heavyweight" a sinistra */ .template-page .card-fit-info, .lookbook .card-fit-info, .page-lookbook .card-fit-info { display: block; text-align: left !important; width: 100%; } /* Assicura che anche il wrapper sia allineato a sinistra */ .template-page .card-information__wrapper, .lookbook .card-information__wrapper, .page-lookbook .card-information__wrapper { text-align: left; } /* Mantieni centrato solo il titolo e prezzo se necessario, ma il card-fit-info sempre a sinistra */ .template-page .card__title, .template-page .price { text-align: left; } /* ============================================ LOOKBOOK - Fix Fascia Bianca sotto Immagine ============================================ */ /* Fix: Rimuovi padding/margin che crea la fascia bianca */ .template-page .card__inner, .lookbook .card__inner, .page-lookbook .card__inner { padding: 0 !important; margin: 0 !important; } /* Assicura che il media container sia attaccato all'immagine */ .template-page .media, .lookbook .media, .page-lookbook .media { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* L'immagine deve essere display block per evitare spazi inline */ .template-page .media img, .lookbook .media img, .page-lookbook .media img { display: block; margin: 0; padding: 0; } /* Fix: Assicura che card--product non abbia padding bottom */ .template-page .card--product, .lookbook .card--product, .page-lookbook .card--product { padding-bottom: 0; } /* ============================================ LOOKBOOK DESKTOP - Fix Hotspot Visibility ============================================ */ /* Fix 1: Mostra hotspot (+) su desktop */ @media screen and (min-width: 750px) { .product-markers__marker { display: flex !important; align-items: center; justify-content: center; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 10; /* Dimensioni touch-friendly */ width: 48px; height: 48px; min-width: 48px; min-height: 48px; /* Stile del pallino */ background: rgba(255, 255, 255, 0.9); border-radius: 50%; border: 2px solid #2B2B2B; cursor: pointer; transition: all 250ms ease; } /* Hover effect desktop */ .product-markers__marker:hover { background: #3E6B46; border-color: #3E6B46; transform: scale(1.1); } .product-markers__marker:hover svg { color: white; } /* Active state */ .product-markers__marker.active { background: #3E6B46; border-color: #3E6B46; } .product-markers__marker.active svg { color: white; } /* Icona + dentro il pallino */ .product-markers__marker svg { width: 16px; height: 16px; color: #2B2B2B; } /* Container posizionamento */ .product-markers__img { position: relative; } } /* Fix 2: Color swatches non tagliati - specifico per card */ .card-information, .card-information__wrapper, .product-form__controls-group { overflow: visible !important; } .product-form__controls.js-color-swatches { overflow: visible !important; margin: 8px 0; } .color-swatch { overflow: visible !important; } /* ============================================ LOOKBOOK - Nascondi Color Swatches ============================================ */ /* Nascondi color swatches nella pagina Lookbook */ .template-page .product-form__controls.js-color-swatches, .lookbook .product-form__controls.js-color-swatches, .page-lookbook .product-form__controls.js-color-swatches { display: none !important; } /* Nascondi anche il container parameters se contiene solo swatches */ .template-page .product-parameters.no-js-hidden, .lookbook .product-parameters.no-js-hidden, .page-lookbook .product-parameters.no-js-hidden { display: none !important; } /* ============================================================================ FIX DEFINITIVO: Gap Announcement + Header (PULITO) ============================================================================ */ /* Rimuovi web-pixels-manager dalla grid */ #web-pixels-manager-sandbox-container { position: absolute !important; pointer-events: none !important; } /* Override per tutte le pagine template */ @media (max-width: 768px) { /* Rimuovi margin tra sections per announcement + header */ body.template-index .section-announcement + .shopify-section, body.template-page .section-announcement + .shopify-section, body.template-collection .section-announcement + .shopify-section, .section-announcement + .header-mobile-section, .section-announcement + .shopify-section-group-header-group { margin-top: 0 !important; } /* Header mobile senza gap */ .header-mobile, #header-mobile-menu, .header-mobile-section { margin-top: 0 !important; padding-top: 0 !important; } /* Announcement bar pulito */ .section-announcement, .announcement-bar { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Riduci altezza header mobile */ :root { --header-mobile-height: 50px !important; } .header-mobile { min-height: 50px !important; } }