@layer snippets{
  ui-shop-bar{
    --safe-area:var(--spacing-16);
    display:flex;
    position:fixed;
    z-index:50;
    bottom:var(--safe-area);
    left:50%;
    align-items:center;
    justify-content:space-between;
    width:60%;
    padding:var(--spacing-16);
    transform:translate(-50%, calc(100% + var(--safe-area)));
    transition:var(--transition-expressive-default-spatial);
    border-radius:var(--radius-20);
    background-color:white;
    box-shadow:var(--shadow-md);
  }
  ui-shop-bar[data-visible=true]{
    transform:translate(-50%, 0%);
  }
  ui-shop-bar .product{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
  }
  ui-shop-bar .product .image{
    width:90px;
    height:90px;
    overflow:hidden;
    border-radius:var(--radius-12);
  }
  ui-shop-bar .product .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  ui-shop-bar .product .info{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-4);
  }
  ui-shop-bar .product .info .title{
    font:var(--font-body-lg);
  }
  ui-shop-bar .product .info .price{
    display:flex;
    align-items:center;
    font:var(--font-title-md);
    gap:var(--spacing-8);
  }
  ui-shop-bar .product .info .price .compare-at-price{
    opacity:0.5;
    -webkit-text-decoration:line-through;
    text-decoration:line-through;
  }
  ui-shop-bar .actions{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
  }
  ui-shop-bar .actions > ui-shop-button, ui-shop-bar .actions > [ui-slot=button]{
    min-width:180px;
  }
  @media (max-width: 1280px){
    ui-shop-bar{
      width:calc(100% - var(--safe-area));
    }
  }
  @media (max-width: 769px){
    ui-shop-bar .product{
      display:none;
    }
    ui-shop-bar .actions{
      display:grid;
      grid-template-columns:max-content auto;
      width:100%;
    }
  }
}