/* ═══════════════════════════════════════
IL FORNO DEL BORGO — Design System v4
Multi-page edition
═══════════════════════════════════════ */
@import url('https://fonts.bunny.net/css?family=playfair-display:400,500,600,700,900i&family=source-sans-3:300,400,500,600,700&display=swap');
:root{
--br:#3a2211;--br-l:#5c3d24;--br-ll:#7a5535;--br-d:#2a180c;
--terra:#c27840;--terra-d:#9a5a28;
--bg:#eec07b;--bg-d:#d4a45a;
--cream:#fdf6eb;--cream-d:#f5e6cc;
--white:#fff;
--red:#dc2626;--green:#16a34a;
--radius:8px;--radius-lg:12px;--radius-xl:16px;
--shadow:0 1px 3px rgba(58,34,17,.12),0 1px 2px rgba(58,34,17,.08);
--shadow-md:0 4px 12px rgba(58,34,17,.12);
--shadow-lg:0 8px 24px rgba(58,34,17,.15);
--font-body:'Source Sans 3',sans-serif;
--font-display:'Playfair Display',serif;
--header-h:56px;
--nav-h:40px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;font-family:var(--font-body);background:var(--cream);color:var(--br);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}
input,textarea,select{font-family:inherit}
/* ── HEADER (v81: position relative, scorre con pagina) ── */
#fdb-header{
position:relative;z-index:100;
height:var(--header-h);background:var(--br);
display:flex;align-items:center;gap:12px;padding:0 16px;
}
.fdb-logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fdb-logo span{font-family:var(--font-display);font-size:18px;color:var(--bg);font-style:italic;white-space:nowrap}
.fdb-search{flex:1;max-width:600px;display:flex;border-radius:var(--radius);overflow:hidden}
.fdb-search input{flex:1;padding:0 14px;height:38px;border:none;outline:none;font-size:14px;background:var(--white);color:var(--br)}
.fdb-search button{width:44px;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.fdb-search button:hover{background:var(--bg-d)}
.fdb-search button svg{width:18px;height:18px;color:var(--br)}
.fdb-header-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.fdb-ha-btn{display:flex;flex-direction:column;align-items:center;padding:4px 8px;color:var(--cream);font-size:11px;gap:1px;border-radius:4px;transition:background .15s;cursor:pointer}
.fdb-ha-btn:hover{background:rgba(255,255,255,.1)}
.fdb-ha-btn svg{width:20px;height:20px}
.fdb-ha-btn .label{font-size:11px;font-weight:600;white-space:nowrap}
.fdb-cart-btn{position:relative}
.fdb-cart-count{
position:absolute;top:-4px;right:2px;
min-width:18px;height:18px;background:var(--bg);color:var(--br);
font-size:11px;font-weight:800;border-radius:9px;
align-items:center;justify-content:center;padding:0 4px;
display:none;
}
.fdb-cart-count.show{display:flex}
/* ── CATEGORY NAV (v61: scrolla con la pagina) ── */
#fdb-nav{
position:relative;z-index:99;
height:var(--nav-h);background:var(--br-l);
display:flex;align-items:center;gap:0;
overflow-x:auto;scrollbar-width:none;
border-top:1px solid rgba(238,192,123,.2);
}
#fdb-nav::-webkit-scrollbar{display:none}
.nav-item{
display:flex;align-items:center;padding:0 14px;height:100%;
color:var(--cream);font-size:13px;font-weight:500;white-space:nowrap;
border-right:1px solid rgba(255,255,255,.08);
transition:background .15s;cursor:pointer;
}
.nav-item:hover,.nav-item.active{background:rgba(238,192,123,.15);color:var(--bg)}
.nav-item.active{font-weight:700;border-bottom:2px solid var(--bg)}
/* ── BREADCRUMB ── */
.fdb-breadcrumb{padding:12px 16px;font-size:12px;color:var(--br-ll);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fdb-breadcrumb a{color:var(--terra);text-decoration:underline}
.fdb-breadcrumb a:hover{color:var(--terra-d)}
.fdb-breadcrumb span{color:var(--br-l)}
/* ── LAYOUT ── */
.fdb-page{max-width:1400px;margin:0 auto;padding:0 16px 40px}
.fdb-grid-sidebar{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
@media(max-width:768px){.fdb-grid-sidebar{grid-template-columns:1fr}}
/* ── PRODUCT CARD ── */
.pcard{
background:var(--white);border-radius:var(--radius-lg);
border:1px solid rgba(238,192,123,.2);
overflow:hidden;transition:box-shadow .2s,transform .2s;
display:flex;flex-direction:column;
}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pcard-img{aspect-ratio:1;overflow:hidden;position:relative;background:var(--cream-d)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:4px}
.pcard-cat{font-size:10px;font-weight:700;color:var(--terra);text-transform:uppercase;letter-spacing:.06em}
.pcard-name{font-size:14px;font-weight:600;color:var(--br);line-height:1.3;flex:1}
.pcard-price{font-size:18px;font-weight:800;color:var(--terra);font-family:var(--font-display)}
.pcard-old{font-size:12px;color:var(--br-ll);text-decoration:line-through}
.pcard-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.badge-best{background:#fef3c7;color:#92400e}
.badge-new{background:#dcfce7;color:#15803d}
.badge-stock{background:#fee2e2;color:#dc2626}
.pcard-footer{padding:0 12px 12px;display:flex;gap:8px}
.btn-cart{flex:1;padding:8px;background:var(--bg);color:var(--br);font-weight:700;font-size:13px;border-radius:var(--radius);transition:background .15s;text-align:center}
.btn-cart:hover{background:var(--bg-d)}
.btn-buy{padding:8px 12px;background:var(--br);color:var(--cream);font-weight:700;font-size:13px;border-radius:var(--radius);white-space:nowrap;transition:background .15s}
.btn-buy:hover{background:var(--br-l)}
.wl-icon{width:32px;height:32px;border-radius:50%;border:1px solid rgba(238,192,123,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s}
.wl-icon:hover{border-color:var(--terra)}
.wl-icon svg{width:14px;height:14px}
.wl-icon.active svg{fill:var(--red);stroke:var(--red)}
.wl-icon:not(.active) svg{fill:none;stroke:var(--br-l);stroke-width:2}
/* ── SIDEBAR BOX ── */
.sidebar-box{background:var(--white);border-radius:var(--radius-lg);border:1px solid rgba(238,192,123,.2);padding:16px;margin-bottom:16px}
.sidebar-box h3{font-size:14px;font-weight:700;color:var(--br);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--cream-d)}
/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius);font-weight:700;font-size:14px;transition:all .15s;cursor:pointer}
.btn-primary{background:var(--bg);color:var(--br)}
.btn-primary:hover{background:var(--bg-d)}
.btn-dark{background:var(--br);color:var(--cream)}
.btn-dark:hover{background:var(--br-l)}
.btn-terra{background:var(--terra);color:var(--white)}
.btn-terra:hover{background:var(--terra-d)}
.btn-outline{background:transparent;color:var(--br);border:1.5px solid rgba(238,192,123,.4)}
.btn-outline:hover{background:var(--cream-d);border-color:var(--terra)}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* ── STARS ── */
.stars{display:inline-flex;gap:1px;color:var(--bg)}
.stars span{font-size:14px}
/* ── BADGE / PILLS ── */
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.pill-green{background:#dcfce7;color:#15803d}
.pill-red{background:#fee2e2;color:#dc2626}
.pill-amber{background:#fef3c7;color:#92400e}
.pill-blue{background:#dbeafe;color:#1e40af}
/* ── TOAST ── */
#fdb-toast{
position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(10px);z-index:9999;
background:var(--br);color:var(--cream);padding:10px 20px;border-radius:var(--radius-lg);
font-size:13px;font-weight:600;pointer-events:none;
opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap;box-shadow:var(--shadow-lg);
}
#fdb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#fdb-toast.err{background:var(--red)}
/* ── FOOTER ── */
#fdb-footer{background:#fdf6eb !important;color:#3a2211 !important;margin-top:40px;padding:32px 16px 80px;border-top:1px solid rgba(58,34,17,.08)}
.footer-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.footer-col h4{font-family:var(--font-display);font-size:13px;font-weight:700;color:#3a2211 !important;margin-bottom:14px;letter-spacing:.1em;text-transform:uppercase}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-col a{color:#3a2211 !important;font-size:14px;transition:color .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.footer-col a:hover{color:#c27840 !important;text-decoration:underline}
.footer-col p{color:#5a4023 !important;font-size:13px;line-height:1.6}
.footer-bottom{max-width:1400px;margin:24px auto 0;padding-top:16px;border-top:1px solid rgba(238,192,123,.15);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:11px;color:rgba(238,192,123,.4)}
/* ── LOADING SKELETON ── */
.skeleton{background:linear-gradient(90deg,var(--cream-d) 25%,#f0dfc0 50%,var(--cream-d) 75%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── PROMO BANNER ── */
#fdb-promo{display:none;background:linear-gradient(90deg,#3a2211,#5c3d24,#3a2211);background-size:200%;animation:pb 6s ease infinite;padding:8px;text-align:center;font-size:13px;font-weight:600;color:var(--bg)}
@keyframes pb{0%,100%{background-position:0%}50%{background-position:100%}}
#fdb-promo.show{display:block}
.promo-code{background:var(--bg);color:var(--br);padding:2px 8px;border-radius:20px;font-weight:800;margin-left:6px;font-size:12px}
/* ── RESPONSIVE ── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
@media(max-width:768px){.products-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.products-grid{grid-template-columns:1fr;gap:14px}}
/* ── QUANTITY CONTROL ── */
.qty-ctrl{display:inline-flex;align-items:center;border:1.5px solid rgba(238,192,123,.4);border-radius:var(--radius);overflow:hidden}
.qty-btn{width:32px;height:32px;background:var(--cream-d);color:var(--br);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s;cursor:pointer;border:none}
.qty-btn:hover{background:var(--bg);color:var(--br)}
.qty-val{min-width:36px;text-align:center;font-weight:700;font-size:14px;color:var(--br);background:var(--white)}
/* ── SECTION TITLES ── */
.section-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--br);margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
.section-title small{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--terra)}
.section-divider{height:2px;background:linear-gradient(to right,var(--bg),transparent);margin-bottom:20px;border-radius:1px}
/* ── CHIPS/FILTER ── */
.chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1.5px solid rgba(238,192,123,.3);color:var(--br);background:var(--white);cursor:pointer;transition:all .15s;gap:4px}
.chip:hover,.chip.active{background:var(--bg);border-color:var(--bg);color:var(--br)}
/* ── STAR RATING INTERACTIVE ── */
.star-input{display:flex;gap:4px;font-size:24px;cursor:pointer}
.star-input span{color:rgba(238,192,123,.3);transition:color .1s;user-select:none}
.star-input span.on{color:var(--bg)}
/* ── UTILS ── */
.hidden{display:none!important}
.flex{display:flex}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.text-sm{font-size:12px}.text-muted{color:var(--br-ll)}.text-terra{color:var(--terra)}
.font-bold{font-weight:700}.font-display{font-family:var(--font-display)}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.p-16{padding:16px}.p-20{padding:20px}
.rounded{border-radius:var(--radius)}.rounded-lg{border-radius:var(--radius-lg)}
.border{border:1px solid rgba(238,192,123,.2)}
.bg-white{background:var(--white)}.bg-cream{background:var(--cream)}.bg-cream-d{background:var(--cream-d)}
.w-full{width:100%}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sticky-top{position:sticky;top:calc(var(--header-h) + var(--nav-h) + 16px)}
/* ── FADE-IN AL SCROLL ── */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
/* ── CART PING ANIMATION ── */
@keyframes cpop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.cart-ping{animation:cpop .5s ease}
/* Performance hints */
.fade-in{will-change:opacity,transform}
.cart-ping{will-change:transform,opacity}
.skeleton{will-change:background-position}
.btn,.pcard{contain:layout style}
/* ═══ BOTTOM NAV MOBILE — best practice e-commerce ═══ */
.fdb-bottom-nav{display:none}
/* ─── STICKY CART BAR — Amazon-style "X away from free shipping" ─── */
#fdb-sticky-cart{
position:fixed;bottom:0;left:0;right:0;z-index:99;
background:var(--white);
border-top:1px solid rgba(58,34,17,.1);
box-shadow:0 -4px 20px rgba(58,34,17,.08);
display:none;
padding-bottom:env(safe-area-inset-bottom);
}
.fdb-sc-inner{
max-width:1280px;margin:0 auto;padding:12px 16px;
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.fdb-sc-info{flex:1;min-width:200px}
.fdb-sc-message{
font-size:13px;color:var(--br);
margin-bottom:6px;line-height:1.4;
}
.fdb-sc-message strong{color:var(--terra-d,#9a5a28)}
/* v62 — Quando spedizione gratuita sbloccata, messaggio VERDE */
.fdb-sc-message.unlocked{
color:#1e6b3a !important;
background:#dcf8e5;
padding:8px 12px;
border-radius:8px;
font-weight:600;
border:1px solid rgba(30,107,58,.2);
}
.fdb-sc-message.unlocked strong{color:#1e6b3a !important;}
.fdb-sc-progress{
height:5px;background:rgba(58,34,17,.08);
border-radius:3px;overflow:hidden;
}
.fdb-sc-bar{
height:100%;background:linear-gradient(90deg,var(--terra),#d4a050);
transition:width .4s cubic-bezier(.4,0,.2,1);
border-radius:3px;
}
.fdb-sc-actions{
display:flex;align-items:center;gap:14px;
}
.fdb-sc-summary{
display:flex;flex-direction:column;align-items:flex-end;
font-size:11px;color:var(--br-ll);line-height:1.3;
}
.fdb-sc-count{font-weight:600}
.fdb-sc-total{font-size:16px;font-weight:700;color:var(--br)}
.fdb-sc-btn{
background:var(--br);color:var(--cream);
padding:11px 22px;font-size:14px;font-weight:600;
border-radius:6px;text-decoration:none;
letter-spacing:.02em;transition:background .15s;
white-space:nowrap;
}
.fdb-sc-btn:hover{background:var(--br-d,#2a180c)}
@media(max-width:640px){
/* Su mobile la bottom nav è già visibile → sposta la sticky cart bar sopra */
#fdb-sticky-cart{bottom:56px}
.fdb-sc-inner{padding:10px 12px;gap:10px}
.fdb-sc-message{font-size:12px;margin-bottom:5px}
.fdb-sc-total{font-size:14px}
.fdb-sc-btn{padding:9px 16px;font-size:13px}
.fdb-sc-summary{display:none}
}
@media(max-width:480px){
.fdb-sc-actions{margin-left:auto}
}
@media(max-width:640px){
.fdb-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--white);border-top:1px solid rgba(238,192,123,.3);z-index:100;justify-content:space-around;align-items:center;box-shadow:0 -2px 12px rgba(58,34,17,.08);padding-bottom:env(safe-area-inset-bottom)}
.fdb-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--br-ll);text-decoration:none;gap:2px;font-weight:600;transition:color .15s}
.fdb-bottom-nav a.active{color:var(--terra)}
.fdb-bottom-nav a span:first-child{font-size:20px;line-height:1}
body{padding-bottom:60px}
}
/* ═════════════════════════════════════════════════════════════
RESPONSIVE IMPROVEMENTS v4 — mobile + tablet + desktop
═════════════════════════════════════════════════════════════ */
/* Mobile portrait < 480px */
@media (max-width: 480px) {
body { font-size: 14px; }
h1, .h1 { font-size: 22px !important; line-height: 1.2 !important; }
h2, .h2 { font-size: 18px !important; }
h3, .h3 { font-size: 16px !important; }
.container, main { padding: 12px !important; }
.pcard { padding: 8px !important; }
.pcard-name { font-size: 13px !important; }
.pcard-price { font-size: 14px !important; }
.btn, button { min-height: 44px; padding: 10px 14px; font-size: 14px; }
#fdb-header { padding: 0 10px !important; }
.fdb-logo span { font-size: 16px !important; }
.fdb-search { display: none !important; } /* nasconde search su mobile small */
#fdb-nav { overflow-x: auto; white-space: nowrap; padding: 0 10px; }
#fdb-nav .nav-item { font-size: 12px !important; padding: 8px 10px !important; }
.fdb-sc-inner { padding: 10px 12px !important; gap: 10px !important; }
.fdb-sc-message { font-size: 12px !important; }
.fdb-sc-summary { display: none; }
.fdb-sc-btn { font-size: 13px !important; padding: 8px 14px !important; }
table { font-size: 12px; }
img { max-width: 100%; height: auto; }
}
/* Tablet 481-768px */
@media (min-width: 481px) and (max-width: 768px) {
.container, main { padding: 16px !important; }
.products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
.products-grid { grid-template-columns: repeat(4, 1fr) !important; }
.container, main { max-width: 1280px; margin: 0 auto; padding: 24px; }
}
/* Touch-friendly su tutti i device */
button, .btn, a.btn { min-height: 44px; }
input, select, textarea { min-height: 44px; font-size: 16px; /* iOS no zoom */ }
/* Anti-overflow orizzontale (problema comune mobile) */
html, body { overflow-x: clip; max-width: 100%; }
/* Cart layout responsive */
@media (max-width: 768px) {
.cart-layout { grid-template-columns: 1fr !important; }
.cart-item { flex-direction: row; padding: 12px !important; }
.cart-item-img { width: 70px !important; height: 70px !important; flex-shrink: 0; }
.item-name { font-size: 14px !important; }
.item-price-mobile { display: block !important; font-weight: 700; color: var(--terra); margin: 4px 0; }
.item-price { display: none !important; }
.qty-ctrl { transform: scale(0.9); }
}
/* ═════════════════════════════════════════════════════════════
PREMIUM POLISH v8 — micro-animazioni, hover, shadows
═════════════════════════════════════════════════════════════ */
/* Transitions globali per polish */
.pcard, .btn, button, .nav-item, .feat-card, a {
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
/* Product cards più premium */
.pcard {
background: #fff;
border: 1px solid rgba(58,34,17,.06);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(58,34,17,.04), 0 2px 8px rgba(58,34,17,.02);
}
.pcard:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(58,34,17,.12), 0 4px 8px rgba(58,34,17,.06);
border-color: rgba(194,120,64,.3);
}
.pcard-img {
background: linear-gradient(135deg, var(--cream) 0%, var(--bg-d) 100%);
position: relative;
overflow: hidden;
}
.pcard-img img {
transition: transform .4s ease;
}
.pcard:hover .pcard-img img {
transform: scale(1.06);
}
/* Bottoni premium con effetto profondità */
.btn-cart, .btn-buy {
border-radius: 8px;
font-weight: 600;
letter-spacing: .01em;
padding: 10px 14px;
position: relative;
overflow: hidden;
}
.btn-cart::after, .btn-buy::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
transform: translateX(-100%) skewX(-20deg);
transition: transform .4s ease;
}
.btn-cart:hover::after, .btn-buy:hover::after {
transform: translateX(100%) skewX(-20deg);
}
.btn-buy {
background: linear-gradient(135deg, var(--terra) 0%, #b56428 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(194,120,64,.25);
}
.btn-buy:hover {
box-shadow: 0 6px 18px rgba(194,120,64,.4);
transform: translateY(-1px);
}
.btn-cart {
background: var(--br);
color: var(--bg);
box-shadow: 0 4px 10px rgba(58,34,17,.2);
}
.btn-cart:hover {
background: #2a1a0c;
box-shadow: 0 6px 14px rgba(58,34,17,.3);
transform: translateY(-1px);
}
/* Hero più premium */
.hero, #fdb-hero {
background: linear-gradient(135deg, var(--bg) 0%, var(--cream) 60%, var(--bg-d) 100%);
position: relative;
}
/* Toast premium */
#fdb-toast {
background: var(--br) !important;
color: var(--bg) !important;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.1);
padding: 14px 20px;
font-weight: 600;
}
/* Badges più premium */
.pcard-badge {
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 10px;
border-radius: 99px;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
backdrop-filter: blur(4px);
}
.badge-best {
background: #c27840;
color: #fff;
border: 1px solid #b56e36;
}
.badge-new {
background: #3a2211;
color: #fdf6eb;
border: 1px solid #2a1808;
}
/* Input form premium */
input, textarea, select {
border-radius: 10px;
border: 1.5px solid rgba(58,34,17,.12);
padding: 12px 14px;
font-size: 15px;
background: #fff;
transition: border-color .2s, box-shadow .2s, transform .1s;
}
input:focus, textarea:focus, select:focus {
border-color: var(--terra);
box-shadow: 0 0 0 3px rgba(194,120,64,.12);
outline: none;
}
/* Header sticky premium */
#fdb-header {
backdrop-filter: blur(12px);
background: rgba(58,34,17,.96);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(238,192,123,.1);
}
/* Smooth scroll */
html { scroll-behavior: smooth; }
/* Skeleton loader */
.skeleton {
background: linear-gradient(90deg, var(--cream) 0%, var(--bg-d) 50%, var(--cream) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s infinite;
border-radius: 8px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Reveal on scroll (used by intersectionObserver if attivo) */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Trust badges */
.trust-bar {
display: flex;
justify-content: center;
gap: 28px;
padding: 24px 20px;
background: var(--cream);
flex-wrap: wrap;
border-top: 1px solid rgba(58,34,17,.05);
border-bottom: 1px solid rgba(58,34,17,.05);
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--br);
font-weight: 600;
}
.trust-item-ico {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(58,34,17,.08);
font-size: 18px;
}
/* Floating WhatsApp button (always visible) */
#wa-float {
position: fixed;
bottom: 90px;
right: 20px;
z-index: 95;
background: #25D366;
color: #fff;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 16px rgba(37,211,102,.4);
font-size: 28px;
transition: transform .2s;
}
#wa-float:hover {
transform: scale(1.1);
}
/* ═════════════════════════════════════════════════════════════
CART DRAWER — slide-in da destra (stile Martesana)
═════════════════════════════════════════════════════════════ */
#fdb-cart-drawer {
position: fixed; top: 0; right: -440px;
width: 100%; max-width: 420px; height: 100vh;
background: #fff; z-index: 9998;
box-shadow: -8px 0 32px rgba(0,0,0,.15);
transition: right .35s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column;
overflow: hidden;
}
#fdb-cart-drawer.open { right: 0; }
#fdb-cart-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.4);
z-index: 9997; opacity: 0; pointer-events: none;
transition: opacity .3s; backdrop-filter: blur(2px);
}
#fdb-cart-overlay.open { opacity: 1; pointer-events: auto; }
.cd-header {
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(58,34,17,.08);
display: flex; align-items: center; justify-content: space-between;
background: var(--cream);
}
.cd-header h3 {
font-family: var(--font-display); font-style: italic;
font-size: 24px; color: var(--br); margin: 0; font-weight: 500;
}
.cd-close {
background: transparent; border: 0; cursor: pointer;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; color: var(--br);
}
.cd-close:hover { background: rgba(58,34,17,.08); }
.cd-body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cd-empty { text-align: center; padding: 40px 20px; color: var(--br-l); }
.cd-empty .ico { font-size: 56px; margin-bottom: 14px; opacity: .5; }
.cd-item {
display: flex; gap: 14px; padding: 14px 0;
border-bottom: 1px solid rgba(58,34,17,.06);
}
.cd-item:last-child { border-bottom: 0; }
.cd-item-img {
width: 70px; height: 70px; border-radius: 8px;
object-fit: cover; flex-shrink: 0; background: var(--cream);
}
.cd-item-info { flex: 1; min-width: 0; }
.cd-item-name {
font-size: 14px; font-weight: 600; color: var(--br);
margin-bottom: 4px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.cd-item-price { font-size: 13px; color: var(--terra); font-weight: 700; }
.cd-item-qty {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
font-size: 13px;
}
.cd-qty-btn {
width: 24px; height: 24px; border: 1px solid rgba(58,34,17,.15);
background: #fff; border-radius: 4px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 14px; color: var(--br);
}
.cd-remove {
background: transparent; border: 0; cursor: pointer;
color: var(--br-ll); font-size: 12px; margin-left: auto;
text-decoration: underline;
}
.cd-footer {
padding: 20px 24px; border-top: 1px solid rgba(58,34,17,.08);
background: #fff;
}
.cd-totale {
display: flex; justify-content: space-between;
font-size: 16px; font-weight: 700; color: var(--br); margin-bottom: 14px;
}
.cd-totale .val { color: var(--terra); font-size: 22px; }
.cd-actions { display: flex; flex-direction: column; gap: 8px; }
.cd-btn {
padding: 14px; border-radius: 10px; border: 0; cursor: pointer;
font-weight: 700; font-size: 14px; transition: .2s;
}
.cd-btn-primary {
background: linear-gradient(135deg, var(--terra), #9a5a28);
color: #fff;
box-shadow: 0 4px 14px rgba(194,120,64,.3);
}
.cd-btn-primary:hover { transform: translateY(-1px); }
.cd-btn-secondary {
background: #fff; border: 1.5px solid var(--br); color: var(--br);
}
.cd-shipping-bar {
background: var(--cream); padding: 10px 14px; border-radius: 8px;
font-size: 12px; color: var(--br); margin-bottom: 14px;
text-align: center;
}
.cd-shipping-bar.free { background: #dcf8e5; color: #1e6b3a; font-weight: 700; font-size:13px; padding:12px 14px; }
.cd-shipping-bar .bar {
height: 4px; background: rgba(58,34,17,.1); border-radius: 99px;
margin-top: 6px; overflow: hidden;
}
.cd-shipping-bar .bar-fill {
height: 100%; background: var(--terra); transition: width .4s ease;
}
/* ═════════════════════════════════════════════════════════════
HEADER MODERNO v10 — minimal, light, icone sottili
═════════════════════════════════════════════════════════════ */
#fdb-header {
background: rgba(255,255,255,.92) !important;
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(58,34,17,.06);
padding: 0 24px;
min-height: 64px;
display: flex;
align-items: center;
gap: 24px;
}
#fdb-header .fdb-logo span,
#fdb-header .fdb-logo {
font-family: var(--font-display, 'Dancing Script', cursive);
font-style: italic;
font-size: 22px;
color: #3a2211 !important;
font-weight: 500;
white-space: nowrap;
letter-spacing: -.01em;
}
.fdb-search {
flex: 1; max-width: 520px; position: relative;
margin: 0 16px;
}
.fdb-search input {
width: 100%;
background: rgba(58,34,17,.05);
border: 1px solid transparent;
border-radius: 999px;
padding: 10px 18px 10px 44px;
font-size: 14px;
color: #3a2211;
transition: .2s;
}
.fdb-search input:focus {
background: #fff;
border-color: rgba(194,120,64,.4);
box-shadow: 0 0 0 3px rgba(194,120,64,.1);
outline: none;
}
.fdb-search::before {
content: '';
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
pointer-events: none;
}
.fdb-search button {
display: none !important;
}
.fdb-ha-btn {
display: flex; align-items: center; justify-content: center;
background: transparent !important;
color: #3a2211 !important;
width: 40px; height: 40px;
border-radius: 50%;
padding: 0 !important;
transition: .2s;
position: relative;
}
.fdb-ha-btn .label {
display: none !important; /* via testi sotto icone */
}
.fdb-ha-btn:hover {
background: rgba(58,34,17,.06) !important;
}
.fdb-ha-btn svg {
width: 22px; height: 22px;
stroke: #3a2211;
stroke-width: 1.5;
fill: none;
}
.fdb-cart-count {
position: absolute;
top: 0; right: 0;
background: #c27840 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700;
border-radius: 999px;
padding: 0 5px;
min-width: 16px; height: 16px;
display: none;
align-items: center; justify-content: center;
border: 2px solid #fff;
}
.fdb-cart-count.show { display: flex !important; }
/* CATEGORY NAV modernizzato */
#fdb-nav {
background: #fff !important;
border-bottom: 1px solid rgba(58,34,17,.06);
padding: 0 24px;
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
#fdb-nav::-webkit-scrollbar { display: none; }
#fdb-nav .nav-item, #fdb-nav a {
padding: 14px 16px !important;
font-size: 13px !important;
color: #7a5535 !important;
text-decoration: none;
font-weight: 500;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: .15s;
background: transparent !important;
border-radius: 0 !important;
}
#fdb-nav .nav-item.active,
#fdb-nav .nav-item:hover {
color: #c27840 !important;
border-bottom-color: #c27840 !important;
background: transparent !important;
}
#fdb-nav svg, #fdb-nav .nav-item svg {
width: 14px; height: 14px;
stroke: currentColor;
stroke-width: 1.5;
margin-right: 4px;
}
/* Bottom nav mobile più moderna */
#fdb-bottom-nav, .fdb-bottom-nav {
background: rgba(255,255,255,.98) !important;
backdrop-filter: blur(20px);
border-top: 1px solid rgba(58,34,17,.08);
}
#fdb-bottom-nav a {
color: #7a5535 !important;
}
#fdb-bottom-nav a.active {
color: #c27840 !important;
}
#fdb-bottom-nav svg {
stroke-width: 1.5;
}
/* Mobile responsive header */
@media (max-width: 768px) {
#fdb-header {
padding: 0 14px;
gap: 8px;
min-height: 56px;
}
#fdb-header .fdb-logo span,
#fdb-header .fdb-logo {
font-size: 18px;
}
.fdb-search {
margin: 0 8px;
}
.fdb-search input {
padding: 8px 14px 8px 38px;
font-size: 13px;
}
.fdb-ha-btn {
width: 36px; height: 36px;
}
.fdb-ha-btn svg {
width: 20px; height: 20px;
}
}
@media (max-width: 480px) {
.fdb-search {
display: none !important;
}
}
/* ═══ Fix drawer override anti-conflict ═══ */
#fdb-cart-drawer {
position: fixed !important;
top: 0 !important;
right: -440px !important;
width: 100% !important;
max-width: 420px !important;
height: 100vh !important;
height: 100dvh !important;
background: #fff !important;
z-index: 99999 !important;
box-shadow: -8px 0 32px rgba(0,0,0,.15) !important;
transition: right .35s cubic-bezier(.4,0,.2,1) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
#fdb-cart-drawer.open { right: 0 !important; }
#fdb-cart-overlay {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,.4) !important;
z-index: 99998 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .3s !important;
backdrop-filter: blur(2px);
}
#fdb-cart-overlay.open { opacity: 1 !important; pointer-events: auto !important; }
/* ═════════════════════════════════════════════════════════════
APPLE-SOFT v13 — morbidezza, linearità, palette tenue
═════════════════════════════════════════════════════════════ */
:root {
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 28px;
}
/* Palette più tenue */
body { background: #fafaf7; }
/* Border-radius più morbidi ovunque */
.pcard, .hp-step, .hp-value, .hp-review, .fd-step, .fd-premio, .fd-t,
.cs-card, .cs-value, .blog-card, .faq-item, .cd-item-img {
border-radius: var(--radius-lg) !important;
}
.btn, button, input, textarea, select, .hp-btn, .cd-btn, .btn-cart, .btn-buy {
border-radius: 999px !important;
}
.fdb-search input {
border-radius: 999px !important;
}
/* Transizioni più lente e fluide (stile Apple) */
* {
transition-duration: .35s !important;
transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}
/* Header ultra-minimal Apple-style */
#fdb-header {
background: rgba(255,255,255,.72) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: .5px solid rgba(0,0,0,.08) !important;
padding: 0 22px !important;
min-height: 48px !important;
}
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span {
font-size: 18px !important;
letter-spacing: -.02em !important;
color: #1d1d1f !important;
font-style: italic;
font-weight: 500 !important;
}
/* Icone header: stroke ultra-sottile come Apple */
.fdb-ha-btn svg,
#fdb-nav svg,
.cd-close svg,
.hp-step svg {
stroke-width: 1.5 !important;
stroke: #1d1d1f !important;
fill: none !important;
}
.fdb-ha-btn svg {
width: 18px !important;
height: 18px !important;
}
.fdb-ha-btn {
background: transparent !important;
color: #1d1d1f !important;
width: 36px !important;
height: 36px !important;
}
.fdb-ha-btn:hover {
background: rgba(0,0,0,.05) !important;
}
.fdb-ha-btn .label {
display: none !important;
}
/* Cart badge ultra-discreto */
.fdb-cart-count {
background: #1d1d1f !important;
color: #fff !important;
font-size: 9px !important;
font-weight: 600 !important;
border: 1.5px solid rgba(255,255,255,.95) !important;
padding: 0 4px !important;
min-width: 14px !important;
height: 14px !important;
}
/* Search bar Apple-style */
.fdb-search input {
background: rgba(0,0,0,.04) !important;
border: 0 !important;
padding: 8px 16px 8px 38px !important;
font-size: 13px !important;
font-weight: 400;
color: #1d1d1f;
}
.fdb-search input:focus {
background: #fff !important;
box-shadow: 0 0 0 4px rgba(0,122,255,.08) !important;
}
.fdb-search::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Nav minimal */
#fdb-nav {
background: rgba(255,255,255,.6) !important;
backdrop-filter: blur(20px);
padding: 0 22px !important;
border-bottom: .5px solid rgba(0,0,0,.06) !important;
}
#fdb-nav .nav-item, #fdb-nav a {
font-size: 12px !important;
color: #424245 !important;
font-weight: 400 !important;
letter-spacing: -.01em;
padding: 11px 14px !important;
}
#fdb-nav .nav-item.active,
#fdb-nav .nav-item:hover {
color: #1d1d1f !important;
border-bottom-color: #1d1d1f !important;
}
/* Bottoni hero più puliti */
.hp-btn {
font-weight: 500 !important;
letter-spacing: -.01em;
padding: 14px 26px !important;
font-size: 15px !important;
}
.hp-btn-primary {
background: #1d1d1f !important;
color: #fff !important;
box-shadow: none !important;
}
.hp-btn-primary:hover {
background: #424245 !important;
transform: none !important;
}
.hp-btn-secondary {
background: transparent !important;
border: 1px solid rgba(255,255,255,.4) !important;
}
/* Hero più pulito */
.hp-hero h1 {
letter-spacing: -.025em !important;
font-weight: 500 !important;
}
.hp-hero p.lead {
font-weight: 400 !important;
color: rgba(253,246,235,.78) !important;
}
/* Sezioni titoli più puliti */
.hp-section-title,
.cs-section h2,
.cs-hero h1,
.faq-hero h1,
.blog-hero h1,
.fd-hero h1 {
letter-spacing: -.025em !important;
font-weight: 500 !important;
}
.hp-section-eyebrow {
font-weight: 600 !important;
letter-spacing: .15em !important;
font-size: 11px !important;
color: #6e6e73 !important;
text-transform: uppercase;
}
/* Cards più morbide */
.pcard {
border: .5px solid rgba(0,0,0,.06) !important;
box-shadow: none !important;
}
.pcard:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,.08) !important;
border-color: rgba(0,0,0,.08) !important;
}
/* Bottoni add/buy più clean */
.btn-cart, .btn-buy {
font-weight: 500 !important;
font-size: 13px !important;
padding: 10px 14px !important;
letter-spacing: -.005em;
box-shadow: none !important;
}
.btn-cart {
background: #1d1d1f !important;
}
.btn-cart::after, .btn-buy::after {
display: none !important;
}
.btn-buy {
background: linear-gradient(135deg, #c27840, #b56428) !important;
}
/* Sezione trust più Apple */
.hp-trust {
background: #f5f5f7 !important;
border: 0 !important;
}
.hp-trust-item {
font-weight: 400 !important;
font-size: 13px !important;
color: #424245 !important;
}
.hp-trust-ico {
box-shadow: none !important;
background: #fff !important;
}
/* Mobile bottom nav minimal */
#fdb-bottom-nav {
background: rgba(255,255,255,.72) !important;
backdrop-filter: saturate(180%) blur(20px);
border-top: .5px solid rgba(0,0,0,.08) !important;
}
/* Toast morbido */
#fdb-toast {
background: rgba(29,29,31,.92) !important;
backdrop-filter: blur(20px);
border-radius: var(--radius-md) !important;
font-weight: 500 !important;
}
/* WhatsApp float più discreto */
#wa-float {
width: 52px !important;
height: 52px !important;
box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}
/* Cart drawer più morbido */
#fdb-cart-drawer {
border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
background: #fafaf7 !important;
}
.cd-header {
background: transparent !important;
border-bottom: .5px solid rgba(0,0,0,.06) !important;
}
.cd-btn {
border-radius: 999px !important;
font-weight: 500 !important;
}
.cd-btn-primary {
background: #1d1d1f !important;
box-shadow: none !important;
}
/* Footer più Apple-style */
footer {
background: #f5f5f7 !important;
color: #424245 !important;
font-size: 13px;
}
footer h4 {
font-size: 12px !important;
letter-spacing: -.01em;
color: #1d1d1f !important;
font-weight: 600 !important;
}
footer a {
color: #424245 !important;
text-decoration: none;
}
footer a:hover {
color: #1d1d1f !important;
}
/* Più white space dappertutto */
.hp-numbers, .hp-products, .hp-values, .hp-shipping, .hp-reviews {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
@media (max-width: 768px) {
.hp-numbers, .hp-products, .hp-values, .hp-shipping, .hp-reviews {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
}
/* ═════════════════════════════════════════════════════════════
BOTTOM NAV — Home / Account / Carrello / Menu
Mobile: fixed bottom · Desktop: nascosta (uso header)
═════════════════════════════════════════════════════════════ */
.fdb-bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 95;
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-top: .5px solid rgba(0,0,0,.08);
display: flex;
justify-content: space-around;
align-items: center;
padding: 6px 0 max(8px, env(safe-area-inset-bottom));
min-height: 56px;
}
.fdb-bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: #1d1d1f;
padding: 6px 4px;
position: relative;
transition: color .2s;
}
.fdb-bottom-nav a:hover { color: #c27840; }
.fdb-bottom-nav a.active {
color: #c27840;
}
.fdb-bottom-nav a.active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 3px;
background: #c27840;
border-radius: 0 0 3px 3px;
}
.fdb-bottom-nav .bn-ico {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
}
.fdb-bottom-nav .bn-ico svg {
width: 24px; height: 24px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
}
.fdb-bottom-nav .bn-lbl {
font-size: 10px;
font-weight: 500;
letter-spacing: -.01em;
}
.fdb-bottom-nav #fdb-bn-count {
position: absolute;
top: 4px;
right: calc(50% - 18px);
background: #c27840 !important;
color: #fff !important;
border: 2px solid #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: none;
align-items: center;
justify-content: center;
}
.fdb-bottom-nav #fdb-bn-count.show {
display: flex !important;
}
/* Padding bottom al body per non sovrapporre contenuto */
@media (max-width: 1024px) {
body {
padding-bottom: 64px;
}
/* Nascondo nav categorie orizzontale (#fdb-nav) su mobile, lascio solo bottom nav */
#fdb-nav {
display: none !important;
}
}
/* Desktop ≥1025px: NASCONDO bottom nav (uso header) */
@media (min-width: 1025px) {
.fdb-bottom-nav {
display: none !important;
}
body {
padding-bottom: 0 !important;
}
}
/* WhatsApp float si sposta sopra la bottom nav su mobile */
@media (max-width: 1024px) {
#wa-float {
bottom: 76px !important;
}
}
/* ═════════════════════════════════════════════════════════════
COLORI CALDI v19 — Override palette Apple-cold con tonalità Forno
═════════════════════════════════════════════════════════════ */
/* Body con cream caldo (NO #fafaf7 freddo) */
body { background: #fdf6eb !important; }
/* HEADER caldo marrone (NO bianco translucido) */
#fdb-header {
background: linear-gradient(180deg, #3a2211 0%, #2a1a0c 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(238,192,123,.15) !important;
color: #fdf6eb !important;
}
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span {
color: #eec07b !important;
font-family: 'Dancing Script', cursive !important;
font-style: italic !important;
font-size: 22px !important;
font-weight: 500 !important;
letter-spacing: -.01em !important;
}
/* Icone header in cream caldo (NO grigio Apple) */
.fdb-ha-btn {
background: transparent !important;
color: #eec07b !important;
width: 40px !important;
height: 40px !important;
}
.fdb-ha-btn svg {
stroke: #eec07b !important;
stroke-width: 1.5 !important;
width: 20px !important;
height: 20px !important;
}
.fdb-ha-btn:hover {
background: rgba(238,192,123,.1) !important;
}
/* Cart badge arancione caldo */
.fdb-cart-count {
background: #c27840 !important;
color: #fff !important;
border-color: #3a2211 !important;
font-size: 10px !important;
min-width: 16px !important;
height: 16px !important;
}
/* Search bar — fondo chiaro su header scuro */
.fdb-search input {
background: rgba(255,255,255,.95) !important;
color: #3a2211 !important;
border: 0 !important;
}
.fdb-search input::placeholder {
color: #7a5535 !important;
}
.fdb-search input:focus {
background: #fff !important;
box-shadow: 0 0 0 3px rgba(238,192,123,.25) !important;
}
.fdb-search::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* NAV pulita con sfondo cream chiaro (NO bianco freddo) */
#fdb-nav {
background: #fdf6eb !important;
backdrop-filter: none !important;
border-bottom: 1px solid rgba(58,34,17,.08) !important;
padding: 0 24px !important;
}
#fdb-nav .nav-item,
#fdb-nav a {
color: #5a4023 !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 14px 16px !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
}
#fdb-nav .nav-item.active,
#fdb-nav .nav-item:hover {
color: #c27840 !important;
border-bottom-color: #c27840 !important;
background: transparent !important;
}
#fdb-nav svg, #fdb-nav .nav-item svg {
stroke: currentColor !important;
}
/* Bottom nav mobile — caldo */
.fdb-bottom-nav {
background: rgba(58,34,17,.98) !important;
backdrop-filter: none !important;
border-top: 1px solid rgba(238,192,123,.15) !important;
}
.fdb-bottom-nav a {
color: #eec07b !important;
}
.fdb-bottom-nav a:hover,
.fdb-bottom-nav a.active {
color: #c27840 !important;
}
.fdb-bottom-nav a.active::before {
background: #c27840 !important;
}
.fdb-bottom-nav .bn-ico svg {
stroke: currentColor !important;
}
/* Bottoni — caldi */
.btn-cart {
background: #3a2211 !important;
color: #fdf6eb !important;
}
.btn-buy {
background: linear-gradient(135deg, #c27840, #9a5a28) !important;
color: #fff !important;
}
.hp-btn-primary {
background: #c27840 !important;
color: #fff !important;
box-shadow: 0 6px 24px rgba(194,120,64,.35) !important;
}
.hp-btn-primary:hover {
background: #9a5a28 !important;
}
/* Footer caldo */
footer {
background: #3a2211 !important;
color: #eec07b !important;
}
footer h4 {
color: #fdf6eb !important;
}
footer a {
color: rgba(253,246,235,.85) !important;
}
footer a:hover {
color: #c27840 !important;
}
/* Trust bar e altre sezioni rimangono come HTML inline (cream) */
/* ═════════════════════════════════════════════════════════════
SKELETON loader prodotti (mostra durante fetch)
═════════════════════════════════════════════════════════════ */
@keyframes fdbSkel {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.fdb-skel-card {
background: #fff;
border-radius: 22px;
border: 1px solid rgba(58,34,17,.06);
overflow: hidden;
box-shadow: 0 1px 3px rgba(58,34,17,.04);
}
.fdb-skel-img {
aspect-ratio: 1;
background: linear-gradient(90deg, #fdf6eb 0%, #f4e4c1 50%, #fdf6eb 100%);
background-size: 200% 100%;
animation: fdbSkel 1.4s ease-in-out infinite;
}
.fdb-skel-body { padding: 18px; }
.fdb-skel-line {
height: 14px;
border-radius: 4px;
background: linear-gradient(90deg, #fdf6eb 0%, #f4e4c1 50%, #fdf6eb 100%);
background-size: 200% 100%;
animation: fdbSkel 1.4s ease-in-out infinite;
margin-bottom: 8px;
}
.fdb-skel-line.short { width: 40%; }
.fdb-skel-line.medium { width: 75%; }
.fdb-skel-line.tall { height: 24px; width: 50%; margin-top: 12px; }
/* Logo header: NON troncare mai */
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span,
#fdb-header a[href="index.html"] {
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
flex-shrink: 0 !important;
min-width: 0 !important;
}
@media (max-width: 480px) {
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span,
#fdb-header a[href="index.html"] {
font-size: 17px !important;
}
/* Su mobile piccolo, nascondi search bar per dare spazio al logo */
.fdb-search { display: none !important; }
}
@media (max-width: 360px) {
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span,
#fdb-header a[href="index.html"] {
font-size: 15px !important;
}
}
/* ═══ #3 — Trust bar e sezioni con colori caldi forzati ═══ */
.hp-trust {
background: #fdf6eb !important;
border: 0 !important;
border-bottom: 1px solid rgba(58,34,17,.08) !important;
}
.hp-trust-item {
color: #3a2211 !important;
font-weight: 500 !important;
}
.hp-trust-ico {
background: #fff !important;
box-shadow: 0 3px 10px rgba(58,34,17,.08) !important;
}
.hp-trust-ico svg {
stroke: #c27840 !important;
stroke-width: 1.8 !important;
}
.hp-numbers {
background: #fff !important;
}
.hp-section-eyebrow {
color: #c27840 !important;
}
.hp-section-title {
color: #3a2211 !important;
}
.hp-section-sub {
color: #7a5535 !important;
}
.hp-num-item .num {
color: #c27840 !important;
}
.hp-num-item .label {
color: #7a5535 !important;
}
/* ═════════════════════════════════════════════════════════════
NAV CHIPS — pillole stile AppScript (Home · Recensioni · ecc)
═════════════════════════════════════════════════════════════ */
.fdb-nav-chips {
background: #fdf6eb !important;
padding: 10px 16px !important;
display: flex !important;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid rgba(58,34,17,.06) !important;
}
.fdb-nav-chips::-webkit-scrollbar { display: none; }
.nav-chip {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 8px 16px !important;
background: #fff !important;
color: #5a4023 !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 999px !important;
border: 1px solid rgba(58,34,17,.08) !important;
text-decoration: none !important;
white-space: nowrap;
transition: all .2s ease;
flex-shrink: 0;
}
.nav-chip svg {
stroke: currentColor !important;
stroke-width: 1.5 !important;
width: 14px; height: 14px;
}
.nav-chip:hover {
background: #f4e4c1 !important;
color: #3a2211 !important;
border-color: rgba(194,120,64,.3) !important;
transform: translateY(-1px);
}
.nav-chip.active {
background: #c27840 !important;
color: #fff !important;
border-color: #c27840 !important;
box-shadow: 0 2px 8px rgba(194,120,64,.25);
}
.nav-chip.active svg { stroke: #fff !important; }
@media (max-width: 768px) {
.fdb-nav-chips { padding: 8px 12px !important; gap: 6px; }
.nav-chip { font-size: 12px !important; padding: 7px 12px !important; }
.nav-chip span { display: none; }
.nav-chip.active span { display: inline; }
}
/* ═════════════════════════════════════════════════════════════
HEADER — nascondo search bar (era troppo invasiva)
La ricerca resta DENTRO la pagina catalogo come filtro
═════════════════════════════════════════════════════════════ */
.fdb-search {
display: none !important;
}
/* Logo SEMPRE per intero (no truncation) */
#fdb-header {
padding: 0 22px !important;
min-height: 60px !important;
}
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span,
#fdb-header a[href="index.html"] {
font-family: 'Dancing Script', cursive !important;
font-style: italic !important;
font-size: 22px !important;
font-weight: 500 !important;
color: #eec07b !important;
white-space: nowrap !important;
overflow: visible !important;
text-decoration: none !important;
flex: 0 0 auto !important;
}
@media (max-width: 480px) {
#fdb-header .fdb-logo,
#fdb-header .fdb-logo span,
#fdb-header a[href="index.html"] {
font-size: 18px !important;
}
#fdb-header { padding: 0 14px !important; }
}
/* ═════════════════════════════════════════════════════════════
LEGAL BAR — Responsive 4col → 2col tablet → 1col mobile
═════════════════════════════════════════════════════════════ */
#static-legal-bar {
background: #2a1a0c !important;
padding: 50px 24px 28px !important;
}
#static-legal-bar > div > div:first-child {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin-bottom: 32px !important;
}
@media (max-width: 900px) {
#static-legal-bar > div > div:first-child {
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px !important;
}
}
@media (max-width: 480px) {
#static-legal-bar { padding: 36px 18px 24px !important; }
#static-legal-bar > div > div:first-child {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#static-legal-bar > div > div:last-child {
flex-direction: column;
text-align: center;
}
}
#static-legal-bar a:hover { color: #c27840 !important; }
/* ═════════════════════════════════════════════════════════════
v47 — HEADER + NAV non sticky (scrolla via con la pagina)
═════════════════════════════════════════════════════════════ */
#page-header,
#page-header.hidden {
position: relative !important;
top: auto !important;
z-index: auto !important;
background: transparent !important;
transform: none !important;
transition: none !important;
}
#page-header #fdb-header {
position: relative !important;
top: auto !important;
}
#page-header #fdb-nav {
position: relative !important;
}
/* Icone header — coerenti: stroke 1.5, dimensione 20px */
#fdb-header .fdb-ha-btn,
#fdb-header a.fdb-ha-btn {
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #eec07b !important;
text-decoration: none !important;
border-radius: 50%;
position: relative;
}
#fdb-header .fdb-ha-btn:hover {
background: rgba(238,192,123,.1) !important;
}
#fdb-header .fdb-ha-btn svg {
width: 20px !important;
height: 20px !important;
stroke: #eec07b !important;
stroke-width: 1.5 !important;
fill: none !important;
}
#fdb-header .fdb-ha-btn .label {
display: none !important;
}
#fdb-header .fdb-cart-count {
position: absolute;
top: 2px;
right: 2px;
background: #c27840 !important;
color: #fff !important;
border: 2px solid #3a2211 !important;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: none;
align-items: center;
justify-content: center;
}
/* Cart drawer header coerente (svuota tutto a sinistra) */
.cd-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 18px 22px !important;
}
.cd-header h3 {
font-family: 'Dancing Script', cursive !important;
font-style: italic !important;
font-size: 22px !important;
color: #3a2211 !important;
margin: 0 !important;
}
.cd-clear:hover {
color: #c27840 !important;
background: rgba(194,120,64,.08) !important;
}
/* ═════════════════════════════════════════════════════════════
v47 — NAV non sticky (scrolla via con la pagina)
═════════════════════════════════════════════════════════════ */
#fdb-nav.fdb-nav-chips {
position: relative !important;
top: auto !important;
z-index: auto !important;
background: #fdf6eb !important;
border-bottom: 1px solid rgba(58,34,17,.08) !important;
}
/* v81: su mobile <1024px usa bottom nav, nasconde top chips */
@media (max-width: 1024px) {
#fdb-nav.fdb-nav-chips {
display: none !important;
}
}
/* ═════════════════════════════════════════════════════════════
NAV AUTO-HIDE on scroll down, show on scroll up
═════════════════════════════════════════════════════════════ */
#page-header {
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
#page-header.hidden {
transform: translateY(-100%);
}
/* ═════════════════════════════════════════════════════════════
v36 — Announcement bar scorrevole + nav scroll normale + toast
═════════════════════════════════════════════════════════════ */
100% { transform: translateX(-50%); }
}
/* DISATTIVA auto-hide nav: ora scrolla normalmente con la pagina */
#page-header,
#page-header.hidden {
position: relative !important;
top: auto !important;
transform: none !important;
transition: none !important;
}
#fdb-nav.fdb-nav-chips {
position: sticky !important;
top: var(--header-h) !important;
z-index: 199 !important;
background: #fdf6eb !important;
border-bottom: 1px solid rgba(58,34,17,.08) !important;
display: flex !important;
flex-wrap: wrap !important;
overflow: visible !important;
padding: 10px 16px !important;
gap: 8px !important;
justify-content: center !important;
}
/* Logo image accanto al nome */
.fdb-logo {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
text-decoration: none !important;
}
.fdb-logo img {
height: 36px !important;
width: auto !important;
display: inline-block !important;
}
@media (max-width: 640px) {
.fdb-logo img { height: 28px !important; }
.fdb-logo span { font-size: 18px !important; }
}
/* TOAST in basso al centro (non sovrapposto ai bottoni) */
#fdb-toast {
position: fixed !important;
bottom: 80px !important; /* sopra la bottom-nav mobile */
left: 50% !important;
transform: translateX(-50%) !important;
background: #3a2211 !important;
color: #fdf6eb !important;
padding: 10px 20px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 500 !important;
z-index: 99999 !important;
box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
opacity: 0;
pointer-events: none;
transition: opacity .3s, bottom .3s;
white-space: nowrap;
}
#fdb-toast.show {
opacity: 1 !important;
bottom: 100px !important;
}
@media (max-width: 768px) {
#fdb-toast {
bottom: 90px !important;
}
#fdb-toast.show {
bottom: 110px !important;
}
}
/* ═════════════════════════════════════════════════════════════
v37 — Logo grande + announcement slim + ordine corretto
═════════════════════════════════════════════════════════════ */
/* Logo image GRANDE */
.fdb-logo {
display: inline-flex !important;
align-items: center !important;
gap: 12px;
text-decoration: none !important;
}
.fdb-logo-img {
height: 56px !important;
width: auto !important;
display: inline-block !important;
vertical-align: middle !important;
}
@media (max-width: 768px) {
.fdb-logo-img { height: 44px !important; }
.fdb-logo span { font-size: 19px !important; }
}
@media (max-width: 480px) {
.fdb-logo-img { height: 38px !important; }
}
/* Announcement bar più stretto (riduce spazio) */
.fdb-announcement-bar {
padding: 6px 0 !important;
font-size: 11px !important;
}
/* ═════════════════════════════════════════════════════════════
v40 — Announcement bar STATICA con fade rotation
═════════════════════════════════════════════════════════════ */
.fdb-announcement-bar {
background: #3a2211;
color: #eec07b;
padding: 9px 16px;
font-size: 12px;
font-weight: 500;
letter-spacing: .03em;
text-align: center;
position: relative;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.fdb-announcement-bar .announcement-msg {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
transition: opacity .5s ease;
padding: 0 16px;
}
.fdb-announcement-bar .announcement-msg.active {
opacity: 1;
}
@media (max-width: 480px) {
.fdb-announcement-bar { font-size: 11px; }
}
/* ═════════════════════════════════════════════════════════════
v41 — Header+Nav auto-hide on scroll
═════════════════════════════════════════════════════════════ */
#page-header {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: #fdf6eb;
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
#page-header.hidden {
transform: translateY(-100%);
}
/* ═════════════════════════════════════════════════════════════
v41 — Info Bar (contatti + posizione)
═════════════════════════════════════════════════════════════ */
.fdb-info-bar {
background: #3a2211;
color: #eec07b;
padding: 8px 0;
font-size: 12px;
border-bottom: 1px solid rgba(238,192,123,.12);
}
.fdb-info-bar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.fdb-info-bar .info-left,
.fdb-info-bar .info-right {
display: inline-flex;
align-items: center;
gap: 6px;
}
.fdb-info-bar .info-right {
gap: 16px;
}
.fdb-info-bar .info-link {
color: #eec07b;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color .2s;
}
.fdb-info-bar .info-link:hover {
color: #fff;
}
.fdb-info-bar svg {
vertical-align: middle;
opacity: .8;
}
@media (max-width: 640px) {
.fdb-info-bar { font-size: 11px; padding: 6px 0; }
.fdb-info-bar-inner { padding: 0 14px; gap: 8px; }
.fdb-info-bar .info-right { gap: 10px; }
.fdb-info-bar .info-link span { display: none; }
}
@media (max-width: 480px) {
.fdb-info-bar .info-left {
/* Su schermi molto piccoli, nascondi località */
font-size: 10px;
}
}
/* ═════════════════════════════════════════════════════════════
v43 — Contact bar (top) + Trust bar scrolling
═════════════════════════════════════════════════════════════ */
/* CONTATTI BAR (in cima, palette cream) */
.fdb-contact-bar {
background: #fdf6eb;
color: #5a4023;
padding: 8px 0;
font-size: 12px;
border-bottom: 1px solid rgba(58,34,17,.06);
}
.fdb-contact-bar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
flex-wrap: wrap;
}
.fdb-c-link {
color: #5a4023;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .2s;
font-weight: 500;
}
.fdb-c-link:hover { color: #c27840; }
.fdb-c-link svg { opacity: .65; }
@media (max-width: 768px) {
.fdb-contact-bar-inner { gap: 14px; justify-content: center; }
.fdb-c-link { font-size: 11px; }
}
@media (max-width: 480px) {
.fdb-contact-bar { padding: 6px 0; }
.fdb-c-link span { display: inline; } /* mostra anche su mobile */
}
/* TRUST BAR scorrevole (cream con messaggi terra) */
.fdb-trust-bar {
background: #fdf6eb;
color: #3a2211;
border-bottom: 1px solid rgba(58,34,17,.08);
overflow: hidden;
position: relative;
padding: 9px 0;
font-size: 13px;
}
.fdb-trust-track {
display: inline-flex;
align-items: center;
white-space: nowrap;
animation: trustScroll 60s linear infinite;
gap: 0;
}
.fdb-trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 24px;
font-weight: 500;
color: #3a2211;
}
.fdb-trust-dot {
color: #c27840;
font-size: 10px;
opacity: .6;
}
@keyframes trustScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.fdb-trust-bar:hover .fdb-trust-track {
animation-play-state: paused;
}
@media (max-width: 480px) {
.fdb-trust-bar { padding: 7px 0; font-size: 12px; }
.fdb-trust-item { padding: 0 18px; }
}
/* ═════════════════════════════════════════════════════════════
v43 — Footer "Info utili" box
═════════════════════════════════════════════════════════════ */
.footer-info-box {
background: #fdf6eb;
border-radius: 14px;
padding: 22px 26px;
margin: 0 0 32px;
color: #3a2211;
}
.footer-info-box .fib-title {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
color: #3a2211;
margin: 0 0 12px;
font-weight: 500;
position: relative;
padding-bottom: 8px;
}
.footer-info-box .fib-title::after {
content: '';
display: block;
width: 30px;
height: 2px;
background: #c27840;
margin-top: 6px;
}
.footer-info-box .fib-row {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.6;
color: #3a2211;
padding: 6px 0;
}
.footer-info-box .fib-ico {
font-size: 18px;
flex-shrink: 0;
width: 24px;
display: inline-flex;
justify-content: center;
}
.footer-info-box .fib-badge {
display: inline-block;
background: #2390e0;
color: #fff;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
margin: 0 4px;
vertical-align: middle;
}
.footer-info-box .fib-link {
color: #c27840;
font-weight: 600;
text-decoration: underline;
}
/* ═════════════════════════════════════════════════════════════
v43 — Badge "Più venduto" / "Novità" sulle card prodotto
═════════════════════════════════════════════════════════════ */
.pcard {
position: relative;
}
.pcard-badge-corner {
position: absolute;
top: 12px;
left: 12px;
background: #c27840;
color: #fff;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
z-index: 2;
box-shadow: 0 2px 8px rgba(58,34,17,.2);
display: inline-flex;
align-items: center;
gap: 4px;
text-transform: uppercase;
}
.pcard-badge-corner.bestseller {
background: #c27840;
}
.pcard-badge-corner.novita {
background: #3a2211;
}
.pcard-badge-corner.sconto {
background: #d44a3c;
}
/* ═════════════════════════════════════════════════════════════
v44 — Countdown spedizione (scheda prodotto + checkout)
═════════════════════════════════════════════════════════════ */
.cd-spedizione, .cd-consegna {
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
margin: 6px 0;
}
.cd-spedizione.cd-attivo {
background: rgba(255,233,180,.7);
color: #6b3e0a;
border: 1px solid rgba(212,160,40,.3);
}
.cd-spedizione.cd-passato {
background: rgba(232,232,232,.5);
color: #5a4023;
border: 1px solid rgba(58,34,17,.1);
}
.cd-consegna {
background: #fdf6eb;
color: #3a2211;
border: 1px solid rgba(58,34,17,.1);
}
/* ═════════════════════════════════════════════════════════════
v44 — Checkout stepper (allegato 2)
═════════════════════════════════════════════════════════════ */
.fdb-stepper {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin: 20px auto 30px;
max-width: 700px;
padding: 0 20px;
}
.fdb-stepper .step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 0 0 auto;
}
.fdb-stepper .step-circle {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fdf6eb;
border: 2px solid #c27840;
color: #c27840;
transition: all .25s;
position: relative;
z-index: 2;
}
.fdb-stepper .step.done .step-circle {
background: #3a2211;
border-color: #3a2211;
color: #fdf6eb;
}
.fdb-stepper .step.active .step-circle {
background: #fdf6eb;
border-color: #c27840;
color: #c27840;
box-shadow: 0 0 0 6px rgba(194,120,64,.18);
}
.fdb-stepper .step-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-top: 10px;
color: #3a2211;
}
.fdb-stepper .step-line {
width: 60px;
height: 2px;
background: #c27840;
flex: 0 0 auto;
margin: 0 -1px;
align-self: flex-start;
margin-top: 26px;
opacity: .45;
}
.fdb-stepper .step-line.line-done {
opacity: 1;
}
@media (max-width: 640px) {
.fdb-stepper .step-circle { width: 42px; height: 42px; }
.fdb-stepper .step-line { width: 30px; margin-top: 21px; }
.fdb-stepper .step-label { font-size: 10px; }
}
/* ═════════════════════════════════════════════════════════════
v44 — Variante prodotto dropdown + extra checkbox
═════════════════════════════════════════════════════════════ */
.prod-variante {
margin: 16px 0 12px;
}
.prod-variante select {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(58,34,17,.2);
border-radius: 10px;
background: #fff;
font-size: 14px;
color: #3a2211;
cursor: pointer;
}
.prod-extra {
margin: 10px 0;
padding: 12px 14px;
background: #fff;
border: 1px solid rgba(58,34,17,.1);
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.prod-extra:hover {
border-color: #c27840;
}
.prod-extra input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #c27840;
flex-shrink: 0;
}
.prod-extra .extra-ico {
color: #c27840;
}
/* ═════════════════════════════════════════════════════════════
v45 — Trust bar link contatti + Floating bug button
═════════════════════════════════════════════════════════════ */
.fdb-trust-link {
color: #3a2211;
text-decoration: none;
transition: color .2s;
}
.fdb-trust-link:hover {
color: #c27840;
}
/* FAB: pulsante "Segnala problema" fisso in basso a sinistra */
@media (max-width: 640px) {
}
/* Hero CTA buttons - più spazio per evitare overlap con scroll-hint */
.hp-hero-cta {
margin-bottom: 80px !important; /* v62: più spazio sotto i bottoni per non sovrapporsi con scroll hint */
}
.hp-scroll-hint {
position: absolute !important;
bottom: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 11px !important;
letter-spacing: .25em !important;
text-transform: uppercase !important;
color: #c27840 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
font-weight: 600 !important;
z-index: 1;
}
.hp-scroll-hint::after {
content: '' !important;
width: 1px !important;
height: 30px !important;
background: linear-gradient(to bottom, #c27840, transparent) !important;
}
@media (max-width: 768px) {
.hp-scroll-hint {
display: none !important; /* nascondi su mobile per evitare overlap */
}
}
/* Link "vedi CGV art. 5" sempre visibile (color terra + underline) */
.footer-info-box .fib-link,
.footer-info-box a {
color: #c27840 !important;
font-weight: 600 !important;
text-decoration: underline !important;
opacity: 1 !important;
}
.footer-info-box .fib-link:hover {
color: #9a5a28 !important;
}
/* ═════════════════════════════════════════════════════════════
v46 — Footer light theme refinement
═════════════════════════════════════════════════════════════ */
#fdb-footer .footer-info-box {
background: #fdf6eb;
border: 1px solid rgba(58,34,17,.06);
}
#fdb-footer .footer-info-box .fib-title {
color: #3a2211;
}
#fdb-footer .footer-info-box .fib-row {
color: #3a2211;
}
#fdb-footer .footer-info-box .fib-row strong {
color: #3a2211;
}
#fdb-footer .footer-grid {
margin-top: 24px;
}
#fdb-footer .footer-col h4 {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
color: #3a2211;
margin-bottom: 14px;
}
#fdb-footer .footer-col li {
margin-bottom: 10px;
}
#fdb-footer .footer-col a {
color: #3a2211;
font-size: 14px;
font-weight: 400;
}
#fdb-footer .footer-col a:hover {
color: #c27840;
text-decoration: underline;
}
/* Brand info center (sotto le colonne) */
#fdb-footer .footer-brand-center {
color: #5a4023 !important;
}
#fdb-footer .footer-brand-center strong {
color: #3a2211 !important;
}
/* ═════════════════════════════════════════════════════════════
v47 — Responsive mobile + desktop ottimizzato
═════════════════════════════════════════════════════════════ */
/* DESKTOP — assicura layout pulito */
@media (min-width: 1025px) {
.fdb-page,
main.fdb-page,
.fdb-container {
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
#fdb-footer .footer-grid {
max-width: 1200px;
}
}
/* TABLET 768-1024 */
@media (min-width: 768px) and (max-width: 1024px) {
.fdb-page {
padding-left: 20px;
padding-right: 20px;
}
.fdb-logo-img { height: 44px !important; }
.fdb-logo span { font-size: 22px !important; }
}
/* MOBILE < 768px */
@media (max-width: 767px) {
body { font-size: 14px; }
.fdb-page {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Header mobile: logo piccolo */
.fdb-logo-img { height: 32px !important; }
.fdb-logo span { font-size: 17px !important; }
/* Trust bar font più piccolo */
.fdb-trust-bar { font-size: 11px !important; padding: 7px 0 !important; }
.fdb-trust-item { padding: 0 14px !important; gap: 6px !important; }
.fdb-trust-dot { font-size: 8px !important; }
/* Footer: stack vertical */
#fdb-footer .footer-grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
#fdb-footer { padding: 24px 14px 90px !important; }
/* Sezioni padding ridotto */
section.hp-trust,
section.hp-numbers,
section.hp-story,
section.hp-products,
section.hp-values,
section.hp-shipping,
section.hp-reviews,
section.hp-contact,
section.hp-cta { padding: 50px 16px !important; }
/* Hero ridotto su mobile */
.hp-hero { min-height: 70vh !important; padding-top: 40px; padding-bottom: 40px; }
.hp-hero h1 { font-size: 38px !important; }
.hp-hero p.lead { font-size: 15px !important; }
/* CTA bottoni full width su mobile */
.hp-hero-cta { flex-direction: column; align-items: stretch; gap: 10px !important; padding: 0 20px; }
.hp-hero-cta .hp-btn { width: 100%; justify-content: center; padding: 14px 24px !important; }
/* Scheda prodotto stack */
.prod-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
/* Card prodotto badge */
.pcard-badge { font-size: 9px; padding: 3px 7px; }
/* FAB mobile: ridimensionato */
#wa-float {
width: 50px !important;
height: 50px !important;
bottom: 84px !important;
right: 14px !important;
}
}
/* SMALL MOBILE < 480px */
@media (max-width: 479px) {
.fdb-logo-img { height: 28px !important; }
.fdb-logo span { font-size: 15px !important; }
.hp-hero h1 { font-size: 32px !important; }
/* Bottom nav text */
.fdb-bottom-nav .bn-lbl { font-size: 9px !important; }
}
/* Anti-overflow: previeni horizontal scroll inaspettato */
html, body {
max-width: 100vw;
overflow-x: clip;
}
img, video, iframe, table {
max-width: 100%;
height: auto;
}
/* ═════════════════════════════════════════════════════════════
v49 — FIX MOBILE COMPLETO (audit riga per riga)
═════════════════════════════════════════════════════════════ */
/* Universal box-sizing per evitare overflow */
*, *::before, *::after {
box-sizing: border-box;
}
/* ANTI-OVERFLOW globale */
html, body {
max-width: 100%;
overflow-x: clip;
}
/* TABLET 768-1023px */
@media (max-width: 1023px) {
.fdb-grid-sidebar {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.fdb-grid-sidebar .sidebar-filters,
.fdb-grid-sidebar aside {
width: 100%;
max-width: 100%;
}
}
/* MOBILE < 768px — FIX COMPLETO */
@media (max-width: 767px) {
/* Body font scale */
body { font-size: 14px !important; }
/* Page padding ridotto */
.fdb-page, main.fdb-page {
padding: 12px !important;
max-width: 100% !important;
}
/* HEADER mobile */
#fdb-header {
padding: 10px 12px !important;
flex-wrap: wrap;
}
.fdb-logo {
gap: 6px !important;
}
.fdb-logo-img {
height: 30px !important;
}
.fdb-logo span {
font-size: 15px !important;
}
.fdb-header-actions {
gap: 4px !important;
}
.fdb-ha-btn {
width: 34px !important;
height: 34px !important;
}
/* HERO mobile */
.hp-hero {
min-height: 60vh !important;
padding: 30px 12px !important;
}
.hp-hero h1 {
font-size: 32px !important;
line-height: 1.1 !important;
}
.hp-hero p.lead {
font-size: 14px !important;
padding: 0 8px;
}
.hp-hero-cta {
flex-direction: column !important;
width: 100%;
align-items: stretch !important;
gap: 8px !important;
padding: 0 16px !important;
}
.hp-hero-cta .hp-btn {
width: 100% !important;
padding: 13px !important;
font-size: 14px !important;
justify-content: center !important;
}
/* CARRELLO mobile */
.cart-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.cart-item {
grid-template-columns: 60px 1fr !important;
gap: 10px !important;
padding: 10px 0 !important;
}
.cart-item > *:nth-child(3),
.cart-item-actions {
grid-column: 1 / -1;
padding-top: 8px;
border-top: 1px solid rgba(58,34,17,.06);
margin-top: 4px;
}
.cart-item img {
width: 60px !important;
height: 60px !important;
}
/* CHECKOUT mobile */
.co-layout, .co-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.co-grid > aside {
order: -1; /* riepilogo sopra il form */
position: relative !important;
}
.co-grid > aside > div {
position: relative !important;
}
/* Form 2 colonne checkout → 1 colonna mobile */
#co-form > div[style*="grid-template-columns:1fr 1fr"],
#co-form > div[style*="grid-template-columns:2fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* PRODOTTO mobile */
.prod-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.buy-box {
padding: 16px !important;
}
.buy-box h1 {
font-size: 26px !important;
}
.buy-box .prod-price,
#prod-price {
font-size: 26px !important;
}
/* Tabs mobile: scrollabili orizzontalmente */
.tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
white-space: nowrap;
font-size: 12px !important;
padding: 8px 12px !important;
}
/* Xsell grid mobile: 2 colonne */
.xsell-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* CONTATTI grid mobile (sezione "Hai una domanda?") */
.hp-contact-grid {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
.hp-contact h2 {
font-size: 28px !important;
}
.hp-contact-item {
font-size: 14px !important;
}
.hp-contact-ico {
width: 36px !important;
height: 36px !important;
}
/* FOOTER mobile */
#fdb-footer {
padding: 24px 14px 90px !important;
}
#fdb-footer .footer-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#fdb-footer .footer-info-box {
padding: 16px !important;
}
#fdb-footer .footer-info-box .fib-row {
font-size: 13px !important;
gap: 8px;
}
/* SEZIONI HOME mobile */
section.hp-trust,
section.hp-numbers,
section.hp-story,
section.hp-products,
section.hp-values,
section.hp-shipping,
section.hp-reviews,
section.hp-contact,
section.hp-cta {
padding: 40px 14px !important;
}
.hp-cta h2 { font-size: 28px !important; }
.hp-cta p { font-size: 15px !important; }
/* FAB e WA mobile */
#wa-float {
width: 48px !important;
height: 48px !important;
bottom: 80px !important;
right: 12px !important;
}
/* CARDS prodotto mobile */
.pcard {
border-radius: 12px !important;
}
.pcard-img img {
aspect-ratio: 1;
object-fit: cover;
}
.pcard-body {
padding: 10px !important;
}
.pcard-name {
font-size: 13px !important;
}
.pcard-price {
font-size: 15px !important;
}
.pcard-actions {
flex-direction: column;
gap: 6px;
}
.pcard-actions button {
width: 100%;
font-size: 12px !important;
padding: 8px !important;
}
/* MODAL mobile: full screen */
.fdb-modal, .legal-modal {
margin: 0 !important;
border-radius: 0 !important;
max-width: 100% !important;
max-height: 100vh !important;
height: 100vh !important;
}
}
/* SMALL MOBILE < 480px */
@media (max-width: 479px) {
.hp-hero h1 { font-size: 28px !important; }
.hp-cta h2 { font-size: 24px !important; }
.fdb-trust-bar { font-size: 10px !important; }
.fdb-trust-item { padding: 0 10px !important; }
.pcard-name { font-size: 12px !important; }
.nav-chip { font-size: 11px !important; padding: 6px 10px !important; }
}
/* ═════════════════════════════════════════════════════════════
v49 — INFO UTILI box più scuro (come richiesto)
═════════════════════════════════════════════════════════════ */
#fdb-footer .footer-info-box {
background: #f0dcc0 !important; /* leggermente più scuro del footer */
border: 1px solid rgba(58,34,17,.1) !important;
}
/* ═════════════════════════════════════════════════════════════
v50 — FIX MOBILE definitivo: nascondi span se logo image c'è
═════════════════════════════════════════════════════════════ */
/* Header layout corretto */
#fdb-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
/* Su mobile: SOLO logo immagine (il testo è già dentro), nascondi span */
@media (max-width: 767px) {
/* Nascondo lo span testuale: il logo image lo contiene già */
.fdb-logo span {
display: none !important;
}
.fdb-logo {
flex-shrink: 1;
min-width: 0;
}
.fdb-logo-img {
height: 36px !important;
max-width: 200px;
width: auto !important;
display: inline-block !important;
}
/* Icone header: dimensione + gap fissi, NO sovrapposizione */
.fdb-header-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.fdb-header-actions .fdb-ha-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
overflow: visible;
}
.fdb-header-actions .fdb-ha-btn svg {
width: 20px !important;
height: 20px !important;
}
/* Badge carrello "10" ben posizionato in alto-destra del bottone */
.fdb-header-actions .fdb-cart-count {
position: absolute !important;
top: -4px !important;
right: -4px !important;
background: #c27840 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
min-width: 18px !important;
height: 18px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 4px !important;
border: 2px solid #fdf6eb;
z-index: 2;
}
/* Hide label "Home/Account/Carrello" sui bottoni header (already small) */
.fdb-header-actions .fdb-ha-btn .label {
display: none !important;
}
}
@media (max-width: 479px) {
.fdb-logo-img {
height: 30px !important;
max-width: 160px !important;
}
.fdb-header-actions {
gap: 6px !important;
}
.fdb-header-actions .fdb-ha-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
}
.fdb-header-actions .fdb-ha-btn svg {
width: 18px !important;
height: 18px !important;
}
}
/* ═════════════════════════════════════════════════════════════
v50 — FAB menu a comparsa (WhatsApp + Bug)
═════════════════════════════════════════════════════════════ */
#fdb-fab-menu {
position: fixed;
bottom: 22px;
right: 20px;
z-index: 900;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 12px;
}
@media (max-width: 767px) {
#fdb-fab-menu {
bottom: 80px; /* sopra bottom-nav mobile */
right: 14px;
}
}
#fdb-fab-trigger {
width: 52px;
height: 52px;
border-radius: 50%;
background: #3a2211;
color: #fff;
border: 0;
cursor: pointer;
box-shadow: 0 6px 20px rgba(58,34,17,.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform .25s, background .25s;
outline: none;
}
#fdb-fab-trigger:hover {
background: #c27840;
}
#fdb-fab-trigger.open {
background: #c27840;
transform: rotate(45deg);
}
#fdb-fab-trigger.open #fdb-fab-ico-open {
display: none !important;
}
#fdb-fab-trigger.open #fdb-fab-ico-close {
display: block !important;
transform: rotate(-45deg); /* compensa rotazione button */
}
.fdb-fab-items {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
pointer-events: none;
opacity: 0;
transform: translateY(20px) scale(0.8);
transition: opacity .25s, transform .25s;
}
.fdb-fab-items.open {
pointer-events: auto;
opacity: 1;
transform: translateY(0) scale(1);
}
.fdb-fab-item {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 0;
transition: transform .2s;
box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.fdb-fab-item:hover {
transform: scale(1.1);
}
.fdb-fab-wa {
background: #25D366;
}
.fdb-fab-bug {
background: #c27840;
}
/* ═════════════════════════════════════════════════════════════
v53 — Footer Contatti separati con stile distintivo
═════════════════════════════════════════════════════════════ */
#fdb-footer .footer-col {
background: #f5e6d3;
padding: 18px 20px;
border-radius: 12px;
border: 1px solid rgba(58,34,17,.08);
}
#fdb-footer .footer-col h4 {
color: #3a2211 !important;
}
#fdb-footer .footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
#fdb-footer .footer-col li {
margin-bottom: 10px;
}
.footer-contact-link {
color: #3a2211 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: color .15s;
word-break: break-word;
}
.footer-contact-link:hover {
color: #c27840 !important;
text-decoration: underline !important;
}
.footer-contact-link svg {
flex-shrink: 0;
}
/* ═════════════════════════════════════════════════════════════
v61 — FAB & bottom-nav contesto-aware
═════════════════════════════════════════════════════════════ */
/* #2 — FAB menu + sticky-cart bar nascosti nelle pagine acquisto */
body.page-cart #fdb-fab-menu,
body.page-checkout #fdb-fab-menu,
body.page-pagamento #fdb-fab-menu,
body.page-cart #fdb-sticky-cart,
body.page-checkout #fdb-sticky-cart,
body.page-pagamento #fdb-sticky-cart,
body.page-cart .fdb-bottom-nav,
body.page-checkout .fdb-bottom-nav,
body.page-pagamento .fdb-bottom-nav {
display: none !important;
}
/* #3 — FAB su mobile: nascosto (disturba). Solo desktop. */
@media (max-width: 767px) {
#fdb-fab-menu {
display: none !important;
}
}
/* #5 — Bottom nav solo mobile, mai su desktop */
@media (min-width: 768px) {
#fdb-bottom-nav,
.fdb-bottom-nav {
display: none !important;
}
}
/* v67 — Chi siamo: foto laterale responsive */
@media (max-width: 720px) {
#origini-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#origini-grid > div:last-child {
position: relative !important;
top: 0 !important;
order: -1; /* foto in cima su mobile */
}
}
/* v70 — TABS scheda prodotto (fix bug "descrizione infinita") */
.tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid rgba(58,34,17,.08);
margin-bottom: 18px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
background: transparent;
border: 0;
padding: 12px 18px;
font-size: 13px;
color: #7a5535;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all .15s;
}
.tab-btn:hover { color: #3a2211; }
.tab-btn.active {
color: #c27840;
border-bottom-color: #c27840;
}
.tab-panel {
display: none;
padding: 18px 0;
animation: tabFade .25s ease;
}
.tab-panel.active {
display: block;
}
@keyframes tabFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* v73 — Performance: hero gradient solido + niente skeleton invasivo */
.hp-hero {
background: linear-gradient(135deg, #c27840 0%, #9a5a28 50%, #5a4023 100%) !important;
}
.hp-hero-bg {
transition: opacity .4s ease;
}
.pcard img, .prod-main-img, .xsell-grid img {
background: #fdf6eb;
}
/* v79 — Asterisco obbligatori uniformato (rosso, in linea con campo) */
.required, .req-star {
color: #c62828;
font-weight: 600;
margin-left: 2px;
font-size: inherit;
}
label .required { vertical-align: baseline; }
/* v81 — Card uniforme: separatori tra sezioni + bottone allineato al fondo */
.pcard {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.pcard > a {
flex-shrink: 0; /* immagine + titolo + prezzo: dimensione naturale */
}
/* Sezione formato (varianti) */
.pcard-var-section {
padding: 10px 14px;
border-top: 1px solid rgba(58,34,17,.06);
}
/* Sezione affettatura (separatore prima) */
.pcard-aff-section {
padding: 10px 14px;
border-top: 1px solid rgba(58,34,17,.06);
}
/* Sezione bottoni: si attacca SEMPRE in fondo (margin-top:auto la spinge giù) */
.pcard-actions {
padding: 12px 14px 14px;
margin-top: auto;
border-top: 1px solid rgba(58,34,17,.06);
display: flex;
gap: 6px;
}
.pcard-actions button {
flex: 1;
}
/* v81 — Reviews slider */
.hp-reviews-grid::-webkit-scrollbar { display: none; }
.hp-rev-arrow:hover { background: #f5e6d3 !important; }
@media (max-width: 768px) {
.hp-rev-arrow { display: none !important; }
/* Su mobile lascio scroll touch nativo */
}
@media (max-width: 640px) {
.hp-reviews-grid > .hp-review {
flex: 0 0 calc(100% - 14px) !important;
min-width: 240px !important;
}
}
/* ═════════════════════════════════════════════════════════════
v85 — Header sticky (top:0) — announcement-bar rimosso
═════════════════════════════════════════════════════════════ */
.fdb-announcement-bar { display: none !important; }