@layer themes.color {
  main {
    color: var(--ssblack);
  }
}
@layer layouts {
  .ss-wrap {
    --time: .3s;
    --timing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    display: block grid;
    grid-template-columns: auto 25ch 1fr;
    gap: var(--gapy);
    align-items: start;
    transition: grid-template var(--time) var(--timing), gap var(--time) linear;
  }
  .ss-wrap h1 {
    font-size: 1.3em;
    color: var(--orange2);
  }
  .ss-wrap img {
    width: 100%;
    height: auto;
  }
  .ss-wrap.open {
    grid-template-columns: auto 0 1fr;
    transition-delay: var(--time);
    gap: calc(var(--gapy) / 2);
  }
  .ss-wrap.open .ss-filters {
    translate: calc(-100% - var(--gapy) * 5) 0;
    transition-delay: 0.2s;
  }
  *:has(> .shopy) {
    container-name: Shopy;
    container-type: inline-size;
  }
  .shopy {
    gap: 2rem var(--sssize);
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  }
  @container Shopy (max-width: 31.75em) {
    .shopy {
      grid-template-columns: 1fr 1fr;
    }
  }
  [data-toggle-filter] {
    position: sticky;
    top: calc(3 * var(--gapy));
    cursor: pointer;
    width: fit-content;
    border: 1px solid var(--orange);
    background: none;
    padding: 0.3rem;
  }
  [data-toggle-filter]::after {
    content: "";
    background: transparent no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M7.75 17.5a.75.75 0 0 0-.75-.75H2a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 .75-.75M16.25 6.5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75M22.75 17.5a.75.75 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 .75-.75M1.25 6.5A.75.75 0 0 1 2 5.75h9a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75'/%3E%3Cpath d='M13.75 17.4a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0M10.25 6.4a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0'/%3E%3C/g%3E%3C/svg%3E");
    display: block;
    width: calc(1.2 * var(--gapy));
    aspect-ratio: 1/1;
    background-size: 80%;
    background-position: center;
    filter: brightness(0.4) sepia(0.9) hue-rotate(328deg) saturate(5);
  }
  .ss-filters {
    position: sticky;
    height: fit-content;
    max-height: 100vh;
    top: 1rem;
    overflow: auto;
    padding-block-end: 3em;
    overscroll-behavior: contain;
    transition: translate var(--time) var(--timing);
    transition-delay: var(--time);
    min-width: fit-content;
  }
  .ss-filters > * summary::marker {
    margin-block-end: 0.5rem;
  }
  .ss-filters details > div {
    display: grid;
    gap: 0.2em;
  }
  .ss-filters label {
    margin-block: 0.5em;
  }
  .ss-filters > *:nth-child(5n-4) summary::marker {
    color: var(--purple);
  }
  .ss-filters > *:nth-child(5n-3) summary::marker {
    color: var(--yellow);
  }
  .ss-filters > *:nth-child(5n-2) summary::marker {
    color: var(--blue);
  }
  .ss-filters > *:nth-child(5n-1) summary::marker {
    color: var(--green);
  }
  .ss-filters > *:nth-child(5n) summary::marker {
    color: var(--orange);
  }
}
#Piccione {
  translate: calc(-50vw - 100%) 0;
  animation: piccio 3s 1.5s forwards;
  transform: scaleX(-1);
}

@keyframes piccio {
  to {
    translate: calc(45vw - 100%) 0;
  }
}

/*# sourceMappingURL=ssshopy.css.map */