@layer reset, base, components, utilities, sections, snippets, overrides;
@layer snippets{
  .cart-drawer-trigger{
    position:relative;
  }
  .cart-drawer-trigger [ui-slot=badge]{
    position:absolute;
    bottom:-25%;
    right:-25%;
  }
  #cart[popover] [ui-slot=sheet-body]{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  #cart[popover] [ui-slot=sheet-footer]{
    display:flex;
    gap:var(--spacing-16);
    flex-direction:column;
  }
  #cart[popover] [ui-slot=sheet-footer] .footer{
    display:grid;
    grid-template-columns:repeat(2, auto);
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  #cart[popover] [ui-slot=sheet-footer] .footer .label,
  #cart[popover] [ui-slot=sheet-footer] .footer .value{
    font:var(--font-title-lg);
  }
  #cart[popover] [ui-slot=sheet-footer] .footer .value{
    display:flex;
    justify-content:flex-end;
  }
  #cart[popover] [ui-slot=sheet-footer] .footer .description{
    grid-column:1/3;
    color:var(--color-on-surface-variant);
  }
  #cart[popover] [ui-slot=sheet-footer] .navigation{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
    grid-template-columns:auto 1fr;
  }
}