/* =========================================================================
   Navigazione principale + menu catalogo
   ========================================================================= */
.sar-nav { display:flex; align-items:center; gap:0.125rem; flex-shrink:0; }
.sar-nav__item {
  display:inline-flex; align-items:center; gap:0.375rem; height:2.5rem; padding:0 0.8125rem;
  border:0; background:transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:0.90625rem; color:var(--ink);
  border-radius:0.5625rem; transition:background .18s ease, color .18s ease;
}
.sar-nav__item:hover { background:var(--surface-2); }
.sar-nav__item:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus); }
.sar-nav__trigger[aria-expanded="true"] { background:var(--surface-2); }
.sar-nav__chevron { width:0.9375rem; height:0.9375rem; color:var(--muted); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sar-nav__trigger[aria-expanded="true"] .sar-nav__chevron { transform:rotate(180deg); }

/* The panel animates grid-template-rows from 0fr to 1fr: the only way to
   animate towards the content's natural height. It opens in 300ms and closes
   in 650ms — the asymmetry is deliberate. */
.sar-catalog-menu {
  position:absolute; left:0; right:0; top:100%; z-index:70;
  display:grid; grid-template-rows:0fr; visibility:hidden; pointer-events:none;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 18px 44px rgba(16,18,27,.10);
  transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1), visibility 0s linear .65s;
}
:root[data-theme="dark"] .sar-catalog-menu { box-shadow:0 18px 44px rgba(0,0,0,.55); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sar-catalog-menu { box-shadow:0 18px 44px rgba(0,0,0,.55); }
}
.sar-catalog-menu.is-open {
  grid-template-rows:1fr; visibility:visible; pointer-events:auto;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.sar-catalog-menu__sheet { overflow:hidden; min-height:0; }
.sar-catalog-menu__inner { display:grid; grid-template-columns:18.75rem minmax(0,1fr); gap:2.375rem; padding-block:1.625rem 1.875rem; }
.sar-catalog-menu__label {
  font-family:var(--font-label); font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 0.75rem;
}

.sar-catalog-menu__categories ul { list-style:none; margin:0; padding:0; }
.sar-catalog-menu__categories li { margin:0; }
.sar-catalog-menu__category {
  display:flex; align-items:center; gap:0.75rem; padding:0.5625rem 0.75rem; border-radius:0.5625rem;
  text-decoration:none; color:var(--ink); font-size:0.90625rem; line-height:1.3;
  transition:background .16s ease;
}
.sar-catalog-menu__category:hover,
.sar-catalog-menu__category.is-current { background:var(--surface-2); }
.sar-catalog-menu__category.is-current .sar-catalog-menu__category-name { font-family:var(--font-display); font-weight:600; }
.sar-catalog-menu__category-count {
  margin-left:auto; font-family:var(--font-label); font-size:0.75rem; color:var(--muted);
  flex-shrink:0; font-variant-numeric:tabular-nums;
}

.sar-catalog-menu__all,
.sar-catalog-menu__more {
  display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:0.84375rem; color:var(--red);
}
.sar-catalog-menu__all { margin:0.875rem 0 0; padding:0 0.75rem; }
.sar-catalog-menu__more { margin:1rem 0 0; }
.sar-catalog-menu__all svg,
.sar-catalog-menu__more svg { width:0.9375rem; height:0.9375rem; transition:transform .2s ease; }
.sar-catalog-menu__all:hover svg,
.sar-catalog-menu__more:hover svg { transform:translateX(0.1875rem); }
:root[data-theme="dark"] .sar-catalog-menu__all,
:root[data-theme="dark"] .sar-catalog-menu__more { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sar-catalog-menu__all,
  :root:not([data-theme="light"]) .sar-catalog-menu__more { color:var(--red-on-dark); }
}

.sar-catalog-menu__pane { display:none; }
.sar-catalog-menu__pane.is-current { display:block; animation:sar-catalog-pane-in .24s cubic-bezier(.4,0,.2,1); }
@keyframes sar-catalog-pane-in { from { opacity:0; transform:translateY(0.3125rem); } to { opacity:1; transform:none; } }

.sar-catalog-menu__products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.625rem 1.25rem; }
.sar-catalog-menu__empty { color:var(--muted); font-size:0.875rem; margin:0; }
.sar-catalog-menu__product {
  display:grid; grid-template-columns:4rem minmax(0,1fr); gap:0.875rem; align-items:center;
  padding:0.5rem; border-radius:0.75rem; text-decoration:none; transition:background .16s ease;
}
.sar-catalog-menu__product:hover { background:var(--surface-2); }
.sar-catalog-menu__product-media img {
  width:4rem; height:4rem; object-fit:contain; display:block; margin:0; padding:0.25rem;
  background:var(--surface); border:1px solid var(--line); border-radius:0.625rem;
}
.sar-catalog-menu__product-body { min-width:0; }
.sar-catalog-menu__product-name {
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--font-display); font-weight:600; font-size:0.875rem; line-height:1.3; color:var(--ink);
}
.sar-catalog-menu__product-price {
  display:block; margin-top:0.1875rem; font-family:var(--font-display); font-weight:700; font-size:0.875rem; color:var(--ink);
}
.sar-catalog-menu__product-price .amount { color:inherit; }

.sar-nav__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sar-nav__burger,
.sar-catalog-menu__level1,
.sar-catalog-menu__backbar,
.sar-catalog-menu__actions { display:none; }
.sar-catalog-menu__level2 { display:contents; }

@media (max-width:900px){
  .sar-nav { order:5; gap:0; }
  .sar-nav__item { display:none; }

  .sar-nav__burger {
    display:inline-flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; padding:0; border:0; background:transparent;
    color:var(--ink); cursor:pointer; border-radius:0.625rem;
  }
  .sar-nav__burger { transition:background .2s; }
  .sar-nav__burger:hover { background:var(--surface-2); }
  .sar-nav__burger:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus); }
  .sar-nav__burger-box { position:relative; display:block; width:1.125rem; height:0.6875rem; }
  .sar-nav__burger-box span {
    position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
    transition:top .34s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1);
  }
  .sar-nav__burger-box span:nth-child(1) { top:0; }
  .sar-nav__burger-box span:nth-child(2) { top:calc(100% - 2px); }
  .sar-nav__burger[aria-expanded="true"] .sar-nav__burger-box span:nth-child(1) { top:calc(50% - 1px); transform:rotate(45deg); }
  .sar-nav__burger[aria-expanded="true"] .sar-nav__burger-box span:nth-child(2) { top:calc(50% - 1px); transform:rotate(-45deg); }

  .sar-catalog-menu {
    position:fixed; inset:var(--header-h) 0 0; z-index:65;
    display:flex; flex-direction:column; grid-template-rows:none;
    background:var(--surface); border-bottom:0; box-shadow:none;
    clip-path:inset(0 0 100%);
    transition:clip-path .5s cubic-bezier(.4,0,.2,1), visibility 0s linear .5s;
  }
  .sar-catalog-menu.is-open {
    clip-path:inset(0);
    transition:clip-path .5s cubic-bezier(.4,0,.2,1), visibility 0s;
  }

  .sar-catalog-menu__level1 {
    display:flex; flex-direction:column; flex:1 1 auto;
    overflow-y:auto; overflow-x:hidden; padding:0 var(--gutter);
  }
  .sar-catalog-menu__search {
    display:flex; align-items:center; gap:0.625rem; flex-shrink:0; margin:0 calc(var(--gutter) * -1);
    padding:0.75rem var(--gutter); border-bottom:1px solid var(--line);
  }
  .sar-catalog-menu__search svg { width:1.125rem; height:1.125rem; color:var(--muted); flex-shrink:0; }
  .sar-catalog-menu__search input {
    flex:1 1 auto; min-width:0; height:2.5rem; margin:0; padding:0; border:0; background:transparent;
    font-family:var(--font-body); font-size:1rem; color:var(--ink); outline:none;
  }

  .sar-catalog-menu__entry {
    display:flex; align-items:center; justify-content:space-between; gap:0.75rem; width:100%;
    margin:0; padding:1.125rem 0; border:0; border-bottom:1px solid var(--line);
    background:transparent; cursor:pointer; text-align:left; text-decoration:none; color:var(--ink);
    font-family:var(--font-display); font-weight:600; font-size:1.375rem; letter-spacing:-.015em;
  }
  .sar-catalog-menu__entry:first-of-type { margin-top:0.5rem; }
  .sar-catalog-menu__entry svg { width:1.25rem; height:1.25rem; color:var(--muted); flex-shrink:0; }

  .sar-catalog-menu__actions {
    display:flex; align-items:center; gap:0.75rem; flex-shrink:0;
    padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line); background:var(--surface);
  }
  .sar-catalog-menu__signin {
    flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
    height:3rem; padding:0 1.25rem; border:1.5px solid var(--line-strong); border-radius:0.75rem;
    text-decoration:none; color:var(--ink);
    font-family:var(--font-display); font-weight:600; font-size:1rem;
  }
  .sar-catalog-menu__theme { display:flex; flex-shrink:0; }
  .sar-catalog-menu__theme .theme-toggle { width:3rem; height:3rem; border:1.5px solid var(--line-strong); border-radius:0.75rem; }

  .sar-catalog-menu__level2 {
    display:flex; flex-direction:column; position:absolute; inset:0; z-index:2;
    background:var(--surface);
    transform:translateX(100%); visibility:hidden;
    transition:transform .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s;
  }
  .sar-catalog-menu.is-level-2 .sar-catalog-menu__level2 {
    transform:none; visibility:visible;
    transition:transform .4s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .sar-catalog-menu__backbar {
    display:flex; align-items:center; flex-shrink:0;
    padding:0 var(--gutter); border-bottom:1px solid var(--line);
  }
  .sar-catalog-menu__back {
    display:inline-flex; align-items:center; gap:0.375rem; padding:0.875rem 0;
    border:0; background:transparent; cursor:pointer; color:var(--ink);
    font-family:var(--font-display); font-weight:600; font-size:0.9375rem;
  }
  .sar-catalog-menu__back svg { width:1.125rem; height:1.125rem; color:var(--muted); }

  .sar-catalog-menu__sheet { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; }
  .sar-catalog-menu__inner { display:flex; flex-direction:column; padding:1.125rem var(--gutter) 2rem; }
  .sar-catalog-menu__panes { order:1; }
  .sar-catalog-menu__categories { order:2; padding:0; }
  .sar-catalog-menu__categories > ul,
  .sar-catalog-menu__categories > .sar-catalog-menu__label { display:none; }
  .sar-catalog-menu__all { margin:1.5rem 0 0; padding:0; font-size:0.9375rem; }

  .sar-catalog-menu__pane { display:block; animation:none; }
  .sar-catalog-menu__pane + .sar-catalog-menu__pane { margin-top:1.625rem; }
  .sar-catalog-menu__pane .sar-catalog-menu__label { margin-bottom:0.25rem; }
  .sar-catalog-menu__products { grid-template-columns:1fr; gap:0; }
  .sar-catalog-menu__product { padding:0.75rem 0; border-radius:0; }
  .sar-catalog-menu__product + .sar-catalog-menu__product { border-top:1px solid var(--line); }
  .sar-catalog-menu__product:hover { background:transparent; }
  .sar-catalog-menu__more { margin-top:0.75rem; font-size:0.875rem; }

  .sar-catalog-menu.is-open .sar-catalog-menu__search,
  .sar-catalog-menu.is-open .sar-catalog-menu__entry,
  .sar-catalog-menu.is-open .sar-catalog-menu__actions {
    animation:sar-nav-rise .5s cubic-bezier(0,0,.2,1) backwards;
  }
  .sar-catalog-menu.is-open .sar-catalog-menu__entry:nth-of-type(1) { animation-delay:.05s; }
  .sar-catalog-menu.is-open .sar-catalog-menu__entry:nth-of-type(2) { animation-delay:.1s; }
  .sar-catalog-menu.is-open .sar-catalog-menu__entry:nth-of-type(n+3) { animation-delay:.15s; }
  .sar-catalog-menu.is-open .sar-catalog-menu__actions { animation-delay:.2s; }
}

@keyframes sar-nav-rise { from { opacity:0; transform:translateY(1.25rem); } to { opacity:1; transform:none; } }

html.sar-menu-open, html.sar-menu-open body { overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .sar-catalog-menu,
  .sar-catalog-menu.is-open { transition:none; }
  .sar-catalog-menu__pane.is-current { animation:none; }
  .sar-catalog-menu.is-open .sar-catalog-menu__search,
  .sar-catalog-menu.is-open .sar-catalog-menu__entry,
  .sar-catalog-menu.is-open .sar-catalog-menu__actions { animation:none; }
  .sar-catalog-menu__level2 { transition:none; }
  .sar-nav__burger-box span { transition:none; }
}