:root{
  --brand-brown: #C79A6E;
  --brand-dark: #8B5A2B;
  --accent-cream: #FFF6ED;
  --bg: #fffaf6;
  --text: #3b2b2b;
  --muted: #6b5b50;
  --card-shadow: 0 10px 30px rgba(34,28,22,0.08);
  --radius: 12px;
  --max-width: 1100px;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Basic reset & layout */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.45;font-size:16px}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}

/* Prevent scroll when modal open */
body.modal-open { overflow: hidden; touch-action: none; }

/* Header */
.site-header{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));border-bottom:4px solid rgba(0,0,0,0.05)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{text-decoration:none;color:var(--text);font-family:'Montserrat',sans-serif;font-weight:700;line-height:1}
.brand-name{color:var(--brand-brown);font-weight:700;font-size:18px}
.main-nav{display:flex;gap:16px}
.main-nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:color .18s ease, background .18s ease}
.main-nav a:hover{background:rgba(0,0,0,0.03);color:var(--brand-dark)}
.nav-toggle{display:none;background:var(--brand-brown);color:white;border:none;padding:8px 12px;border-radius:8px;font-size:18px;transition:transform .12s ease}
.nav-toggle:active{transform:translateY(1px)}

/* HERO */
.hero{display:grid;grid-template-columns:1fr;gap:18px;padding:18px 0}
.hero h1{font-family:'Montserrat';font-size:32px;margin:0}
.lead{color:var(--muted);margin-top:6px}

/* HERO PHOTOS - desktop: side-by-side; mobile: stacked */
.hero-photos{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;align-items:center}
.hero-photo{width:480px;max-width:60%;height:auto;object-fit:contain;display:block;border-radius:10px;border:2px solid rgba(0,0,0,0.03)}

/* Buttons */
.btn{
  background:var(--brand-brown);
  color:white;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,0.12); }
.btn:active{ transform:translateY(-1px); opacity:.95; }

/* Cards / products basic styles */
.card { background:white;border-radius:12px;box-shadow:var(--card-shadow); }
.mini-card{
  display:flex;gap:10px;align-items:center;background:white;padding:10px;border-radius:12px;
  box-shadow:var(--card-shadow);transition:transform .16s ease, box-shadow .16s ease;cursor:pointer;overflow:hidden;
}
/* make mini-card hover identical to product-card hover */
.mini-card:hover,
.mini-card:focus {
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(34,28,22,0.12);
}
/* mini-card image unchanged to keep original small thumbnails */
.mini-card img{width:96px;height:auto;object-fit:contain;border-radius:6px;flex:0 0 auto}
.price{font-weight:700;color:var(--brand-brown)}

/* --- TITLE: "I migliori prodotti" --- */
/* increased size and black color (affects both desktop and mobile) */
.best-title,
.opening-right .best-title {
  font-size:24px;
  font-weight:800;
  color:#000000;
  margin:0 0 8px 0;
}

/* Products grid */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.product-card{background:white;border-radius:12px;padding:12px;box-shadow:var(--card-shadow);cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:220px;transition:transform .16s ease, box-shadow .16s ease;position:relative;overflow:hidden}
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(34,28,22,0.12)}

/* --- IMAGE STYLING: increase visible width while preserving proportions --- */
.product-img-wrap{
  width:100%;
  height:240px;            /* INCREASED for wider appearance */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
  border-bottom:2px solid rgba(0,0,0,0.06); /* thinner border */
}
/* Ensure image fills width more, without distortion */
.product-img-wrap img,
.product-card .product-img {
  max-width:90%;
  max-height:100%;
  height:auto;
  width:auto;
  display:block;
  object-fit:contain;
}

/* Ensure any other images inside cards do not overflow */
.product-card img { max-width:100%; height:auto; display:block; }

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:999}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:white;width:100%;max-width:1050px;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.6);position:relative;transform:translateY(6px); transition:transform .18s ease, opacity .18s ease;}
.modal[aria-hidden="false"] .modal-content{ transform:translateY(0); }
/* DESKTOP: no top padding so X can align with product name; MOBILE: set padding-top below via media query */
.modal-content{ max-height: calc(100vh - 40px); padding-top:0; }
/* modal-body padding kept (inner) */
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px;align-items:start; overflow:auto;}
.modal-img{width:100%;height:auto;object-fit:contain;border-radius:8px;display:block;max-height:700px}
.modal-details{padding:6px}
/* Close button positioned relative to modal-content so it's always in top-right of white box */
/* default top for mobile-friendly small offset */
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:20px;padding:8px;cursor:pointer;z-index:20}

/* Ensure focus ring around the close button is not shown automatically when modal opens.
   This rule only removes the visible outline/box-shadow for the close when the modal is open.
   It preserves normal focus outlines elsewhere. */
.modal[aria-hidden="false"] .modal-close:focus {
  outline: none;
  box-shadow: none;
}

/* ORARI + MIGLIORI PRODOTTI layout */
.opening-row { display:grid; grid-template-columns: 340px 1fr; gap:18px; align-items:start; width:100%; }
.opening-left .opening-card-inner { background: linear-gradient(180deg,var(--accent-cream), #fff); border-radius:14px; padding:18px; box-shadow: var(--card-shadow); }
.opening-right { display:flex; flex-direction:column; gap:12px; }
.best-products-column { display:flex; flex-direction:column; gap:12px; }
.best-products-column .mini-card { width:100%; box-sizing:border-box; }

/* days list */
.days-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.day-row { display:flex; justify-content:space-between; align-items:center; background:white; padding:12px 14px; border-radius:12px; box-shadow:0 10px 30px rgba(34,28,22,0.06); }
.day-row[aria-current="date"] { background: linear-gradient(180deg,var(--accent-cream), #fff); border:1px solid rgba(139,90,43,0.06); box-shadow:0 16px 36px rgba(34,28,22,0.08); }
.day-label { font-size:14px; color:var(--text); }
.day-times { font-size:13px; color:var(--muted); text-align:right; font-weight:600; }
.status-badge { color:white; display:inline-block; padding:8px 10px; border-radius:9px; font-weight:700; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,0.08); }

/* CONTACTS defaults: each direct child gets card look (desktop row, mobile stacked) */
.contacts { display:flex; flex-direction:row; gap:18px; align-items:stretch; justify-content:space-between; }
.contacts > * { background:white; border-radius:12px; padding:14px; box-shadow:var(--card-shadow); color:var(--text); flex:1 1 0; min-width:200px; box-sizing:border-box; }

/* CTA placement: desktop -> show outside CTA under orari; mobile -> show bottom CTA */
.desktop-cta-outside { display:none; margin:20px 0 12px; text-align:left; }
.cta { display:block; text-align:center; margin:28px 0; }
.mobile-cta { display:inline-block; }

/* ----------------- RESPONSIVE RULES ----------------- */
@media (max-width:800px){
  /* Header: brand moved in a bit and toggle visible on right */
  .header-inner { padding-left:14px; padding-right:14px; }
  .brand { margin-left:6px; }
  .nav-toggle { display:block; margin-right:6px; }

  /* Hide desktop nav; mobile nav becomes dropdown */
  .main-nav { display:none; position:absolute; right:12px; top:64px; background:white; padding:12px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.08); z-index:60; }
  .main-nav.show { display:flex; flex-direction:column; gap:8px; animation: navShow .12s both; }
  .main-nav a { padding:10px; }

  /* Hero photos stacked vertically (one under another) */
  .hero-photos { flex-direction:column; align-items:stretch; }
  .hero-photo { width:100%; max-width:100%; }

  /* Products grid collapses to single column on mobile */
  .products-grid { grid-template-columns: 1fr; }

  /* Opening row stacks: orari sopra, migliori prodotti sotto */
  .opening-row { grid-template-columns: 1fr; gap:12px; }
  .opening-right { order:2; }
  .opening-left { order:1; }

  /* contacts stacked vertically */
  .contacts { flex-direction:column; }
  .contacts > * { min-width:0; }

  /* Mobile CTA visible, desktop CTA hidden */
  .desktop-cta-outside { display:none !important; }
  .cta { display:block; }
  .mobile-cta { display:inline-block; }

  /* reduce thumbnail height on very small screens */
  .product-img-wrap { height:160px; }

  /* Modal: STACK image above text on mobile and KEEP padding so close does not overlap image */
  .modal-body { grid-template-columns: 1fr; }
  .modal-img { margin-bottom:12px; }
  .modal-content { padding-top:44px; }
  /* ensure modal-close sits slightly lower on mobile (keeps distance from image) */
  .modal-close{ top:12px; }
}

/* Desktop and larger: show desktop CTA outside, hide mobile one */
@media (min-width:801px){
  .nav-toggle { display:none; }
  .main-nav { display:flex; position:static; }
  .desktop-cta-outside { display:block; }
  .cta { display:none; } /* hide bottom CTA on desktop (moved under orari) */
  .mobile-cta { display:none; }

  /* DESKTOP: align close button with product name (same vertical position) */
  /* product name in modal-details starts around modal-body padding (18px) + small offsets,
     so put close at approx 18px from top of modal-content */
  .modal-close { top:18px; }
  /* Remove the extra top padding on desktop (close aligns with title now) */
  .modal-content { padding-top: 0; }
}

/* small-view safety */
@media (max-width:360px){
  .product-img-wrap { height:120px; }
  .modal-content{ padding-top:40px; }
}

/* Accessibility focus states (kept global) */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(199,154,110,0.2);outline-offset:3px}