@layer sections{
  [ui-section=related-products]{
    --gap:var(--spacing-24);
    --item-size:100%;
    display:flex;
    flex-direction:column;
    gap:var(--spacing-32);
  }
  [ui-section=related-products] .items-area{
    width:100%;
  }
  [ui-section=related-products] .items-area [ui-slot=carousel-item]{
    height:auto !important;
    height:initial !important;
  }
  [ui-section=related-products] .controls{
    display:flex;
    justify-content:space-between;
    height:48px;
    margin-block-start:var(--spacing-8);
    gap:var(--spacing-24);
  }
  [ui-section=related-products] .controls [ui-slot=button]{
    color:var(--fg-color);
  }
  [ui-section=related-products] .controls:not([data-show-arrows]), [ui-section=related-products] .controls[data-centered-arrows]{
    justify-content:center;
  }
  [ui-section=related-products] .controls:has([ui-carousel=arrow-previous][disabled]):has([ui-carousel=arrow-next][disabled]){
    display:none;
  }
  [ui-section=related-products] .controls .pagination{
    display:flex;
    gap:var(--spacing-8);
    position:relative;
    align-items:center;
    justify-content:center;
    width:-moz-fit-content;
    width:fit-content;
  }
  [ui-section=related-products] .controls .pagination [ui-carousel=marker]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    transition:var(--transition-standard-default-spatial);
    border:none;
    background-color:transparent;
    color:var(--controls-fg-color);
    cursor:pointer;
  }
  [ui-section=related-products] .controls .pagination [ui-carousel=marker]::before{
    content:"";
    display:flex;
    width:20px;
    height:4px;
    transition:var(--transition-standard-default-spatial);
    border-radius:var(--radius-rounded);
    background-color:color-mix(in srgb, currentcolor 38%, transparent);
  }
  [ui-section=related-products] .controls .pagination [ui-carousel=marker][aria-hidden=true]{
    display:none;
  }
  [ui-section=related-products] .controls .pagination [ui-carousel=marker][aria-selected=true]::before{
    width:inherit;
    background-color:currentcolor;
  }
  @media (max-width: 1400px){
    [ui-section=related-products]{
      --per-page:3 !important;
    }
  }
  @media (max-width: 1024px){
    [ui-section=related-products]{
      --per-page:2 !important;
      display:flex;
      flex-direction:column;
    }
  }
  @media (max-width: 769px){
    [ui-section=related-products]{
      --per-page:1 !important;
    }
  }
}