/* tin-product :: scheda prodotto MOBILE ridisegnata (gating via html.tin-m; desktop invariato) */

/* base: nascosti su desktop */
.tin-swatches { display: none; }
.tin-sticky-atc { display: none; }

/* ============================================================
   VISTA MOBILE (html.tin-m): nascondi il layout Enfold, mostra la nostra card
   ============================================================ */
html.tin-m .tin-m-wrap > *:not(.tin-m-card):not(.tin-m-keep) { display: none !important; }
/* recensioni nascoste su mobile (richiesta utente) */
html.tin-m [class*="av-rev-sec"],
html.tin-m .av-woo-product-review,
html.tin-m .woocommerce-Reviews { display: none !important; }
/* barra categorie in cima alla card (forzata visibile: ha una regola solo-mobile) */
/* padding-top ampio: l'overflow-x:auto taglia anche in verticale, e i badge coi
   numeri sporgono in alto sopra le icone → senza spazio venivano tagliati. */
html.tin-m .tin-m-card > .tinm-catbar { display: flex !important; flex-wrap: nowrap; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; padding: 8px 0 6px; }
html.tin-m .tin-m-card > .tinm-catbar::-webkit-scrollbar { display: none; }
/* bottone "Continue shopping" RIMOSSO su mobile (nascosto in product.js): era
 * ridondante con la barra "Scopri i prodotti". Stile pillola verde eliminato. */
html.tin-m .tin-m-card { max-width: 480px; margin: 0 auto; padding: 6px 8px 16px; box-sizing: border-box; }
/* sezioni Enfold più compatte su mobile-prodotto + spazio a fine pagina per la barra fissa */
html.tin-m .template-page.content { padding-top: 16px !important; padding-bottom: 16px !important; }
/* spazio in fondo: deve superare la barra "Aggiungi al carrello" fissa (63px) +
   la safe-area del telefono (notch/home indicator), altrimenti la barra prodotti
   in fondo resta coperta. */
html.tin-m #main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
/* MARGINE laterale UNIFORME su TUTTE le pagine prodotto: prendiamo il controllo
   del gutter del container Enfold (che varia per layout/responsive) e lo fissiamo
   a un valore piccolo e uguale ovunque. Regolabile da qui (--tin-side).
   NB: max-width NON toccato, così l'anteprima ?tinm resta a 430px e testabile. */
html.tin-m #main .container { width: 94% !important; max-width: 94% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; }

/* immagine prodotto */
html.tin-m .tin-m-img { border-radius: 12px; overflow: hidden; background: #3f5136; margin-bottom: 14px; }
html.tin-m .tin-m-img img { width: 100%; height: auto; display: block; margin: 0; }

/* via le specifiche minute su mobile: SKU / categorie / tag */
html.tin-m .product_meta { display: none !important; }

/* titolo + cuore (a destra) + MOQ */
html.tin-m .tin-m-title { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; color: #2f2f28; line-height: 1.2; margin: 0 0 8px; }
html.tin-m .tin-m-title-txt { flex: 1 1 auto; }
html.tin-m .tin-m-title .my-wishlist-btn { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; float: none !important; font-size: 26px !important; line-height: 1 !important; }
html.tin-m .tin-m-moq { display: inline-block; font-size: 12px; font-weight: 700; color: #7a5a12; background: #f6e7c6; padding: 4px 12px; border-radius: 999px; margin-bottom: 19px; }
/* Badge "MINIMUM ORDER 20 PCS" nascosto su Pala Romana (961) e Focaccia (972): il
   loro minimo reale è 10 pz, non 20 → togliamo la scritta sbagliata sotto il titolo. */
html.tin-m #top.postid-961 .tin-m-moq,
html.tin-m #top.postid-972 .tin-m-moq { display: none !important; }
/* meno spazio tra MOQ e la prima sezione (Inches) */
html.tin-m .tin-m-card .variations_form { margin-top: 0 !important; }
html.tin-m .variations_form .variations,
html.tin-m .variations_form .variations tbody,
html.tin-m .variations_form .variations tr:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* ---- form variazioni: pulito (via il riquadro grigio Enfold) ---- */
html.tin-m .variations_form { margin: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html.tin-m .single_variation_wrap { background: transparent !important; border: 0 !important; padding: 0 !important; }
html.tin-m .variations_form .variations { width: 100%; margin: 0 0 4px; border: 0; background: none; }
html.tin-m .variations_form .variations tbody,
html.tin-m .variations_form .variations tr { display: block; }
html.tin-m .variations_form .variations th.label,
html.tin-m .variations_form .variations td.value { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; text-align: left !important; background: none !important; }
html.tin-m .variations_form .variations th.label label { font-size: 13px; font-weight: 600; color: #6b6b60; margin: 0 !important; padding: 0 !important; }
html.tin-m .variations_form .variations tr { margin-bottom: 14px; }
html.tin-m .variations_form .reset_variations { display: none; }

/* nascondi la tendina nativa (resta funzionante) */
html.tin-m .variations td.value select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
/* pillole */
html.tin-m .tin-swatches { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
html.tin-m .tin-swatch { min-width: 46px; padding: 10px 16px; border: 1.5px solid #d9cfbb; border-radius: 999px; background: #fff; color: #475141; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.tin-m .tin-swatch.is-active { background: #475141; border-color: #475141; color: #f3ead9; }
html.tin-m .tin-swatch.is-gone { display: none !important; }

/* prezzo, stepper e Add-to-cart in alto: NASCOSTI (spostati nella barra sticky in basso).
   Restano nel DOM (la barra ne legge il prezzo e clicca il vero bottone). */
html.tin-m .single_variation_wrap .woocommerce-variation-price,
html.tin-m .woocommerce-variation-price,
html.tin-m .single_variation_wrap .woocommerce-variation-description,
html.tin-m .woocommerce-variation-description,
html.tin-m .woocommerce-variation-add-to-cart { display: none !important; }

/* ---- accordion info ---- */
html.tin-m .togglecontainer { margin: 22px 0 0; }
html.tin-m .av_toggle_section { border-top: 1px solid #e6dfce; }
html.tin-m .av_toggle_section:last-child { border-bottom: 1px solid #e6dfce; }
/* Enfold: .single_toggle ha overflow:hidden + altezza=solo header, e il contenuto (.toggle_wrap)
   è position:absolute → normalmente è il JS di Enfold a espandere l'altezza all'apertura.
   Avendolo neutralizzato, sblocchiamo noi: niente clip sul contenitore + contenuto nel flusso. */
html.tin-m .single_toggle { overflow: visible !important; height: auto !important; }
html.tin-m .tin-acc .toggle_wrap,
html.tin-m .tin-acc .toggle_content { position: static !important; display: none; }
html.tin-m .tin-acc.tin-acc-open .toggle_wrap,
html.tin-m .tin-acc.tin-acc-open .toggle_content { display: block; visibility: visible !important; padding: 0 2px 14px; }
html.tin-m .tin-acc.tin-acc-open .toggle_wrap *,
html.tin-m .tin-acc.tin-acc-open .toggle_content * { visibility: visible !important; }

/* tipografia contenuto accordion: via lo sfondo grigio Enfold (invers-color), testo pulito */
html.tin-m .tin-acc .toggle_content,
html.tin-m .tin-acc .toggle_content * { background: transparent !important; box-shadow: none !important; }
html.tin-m .tin-acc .toggle_content { color: #45463c !important; font-size: 15px !important; line-height: 1.6 !important; text-align: left !important; border: 0 !important; padding: 2px 0 16px !important; }
html.tin-m .tin-acc .toggle_content p { margin: 0 0 10px !important; color: #45463c !important; font-size: 15px !important; line-height: 1.6 !important; text-align: left !important; }
html.tin-m .tin-acc .toggle_content h1,
html.tin-m .tin-acc .toggle_content h2,
html.tin-m .tin-acc .toggle_content h3,
html.tin-m .tin-acc .toggle_content h4,
html.tin-m .tin-acc .toggle_content h5,
html.tin-m .tin-acc .toggle_content strong { font-size: 15px !important; font-weight: 700 !important; color: #2f2f28 !important; margin: 14px 0 4px !important; text-align: left !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
html.tin-m .tin-acc .toggle_content > :first-child { margin-top: 0 !important; }
html.tin-m .tin-acc .toggle_content ul,
html.tin-m .tin-acc .toggle_content ol { margin: 0 0 10px 18px !important; padding: 0 !important; }
html.tin-m .tin-acc .toggle_content li { margin: 0 0 4px !important; font-size: 15px !important; line-height: 1.5 !important; text-align: left !important; }
html.tin-m .tin-acc .toggle_content img,
html.tin-m .tin-acc .toggle_content table { max-width: 100% !important; height: auto !important; }
html.tin-m .tin-acc-head { cursor: pointer; position: relative; margin: 0 !important; padding: 15px 28px 15px 2px !important; font-size: 15px !important; font-weight: 600 !important; color: #2f2f28 !important; background: none !important; border: 0 !important; }
html.tin-m .tin-acc-head .toggle_icon,
html.tin-m .tin-acc-head .avia-arrow,
html.tin-m .tin-acc-head .av-toggle-arrow { display: none !important; }
html.tin-m .tin-acc-head::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
html.tin-m .tin-acc.tin-acc-open .tin-acc-head::after { transform: translateY(-30%) rotate(-135deg); }

/* ---- barra ORIZZONTALE "altri prodotti": tutta larghezza, 4 visibili, scroll laterale ---- */
html.tin-m .tin-m-products { margin: 24px 0 24px; }
html.tin-m .tin-m-products__title { display: none !important; }
html.tin-m .tin-m-prod-rail { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 2px 8px 8px; scroll-snap-type: x proximity; }
html.tin-m .tin-m-prod-rail::-webkit-scrollbar { height: 0; }
html.tin-m a.tin-m-prod { flex: 0 0 calc((100% - 30px) / 4); display: flex; flex-direction: column; text-decoration: none !important; scroll-snap-align: start; }
html.tin-m .tin-m-prod__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #f3ead9; }
html.tin-m .tin-m-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.tin-m .tin-m-prod__name { font-size: 12px; font-weight: 600; color: #2f2f28 !important; line-height: 1.25; margin-top: 6px; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.tin-m .tin-m-prod__price { display: none !important; }

/* ---- barra acquisto sticky (SEMPRE visibile): [img] [titolo+prezzo] [− N +] [Aggiungi] ---- */
html.tin-m .tin-sticky-atc { display: flex !important; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e6dfce; box-shadow: 0 -4px 16px rgba(0,0,0,.10); transform: translateY(110%); transition: transform .22s ease; }
html.tin-m .tin-sticky-atc.is-on { transform: translateY(0); }
/* NB: il rialzo del launcher Jany su mobile è ora globale (tin-mobile, wp_head
 * #tin-global-ui-fix, @media max-width:820px) così vale su tutte le pagine. */
/* miniatura + descrizione + prezzo */
html.tin-m .tin-sticky-atc__img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #f3ead9; }
html.tin-m .tin-sticky-atc__meta { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
html.tin-m .tin-sticky-atc__title { font-size: 12.5px; font-weight: 600; color: #3a3a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tin-m .tin-sticky-atc__price { font-size: 15px; font-weight: 800; color: #475141; }
html.tin-m .tin-sticky-atc__price .amount,
html.tin-m .tin-sticky-atc__price .woocommerce-Price-amount,
html.tin-m .tin-sticky-atc__price bdi { color: #475141 !important; font-weight: 800 !important; }
/* via il "+ vat" (suffisso prezzo WooCommerce) vicino al prezzo nella scheda
   prodotto mobile (card + barra fissa). Su shop/carrello/desktop resta. */
html.tin-m .woocommerce-price-suffix { display: none !important; }
/* selettore quantità */
html.tin-m .tin-qty { display: flex; align-items: center; flex: 0 0 auto; border: 1.5px solid #d9cfbb; border-radius: 10px; overflow: hidden; height: 46px; }
html.tin-m .tin-qty__b { width: 34px; align-self: stretch; border: 0; background: #f6f2e9; color: #475141; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.tin-m .tin-qty__b:active { background: #ece5d6; }
html.tin-m .tin-qty__v { min-width: 30px; text-align: center; font-size: 16px; font-weight: 700; color: #2f2f28; }
/* bottone aggiungi al carrello (etichetta singola) */
html.tin-m .tin-sticky-atc__btn { flex: 0 0 auto; height: 46px; min-height: 0; padding: 0 16px; border: 0; border-radius: 10px; background: #475141; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; }

/* ============================================================================
   DESKTOP (>820px, html.tin-d) — pillole Size/Quantity a "tocco leggero".
   Le pillole (.tin-swatches) sono già costruite da buildSwatches anche su desktop:
   qui le mostriamo e nascondiamo le tendine native, SENZA ricostruire il layout
   Enfold. La barra sticky resta SOLO mobile (nessuna regola tin-d per essa).
   ============================================================================ */
html.tin-d .variations td.value select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
html.tin-d .variations td.value { position: relative; }
html.tin-d .tin-swatches { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
/* !important perché il tema Enfold stila i <button> con !important e vincerebbe */
html.tin-d .tin-swatch { min-width: 48px; padding: 10px 18px !important; border: 1.5px solid #d9cfbb !important; border-radius: 999px !important; background: #fff !important; color: #475141 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; transition: border-color .15s, background .15s, color .15s; }
html.tin-d .tin-swatch:hover { border-color: #475141 !important; }
html.tin-d .tin-swatch.is-active { background: #475141 !important; border-color: #475141 !important; color: #f3ead9 !important; }
/* opzioni non disponibili: spariscono (come mobile), non barrate */
html.tin-d .tin-swatch.is-gone { display: none !important; }
/* etichetta attributo (Size / Quantity): leggibile + centrata verticalmente sulle pillole */
html.tin-d .variations th.label,
html.tin-d .variations td.value { vertical-align: middle !important; }
html.tin-d .variations th.label label { font-weight: 600; color: #3a3a2e; }
/* cuore wishlist (snippet #6642) riposizionato in alto a destra accanto al titolo */
html.tin-d .tin-d-wish { position: absolute !important; top: 50%; right: 0; transform: translateY(calc(-50% + 13px)); margin: 0 !important; padding: 0 !important; font-size: 40px !important; line-height: 1; z-index: 3; }
/* via la linea decorativa Enfold SOLO dal titolo prodotto (box marcato in JS) */
html.tin-d .tin-d-titlebox .special-heading-border { display: none !important; }
/* prezzo della variazione selezionata in evidenza (verde brand) */
html.tin-d .woocommerce-variation-price .price,
html.tin-d .woocommerce-variation-price .price .amount,
html.tin-d .woocommerce-variation-price .price bdi { color: #475141 !important; font-weight: 700; font-size: 1.5em; }
/* FASCIA acquisto in fondo al riquadro grigio, stile come la barra mobile:
   prezzo verde a sinistra, quantità + Add to cart a destra, su sfondo bianco */
/* 3px di grigio sotto la fascia */
html.tin-d .variations_form.cart { padding-bottom: 3px !important; }
html.tin-d .single_variation_wrap { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 12px; justify-content: space-between; background: #fff; margin: 30px -12px 0 !important; padding: 7px 15px; border-radius: 8px; border: 1px solid #e2dccb; box-shadow: none; }
html.tin-d .single_variation { margin: 0 !important; flex: 0 0 auto; }
html.tin-d .woocommerce-variation-price { margin: 0 !important; }
html.tin-d .single_variation .woocommerce-variation-description { display: none !important; }
html.tin-d .woocommerce-variation-add-to-cart { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; flex: 0 0 auto; width: auto !important; }
/* stepper quantità stile mobile (bordo + bottoni beige), compatto */
html.tin-d .woocommerce-variation-add-to-cart .quantity { display: flex !important; align-items: center; border: 1.5px solid #d9cfbb; border-radius: 8px; overflow: hidden; height: 38px; margin: 0 !important; }
html.tin-d .woocommerce-variation-add-to-cart .quantity input.qty { border: 0 !important; background: transparent !important; width: 40px; text-align: center; font-weight: 700; color: #2f2f28; height: 100%; box-shadow: none !important; }
html.tin-d .woocommerce-variation-add-to-cart .quantity input.minus,
html.tin-d .woocommerce-variation-add-to-cart .quantity input.plus { border: 0 !important; background: #f6f2e9 !important; color: #475141 !important; font-size: 16px; font-weight: 700; width: 30px; height: 100%; cursor: pointer; border-radius: 0 !important; }
/* bottone Add to cart stile mobile (verde brand arrotondato), compatto */
html.tin-d .woocommerce-variation-add-to-cart .single_add_to_cart_button { background: #475141 !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; min-height: 38px; padding: 7px 18px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; }
/* via il "+ vat" (suffisso prezzo) dalla scheda prodotto desktop */
html.tin-d .woocommerce-price-suffix { display: none !important; }
/* rimuovi "Clear" (reset variazioni) + tutta la riga meta (SKU, Tag, Categorie) dalla scheda desktop */
html.tin-d .reset_variations,
html.tin-d .product_meta { display: none !important; }
/* "MINIMUM ORDER X PCS" come pillola beige (stile badge mobile) */
html.tin-d ul.tin-d-moq-ul { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; }
html.tin-d li.tin-d-moq { list-style: none !important; display: inline-block; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .02em; color: #7a5a12 !important; background: #f6e7c6 !important; padding: 5px 14px !important; border-radius: 999px; margin: 4px 0 10px; }
html.tin-d li.tin-d-moq * { color: #7a5a12 !important; background: transparent !important; }
/* ---- Prodotti SEMPLICI (senza varianti): stessa fascia acquisto dei variabili ----
   Il contenitore Enfold `.av-woo-purchase-button` (marcato .tin-d-simpleband in JS) racchiude
   prezzo + form.cart come fratelli → riga bianca [prezzo verde | quantità | Add to cart].
   Niente margine negativo qui: il semplice non ha il riquadro grigio delle varianti. */
/* box GRIGIO esterno — identico a .variations_form dei prodotti con variante */
html.tin-d .tin-d-simpleband { display: block !important; background: var(--enfold-main-color-bg2, #e3e3e3); margin: 22px 0 0; padding: 70px 3px 3px 3px; border-radius: 2px; border: 1px solid var(--enfold-main-color-bg2, #e3e3e3); box-shadow: none; }
/* fascia BIANCA interna — identica a .single_variation_wrap dei variabili */
html.tin-d .tin-d-simplewrap { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 12px; background: #fff; margin: 0; padding: 7px 15px; border-radius: 8px; border: 1px solid #e2dccb; box-shadow: none; }
html.tin-d .tin-d-simpleprice { margin: 0 auto 0 0 !important; padding: 0 !important; flex: 0 0 auto; }
html.tin-d .tin-d-simpleprice,
html.tin-d .tin-d-simpleprice .amount,
html.tin-d .tin-d-simpleprice bdi { color: #475141 !important; font-weight: 700; font-size: 1.5em; }
html.tin-d .tin-d-simpleform { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; flex: 0 0 auto; }
/* stepper quantità stile mobile (bordo + bottoni beige), compatto */
html.tin-d .tin-d-simpleform .quantity { display: flex !important; align-items: center; border: 1.5px solid #d9cfbb; border-radius: 8px; overflow: hidden; height: 38px; margin: 0 !important; }
html.tin-d .tin-d-simpleform .quantity input.qty { border: 0 !important; background: transparent !important; width: 40px; text-align: center; font-weight: 700; color: #2f2f28; height: 100%; box-shadow: none !important; }
html.tin-d .tin-d-simpleform .quantity input.minus,
html.tin-d .tin-d-simpleform .quantity input.plus { border: 0 !important; background: #f6f2e9 !important; color: #475141 !important; font-size: 16px; font-weight: 700; width: 30px; height: 100%; cursor: pointer; border-radius: 0 !important; }
/* bottone Add to cart stile mobile (verde brand arrotondato), compatto */
html.tin-d .tin-d-simpleform .single_add_to_cart_button { background: #475141 !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; min-height: 38px; padding: 7px 18px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; margin: 0 !important; }