/* ═══════════════════════════════════════
   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;
  --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:hidden;font-family:var(--font-body);background:var(--cream);color:var(--br);font-size:14px;line-height:1.5;padding-top:calc(var(--header-h) + var(--nav-h))}
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 ── */
#fdb-header{
  position:fixed;top:0;left:0;right:0;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 ── */
#fdb-nav{
  position:fixed;top:var(--header-h);left:0;right:0;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:var(--br);color:var(--cream);margin-top:40px;padding:32px 16px 80px}
.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:15px;font-weight:700;color:var(--bg);margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:6px}
.footer-col a{color:rgba(238,192,123,.6);font-size:13px;transition:color .15s}
.footer-col a:hover{color:var(--bg)}
.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(200px,1fr));gap:16px}
@media(max-width:640px){.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:380px){.products-grid{grid-template-columns:1fr}}

/* ── 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}
@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}
}