/*
Theme Name: Nella Vetrina - FSE
Theme URI: https://www.nellavetrina.com/
Author: Nella Vetrina
Author URI: https://www.nellavetrina.com/
Description: Full-site-editing theme powering the Nella Vetrina storefront experience.
Version: 0.8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nv-theme
Tags: full-site-editing, e-commerce, accessibility-ready
*/
@layer reset, base, vendors, layout, components, nv-plugins, pages, utilities, overrides;

@layer components {
  /* never minify */
  .collection-layout {
    grid-template-areas:
      "top-left top"
      "sidebar grid";
  }
  @media (max-width: 1024px) {
    .collection-layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        "top"
        "grid";
    }
  }
}

@layer base {
  :root {
    --nv-sans: "NeutraText", "NeutraText Metric", system-ui, -apple-system,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nv-sans-alt: "NeutraTextAlt", "NeutraTextAlt Metric", system-ui,
      -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wp--custom--mega-menu--collapsed-height: calc(60vh - 80px);
    --wp--custom--mega-menu--collapsed-min-height: calc(50vh - 80px);
    --wp--custom--mega-menu--expanded-height: 100vh;
  }
}
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.underline-loop {
  cursor: pointer;
  color: var(--underline-color, currentColor);
  text-decoration: none;
  position: relative;
}
.underline-loop:after {
  content: "";
  transform-origin: 100%;
  background-color: currentColor;
  width: 100%;
  height: 2px;
  transition: none;
  position: absolute;
  bottom: -4px;
  left: 0;
  transform: scaleX(1);
}
.underline-loop:hover:after {
  animation: 0.9s forwards underline-loop;
}
.underline-loop:focus-visible:after {
  animation: 0.9s forwards underline-loop;
}
@keyframes underline-loop {
  0% {
    transform-origin: 100%;
    opacity: 1;
    transform: scaleX(1);
  }
  49% {
    transform-origin: 100%;
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    transform-origin: 0;
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    transform-origin: 0;
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes float-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}