#youcan-section--header:has([data-floating=true]){
  position:absolute;
  z-index:50;
  width:580px;
  border-color:transparent;
  background-color:transparent;
}
#youcan-section--header:has([data-floating=true]) [data-floating=true]{
  flex-direction:row;
  justify-content:space-between;
  padding:var(--spacing-0);
  background-color:transparent;
}
#youcan-section--header:has([data-floating=true]) [data-floating=true] .cart-trigger{
  position:relative;
}
@media (max-width: 769px){
  #youcan-section--header:has([data-floating=true]){
    width:100%;
  }
}

[ui-section=header]{
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  color:var(--color-primary);
  text-align:center;
  gap:var(--spacing-8);
}
[ui-section=header] .logo{
  width:80px;
  height:auto;
  overflow:hidden;
  aspect-ratio:1/1;
  border-radius:var(--radius-button);
}
[ui-section=header] .logo > img{
  -o-object-fit:contain;
     object-fit:contain;
}
[ui-section=header] > .heading{
  font:var(--font-title-lg);
}
[ui-section=header] > .subheading{
  text-wrap:balance;
}
[ui-section=header] .social-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-block-start:var(--spacing-16);
  gap:var(--spacing-12);
}
[ui-section=header] .menu-trigger{
  position:absolute;
  inset-block-start:var(--spacing-0);
  inset-inline-start:var(--spacing-0);
}
[ui-section=header] #menu [ui-slot=drawer-body]{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-12);
}
[ui-section=header] #menu [ui-slot=drawer-body] .group{
  overflow:hidden;
  border:1px solid var(--color-primary);
  border-radius:var(--radius-section);
}
[ui-section=header] #menu [ui-slot=drawer-body] .group .head{
  padding:var(--spacing-8) var(--spacing-12);
  background-color:var(--color-surface-container);
  color:var(--color-primary);
  border-block-end:1px solid var(--color-primary);
  text-align:start;
}
[ui-section=header] #menu [ui-slot=drawer-body] .group .head .title{
  font:var(--font-title-sm);
}
[ui-section=header] #menu [ui-slot=drawer-body] form{
  display:flex;
  gap:var(--spacing-12);
  padding:var(--spacing-12);
}
[ui-section=header] #menu [ui-slot=drawer-body] form [ui-slot=input]{
  flex:1;
}
[ui-section=header] #menu [ui-slot=drawer-body] .links{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-12);
  padding:var(--spacing-12);
}
[ui-section=header] #menu [ui-slot=drawer-body] .links .link [ui-slot=button]{
  justify-content:space-between;
}